From 53475adafcf7535e3a28400aa8ec431e4cb99592 Mon Sep 17 00:00:00 2001 From: Yann Date: Fri, 14 Aug 2026 16:47:34 -0700 Subject: [PATCH 01/37] Settings become the default theme (#65) settings.tokens.css and settings.ui.css move to theme.default.tokens.css and theme.default.ui.css, each self-layered into the new theme.defaults sublayer, with a theme.default.css entry importing both. mcss.css drops the settings layer and imports, and declares theme.defaults + theme.overrides in the layer order; user themes land in theme.overrides so they beat the default regardless of import order. The site entry (_global.css) activates the default theme explicitly. mcss.css alone no longer paints a page: the default theme carries every design value. Co-Authored-By: Claude Fable 5 --- dist/css/base.reset.css | 2 +- dist/css/component.avatar.css | 2 +- dist/css/component.badge.css | 2 +- dist/css/component.banner.css | 2 +- dist/css/component.breadcrumbs.css | 2 +- dist/css/component.button.css | 2 +- dist/css/component.card.css | 2 +- dist/css/component.faq.css | 2 +- dist/css/component.featureItem.css | 2 +- dist/css/component.field.css | 2 +- dist/css/component.fieldRow.css | 2 +- dist/css/component.footer.css | 2 +- dist/css/component.header.css | 2 +- dist/css/component.hero.css | 2 +- dist/css/component.notice.css | 2 +- dist/css/component.pagination.css | 2 +- dist/css/component.prevNext.css | 2 +- dist/css/component.pricing.css | 2 +- dist/css/component.readProgressBar.css | 2 +- dist/css/component.section.css | 2 +- dist/css/component.socialMedia.css | 2 +- dist/css/component.tags.css | 2 +- dist/css/component.testimonial.css | 2 +- dist/css/component.tiles.css | 2 +- dist/css/component.toc.css | 2 +- dist/css/component.toggle.css | 4 +- dist/css/elements.form.css | 2 +- dist/css/elements.interactive.css | 2 +- dist/css/elements.media.css | 2 +- dist/css/elements.sectioning.css | 2 +- dist/css/elements.table.css | 2 +- dist/css/elements.text.css | 2 +- dist/css/elements.text.quotes.css | 2 +- dist/css/global.a11y.css | 2 +- dist/css/global.animation.css | 2 +- dist/css/global.grid.css | 2 +- dist/css/global.layout.css | 4 +- dist/css/global.prose.css | 2 +- dist/css/global.wrap.css | 2 +- dist/css/help.colors.css | 2 +- dist/css/help.devtools.css | 2 +- dist/css/help.layout.css | 2 +- dist/css/help.opacity.css | 2 +- dist/css/help.ratios.css | 2 +- dist/css/help.spacing.css | 2 +- dist/css/help.typography.css | 2 +- dist/css/mcss.css | 4 +- dist/css/settings.tokens.css | 285 ------ dist/css/settings.ui.css | 622 ------------ dist/css/theme.default.css | 53 +- dist/css/theme.default.tokens.css | 288 ++++++ dist/css/theme.default.ui.css | 630 +++++++++++++ dist/css/theme.wireframe.css | 2 +- dist/mcss.components.css | 4 +- dist/mcss.css | 884 +----------------- dist/mcss.min.css | 2 +- src/layouts/BaseLayout.astro | 2 +- src/styles/_global.css | 18 +- src/styles/framework/component.toggle.css | 2 +- src/styles/framework/global.layout.css | 2 +- src/styles/framework/mcss.css | 25 +- .../framework/settings.media-queries.css | 2 +- src/styles/framework/settings.tokens.css | 256 ----- src/styles/framework/settings.ui.css | 593 ------------ src/styles/framework/theme.default.css | 51 +- src/styles/framework/theme.default.tokens.css | 262 ++++++ src/styles/framework/theme.default.ui.css | 604 ++++++++++++ 67 files changed, 1911 insertions(+), 2776 deletions(-) delete mode 100644 dist/css/settings.tokens.css delete mode 100644 dist/css/settings.ui.css create mode 100644 dist/css/theme.default.tokens.css create mode 100644 dist/css/theme.default.ui.css delete mode 100644 src/styles/framework/settings.tokens.css delete mode 100644 src/styles/framework/settings.ui.css create mode 100644 src/styles/framework/theme.default.tokens.css create mode 100644 src/styles/framework/theme.default.ui.css diff --git a/dist/css/base.reset.css b/dist/css/base.reset.css index d66c21c3..bedf4f90 100644 --- a/dist/css/base.reset.css +++ b/dist/css/base.reset.css @@ -7,7 +7,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px diff --git a/dist/css/component.avatar.css b/dist/css/component.avatar.css index 2ee84f63..989bfb23 100644 --- a/dist/css/component.avatar.css +++ b/dist/css/component.avatar.css @@ -7,7 +7,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px diff --git a/dist/css/component.badge.css b/dist/css/component.badge.css index dc0d0d71..3fbfa212 100644 --- a/dist/css/component.badge.css +++ b/dist/css/component.badge.css @@ -7,7 +7,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px diff --git a/dist/css/component.banner.css b/dist/css/component.banner.css index ea56c1cc..1598b27f 100644 --- a/dist/css/component.banner.css +++ b/dist/css/component.banner.css @@ -7,7 +7,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px diff --git a/dist/css/component.breadcrumbs.css b/dist/css/component.breadcrumbs.css index 999522df..65804e4e 100644 --- a/dist/css/component.breadcrumbs.css +++ b/dist/css/component.breadcrumbs.css @@ -7,7 +7,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px diff --git a/dist/css/component.button.css b/dist/css/component.button.css index 00cac71d..bdcd19d1 100644 --- a/dist/css/component.button.css +++ b/dist/css/component.button.css @@ -7,7 +7,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px diff --git a/dist/css/component.card.css b/dist/css/component.card.css index b605766e..0ff65f7a 100644 --- a/dist/css/component.card.css +++ b/dist/css/component.card.css @@ -7,7 +7,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px diff --git a/dist/css/component.faq.css b/dist/css/component.faq.css index 1429620f..97900d7d 100644 --- a/dist/css/component.faq.css +++ b/dist/css/component.faq.css @@ -7,7 +7,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px diff --git a/dist/css/component.featureItem.css b/dist/css/component.featureItem.css index afc09e15..1ac79fd7 100644 --- a/dist/css/component.featureItem.css +++ b/dist/css/component.featureItem.css @@ -7,7 +7,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px diff --git a/dist/css/component.field.css b/dist/css/component.field.css index ca3dd5ce..ff23f974 100644 --- a/dist/css/component.field.css +++ b/dist/css/component.field.css @@ -7,7 +7,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px diff --git a/dist/css/component.fieldRow.css b/dist/css/component.fieldRow.css index e7bf64ac..ba5e8da0 100644 --- a/dist/css/component.fieldRow.css +++ b/dist/css/component.fieldRow.css @@ -7,7 +7,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px diff --git a/dist/css/component.footer.css b/dist/css/component.footer.css index f104aa7e..359291a5 100644 --- a/dist/css/component.footer.css +++ b/dist/css/component.footer.css @@ -7,7 +7,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px diff --git a/dist/css/component.header.css b/dist/css/component.header.css index 94aac3c7..546d8854 100644 --- a/dist/css/component.header.css +++ b/dist/css/component.header.css @@ -7,7 +7,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px diff --git a/dist/css/component.hero.css b/dist/css/component.hero.css index bf5dc18e..8a486f5b 100644 --- a/dist/css/component.hero.css +++ b/dist/css/component.hero.css @@ -7,7 +7,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px diff --git a/dist/css/component.notice.css b/dist/css/component.notice.css index e196ecce..56a4ed74 100644 --- a/dist/css/component.notice.css +++ b/dist/css/component.notice.css @@ -7,7 +7,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px diff --git a/dist/css/component.pagination.css b/dist/css/component.pagination.css index 19797b1b..59debcc5 100644 --- a/dist/css/component.pagination.css +++ b/dist/css/component.pagination.css @@ -7,7 +7,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px diff --git a/dist/css/component.prevNext.css b/dist/css/component.prevNext.css index 48bbc8b8..aa397f24 100644 --- a/dist/css/component.prevNext.css +++ b/dist/css/component.prevNext.css @@ -7,7 +7,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px diff --git a/dist/css/component.pricing.css b/dist/css/component.pricing.css index 63217db8..222972e0 100644 --- a/dist/css/component.pricing.css +++ b/dist/css/component.pricing.css @@ -7,7 +7,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px diff --git a/dist/css/component.readProgressBar.css b/dist/css/component.readProgressBar.css index 38fcc327..9fd8193b 100644 --- a/dist/css/component.readProgressBar.css +++ b/dist/css/component.readProgressBar.css @@ -7,7 +7,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px diff --git a/dist/css/component.section.css b/dist/css/component.section.css index f780c4b4..257763c5 100644 --- a/dist/css/component.section.css +++ b/dist/css/component.section.css @@ -7,7 +7,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px diff --git a/dist/css/component.socialMedia.css b/dist/css/component.socialMedia.css index 3f516f1d..de714b22 100644 --- a/dist/css/component.socialMedia.css +++ b/dist/css/component.socialMedia.css @@ -7,7 +7,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px diff --git a/dist/css/component.tags.css b/dist/css/component.tags.css index 698140b5..2393f3c6 100644 --- a/dist/css/component.tags.css +++ b/dist/css/component.tags.css @@ -7,7 +7,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px diff --git a/dist/css/component.testimonial.css b/dist/css/component.testimonial.css index f6d75e78..e1a9c346 100644 --- a/dist/css/component.testimonial.css +++ b/dist/css/component.testimonial.css @@ -7,7 +7,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px diff --git a/dist/css/component.tiles.css b/dist/css/component.tiles.css index 64a510f9..e5e02573 100644 --- a/dist/css/component.tiles.css +++ b/dist/css/component.tiles.css @@ -7,7 +7,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px diff --git a/dist/css/component.toc.css b/dist/css/component.toc.css index 4b1adad3..fa9e9505 100644 --- a/dist/css/component.toc.css +++ b/dist/css/component.toc.css @@ -7,7 +7,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px diff --git a/dist/css/component.toggle.css b/dist/css/component.toggle.css index cf52fb67..3884544a 100644 --- a/dist/css/component.toggle.css +++ b/dist/css/component.toggle.css @@ -7,7 +7,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px @@ -26,7 +26,7 @@ xxl: 1920px @layer components { .toggle { - /* Themable via the --toggle-* tokens in settings.ui.css */ + /* Themable via the --toggle-* tokens in theme.default.ui.css */ --toggle-w: var(--toggle-width); --toggle-h: var(--toggle-height); --toggle-bd: var(--toggle-border-width); diff --git a/dist/css/elements.form.css b/dist/css/elements.form.css index bc91b889..5be6baa4 100644 --- a/dist/css/elements.form.css +++ b/dist/css/elements.form.css @@ -7,7 +7,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px diff --git a/dist/css/elements.interactive.css b/dist/css/elements.interactive.css index 556b63c0..4d743f3d 100644 --- a/dist/css/elements.interactive.css +++ b/dist/css/elements.interactive.css @@ -7,7 +7,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px diff --git a/dist/css/elements.media.css b/dist/css/elements.media.css index f9538b04..8304cc13 100644 --- a/dist/css/elements.media.css +++ b/dist/css/elements.media.css @@ -7,7 +7,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px diff --git a/dist/css/elements.sectioning.css b/dist/css/elements.sectioning.css index c79973f6..29e37ed0 100644 --- a/dist/css/elements.sectioning.css +++ b/dist/css/elements.sectioning.css @@ -7,7 +7,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px diff --git a/dist/css/elements.table.css b/dist/css/elements.table.css index 9374349a..0c6474f1 100644 --- a/dist/css/elements.table.css +++ b/dist/css/elements.table.css @@ -7,7 +7,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px diff --git a/dist/css/elements.text.css b/dist/css/elements.text.css index 1e9e09ff..a52c3159 100644 --- a/dist/css/elements.text.css +++ b/dist/css/elements.text.css @@ -7,7 +7,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px diff --git a/dist/css/elements.text.quotes.css b/dist/css/elements.text.quotes.css index 23dab16a..793d28a0 100644 --- a/dist/css/elements.text.quotes.css +++ b/dist/css/elements.text.quotes.css @@ -7,7 +7,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px diff --git a/dist/css/global.a11y.css b/dist/css/global.a11y.css index 3b00d3dd..e41f9bdc 100644 --- a/dist/css/global.a11y.css +++ b/dist/css/global.a11y.css @@ -7,7 +7,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px diff --git a/dist/css/global.animation.css b/dist/css/global.animation.css index 236444ac..b0ef0142 100644 --- a/dist/css/global.animation.css +++ b/dist/css/global.animation.css @@ -7,7 +7,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px diff --git a/dist/css/global.grid.css b/dist/css/global.grid.css index ff78485d..f929634a 100644 --- a/dist/css/global.grid.css +++ b/dist/css/global.grid.css @@ -7,7 +7,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px diff --git a/dist/css/global.layout.css b/dist/css/global.layout.css index 1d0da077..a3a11cc3 100644 --- a/dist/css/global.layout.css +++ b/dist/css/global.layout.css @@ -7,7 +7,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px @@ -37,7 +37,7 @@ xxl: 1920px
…
- Widths come from the layout tokens in settings.ui.css: + Widths come from the layout tokens in theme.default.ui.css: --layout-content-width, --layout-aside-width, --layout-toc-width. */ diff --git a/dist/css/global.prose.css b/dist/css/global.prose.css index d97b490e..d7344ea9 100644 --- a/dist/css/global.prose.css +++ b/dist/css/global.prose.css @@ -7,7 +7,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px diff --git a/dist/css/global.wrap.css b/dist/css/global.wrap.css index 77379abe..279caf8a 100644 --- a/dist/css/global.wrap.css +++ b/dist/css/global.wrap.css @@ -7,7 +7,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px diff --git a/dist/css/help.colors.css b/dist/css/help.colors.css index 2d16e199..0c747fd2 100644 --- a/dist/css/help.colors.css +++ b/dist/css/help.colors.css @@ -7,7 +7,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px diff --git a/dist/css/help.devtools.css b/dist/css/help.devtools.css index fb0a305f..1cfc5882 100644 --- a/dist/css/help.devtools.css +++ b/dist/css/help.devtools.css @@ -7,7 +7,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px diff --git a/dist/css/help.layout.css b/dist/css/help.layout.css index 20fe9c76..a5aeccaf 100644 --- a/dist/css/help.layout.css +++ b/dist/css/help.layout.css @@ -7,7 +7,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px diff --git a/dist/css/help.opacity.css b/dist/css/help.opacity.css index 282b84e1..19409d29 100644 --- a/dist/css/help.opacity.css +++ b/dist/css/help.opacity.css @@ -7,7 +7,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px diff --git a/dist/css/help.ratios.css b/dist/css/help.ratios.css index b9484143..baf3dad4 100644 --- a/dist/css/help.ratios.css +++ b/dist/css/help.ratios.css @@ -7,7 +7,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px diff --git a/dist/css/help.spacing.css b/dist/css/help.spacing.css index ed50f1c7..dd0daeac 100644 --- a/dist/css/help.spacing.css +++ b/dist/css/help.spacing.css @@ -7,7 +7,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px diff --git a/dist/css/help.typography.css b/dist/css/help.typography.css index 8e4e9624..4abbcb39 100644 --- a/dist/css/help.typography.css +++ b/dist/css/help.typography.css @@ -7,7 +7,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px diff --git a/dist/css/mcss.css b/dist/css/mcss.css index 32a61f18..76eae298 100644 --- a/dist/css/mcss.css +++ b/dist/css/mcss.css @@ -46,7 +46,7 @@ @import url(./help.ratios.css) layer(helpers); @import url(./help.spacing.css) layer(helpers); @import url(./help.typography.css) layer(helpers); -@import url(./settings.tokens.css) layer(settings); -@import url(./settings.ui.css) layer(settings); /* @import url(./theme.default.css); */ /* theme: activate at most one */ +/* @import url(./theme.default.tokens.css); */ /* theme: activate at most one */ +/* @import url(./theme.default.ui.css); */ /* theme: activate at most one */ /* @import url(./theme.wireframe.css); */ /* theme: activate at most one */ diff --git a/dist/css/settings.tokens.css b/dist/css/settings.tokens.css deleted file mode 100644 index efb95a49..00000000 --- a/dist/css/settings.tokens.css +++ /dev/null @@ -1,285 +0,0 @@ -/*! mCSS v1.3.0 | MIT | https://mcss.dev */ -/* -SETTINGS MEDIA QUERIES - -https://github.com/argyleink/open-props/blob/main/src/props.media.css -https://open-props.style/#media-queries - -Can't use var() inside media queries 🤦‍♂️ -https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css - -xxs: 240px -xs: 360px -sm: 480px -md: 768px -lg: 1024px -xl: 1440px -xxl: 1920px -*/ - -/* https://github.com/postcss/postcss-mixins */ - -/* Example */ - -/* truncate single line of text and adds … */ - -@layer settings { -/* SETTINGS TOKENS */ - -/* -Can't use var() inside media queries, so breakpoints are hard coded in -settings.media-queries.css - -xxs: 240px xs: 360px sm: 480px md: 768px lg: 1024px xl: 1440px xxl: 1920px -*/ - -/* - -• Dimensions (Margin, Padding, Width, Height) -• Aspect Ratios - -• Font Families -• Font Size -• Font Weight - -• Letter Spacing -• Line Height - -• Colors - -• Box shadows -• Border radius -• Border width -• Opacity -*/ - -:root { - /* GLOBALS */ - - /* DIMENSIONS */ - - /* Sizes */ - - --xs1: 4px; - --xs2: 8px; - --xs3: 12px; - - --sm1: 16px; - --sm2: 20px; - --sm3: 24px; - - --md1: 28px; - --md2: 32px; - --md3: 36px; - - --lg1: 40px; - --lg2: 44px; - --lg3: 48px; - - --xl1: 56px; - --xl2: 64px; - --xl3: 80px; - - --xxl1: 96px; - --xxl2: 112px; - --xxl3: 128px; - - --mega1: 160px; - --mega2: 192px; - --mega3: 224px; - - --giga1: 256px; - --giga2: 288px; - --giga3: 320px; - - --tera1: 384px; - --tera2: 480px; - --tera3: 520px; - - /* Aspect Ratios */ - --ar-square: 1; - --ar-landscape: 4/3; - --ar-portrait: 3/4; - --ar-widescreen: 16/9; - --ar-golden: 1.618/1; - - /* TYPOGRAPHY */ - /* See also elements.text & help.text */ - - /* Font Families */ - /* Local font stacks - More options @ https://modernfontstacks.com */ - --display: - Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, ui-sans-serif, - sans-serif; - --text: ui-sans-serif, system-ui, sans-serif; - --mono: - Dank Mono, Inconsolata, Fira Mono, SF Mono, Monaco, Droid Sans Mono, - Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, - ui-monospace, monospace; - - /* Font Sizes */ - /* Create your own sizes @ https://typescale.com */ - --text-xs: 0.694rem; - --text-sm: 0.833rem; - --text-md: 1rem; - --text-lg: 1.2rem; - --text-xl: 1.44rem; - --display-sm: 1.728rem; - --display-md: 2.074rem; - --display-lg: 2.488rem; - --display-xl: 2.986rem; /* h1 */ - --display-mega: 3.583rem; - --display-giga: 4.299rem; - - /* Heading font sizes are decisions, not scale steps: they map each - heading level onto this scale. See --heading-font-size-* in - settings.ui.css. */ - - /* Font Weights */ - --extra-light: 200; - --light: 300; - --book: 400; - --semi-bold: 600; - --bold: 700; - --black: 900; - - /* Letter Spacing */ - --tracking-sm: -0.05em; - --tracking-md: 0.025em; - --tracking-lg: 0.05em; - --tracking-xl: 0.075em; - --tracking-xxl: 0.15em; - - /* Line Height */ - --leading-xs: 1; - --leading-sm: 1.15; - --leading-md: 1.375; - --leading-lg: 1.5; - --leading-xl: 1.75; - --leading-xxl: 2; - - /* COLORS */ - /* Make your own palettes programmatically: https://www.tints.dev */ - - /* Base */ - - --base-0: #fff; - --base-50: #f6f7f9; - --base-100: #edeef1; - --base-200: #d6dbe1; - --base-300: #b2bbc7; - --base-400: #8897a8; - --base-500: #697a8e; - --base-600: #546375; - --base-700: #4a5666; - --base-800: #3c4550; - --base-900: #353c45; - --base-950: #23282e; - - /* Primary */ - - --primary-50: #f0f9ff; - --primary-100: #e0f2fe; - --primary-200: #bae6fd; - --primary-300: #7dd3fc; - --primary-400: #38bdf8; - --primary-500: #0ea5e9; - --primary-600: #0284c7; - --primary-700: #0369a1; - --primary-800: #075985; - --primary-900: #0c4a6e; - --primary-950: #082f49; - - /* Secondary and/or Highlight goes here */ - - /* Feedback */ - - --yes-100: #d5f6e8; - --yes-200: #afebd4; - --yes-300: #7adbbd; - --yes-400: #46c4a0; - --yes-500: #13886d; - - --no-100: #ffe4e6; - --no-200: #fecdd3; - --no-300: #fda4af; - --no-400: #fb7185; - --no-500: #e11d48; - - --maybe-100: #fff7d6; - --maybe-200: #fff0b3; - --maybe-300: #ffd64a; - --maybe-400: #ffc220; - --maybe-500: #f9a007; - - /* Highlight (text marker) */ - - --highlight-500: #ffee00; - - /* GRADIENTS */ - - --gradient-primary: linear-gradient( - 90deg, - var(--primary-950) 0%, - var(--primary-400) 100% - ); - - /* BORDERS */ - - --border-sm: 1px; - --border-md: 2px; - --border-lg: 4px; - --border-xl: 8px; - --border-xxl: 12px; - - --radius-sm: 3px; - --radius-md: 5px; - --radius-lg: 8px; - --radius-xl: 12px; - --radius-xxl: 16px; - --radius-round: 1e5px; - - /* DROP SHADOWS */ - - --shadow-sm: - 0 1px 3px 0 var(--ui-shadow-color), 0 1px 2px -1px var(--ui-shadow-color); - --shadow-md: - 0 4px 6px -1px var(--ui-shadow-color), 0 2px 4px -2px var(--ui-shadow-color); - --shadow-lg: - 0 8px 13px -3px var(--ui-shadow-color), - 0 4px 6px -4px var(--ui-shadow-color); - --shadow-xl: - 0 20px 20px -5px var(--ui-shadow-color), - 0 8px 10px -6px var(--ui-shadow-color); - --shadow-xxl: - 0px 11px 8px -6px var(--ui-shadow-color), - 0 10px 15px 2px var(--ui-shadow-color); - - /* OPACITY */ - - --o-0: 0; /* overkill for consistency */ - --o-1: 0.2; - --o-2: 0.4; - --o-3: 0.6; - --o-4: 0.8; - --o-5: 1; - - /* Z-INDEX */ - - --z-bottom: -1000000000; - --z-0: 0; /* overkill for consistency */ - --z-1: 10; - --z-2: 20; - --z-3: 30; - --z-4: 40; - --z-5: 50; - --z-top: 1000000000; - - /* TRANSITIONS */ - - --transition: 220ms ease-in-out; - --transition-fast: 100ms ease-in-out; -} - -} diff --git a/dist/css/settings.ui.css b/dist/css/settings.ui.css deleted file mode 100644 index 08a2191b..00000000 --- a/dist/css/settings.ui.css +++ /dev/null @@ -1,622 +0,0 @@ -/*! mCSS v1.3.0 | MIT | https://mcss.dev */ -/* -SETTINGS MEDIA QUERIES - -https://github.com/argyleink/open-props/blob/main/src/props.media.css -https://open-props.style/#media-queries - -Can't use var() inside media queries 🤦‍♂️ -https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css - -xxs: 240px -xs: 360px -sm: 480px -md: 768px -lg: 1024px -xl: 1440px -xxl: 1920px -*/ - -/* https://github.com/postcss/postcss-mixins */ - -/* Example */ - -/* truncate single line of text and adds … */ - -@layer settings { -/* INTERFACE TOKENS */ - -/* - The decisions layer. Every token here is named for what it's FOR (an - element, a component, or a shared meaning) and answers "what does this - thing use by default". Tokens named for what they ARE (--sm1, --base-500, - --bold) are scale tokens and live in settings.tokens.css. That's the - whole split: a name that mentions a UI thing belongs here; a name that - labels a step on a scale belongs there. - - Values, in order of preference: - 1. Another interface token, when the meaning is shared - (--input-border-color: var(--ui-border-color)). - 2. A scale token, when the value should follow the system scales - (--fieldset-padding: var(--sm3)). - 3. A raw value, only where following the scales would be wrong: - content (separator strings, icon URLs), geometry tuned to one - control (--toggle-width), or element-relative measures that track - the element's own type instead of the page (em heading spacing). - The test: "if a theme retuned the scales, should this follow?" - - Deliberate deviations from these defaults live in a theme file - (see theme.default.css). -*/ - -:root { - /* Color scheme (light/dark), toggled by the .theme-light / .theme-dark - classes below. Unrelated to theme files, which are full themes. */ - color-scheme: light dark; - - --ui-border-color: light-dark(var(--base-200), var(--base-500)); - /* Also consumed by the --shadow-* scale in settings.tokens.css: the one - reference between the files that runs upward, so shadows can switch - with the color scheme. Raw alpha colors: the palettes have no alpha - steps. */ - --ui-shadow-color: light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.6)); - - /* Keyboard focus ring (consumed by :focus-visible in global.a11y.css). - Raw 2px on purpose: an accessibility affordance that shouldn't move - when a theme retunes the decorative border scale. */ - --focus-ring-color: light-dark(var(--primary-500), var(--primary-400)); - --focus-ring-width: 2px; - --focus-ring-offset: 2px; - - /* Semantic feedback aliases over the raw feedback palettes. - Prefer these in components and themes; a theme can restyle feedback by - overriding the aliases without touching the raw scales. */ - --success-100: var(--yes-100); - --success-200: var(--yes-200); - --success-300: var(--yes-300); - --success-400: var(--yes-400); - --success-500: var(--yes-500); - --danger-100: var(--no-100); - --danger-200: var(--no-200); - --danger-300: var(--no-300); - --danger-400: var(--no-400); - --danger-500: var(--no-500); - --warning-100: var(--maybe-100); - --warning-200: var(--maybe-200); - --warning-300: var(--maybe-300); - --warning-400: var(--maybe-400); - --warning-500: var(--maybe-500); -} - -:root.theme-light { - color-scheme: light; -} - -:root.theme-dark { - color-scheme: dark; -} - -/* HTML ELEMENTS */ - -:root { - accent-color: var(--primary-500); - - --body-background-color: light-dark(var(--base-0), var(--base-950)); - --body-line-height: var(--leading-lg); - - --input-height: var(--md3); - --input-padding: var(--xs3); - --input-border-width: var(--border-sm); - --input-border-color: var(--ui-border-color); - --input-border-radius: var(--radius-md); - --input-border-color-invalid: light-dark( - var(--danger-500), - var(--danger-400) - ); - - /* Gap under a label that precedes its control */ - --label-spacing: var(--xs1); - - --fieldset-padding: var(--sm3); - --fieldset-border-width: var(--border-sm); - --fieldset-border-color: var(--ui-border-color); - --fieldset-border-radius: var(--radius-lg); - - /* meter: low/medium/high map to the even-less-good, suboptimum, and - optimum pseudo-elements */ - --meter-height: var(--sm1); - --meter-border-radius: var(--radius-md); - --meter-track-color: var(--primary-100); - --meter-low-color: var(--danger-400); - --meter-medium-color: var(--warning-400); - --meter-high-color: var(--success-400); - - --progress-height: var(--sm1); - --progress-color: var(--primary-500); - --progress-track-color: var(--primary-100); - --progress-border-radius: var(--radius-md); - - /* select's chevron, applied as a mask painted with the text color; - any url() works here, data URL or file */ - --select-icon-size: var(--sm3); - --select-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E"); - - --dialog-min-width: var(--tera1); - --dialog-max-width: var(--tera3); - --dialog-padding: var(--lg1) var(--md1); - --dialog-border-width: var(--border-sm); - --dialog-border-color: light-dark(var(--base-200), var(--base-800)); - --dialog-background-color: light-dark(var(--base-50), var(--base-900)); - --dialog-border-radius: var(--radius-lg); - --dialog-backdrop-color: var(--base-950); - --dialog-backdrop-opacity: var(--o-4); - - /* details: same surface as dialog by default, on purpose but - independently overridable. Spacing is the gap between an open - summary and its content. */ - --details-padding: var(--sm1); - --details-spacing: var(--xs3); - --details-border-width: var(--border-sm); - --details-border-color: light-dark(var(--base-200), var(--base-800)); - --details-background-color: light-dark(var(--base-50), var(--base-900)); - --details-border-radius: var(--radius-lg); - --details-icon-size: var(--sm3); - /* Marker icon, applied as a mask painted with the text color; any - url() works here, data URL or file */ - --details-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E"); - - --table-padding: var(--xs2) var(--sm1); - --table-border-width: var(--border-sm); - --table-border-color: light-dark(var(--base-100), var(--base-700)); - --table-border-radius: var(--radius-md); - --table-background-color: none; - /* Gap between the table and its caption */ - --table-caption-spacing: var(--xs3); - /* Gap between a figure's content and caption on either side */ - --figcaption-spacing: var(--xs2); - - /* Text */ - - --heading-font: var(--display); - --heading-weight: var(--black); - --heading-letter-spacing: normal; /* (e.g. -0.02em or var(--tracking-sm)) */ - - --heading-font-size-h1: clamp( - var(--display-md), - 1.269rem + 2.682vw, - var(--display-xl) - ); /* 2.074rem → 2.986rem */ - --heading-font-size-h2: clamp( - var(--display-sm), - 1.057rem + 2.235vw, - var(--display-lg) - ); /* 1.728rem → 2.488rem */ - --heading-font-size-h3: clamp( - var(--text-xl), - 0.881rem + 1.865vw, - var(--display-md) - ); /* 1.44rem → 2.074rem */ - --heading-font-size-h4: clamp( - var(--text-lg), - 0.734rem + 1.553vw, - var(--display-sm) - ); /* 1.2rem → 1.728rem */ - --heading-font-size-h5: clamp( - var(--text-lg), - 0.988rem + 0.706vw, - var(--text-xl) - ); /* 1.2rem → 1.44rem */ - --heading-font-size-h6: clamp( - var(--text-md), - 0.824rem + 0.588vw, - var(--text-lg) - ); /* 1rem → 1.2rem */ - - --heading-line-height: var(--leading-sm); - --heading-line-height-h1: var(--heading-line-height); - --heading-line-height-h2: var(--heading-line-height); - --heading-line-height-h3: var(--heading-line-height); - --heading-line-height-h4: var(--leading-md); - --heading-line-height-h5: var(--leading-md); - --heading-line-height-h6: var(--leading-md); - - /* Headings bottom margin */ - --heading-spacing-h1: 0.4em; - --heading-spacing-h2: 0.4em; - --heading-spacing-h3: 0.4em; - --heading-spacing-h4: 0.4em; - --heading-spacing-h5: 0.4em; - --heading-spacing-h6: 0.4em; - /* Any h1 before h2, h2 before h3, h3 before h4. */ - --heading-spacing-consecutive: 0.3em; - - --text-color: light-dark(var(--base-950), var(--base-200)); - --link-font-weight: var(--semi-bold); - --link-color: light-dark(var(--primary-600), var(--primary-400)); - --link-color-hover: var(--primary-500); - - --text-code-color: light-dark(var(--primary-600), var(--primary-400)); - --text-code-background-color: light-dark( - var(--primary-100), - var(--primary-900) - ); - /* when code inline styling doesn't apply (inside headings and pre) */ - --text-code-muted-color: light-dark(var(--base-500), var(--base-300)); - - --pre-border-radius: var(--radius-md); - /* matching the 0.9em of inline code */ - --pre-font-size: 0.9rem; - - --blockquote-padding-block: var(--sm1); - --blockquote-padding-inline: var(--md1) var(--sm3); - --blockquote-background-color: light-dark( - var(--primary-50), - var(--primary-900) - ); - --blockquote-border-radius: var(--radius-md); - --blockquote-accent-width: var(--xs2); - --blockquote-accent-color: linear-gradient( - var(--primary-800), - var(--primary-500) - ); - - /* .prose related stuff in GLOBAL */ - - /* Optional centered label on
, e.g. "***" or a dingbat */ - --hr-content: ""; - - /* ins: background stays light in both light/dark modes */ - --ins-color: var(--base-950); - --ins-background-color: var(--success-200); - - --marker-color: var(--highlight-500); - - --selection-color: light-dark(var(--base-950), var(--base-0)); - --selection-background-color: light-dark( - var(--primary-200), - var(--primary-700) - ); -} - -/* GLOBAL */ - -:root { - /* Mobile-first: tighter gutters on small screens, 24px from --md up */ - --grid-column-gap: var(--sm1); - --grid-row-gap: var(--sm1); - @media (width >= 768px) { - --grid-column-gap: var(--sm3); - --grid-row-gap: var(--sm3); - } - - --wrap-spacing: var(--sm1); - --wrap-md-spacing: var(--sm3); - --wrap-lg-spacing: 0; - /* Widths are measures: ch tracks the text size, so raw on purpose. */ - --wrap-width-sm: minmax(0, 55ch); - --wrap-width-md: minmax(0, 70ch); - --wrap-width-lg: minmax(0, 900px); - --wrap-width: var(--wrap-width-md); - - --layout-content-width: 70ch; - --layout-aside-width: 245px; - --layout-toc-width: 1fr; - - --prose-spacing: var(--sm1); -} - -/* COMPONENTS */ - -/* Badge */ - -:root { - --badge-font-size: var(--text-sm); - --badge-border-radius: var(--radius-md); - --badge-color: var(--base-0); - --badge-background-color: light-dark(var(--base-700), var(--base-600)); - - --badge-primary-color: var(--base-0); - --badge-primary-background-color: light-dark( - var(--primary-600), - var(--primary-500) - ); - --badge-success-color: light-dark(var(--success-500), var(--base-0)); - --badge-success-background-color: light-dark( - var(--success-100), - var(--success-500) - ); - --badge-danger-color: light-dark(var(--danger-500), var(--base-0)); - --badge-danger-background-color: light-dark( - var(--danger-100), - var(--danger-500) - ); - --badge-warning-color: light-dark(var(--warning-500), var(--base-950)); - --badge-warning-background-color: light-dark( - var(--warning-100), - var(--warning-500) - ); -} - -/* Button */ -/* (Button defaults and primary button colors) */ - -:root { - /* Optical minimums, deliberately off the spacing scale */ - --bt-min-width: 101px; - --bt-min-width-md: 123px; - --bt-min-width-lg: 133px; - - --bt-font-size: var(--text-sm); - --bt-font-size-lg: var(--text-md); - --bt-font-weight: var(--semi-bold); - - --bt-color: var(--text-color); - --bt-color-hover: light-dark(var(--text-color), var(--base-0)); - - --bt-background-color: light-dark(var(--base-0), var(--base-800)); - --bt-background-color-hover: light-dark(var(--base-50), var(--base-900)); - - --bt-border-color: var(--ui-border-color); - --bt-border-width: var(--border-sm); - --bt-border-radius: var(--radius-lg); - --bt-border-radius-lg: var(--radius-xl); - - --bt-outline-color-hover: light-dark(var(--base-950), var(--base-0)); - --bt-outline-background-color-hover: light-dark( - rgb(0 0 0 / 0.1), - rgb(255 255 255 / 0.1) - ); - --bt-outline-border-color: light-dark(var(--base-950), var(--base-0)); - --bt-outline-border-color-hover: light-dark(var(--base-950), var(--base-0)); - - --bt-primary-color: var(--base-0); - --bt-primary-color-hover: var(--base-0); - --bt-primary-background-color: var(--primary-600); - --bt-primary-background-color-hover: var(--primary-500); - --bt-primary-border-color: var(--primary-600); - --bt-primary-border-color-hover: var(--primary-600); -} - -/* Avatar */ - -:root { - --avatar-color: var(--base-0); - --avatar-background-color: var(--base-400); - --avatar-border-color: light-dark(var(--base-0), var(--base-500)); - --avatar-border-width: var(--border-sm); - --avatar-radius: var(--radius-round); - --avatar-status-dot-color-offline: var(--base-300); - --avatar-status-dot-color-online: var(--yes-400); -} - -/* Banner */ - -:root { - --banner-color: var(--base-0); - --banner-background-color: light-dark(var(--primary-600), var(--primary-800)); -} - -/* Breadcrumbs */ - -:root { - --breadcrumbs-separator: "/"; - --breadcrumbs-separator-color: light-dark(var(--base-300), var(--base-600)); - --breadcrumbs-color: light-dark(var(--base-500), var(--base-400)); - --breadcrumbs-color-current: var(--text-color); -} - -/* Card */ - -:root { - --card-spacing: var(--sm3); - --card-color: var(--text-color); - --card-secondary-text-color: light-dark(var(--base-400), var(--base-500)); - --card-bg-color: light-dark(var(--base-100), var(--base-900)); - --card-border-radius: var(--radius-lg); - --card-border-color: var(--ui-border-color); - --card-border-width: var(--border-sm); - --card-shadow: var(--shadow-md); - --card-shadow-hover: var(--shadow-xl); - --card-loading-bg: light-dark(var(--base-200), var(--base-900)); - /* Default media aspect ratio; the Card component pins it inline only - when its aspectRatio prop is passed */ - --card-aspect-ratio: var(--ar-golden); -} - -/* Toggle */ - -:root { - /* Drawn-control geometry, deliberately off the scales */ - --toggle-width: 50px; - --toggle-height: 28px; - --toggle-border-width: 2px; - --toggle-track-color: light-dark(var(--base-300), var(--base-700)); - --toggle-track-color-checked: var(--yes-400); - --toggle-thumb-color: var(--body-background-color); -} - -/* FAQ */ - -:root { - --faq-spacing: var(--xs3); -} - -/* Field */ - -:root { - --field-spacing: var(--xs1); - --field-hint-color: light-dark(var(--base-400), var(--base-500)); - --field-error-color: light-dark(var(--danger-500), var(--danger-300)); - /*Field's hint/error position. Use `static` to reflow under, use `absolute` - (and leave enough space below) if you don't want any shift on errors */ - --field-message-position: static; -} - -/* FeatureItem */ - -:root { - --featureItem-icon-box-size: var(--lg3); - --featureItem-icon-size: var(--sm3); - --featureItem-icon-color: light-dark(var(--primary-600), var(--primary-300)); - --featureItem-icon-background-color: light-dark( - var(--primary-100), - var(--primary-900) - ); - --featureItem-icon-border-radius: var(--radius-lg); -} - -/* Footer */ - -:root { - --footer-background-color: light-dark(var(--primary-950), var(--base-950)); - --footer-text-color: light-dark(var(--base-0), var(--base-200)); - --footer-border-width: var(--border-md); - --footer-border-color: light-dark(transparent, var(--base-700)); - --footer-link-color: light-dark(var(--base-0), var(--base-200)); - --footer-link-color-hover: light-dark(var(--primary-200), var(--base-0)); -} - -/* Header */ - -:root { - --header-height: var(--xl1); - --header-padding: var(--sm1); - @media (width >= 768px) { - --header-height: var(--xl2); - --header-padding: var(--sm3); - } - --header-background-color: light-dark(var(--base-0), var(--base-950)); - - /* The mobile menu is an always-dark by design */ - --header-menu-background-color: var(--base-950); - --header-menu-color: var(--base-0); - --header-menu-color-current: var(--primary-400); - --header-menu-secondary-color: var(--base-300); - --header-menu-border-color: var(--base-500); -} - -/* Hero */ - -:root { - --hero-radius: var(--radius-xl); - --hero-content-padding: var(--md3); - --hero-actions-spacing: var(--lg3); - --hero-pagination-dot: var(--sm1); - --hero-pagination-dot-color: var(--base-0); - --hero-pagination-dot-active-color: var(--primary-600); - --hero-pagination-opacity: var(--o-4); -} - -/* Pagination */ - -:root { - --pagination-size: var(--md3); - --pagination-border-radius: var(--radius-md); - --pagination-color: var(--text-color); - --pagination-color-current: var(--base-0); - --pagination-background-color-current: light-dark( - var(--primary-600), - var(--primary-500) - ); - --pagination-background-color-hover: light-dark( - var(--base-100), - var(--base-800) - ); -} - -/* PrevNext */ - -:root { - --prevNext-border-color: var(--ui-border-color); - --prevNext-border-radius: var(--radius-lg); - --prevNext-border-color-hover: var(--link-color); - --prevNext-label-color: light-dark(var(--base-400), var(--base-500)); -} - -/* Notice */ - -:root { - --notice-spacing: var(--sm1); - --notice-text-color: light-dark(var(--base-950), var(--base-0)); - --notice-background-color: light-dark(var(--base-50), var(--base-800)); - --notice-border-color: light-dark(var(--base-200), var(--base-500)); - --notice-border-width: var(--border-sm); - --notice-border-radius: var(--radius-lg); -} - -/* Pricing */ - -:root { - --pricingCard-highlight-border-color: light-dark( - var(--primary-600), - var(--primary-400) - ); - --pricingCard-check-color: light-dark(var(--success-500), var(--success-400)); -} - -/* Read Progress Bar */ - -:root { - --readProgressBar-height: var(--xs1); - --readProgressBar-color: linear-gradient( - 90deg, - var(--primary-600) 0%, - var(--primary-400) 100% - ); -} - -/* Section */ - -:root { - --section-spacing: var(--xl3); - --section-header-spacing: var(--lg3); - --section-eyebrow-color: light-dark(var(--primary-600), var(--primary-400)); - --section-lede-color: light-dark(var(--base-500), var(--base-400)); - --section-filled-background-color: light-dark( - var(--base-50), - var(--base-900) - ); - --section-primary-background-color: light-dark( - var(--primary-600), - var(--primary-900) - ); - --section-primary-text-color: var(--base-0); - --section-primary-link-color: var(--primary-100); - --section-primary-link-color-hover: var(--base-0); - --section-primary-eyebrow-color: var(--primary-200); - --section-primary-lede-color: var(--primary-100); -} - -/* Testimonial */ - -:root { - --testimonial-role-color: light-dark(var(--base-400), var(--base-500)); -} - -/* Tags */ - -:root { - --tags-padding: var(--xs2); - --tags-font-size: var(--text-sm); - --tags-color: light-dark(var(--base-500), var(--base-400)); - --tags-background-color: light-dark(var(--base-100), var(--base-800)); - --tags-background-color-hover: light-dark(var(--base-200), var(--base-950)); - --tags-radius: var(--radius-md); -} - -/* Tiles has no tokens here: its column count is set by container queries in - component.tiles.css since custom properties don't work inside @container. -*/ - -/* TOC */ - -:root { - --toc-color: var(--link-color); - --toc-color-hover: var(--link-color-hover); - --toc-spacing: var(--xs1); - --toc-indentation: var(--xs3); - --toc-icon-size: var(--sm1); -} - -} diff --git a/dist/css/theme.default.css b/dist/css/theme.default.css index e9c5d554..394b9c4a 100644 --- a/dist/css/theme.default.css +++ b/dist/css/theme.default.css @@ -7,7 +7,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px @@ -24,47 +24,26 @@ xxl: 1920px /* truncate single line of text and adds … */ -/* DEFAULT THEME (template) */ +/* DEFAULT THEME (entry) */ /* - A theme is a file of token overrides, plus optional rules for what - tokens can't express. Swap which theme file your entry point imports and - the whole site restyles; everything a theme doesn't mention falls back to - the framework defaults (settings.tokens.css + settings.ui.css). - - Themes are self-layered: the @layer theme block below slots this file - into the layer order declared in mcss.css no matter how it's loaded - (plain @import, link tag, bundler). Import exactly one theme from your - own entry point, after mcss.css: + The framework's design values: the scales (theme.default.tokens.css) and + the defaults every element and component consumes (theme.default.ui.css). + Activate it from your own entry point, right after mcss.css: @import url(./framework/mcss.css); - @import url(./framework/theme.wireframe.css); + @import url(./framework/theme.default.css); - mCSS imports no theme by default: an empty theme layer IS the default - look. Copy this file to start your own theme. + mcss.css imports no theme itself; without this file every token is unset + and the page renders half-styled. - Guidelines: - - Prefer token overrides. Override raw tokens (--base-*, --text) to shift - the whole palette or type, interface tokens (--ui-border-color, - --heading-font) for cross-cutting changes, or component tokens - (--bt-border-radius) for surgical ones. - - Rules are for what tokens can't express (pseudo-elements, - nth-child rhythm, text-decoration). Theme files are the one place - allowed to style component classes from outside; they still lose - to your unlayered CSS and to helpers, by design. - - No !important: that privilege is reserved for the helpers layer. + Never edit the default theme. Your palette, type, and overrides go in a + theme of your own, imported after this one (copy theme.starter.css). The + parts here land in the `theme.defaults` layer and your theme lands in + `theme.overrides`, so yours wins no matter the import order. A full + replacement skin works the same way: theme.wireframe.css composes this + entry and overrides on top. */ -@layer theme { - :root { - /* A new palette usually gets you 80% of the way: */ - /* --base-0: #fff; */ - /* --primary-500: rebeccapurple; */ - /* Then reach for interface and component tokens as needed: */ - /* --heading-font: Georgia, serif; */ - /* --card-border-radius: 0; */ - /* A theme may also add scales the framework doesn't ship, */ - /* e.g. a second accent, and use them in its own style rules: */ - /* --secondary-500: teal; */ - } -} +@import url(./theme.default.tokens.css); +@import url(./theme.default.ui.css); diff --git a/dist/css/theme.default.tokens.css b/dist/css/theme.default.tokens.css new file mode 100644 index 00000000..f3884d03 --- /dev/null +++ b/dist/css/theme.default.tokens.css @@ -0,0 +1,288 @@ +/*! mCSS v1.3.0 | MIT | https://mcss.dev */ +/* +SETTINGS MEDIA QUERIES + +https://github.com/argyleink/open-props/blob/main/src/props.media.css +https://open-props.style/#media-queries + +Can't use var() inside media queries 🤦‍♂️ +https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 +so breakpoints are not in theme.default.tokens.css + +xxs: 240px +xs: 360px +sm: 480px +md: 768px +lg: 1024px +xl: 1440px +xxl: 1920px +*/ + +/* https://github.com/postcss/postcss-mixins */ + +/* Example */ + +/* truncate single line of text and adds … */ + +/* DEFAULT THEME: TOKENS */ + +/* + The scales: every token here is named for what it IS (a step on a scale), + never for what it's for. Part of the default theme (see theme.default.css); + don't edit it, override from your own theme (see theme.starter.css). + + Can't use var() inside media queries, so breakpoints are hard coded in + settings.media-queries.css: + xxs: 240px xs: 360px sm: 480px md: 768px lg: 1024px xl: 1440px xxl: 1920px +*/ + +@layer theme.defaults { + /* + +• Dimensions (Margin, Padding, Width, Height) +• Aspect Ratios + +• Font Families +• Font Size +• Font Weight + +• Letter Spacing +• Line Height + +• Colors + +• Box shadows +• Border radius +• Border width +• Opacity +*/ + + :root { + /* GLOBALS */ + + /* DIMENSIONS */ + + /* Sizes */ + + --xs1: 4px; + --xs2: 8px; + --xs3: 12px; + + --sm1: 16px; + --sm2: 20px; + --sm3: 24px; + + --md1: 28px; + --md2: 32px; + --md3: 36px; + + --lg1: 40px; + --lg2: 44px; + --lg3: 48px; + + --xl1: 56px; + --xl2: 64px; + --xl3: 80px; + + --xxl1: 96px; + --xxl2: 112px; + --xxl3: 128px; + + --mega1: 160px; + --mega2: 192px; + --mega3: 224px; + + --giga1: 256px; + --giga2: 288px; + --giga3: 320px; + + --tera1: 384px; + --tera2: 480px; + --tera3: 520px; + + /* Aspect Ratios */ + --ar-square: 1; + --ar-landscape: 4/3; + --ar-portrait: 3/4; + --ar-widescreen: 16/9; + --ar-golden: 1.618/1; + + /* TYPOGRAPHY */ + /* See also elements.text & help.text */ + + /* Font Families */ + /* Local font stacks - More options @ https://modernfontstacks.com */ + --display: + Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, ui-sans-serif, + sans-serif; + --text: ui-sans-serif, system-ui, sans-serif; + --mono: + Dank Mono, Inconsolata, Fira Mono, SF Mono, Monaco, Droid Sans Mono, + Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, + ui-monospace, monospace; + + /* Font Sizes */ + /* Create your own sizes @ https://typescale.com */ + --text-xs: 0.694rem; + --text-sm: 0.833rem; + --text-md: 1rem; + --text-lg: 1.2rem; + --text-xl: 1.44rem; + --display-sm: 1.728rem; + --display-md: 2.074rem; + --display-lg: 2.488rem; + --display-xl: 2.986rem; /* h1 */ + --display-mega: 3.583rem; + --display-giga: 4.299rem; + + /* Heading font sizes are decisions, not scale steps: they map each + heading level onto this scale. See --heading-font-size-* in + theme.default.ui.css. */ + + /* Font Weights */ + --extra-light: 200; + --light: 300; + --book: 400; + --semi-bold: 600; + --bold: 700; + --black: 900; + + /* Letter Spacing */ + --tracking-sm: -0.05em; + --tracking-md: 0.025em; + --tracking-lg: 0.05em; + --tracking-xl: 0.075em; + --tracking-xxl: 0.15em; + + /* Line Height */ + --leading-xs: 1; + --leading-sm: 1.15; + --leading-md: 1.375; + --leading-lg: 1.5; + --leading-xl: 1.75; + --leading-xxl: 2; + + /* COLORS */ + /* Make your own palettes programmatically: https://www.tints.dev */ + + /* Base */ + + --base-0: #fff; + --base-50: #f6f7f9; + --base-100: #edeef1; + --base-200: #d6dbe1; + --base-300: #b2bbc7; + --base-400: #8897a8; + --base-500: #697a8e; + --base-600: #546375; + --base-700: #4a5666; + --base-800: #3c4550; + --base-900: #353c45; + --base-950: #23282e; + + /* Primary */ + + --primary-50: #f0f9ff; + --primary-100: #e0f2fe; + --primary-200: #bae6fd; + --primary-300: #7dd3fc; + --primary-400: #38bdf8; + --primary-500: #0ea5e9; + --primary-600: #0284c7; + --primary-700: #0369a1; + --primary-800: #075985; + --primary-900: #0c4a6e; + --primary-950: #082f49; + + /* Secondary and/or Highlight goes here */ + + /* Feedback */ + + --yes-100: #d5f6e8; + --yes-200: #afebd4; + --yes-300: #7adbbd; + --yes-400: #46c4a0; + --yes-500: #13886d; + + --no-100: #ffe4e6; + --no-200: #fecdd3; + --no-300: #fda4af; + --no-400: #fb7185; + --no-500: #e11d48; + + --maybe-100: #fff7d6; + --maybe-200: #fff0b3; + --maybe-300: #ffd64a; + --maybe-400: #ffc220; + --maybe-500: #f9a007; + + /* Highlight (text marker) */ + + --highlight-500: #ffee00; + + /* GRADIENTS */ + + --gradient-primary: linear-gradient( + 90deg, + var(--primary-950) 0%, + var(--primary-400) 100% + ); + + /* BORDERS */ + + --border-sm: 1px; + --border-md: 2px; + --border-lg: 4px; + --border-xl: 8px; + --border-xxl: 12px; + + --radius-sm: 3px; + --radius-md: 5px; + --radius-lg: 8px; + --radius-xl: 12px; + --radius-xxl: 16px; + --radius-round: 1e5px; + + /* DROP SHADOWS */ + + --shadow-sm: + 0 1px 3px 0 var(--ui-shadow-color), 0 1px 2px -1px var(--ui-shadow-color); + --shadow-md: + 0 4px 6px -1px var(--ui-shadow-color), + 0 2px 4px -2px var(--ui-shadow-color); + --shadow-lg: + 0 8px 13px -3px var(--ui-shadow-color), + 0 4px 6px -4px var(--ui-shadow-color); + --shadow-xl: + 0 20px 20px -5px var(--ui-shadow-color), + 0 8px 10px -6px var(--ui-shadow-color); + --shadow-xxl: + 0px 11px 8px -6px var(--ui-shadow-color), + 0 10px 15px 2px var(--ui-shadow-color); + + /* OPACITY */ + + --o-0: 0; /* overkill for consistency */ + --o-1: 0.2; + --o-2: 0.4; + --o-3: 0.6; + --o-4: 0.8; + --o-5: 1; + + /* Z-INDEX */ + + --z-bottom: -1000000000; + --z-0: 0; /* overkill for consistency */ + --z-1: 10; + --z-2: 20; + --z-3: 30; + --z-4: 40; + --z-5: 50; + --z-top: 1000000000; + + /* TRANSITIONS */ + + --transition: 220ms ease-in-out; + --transition-fast: 100ms ease-in-out; + } +} diff --git a/dist/css/theme.default.ui.css b/dist/css/theme.default.ui.css new file mode 100644 index 00000000..b329b117 --- /dev/null +++ b/dist/css/theme.default.ui.css @@ -0,0 +1,630 @@ +/*! mCSS v1.3.0 | MIT | https://mcss.dev */ +/* +SETTINGS MEDIA QUERIES + +https://github.com/argyleink/open-props/blob/main/src/props.media.css +https://open-props.style/#media-queries + +Can't use var() inside media queries 🤦‍♂️ +https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 +so breakpoints are not in theme.default.tokens.css + +xxs: 240px +xs: 360px +sm: 480px +md: 768px +lg: 1024px +xl: 1440px +xxl: 1920px +*/ + +/* https://github.com/postcss/postcss-mixins */ + +/* Example */ + +/* truncate single line of text and adds … */ + +/* DEFAULT THEME: UI */ + +/* + The decisions. Every token here is named for what it's FOR (an + element, a component, or a shared meaning) and answers "what does this + thing use by default". Tokens named for what they ARE (--sm1, --base-500, + --bold) are scale tokens and live in theme.default.tokens.css. That's the + whole split: a name that mentions a UI thing belongs here; a name that + labels a step on a scale belongs there. + + Values, in order of preference: + 1. Another ui token, when the meaning is shared + (--input-border-color: var(--ui-border-color)). + 2. A scale token, when the value should follow the system scales + (--fieldset-padding: var(--sm3)). + 3. A raw value, only where following the scales would be wrong: + content (separator strings, icon URLs), geometry tuned to one + control (--toggle-width), or element-relative measures that track + the element's own type instead of the page (em heading spacing). + The test: "if a theme retuned the scales, should this follow?" + + Part of the default theme (see theme.default.css); don't edit it, + override from your own theme (see theme.starter.css). +*/ + +@layer theme.defaults { + :root { + /* Color scheme (light/dark), toggled by the .theme-light / .theme-dark + classes below. Unrelated to theme files, which are full themes. */ + color-scheme: light dark; + + --ui-border-color: light-dark(var(--base-200), var(--base-500)); + /* Also consumed by the --shadow-* scale in theme.default.tokens.css: + the one reference between the files that runs upward, so shadows can + switch with the color scheme. Raw alpha colors: the palettes have no + alpha steps. */ + --ui-shadow-color: light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.6)); + + /* Keyboard focus ring (consumed by :focus-visible in global.a11y.css). + Raw 2px on purpose: an accessibility affordance that shouldn't move + when a theme retunes the decorative border scale. */ + --focus-ring-color: light-dark(var(--primary-500), var(--primary-400)); + --focus-ring-width: 2px; + --focus-ring-offset: 2px; + + /* Semantic feedback aliases over the raw feedback palettes. + Prefer these in components and themes; a theme can restyle feedback by + overriding the aliases without touching the raw scales. */ + --success-100: var(--yes-100); + --success-200: var(--yes-200); + --success-300: var(--yes-300); + --success-400: var(--yes-400); + --success-500: var(--yes-500); + --danger-100: var(--no-100); + --danger-200: var(--no-200); + --danger-300: var(--no-300); + --danger-400: var(--no-400); + --danger-500: var(--no-500); + --warning-100: var(--maybe-100); + --warning-200: var(--maybe-200); + --warning-300: var(--maybe-300); + --warning-400: var(--maybe-400); + --warning-500: var(--maybe-500); + } + + :root.theme-light { + color-scheme: light; + } + + :root.theme-dark { + color-scheme: dark; + } + + /* HTML ELEMENTS */ + + :root { + accent-color: var(--primary-500); + + --body-background-color: light-dark(var(--base-0), var(--base-950)); + --body-line-height: var(--leading-lg); + + --input-height: var(--md3); + --input-padding: var(--xs3); + --input-border-width: var(--border-sm); + --input-border-color: var(--ui-border-color); + --input-border-radius: var(--radius-md); + --input-border-color-invalid: light-dark( + var(--danger-500), + var(--danger-400) + ); + + /* Gap under a label that precedes its control */ + --label-spacing: var(--xs1); + + --fieldset-padding: var(--sm3); + --fieldset-border-width: var(--border-sm); + --fieldset-border-color: var(--ui-border-color); + --fieldset-border-radius: var(--radius-lg); + + /* meter: low/medium/high map to the even-less-good, suboptimum, and + optimum pseudo-elements */ + --meter-height: var(--sm1); + --meter-border-radius: var(--radius-md); + --meter-track-color: var(--primary-100); + --meter-low-color: var(--danger-400); + --meter-medium-color: var(--warning-400); + --meter-high-color: var(--success-400); + + --progress-height: var(--sm1); + --progress-color: var(--primary-500); + --progress-track-color: var(--primary-100); + --progress-border-radius: var(--radius-md); + + /* select's chevron, applied as a mask painted with the text color; + any url() works here, data URL or file */ + --select-icon-size: var(--sm3); + --select-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E"); + + --dialog-min-width: var(--tera1); + --dialog-max-width: var(--tera3); + --dialog-padding: var(--lg1) var(--md1); + --dialog-border-width: var(--border-sm); + --dialog-border-color: light-dark(var(--base-200), var(--base-800)); + --dialog-background-color: light-dark(var(--base-50), var(--base-900)); + --dialog-border-radius: var(--radius-lg); + --dialog-backdrop-color: var(--base-950); + --dialog-backdrop-opacity: var(--o-4); + + /* details: same surface as dialog by default, on purpose but + independently overridable. Spacing is the gap between an open + summary and its content. */ + --details-padding: var(--sm1); + --details-spacing: var(--xs3); + --details-border-width: var(--border-sm); + --details-border-color: light-dark(var(--base-200), var(--base-800)); + --details-background-color: light-dark(var(--base-50), var(--base-900)); + --details-border-radius: var(--radius-lg); + --details-icon-size: var(--sm3); + /* Marker icon, applied as a mask painted with the text color; any + url() works here, data URL or file */ + --details-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E"); + + --table-padding: var(--xs2) var(--sm1); + --table-border-width: var(--border-sm); + --table-border-color: light-dark(var(--base-100), var(--base-700)); + --table-border-radius: var(--radius-md); + --table-background-color: none; + /* Gap between the table and its caption */ + --table-caption-spacing: var(--xs3); + /* Gap between a figure's content and caption on either side */ + --figcaption-spacing: var(--xs2); + + /* Text */ + + --heading-font: var(--display); + --heading-weight: var(--black); + --heading-letter-spacing: normal; /* (e.g. -0.02em or var(--tracking-sm)) */ + + --heading-font-size-h1: clamp( + var(--display-md), + 1.269rem + 2.682vw, + var(--display-xl) + ); /* 2.074rem → 2.986rem */ + --heading-font-size-h2: clamp( + var(--display-sm), + 1.057rem + 2.235vw, + var(--display-lg) + ); /* 1.728rem → 2.488rem */ + --heading-font-size-h3: clamp( + var(--text-xl), + 0.881rem + 1.865vw, + var(--display-md) + ); /* 1.44rem → 2.074rem */ + --heading-font-size-h4: clamp( + var(--text-lg), + 0.734rem + 1.553vw, + var(--display-sm) + ); /* 1.2rem → 1.728rem */ + --heading-font-size-h5: clamp( + var(--text-lg), + 0.988rem + 0.706vw, + var(--text-xl) + ); /* 1.2rem → 1.44rem */ + --heading-font-size-h6: clamp( + var(--text-md), + 0.824rem + 0.588vw, + var(--text-lg) + ); /* 1rem → 1.2rem */ + + --heading-line-height: var(--leading-sm); + --heading-line-height-h1: var(--heading-line-height); + --heading-line-height-h2: var(--heading-line-height); + --heading-line-height-h3: var(--heading-line-height); + --heading-line-height-h4: var(--leading-md); + --heading-line-height-h5: var(--leading-md); + --heading-line-height-h6: var(--leading-md); + + /* Headings bottom margin */ + --heading-spacing-h1: 0.4em; + --heading-spacing-h2: 0.4em; + --heading-spacing-h3: 0.4em; + --heading-spacing-h4: 0.4em; + --heading-spacing-h5: 0.4em; + --heading-spacing-h6: 0.4em; + /* Any h1 before h2, h2 before h3, h3 before h4. */ + --heading-spacing-consecutive: 0.3em; + + --text-color: light-dark(var(--base-950), var(--base-200)); + --link-font-weight: var(--semi-bold); + --link-color: light-dark(var(--primary-600), var(--primary-400)); + --link-color-hover: var(--primary-500); + + --text-code-color: light-dark(var(--primary-600), var(--primary-400)); + --text-code-background-color: light-dark( + var(--primary-100), + var(--primary-900) + ); + /* when code inline styling doesn't apply (inside headings and pre) */ + --text-code-muted-color: light-dark(var(--base-500), var(--base-300)); + + --pre-border-radius: var(--radius-md); + /* matching the 0.9em of inline code */ + --pre-font-size: 0.9rem; + + --blockquote-padding-block: var(--sm1); + --blockquote-padding-inline: var(--md1) var(--sm3); + --blockquote-background-color: light-dark( + var(--primary-50), + var(--primary-900) + ); + --blockquote-border-radius: var(--radius-md); + --blockquote-accent-width: var(--xs2); + --blockquote-accent-color: linear-gradient( + var(--primary-800), + var(--primary-500) + ); + + /* .prose related stuff in GLOBAL */ + + /* Optional centered label on
, e.g. "***" or a dingbat */ + --hr-content: ""; + + /* ins: background stays light in both light/dark modes */ + --ins-color: var(--base-950); + --ins-background-color: var(--success-200); + + --marker-color: var(--highlight-500); + + --selection-color: light-dark(var(--base-950), var(--base-0)); + --selection-background-color: light-dark( + var(--primary-200), + var(--primary-700) + ); + } + + /* GLOBAL */ + + :root { + /* Mobile-first: tighter gutters on small screens, 24px from --md up */ + --grid-column-gap: var(--sm1); + --grid-row-gap: var(--sm1); + @media (width >= 768px) { + --grid-column-gap: var(--sm3); + --grid-row-gap: var(--sm3); + } + + --wrap-spacing: var(--sm1); + --wrap-md-spacing: var(--sm3); + --wrap-lg-spacing: 0; + /* Widths are measures: ch tracks the text size, so raw on purpose. */ + --wrap-width-sm: minmax(0, 55ch); + --wrap-width-md: minmax(0, 70ch); + --wrap-width-lg: minmax(0, 900px); + --wrap-width: var(--wrap-width-md); + + --layout-content-width: 70ch; + --layout-aside-width: 245px; + --layout-toc-width: 1fr; + + --prose-spacing: var(--sm1); + } + + /* COMPONENTS */ + + /* Badge */ + + :root { + --badge-font-size: var(--text-sm); + --badge-border-radius: var(--radius-md); + --badge-color: var(--base-0); + --badge-background-color: light-dark(var(--base-700), var(--base-600)); + + --badge-primary-color: var(--base-0); + --badge-primary-background-color: light-dark( + var(--primary-600), + var(--primary-500) + ); + --badge-success-color: light-dark(var(--success-500), var(--base-0)); + --badge-success-background-color: light-dark( + var(--success-100), + var(--success-500) + ); + --badge-danger-color: light-dark(var(--danger-500), var(--base-0)); + --badge-danger-background-color: light-dark( + var(--danger-100), + var(--danger-500) + ); + --badge-warning-color: light-dark(var(--warning-500), var(--base-950)); + --badge-warning-background-color: light-dark( + var(--warning-100), + var(--warning-500) + ); + } + + /* Button */ + /* (Button defaults and primary button colors) */ + + :root { + /* Optical minimums, deliberately off the spacing scale */ + --bt-min-width: 101px; + --bt-min-width-md: 123px; + --bt-min-width-lg: 133px; + + --bt-font-size: var(--text-sm); + --bt-font-size-lg: var(--text-md); + --bt-font-weight: var(--semi-bold); + + --bt-color: var(--text-color); + --bt-color-hover: light-dark(var(--text-color), var(--base-0)); + + --bt-background-color: light-dark(var(--base-0), var(--base-800)); + --bt-background-color-hover: light-dark(var(--base-50), var(--base-900)); + + --bt-border-color: var(--ui-border-color); + --bt-border-width: var(--border-sm); + --bt-border-radius: var(--radius-lg); + --bt-border-radius-lg: var(--radius-xl); + + --bt-outline-color-hover: light-dark(var(--base-950), var(--base-0)); + --bt-outline-background-color-hover: light-dark( + rgb(0 0 0 / 0.1), + rgb(255 255 255 / 0.1) + ); + --bt-outline-border-color: light-dark(var(--base-950), var(--base-0)); + --bt-outline-border-color-hover: light-dark(var(--base-950), var(--base-0)); + + --bt-primary-color: var(--base-0); + --bt-primary-color-hover: var(--base-0); + --bt-primary-background-color: var(--primary-600); + --bt-primary-background-color-hover: var(--primary-500); + --bt-primary-border-color: var(--primary-600); + --bt-primary-border-color-hover: var(--primary-600); + } + + /* Avatar */ + + :root { + --avatar-color: var(--base-0); + --avatar-background-color: var(--base-400); + --avatar-border-color: light-dark(var(--base-0), var(--base-500)); + --avatar-border-width: var(--border-sm); + --avatar-radius: var(--radius-round); + --avatar-status-dot-color-offline: var(--base-300); + --avatar-status-dot-color-online: var(--yes-400); + } + + /* Banner */ + + :root { + --banner-color: var(--base-0); + --banner-background-color: light-dark( + var(--primary-600), + var(--primary-800) + ); + } + + /* Breadcrumbs */ + + :root { + --breadcrumbs-separator: "/"; + --breadcrumbs-separator-color: light-dark(var(--base-300), var(--base-600)); + --breadcrumbs-color: light-dark(var(--base-500), var(--base-400)); + --breadcrumbs-color-current: var(--text-color); + } + + /* Card */ + + :root { + --card-spacing: var(--sm3); + --card-color: var(--text-color); + --card-secondary-text-color: light-dark(var(--base-400), var(--base-500)); + --card-bg-color: light-dark(var(--base-100), var(--base-900)); + --card-border-radius: var(--radius-lg); + --card-border-color: var(--ui-border-color); + --card-border-width: var(--border-sm); + --card-shadow: var(--shadow-md); + --card-shadow-hover: var(--shadow-xl); + --card-loading-bg: light-dark(var(--base-200), var(--base-900)); + /* Default media aspect ratio; the Card component pins it inline only + when its aspectRatio prop is passed */ + --card-aspect-ratio: var(--ar-golden); + } + + /* Toggle */ + + :root { + /* Drawn-control geometry, deliberately off the scales */ + --toggle-width: 50px; + --toggle-height: 28px; + --toggle-border-width: 2px; + --toggle-track-color: light-dark(var(--base-300), var(--base-700)); + --toggle-track-color-checked: var(--yes-400); + --toggle-thumb-color: var(--body-background-color); + } + + /* FAQ */ + + :root { + --faq-spacing: var(--xs3); + } + + /* Field */ + + :root { + --field-spacing: var(--xs1); + --field-hint-color: light-dark(var(--base-400), var(--base-500)); + --field-error-color: light-dark(var(--danger-500), var(--danger-300)); + /*Field's hint/error position. Use `static` to reflow under, use `absolute` + (and leave enough space below) if you don't want any shift on errors */ + --field-message-position: static; + } + + /* FeatureItem */ + + :root { + --featureItem-icon-box-size: var(--lg3); + --featureItem-icon-size: var(--sm3); + --featureItem-icon-color: light-dark( + var(--primary-600), + var(--primary-300) + ); + --featureItem-icon-background-color: light-dark( + var(--primary-100), + var(--primary-900) + ); + --featureItem-icon-border-radius: var(--radius-lg); + } + + /* Footer */ + + :root { + --footer-background-color: light-dark(var(--primary-950), var(--base-950)); + --footer-text-color: light-dark(var(--base-0), var(--base-200)); + --footer-border-width: var(--border-md); + --footer-border-color: light-dark(transparent, var(--base-700)); + --footer-link-color: light-dark(var(--base-0), var(--base-200)); + --footer-link-color-hover: light-dark(var(--primary-200), var(--base-0)); + } + + /* Header */ + + :root { + --header-height: var(--xl1); + --header-padding: var(--sm1); + @media (width >= 768px) { + --header-height: var(--xl2); + --header-padding: var(--sm3); + } + --header-background-color: light-dark(var(--base-0), var(--base-950)); + + /* The mobile menu is an always-dark by design */ + --header-menu-background-color: var(--base-950); + --header-menu-color: var(--base-0); + --header-menu-color-current: var(--primary-400); + --header-menu-secondary-color: var(--base-300); + --header-menu-border-color: var(--base-500); + } + + /* Hero */ + + :root { + --hero-radius: var(--radius-xl); + --hero-content-padding: var(--md3); + --hero-actions-spacing: var(--lg3); + --hero-pagination-dot: var(--sm1); + --hero-pagination-dot-color: var(--base-0); + --hero-pagination-dot-active-color: var(--primary-600); + --hero-pagination-opacity: var(--o-4); + } + + /* Pagination */ + + :root { + --pagination-size: var(--md3); + --pagination-border-radius: var(--radius-md); + --pagination-color: var(--text-color); + --pagination-color-current: var(--base-0); + --pagination-background-color-current: light-dark( + var(--primary-600), + var(--primary-500) + ); + --pagination-background-color-hover: light-dark( + var(--base-100), + var(--base-800) + ); + } + + /* PrevNext */ + + :root { + --prevNext-border-color: var(--ui-border-color); + --prevNext-border-radius: var(--radius-lg); + --prevNext-border-color-hover: var(--link-color); + --prevNext-label-color: light-dark(var(--base-400), var(--base-500)); + } + + /* Notice */ + + :root { + --notice-spacing: var(--sm1); + --notice-text-color: light-dark(var(--base-950), var(--base-0)); + --notice-background-color: light-dark(var(--base-50), var(--base-800)); + --notice-border-color: light-dark(var(--base-200), var(--base-500)); + --notice-border-width: var(--border-sm); + --notice-border-radius: var(--radius-lg); + } + + /* Pricing */ + + :root { + --pricingCard-highlight-border-color: light-dark( + var(--primary-600), + var(--primary-400) + ); + --pricingCard-check-color: light-dark( + var(--success-500), + var(--success-400) + ); + } + + /* Read Progress Bar */ + + :root { + --readProgressBar-height: var(--xs1); + --readProgressBar-color: linear-gradient( + 90deg, + var(--primary-600) 0%, + var(--primary-400) 100% + ); + } + + /* Section */ + + :root { + --section-spacing: var(--xl3); + --section-header-spacing: var(--lg3); + --section-eyebrow-color: light-dark(var(--primary-600), var(--primary-400)); + --section-lede-color: light-dark(var(--base-500), var(--base-400)); + --section-filled-background-color: light-dark( + var(--base-50), + var(--base-900) + ); + --section-primary-background-color: light-dark( + var(--primary-600), + var(--primary-900) + ); + --section-primary-text-color: var(--base-0); + --section-primary-link-color: var(--primary-100); + --section-primary-link-color-hover: var(--base-0); + --section-primary-eyebrow-color: var(--primary-200); + --section-primary-lede-color: var(--primary-100); + } + + /* Testimonial */ + + :root { + --testimonial-role-color: light-dark(var(--base-400), var(--base-500)); + } + + /* Tags */ + + :root { + --tags-padding: var(--xs2); + --tags-font-size: var(--text-sm); + --tags-color: light-dark(var(--base-500), var(--base-400)); + --tags-background-color: light-dark(var(--base-100), var(--base-800)); + --tags-background-color-hover: light-dark(var(--base-200), var(--base-950)); + --tags-radius: var(--radius-md); + } + + /* Tiles has no tokens here: its column count is set by container queries in + component.tiles.css since custom properties don't work inside @container. +*/ + + /* TOC */ + + :root { + --toc-color: var(--link-color); + --toc-color-hover: var(--link-color-hover); + --toc-spacing: var(--xs1); + --toc-indentation: var(--xs3); + --toc-icon-size: var(--sm1); + } +} diff --git a/dist/css/theme.wireframe.css b/dist/css/theme.wireframe.css index c8195b5c..5efe422a 100644 --- a/dist/css/theme.wireframe.css +++ b/dist/css/theme.wireframe.css @@ -7,7 +7,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px diff --git a/dist/mcss.components.css b/dist/mcss.components.css index fb1ee6c4..5305a89d 100644 --- a/dist/mcss.components.css +++ b/dist/mcss.components.css @@ -20,7 +20,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px @@ -1900,7 +1900,7 @@ li + li::before { @layer components { .toggle { - /* Themable via the --toggle-* tokens in settings.ui.css */ + /* Themable via the --toggle-* tokens in theme.default.ui.css */ --toggle-w: var(--toggle-width); --toggle-h: var(--toggle-height); --toggle-bd: var(--toggle-border-width); diff --git a/dist/mcss.css b/dist/mcss.css index 40ca879c..58649269 100644 --- a/dist/mcss.css +++ b/dist/mcss.css @@ -1,6 +1,6 @@ /*! mCSS v1.3.0 | MIT | https://mcss.dev */ -@layer settings, base, elements, global, components, theme, helpers; +@layer base, elements, global, components, theme.defaults, theme.overrides, helpers; /* mCSS framework entry point. @@ -21,7 +21,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px @@ -37,873 +37,19 @@ xxl: 1920px /* truncate single line of text and adds … */ -/* Settings */ - -@layer settings{ - -/* SETTINGS TOKENS */ - -/* -Can't use var() inside media queries, so breakpoints are hard coded in -settings.media-queries.css - -xxs: 240px xs: 360px sm: 480px md: 768px lg: 1024px xl: 1440px xxl: 1920px -*/ - -/* - -• Dimensions (Margin, Padding, Width, Height) -• Aspect Ratios - -• Font Families -• Font Size -• Font Weight - -• Letter Spacing -• Line Height - -• Colors - -• Box shadows -• Border radius -• Border width -• Opacity -*/ - -:root { - /* GLOBALS */ - - /* DIMENSIONS */ - - /* Sizes */ - - --xs1: 4px; - --xs2: 8px; - --xs3: 12px; - - --sm1: 16px; - --sm2: 20px; - --sm3: 24px; - - --md1: 28px; - --md2: 32px; - --md3: 36px; - - --lg1: 40px; - --lg2: 44px; - --lg3: 48px; - - --xl1: 56px; - --xl2: 64px; - --xl3: 80px; - - --xxl1: 96px; - --xxl2: 112px; - --xxl3: 128px; - - --mega1: 160px; - --mega2: 192px; - --mega3: 224px; - - --giga1: 256px; - --giga2: 288px; - --giga3: 320px; - - --tera1: 384px; - --tera2: 480px; - --tera3: 520px; - - /* Aspect Ratios */ - --ar-square: 1; - --ar-landscape: 4/3; - --ar-portrait: 3/4; - --ar-widescreen: 16/9; - --ar-golden: 1.618/1; - - /* TYPOGRAPHY */ - /* See also elements.text & help.text */ - - /* Font Families */ - /* Local font stacks - More options @ https://modernfontstacks.com */ - --display: - Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, ui-sans-serif, - sans-serif; - --text: ui-sans-serif, system-ui, sans-serif; - --mono: - Dank Mono, Inconsolata, Fira Mono, SF Mono, Monaco, Droid Sans Mono, - Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, - ui-monospace, monospace; - - /* Font Sizes */ - /* Create your own sizes @ https://typescale.com */ - --text-xs: 0.694rem; - --text-sm: 0.833rem; - --text-md: 1rem; - --text-lg: 1.2rem; - --text-xl: 1.44rem; - --display-sm: 1.728rem; - --display-md: 2.074rem; - --display-lg: 2.488rem; - --display-xl: 2.986rem; /* h1 */ - --display-mega: 3.583rem; - --display-giga: 4.299rem; - - /* Heading font sizes are decisions, not scale steps: they map each - heading level onto this scale. See --heading-font-size-* in - settings.ui.css. */ - - /* Font Weights */ - --extra-light: 200; - --light: 300; - --book: 400; - --semi-bold: 600; - --bold: 700; - --black: 900; - - /* Letter Spacing */ - --tracking-sm: -0.05em; - --tracking-md: 0.025em; - --tracking-lg: 0.05em; - --tracking-xl: 0.075em; - --tracking-xxl: 0.15em; - - /* Line Height */ - --leading-xs: 1; - --leading-sm: 1.15; - --leading-md: 1.375; - --leading-lg: 1.5; - --leading-xl: 1.75; - --leading-xxl: 2; - - /* COLORS */ - /* Make your own palettes programmatically: https://www.tints.dev */ - - /* Base */ - - --base-0: #fff; - --base-50: #f6f7f9; - --base-100: #edeef1; - --base-200: #d6dbe1; - --base-300: #b2bbc7; - --base-400: #8897a8; - --base-500: #697a8e; - --base-600: #546375; - --base-700: #4a5666; - --base-800: #3c4550; - --base-900: #353c45; - --base-950: #23282e; - - /* Primary */ - - --primary-50: #f0f9ff; - --primary-100: #e0f2fe; - --primary-200: #bae6fd; - --primary-300: #7dd3fc; - --primary-400: #38bdf8; - --primary-500: #0ea5e9; - --primary-600: #0284c7; - --primary-700: #0369a1; - --primary-800: #075985; - --primary-900: #0c4a6e; - --primary-950: #082f49; - - /* Secondary and/or Highlight goes here */ - - /* Feedback */ - - --yes-100: #d5f6e8; - --yes-200: #afebd4; - --yes-300: #7adbbd; - --yes-400: #46c4a0; - --yes-500: #13886d; - - --no-100: #ffe4e6; - --no-200: #fecdd3; - --no-300: #fda4af; - --no-400: #fb7185; - --no-500: #e11d48; - - --maybe-100: #fff7d6; - --maybe-200: #fff0b3; - --maybe-300: #ffd64a; - --maybe-400: #ffc220; - --maybe-500: #f9a007; - - /* Highlight (text marker) */ - - --highlight-500: #ffee00; - - /* GRADIENTS */ - - --gradient-primary: linear-gradient( - 90deg, - var(--primary-950) 0%, - var(--primary-400) 100% - ); - - /* BORDERS */ - - --border-sm: 1px; - --border-md: 2px; - --border-lg: 4px; - --border-xl: 8px; - --border-xxl: 12px; - - --radius-sm: 3px; - --radius-md: 5px; - --radius-lg: 8px; - --radius-xl: 12px; - --radius-xxl: 16px; - --radius-round: 1e5px; - - /* DROP SHADOWS */ - - --shadow-sm: - 0 1px 3px 0 var(--ui-shadow-color), 0 1px 2px -1px var(--ui-shadow-color); - --shadow-md: - 0 4px 6px -1px var(--ui-shadow-color), 0 2px 4px -2px var(--ui-shadow-color); - --shadow-lg: - 0 8px 13px -3px var(--ui-shadow-color), - 0 4px 6px -4px var(--ui-shadow-color); - --shadow-xl: - 0 20px 20px -5px var(--ui-shadow-color), - 0 8px 10px -6px var(--ui-shadow-color); - --shadow-xxl: - 0px 11px 8px -6px var(--ui-shadow-color), - 0 10px 15px 2px var(--ui-shadow-color); - - /* OPACITY */ - - --o-0: 0; /* overkill for consistency */ - --o-1: 0.2; - --o-2: 0.4; - --o-3: 0.6; - --o-4: 0.8; - --o-5: 1; - - /* Z-INDEX */ - - --z-bottom: -1000000000; - --z-0: 0; /* overkill for consistency */ - --z-1: 10; - --z-2: 20; - --z-3: 30; - --z-4: 40; - --z-5: 50; - --z-top: 1000000000; - - /* TRANSITIONS */ - - --transition: 220ms ease-in-out; - --transition-fast: 100ms ease-in-out; -} -} - -@layer settings{ - -/* INTERFACE TOKENS */ - -/* - The decisions layer. Every token here is named for what it's FOR (an - element, a component, or a shared meaning) and answers "what does this - thing use by default". Tokens named for what they ARE (--sm1, --base-500, - --bold) are scale tokens and live in settings.tokens.css. That's the - whole split: a name that mentions a UI thing belongs here; a name that - labels a step on a scale belongs there. - - Values, in order of preference: - 1. Another interface token, when the meaning is shared - (--input-border-color: var(--ui-border-color)). - 2. A scale token, when the value should follow the system scales - (--fieldset-padding: var(--sm3)). - 3. A raw value, only where following the scales would be wrong: - content (separator strings, icon URLs), geometry tuned to one - control (--toggle-width), or element-relative measures that track - the element's own type instead of the page (em heading spacing). - The test: "if a theme retuned the scales, should this follow?" - - Deliberate deviations from these defaults live in a theme file - (see theme.default.css). -*/ - -:root { - /* Color scheme (light/dark), toggled by the .theme-light / .theme-dark - classes below. Unrelated to theme files, which are full themes. */ - color-scheme: light dark; - - --ui-border-color: light-dark(var(--base-200), var(--base-500)); - /* Also consumed by the --shadow-* scale in settings.tokens.css: the one - reference between the files that runs upward, so shadows can switch - with the color scheme. Raw alpha colors: the palettes have no alpha - steps. */ - --ui-shadow-color: light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.6)); - - /* Keyboard focus ring (consumed by :focus-visible in global.a11y.css). - Raw 2px on purpose: an accessibility affordance that shouldn't move - when a theme retunes the decorative border scale. */ - --focus-ring-color: light-dark(var(--primary-500), var(--primary-400)); - --focus-ring-width: 2px; - --focus-ring-offset: 2px; - - /* Semantic feedback aliases over the raw feedback palettes. - Prefer these in components and themes; a theme can restyle feedback by - overriding the aliases without touching the raw scales. */ - --success-100: var(--yes-100); - --success-200: var(--yes-200); - --success-300: var(--yes-300); - --success-400: var(--yes-400); - --success-500: var(--yes-500); - --danger-100: var(--no-100); - --danger-200: var(--no-200); - --danger-300: var(--no-300); - --danger-400: var(--no-400); - --danger-500: var(--no-500); - --warning-100: var(--maybe-100); - --warning-200: var(--maybe-200); - --warning-300: var(--maybe-300); - --warning-400: var(--maybe-400); - --warning-500: var(--maybe-500); -} - -:root.theme-light { - color-scheme: light; -} - -:root.theme-dark { - color-scheme: dark; -} - -/* HTML ELEMENTS */ - -:root { - accent-color: var(--primary-500); - - --body-background-color: light-dark(var(--base-0), var(--base-950)); - --body-line-height: var(--leading-lg); - - --input-height: var(--md3); - --input-padding: var(--xs3); - --input-border-width: var(--border-sm); - --input-border-color: var(--ui-border-color); - --input-border-radius: var(--radius-md); - --input-border-color-invalid: light-dark( - var(--danger-500), - var(--danger-400) - ); - - /* Gap under a label that precedes its control */ - --label-spacing: var(--xs1); - - --fieldset-padding: var(--sm3); - --fieldset-border-width: var(--border-sm); - --fieldset-border-color: var(--ui-border-color); - --fieldset-border-radius: var(--radius-lg); - - /* meter: low/medium/high map to the even-less-good, suboptimum, and - optimum pseudo-elements */ - --meter-height: var(--sm1); - --meter-border-radius: var(--radius-md); - --meter-track-color: var(--primary-100); - --meter-low-color: var(--danger-400); - --meter-medium-color: var(--warning-400); - --meter-high-color: var(--success-400); - - --progress-height: var(--sm1); - --progress-color: var(--primary-500); - --progress-track-color: var(--primary-100); - --progress-border-radius: var(--radius-md); - - /* select's chevron, applied as a mask painted with the text color; - any url() works here, data URL or file */ - --select-icon-size: var(--sm3); - --select-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E"); - - --dialog-min-width: var(--tera1); - --dialog-max-width: var(--tera3); - --dialog-padding: var(--lg1) var(--md1); - --dialog-border-width: var(--border-sm); - --dialog-border-color: light-dark(var(--base-200), var(--base-800)); - --dialog-background-color: light-dark(var(--base-50), var(--base-900)); - --dialog-border-radius: var(--radius-lg); - --dialog-backdrop-color: var(--base-950); - --dialog-backdrop-opacity: var(--o-4); - - /* details: same surface as dialog by default, on purpose but - independently overridable. Spacing is the gap between an open - summary and its content. */ - --details-padding: var(--sm1); - --details-spacing: var(--xs3); - --details-border-width: var(--border-sm); - --details-border-color: light-dark(var(--base-200), var(--base-800)); - --details-background-color: light-dark(var(--base-50), var(--base-900)); - --details-border-radius: var(--radius-lg); - --details-icon-size: var(--sm3); - /* Marker icon, applied as a mask painted with the text color; any - url() works here, data URL or file */ - --details-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E"); - - --table-padding: var(--xs2) var(--sm1); - --table-border-width: var(--border-sm); - --table-border-color: light-dark(var(--base-100), var(--base-700)); - --table-border-radius: var(--radius-md); - --table-background-color: none; - /* Gap between the table and its caption */ - --table-caption-spacing: var(--xs3); - /* Gap between a figure's content and caption on either side */ - --figcaption-spacing: var(--xs2); - - /* Text */ - - --heading-font: var(--display); - --heading-weight: var(--black); - --heading-letter-spacing: normal; /* (e.g. -0.02em or var(--tracking-sm)) */ - - --heading-font-size-h1: clamp( - var(--display-md), - 1.269rem + 2.682vw, - var(--display-xl) - ); /* 2.074rem → 2.986rem */ - --heading-font-size-h2: clamp( - var(--display-sm), - 1.057rem + 2.235vw, - var(--display-lg) - ); /* 1.728rem → 2.488rem */ - --heading-font-size-h3: clamp( - var(--text-xl), - 0.881rem + 1.865vw, - var(--display-md) - ); /* 1.44rem → 2.074rem */ - --heading-font-size-h4: clamp( - var(--text-lg), - 0.734rem + 1.553vw, - var(--display-sm) - ); /* 1.2rem → 1.728rem */ - --heading-font-size-h5: clamp( - var(--text-lg), - 0.988rem + 0.706vw, - var(--text-xl) - ); /* 1.2rem → 1.44rem */ - --heading-font-size-h6: clamp( - var(--text-md), - 0.824rem + 0.588vw, - var(--text-lg) - ); /* 1rem → 1.2rem */ - - --heading-line-height: var(--leading-sm); - --heading-line-height-h1: var(--heading-line-height); - --heading-line-height-h2: var(--heading-line-height); - --heading-line-height-h3: var(--heading-line-height); - --heading-line-height-h4: var(--leading-md); - --heading-line-height-h5: var(--leading-md); - --heading-line-height-h6: var(--leading-md); - - /* Headings bottom margin */ - --heading-spacing-h1: 0.4em; - --heading-spacing-h2: 0.4em; - --heading-spacing-h3: 0.4em; - --heading-spacing-h4: 0.4em; - --heading-spacing-h5: 0.4em; - --heading-spacing-h6: 0.4em; - /* Any h1 before h2, h2 before h3, h3 before h4. */ - --heading-spacing-consecutive: 0.3em; - - --text-color: light-dark(var(--base-950), var(--base-200)); - --link-font-weight: var(--semi-bold); - --link-color: light-dark(var(--primary-600), var(--primary-400)); - --link-color-hover: var(--primary-500); - - --text-code-color: light-dark(var(--primary-600), var(--primary-400)); - --text-code-background-color: light-dark( - var(--primary-100), - var(--primary-900) - ); - /* when code inline styling doesn't apply (inside headings and pre) */ - --text-code-muted-color: light-dark(var(--base-500), var(--base-300)); - - --pre-border-radius: var(--radius-md); - /* matching the 0.9em of inline code */ - --pre-font-size: 0.9rem; - - --blockquote-padding-block: var(--sm1); - --blockquote-padding-inline: var(--md1) var(--sm3); - --blockquote-background-color: light-dark( - var(--primary-50), - var(--primary-900) - ); - --blockquote-border-radius: var(--radius-md); - --blockquote-accent-width: var(--xs2); - --blockquote-accent-color: linear-gradient( - var(--primary-800), - var(--primary-500) - ); - - /* .prose related stuff in GLOBAL */ - - /* Optional centered label on
, e.g. "***" or a dingbat */ - --hr-content: ""; - - /* ins: background stays light in both light/dark modes */ - --ins-color: var(--base-950); - --ins-background-color: var(--success-200); - - --marker-color: var(--highlight-500); - - --selection-color: light-dark(var(--base-950), var(--base-0)); - --selection-background-color: light-dark( - var(--primary-200), - var(--primary-700) - ); -} - -/* GLOBAL */ - -:root { - /* Mobile-first: tighter gutters on small screens, 24px from --md up */ - --grid-column-gap: var(--sm1); - --grid-row-gap: var(--sm1); - @media (width >= 768px) { - --grid-column-gap: var(--sm3); - --grid-row-gap: var(--sm3); - } - - --wrap-spacing: var(--sm1); - --wrap-md-spacing: var(--sm3); - --wrap-lg-spacing: 0; - /* Widths are measures: ch tracks the text size, so raw on purpose. */ - --wrap-width-sm: minmax(0, 55ch); - --wrap-width-md: minmax(0, 70ch); - --wrap-width-lg: minmax(0, 900px); - --wrap-width: var(--wrap-width-md); - - --layout-content-width: 70ch; - --layout-aside-width: 245px; - --layout-toc-width: 1fr; - - --prose-spacing: var(--sm1); -} - -/* COMPONENTS */ - -/* Badge */ - -:root { - --badge-font-size: var(--text-sm); - --badge-border-radius: var(--radius-md); - --badge-color: var(--base-0); - --badge-background-color: light-dark(var(--base-700), var(--base-600)); - - --badge-primary-color: var(--base-0); - --badge-primary-background-color: light-dark( - var(--primary-600), - var(--primary-500) - ); - --badge-success-color: light-dark(var(--success-500), var(--base-0)); - --badge-success-background-color: light-dark( - var(--success-100), - var(--success-500) - ); - --badge-danger-color: light-dark(var(--danger-500), var(--base-0)); - --badge-danger-background-color: light-dark( - var(--danger-100), - var(--danger-500) - ); - --badge-warning-color: light-dark(var(--warning-500), var(--base-950)); - --badge-warning-background-color: light-dark( - var(--warning-100), - var(--warning-500) - ); -} - -/* Button */ -/* (Button defaults and primary button colors) */ - -:root { - /* Optical minimums, deliberately off the spacing scale */ - --bt-min-width: 101px; - --bt-min-width-md: 123px; - --bt-min-width-lg: 133px; - - --bt-font-size: var(--text-sm); - --bt-font-size-lg: var(--text-md); - --bt-font-weight: var(--semi-bold); - - --bt-color: var(--text-color); - --bt-color-hover: light-dark(var(--text-color), var(--base-0)); - - --bt-background-color: light-dark(var(--base-0), var(--base-800)); - --bt-background-color-hover: light-dark(var(--base-50), var(--base-900)); - - --bt-border-color: var(--ui-border-color); - --bt-border-width: var(--border-sm); - --bt-border-radius: var(--radius-lg); - --bt-border-radius-lg: var(--radius-xl); - - --bt-outline-color-hover: light-dark(var(--base-950), var(--base-0)); - --bt-outline-background-color-hover: light-dark( - rgb(0 0 0 / 0.1), - rgb(255 255 255 / 0.1) - ); - --bt-outline-border-color: light-dark(var(--base-950), var(--base-0)); - --bt-outline-border-color-hover: light-dark(var(--base-950), var(--base-0)); - - --bt-primary-color: var(--base-0); - --bt-primary-color-hover: var(--base-0); - --bt-primary-background-color: var(--primary-600); - --bt-primary-background-color-hover: var(--primary-500); - --bt-primary-border-color: var(--primary-600); - --bt-primary-border-color-hover: var(--primary-600); -} - -/* Avatar */ - -:root { - --avatar-color: var(--base-0); - --avatar-background-color: var(--base-400); - --avatar-border-color: light-dark(var(--base-0), var(--base-500)); - --avatar-border-width: var(--border-sm); - --avatar-radius: var(--radius-round); - --avatar-status-dot-color-offline: var(--base-300); - --avatar-status-dot-color-online: var(--yes-400); -} - -/* Banner */ - -:root { - --banner-color: var(--base-0); - --banner-background-color: light-dark(var(--primary-600), var(--primary-800)); -} - -/* Breadcrumbs */ - -:root { - --breadcrumbs-separator: "/"; - --breadcrumbs-separator-color: light-dark(var(--base-300), var(--base-600)); - --breadcrumbs-color: light-dark(var(--base-500), var(--base-400)); - --breadcrumbs-color-current: var(--text-color); -} - -/* Card */ - -:root { - --card-spacing: var(--sm3); - --card-color: var(--text-color); - --card-secondary-text-color: light-dark(var(--base-400), var(--base-500)); - --card-bg-color: light-dark(var(--base-100), var(--base-900)); - --card-border-radius: var(--radius-lg); - --card-border-color: var(--ui-border-color); - --card-border-width: var(--border-sm); - --card-shadow: var(--shadow-md); - --card-shadow-hover: var(--shadow-xl); - --card-loading-bg: light-dark(var(--base-200), var(--base-900)); - /* Default media aspect ratio; the Card component pins it inline only - when its aspectRatio prop is passed */ - --card-aspect-ratio: var(--ar-golden); -} - -/* Toggle */ - -:root { - /* Drawn-control geometry, deliberately off the scales */ - --toggle-width: 50px; - --toggle-height: 28px; - --toggle-border-width: 2px; - --toggle-track-color: light-dark(var(--base-300), var(--base-700)); - --toggle-track-color-checked: var(--yes-400); - --toggle-thumb-color: var(--body-background-color); -} - -/* FAQ */ - -:root { - --faq-spacing: var(--xs3); -} - -/* Field */ - -:root { - --field-spacing: var(--xs1); - --field-hint-color: light-dark(var(--base-400), var(--base-500)); - --field-error-color: light-dark(var(--danger-500), var(--danger-300)); - /*Field's hint/error position. Use `static` to reflow under, use `absolute` - (and leave enough space below) if you don't want any shift on errors */ - --field-message-position: static; -} - -/* FeatureItem */ - -:root { - --featureItem-icon-box-size: var(--lg3); - --featureItem-icon-size: var(--sm3); - --featureItem-icon-color: light-dark(var(--primary-600), var(--primary-300)); - --featureItem-icon-background-color: light-dark( - var(--primary-100), - var(--primary-900) - ); - --featureItem-icon-border-radius: var(--radius-lg); -} - -/* Footer */ - -:root { - --footer-background-color: light-dark(var(--primary-950), var(--base-950)); - --footer-text-color: light-dark(var(--base-0), var(--base-200)); - --footer-border-width: var(--border-md); - --footer-border-color: light-dark(transparent, var(--base-700)); - --footer-link-color: light-dark(var(--base-0), var(--base-200)); - --footer-link-color-hover: light-dark(var(--primary-200), var(--base-0)); -} - -/* Header */ - -:root { - --header-height: var(--xl1); - --header-padding: var(--sm1); - @media (width >= 768px) { - --header-height: var(--xl2); - --header-padding: var(--sm3); - } - --header-background-color: light-dark(var(--base-0), var(--base-950)); - - /* The mobile menu is an always-dark by design */ - --header-menu-background-color: var(--base-950); - --header-menu-color: var(--base-0); - --header-menu-color-current: var(--primary-400); - --header-menu-secondary-color: var(--base-300); - --header-menu-border-color: var(--base-500); -} - -/* Hero */ - -:root { - --hero-radius: var(--radius-xl); - --hero-content-padding: var(--md3); - --hero-actions-spacing: var(--lg3); - --hero-pagination-dot: var(--sm1); - --hero-pagination-dot-color: var(--base-0); - --hero-pagination-dot-active-color: var(--primary-600); - --hero-pagination-opacity: var(--o-4); -} - -/* Pagination */ - -:root { - --pagination-size: var(--md3); - --pagination-border-radius: var(--radius-md); - --pagination-color: var(--text-color); - --pagination-color-current: var(--base-0); - --pagination-background-color-current: light-dark( - var(--primary-600), - var(--primary-500) - ); - --pagination-background-color-hover: light-dark( - var(--base-100), - var(--base-800) - ); -} - -/* PrevNext */ - -:root { - --prevNext-border-color: var(--ui-border-color); - --prevNext-border-radius: var(--radius-lg); - --prevNext-border-color-hover: var(--link-color); - --prevNext-label-color: light-dark(var(--base-400), var(--base-500)); -} - -/* Notice */ - -:root { - --notice-spacing: var(--sm1); - --notice-text-color: light-dark(var(--base-950), var(--base-0)); - --notice-background-color: light-dark(var(--base-50), var(--base-800)); - --notice-border-color: light-dark(var(--base-200), var(--base-500)); - --notice-border-width: var(--border-sm); - --notice-border-radius: var(--radius-lg); -} - -/* Pricing */ - -:root { - --pricingCard-highlight-border-color: light-dark( - var(--primary-600), - var(--primary-400) - ); - --pricingCard-check-color: light-dark(var(--success-500), var(--success-400)); -} - -/* Read Progress Bar */ - -:root { - --readProgressBar-height: var(--xs1); - --readProgressBar-color: linear-gradient( - 90deg, - var(--primary-600) 0%, - var(--primary-400) 100% - ); -} - -/* Section */ - -:root { - --section-spacing: var(--xl3); - --section-header-spacing: var(--lg3); - --section-eyebrow-color: light-dark(var(--primary-600), var(--primary-400)); - --section-lede-color: light-dark(var(--base-500), var(--base-400)); - --section-filled-background-color: light-dark( - var(--base-50), - var(--base-900) - ); - --section-primary-background-color: light-dark( - var(--primary-600), - var(--primary-900) - ); - --section-primary-text-color: var(--base-0); - --section-primary-link-color: var(--primary-100); - --section-primary-link-color-hover: var(--base-0); - --section-primary-eyebrow-color: var(--primary-200); - --section-primary-lede-color: var(--primary-100); -} - -/* Testimonial */ - -:root { - --testimonial-role-color: light-dark(var(--base-400), var(--base-500)); -} - -/* Tags */ - -:root { - --tags-padding: var(--xs2); - --tags-font-size: var(--text-sm); - --tags-color: light-dark(var(--base-500), var(--base-400)); - --tags-background-color: light-dark(var(--base-100), var(--base-800)); - --tags-background-color-hover: light-dark(var(--base-200), var(--base-950)); - --tags-radius: var(--radius-md); -} - -/* Tiles has no tokens here: its column count is set by container queries in - component.tiles.css since custom properties don't work inside @container. -*/ - -/* TOC */ - -:root { - --toc-color: var(--link-color); - --toc-color-hover: var(--link-color-hover); - --toc-spacing: var(--xs1); - --toc-indentation: var(--xs3); - --toc-icon-size: var(--sm1); -} -} - /* - No theme is imported here, ever: the framework only declares the empty - `theme` slot above. A theme (theme.*.css) is part of YOUR css: a swappable - theme of token overrides plus optional style rules that you activate, at - most one, from your own entry point (see _global.css for this site's). - Theme files self-layer (@layer theme inside the file), so wherever that - import sits it lands in this slot. - None imported = the default look (settings.* holds every default). + No theme is imported here, ever: the framework only declares the two + theme slots above. Every design value (scales and defaults) lives in the + default theme, which YOUR entry point activates right after this file: + + @import url(./framework/mcss.css); + @import url(./framework/theme.default.css); + + Without it, every token is unset and the page renders half-styled. Your + own theme (copy theme.starter.css) imports after that and lands in + `theme.overrides`, so it beats the default's `theme.defaults` no matter + the import order. Theme files self-layer, so no layer() annotation is + needed on their imports. See _global.css for this site's entry. */ /* Reset & Normalize */ @@ -2451,7 +1597,7 @@ details {
…
- Widths come from the layout tokens in settings.ui.css: + Widths come from the layout tokens in theme.default.ui.css: --layout-content-width, --layout-aside-width, --layout-toc-width. */ diff --git a/dist/mcss.min.css b/dist/mcss.min.css index 2f957b90..68d0f3f1 100644 --- a/dist/mcss.min.css +++ b/dist/mcss.min.css @@ -1,2 +1,2 @@ /*! mCSS v1.3.0 | MIT | https://mcss.dev */ -@layer settings,base,elements,global,components,theme,helpers;@layer settings{:root{--xs1: 4px;--xs2: 8px;--xs3: 12px;--sm1: 16px;--sm2: 20px;--sm3: 24px;--md1: 28px;--md2: 32px;--md3: 36px;--lg1: 40px;--lg2: 44px;--lg3: 48px;--xl1: 56px;--xl2: 64px;--xl3: 80px;--xxl1: 96px;--xxl2: 112px;--xxl3: 128px;--mega1: 160px;--mega2: 192px;--mega3: 224px;--giga1: 256px;--giga2: 288px;--giga3: 320px;--tera1: 384px;--tera2: 480px;--tera3: 520px;--ar-square: 1;--ar-landscape: 4/3;--ar-portrait: 3/4;--ar-widescreen: 16/9;--ar-golden: 1.618/1;--display: Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, ui-sans-serif, sans-serif;--text: ui-sans-serif, system-ui, sans-serif;--mono: Dank Mono, Inconsolata, Fira Mono, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, ui-monospace, monospace;--text-xs: .694rem;--text-sm: .833rem;--text-md: 1rem;--text-lg: 1.2rem;--text-xl: 1.44rem;--display-sm: 1.728rem;--display-md: 2.074rem;--display-lg: 2.488rem;--display-xl: 2.986rem;--display-mega: 3.583rem;--display-giga: 4.299rem;--extra-light: 200;--light: 300;--book: 400;--semi-bold: 600;--bold: 700;--black: 900;--tracking-sm: -.05em;--tracking-md: .025em;--tracking-lg: .05em;--tracking-xl: .075em;--tracking-xxl: .15em;--leading-xs: 1;--leading-sm: 1.15;--leading-md: 1.375;--leading-lg: 1.5;--leading-xl: 1.75;--leading-xxl: 2;--base-0: #fff;--base-50: #f6f7f9;--base-100: #edeef1;--base-200: #d6dbe1;--base-300: #b2bbc7;--base-400: #8897a8;--base-500: #697a8e;--base-600: #546375;--base-700: #4a5666;--base-800: #3c4550;--base-900: #353c45;--base-950: #23282e;--primary-50: #f0f9ff;--primary-100: #e0f2fe;--primary-200: #bae6fd;--primary-300: #7dd3fc;--primary-400: #38bdf8;--primary-500: #0ea5e9;--primary-600: #0284c7;--primary-700: #0369a1;--primary-800: #075985;--primary-900: #0c4a6e;--primary-950: #082f49;--yes-100: #d5f6e8;--yes-200: #afebd4;--yes-300: #7adbbd;--yes-400: #46c4a0;--yes-500: #13886d;--no-100: #ffe4e6;--no-200: #fecdd3;--no-300: #fda4af;--no-400: #fb7185;--no-500: #e11d48;--maybe-100: #fff7d6;--maybe-200: #fff0b3;--maybe-300: #ffd64a;--maybe-400: #ffc220;--maybe-500: #f9a007;--highlight-500: #ffee00;--gradient-primary: linear-gradient( 90deg, var(--primary-950) 0%, var(--primary-400) 100% );--border-sm: 1px;--border-md: 2px;--border-lg: 4px;--border-xl: 8px;--border-xxl: 12px;--radius-sm: 3px;--radius-md: 5px;--radius-lg: 8px;--radius-xl: 12px;--radius-xxl: 16px;--radius-round: 1e5px;--shadow-sm: 0 1px 3px 0 var(--ui-shadow-color), 0 1px 2px -1px var(--ui-shadow-color);--shadow-md: 0 4px 6px -1px var(--ui-shadow-color), 0 2px 4px -2px var(--ui-shadow-color);--shadow-lg: 0 8px 13px -3px var(--ui-shadow-color), 0 4px 6px -4px var(--ui-shadow-color);--shadow-xl: 0 20px 20px -5px var(--ui-shadow-color), 0 8px 10px -6px var(--ui-shadow-color);--shadow-xxl: 0px 11px 8px -6px var(--ui-shadow-color), 0 10px 15px 2px var(--ui-shadow-color);--o-0: 0;--o-1: .2;--o-2: .4;--o-3: .6;--o-4: .8;--o-5: 1;--z-bottom: -1000000000;--z-0: 0;--z-1: 10;--z-2: 20;--z-3: 30;--z-4: 40;--z-5: 50;--z-top: 1000000000;--transition: .22s ease-in-out;--transition-fast: .1s ease-in-out}}@layer settings{:root{color-scheme:light dark;--ui-border-color: light-dark(var(--base-200), var(--base-500));--ui-shadow-color: light-dark(rgb(0 0 0 / .1), rgb(0 0 0 / .6));--focus-ring-color: light-dark(var(--primary-500), var(--primary-400));--focus-ring-width: 2px;--focus-ring-offset: 2px;--success-100: var(--yes-100);--success-200: var(--yes-200);--success-300: var(--yes-300);--success-400: var(--yes-400);--success-500: var(--yes-500);--danger-100: var(--no-100);--danger-200: var(--no-200);--danger-300: var(--no-300);--danger-400: var(--no-400);--danger-500: var(--no-500);--warning-100: var(--maybe-100);--warning-200: var(--maybe-200);--warning-300: var(--maybe-300);--warning-400: var(--maybe-400);--warning-500: var(--maybe-500)}:root.theme-light{color-scheme:light}:root.theme-dark{color-scheme:dark}:root{accent-color:var(--primary-500);--body-background-color: light-dark(var(--base-0), var(--base-950));--body-line-height: var(--leading-lg);--input-height: var(--md3);--input-padding: var(--xs3);--input-border-width: var(--border-sm);--input-border-color: var(--ui-border-color);--input-border-radius: var(--radius-md);--input-border-color-invalid: light-dark( var(--danger-500), var(--danger-400) );--label-spacing: var(--xs1);--fieldset-padding: var(--sm3);--fieldset-border-width: var(--border-sm);--fieldset-border-color: var(--ui-border-color);--fieldset-border-radius: var(--radius-lg);--meter-height: var(--sm1);--meter-border-radius: var(--radius-md);--meter-track-color: var(--primary-100);--meter-low-color: var(--danger-400);--meter-medium-color: var(--warning-400);--meter-high-color: var(--success-400);--progress-height: var(--sm1);--progress-color: var(--primary-500);--progress-track-color: var(--primary-100);--progress-border-radius: var(--radius-md);--select-icon-size: var(--sm3);--select-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");--dialog-min-width: var(--tera1);--dialog-max-width: var(--tera3);--dialog-padding: var(--lg1) var(--md1);--dialog-border-width: var(--border-sm);--dialog-border-color: light-dark(var(--base-200), var(--base-800));--dialog-background-color: light-dark(var(--base-50), var(--base-900));--dialog-border-radius: var(--radius-lg);--dialog-backdrop-color: var(--base-950);--dialog-backdrop-opacity: var(--o-4);--details-padding: var(--sm1);--details-spacing: var(--xs3);--details-border-width: var(--border-sm);--details-border-color: light-dark(var(--base-200), var(--base-800));--details-background-color: light-dark(var(--base-50), var(--base-900));--details-border-radius: var(--radius-lg);--details-icon-size: var(--sm3);--details-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");--table-padding: var(--xs2) var(--sm1);--table-border-width: var(--border-sm);--table-border-color: light-dark(var(--base-100), var(--base-700));--table-border-radius: var(--radius-md);--table-background-color: none;--table-caption-spacing: var(--xs3);--figcaption-spacing: var(--xs2);--heading-font: var(--display);--heading-weight: var(--black);--heading-letter-spacing: normal;--heading-font-size-h1: clamp( var(--display-md), 1.269rem + 2.682vw, var(--display-xl) );--heading-font-size-h2: clamp( var(--display-sm), 1.057rem + 2.235vw, var(--display-lg) );--heading-font-size-h3: clamp( var(--text-xl), .881rem + 1.865vw, var(--display-md) );--heading-font-size-h4: clamp( var(--text-lg), .734rem + 1.553vw, var(--display-sm) );--heading-font-size-h5: clamp( var(--text-lg), .988rem + .706vw, var(--text-xl) );--heading-font-size-h6: clamp( var(--text-md), .824rem + .588vw, var(--text-lg) );--heading-line-height: var(--leading-sm);--heading-line-height-h1: var(--heading-line-height);--heading-line-height-h2: var(--heading-line-height);--heading-line-height-h3: var(--heading-line-height);--heading-line-height-h4: var(--leading-md);--heading-line-height-h5: var(--leading-md);--heading-line-height-h6: var(--leading-md);--heading-spacing-h1: .4em;--heading-spacing-h2: .4em;--heading-spacing-h3: .4em;--heading-spacing-h4: .4em;--heading-spacing-h5: .4em;--heading-spacing-h6: .4em;--heading-spacing-consecutive: .3em;--text-color: light-dark(var(--base-950), var(--base-200));--link-font-weight: var(--semi-bold);--link-color: light-dark(var(--primary-600), var(--primary-400));--link-color-hover: var(--primary-500);--text-code-color: light-dark(var(--primary-600), var(--primary-400));--text-code-background-color: light-dark( var(--primary-100), var(--primary-900) );--text-code-muted-color: light-dark(var(--base-500), var(--base-300));--pre-border-radius: var(--radius-md);--pre-font-size: .9rem;--blockquote-padding-block: var(--sm1);--blockquote-padding-inline: var(--md1) var(--sm3);--blockquote-background-color: light-dark( var(--primary-50), var(--primary-900) );--blockquote-border-radius: var(--radius-md);--blockquote-accent-width: var(--xs2);--blockquote-accent-color: linear-gradient( var(--primary-800), var(--primary-500) );--hr-content: "";--ins-color: var(--base-950);--ins-background-color: var(--success-200);--marker-color: var(--highlight-500);--selection-color: light-dark(var(--base-950), var(--base-0));--selection-background-color: light-dark( var(--primary-200), var(--primary-700) )}:root{--grid-column-gap: var(--sm1);--grid-row-gap: var(--sm1);@media(width>=768px){--grid-column-gap: var(--sm3);--grid-row-gap: var(--sm3)}--wrap-spacing: var(--sm1);--wrap-md-spacing: var(--sm3);--wrap-lg-spacing: 0;--wrap-width-sm: minmax(0, 55ch);--wrap-width-md: minmax(0, 70ch);--wrap-width-lg: minmax(0, 900px);--wrap-width: var(--wrap-width-md);--layout-content-width: 70ch;--layout-aside-width: 245px;--layout-toc-width: 1fr;--prose-spacing: var(--sm1)}:root{--badge-font-size: var(--text-sm);--badge-border-radius: var(--radius-md);--badge-color: var(--base-0);--badge-background-color: light-dark(var(--base-700), var(--base-600));--badge-primary-color: var(--base-0);--badge-primary-background-color: light-dark( var(--primary-600), var(--primary-500) );--badge-success-color: light-dark(var(--success-500), var(--base-0));--badge-success-background-color: light-dark( var(--success-100), var(--success-500) );--badge-danger-color: light-dark(var(--danger-500), var(--base-0));--badge-danger-background-color: light-dark( var(--danger-100), var(--danger-500) );--badge-warning-color: light-dark(var(--warning-500), var(--base-950));--badge-warning-background-color: light-dark( var(--warning-100), var(--warning-500) )}:root{--bt-min-width: 101px;--bt-min-width-md: 123px;--bt-min-width-lg: 133px;--bt-font-size: var(--text-sm);--bt-font-size-lg: var(--text-md);--bt-font-weight: var(--semi-bold);--bt-color: var(--text-color);--bt-color-hover: light-dark(var(--text-color), var(--base-0));--bt-background-color: light-dark(var(--base-0), var(--base-800));--bt-background-color-hover: light-dark(var(--base-50), var(--base-900));--bt-border-color: var(--ui-border-color);--bt-border-width: var(--border-sm);--bt-border-radius: var(--radius-lg);--bt-border-radius-lg: var(--radius-xl);--bt-outline-color-hover: light-dark(var(--base-950), var(--base-0));--bt-outline-background-color-hover: light-dark( rgb(0 0 0 / .1), rgb(255 255 255 / .1) );--bt-outline-border-color: light-dark(var(--base-950), var(--base-0));--bt-outline-border-color-hover: light-dark(var(--base-950), var(--base-0));--bt-primary-color: var(--base-0);--bt-primary-color-hover: var(--base-0);--bt-primary-background-color: var(--primary-600);--bt-primary-background-color-hover: var(--primary-500);--bt-primary-border-color: var(--primary-600);--bt-primary-border-color-hover: var(--primary-600)}:root{--avatar-color: var(--base-0);--avatar-background-color: var(--base-400);--avatar-border-color: light-dark(var(--base-0), var(--base-500));--avatar-border-width: var(--border-sm);--avatar-radius: var(--radius-round);--avatar-status-dot-color-offline: var(--base-300);--avatar-status-dot-color-online: var(--yes-400)}:root{--banner-color: var(--base-0);--banner-background-color: light-dark(var(--primary-600), var(--primary-800))}:root{--breadcrumbs-separator: "/";--breadcrumbs-separator-color: light-dark(var(--base-300), var(--base-600));--breadcrumbs-color: light-dark(var(--base-500), var(--base-400));--breadcrumbs-color-current: var(--text-color)}:root{--card-spacing: var(--sm3);--card-color: var(--text-color);--card-secondary-text-color: light-dark(var(--base-400), var(--base-500));--card-bg-color: light-dark(var(--base-100), var(--base-900));--card-border-radius: var(--radius-lg);--card-border-color: var(--ui-border-color);--card-border-width: var(--border-sm);--card-shadow: var(--shadow-md);--card-shadow-hover: var(--shadow-xl);--card-loading-bg: light-dark(var(--base-200), var(--base-900));--card-aspect-ratio: var(--ar-golden)}:root{--toggle-width: 50px;--toggle-height: 28px;--toggle-border-width: 2px;--toggle-track-color: light-dark(var(--base-300), var(--base-700));--toggle-track-color-checked: var(--yes-400);--toggle-thumb-color: var(--body-background-color)}:root{--faq-spacing: var(--xs3)}:root{--field-spacing: var(--xs1);--field-hint-color: light-dark(var(--base-400), var(--base-500));--field-error-color: light-dark(var(--danger-500), var(--danger-300));--field-message-position: static}:root{--featureItem-icon-box-size: var(--lg3);--featureItem-icon-size: var(--sm3);--featureItem-icon-color: light-dark(var(--primary-600), var(--primary-300));--featureItem-icon-background-color: light-dark( var(--primary-100), var(--primary-900) );--featureItem-icon-border-radius: var(--radius-lg)}:root{--footer-background-color: light-dark(var(--primary-950), var(--base-950));--footer-text-color: light-dark(var(--base-0), var(--base-200));--footer-border-width: var(--border-md);--footer-border-color: light-dark(transparent, var(--base-700));--footer-link-color: light-dark(var(--base-0), var(--base-200));--footer-link-color-hover: light-dark(var(--primary-200), var(--base-0))}:root{--header-height: var(--xl1);--header-padding: var(--sm1);@media(width>=768px){--header-height: var(--xl2);--header-padding: var(--sm3)}--header-background-color: light-dark(var(--base-0), var(--base-950));--header-menu-background-color: var(--base-950);--header-menu-color: var(--base-0);--header-menu-color-current: var(--primary-400);--header-menu-secondary-color: var(--base-300);--header-menu-border-color: var(--base-500)}:root{--hero-radius: var(--radius-xl);--hero-content-padding: var(--md3);--hero-actions-spacing: var(--lg3);--hero-pagination-dot: var(--sm1);--hero-pagination-dot-color: var(--base-0);--hero-pagination-dot-active-color: var(--primary-600);--hero-pagination-opacity: var(--o-4)}:root{--pagination-size: var(--md3);--pagination-border-radius: var(--radius-md);--pagination-color: var(--text-color);--pagination-color-current: var(--base-0);--pagination-background-color-current: light-dark( var(--primary-600), var(--primary-500) );--pagination-background-color-hover: light-dark( var(--base-100), var(--base-800) )}:root{--prevNext-border-color: var(--ui-border-color);--prevNext-border-radius: var(--radius-lg);--prevNext-border-color-hover: var(--link-color);--prevNext-label-color: light-dark(var(--base-400), var(--base-500))}:root{--notice-spacing: var(--sm1);--notice-text-color: light-dark(var(--base-950), var(--base-0));--notice-background-color: light-dark(var(--base-50), var(--base-800));--notice-border-color: light-dark(var(--base-200), var(--base-500));--notice-border-width: var(--border-sm);--notice-border-radius: var(--radius-lg)}:root{--pricingCard-highlight-border-color: light-dark( var(--primary-600), var(--primary-400) );--pricingCard-check-color: light-dark(var(--success-500), var(--success-400))}:root{--readProgressBar-height: var(--xs1);--readProgressBar-color: linear-gradient( 90deg, var(--primary-600) 0%, var(--primary-400) 100% )}:root{--section-spacing: var(--xl3);--section-header-spacing: var(--lg3);--section-eyebrow-color: light-dark(var(--primary-600), var(--primary-400));--section-lede-color: light-dark(var(--base-500), var(--base-400));--section-filled-background-color: light-dark( var(--base-50), var(--base-900) );--section-primary-background-color: light-dark( var(--primary-600), var(--primary-900) );--section-primary-text-color: var(--base-0);--section-primary-link-color: var(--primary-100);--section-primary-link-color-hover: var(--base-0);--section-primary-eyebrow-color: var(--primary-200);--section-primary-lede-color: var(--primary-100)}:root{--testimonial-role-color: light-dark(var(--base-400), var(--base-500))}:root{--tags-padding: var(--xs2);--tags-font-size: var(--text-sm);--tags-color: light-dark(var(--base-500), var(--base-400));--tags-background-color: light-dark(var(--base-100), var(--base-800));--tags-background-color-hover: light-dark(var(--base-200), var(--base-950));--tags-radius: var(--radius-md)}:root{--toc-color: var(--link-color);--toc-color-hover: var(--link-color-hover);--toc-spacing: var(--xs1);--toc-indentation: var(--xs3);--toc-icon-size: var(--sm1)}}@layer base{*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion:reduce){*,:before,:after{animation-delay:-1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}}:where(:not(dialog)){margin:0}html,body{min-height:100%}}@layer elements{body{line-sizing:normal;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;background-color:var(--body-background-color);color:var(--text-color);font-family:var(--text);line-height:var(--body-line-height);&:has(.body-is-locked){overflow:hidden}}}@layer elements{::selection{color:var(--selection-color);background-color:var(--selection-background-color)}:where(a,u,ins,abbr){text-underline-offset:2px}a{font-weight:var(--link-font-weight);color:var(--link-color);&:where(:hover){color:var(--link-color-hover);-webkit-text-decoration:none;text-decoration:none}}address{width:max-content;max-width:100%;padding:var(--sm1) var(--sm3);font-style:normal;background-color:light-dark(var(--base-50),var(--base-900));border:var(--xs2) solid transparent;border-image:8 repeating-linear-gradient(-45deg,var(--no-500) 0,var(--no-500) var(--xs2),transparent 0,transparent calc(var(--xs2) * 2),var(--primary-500) 0,var(--primary-500) calc(var(--xs2) * 3),transparent 0,transparent calc(var(--xs2) * 4))}abbr{position:relative;cursor:help;&:after{position:relative;top:calc(var(--xs1) * -1);width:var(--sm1);height:var(--sm1);display:inline-block;content:"";background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='circle-help'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M9.09%209a3%203%200%200%201%205.83%201c0%202-3%203-3%203'/%3E%3Cpath%20d='M12%2017h.01'/%3E%3C/svg%3E");background-size:contain}&:hover:before{width:max-content;max-width:400px;position:absolute;left:50%;padding:var(--xs1) var(--xs3);content:attr(title);color:var(--base-0);background-color:var(--base-900);opacity:var(--o-4);border-radius:var(--radius-sm);transform:translate(-50%,-2em)}}blockquote{position:relative;margin-bottom:var(--prose-spacing);padding-block:var(--blockquote-padding-block);padding-inline:var(--blockquote-padding-inline);font-style:italic;background-color:var(--blockquote-background-color);border-radius:var(--blockquote-border-radius);&:before{content:"";position:absolute;top:0;inset-inline-start:0;width:var(--blockquote-accent-width);height:100%;border-start-start-radius:var(--blockquote-border-radius);border-end-start-radius:var(--blockquote-border-radius);background:var(--blockquote-accent-color)}p{&:first-child:before{content:open-quote}&:last-child{margin-bottom:0;&:after{content:close-quote}}}}cite{font-style:italic}code,var,kbd{font-family:var(--mono);font-size:.9em;font-style:normal;color:var(--text-code-muted-color)}:is(code,var,kbd):not(h1 *,h2 *,h3 *,h4 *,h5 *,h6 *,pre *){padding:.15em .3em;color:var(--text-code-color);background-color:var(--text-code-background-color);border-radius:var(--radius-sm)}dt{font-weight:var(--bold)}dd+dt{margin-top:.5em}del{text-decoration-color:var(--danger-500);text-decoration-style:wavy}h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{overflow-wrap:break-word;text-wrap:balance}h1,.h1,h2,.h2,h3,.h3,h4,.h4{font-family:var(--heading-font);font-weight:var(--heading-weight);letter-spacing:var(--heading-letter-spacing)}h1,.h1{margin-bottom:var(--heading-spacing-h1);font-size:var(--heading-font-size-h1);line-height:var(--heading-line-height-h1)}h2,.h2{margin-bottom:var(--heading-spacing-h2);font-size:var(--heading-font-size-h2);line-height:var(--heading-line-height-h2)}h3,.h3{margin-bottom:var(--heading-spacing-h3);font-size:var(--heading-font-size-h3);line-height:var(--heading-line-height-h3)}h4,.h4{margin-bottom:var(--heading-spacing-h4);font-size:var(--heading-font-size-h4);line-height:var(--heading-line-height-h4)}h5,.h5{margin-bottom:var(--heading-spacing-h5);font-size:var(--heading-font-size-h5);line-height:var(--heading-line-height-h5)}h6,.h6{margin-bottom:var(--heading-spacing-h6);font-size:var(--heading-font-size-h6);line-height:var(--heading-line-height-h6)}:where(h1,h2,h3):has(+:is(h2,h3,h4)){margin-bottom:var(--heading-spacing-consecutive)}hr{display:flex;justify-content:center;align-items:center;height:0;border-style:solid;border-width:var(--border-sm) 0 0;color:var(--ui-border-color);overflow:visible;&:after{content:var(--hr-content);padding:0 var(--xs1);line-height:1;letter-spacing:var(--tracking-sm);background-color:var(--body-background-color)}}:where(hr):has(+:is(p)){margin-bottom:var(--prose-spacing)}ins{padding:.15em .3em;color:var(--ins-color);background-color:var(--ins-background-color);border-radius:var(--radius-sm);-webkit-text-decoration:none;text-decoration:none;&:before{content:"+ "}}mark{padding:.15em .5em;background:var(--marker-color);border-radius:1em 0}:where(ol,ul){list-style-type:none;padding:0}pre{font-family:var(--mono);font-size:var(--pre-font-size);white-space:pre-wrap;border-radius:var(--pre-border-radius)}q{font-style:italic}s{text-decoration-color:light-dark(var(--base-950),var(--base-50));text-decoration-style:wavy}sub,sup{line-height:1}}@layer elements{:root{quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(af),:not(:lang(af))>:lang(af){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ak),:not(:lang(ak))>:lang(ak){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(asa),:not(:lang(asa))>:lang(asa){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(az),:not(:lang(az))>:lang(az){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(bem),:not(:lang(bem))>:lang(bem){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(bez),:not(:lang(bez))>:lang(bez){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(bn),:not(:lang(bn))>:lang(bn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(brx),:not(:lang(brx))>:lang(brx){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(cgg),:not(:lang(cgg))>:lang(cgg){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(chr),:not(:lang(chr))>:lang(chr){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(cy),:not(:lang(cy))>:lang(cy){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(da),:not(:lang(da))>:lang(da){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(dav),:not(:lang(dav))>:lang(dav){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(dje),:not(:lang(dje))>:lang(dje){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(dz),:not(:lang(dz))>:lang(dz){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ebu),:not(:lang(ebu))>:lang(ebu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ee),:not(:lang(ee))>:lang(ee){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(en),:not(:lang(en))>:lang(en){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(fil),:not(:lang(fil))>:lang(fil){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(fo),:not(:lang(fo))>:lang(fo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ga),:not(:lang(ga))>:lang(ga){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(gd),:not(:lang(gd))>:lang(gd){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(gl),:not(:lang(gl))>:lang(gl){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(gu),:not(:lang(gu))>:lang(gu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(guz),:not(:lang(guz))>:lang(guz){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ha),:not(:lang(ha))>:lang(ha){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(hi),:not(:lang(hi))>:lang(hi){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(id),:not(:lang(id))>:lang(id){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ig),:not(:lang(ig))>:lang(ig){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(jmc),:not(:lang(jmc))>:lang(jmc){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kam),:not(:lang(kam))>:lang(kam){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kde),:not(:lang(kde))>:lang(kde){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kea),:not(:lang(kea))>:lang(kea){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(khq),:not(:lang(khq))>:lang(khq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ki),:not(:lang(ki))>:lang(ki){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kln),:not(:lang(kln))>:lang(kln){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(km),:not(:lang(km))>:lang(km){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kn),:not(:lang(kn))>:lang(kn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ko),:not(:lang(ko))>:lang(ko){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ksb),:not(:lang(ksb))>:lang(ksb){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lg),:not(:lang(lg))>:lang(lg){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ln),:not(:lang(ln))>:lang(ln){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lo),:not(:lang(lo))>:lang(lo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lrc),:not(:lang(lrc))>:lang(lrc){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lu),:not(:lang(lu))>:lang(lu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(luo),:not(:lang(luo))>:lang(luo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lv),:not(:lang(lv))>:lang(lv){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mas),:not(:lang(mas))>:lang(mas){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mer),:not(:lang(mer))>:lang(mer){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mfe),:not(:lang(mfe))>:lang(mfe){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mgo),:not(:lang(mgo))>:lang(mgo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ml),:not(:lang(ml))>:lang(ml){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mn),:not(:lang(mn))>:lang(mn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mr),:not(:lang(mr))>:lang(mr){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ms),:not(:lang(ms))>:lang(ms){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mt),:not(:lang(mt))>:lang(mt){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(my),:not(:lang(my))>:lang(my){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(naq),:not(:lang(naq))>:lang(naq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(nd),:not(:lang(nd))>:lang(nd){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ne),:not(:lang(ne))>:lang(ne){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(nus),:not(:lang(nus))>:lang(nus){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(nyn),:not(:lang(nyn))>:lang(nyn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(pa),:not(:lang(pa))>:lang(pa){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(pt),:not(:lang(pt))>:lang(pt){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(rof),:not(:lang(rof))>:lang(rof){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(rwk),:not(:lang(rwk))>:lang(rwk){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(saq),:not(:lang(saq))>:lang(saq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(sbp),:not(:lang(sbp))>:lang(sbp){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(seh),:not(:lang(seh))>:lang(seh){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ses),:not(:lang(ses))>:lang(ses){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(si),:not(:lang(si))>:lang(si){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(so),:not(:lang(so))>:lang(so){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(sw),:not(:lang(sw))>:lang(sw){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ta),:not(:lang(ta))>:lang(ta){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(te),:not(:lang(te))>:lang(te){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(teo),:not(:lang(teo))>:lang(teo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(th),:not(:lang(th))>:lang(th){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(to),:not(:lang(to))>:lang(to){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(tr),:not(:lang(tr))>:lang(tr){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(twq),:not(:lang(twq))>:lang(twq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(tzm),:not(:lang(tzm))>:lang(tzm){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(uz-Cyrl),:not(:lang(uz-Cyrl))>:lang(uz-Cyrl){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vai),:not(:lang(vai))>:lang(vai){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vai-Latn),:not(:lang(vai-Latn))>:lang(vai-Latn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vi),:not(:lang(vi))>:lang(vi){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vun),:not(:lang(vun))>:lang(vun){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(xog),:not(:lang(xog))>:lang(xog){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(yo),:not(:lang(yo))>:lang(yo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(yue-Hans),:not(:lang(yue-Hans))>:lang(yue-Hans){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(zh),:not(:lang(zh))>:lang(zh){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(zu),:not(:lang(zu))>:lang(zu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(uz),:not(:lang(uz))>:lang(uz){quotes:"\201c" "\201d" "\2019" "\2018"}:root:lang(eu),:not(:lang(eu))>:lang(eu){quotes:"\201c" "\201d" "\201c" "\201d"}:root:lang(tk),:not(:lang(tk))>:lang(tk){quotes:"\201c" "\201d" "\201c" "\201d"}:root:lang(ar),:not(:lang(ar))>:lang(ar){quotes:"\201d" "\201c" "\2019" "\2018"}:root:lang(ur),:not(:lang(ur))>:lang(ur){quotes:"\201d" "\201c" "\2019" "\2018"}:root:lang(fi),:not(:lang(fi))>:lang(fi){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(he),:not(:lang(he))>:lang(he){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(lag),:not(:lang(lag))>:lang(lag){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(rn),:not(:lang(rn))>:lang(rn){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(sn),:not(:lang(sn))>:lang(sn){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(sv),:not(:lang(sv))>:lang(sv){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(sr),:not(:lang(sr))>:lang(sr){quotes:"\201e" "\201c" "\2018" "\2018"}:root:lang(sr-Latn),:not(:lang(sr-Latn))>:lang(sr-Latn){quotes:"\201e" "\201c" "\2018" "\2018"}:root:lang(bg),:not(:lang(bg))>:lang(bg){quotes:"\201e" "\201c" "\201e" "\201c"}:root:lang(lt),:not(:lang(lt))>:lang(lt){quotes:"\201e" "\201c" "\201e" "\201c"}:root:lang(bs-Cyrl),:not(:lang(bs-Cyrl))>:lang(bs-Cyrl){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(cs),:not(:lang(cs))>:lang(cs){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(de),:not(:lang(de))>:lang(de){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(dsb),:not(:lang(dsb))>:lang(dsb){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(et),:not(:lang(et))>:lang(et){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(hr),:not(:lang(hr))>:lang(hr){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(hsb),:not(:lang(hsb))>:lang(hsb){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(is),:not(:lang(is))>:lang(is){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(lb),:not(:lang(lb))>:lang(lb){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(luy),:not(:lang(luy))>:lang(luy){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(mk),:not(:lang(mk))>:lang(mk){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(sk),:not(:lang(sk))>:lang(sk){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(sl),:not(:lang(sl))>:lang(sl){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(ka),:not(:lang(ka))>:lang(ka){quotes:"\201e" "\201c" "\ab" "\bb"}:root:lang(bs),:not(:lang(bs))>:lang(bs){quotes:"\201e" "\201d" "\2018" "\2019"}:root:lang(agq),:not(:lang(agq))>:lang(agq){quotes:"\201e" "\201d" "\201a" "\2019"}:root:lang(ff),:not(:lang(ff))>:lang(ff){quotes:"\201e" "\201d" "\201a" "\2019"}:root:lang(nmg),:not(:lang(nmg))>:lang(nmg){quotes:"\201e" "\201d" "\ab" "\bb"}:root:lang(ro),:not(:lang(ro))>:lang(ro){quotes:"\201e" "\201d" "\ab" "\bb"}:root:lang(pl),:not(:lang(pl))>:lang(pl){quotes:"\201e" "\201d" "\ab" "\bb"}:root:lang(hu),:not(:lang(hu))>:lang(hu){quotes:"\201e" "\201d" "\bb" "\ab"}:root:lang(nl),:not(:lang(nl))>:lang(nl){quotes:"\2018" "\2019" "\201c" "\201d"}:root:lang(ti-ER),:not(:lang(ti-ER))>:lang(ti-ER){quotes:"\2018" "\2019" "\201c" "\201d"}:root:lang(dua),:not(:lang(dua))>:lang(dua){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(ksf),:not(:lang(ksf))>:lang(ksf){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(rw),:not(:lang(rw))>:lang(rw){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(nn),:not(:lang(nn))>:lang(nn){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(nb),:not(:lang(nb))>:lang(nb){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(ast),:not(:lang(ast))>:lang(ast){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(bm),:not(:lang(bm))>:lang(bm){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(br),:not(:lang(br))>:lang(br){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(ca),:not(:lang(ca))>:lang(ca){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(dyo),:not(:lang(dyo))>:lang(dyo){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(el),:not(:lang(el))>:lang(el){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(es),:not(:lang(es))>:lang(es){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(ewo),:not(:lang(ewo))>:lang(ewo){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(mg),:not(:lang(mg))>:lang(mg){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(mua),:not(:lang(mua))>:lang(mua){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(sg),:not(:lang(sg))>:lang(sg){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(it),:not(:lang(it))>:lang(it){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(kab),:not(:lang(kab))>:lang(kab){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(kk),:not(:lang(kk))>:lang(kk){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(pt-PT),:not(:lang(pt-PT))>:lang(pt-PT){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(nnh),:not(:lang(nnh))>:lang(nnh){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(sq),:not(:lang(sq))>:lang(sq){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(bas),:not(:lang(bas))>:lang(bas){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(be),:not(:lang(be))>:lang(be){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(ky),:not(:lang(ky))>:lang(ky){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(sah),:not(:lang(sah))>:lang(sah){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(ru),:not(:lang(ru))>:lang(ru){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(uk),:not(:lang(uk))>:lang(uk){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(zgh),:not(:lang(zgh))>:lang(zgh){quotes:"\ab" "\bb" "\201e" "\201d"}:root:lang(shi),:not(:lang(shi))>:lang(shi){quotes:"\ab" "\bb" "\201e" "\201d"}:root:lang(shi-Latn),:not(:lang(shi-Latn))>:lang(shi-Latn){quotes:"\ab" "\bb" "\201e" "\201d"}:root:lang(am),:not(:lang(am))>:lang(am){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(az-Cyrl),:not(:lang(az-Cyrl))>:lang(az-Cyrl){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(fa),:not(:lang(fa))>:lang(fa){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(fr-CH),:not(:lang(fr-CH))>:lang(fr-CH){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(gsw),:not(:lang(gsw))>:lang(gsw){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(jgo),:not(:lang(jgo))>:lang(jgo){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(kkj),:not(:lang(kkj))>:lang(kkj){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(mzn),:not(:lang(mzn))>:lang(mzn){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(fr),:not(:lang(fr))>:lang(fr){quotes:"\ab" "\bb" "\ab" "\bb"}:root:lang(hy),:not(:lang(hy))>:lang(hy){quotes:"\ab" "\bb" "\ab" "\bb"}:root:lang(yav),:not(:lang(yav))>:lang(yav){quotes:"\ab" "\bb" "\ab" "\bb"}:root:lang(ja),:not(:lang(ja))>:lang(ja){quotes:"\300c" "\300d" "\300e" "\300f"}:root:lang(yue),:not(:lang(yue))>:lang(yue){quotes:"\300c" "\300d" "\300e" "\300f"}:root:lang(zh-Hant),:not(:lang(zh-Hant))>:lang(zh-Hant){quotes:"\300c" "\300d" "\300e" "\300f"}}@layer elements{audio,canvas,embed,iframe,img,object,picture,svg,video{display:block;vertical-align:middle;max-width:100%}img,svg,video,canvas{height:auto}audio{width:100%;max-width:var(--tera1)}audio:not([controls]){display:none}figcaption{font-style:italic;font-size:var(--text-sm)}figure{&:has(*+figcaption){figcaption{margin-top:var(--figcaption-spacing)}}&:has(figcaption+*){figcaption{margin-bottom:var(--figcaption-spacing)}}}iframe{border:var(--border-sm) solid var(--ui-border-color)}}@layer elements{caption{caption-side:bottom;margin-top:var(--table-caption-spacing);font-size:var(--text-sm)}table{border-spacing:0;border:var(--table-border-width) solid var(--table-border-color);border-radius:var(--table-border-radius);background-color:var(--table-background-color)}th,td{text-align:start;padding:var(--table-padding);border-bottom:var(--table-border-width) solid var(--table-border-color);border-inline-start:var(--table-border-width) solid var(--table-border-color)}tr{th:first-child,td:first-child{border-inline-start-width:0}}tbody{tr:last-child{th,td{border-bottom-width:0}}}tfoot{th,td{border-top:var(--table-border-width) solid var(--table-border-color);border-bottom-width:0}}}@layer elements{::placeholder{opacity:var(--o-4)}input,button,textarea,select{font:inherit;color:var(--text-color)}button{color:var(--text-color)}fieldset{border:var(--fieldset-border-width) solid var(--fieldset-border-color);border-radius:var(--fieldset-border-radius);padding:var(--fieldset-padding);ul:has([type=checkbox],[type=radio]){padding-inline-start:0}>[aria-hidden]{margin-bottom:var(--sm3);font-size:var(--text-lg);grid-column:1 / -1}}:is(input,select,textarea):user-invalid{border-color:var(--input-border-color-invalid)}input{&:where(:not([type=checkbox],[type=radio])){height:var(--input-height)}&:where(:not([type=color],[type=file],[type=reset],[type=submit])){padding:var(--input-padding)}&:where(:not([type=color])){border-radius:var(--input-border-radius)}&:where(:not([type=file])){border:var(--input-border-width) solid var(--input-border-color)}&[type=file]{width:100%;accent-color:var(--text-color)}&[type=number]{padding-inline-end:var(--xs1)}}label{display:block;&:has(+:is(input,select,textarea)){margin-bottom:var(--label-spacing)}}legend{position:absolute;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);width:1px;height:1px;white-space:nowrap}meter{width:100%;background:var(--meter-track-color);border-radius:var(--meter-border-radius);height:var(--meter-height);&::-webkit-meter-bar{background:var(--meter-track-color)}&::-webkit-meter-bar,&::-webkit-meter-optimum-value,&::-webkit-meter-suboptimum-value,&::-webkit-meter-even-less-good-value{height:var(--meter-height);border:none;border-radius:var(--meter-border-radius)}&::-webkit-meter-even-less-good-value{background:var(--meter-low-color)}&::-webkit-meter-suboptimum-value{background:var(--meter-medium-color)}&::-webkit-meter-optimum-value{background:var(--meter-high-color)}&:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:var(--meter-low-color)}&:-moz-meter-sub-optimum::-moz-meter-bar{background:var(--meter-medium-color)}&:-moz-meter-optimum::-moz-meter-bar{background:var(--meter-high-color)}}progress{appearance:none;width:100%;height:var(--progress-height);background:var(--progress-track-color);border-radius:var(--progress-border-radius);border:none;&::-moz-progress-bar{background:var(--progress-color);border-radius:var(--progress-border-radius)}&::-webkit-progress-bar{width:100%;background:var(--progress-track-color);border-radius:var(--progress-border-radius);height:var(--progress-height)}&::-webkit-progress-value{background:var(--progress-color);border-radius:var(--progress-border-radius)}}select{--split: calc(100% - var(--select-icon-size));display:flex;appearance:none;height:var(--input-height);padding:var(--xs1) calc(var(--input-padding) + var(--md1)) var(--xs1) var(--input-padding);border:var(--input-border-width) solid var(--input-border-color);border-radius:var(--input-border-radius);background:linear-gradient(to right,var(--body-background-color) 0 var(--split),var(--text-color) var(--split) 100%);mask-image:var(--select-icon),linear-gradient(to right,transparent calc(var(--split) - 1px),red 0),linear-gradient(red 0 0);mask-size:var(--select-icon-size),auto,auto;mask-position:calc(100% - var(--xs1)) center,0 0,0 0;mask-repeat:no-repeat;mask-clip:padding-box,padding-box,border-box;mask-origin:padding-box,padding-box,border-box;mask-composite:add,exclude;&:disabled{--disabled-color: light-dark( hsl(from var(--text-color) h s 70%), hsl(from var(--text-color) h s 40%) );cursor:not-allowed;color:var(--disabled-color);background:linear-gradient(to right,var(--body-background-color) 0 var(--split),var(--disabled-color) var(--split) 100%)}&[multiple]{height:auto;padding:var(--input-padding);background:var(--body-background-color);mask-image:none}}textarea{width:100%;padding:var(--input-padding);border-radius:var(--input-border-radius);border:var(--input-border-width) solid var(--input-border-color);resize:vertical;&:not([rows]){min-height:6em}}}@layer elements{dialog{min-width:var(--dialog-min-width);max-width:var(--dialog-max-width);padding:var(--dialog-padding);border:var(--dialog-border-width) solid var(--dialog-border-color);background-color:var(--dialog-background-color);border-radius:var(--dialog-border-radius);&::backdrop{background:var(--dialog-backdrop-color);opacity:var(--dialog-backdrop-opacity)}[aria-label="close pop-up"]{position:absolute;top:var(--xs3);right:var( --xs3 );background:transparent;border:none;outline:none;cursor:pointer}p:last-of-type{margin-bottom:0}}details{padding:var(--details-padding);border:var(--details-border-width) solid var(--details-border-color);background-color:var(--details-background-color);border-radius:var(--details-border-radius);cursor:pointer;summary{display:flex;justify-content:space-between;font-weight:var(--bold);&::-webkit-details-marker{display:none}&:after{content:"";width:var(--details-icon-size);height:var(--details-icon-size);background-color:currentColor;mask-image:var(--details-icon);mask-size:contain;mask-repeat:no-repeat;transition:transform var(--transition)}}&[open]>summary{margin-bottom:var(--details-spacing);&:after{transform:rotate(180deg)}}p:last-of-type{margin-bottom:0}}}@layer global{:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.a11y-skipLink{position:fixed;z-index:var(--z-top);inset-block-start:-100vb;inset-inline-start:0;padding:.75em 1.25em;background-color:var(--body-background-color);color:var(--text-color)}.a11y-skipLink:focus{inset-block-start:0}.a11y-srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}}@layer global{@keyframes fadeFromOpaque{0%{opacity:1}}@keyframes fadeToOpaque{to{opacity:1}}@keyframes fadeFromTransparent{0%{opacity:0}}@keyframes fadeToTransparent{to{opacity:0}}}@layer global{.grid{display:grid;--grid-tc: repeat(4, 1fr);--grid-cs: 1;--grid-ce: -1;grid-template-columns:var(--grid-tc);grid-column-gap:var(--grid-column-gap);grid-row-gap:var(--grid-row-gap)}.grid-flush{grid-column-gap:0;grid-row-gap:0}.grid>.grid_item{display:block;appearance:none;-webkit-appearance:none}.grid[col="1"]{--grid-tc: repeat(1, 1fr) }.grid[col="2"]{--grid-tc: repeat(2, 1fr) }.grid[col="3"]{--grid-tc: repeat(3, 1fr) }.grid[col="4"]{--grid-tc: repeat(4, 1fr) }.grid[col="5"]{--grid-tc: repeat(5, 1fr) }.grid[col="6"]{--grid-tc: repeat(6, 1fr) }.grid[col="7"]{--grid-tc: repeat(7, 1fr) }.grid[col="8"]{--grid-tc: repeat(8, 1fr) }.grid[col="9"]{--grid-tc: repeat(9, 1fr) }.grid[col="10"]{--grid-tc: repeat(10, 1fr) }.grid[col="11"]{--grid-tc: repeat(11, 1fr) }.grid[col="12"]{--grid-tc: repeat(12, 1fr) }.grid[col="13"]{--grid-tc: repeat(13, 1fr) }.grid[col="14"]{--grid-tc: repeat(14, 1fr) }.grid[col="15"]{--grid-tc: repeat(15, 1fr) }.grid[col="16"]{--grid-tc: repeat(16, 1fr) }.grid[col="17"]{--grid-tc: repeat(17, 1fr) }.grid[col="18"]{--grid-tc: repeat(18, 1fr) }.grid[col="19"]{--grid-tc: repeat(19, 1fr) }.grid[col="20"]{--grid-tc: repeat(20, 1fr) }.grid[col="21"]{--grid-tc: repeat(21, 1fr) }.grid[col="22"]{--grid-tc: repeat(22, 1fr) }.grid[col="23"]{--grid-tc: repeat(23, 1fr) }.grid[col="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span^="1"]{--grid-cs: 1 }.grid>.grid_item[span^="2"]{--grid-cs: 2 }.grid>.grid_item[span^="3"]{--grid-cs: 3 }.grid>.grid_item[span^="4"]{--grid-cs: 4 }.grid>.grid_item[span^="5"]{--grid-cs: 5 }.grid>.grid_item[span^="6"]{--grid-cs: 6 }.grid>.grid_item[span^="7"]{--grid-cs: 7 }.grid>.grid_item[span^="8"]{--grid-cs: 8 }.grid>.grid_item[span^="9"]{--grid-cs: 9 }.grid>.grid_item[span^="10"]{--grid-cs: 10 }.grid>.grid_item[span^="11"]{--grid-cs: 11 }.grid>.grid_item[span^="12"]{--grid-cs: 12 }.grid>.grid_item[span^="13"]{--grid-cs: 13 }.grid>.grid_item[span^="14"]{--grid-cs: 14 }.grid>.grid_item[span^="15"]{--grid-cs: 15 }.grid>.grid_item[span^="16"]{--grid-cs: 16 }.grid>.grid_item[span^="17"]{--grid-cs: 17 }.grid>.grid_item[span^="18"]{--grid-cs: 18 }.grid>.grid_item[span^="19"]{--grid-cs: 19 }.grid>.grid_item[span^="20"]{--grid-cs: 20 }.grid>.grid_item[span^="21"]{--grid-cs: 21 }.grid>.grid_item[span^="22"]{--grid-cs: 22 }.grid>.grid_item[span^="23"]{--grid-cs: 23 }.grid>.grid_item[span^="24"]{--grid-cs: 24 }.grid>.grid_item[span$="+1"],.grid>.grid_item[span="1"]{--grid-ce: 1 }.grid>.grid_item[span$="+2"],.grid>.grid_item[span$="-1"],.grid>.grid_item[span="2"]{--grid-ce: 2 }.grid>.grid_item[span$="+3"],.grid>.grid_item[span$="-2"],.grid>.grid_item[span="3"]{--grid-ce: 3 }.grid>.grid_item[span$="+4"],.grid>.grid_item[span$="-3"],.grid>.grid_item[span="4"]{--grid-ce: 4 }.grid>.grid_item[span$="+5"],.grid>.grid_item[span$="-4"],.grid>.grid_item[span="5"]{--grid-ce: 5 }.grid>.grid_item[span$="+6"],.grid>.grid_item[span$="-5"],.grid>.grid_item[span="6"]{--grid-ce: 6 }.grid>.grid_item[span$="+7"],.grid>.grid_item[span$="-6"],.grid>.grid_item[span="7"]{--grid-ce: 7 }.grid>.grid_item[span$="+8"],.grid>.grid_item[span$="-7"],.grid>.grid_item[span="8"]{--grid-ce: 8 }.grid>.grid_item[span$="+9"],.grid>.grid_item[span$="-8"],.grid>.grid_item[span="9"]{--grid-ce: 9 }.grid>.grid_item[span$="+10"],.grid>.grid_item[span$="-9"],.grid>.grid_item[span="10"]{--grid-ce: 10 }.grid>.grid_item[span$="+11"],.grid>.grid_item[span$="-10"],.grid>.grid_item[span="11"]{--grid-ce: 11 }.grid>.grid_item[span$="+12"],.grid>.grid_item[span$="-11"],.grid>.grid_item[span="12"]{--grid-ce: 12 }.grid>.grid_item[span$="+13"],.grid>.grid_item[span$="-12"],.grid>.grid_item[span="13"]{--grid-ce: 13 }.grid>.grid_item[span$="+14"],.grid>.grid_item[span$="-13"],.grid>.grid_item[span="14"]{--grid-ce: 14 }.grid>.grid_item[span$="+15"],.grid>.grid_item[span$="-14"],.grid>.grid_item[span="15"]{--grid-ce: 15 }.grid>.grid_item[span$="+16"],.grid>.grid_item[span$="-15"],.grid>.grid_item[span="16"]{--grid-ce: 16 }.grid>.grid_item[span$="+17"],.grid>.grid_item[span$="-16"],.grid>.grid_item[span="17"]{--grid-ce: 17 }.grid>.grid_item[span$="+18"],.grid>.grid_item[span$="-17"],.grid>.grid_item[span="18"]{--grid-ce: 18 }.grid>.grid_item[span$="+19"],.grid>.grid_item[span$="-18"],.grid>.grid_item[span="19"]{--grid-ce: 19 }.grid>.grid_item[span$="+20"],.grid>.grid_item[span$="-19"],.grid>.grid_item[span="20"]{--grid-ce: 20 }.grid>.grid_item[span$="+21"],.grid>.grid_item[span$="-20"],.grid>.grid_item[span="21"]{--grid-ce: 21 }.grid>.grid_item[span$="+22"],.grid>.grid_item[span$="-21"],.grid>.grid_item[span="22"]{--grid-ce: 22 }.grid>.grid_item[span$="+23"],.grid>.grid_item[span$="-22"],.grid>.grid_item[span="23"]{--grid-ce: 23 }.grid>.grid_item[span$="+24"],.grid>.grid_item[span$="-23"],.grid>.grid_item[span="24"]{--grid-ce: 24 }.grid>.grid_item[span$="-24"]{--grid-ce: 25 }.grid>.grid_item[span]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span*="+"],.grid>.grid_item[span*="-"],.grid>.grid_item[span*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span*="-"],.grid>.grid_item[span*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span=row]{grid-column:1 / -1}@media only screen and (width>=768px){.grid[col-md="1"]{--grid-tc: repeat(1, 1fr) }.grid[col-md="2"]{--grid-tc: repeat(2, 1fr) }.grid[col-md="3"]{--grid-tc: repeat(3, 1fr) }.grid[col-md="4"]{--grid-tc: repeat(4, 1fr) }.grid[col-md="5"]{--grid-tc: repeat(5, 1fr) }.grid[col-md="6"]{--grid-tc: repeat(6, 1fr) }.grid[col-md="7"]{--grid-tc: repeat(7, 1fr) }.grid[col-md="8"]{--grid-tc: repeat(8, 1fr) }.grid[col-md="9"]{--grid-tc: repeat(9, 1fr) }.grid[col-md="10"]{--grid-tc: repeat(10, 1fr) }.grid[col-md="11"]{--grid-tc: repeat(11, 1fr) }.grid[col-md="12"]{--grid-tc: repeat(12, 1fr) }.grid[col-md="13"]{--grid-tc: repeat(13, 1fr) }.grid[col-md="14"]{--grid-tc: repeat(14, 1fr) }.grid[col-md="15"]{--grid-tc: repeat(15, 1fr) }.grid[col-md="16"]{--grid-tc: repeat(16, 1fr) }.grid[col-md="17"]{--grid-tc: repeat(17, 1fr) }.grid[col-md="18"]{--grid-tc: repeat(18, 1fr) }.grid[col-md="19"]{--grid-tc: repeat(19, 1fr) }.grid[col-md="20"]{--grid-tc: repeat(20, 1fr) }.grid[col-md="21"]{--grid-tc: repeat(21, 1fr) }.grid[col-md="22"]{--grid-tc: repeat(22, 1fr) }.grid[col-md="23"]{--grid-tc: repeat(23, 1fr) }.grid[col-md="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span-md^="1"]{--grid-cs: 1 }.grid>.grid_item[span-md^="2"]{--grid-cs: 2 }.grid>.grid_item[span-md^="3"]{--grid-cs: 3 }.grid>.grid_item[span-md^="4"]{--grid-cs: 4 }.grid>.grid_item[span-md^="5"]{--grid-cs: 5 }.grid>.grid_item[span-md^="6"]{--grid-cs: 6 }.grid>.grid_item[span-md^="7"]{--grid-cs: 7 }.grid>.grid_item[span-md^="8"]{--grid-cs: 8 }.grid>.grid_item[span-md^="9"]{--grid-cs: 9 }.grid>.grid_item[span-md^="10"]{--grid-cs: 10 }.grid>.grid_item[span-md^="11"]{--grid-cs: 11 }.grid>.grid_item[span-md^="12"]{--grid-cs: 12 }.grid>.grid_item[span-md^="13"]{--grid-cs: 13 }.grid>.grid_item[span-md^="14"]{--grid-cs: 14 }.grid>.grid_item[span-md^="15"]{--grid-cs: 15 }.grid>.grid_item[span-md^="16"]{--grid-cs: 16 }.grid>.grid_item[span-md^="17"]{--grid-cs: 17 }.grid>.grid_item[span-md^="18"]{--grid-cs: 18 }.grid>.grid_item[span-md^="19"]{--grid-cs: 19 }.grid>.grid_item[span-md^="20"]{--grid-cs: 20 }.grid>.grid_item[span-md^="21"]{--grid-cs: 21 }.grid>.grid_item[span-md^="22"]{--grid-cs: 22 }.grid>.grid_item[span-md^="23"]{--grid-cs: 23 }.grid>.grid_item[span-md^="24"]{--grid-cs: 24 }.grid>.grid_item[span-md$="+1"],.grid>.grid_item[span-md="1"]{--grid-ce: 1 }.grid>.grid_item[span-md$="+2"],.grid>.grid_item[span-md$="-1"],.grid>.grid_item[span-md="2"]{--grid-ce: 2 }.grid>.grid_item[span-md$="+3"],.grid>.grid_item[span-md$="-2"],.grid>.grid_item[span-md="3"]{--grid-ce: 3 }.grid>.grid_item[span-md$="+4"],.grid>.grid_item[span-md$="-3"],.grid>.grid_item[span-md="4"]{--grid-ce: 4 }.grid>.grid_item[span-md$="+5"],.grid>.grid_item[span-md$="-4"],.grid>.grid_item[span-md="5"]{--grid-ce: 5 }.grid>.grid_item[span-md$="+6"],.grid>.grid_item[span-md$="-5"],.grid>.grid_item[span-md="6"]{--grid-ce: 6 }.grid>.grid_item[span-md$="+7"],.grid>.grid_item[span-md$="-6"],.grid>.grid_item[span-md="7"]{--grid-ce: 7 }.grid>.grid_item[span-md$="+8"],.grid>.grid_item[span-md$="-7"],.grid>.grid_item[span-md="8"]{--grid-ce: 8 }.grid>.grid_item[span-md$="+9"],.grid>.grid_item[span-md$="-8"],.grid>.grid_item[span-md="9"]{--grid-ce: 9 }.grid>.grid_item[span-md$="+10"],.grid>.grid_item[span-md$="-9"],.grid>.grid_item[span-md="10"]{--grid-ce: 10 }.grid>.grid_item[span-md$="+11"],.grid>.grid_item[span-md$="-10"],.grid>.grid_item[span-md="11"]{--grid-ce: 11 }.grid>.grid_item[span-md$="+12"],.grid>.grid_item[span-md$="-11"],.grid>.grid_item[span-md="12"]{--grid-ce: 12 }.grid>.grid_item[span-md$="+13"],.grid>.grid_item[span-md$="-12"],.grid>.grid_item[span-md="13"]{--grid-ce: 13 }.grid>.grid_item[span-md$="+14"],.grid>.grid_item[span-md$="-13"],.grid>.grid_item[span-md="14"]{--grid-ce: 14 }.grid>.grid_item[span-md$="+15"],.grid>.grid_item[span-md$="-14"],.grid>.grid_item[span-md="15"]{--grid-ce: 15 }.grid>.grid_item[span-md$="+16"],.grid>.grid_item[span-md$="-15"],.grid>.grid_item[span-md="16"]{--grid-ce: 16 }.grid>.grid_item[span-md$="+17"],.grid>.grid_item[span-md$="-16"],.grid>.grid_item[span-md="17"]{--grid-ce: 17 }.grid>.grid_item[span-md$="+18"],.grid>.grid_item[span-md$="-17"],.grid>.grid_item[span-md="18"]{--grid-ce: 18 }.grid>.grid_item[span-md$="+19"],.grid>.grid_item[span-md$="-18"],.grid>.grid_item[span-md="19"]{--grid-ce: 19 }.grid>.grid_item[span-md$="+20"],.grid>.grid_item[span-md$="-19"],.grid>.grid_item[span-md="20"]{--grid-ce: 20 }.grid>.grid_item[span-md$="+21"],.grid>.grid_item[span-md$="-20"],.grid>.grid_item[span-md="21"]{--grid-ce: 21 }.grid>.grid_item[span-md$="+22"],.grid>.grid_item[span-md$="-21"],.grid>.grid_item[span-md="22"]{--grid-ce: 22 }.grid>.grid_item[span-md$="+23"],.grid>.grid_item[span-md$="-22"],.grid>.grid_item[span-md="23"]{--grid-ce: 23 }.grid>.grid_item[span-md$="+24"],.grid>.grid_item[span-md$="-23"],.grid>.grid_item[span-md="24"]{--grid-ce: 24 }.grid>.grid_item[span-md$="-24"]{--grid-ce: 25 }.grid>.grid_item[span-md]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span-md*="+"],.grid>.grid_item[span-md*="-"],.grid>.grid_item[span-md*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span-md*="-"],.grid>.grid_item[span-md*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span-md=row]{grid-column:1 / -1}}@media only screen and (width>=1024px){.grid[col-lg="1"]{--grid-tc: repeat(1, 1fr) }.grid[col-lg="2"]{--grid-tc: repeat(2, 1fr) }.grid[col-lg="3"]{--grid-tc: repeat(3, 1fr) }.grid[col-lg="4"]{--grid-tc: repeat(4, 1fr) }.grid[col-lg="5"]{--grid-tc: repeat(5, 1fr) }.grid[col-lg="6"]{--grid-tc: repeat(6, 1fr) }.grid[col-lg="7"]{--grid-tc: repeat(7, 1fr) }.grid[col-lg="8"]{--grid-tc: repeat(8, 1fr) }.grid[col-lg="9"]{--grid-tc: repeat(9, 1fr) }.grid[col-lg="10"]{--grid-tc: repeat(10, 1fr) }.grid[col-lg="11"]{--grid-tc: repeat(11, 1fr) }.grid[col-lg="12"]{--grid-tc: repeat(12, 1fr) }.grid[col-lg="13"]{--grid-tc: repeat(13, 1fr) }.grid[col-lg="14"]{--grid-tc: repeat(14, 1fr) }.grid[col-lg="15"]{--grid-tc: repeat(15, 1fr) }.grid[col-lg="16"]{--grid-tc: repeat(16, 1fr) }.grid[col-lg="17"]{--grid-tc: repeat(17, 1fr) }.grid[col-lg="18"]{--grid-tc: repeat(18, 1fr) }.grid[col-lg="19"]{--grid-tc: repeat(19, 1fr) }.grid[col-lg="20"]{--grid-tc: repeat(20, 1fr) }.grid[col-lg="21"]{--grid-tc: repeat(21, 1fr) }.grid[col-lg="22"]{--grid-tc: repeat(22, 1fr) }.grid[col-lg="23"]{--grid-tc: repeat(23, 1fr) }.grid[col-lg="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span-lg^="1"]{--grid-cs: 1 }.grid>.grid_item[span-lg^="2"]{--grid-cs: 2 }.grid>.grid_item[span-lg^="3"]{--grid-cs: 3 }.grid>.grid_item[span-lg^="4"]{--grid-cs: 4 }.grid>.grid_item[span-lg^="5"]{--grid-cs: 5 }.grid>.grid_item[span-lg^="6"]{--grid-cs: 6 }.grid>.grid_item[span-lg^="7"]{--grid-cs: 7 }.grid>.grid_item[span-lg^="8"]{--grid-cs: 8 }.grid>.grid_item[span-lg^="9"]{--grid-cs: 9 }.grid>.grid_item[span-lg^="10"]{--grid-cs: 10 }.grid>.grid_item[span-lg^="11"]{--grid-cs: 11 }.grid>.grid_item[span-lg^="12"]{--grid-cs: 12 }.grid>.grid_item[span-lg^="13"]{--grid-cs: 13 }.grid>.grid_item[span-lg^="14"]{--grid-cs: 14 }.grid>.grid_item[span-lg^="15"]{--grid-cs: 15 }.grid>.grid_item[span-lg^="16"]{--grid-cs: 16 }.grid>.grid_item[span-lg^="17"]{--grid-cs: 17 }.grid>.grid_item[span-lg^="18"]{--grid-cs: 18 }.grid>.grid_item[span-lg^="19"]{--grid-cs: 19 }.grid>.grid_item[span-lg^="20"]{--grid-cs: 20 }.grid>.grid_item[span-lg^="21"]{--grid-cs: 21 }.grid>.grid_item[span-lg^="22"]{--grid-cs: 22 }.grid>.grid_item[span-lg^="23"]{--grid-cs: 23 }.grid>.grid_item[span-lg^="24"]{--grid-cs: 24 }.grid>.grid_item[span-lg$="+1"],.grid>.grid_item[span-lg="1"]{--grid-ce: 1 }.grid>.grid_item[span-lg$="+2"],.grid>.grid_item[span-lg$="-1"],.grid>.grid_item[span-lg="2"]{--grid-ce: 2 }.grid>.grid_item[span-lg$="+3"],.grid>.grid_item[span-lg$="-2"],.grid>.grid_item[span-lg="3"]{--grid-ce: 3 }.grid>.grid_item[span-lg$="+4"],.grid>.grid_item[span-lg$="-3"],.grid>.grid_item[span-lg="4"]{--grid-ce: 4 }.grid>.grid_item[span-lg$="+5"],.grid>.grid_item[span-lg$="-4"],.grid>.grid_item[span-lg="5"]{--grid-ce: 5 }.grid>.grid_item[span-lg$="+6"],.grid>.grid_item[span-lg$="-5"],.grid>.grid_item[span-lg="6"]{--grid-ce: 6 }.grid>.grid_item[span-lg$="+7"],.grid>.grid_item[span-lg$="-6"],.grid>.grid_item[span-lg="7"]{--grid-ce: 7 }.grid>.grid_item[span-lg$="+8"],.grid>.grid_item[span-lg$="-7"],.grid>.grid_item[span-lg="8"]{--grid-ce: 8 }.grid>.grid_item[span-lg$="+9"],.grid>.grid_item[span-lg$="-8"],.grid>.grid_item[span-lg="9"]{--grid-ce: 9 }.grid>.grid_item[span-lg$="+10"],.grid>.grid_item[span-lg$="-9"],.grid>.grid_item[span-lg="10"]{--grid-ce: 10 }.grid>.grid_item[span-lg$="+11"],.grid>.grid_item[span-lg$="-10"],.grid>.grid_item[span-lg="11"]{--grid-ce: 11 }.grid>.grid_item[span-lg$="+12"],.grid>.grid_item[span-lg$="-11"],.grid>.grid_item[span-lg="12"]{--grid-ce: 12 }.grid>.grid_item[span-lg$="+13"],.grid>.grid_item[span-lg$="-12"],.grid>.grid_item[span-lg="13"]{--grid-ce: 13 }.grid>.grid_item[span-lg$="+14"],.grid>.grid_item[span-lg$="-13"],.grid>.grid_item[span-lg="14"]{--grid-ce: 14 }.grid>.grid_item[span-lg$="+15"],.grid>.grid_item[span-lg$="-14"],.grid>.grid_item[span-lg="15"]{--grid-ce: 15 }.grid>.grid_item[span-lg$="+16"],.grid>.grid_item[span-lg$="-15"],.grid>.grid_item[span-lg="16"]{--grid-ce: 16 }.grid>.grid_item[span-lg$="+17"],.grid>.grid_item[span-lg$="-16"],.grid>.grid_item[span-lg="17"]{--grid-ce: 17 }.grid>.grid_item[span-lg$="+18"],.grid>.grid_item[span-lg$="-17"],.grid>.grid_item[span-lg="18"]{--grid-ce: 18 }.grid>.grid_item[span-lg$="+19"],.grid>.grid_item[span-lg$="-18"],.grid>.grid_item[span-lg="19"]{--grid-ce: 19 }.grid>.grid_item[span-lg$="+20"],.grid>.grid_item[span-lg$="-19"],.grid>.grid_item[span-lg="20"]{--grid-ce: 20 }.grid>.grid_item[span-lg$="+21"],.grid>.grid_item[span-lg$="-20"],.grid>.grid_item[span-lg="21"]{--grid-ce: 21 }.grid>.grid_item[span-lg$="+22"],.grid>.grid_item[span-lg$="-21"],.grid>.grid_item[span-lg="22"]{--grid-ce: 22 }.grid>.grid_item[span-lg$="+23"],.grid>.grid_item[span-lg$="-22"],.grid>.grid_item[span-lg="23"]{--grid-ce: 23 }.grid>.grid_item[span-lg$="+24"],.grid>.grid_item[span-lg$="-23"],.grid>.grid_item[span-lg="24"]{--grid-ce: 24 }.grid>.grid_item[span-lg$="-24"]{--grid-ce: 25 }.grid>.grid_item[span-lg]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span-lg*="+"],.grid>.grid_item[span-lg*="-"],.grid>.grid_item[span-lg*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span-lg*="-"],.grid>.grid_item[span-lg*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span-lg=row]{grid-column:1 / -1}}@media only screen and (width>=1440px){.grid[col-xl="1"]{--grid-tc: repeat(1, 1fr) }.grid[col-xl="2"]{--grid-tc: repeat(2, 1fr) }.grid[col-xl="3"]{--grid-tc: repeat(3, 1fr) }.grid[col-xl="4"]{--grid-tc: repeat(4, 1fr) }.grid[col-xl="5"]{--grid-tc: repeat(5, 1fr) }.grid[col-xl="6"]{--grid-tc: repeat(6, 1fr) }.grid[col-xl="7"]{--grid-tc: repeat(7, 1fr) }.grid[col-xl="8"]{--grid-tc: repeat(8, 1fr) }.grid[col-xl="9"]{--grid-tc: repeat(9, 1fr) }.grid[col-xl="10"]{--grid-tc: repeat(10, 1fr) }.grid[col-xl="11"]{--grid-tc: repeat(11, 1fr) }.grid[col-xl="12"]{--grid-tc: repeat(12, 1fr) }.grid[col-xl="13"]{--grid-tc: repeat(13, 1fr) }.grid[col-xl="14"]{--grid-tc: repeat(14, 1fr) }.grid[col-xl="15"]{--grid-tc: repeat(15, 1fr) }.grid[col-xl="16"]{--grid-tc: repeat(16, 1fr) }.grid[col-xl="17"]{--grid-tc: repeat(17, 1fr) }.grid[col-xl="18"]{--grid-tc: repeat(18, 1fr) }.grid[col-xl="19"]{--grid-tc: repeat(19, 1fr) }.grid[col-xl="20"]{--grid-tc: repeat(20, 1fr) }.grid[col-xl="21"]{--grid-tc: repeat(21, 1fr) }.grid[col-xl="22"]{--grid-tc: repeat(22, 1fr) }.grid[col-xl="23"]{--grid-tc: repeat(23, 1fr) }.grid[col-xl="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span-xl^="1"]{--grid-cs: 1 }.grid>.grid_item[span-xl^="2"]{--grid-cs: 2 }.grid>.grid_item[span-xl^="3"]{--grid-cs: 3 }.grid>.grid_item[span-xl^="4"]{--grid-cs: 4 }.grid>.grid_item[span-xl^="5"]{--grid-cs: 5 }.grid>.grid_item[span-xl^="6"]{--grid-cs: 6 }.grid>.grid_item[span-xl^="7"]{--grid-cs: 7 }.grid>.grid_item[span-xl^="8"]{--grid-cs: 8 }.grid>.grid_item[span-xl^="9"]{--grid-cs: 9 }.grid>.grid_item[span-xl^="10"]{--grid-cs: 10 }.grid>.grid_item[span-xl^="11"]{--grid-cs: 11 }.grid>.grid_item[span-xl^="12"]{--grid-cs: 12 }.grid>.grid_item[span-xl^="13"]{--grid-cs: 13 }.grid>.grid_item[span-xl^="14"]{--grid-cs: 14 }.grid>.grid_item[span-xl^="15"]{--grid-cs: 15 }.grid>.grid_item[span-xl^="16"]{--grid-cs: 16 }.grid>.grid_item[span-xl^="17"]{--grid-cs: 17 }.grid>.grid_item[span-xl^="18"]{--grid-cs: 18 }.grid>.grid_item[span-xl^="19"]{--grid-cs: 19 }.grid>.grid_item[span-xl^="20"]{--grid-cs: 20 }.grid>.grid_item[span-xl^="21"]{--grid-cs: 21 }.grid>.grid_item[span-xl^="22"]{--grid-cs: 22 }.grid>.grid_item[span-xl^="23"]{--grid-cs: 23 }.grid>.grid_item[span-xl^="24"]{--grid-cs: 24 }.grid>.grid_item[span-xl$="+1"],.grid>.grid_item[span-xl="1"]{--grid-ce: 1 }.grid>.grid_item[span-xl$="+2"],.grid>.grid_item[span-xl$="-1"],.grid>.grid_item[span-xl="2"]{--grid-ce: 2 }.grid>.grid_item[span-xl$="+3"],.grid>.grid_item[span-xl$="-2"],.grid>.grid_item[span-xl="3"]{--grid-ce: 3 }.grid>.grid_item[span-xl$="+4"],.grid>.grid_item[span-xl$="-3"],.grid>.grid_item[span-xl="4"]{--grid-ce: 4 }.grid>.grid_item[span-xl$="+5"],.grid>.grid_item[span-xl$="-4"],.grid>.grid_item[span-xl="5"]{--grid-ce: 5 }.grid>.grid_item[span-xl$="+6"],.grid>.grid_item[span-xl$="-5"],.grid>.grid_item[span-xl="6"]{--grid-ce: 6 }.grid>.grid_item[span-xl$="+7"],.grid>.grid_item[span-xl$="-6"],.grid>.grid_item[span-xl="7"]{--grid-ce: 7 }.grid>.grid_item[span-xl$="+8"],.grid>.grid_item[span-xl$="-7"],.grid>.grid_item[span-xl="8"]{--grid-ce: 8 }.grid>.grid_item[span-xl$="+9"],.grid>.grid_item[span-xl$="-8"],.grid>.grid_item[span-xl="9"]{--grid-ce: 9 }.grid>.grid_item[span-xl$="+10"],.grid>.grid_item[span-xl$="-9"],.grid>.grid_item[span-xl="10"]{--grid-ce: 10 }.grid>.grid_item[span-xl$="+11"],.grid>.grid_item[span-xl$="-10"],.grid>.grid_item[span-xl="11"]{--grid-ce: 11 }.grid>.grid_item[span-xl$="+12"],.grid>.grid_item[span-xl$="-11"],.grid>.grid_item[span-xl="12"]{--grid-ce: 12 }.grid>.grid_item[span-xl$="+13"],.grid>.grid_item[span-xl$="-12"],.grid>.grid_item[span-xl="13"]{--grid-ce: 13 }.grid>.grid_item[span-xl$="+14"],.grid>.grid_item[span-xl$="-13"],.grid>.grid_item[span-xl="14"]{--grid-ce: 14 }.grid>.grid_item[span-xl$="+15"],.grid>.grid_item[span-xl$="-14"],.grid>.grid_item[span-xl="15"]{--grid-ce: 15 }.grid>.grid_item[span-xl$="+16"],.grid>.grid_item[span-xl$="-15"],.grid>.grid_item[span-xl="16"]{--grid-ce: 16 }.grid>.grid_item[span-xl$="+17"],.grid>.grid_item[span-xl$="-16"],.grid>.grid_item[span-xl="17"]{--grid-ce: 17 }.grid>.grid_item[span-xl$="+18"],.grid>.grid_item[span-xl$="-17"],.grid>.grid_item[span-xl="18"]{--grid-ce: 18 }.grid>.grid_item[span-xl$="+19"],.grid>.grid_item[span-xl$="-18"],.grid>.grid_item[span-xl="19"]{--grid-ce: 19 }.grid>.grid_item[span-xl$="+20"],.grid>.grid_item[span-xl$="-19"],.grid>.grid_item[span-xl="20"]{--grid-ce: 20 }.grid>.grid_item[span-xl$="+21"],.grid>.grid_item[span-xl$="-20"],.grid>.grid_item[span-xl="21"]{--grid-ce: 21 }.grid>.grid_item[span-xl$="+22"],.grid>.grid_item[span-xl$="-21"],.grid>.grid_item[span-xl="22"]{--grid-ce: 22 }.grid>.grid_item[span-xl$="+23"],.grid>.grid_item[span-xl$="-22"],.grid>.grid_item[span-xl="23"]{--grid-ce: 23 }.grid>.grid_item[span-xl$="+24"],.grid>.grid_item[span-xl$="-23"],.grid>.grid_item[span-xl="24"]{--grid-ce: 24 }.grid>.grid_item[span-xl$="-24"]{--grid-ce: 25 }.grid>.grid_item[span-xl]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span-xl*="+"],.grid>.grid_item[span-xl*="-"],.grid>.grid_item[span-xl*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span-xl*="-"],.grid>.grid_item[span-xl*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span-xl=row]{grid-column:1 / -1}}}@layer global{.layout{display:flex;flex-direction:column;width:100vw;min-height:100vh;.layout_content{flex:1}}.layout_content_main{container:main / inline-size}.layout-centered{.layout_content{display:grid;gap:var(--sm3);grid-template-columns:1fr minmax(0,var(--layout-content-width)) 1fr;margin-top:var(--lg1);margin-bottom:var(--sm1);@media(width>=768px){margin-top:var(--xl3);margin-bottom:var(--md3);gap:var(--md3)}}.layout_content_main{grid-column:2}}.layout-sidebar{.layout_content{@media(width>=768px){display:grid;grid-template-columns:var(--layout-aside-width) minmax(0,1fr)}}.layout_content_main{padding:var(--sm2);@media(width>=768px){grid-row:1;grid-column:2;padding:var(--lg1) var(--md2)}}.layout_content_aside{@media(width>=768px){grid-row:1;grid-column:1;padding:var(--lg1) var(--md3)}}}.layout-sidebar-end{.layout_content{@media(width>=768px){grid-template-columns:minmax(0,1fr) var(--layout-aside-width)}}.layout_content_main{@media(width>=768px){grid-column:1}}.layout_content_aside{@media(width>=768px){grid-column:2}}}.layout-docs{.layout_content{@media(width>=768px){display:grid;grid-template-columns:var(--layout-aside-width) minmax(0,1fr)}@media(width>=1024px){grid-template-columns:var(--layout-aside-width) minmax(0,var(--layout-content-width)) var(--layout-toc-width)}}.layout_content_main{padding:var(--sm2);@media(width>=768px){grid-row:1;grid-column:2;padding:var(--lg1) var(--md2)}}.layout_content_aside{display:none;@media(width>=768px){display:block;grid-row:1;grid-column:1;padding:var(--lg1) var(--md3)}}.layout_content_aside-toc{@media(width>=768px){display:none}@media(width>=1024px){display:block;grid-row:1;grid-column:3;padding:var(--lg1) var(--md3)}}}.layout-split{.layout_content{display:grid;@media(width>=768px){grid-template-columns:1fr 1fr}}}.layout-cover{min-height:100dvh;.layout_content{display:grid;place-items:center}}}@layer global{@scope(.prose)to (.not-prose){:is(p,ul,ol,blockquote,table):has(+:is(h1,h2,h3,h4)){margin-bottom:calc(var(--prose-spacing) * 2)}p,ul,ol,dl{margin-bottom:var(--prose-spacing);p,ul,ol,dl{margin-bottom:0}}ul,ol{ul,ol{margin-inline-start:0;padding-inline-start:var(--sm2)}li{margin-bottom:.5em;&::marker{color:light-dark(var(--base-300),var(--base-600))}}}ul{margin-inline-start:var(--sm2);list-style-type:"\2192 "}ol{margin-inline-start:var(--md2);list-style-type:decimal-leading-zero;li::marker{font-size:var(--text-sm)}}table{margin-top:var(--md1);margin-bottom:var(--md1)}}}@layer global{.wrap{display:grid;grid-template-columns:1fr var(--wrap-width) 1fr;>*,>astro-island>*,>astro-slot>*,>astro-static-slot>*{grid-column:2;padding-inline:var(--wrap-spacing);@media(width>=768px){padding-inline:var(--wrap-md-spacing)}@media(width>=1024px){padding-inline:var(--wrap-lg-spacing)}}}.wrap-sm{--wrap-width: var(--wrap-width-sm)}.wrap-md{--wrap-width: var(--wrap-width-md)}.wrap-lg{--wrap-width: var(--wrap-width-lg)}.wrap_content-fullBleed{grid-column:1 / -1;width:100%;object-fit:cover}}@layer helpers{.c-base-0{color:var(--base-0)!important}.bdc-base-0{border-color:var(--base-0)!important}.bgc-base-0{background-color:var(--base-0)!important}.c-base-50{color:var(--base-50)!important}.bdc-base-50{border-color:var(--base-50)!important}.bgc-base-50{background-color:var(--base-50)!important}.c-base-100{color:var(--base-100)!important}.bdc-base-100{border-color:var(--base-100)!important}.bgc-base-100{background-color:var(--base-100)!important}.c-base-200{color:var(--base-200)!important}.bdc-base-200{border-color:var(--base-200)!important}.bgc-base-200{background-color:var(--base-200)!important}.c-base-300{color:var(--base-300)!important}.bdc-base-300{border-color:var(--base-300)!important}.bgc-base-300{background-color:var(--base-300)!important}.c-base-400{color:var(--base-400)!important}.bdc-base-400{border-color:var(--base-400)!important}.bgc-base-400{background-color:var(--base-400)!important}.c-base-500{color:var(--base-500)!important}.bdc-base-500{border-color:var(--base-500)!important}.bgc-base-500{background-color:var(--base-500)!important}.c-base-600{color:var(--base-600)!important}.bdc-base-600{border-color:var(--base-600)!important}.bgc-base-600{background-color:var(--base-600)!important}.c-base-700{color:var(--base-700)!important}.bdc-base-700{border-color:var(--base-700)!important}.bgc-base-700{background-color:var(--base-700)!important}.c-base-800{color:var(--base-800)!important}.bdc-base-800{border-color:var(--base-800)!important}.bgc-base-800{background-color:var(--base-800)!important}.c-base-900{color:var(--base-900)!important}.bdc-base-900{border-color:var(--base-900)!important}.bgc-base-900{background-color:var(--base-900)!important}.c-base-950{color:var(--base-950)!important}.bdc-base-950{border-color:var(--base-950)!important}.bgc-base-950{background-color:var(--base-950)!important}.c-primary-50{color:var(--primary-50)!important}.bdc-primary-50{border-color:var(--primary-50)!important}.bgc-primary-50{background-color:var(--primary-50)!important}.c-primary-100{color:var(--primary-100)!important}.bdc-primary-100{border-color:var(--primary-100)!important}.bgc-primary-100{background-color:var(--primary-100)!important}.c-primary-200{color:var(--primary-200)!important}.bdc-primary-200{border-color:var(--primary-200)!important}.bgc-primary-200{background-color:var(--primary-200)!important}.c-primary-300{color:var(--primary-300)!important}.bdc-primary-300{border-color:var(--primary-300)!important}.bgc-primary-300{background-color:var(--primary-300)!important}.c-primary-400{color:var(--primary-400)!important}.bdc-primary-400{border-color:var(--primary-400)!important}.bgc-primary-400{background-color:var(--primary-400)!important}.c-primary-500{color:var(--primary-500)!important}.bdc-primary-500{border-color:var(--primary-500)!important}.bgc-primary-500{background-color:var(--primary-500)!important}.c-primary-600{color:var(--primary-600)!important}.bdc-primary-600{border-color:var(--primary-600)!important}.bgc-primary-600{background-color:var(--primary-600)!important}.c-primary-700{color:var(--primary-700)!important}.bdc-primary-700{border-color:var(--primary-700)!important}.bgc-primary-700{background-color:var(--primary-700)!important}.c-primary-800{color:var(--primary-800)!important}.bdc-primary-800{border-color:var(--primary-800)!important}.bgc-primary-800{background-color:var(--primary-800)!important}.c-primary-900{color:var(--primary-900)!important}.bdc-primary-900{border-color:var(--primary-900)!important}.bgc-primary-900{background-color:var(--primary-900)!important}.c-primary-950{color:var(--primary-950)!important}.bdc-primary-950{border-color:var(--primary-950)!important}.bgc-primary-950{background-color:var(--primary-950)!important}.c-yes-100{color:var(--yes-100)!important}.bdc-yes-100{border-color:var(--yes-100)!important}.bgc-yes-100{background-color:var(--yes-100)!important}.c-yes-200{color:var(--yes-200)!important}.bdc-yes-200{border-color:var(--yes-200)!important}.bgc-yes-200{background-color:var(--yes-200)!important}.c-yes-300{color:var(--yes-300)!important}.bdc-yes-300{border-color:var(--yes-300)!important}.bgc-yes-300{background-color:var(--yes-300)!important}.c-yes-400{color:var(--yes-400)!important}.bdc-yes-400{border-color:var(--yes-400)!important}.bgc-yes-400{background-color:var(--yes-400)!important}.c-yes-500{color:var(--yes-500)!important}.bdc-yes-500{border-color:var(--yes-500)!important}.bgc-yes-500{background-color:var(--yes-500)!important}.c-no-100{color:var(--no-100)!important}.bdc-no-100{border-color:var(--no-100)!important}.bgc-no-100{background-color:var(--no-100)!important}.c-no-200{color:var(--no-200)!important}.bdc-no-200{border-color:var(--no-200)!important}.bgc-no-200{background-color:var(--no-200)!important}.c-no-300{color:var(--no-300)!important}.bdc-no-300{border-color:var(--no-300)!important}.bgc-no-300{background-color:var(--no-300)!important}.c-no-400{color:var(--no-400)!important}.bdc-no-400{border-color:var(--no-400)!important}.bgc-no-400{background-color:var(--no-400)!important}.c-no-500{color:var(--no-500)!important}.bdc-no-500{border-color:var(--no-500)!important}.bgc-no-500{background-color:var(--no-500)!important}.c-maybe-100{color:var(--maybe-100)!important}.bdc-maybe-100{border-color:var(--maybe-100)!important}.bgc-maybe-100{background-color:var(--maybe-100)!important}.c-maybe-200{color:var(--maybe-200)!important}.bdc-maybe-200{border-color:var(--maybe-200)!important}.bgc-maybe-200{background-color:var(--maybe-200)!important}.c-maybe-300{color:var(--maybe-300)!important}.bdc-maybe-300{border-color:var(--maybe-300)!important}.bgc-maybe-300{background-color:var(--maybe-300)!important}.c-maybe-400{color:var(--maybe-400)!important}.bdc-maybe-400{border-color:var(--maybe-400)!important}.bgc-maybe-400{background-color:var(--maybe-400)!important}.c-maybe-500{color:var(--maybe-500)!important}.bdc-maybe-500{border-color:var(--maybe-500)!important}.bgc-maybe-500{background-color:var(--maybe-500)!important}}@layer helpers{body.dev{--baseline: 8;background-size:100% calc(var(--baseline) * 1px)!important;background-image:linear-gradient(to bottom,#0000 calc((var(--baseline) - 1) * 1px),#ff69b4 calc(var(--baseline) * 1px))!important}.dev-error{position:fixed!important;top:var(--md1)!important;left:var(--md1)!important;z-index:var(--z-top)!important;padding:var(--sm1)!important;font-size:1rem!important;color:var(--danger-500)!important;background:var(--danger-100)!important;border:1px solid var(--danger-500)!important;border-radius:var(--radius-md)!important}}@layer helpers{.of-auto,.overflow-auto{overflow:auto!important}.of-hidden,.overflow-hidden{overflow:hidden!important}.of-clip,.overflow-clip{overflow:clip!important}.of-visible,.overflow-visible{overflow:visible!important}.of-scroll,.overflow-scroll{overflow:scroll!important}.of-x-auto,.overflow-x-auto{overflow-x:auto!important}.of-y-auto,.overflow-y-auto{overflow-y:auto!important}.of-x-hidden,.overflow-x-hidden{overflow-x:hidden!important}.of-y-hidden,.overflow-y-hidden{overflow-y:hidden!important}.of-x-clip,.overflow-x-clip{overflow-x:clip!important}.of-y-clip,.overflow-y-clip{overflow-y:clip!important}.of-x-visible,.overflow-x-visible{overflow-x:visible!important}.of-y-visible,.overflow-y-visible{overflow-y:visible!important}.of-x-scroll,.overflow-x-scroll{overflow-x:scroll!important}.of-y-scroll,.overflow-y-scroll{overflow-y:scroll!important}.position-static{position:static!important}.position-fixed{position:fixed!important}.position-absolute{position:absolute!important}.position-relative{position:relative!important}.position-sticky{position:sticky!important}.visibility-visible{visibility:visible!important}.visibility-hidden{visibility:hidden!important}.visibility-collapse{visibility:collapse!important}.z-auto{z-index:auto!important}.z-bottom{z-index:var(--z-bottom)!important}.z-0{z-index:var(--z-0)!important}.z-1{z-index:var(--z-1)!important}.z-2{z-index:var(--z-2)!important}.z-3{z-index:var(--z-3)!important}.z-4{z-index:var(--z-4)!important}.z-5{z-index:var(--z-5)!important}.z-top{z-index:var(--z-top)!important}}@layer helpers{.o-0{opacity:var(--o-0)!important}.o-1{opacity:var(--o-1)!important}.o-2{opacity:var(--o-2)!important}.o-3{opacity:var(--o-3)!important}.o-4{opacity:var(--o-4)!important}.o-5{opacity:var(--o-5)!important}}@layer helpers{.ar-square{aspect-ratio:var(--ar-square)!important}.ar-landscape{aspect-ratio:var(--ar-landscape)!important}.ar-portrait{aspect-ratio:var(--ar-portrait)!important}.ar-widescreen{aspect-ratio:var(--ar-widescreen)!important}.ar-golden{aspect-ratio:var(--ar-golden)!important}}@layer helpers{.w-0{width:0!important}.h-0{height:0!important}.m-0{margin:0!important}.mt-0{margin-top:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mr-0{margin-right:0!important}.mis-0{margin-inline-start:0!important}.mie-0{margin-inline-end:0!important}.p-0{padding:0!important}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.pis-0{padding-inline-start:0!important}.pie-0{padding-inline-end:0!important}.w-xs1{width:var(--xs1)!important}.h-xs1{height:var(--xs1)!important}.m-xs1{margin:var(--xs1)!important}.mt-xs1{margin-top:var(--xs1)!important}.mb-xs1{margin-bottom:var(--xs1)!important}.ml-xs1{margin-left:var(--xs1)!important}.mr-xs1{margin-right:var(--xs1)!important}.mis-xs1{margin-inline-start:var(--xs1)!important}.mie-xs1{margin-inline-end:var(--xs1)!important}.p-xs1{padding:var(--xs1)!important}.pt-xs1{padding-top:var(--xs1)!important}.pb-xs1{padding-bottom:var(--xs1)!important}.pl-xs1{padding-left:var(--xs1)!important}.pr-xs1{padding-right:var(--xs1)!important}.pis-xs1{padding-inline-start:var(--xs1)!important}.pie-xs1{padding-inline-end:var(--xs1)!important}.w-xs2{width:var(--xs2)!important}.h-xs2{height:var(--xs2)!important}.m-xs2{margin:var(--xs2)!important}.mt-xs2{margin-top:var(--xs2)!important}.mb-xs2{margin-bottom:var(--xs2)!important}.ml-xs2{margin-left:var(--xs2)!important}.mr-xs2{margin-right:var(--xs2)!important}.mis-xs2{margin-inline-start:var(--xs2)!important}.mie-xs2{margin-inline-end:var(--xs2)!important}.p-xs2{padding:var(--xs2)!important}.pt-xs2{padding-top:var(--xs2)!important}.pb-xs2{padding-bottom:var(--xs2)!important}.pl-xs2{padding-left:var(--xs2)!important}.pr-xs2{padding-right:var(--xs2)!important}.pis-xs2{padding-inline-start:var(--xs2)!important}.pie-xs2{padding-inline-end:var(--xs2)!important}.w-xs3{width:var(--xs3)!important}.h-xs3{height:var(--xs3)!important}.m-xs3{margin:var(--xs3)!important}.mt-xs3{margin-top:var(--xs3)!important}.mb-xs3{margin-bottom:var(--xs3)!important}.ml-xs3{margin-left:var(--xs3)!important}.mr-xs3{margin-right:var(--xs3)!important}.mis-xs3{margin-inline-start:var(--xs3)!important}.mie-xs3{margin-inline-end:var(--xs3)!important}.p-xs3{padding:var(--xs3)!important}.pt-xs3{padding-top:var(--xs3)!important}.pb-xs3{padding-bottom:var(--xs3)!important}.pl-xs3{padding-left:var(--xs3)!important}.pr-xs3{padding-right:var(--xs3)!important}.pis-xs3{padding-inline-start:var(--xs3)!important}.pie-xs3{padding-inline-end:var(--xs3)!important}.w-sm1{width:var(--sm1)!important}.h-sm1{height:var(--sm1)!important}.m-sm1{margin:var(--sm1)!important}.mt-sm1{margin-top:var(--sm1)!important}.mb-sm1{margin-bottom:var(--sm1)!important}.ml-sm1{margin-left:var(--sm1)!important}.mr-sm1{margin-right:var(--sm1)!important}.mis-sm1{margin-inline-start:var(--sm1)!important}.mie-sm1{margin-inline-end:var(--sm1)!important}.p-sm1{padding:var(--sm1)!important}.pt-sm1{padding-top:var(--sm1)!important}.pb-sm1{padding-bottom:var(--sm1)!important}.pl-sm1{padding-left:var(--sm1)!important}.pr-sm1{padding-right:var(--sm1)!important}.pis-sm1{padding-inline-start:var(--sm1)!important}.pie-sm1{padding-inline-end:var(--sm1)!important}.w-sm2{width:var(--sm2)!important}.h-sm2{height:var(--sm2)!important}.m-sm2{margin:var(--sm2)!important}.mt-sm2{margin-top:var(--sm2)!important}.mb-sm2{margin-bottom:var(--sm2)!important}.ml-sm2{margin-left:var(--sm2)!important}.mr-sm2{margin-right:var(--sm2)!important}.mis-sm2{margin-inline-start:var(--sm2)!important}.mie-sm2{margin-inline-end:var(--sm2)!important}.p-sm2{padding:var(--sm2)!important}.pt-sm2{padding-top:var(--sm2)!important}.pb-sm2{padding-bottom:var(--sm2)!important}.pl-sm2{padding-left:var(--sm2)!important}.pr-sm2{padding-right:var(--sm2)!important}.pis-sm2{padding-inline-start:var(--sm2)!important}.pie-sm2{padding-inline-end:var(--sm2)!important}.w-sm3{width:var(--sm3)!important}.h-sm3{height:var(--sm3)!important}.m-sm3{margin:var(--sm3)!important}.mt-sm3{margin-top:var(--sm3)!important}.mb-sm3{margin-bottom:var(--sm3)!important}.ml-sm3{margin-left:var(--sm3)!important}.mr-sm3{margin-right:var(--sm3)!important}.mis-sm3{margin-inline-start:var(--sm3)!important}.mie-sm3{margin-inline-end:var(--sm3)!important}.p-sm3{padding:var(--sm3)!important}.pt-sm3{padding-top:var(--sm3)!important}.pb-sm3{padding-bottom:var(--sm3)!important}.pl-sm3{padding-left:var(--sm3)!important}.pr-sm3{padding-right:var(--sm3)!important}.pis-sm3{padding-inline-start:var(--sm3)!important}.pie-sm3{padding-inline-end:var(--sm3)!important}.w-md1{width:var(--md1)!important}.h-md1{height:var(--md1)!important}.m-md1{margin:var(--md1)!important}.mt-md1{margin-top:var(--md1)!important}.mb-md1{margin-bottom:var(--md1)!important}.ml-md1{margin-left:var(--md1)!important}.mr-md1{margin-right:var(--md1)!important}.mis-md1{margin-inline-start:var(--md1)!important}.mie-md1{margin-inline-end:var(--md1)!important}.p-md1{padding:var(--md1)!important}.pt-md1{padding-top:var(--md1)!important}.pb-md1{padding-bottom:var(--md1)!important}.pl-md1{padding-left:var(--md1)!important}.pr-md1{padding-right:var(--md1)!important}.pis-md1{padding-inline-start:var(--md1)!important}.pie-md1{padding-inline-end:var(--md1)!important}.w-md2{width:var(--md2)!important}.h-md2{height:var(--md2)!important}.m-md2{margin:var(--md2)!important}.mt-md2{margin-top:var(--md2)!important}.mb-md2{margin-bottom:var(--md2)!important}.ml-md2{margin-left:var(--md2)!important}.mr-md2{margin-right:var(--md2)!important}.mis-md2{margin-inline-start:var(--md2)!important}.mie-md2{margin-inline-end:var(--md2)!important}.p-md2{padding:var(--md2)!important}.pt-md2{padding-top:var(--md2)!important}.pb-md2{padding-bottom:var(--md2)!important}.pl-md2{padding-left:var(--md2)!important}.pr-md2{padding-right:var(--md2)!important}.pis-md2{padding-inline-start:var(--md2)!important}.pie-md2{padding-inline-end:var(--md2)!important}.w-md3{width:var(--md3)!important}.h-md3{height:var(--md3)!important}.m-md3{margin:var(--md3)!important}.mt-md3{margin-top:var(--md3)!important}.mb-md3{margin-bottom:var(--md3)!important}.ml-md3{margin-left:var(--md3)!important}.mr-md3{margin-right:var(--md3)!important}.mis-md3{margin-inline-start:var(--md3)!important}.mie-md3{margin-inline-end:var(--md3)!important}.p-md3{padding:var(--md3)!important}.pt-md3{padding-top:var(--md3)!important}.pb-md3{padding-bottom:var(--md3)!important}.pl-md3{padding-left:var(--md3)!important}.pr-md3{padding-right:var(--md3)!important}.pis-md3{padding-inline-start:var(--md3)!important}.pie-md3{padding-inline-end:var(--md3)!important}.w-lg1{width:var(--lg1)!important}.h-lg1{height:var(--lg1)!important}.m-lg1{margin:var(--lg1)!important}.mt-lg1{margin-top:var(--lg1)!important}.mb-lg1{margin-bottom:var(--lg1)!important}.ml-lg1{margin-left:var(--lg1)!important}.mr-lg1{margin-right:var(--lg1)!important}.mis-lg1{margin-inline-start:var(--lg1)!important}.mie-lg1{margin-inline-end:var(--lg1)!important}.p-lg1{padding:var(--lg1)!important}.pt-lg1{padding-top:var(--lg1)!important}.pb-lg1{padding-bottom:var(--lg1)!important}.pl-lg1{padding-left:var(--lg1)!important}.pr-lg1{padding-right:var(--lg1)!important}.pis-lg1{padding-inline-start:var(--lg1)!important}.pie-lg1{padding-inline-end:var(--lg1)!important}.w-lg2{width:var(--lg2)!important}.h-lg2{height:var(--lg2)!important}.m-lg2{margin:var(--lg2)!important}.mt-lg2{margin-top:var(--lg2)!important}.mb-lg2{margin-bottom:var(--lg2)!important}.ml-lg2{margin-left:var(--lg2)!important}.mr-lg2{margin-right:var(--lg2)!important}.mis-lg2{margin-inline-start:var(--lg2)!important}.mie-lg2{margin-inline-end:var(--lg2)!important}.p-lg2{padding:var(--lg2)!important}.pt-lg2{padding-top:var(--lg2)!important}.pb-lg2{padding-bottom:var(--lg2)!important}.pl-lg2{padding-left:var(--lg2)!important}.pr-lg2{padding-right:var(--lg2)!important}.pis-lg2{padding-inline-start:var(--lg2)!important}.pie-lg2{padding-inline-end:var(--lg2)!important}.w-lg3{width:var(--lg3)!important}.h-lg3{height:var(--lg3)!important}.m-lg3{margin:var(--lg3)!important}.mt-lg3{margin-top:var(--lg3)!important}.mb-lg3{margin-bottom:var(--lg3)!important}.ml-lg3{margin-left:var(--lg3)!important}.mr-lg3{margin-right:var(--lg3)!important}.mis-lg3{margin-inline-start:var(--lg3)!important}.mie-lg3{margin-inline-end:var(--lg3)!important}.p-lg3{padding:var(--lg3)!important}.pt-lg3{padding-top:var(--lg3)!important}.pb-lg3{padding-bottom:var(--lg3)!important}.pl-lg3{padding-left:var(--lg3)!important}.pr-lg3{padding-right:var(--lg3)!important}.pis-lg3{padding-inline-start:var(--lg3)!important}.pie-lg3{padding-inline-end:var(--lg3)!important}.w-xl1{width:var(--xl1)!important}.h-xl1{height:var(--xl1)!important}.m-xl1{margin:var(--xl1)!important}.mt-xl1{margin-top:var(--xl1)!important}.mb-xl1{margin-bottom:var(--xl1)!important}.ml-xl1{margin-left:var(--xl1)!important}.mr-xl1{margin-right:var(--xl1)!important}.mis-xl1{margin-inline-start:var(--xl1)!important}.mie-xl1{margin-inline-end:var(--xl1)!important}.p-xl1{padding:var(--xl1)!important}.pt-xl1{padding-top:var(--xl1)!important}.pb-xl1{padding-bottom:var(--xl1)!important}.pl-xl1{padding-left:var(--xl1)!important}.pr-xl1{padding-right:var(--xl1)!important}.pis-xl1{padding-inline-start:var(--xl1)!important}.pie-xl1{padding-inline-end:var(--xl1)!important}.w-xl2{width:var(--xl2)!important}.h-xl2{height:var(--xl2)!important}.m-xl2{margin:var(--xl2)!important}.mt-xl2{margin-top:var(--xl2)!important}.mb-xl2{margin-bottom:var(--xl2)!important}.ml-xl2{margin-left:var(--xl2)!important}.mr-xl2{margin-right:var(--xl2)!important}.mis-xl2{margin-inline-start:var(--xl2)!important}.mie-xl2{margin-inline-end:var(--xl2)!important}.p-xl2{padding:var(--xl2)!important}.pt-xl2{padding-top:var(--xl2)!important}.pb-xl2{padding-bottom:var(--xl2)!important}.pl-xl2{padding-left:var(--xl2)!important}.pr-xl2{padding-right:var(--xl2)!important}.pis-xl2{padding-inline-start:var(--xl2)!important}.pie-xl2{padding-inline-end:var(--xl2)!important}.w-xl3{width:var(--xl3)!important}.h-xl3{height:var(--xl3)!important}.m-xl3{margin:var(--xl3)!important}.mt-xl3{margin-top:var(--xl3)!important}.mb-xl3{margin-bottom:var(--xl3)!important}.ml-xl3{margin-left:var(--xl3)!important}.mr-xl3{margin-right:var(--xl3)!important}.mis-xl3{margin-inline-start:var(--xl3)!important}.mie-xl3{margin-inline-end:var(--xl3)!important}.p-xl3{padding:var(--xl3)!important}.pt-xl3{padding-top:var(--xl3)!important}.pb-xl3{padding-bottom:var(--xl3)!important}.pl-xl3{padding-left:var(--xl3)!important}.pr-xl3{padding-right:var(--xl3)!important}.pis-xl3{padding-inline-start:var(--xl3)!important}.pie-xl3{padding-inline-end:var(--xl3)!important}.w-xxl1{width:var(--xxl1)!important}.h-xxl1{height:var(--xxl1)!important}.m-xxl1{margin:var(--xxl1)!important}.mt-xxl1{margin-top:var(--xxl1)!important}.mb-xxl1{margin-bottom:var(--xxl1)!important}.ml-xxl1{margin-left:var(--xxl1)!important}.mr-xxl1{margin-right:var(--xxl1)!important}.mis-xxl1{margin-inline-start:var(--xxl1)!important}.mie-xxl1{margin-inline-end:var(--xxl1)!important}.p-xxl1{padding:var(--xxl1)!important}.pt-xxl1{padding-top:var(--xxl1)!important}.pb-xxl1{padding-bottom:var(--xxl1)!important}.pl-xxl1{padding-left:var(--xxl1)!important}.pr-xxl1{padding-right:var(--xxl1)!important}.pis-xxl1{padding-inline-start:var(--xxl1)!important}.pie-xxl1{padding-inline-end:var(--xxl1)!important}.w-xxl2{width:var(--xxl2)!important}.h-xxl2{height:var(--xxl2)!important}.m-xxl2{margin:var(--xxl2)!important}.mt-xxl2{margin-top:var(--xxl2)!important}.mb-xxl2{margin-bottom:var(--xxl2)!important}.ml-xxl2{margin-left:var(--xxl2)!important}.mr-xxl2{margin-right:var(--xxl2)!important}.mis-xxl2{margin-inline-start:var(--xxl2)!important}.mie-xxl2{margin-inline-end:var(--xxl2)!important}.p-xxl2{padding:var(--xxl2)!important}.pt-xxl2{padding-top:var(--xxl2)!important}.pb-xxl2{padding-bottom:var(--xxl2)!important}.pl-xxl2{padding-left:var(--xxl2)!important}.pr-xxl2{padding-right:var(--xxl2)!important}.pis-xxl2{padding-inline-start:var(--xxl2)!important}.pie-xxl2{padding-inline-end:var(--xxl2)!important}.w-xxl3{width:var(--xxl3)!important}.h-xxl3{height:var(--xxl3)!important}.m-xxl3{margin:var(--xxl3)!important}.mt-xxl3{margin-top:var(--xxl3)!important}.mb-xxl3{margin-bottom:var(--xxl3)!important}.ml-xxl3{margin-left:var(--xxl3)!important}.mr-xxl3{margin-right:var(--xxl3)!important}.mis-xxl3{margin-inline-start:var(--xxl3)!important}.mie-xxl3{margin-inline-end:var(--xxl3)!important}.p-xxl3{padding:var(--xxl3)!important}.pt-xxl3{padding-top:var(--xxl3)!important}.pb-xxl3{padding-bottom:var(--xxl3)!important}.pl-xxl3{padding-left:var(--xxl3)!important}.pr-xxl3{padding-right:var(--xxl3)!important}.pis-xxl3{padding-inline-start:var(--xxl3)!important}.pie-xxl3{padding-inline-end:var(--xxl3)!important}.w-mega1{width:var(--mega1)!important}.h-mega1{height:var(--mega1)!important}.m-mega1{margin:var(--mega1)!important}.mt-mega1{margin-top:var(--mega1)!important}.mb-mega1{margin-bottom:var(--mega1)!important}.ml-mega1{margin-left:var(--mega1)!important}.mr-mega1{margin-right:var(--mega1)!important}.mis-mega1{margin-inline-start:var(--mega1)!important}.mie-mega1{margin-inline-end:var(--mega1)!important}.p-mega1{padding:var(--mega1)!important}.pt-mega1{padding-top:var(--mega1)!important}.pb-mega1{padding-bottom:var(--mega1)!important}.pl-mega1{padding-left:var(--mega1)!important}.pr-mega1{padding-right:var(--mega1)!important}.pis-mega1{padding-inline-start:var(--mega1)!important}.pie-mega1{padding-inline-end:var(--mega1)!important}.w-mega2{width:var(--mega2)!important}.h-mega2{height:var(--mega2)!important}.m-mega2{margin:var(--mega2)!important}.mt-mega2{margin-top:var(--mega2)!important}.mb-mega2{margin-bottom:var(--mega2)!important}.ml-mega2{margin-left:var(--mega2)!important}.mr-mega2{margin-right:var(--mega2)!important}.mis-mega2{margin-inline-start:var(--mega2)!important}.mie-mega2{margin-inline-end:var(--mega2)!important}.p-mega2{padding:var(--mega2)!important}.pt-mega2{padding-top:var(--mega2)!important}.pb-mega2{padding-bottom:var(--mega2)!important}.pl-mega2{padding-left:var(--mega2)!important}.pr-mega2{padding-right:var(--mega2)!important}.pis-mega2{padding-inline-start:var(--mega2)!important}.pie-mega2{padding-inline-end:var(--mega2)!important}.w-mega3{width:var(--mega3)!important}.h-mega3{height:var(--mega3)!important}.m-mega3{margin:var(--mega3)!important}.mt-mega3{margin-top:var(--mega3)!important}.mb-mega3{margin-bottom:var(--mega3)!important}.ml-mega3{margin-left:var(--mega3)!important}.mr-mega3{margin-right:var(--mega3)!important}.mis-mega3{margin-inline-start:var(--mega3)!important}.mie-mega3{margin-inline-end:var(--mega3)!important}.p-mega3{padding:var(--mega3)!important}.pt-mega3{padding-top:var(--mega3)!important}.pb-mega3{padding-bottom:var(--mega3)!important}.pl-mega3{padding-left:var(--mega3)!important}.pr-mega3{padding-right:var(--mega3)!important}.pis-mega3{padding-inline-start:var(--mega3)!important}.pie-mega3{padding-inline-end:var(--mega3)!important}.w-giga1{width:var(--giga1)!important}.h-giga1{height:var(--giga1)!important}.m-giga1{margin:var(--giga1)!important}.mt-giga1{margin-top:var(--giga1)!important}.mb-giga1{margin-bottom:var(--giga1)!important}.ml-giga1{margin-left:var(--giga1)!important}.mr-giga1{margin-right:var(--giga1)!important}.mis-giga1{margin-inline-start:var(--giga1)!important}.mie-giga1{margin-inline-end:var(--giga1)!important}.p-giga1{padding:var(--giga1)!important}.pt-giga1{padding-top:var(--giga1)!important}.pb-giga1{padding-bottom:var(--giga1)!important}.pl-giga1{padding-left:var(--giga1)!important}.pr-giga1{padding-right:var(--giga1)!important}.pis-giga1{padding-inline-start:var(--giga1)!important}.pie-giga1{padding-inline-end:var(--giga1)!important}.w-giga2{width:var(--giga2)!important}.h-giga2{height:var(--giga2)!important}.m-giga2{margin:var(--giga2)!important}.mt-giga2{margin-top:var(--giga2)!important}.mb-giga2{margin-bottom:var(--giga2)!important}.ml-giga2{margin-left:var(--giga2)!important}.mr-giga2{margin-right:var(--giga2)!important}.mis-giga2{margin-inline-start:var(--giga2)!important}.mie-giga2{margin-inline-end:var(--giga2)!important}.p-giga2{padding:var(--giga2)!important}.pt-giga2{padding-top:var(--giga2)!important}.pb-giga2{padding-bottom:var(--giga2)!important}.pl-giga2{padding-left:var(--giga2)!important}.pr-giga2{padding-right:var(--giga2)!important}.pis-giga2{padding-inline-start:var(--giga2)!important}.pie-giga2{padding-inline-end:var(--giga2)!important}.w-giga3{width:var(--giga3)!important}.h-giga3{height:var(--giga3)!important}.m-giga3{margin:var(--giga3)!important}.mt-giga3{margin-top:var(--giga3)!important}.mb-giga3{margin-bottom:var(--giga3)!important}.ml-giga3{margin-left:var(--giga3)!important}.mr-giga3{margin-right:var(--giga3)!important}.mis-giga3{margin-inline-start:var(--giga3)!important}.mie-giga3{margin-inline-end:var(--giga3)!important}.p-giga3{padding:var(--giga3)!important}.pt-giga3{padding-top:var(--giga3)!important}.pb-giga3{padding-bottom:var(--giga3)!important}.pl-giga3{padding-left:var(--giga3)!important}.pr-giga3{padding-right:var(--giga3)!important}.pis-giga3{padding-inline-start:var(--giga3)!important}.pie-giga3{padding-inline-end:var(--giga3)!important}.w-tera1{width:var(--tera1)!important}.h-tera1{height:var(--tera1)!important}.m-tera1{margin:var(--tera1)!important}.mt-tera1{margin-top:var(--tera1)!important}.mb-tera1{margin-bottom:var(--tera1)!important}.ml-tera1{margin-left:var(--tera1)!important}.mr-tera1{margin-right:var(--tera1)!important}.mis-tera1{margin-inline-start:var(--tera1)!important}.mie-tera1{margin-inline-end:var(--tera1)!important}.p-tera1{padding:var(--tera1)!important}.pt-tera1{padding-top:var(--tera1)!important}.pb-tera1{padding-bottom:var(--tera1)!important}.pl-tera1{padding-left:var(--tera1)!important}.pr-tera1{padding-right:var(--tera1)!important}.pis-tera1{padding-inline-start:var(--tera1)!important}.pie-tera1{padding-inline-end:var(--tera1)!important}.w-tera2{width:var(--tera2)!important}.h-tera2{height:var(--tera2)!important}.m-tera2{margin:var(--tera2)!important}.mt-tera2{margin-top:var(--tera2)!important}.mb-tera2{margin-bottom:var(--tera2)!important}.ml-tera2{margin-left:var(--tera2)!important}.mr-tera2{margin-right:var(--tera2)!important}.mis-tera2{margin-inline-start:var(--tera2)!important}.mie-tera2{margin-inline-end:var(--tera2)!important}.p-tera2{padding:var(--tera2)!important}.pt-tera2{padding-top:var(--tera2)!important}.pb-tera2{padding-bottom:var(--tera2)!important}.pl-tera2{padding-left:var(--tera2)!important}.pr-tera2{padding-right:var(--tera2)!important}.pis-tera2{padding-inline-start:var(--tera2)!important}.pie-tera2{padding-inline-end:var(--tera2)!important}.w-tera3{width:var(--tera3)!important}.h-tera3{height:var(--tera3)!important}.m-tera3{margin:var(--tera3)!important}.mt-tera3{margin-top:var(--tera3)!important}.mb-tera3{margin-bottom:var(--tera3)!important}.ml-tera3{margin-left:var(--tera3)!important}.mr-tera3{margin-right:var(--tera3)!important}.mis-tera3{margin-inline-start:var(--tera3)!important}.mie-tera3{margin-inline-end:var(--tera3)!important}.p-tera3{padding:var(--tera3)!important}.pt-tera3{padding-top:var(--tera3)!important}.pb-tera3{padding-bottom:var(--tera3)!important}.pl-tera3{padding-left:var(--tera3)!important}.pr-tera3{padding-right:var(--tera3)!important}.pis-tera3{padding-inline-start:var(--tera3)!important}.pie-tera3{padding-inline-end:var(--tera3)!important}}@layer helpers{.font-text{font-family:var(--text)!important}.font-display{font-family:var(--display)!important}.font-mono{font-family:var(--mono)!important}.font-italic{font-style:italic!important}.font-normal{font-style:normal!important}.font-extra-light{font-weight:var(--extra-light)!important}.font-light{font-weight:var(--light)!important}.font-book{font-weight:var(--book)!important}.font-semi-bold{font-weight:var(--semi-bold)!important}.font-bold{font-weight:var(--bold)!important}.font-black{font-weight:var(--black)!important}.text-xs{font-size:var(--text-xs)!important}.text-sm{font-size:var(--text-sm)!important}.text-md{font-size:var(--text-md)!important}.text-lg{font-size:var(--text-lg)!important}.text-xl{font-size:var(--text-xl)!important}.display-sm{font-size:var(--display-sm)!important}.display-md{font-size:var(--display-md)!important}.display-lg{font-size:var(--display-lg)!important}.display-xl{font-size:var(--display-xl)!important}.display-mega{font-size:var(--display-mega)!important}.display-giga{font-size:var(--display-giga)!important}.tracking-sm{letter-spacing:var(--tracking-sm)!important}.tracking-md{letter-spacing:var(--tracking-md)!important}.tracking-lg{letter-spacing:var(--tracking-lg)!important}.tracking-xl{letter-spacing:var(--tracking-xl)!important}.tracking-xxl{letter-spacing:var(--tracking-xxl)!important}.leading-xs{line-height:var(--leading-xs)!important}.leading-sm{line-height:var(--leading-sm)!important}.leading-md{line-height:var(--leading-md)!important}.leading-lg{line-height:var(--leading-lg)!important}.leading-xl{line-height:var(--leading-xl)!important}.leading-xxl{line-height:var(--leading-xxl)!important}.text-left{text-align:left!important}.text-center{text-align:center!important}.text-right{text-align:right!important}.text-justify{text-align:justify!important}.text-start{text-align:start!important}.text-end{text-align:end!important}.text-uppercase{text-transform:uppercase!important}.text-lowercase{text-transform:lowercase!important}.text-capitalize{text-transform:capitalize!important}} +@layer base,elements,global,components,theme.defaults,theme.overrides,helpers;@layer base{*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion:reduce){*,:before,:after{animation-delay:-1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}}:where(:not(dialog)){margin:0}html,body{min-height:100%}}@layer elements{body{line-sizing:normal;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;background-color:var(--body-background-color);color:var(--text-color);font-family:var(--text);line-height:var(--body-line-height);&:has(.body-is-locked){overflow:hidden}}}@layer elements{::selection{color:var(--selection-color);background-color:var(--selection-background-color)}:where(a,u,ins,abbr){text-underline-offset:2px}a{font-weight:var(--link-font-weight);color:var(--link-color);&:where(:hover){color:var(--link-color-hover);-webkit-text-decoration:none;text-decoration:none}}address{width:max-content;max-width:100%;padding:var(--sm1) var(--sm3);font-style:normal;background-color:light-dark(var(--base-50),var(--base-900));border:var(--xs2) solid transparent;border-image:8 repeating-linear-gradient(-45deg,var(--no-500) 0,var(--no-500) var(--xs2),transparent 0,transparent calc(var(--xs2) * 2),var(--primary-500) 0,var(--primary-500) calc(var(--xs2) * 3),transparent 0,transparent calc(var(--xs2) * 4))}abbr{position:relative;cursor:help;&:after{position:relative;top:calc(var(--xs1) * -1);width:var(--sm1);height:var(--sm1);display:inline-block;content:"";background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='circle-help'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M9.09%209a3%203%200%200%201%205.83%201c0%202-3%203-3%203'/%3E%3Cpath%20d='M12%2017h.01'/%3E%3C/svg%3E");background-size:contain}&:hover:before{width:max-content;max-width:400px;position:absolute;left:50%;padding:var(--xs1) var(--xs3);content:attr(title);color:var(--base-0);background-color:var(--base-900);opacity:var(--o-4);border-radius:var(--radius-sm);transform:translate(-50%,-2em)}}blockquote{position:relative;margin-bottom:var(--prose-spacing);padding-block:var(--blockquote-padding-block);padding-inline:var(--blockquote-padding-inline);font-style:italic;background-color:var(--blockquote-background-color);border-radius:var(--blockquote-border-radius);&:before{content:"";position:absolute;top:0;inset-inline-start:0;width:var(--blockquote-accent-width);height:100%;border-start-start-radius:var(--blockquote-border-radius);border-end-start-radius:var(--blockquote-border-radius);background:var(--blockquote-accent-color)}p{&:first-child:before{content:open-quote}&:last-child{margin-bottom:0;&:after{content:close-quote}}}}cite{font-style:italic}code,var,kbd{font-family:var(--mono);font-size:.9em;font-style:normal;color:var(--text-code-muted-color)}:is(code,var,kbd):not(h1 *,h2 *,h3 *,h4 *,h5 *,h6 *,pre *){padding:.15em .3em;color:var(--text-code-color);background-color:var(--text-code-background-color);border-radius:var(--radius-sm)}dt{font-weight:var(--bold)}dd+dt{margin-top:.5em}del{text-decoration-color:var(--danger-500);text-decoration-style:wavy}h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{overflow-wrap:break-word;text-wrap:balance}h1,.h1,h2,.h2,h3,.h3,h4,.h4{font-family:var(--heading-font);font-weight:var(--heading-weight);letter-spacing:var(--heading-letter-spacing)}h1,.h1{margin-bottom:var(--heading-spacing-h1);font-size:var(--heading-font-size-h1);line-height:var(--heading-line-height-h1)}h2,.h2{margin-bottom:var(--heading-spacing-h2);font-size:var(--heading-font-size-h2);line-height:var(--heading-line-height-h2)}h3,.h3{margin-bottom:var(--heading-spacing-h3);font-size:var(--heading-font-size-h3);line-height:var(--heading-line-height-h3)}h4,.h4{margin-bottom:var(--heading-spacing-h4);font-size:var(--heading-font-size-h4);line-height:var(--heading-line-height-h4)}h5,.h5{margin-bottom:var(--heading-spacing-h5);font-size:var(--heading-font-size-h5);line-height:var(--heading-line-height-h5)}h6,.h6{margin-bottom:var(--heading-spacing-h6);font-size:var(--heading-font-size-h6);line-height:var(--heading-line-height-h6)}:where(h1,h2,h3):has(+:is(h2,h3,h4)){margin-bottom:var(--heading-spacing-consecutive)}hr{display:flex;justify-content:center;align-items:center;height:0;border-style:solid;border-width:var(--border-sm) 0 0;color:var(--ui-border-color);overflow:visible;&:after{content:var(--hr-content);padding:0 var(--xs1);line-height:1;letter-spacing:var(--tracking-sm);background-color:var(--body-background-color)}}:where(hr):has(+:is(p)){margin-bottom:var(--prose-spacing)}ins{padding:.15em .3em;color:var(--ins-color);background-color:var(--ins-background-color);border-radius:var(--radius-sm);-webkit-text-decoration:none;text-decoration:none;&:before{content:"+ "}}mark{padding:.15em .5em;background:var(--marker-color);border-radius:1em 0}:where(ol,ul){list-style-type:none;padding:0}pre{font-family:var(--mono);font-size:var(--pre-font-size);white-space:pre-wrap;border-radius:var(--pre-border-radius)}q{font-style:italic}s{text-decoration-color:light-dark(var(--base-950),var(--base-50));text-decoration-style:wavy}sub,sup{line-height:1}}@layer elements{:root{quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(af),:not(:lang(af))>:lang(af){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ak),:not(:lang(ak))>:lang(ak){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(asa),:not(:lang(asa))>:lang(asa){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(az),:not(:lang(az))>:lang(az){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(bem),:not(:lang(bem))>:lang(bem){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(bez),:not(:lang(bez))>:lang(bez){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(bn),:not(:lang(bn))>:lang(bn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(brx),:not(:lang(brx))>:lang(brx){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(cgg),:not(:lang(cgg))>:lang(cgg){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(chr),:not(:lang(chr))>:lang(chr){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(cy),:not(:lang(cy))>:lang(cy){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(da),:not(:lang(da))>:lang(da){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(dav),:not(:lang(dav))>:lang(dav){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(dje),:not(:lang(dje))>:lang(dje){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(dz),:not(:lang(dz))>:lang(dz){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ebu),:not(:lang(ebu))>:lang(ebu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ee),:not(:lang(ee))>:lang(ee){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(en),:not(:lang(en))>:lang(en){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(fil),:not(:lang(fil))>:lang(fil){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(fo),:not(:lang(fo))>:lang(fo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ga),:not(:lang(ga))>:lang(ga){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(gd),:not(:lang(gd))>:lang(gd){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(gl),:not(:lang(gl))>:lang(gl){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(gu),:not(:lang(gu))>:lang(gu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(guz),:not(:lang(guz))>:lang(guz){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ha),:not(:lang(ha))>:lang(ha){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(hi),:not(:lang(hi))>:lang(hi){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(id),:not(:lang(id))>:lang(id){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ig),:not(:lang(ig))>:lang(ig){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(jmc),:not(:lang(jmc))>:lang(jmc){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kam),:not(:lang(kam))>:lang(kam){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kde),:not(:lang(kde))>:lang(kde){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kea),:not(:lang(kea))>:lang(kea){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(khq),:not(:lang(khq))>:lang(khq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ki),:not(:lang(ki))>:lang(ki){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kln),:not(:lang(kln))>:lang(kln){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(km),:not(:lang(km))>:lang(km){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kn),:not(:lang(kn))>:lang(kn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ko),:not(:lang(ko))>:lang(ko){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ksb),:not(:lang(ksb))>:lang(ksb){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lg),:not(:lang(lg))>:lang(lg){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ln),:not(:lang(ln))>:lang(ln){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lo),:not(:lang(lo))>:lang(lo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lrc),:not(:lang(lrc))>:lang(lrc){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lu),:not(:lang(lu))>:lang(lu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(luo),:not(:lang(luo))>:lang(luo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lv),:not(:lang(lv))>:lang(lv){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mas),:not(:lang(mas))>:lang(mas){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mer),:not(:lang(mer))>:lang(mer){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mfe),:not(:lang(mfe))>:lang(mfe){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mgo),:not(:lang(mgo))>:lang(mgo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ml),:not(:lang(ml))>:lang(ml){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mn),:not(:lang(mn))>:lang(mn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mr),:not(:lang(mr))>:lang(mr){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ms),:not(:lang(ms))>:lang(ms){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mt),:not(:lang(mt))>:lang(mt){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(my),:not(:lang(my))>:lang(my){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(naq),:not(:lang(naq))>:lang(naq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(nd),:not(:lang(nd))>:lang(nd){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ne),:not(:lang(ne))>:lang(ne){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(nus),:not(:lang(nus))>:lang(nus){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(nyn),:not(:lang(nyn))>:lang(nyn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(pa),:not(:lang(pa))>:lang(pa){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(pt),:not(:lang(pt))>:lang(pt){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(rof),:not(:lang(rof))>:lang(rof){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(rwk),:not(:lang(rwk))>:lang(rwk){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(saq),:not(:lang(saq))>:lang(saq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(sbp),:not(:lang(sbp))>:lang(sbp){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(seh),:not(:lang(seh))>:lang(seh){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ses),:not(:lang(ses))>:lang(ses){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(si),:not(:lang(si))>:lang(si){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(so),:not(:lang(so))>:lang(so){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(sw),:not(:lang(sw))>:lang(sw){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ta),:not(:lang(ta))>:lang(ta){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(te),:not(:lang(te))>:lang(te){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(teo),:not(:lang(teo))>:lang(teo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(th),:not(:lang(th))>:lang(th){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(to),:not(:lang(to))>:lang(to){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(tr),:not(:lang(tr))>:lang(tr){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(twq),:not(:lang(twq))>:lang(twq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(tzm),:not(:lang(tzm))>:lang(tzm){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(uz-Cyrl),:not(:lang(uz-Cyrl))>:lang(uz-Cyrl){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vai),:not(:lang(vai))>:lang(vai){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vai-Latn),:not(:lang(vai-Latn))>:lang(vai-Latn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vi),:not(:lang(vi))>:lang(vi){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vun),:not(:lang(vun))>:lang(vun){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(xog),:not(:lang(xog))>:lang(xog){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(yo),:not(:lang(yo))>:lang(yo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(yue-Hans),:not(:lang(yue-Hans))>:lang(yue-Hans){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(zh),:not(:lang(zh))>:lang(zh){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(zu),:not(:lang(zu))>:lang(zu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(uz),:not(:lang(uz))>:lang(uz){quotes:"\201c" "\201d" "\2019" "\2018"}:root:lang(eu),:not(:lang(eu))>:lang(eu){quotes:"\201c" "\201d" "\201c" "\201d"}:root:lang(tk),:not(:lang(tk))>:lang(tk){quotes:"\201c" "\201d" "\201c" "\201d"}:root:lang(ar),:not(:lang(ar))>:lang(ar){quotes:"\201d" "\201c" "\2019" "\2018"}:root:lang(ur),:not(:lang(ur))>:lang(ur){quotes:"\201d" "\201c" "\2019" "\2018"}:root:lang(fi),:not(:lang(fi))>:lang(fi){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(he),:not(:lang(he))>:lang(he){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(lag),:not(:lang(lag))>:lang(lag){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(rn),:not(:lang(rn))>:lang(rn){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(sn),:not(:lang(sn))>:lang(sn){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(sv),:not(:lang(sv))>:lang(sv){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(sr),:not(:lang(sr))>:lang(sr){quotes:"\201e" "\201c" "\2018" "\2018"}:root:lang(sr-Latn),:not(:lang(sr-Latn))>:lang(sr-Latn){quotes:"\201e" "\201c" "\2018" "\2018"}:root:lang(bg),:not(:lang(bg))>:lang(bg){quotes:"\201e" "\201c" "\201e" "\201c"}:root:lang(lt),:not(:lang(lt))>:lang(lt){quotes:"\201e" "\201c" "\201e" "\201c"}:root:lang(bs-Cyrl),:not(:lang(bs-Cyrl))>:lang(bs-Cyrl){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(cs),:not(:lang(cs))>:lang(cs){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(de),:not(:lang(de))>:lang(de){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(dsb),:not(:lang(dsb))>:lang(dsb){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(et),:not(:lang(et))>:lang(et){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(hr),:not(:lang(hr))>:lang(hr){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(hsb),:not(:lang(hsb))>:lang(hsb){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(is),:not(:lang(is))>:lang(is){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(lb),:not(:lang(lb))>:lang(lb){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(luy),:not(:lang(luy))>:lang(luy){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(mk),:not(:lang(mk))>:lang(mk){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(sk),:not(:lang(sk))>:lang(sk){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(sl),:not(:lang(sl))>:lang(sl){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(ka),:not(:lang(ka))>:lang(ka){quotes:"\201e" "\201c" "\ab" "\bb"}:root:lang(bs),:not(:lang(bs))>:lang(bs){quotes:"\201e" "\201d" "\2018" "\2019"}:root:lang(agq),:not(:lang(agq))>:lang(agq){quotes:"\201e" "\201d" "\201a" "\2019"}:root:lang(ff),:not(:lang(ff))>:lang(ff){quotes:"\201e" "\201d" "\201a" "\2019"}:root:lang(nmg),:not(:lang(nmg))>:lang(nmg){quotes:"\201e" "\201d" "\ab" "\bb"}:root:lang(ro),:not(:lang(ro))>:lang(ro){quotes:"\201e" "\201d" "\ab" "\bb"}:root:lang(pl),:not(:lang(pl))>:lang(pl){quotes:"\201e" "\201d" "\ab" "\bb"}:root:lang(hu),:not(:lang(hu))>:lang(hu){quotes:"\201e" "\201d" "\bb" "\ab"}:root:lang(nl),:not(:lang(nl))>:lang(nl){quotes:"\2018" "\2019" "\201c" "\201d"}:root:lang(ti-ER),:not(:lang(ti-ER))>:lang(ti-ER){quotes:"\2018" "\2019" "\201c" "\201d"}:root:lang(dua),:not(:lang(dua))>:lang(dua){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(ksf),:not(:lang(ksf))>:lang(ksf){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(rw),:not(:lang(rw))>:lang(rw){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(nn),:not(:lang(nn))>:lang(nn){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(nb),:not(:lang(nb))>:lang(nb){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(ast),:not(:lang(ast))>:lang(ast){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(bm),:not(:lang(bm))>:lang(bm){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(br),:not(:lang(br))>:lang(br){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(ca),:not(:lang(ca))>:lang(ca){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(dyo),:not(:lang(dyo))>:lang(dyo){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(el),:not(:lang(el))>:lang(el){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(es),:not(:lang(es))>:lang(es){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(ewo),:not(:lang(ewo))>:lang(ewo){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(mg),:not(:lang(mg))>:lang(mg){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(mua),:not(:lang(mua))>:lang(mua){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(sg),:not(:lang(sg))>:lang(sg){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(it),:not(:lang(it))>:lang(it){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(kab),:not(:lang(kab))>:lang(kab){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(kk),:not(:lang(kk))>:lang(kk){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(pt-PT),:not(:lang(pt-PT))>:lang(pt-PT){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(nnh),:not(:lang(nnh))>:lang(nnh){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(sq),:not(:lang(sq))>:lang(sq){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(bas),:not(:lang(bas))>:lang(bas){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(be),:not(:lang(be))>:lang(be){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(ky),:not(:lang(ky))>:lang(ky){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(sah),:not(:lang(sah))>:lang(sah){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(ru),:not(:lang(ru))>:lang(ru){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(uk),:not(:lang(uk))>:lang(uk){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(zgh),:not(:lang(zgh))>:lang(zgh){quotes:"\ab" "\bb" "\201e" "\201d"}:root:lang(shi),:not(:lang(shi))>:lang(shi){quotes:"\ab" "\bb" "\201e" "\201d"}:root:lang(shi-Latn),:not(:lang(shi-Latn))>:lang(shi-Latn){quotes:"\ab" "\bb" "\201e" "\201d"}:root:lang(am),:not(:lang(am))>:lang(am){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(az-Cyrl),:not(:lang(az-Cyrl))>:lang(az-Cyrl){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(fa),:not(:lang(fa))>:lang(fa){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(fr-CH),:not(:lang(fr-CH))>:lang(fr-CH){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(gsw),:not(:lang(gsw))>:lang(gsw){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(jgo),:not(:lang(jgo))>:lang(jgo){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(kkj),:not(:lang(kkj))>:lang(kkj){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(mzn),:not(:lang(mzn))>:lang(mzn){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(fr),:not(:lang(fr))>:lang(fr){quotes:"\ab" "\bb" "\ab" "\bb"}:root:lang(hy),:not(:lang(hy))>:lang(hy){quotes:"\ab" "\bb" "\ab" "\bb"}:root:lang(yav),:not(:lang(yav))>:lang(yav){quotes:"\ab" "\bb" "\ab" "\bb"}:root:lang(ja),:not(:lang(ja))>:lang(ja){quotes:"\300c" "\300d" "\300e" "\300f"}:root:lang(yue),:not(:lang(yue))>:lang(yue){quotes:"\300c" "\300d" "\300e" "\300f"}:root:lang(zh-Hant),:not(:lang(zh-Hant))>:lang(zh-Hant){quotes:"\300c" "\300d" "\300e" "\300f"}}@layer elements{audio,canvas,embed,iframe,img,object,picture,svg,video{display:block;vertical-align:middle;max-width:100%}img,svg,video,canvas{height:auto}audio{width:100%;max-width:var(--tera1)}audio:not([controls]){display:none}figcaption{font-style:italic;font-size:var(--text-sm)}figure{&:has(*+figcaption){figcaption{margin-top:var(--figcaption-spacing)}}&:has(figcaption+*){figcaption{margin-bottom:var(--figcaption-spacing)}}}iframe{border:var(--border-sm) solid var(--ui-border-color)}}@layer elements{caption{caption-side:bottom;margin-top:var(--table-caption-spacing);font-size:var(--text-sm)}table{border-spacing:0;border:var(--table-border-width) solid var(--table-border-color);border-radius:var(--table-border-radius);background-color:var(--table-background-color)}th,td{text-align:start;padding:var(--table-padding);border-bottom:var(--table-border-width) solid var(--table-border-color);border-inline-start:var(--table-border-width) solid var(--table-border-color)}tr{th:first-child,td:first-child{border-inline-start-width:0}}tbody{tr:last-child{th,td{border-bottom-width:0}}}tfoot{th,td{border-top:var(--table-border-width) solid var(--table-border-color);border-bottom-width:0}}}@layer elements{::placeholder{opacity:var(--o-4)}input,button,textarea,select{font:inherit;color:var(--text-color)}button{color:var(--text-color)}fieldset{border:var(--fieldset-border-width) solid var(--fieldset-border-color);border-radius:var(--fieldset-border-radius);padding:var(--fieldset-padding);ul:has([type=checkbox],[type=radio]){padding-inline-start:0}>[aria-hidden]{margin-bottom:var(--sm3);font-size:var(--text-lg);grid-column:1 / -1}}:is(input,select,textarea):user-invalid{border-color:var(--input-border-color-invalid)}input{&:where(:not([type=checkbox],[type=radio])){height:var(--input-height)}&:where(:not([type=color],[type=file],[type=reset],[type=submit])){padding:var(--input-padding)}&:where(:not([type=color])){border-radius:var(--input-border-radius)}&:where(:not([type=file])){border:var(--input-border-width) solid var(--input-border-color)}&[type=file]{width:100%;accent-color:var(--text-color)}&[type=number]{padding-inline-end:var(--xs1)}}label{display:block;&:has(+:is(input,select,textarea)){margin-bottom:var(--label-spacing)}}legend{position:absolute;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);width:1px;height:1px;white-space:nowrap}meter{width:100%;background:var(--meter-track-color);border-radius:var(--meter-border-radius);height:var(--meter-height);&::-webkit-meter-bar{background:var(--meter-track-color)}&::-webkit-meter-bar,&::-webkit-meter-optimum-value,&::-webkit-meter-suboptimum-value,&::-webkit-meter-even-less-good-value{height:var(--meter-height);border:none;border-radius:var(--meter-border-radius)}&::-webkit-meter-even-less-good-value{background:var(--meter-low-color)}&::-webkit-meter-suboptimum-value{background:var(--meter-medium-color)}&::-webkit-meter-optimum-value{background:var(--meter-high-color)}&:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:var(--meter-low-color)}&:-moz-meter-sub-optimum::-moz-meter-bar{background:var(--meter-medium-color)}&:-moz-meter-optimum::-moz-meter-bar{background:var(--meter-high-color)}}progress{appearance:none;width:100%;height:var(--progress-height);background:var(--progress-track-color);border-radius:var(--progress-border-radius);border:none;&::-moz-progress-bar{background:var(--progress-color);border-radius:var(--progress-border-radius)}&::-webkit-progress-bar{width:100%;background:var(--progress-track-color);border-radius:var(--progress-border-radius);height:var(--progress-height)}&::-webkit-progress-value{background:var(--progress-color);border-radius:var(--progress-border-radius)}}select{--split: calc(100% - var(--select-icon-size));display:flex;appearance:none;height:var(--input-height);padding:var(--xs1) calc(var(--input-padding) + var(--md1)) var(--xs1) var(--input-padding);border:var(--input-border-width) solid var(--input-border-color);border-radius:var(--input-border-radius);background:linear-gradient(to right,var(--body-background-color) 0 var(--split),var(--text-color) var(--split) 100%);mask-image:var(--select-icon),linear-gradient(to right,transparent calc(var(--split) - 1px),red 0),linear-gradient(red 0 0);mask-size:var(--select-icon-size),auto,auto;mask-position:calc(100% - var(--xs1)) center,0 0,0 0;mask-repeat:no-repeat;mask-clip:padding-box,padding-box,border-box;mask-origin:padding-box,padding-box,border-box;mask-composite:add,exclude;&:disabled{--disabled-color: light-dark( hsl(from var(--text-color) h s 70%), hsl(from var(--text-color) h s 40%) );cursor:not-allowed;color:var(--disabled-color);background:linear-gradient(to right,var(--body-background-color) 0 var(--split),var(--disabled-color) var(--split) 100%)}&[multiple]{height:auto;padding:var(--input-padding);background:var(--body-background-color);mask-image:none}}textarea{width:100%;padding:var(--input-padding);border-radius:var(--input-border-radius);border:var(--input-border-width) solid var(--input-border-color);resize:vertical;&:not([rows]){min-height:6em}}}@layer elements{dialog{min-width:var(--dialog-min-width);max-width:var(--dialog-max-width);padding:var(--dialog-padding);border:var(--dialog-border-width) solid var(--dialog-border-color);background-color:var(--dialog-background-color);border-radius:var(--dialog-border-radius);&::backdrop{background:var(--dialog-backdrop-color);opacity:var(--dialog-backdrop-opacity)}[aria-label="close pop-up"]{position:absolute;top:var(--xs3);right:var( --xs3 );background:transparent;border:none;outline:none;cursor:pointer}p:last-of-type{margin-bottom:0}}details{padding:var(--details-padding);border:var(--details-border-width) solid var(--details-border-color);background-color:var(--details-background-color);border-radius:var(--details-border-radius);cursor:pointer;summary{display:flex;justify-content:space-between;font-weight:var(--bold);&::-webkit-details-marker{display:none}&:after{content:"";width:var(--details-icon-size);height:var(--details-icon-size);background-color:currentColor;mask-image:var(--details-icon);mask-size:contain;mask-repeat:no-repeat;transition:transform var(--transition)}}&[open]>summary{margin-bottom:var(--details-spacing);&:after{transform:rotate(180deg)}}p:last-of-type{margin-bottom:0}}}@layer global{:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.a11y-skipLink{position:fixed;z-index:var(--z-top);inset-block-start:-100vb;inset-inline-start:0;padding:.75em 1.25em;background-color:var(--body-background-color);color:var(--text-color)}.a11y-skipLink:focus{inset-block-start:0}.a11y-srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}}@layer global{@keyframes fadeFromOpaque{0%{opacity:1}}@keyframes fadeToOpaque{to{opacity:1}}@keyframes fadeFromTransparent{0%{opacity:0}}@keyframes fadeToTransparent{to{opacity:0}}}@layer global{.grid{display:grid;--grid-tc: repeat(4, 1fr);--grid-cs: 1;--grid-ce: -1;grid-template-columns:var(--grid-tc);grid-column-gap:var(--grid-column-gap);grid-row-gap:var(--grid-row-gap)}.grid-flush{grid-column-gap:0;grid-row-gap:0}.grid>.grid_item{display:block;appearance:none;-webkit-appearance:none}.grid[col="1"]{--grid-tc: repeat(1, 1fr) }.grid[col="2"]{--grid-tc: repeat(2, 1fr) }.grid[col="3"]{--grid-tc: repeat(3, 1fr) }.grid[col="4"]{--grid-tc: repeat(4, 1fr) }.grid[col="5"]{--grid-tc: repeat(5, 1fr) }.grid[col="6"]{--grid-tc: repeat(6, 1fr) }.grid[col="7"]{--grid-tc: repeat(7, 1fr) }.grid[col="8"]{--grid-tc: repeat(8, 1fr) }.grid[col="9"]{--grid-tc: repeat(9, 1fr) }.grid[col="10"]{--grid-tc: repeat(10, 1fr) }.grid[col="11"]{--grid-tc: repeat(11, 1fr) }.grid[col="12"]{--grid-tc: repeat(12, 1fr) }.grid[col="13"]{--grid-tc: repeat(13, 1fr) }.grid[col="14"]{--grid-tc: repeat(14, 1fr) }.grid[col="15"]{--grid-tc: repeat(15, 1fr) }.grid[col="16"]{--grid-tc: repeat(16, 1fr) }.grid[col="17"]{--grid-tc: repeat(17, 1fr) }.grid[col="18"]{--grid-tc: repeat(18, 1fr) }.grid[col="19"]{--grid-tc: repeat(19, 1fr) }.grid[col="20"]{--grid-tc: repeat(20, 1fr) }.grid[col="21"]{--grid-tc: repeat(21, 1fr) }.grid[col="22"]{--grid-tc: repeat(22, 1fr) }.grid[col="23"]{--grid-tc: repeat(23, 1fr) }.grid[col="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span^="1"]{--grid-cs: 1 }.grid>.grid_item[span^="2"]{--grid-cs: 2 }.grid>.grid_item[span^="3"]{--grid-cs: 3 }.grid>.grid_item[span^="4"]{--grid-cs: 4 }.grid>.grid_item[span^="5"]{--grid-cs: 5 }.grid>.grid_item[span^="6"]{--grid-cs: 6 }.grid>.grid_item[span^="7"]{--grid-cs: 7 }.grid>.grid_item[span^="8"]{--grid-cs: 8 }.grid>.grid_item[span^="9"]{--grid-cs: 9 }.grid>.grid_item[span^="10"]{--grid-cs: 10 }.grid>.grid_item[span^="11"]{--grid-cs: 11 }.grid>.grid_item[span^="12"]{--grid-cs: 12 }.grid>.grid_item[span^="13"]{--grid-cs: 13 }.grid>.grid_item[span^="14"]{--grid-cs: 14 }.grid>.grid_item[span^="15"]{--grid-cs: 15 }.grid>.grid_item[span^="16"]{--grid-cs: 16 }.grid>.grid_item[span^="17"]{--grid-cs: 17 }.grid>.grid_item[span^="18"]{--grid-cs: 18 }.grid>.grid_item[span^="19"]{--grid-cs: 19 }.grid>.grid_item[span^="20"]{--grid-cs: 20 }.grid>.grid_item[span^="21"]{--grid-cs: 21 }.grid>.grid_item[span^="22"]{--grid-cs: 22 }.grid>.grid_item[span^="23"]{--grid-cs: 23 }.grid>.grid_item[span^="24"]{--grid-cs: 24 }.grid>.grid_item[span$="+1"],.grid>.grid_item[span="1"]{--grid-ce: 1 }.grid>.grid_item[span$="+2"],.grid>.grid_item[span$="-1"],.grid>.grid_item[span="2"]{--grid-ce: 2 }.grid>.grid_item[span$="+3"],.grid>.grid_item[span$="-2"],.grid>.grid_item[span="3"]{--grid-ce: 3 }.grid>.grid_item[span$="+4"],.grid>.grid_item[span$="-3"],.grid>.grid_item[span="4"]{--grid-ce: 4 }.grid>.grid_item[span$="+5"],.grid>.grid_item[span$="-4"],.grid>.grid_item[span="5"]{--grid-ce: 5 }.grid>.grid_item[span$="+6"],.grid>.grid_item[span$="-5"],.grid>.grid_item[span="6"]{--grid-ce: 6 }.grid>.grid_item[span$="+7"],.grid>.grid_item[span$="-6"],.grid>.grid_item[span="7"]{--grid-ce: 7 }.grid>.grid_item[span$="+8"],.grid>.grid_item[span$="-7"],.grid>.grid_item[span="8"]{--grid-ce: 8 }.grid>.grid_item[span$="+9"],.grid>.grid_item[span$="-8"],.grid>.grid_item[span="9"]{--grid-ce: 9 }.grid>.grid_item[span$="+10"],.grid>.grid_item[span$="-9"],.grid>.grid_item[span="10"]{--grid-ce: 10 }.grid>.grid_item[span$="+11"],.grid>.grid_item[span$="-10"],.grid>.grid_item[span="11"]{--grid-ce: 11 }.grid>.grid_item[span$="+12"],.grid>.grid_item[span$="-11"],.grid>.grid_item[span="12"]{--grid-ce: 12 }.grid>.grid_item[span$="+13"],.grid>.grid_item[span$="-12"],.grid>.grid_item[span="13"]{--grid-ce: 13 }.grid>.grid_item[span$="+14"],.grid>.grid_item[span$="-13"],.grid>.grid_item[span="14"]{--grid-ce: 14 }.grid>.grid_item[span$="+15"],.grid>.grid_item[span$="-14"],.grid>.grid_item[span="15"]{--grid-ce: 15 }.grid>.grid_item[span$="+16"],.grid>.grid_item[span$="-15"],.grid>.grid_item[span="16"]{--grid-ce: 16 }.grid>.grid_item[span$="+17"],.grid>.grid_item[span$="-16"],.grid>.grid_item[span="17"]{--grid-ce: 17 }.grid>.grid_item[span$="+18"],.grid>.grid_item[span$="-17"],.grid>.grid_item[span="18"]{--grid-ce: 18 }.grid>.grid_item[span$="+19"],.grid>.grid_item[span$="-18"],.grid>.grid_item[span="19"]{--grid-ce: 19 }.grid>.grid_item[span$="+20"],.grid>.grid_item[span$="-19"],.grid>.grid_item[span="20"]{--grid-ce: 20 }.grid>.grid_item[span$="+21"],.grid>.grid_item[span$="-20"],.grid>.grid_item[span="21"]{--grid-ce: 21 }.grid>.grid_item[span$="+22"],.grid>.grid_item[span$="-21"],.grid>.grid_item[span="22"]{--grid-ce: 22 }.grid>.grid_item[span$="+23"],.grid>.grid_item[span$="-22"],.grid>.grid_item[span="23"]{--grid-ce: 23 }.grid>.grid_item[span$="+24"],.grid>.grid_item[span$="-23"],.grid>.grid_item[span="24"]{--grid-ce: 24 }.grid>.grid_item[span$="-24"]{--grid-ce: 25 }.grid>.grid_item[span]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span*="+"],.grid>.grid_item[span*="-"],.grid>.grid_item[span*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span*="-"],.grid>.grid_item[span*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span=row]{grid-column:1 / -1}@media only screen and (width>=768px){.grid[col-md="1"]{--grid-tc: repeat(1, 1fr) }.grid[col-md="2"]{--grid-tc: repeat(2, 1fr) }.grid[col-md="3"]{--grid-tc: repeat(3, 1fr) }.grid[col-md="4"]{--grid-tc: repeat(4, 1fr) }.grid[col-md="5"]{--grid-tc: repeat(5, 1fr) }.grid[col-md="6"]{--grid-tc: repeat(6, 1fr) }.grid[col-md="7"]{--grid-tc: repeat(7, 1fr) }.grid[col-md="8"]{--grid-tc: repeat(8, 1fr) }.grid[col-md="9"]{--grid-tc: repeat(9, 1fr) }.grid[col-md="10"]{--grid-tc: repeat(10, 1fr) }.grid[col-md="11"]{--grid-tc: repeat(11, 1fr) }.grid[col-md="12"]{--grid-tc: repeat(12, 1fr) }.grid[col-md="13"]{--grid-tc: repeat(13, 1fr) }.grid[col-md="14"]{--grid-tc: repeat(14, 1fr) }.grid[col-md="15"]{--grid-tc: repeat(15, 1fr) }.grid[col-md="16"]{--grid-tc: repeat(16, 1fr) }.grid[col-md="17"]{--grid-tc: repeat(17, 1fr) }.grid[col-md="18"]{--grid-tc: repeat(18, 1fr) }.grid[col-md="19"]{--grid-tc: repeat(19, 1fr) }.grid[col-md="20"]{--grid-tc: repeat(20, 1fr) }.grid[col-md="21"]{--grid-tc: repeat(21, 1fr) }.grid[col-md="22"]{--grid-tc: repeat(22, 1fr) }.grid[col-md="23"]{--grid-tc: repeat(23, 1fr) }.grid[col-md="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span-md^="1"]{--grid-cs: 1 }.grid>.grid_item[span-md^="2"]{--grid-cs: 2 }.grid>.grid_item[span-md^="3"]{--grid-cs: 3 }.grid>.grid_item[span-md^="4"]{--grid-cs: 4 }.grid>.grid_item[span-md^="5"]{--grid-cs: 5 }.grid>.grid_item[span-md^="6"]{--grid-cs: 6 }.grid>.grid_item[span-md^="7"]{--grid-cs: 7 }.grid>.grid_item[span-md^="8"]{--grid-cs: 8 }.grid>.grid_item[span-md^="9"]{--grid-cs: 9 }.grid>.grid_item[span-md^="10"]{--grid-cs: 10 }.grid>.grid_item[span-md^="11"]{--grid-cs: 11 }.grid>.grid_item[span-md^="12"]{--grid-cs: 12 }.grid>.grid_item[span-md^="13"]{--grid-cs: 13 }.grid>.grid_item[span-md^="14"]{--grid-cs: 14 }.grid>.grid_item[span-md^="15"]{--grid-cs: 15 }.grid>.grid_item[span-md^="16"]{--grid-cs: 16 }.grid>.grid_item[span-md^="17"]{--grid-cs: 17 }.grid>.grid_item[span-md^="18"]{--grid-cs: 18 }.grid>.grid_item[span-md^="19"]{--grid-cs: 19 }.grid>.grid_item[span-md^="20"]{--grid-cs: 20 }.grid>.grid_item[span-md^="21"]{--grid-cs: 21 }.grid>.grid_item[span-md^="22"]{--grid-cs: 22 }.grid>.grid_item[span-md^="23"]{--grid-cs: 23 }.grid>.grid_item[span-md^="24"]{--grid-cs: 24 }.grid>.grid_item[span-md$="+1"],.grid>.grid_item[span-md="1"]{--grid-ce: 1 }.grid>.grid_item[span-md$="+2"],.grid>.grid_item[span-md$="-1"],.grid>.grid_item[span-md="2"]{--grid-ce: 2 }.grid>.grid_item[span-md$="+3"],.grid>.grid_item[span-md$="-2"],.grid>.grid_item[span-md="3"]{--grid-ce: 3 }.grid>.grid_item[span-md$="+4"],.grid>.grid_item[span-md$="-3"],.grid>.grid_item[span-md="4"]{--grid-ce: 4 }.grid>.grid_item[span-md$="+5"],.grid>.grid_item[span-md$="-4"],.grid>.grid_item[span-md="5"]{--grid-ce: 5 }.grid>.grid_item[span-md$="+6"],.grid>.grid_item[span-md$="-5"],.grid>.grid_item[span-md="6"]{--grid-ce: 6 }.grid>.grid_item[span-md$="+7"],.grid>.grid_item[span-md$="-6"],.grid>.grid_item[span-md="7"]{--grid-ce: 7 }.grid>.grid_item[span-md$="+8"],.grid>.grid_item[span-md$="-7"],.grid>.grid_item[span-md="8"]{--grid-ce: 8 }.grid>.grid_item[span-md$="+9"],.grid>.grid_item[span-md$="-8"],.grid>.grid_item[span-md="9"]{--grid-ce: 9 }.grid>.grid_item[span-md$="+10"],.grid>.grid_item[span-md$="-9"],.grid>.grid_item[span-md="10"]{--grid-ce: 10 }.grid>.grid_item[span-md$="+11"],.grid>.grid_item[span-md$="-10"],.grid>.grid_item[span-md="11"]{--grid-ce: 11 }.grid>.grid_item[span-md$="+12"],.grid>.grid_item[span-md$="-11"],.grid>.grid_item[span-md="12"]{--grid-ce: 12 }.grid>.grid_item[span-md$="+13"],.grid>.grid_item[span-md$="-12"],.grid>.grid_item[span-md="13"]{--grid-ce: 13 }.grid>.grid_item[span-md$="+14"],.grid>.grid_item[span-md$="-13"],.grid>.grid_item[span-md="14"]{--grid-ce: 14 }.grid>.grid_item[span-md$="+15"],.grid>.grid_item[span-md$="-14"],.grid>.grid_item[span-md="15"]{--grid-ce: 15 }.grid>.grid_item[span-md$="+16"],.grid>.grid_item[span-md$="-15"],.grid>.grid_item[span-md="16"]{--grid-ce: 16 }.grid>.grid_item[span-md$="+17"],.grid>.grid_item[span-md$="-16"],.grid>.grid_item[span-md="17"]{--grid-ce: 17 }.grid>.grid_item[span-md$="+18"],.grid>.grid_item[span-md$="-17"],.grid>.grid_item[span-md="18"]{--grid-ce: 18 }.grid>.grid_item[span-md$="+19"],.grid>.grid_item[span-md$="-18"],.grid>.grid_item[span-md="19"]{--grid-ce: 19 }.grid>.grid_item[span-md$="+20"],.grid>.grid_item[span-md$="-19"],.grid>.grid_item[span-md="20"]{--grid-ce: 20 }.grid>.grid_item[span-md$="+21"],.grid>.grid_item[span-md$="-20"],.grid>.grid_item[span-md="21"]{--grid-ce: 21 }.grid>.grid_item[span-md$="+22"],.grid>.grid_item[span-md$="-21"],.grid>.grid_item[span-md="22"]{--grid-ce: 22 }.grid>.grid_item[span-md$="+23"],.grid>.grid_item[span-md$="-22"],.grid>.grid_item[span-md="23"]{--grid-ce: 23 }.grid>.grid_item[span-md$="+24"],.grid>.grid_item[span-md$="-23"],.grid>.grid_item[span-md="24"]{--grid-ce: 24 }.grid>.grid_item[span-md$="-24"]{--grid-ce: 25 }.grid>.grid_item[span-md]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span-md*="+"],.grid>.grid_item[span-md*="-"],.grid>.grid_item[span-md*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span-md*="-"],.grid>.grid_item[span-md*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span-md=row]{grid-column:1 / -1}}@media only screen and (width>=1024px){.grid[col-lg="1"]{--grid-tc: repeat(1, 1fr) }.grid[col-lg="2"]{--grid-tc: repeat(2, 1fr) }.grid[col-lg="3"]{--grid-tc: repeat(3, 1fr) }.grid[col-lg="4"]{--grid-tc: repeat(4, 1fr) }.grid[col-lg="5"]{--grid-tc: repeat(5, 1fr) }.grid[col-lg="6"]{--grid-tc: repeat(6, 1fr) }.grid[col-lg="7"]{--grid-tc: repeat(7, 1fr) }.grid[col-lg="8"]{--grid-tc: repeat(8, 1fr) }.grid[col-lg="9"]{--grid-tc: repeat(9, 1fr) }.grid[col-lg="10"]{--grid-tc: repeat(10, 1fr) }.grid[col-lg="11"]{--grid-tc: repeat(11, 1fr) }.grid[col-lg="12"]{--grid-tc: repeat(12, 1fr) }.grid[col-lg="13"]{--grid-tc: repeat(13, 1fr) }.grid[col-lg="14"]{--grid-tc: repeat(14, 1fr) }.grid[col-lg="15"]{--grid-tc: repeat(15, 1fr) }.grid[col-lg="16"]{--grid-tc: repeat(16, 1fr) }.grid[col-lg="17"]{--grid-tc: repeat(17, 1fr) }.grid[col-lg="18"]{--grid-tc: repeat(18, 1fr) }.grid[col-lg="19"]{--grid-tc: repeat(19, 1fr) }.grid[col-lg="20"]{--grid-tc: repeat(20, 1fr) }.grid[col-lg="21"]{--grid-tc: repeat(21, 1fr) }.grid[col-lg="22"]{--grid-tc: repeat(22, 1fr) }.grid[col-lg="23"]{--grid-tc: repeat(23, 1fr) }.grid[col-lg="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span-lg^="1"]{--grid-cs: 1 }.grid>.grid_item[span-lg^="2"]{--grid-cs: 2 }.grid>.grid_item[span-lg^="3"]{--grid-cs: 3 }.grid>.grid_item[span-lg^="4"]{--grid-cs: 4 }.grid>.grid_item[span-lg^="5"]{--grid-cs: 5 }.grid>.grid_item[span-lg^="6"]{--grid-cs: 6 }.grid>.grid_item[span-lg^="7"]{--grid-cs: 7 }.grid>.grid_item[span-lg^="8"]{--grid-cs: 8 }.grid>.grid_item[span-lg^="9"]{--grid-cs: 9 }.grid>.grid_item[span-lg^="10"]{--grid-cs: 10 }.grid>.grid_item[span-lg^="11"]{--grid-cs: 11 }.grid>.grid_item[span-lg^="12"]{--grid-cs: 12 }.grid>.grid_item[span-lg^="13"]{--grid-cs: 13 }.grid>.grid_item[span-lg^="14"]{--grid-cs: 14 }.grid>.grid_item[span-lg^="15"]{--grid-cs: 15 }.grid>.grid_item[span-lg^="16"]{--grid-cs: 16 }.grid>.grid_item[span-lg^="17"]{--grid-cs: 17 }.grid>.grid_item[span-lg^="18"]{--grid-cs: 18 }.grid>.grid_item[span-lg^="19"]{--grid-cs: 19 }.grid>.grid_item[span-lg^="20"]{--grid-cs: 20 }.grid>.grid_item[span-lg^="21"]{--grid-cs: 21 }.grid>.grid_item[span-lg^="22"]{--grid-cs: 22 }.grid>.grid_item[span-lg^="23"]{--grid-cs: 23 }.grid>.grid_item[span-lg^="24"]{--grid-cs: 24 }.grid>.grid_item[span-lg$="+1"],.grid>.grid_item[span-lg="1"]{--grid-ce: 1 }.grid>.grid_item[span-lg$="+2"],.grid>.grid_item[span-lg$="-1"],.grid>.grid_item[span-lg="2"]{--grid-ce: 2 }.grid>.grid_item[span-lg$="+3"],.grid>.grid_item[span-lg$="-2"],.grid>.grid_item[span-lg="3"]{--grid-ce: 3 }.grid>.grid_item[span-lg$="+4"],.grid>.grid_item[span-lg$="-3"],.grid>.grid_item[span-lg="4"]{--grid-ce: 4 }.grid>.grid_item[span-lg$="+5"],.grid>.grid_item[span-lg$="-4"],.grid>.grid_item[span-lg="5"]{--grid-ce: 5 }.grid>.grid_item[span-lg$="+6"],.grid>.grid_item[span-lg$="-5"],.grid>.grid_item[span-lg="6"]{--grid-ce: 6 }.grid>.grid_item[span-lg$="+7"],.grid>.grid_item[span-lg$="-6"],.grid>.grid_item[span-lg="7"]{--grid-ce: 7 }.grid>.grid_item[span-lg$="+8"],.grid>.grid_item[span-lg$="-7"],.grid>.grid_item[span-lg="8"]{--grid-ce: 8 }.grid>.grid_item[span-lg$="+9"],.grid>.grid_item[span-lg$="-8"],.grid>.grid_item[span-lg="9"]{--grid-ce: 9 }.grid>.grid_item[span-lg$="+10"],.grid>.grid_item[span-lg$="-9"],.grid>.grid_item[span-lg="10"]{--grid-ce: 10 }.grid>.grid_item[span-lg$="+11"],.grid>.grid_item[span-lg$="-10"],.grid>.grid_item[span-lg="11"]{--grid-ce: 11 }.grid>.grid_item[span-lg$="+12"],.grid>.grid_item[span-lg$="-11"],.grid>.grid_item[span-lg="12"]{--grid-ce: 12 }.grid>.grid_item[span-lg$="+13"],.grid>.grid_item[span-lg$="-12"],.grid>.grid_item[span-lg="13"]{--grid-ce: 13 }.grid>.grid_item[span-lg$="+14"],.grid>.grid_item[span-lg$="-13"],.grid>.grid_item[span-lg="14"]{--grid-ce: 14 }.grid>.grid_item[span-lg$="+15"],.grid>.grid_item[span-lg$="-14"],.grid>.grid_item[span-lg="15"]{--grid-ce: 15 }.grid>.grid_item[span-lg$="+16"],.grid>.grid_item[span-lg$="-15"],.grid>.grid_item[span-lg="16"]{--grid-ce: 16 }.grid>.grid_item[span-lg$="+17"],.grid>.grid_item[span-lg$="-16"],.grid>.grid_item[span-lg="17"]{--grid-ce: 17 }.grid>.grid_item[span-lg$="+18"],.grid>.grid_item[span-lg$="-17"],.grid>.grid_item[span-lg="18"]{--grid-ce: 18 }.grid>.grid_item[span-lg$="+19"],.grid>.grid_item[span-lg$="-18"],.grid>.grid_item[span-lg="19"]{--grid-ce: 19 }.grid>.grid_item[span-lg$="+20"],.grid>.grid_item[span-lg$="-19"],.grid>.grid_item[span-lg="20"]{--grid-ce: 20 }.grid>.grid_item[span-lg$="+21"],.grid>.grid_item[span-lg$="-20"],.grid>.grid_item[span-lg="21"]{--grid-ce: 21 }.grid>.grid_item[span-lg$="+22"],.grid>.grid_item[span-lg$="-21"],.grid>.grid_item[span-lg="22"]{--grid-ce: 22 }.grid>.grid_item[span-lg$="+23"],.grid>.grid_item[span-lg$="-22"],.grid>.grid_item[span-lg="23"]{--grid-ce: 23 }.grid>.grid_item[span-lg$="+24"],.grid>.grid_item[span-lg$="-23"],.grid>.grid_item[span-lg="24"]{--grid-ce: 24 }.grid>.grid_item[span-lg$="-24"]{--grid-ce: 25 }.grid>.grid_item[span-lg]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span-lg*="+"],.grid>.grid_item[span-lg*="-"],.grid>.grid_item[span-lg*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span-lg*="-"],.grid>.grid_item[span-lg*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span-lg=row]{grid-column:1 / -1}}@media only screen and (width>=1440px){.grid[col-xl="1"]{--grid-tc: repeat(1, 1fr) }.grid[col-xl="2"]{--grid-tc: repeat(2, 1fr) }.grid[col-xl="3"]{--grid-tc: repeat(3, 1fr) }.grid[col-xl="4"]{--grid-tc: repeat(4, 1fr) }.grid[col-xl="5"]{--grid-tc: repeat(5, 1fr) }.grid[col-xl="6"]{--grid-tc: repeat(6, 1fr) }.grid[col-xl="7"]{--grid-tc: repeat(7, 1fr) }.grid[col-xl="8"]{--grid-tc: repeat(8, 1fr) }.grid[col-xl="9"]{--grid-tc: repeat(9, 1fr) }.grid[col-xl="10"]{--grid-tc: repeat(10, 1fr) }.grid[col-xl="11"]{--grid-tc: repeat(11, 1fr) }.grid[col-xl="12"]{--grid-tc: repeat(12, 1fr) }.grid[col-xl="13"]{--grid-tc: repeat(13, 1fr) }.grid[col-xl="14"]{--grid-tc: repeat(14, 1fr) }.grid[col-xl="15"]{--grid-tc: repeat(15, 1fr) }.grid[col-xl="16"]{--grid-tc: repeat(16, 1fr) }.grid[col-xl="17"]{--grid-tc: repeat(17, 1fr) }.grid[col-xl="18"]{--grid-tc: repeat(18, 1fr) }.grid[col-xl="19"]{--grid-tc: repeat(19, 1fr) }.grid[col-xl="20"]{--grid-tc: repeat(20, 1fr) }.grid[col-xl="21"]{--grid-tc: repeat(21, 1fr) }.grid[col-xl="22"]{--grid-tc: repeat(22, 1fr) }.grid[col-xl="23"]{--grid-tc: repeat(23, 1fr) }.grid[col-xl="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span-xl^="1"]{--grid-cs: 1 }.grid>.grid_item[span-xl^="2"]{--grid-cs: 2 }.grid>.grid_item[span-xl^="3"]{--grid-cs: 3 }.grid>.grid_item[span-xl^="4"]{--grid-cs: 4 }.grid>.grid_item[span-xl^="5"]{--grid-cs: 5 }.grid>.grid_item[span-xl^="6"]{--grid-cs: 6 }.grid>.grid_item[span-xl^="7"]{--grid-cs: 7 }.grid>.grid_item[span-xl^="8"]{--grid-cs: 8 }.grid>.grid_item[span-xl^="9"]{--grid-cs: 9 }.grid>.grid_item[span-xl^="10"]{--grid-cs: 10 }.grid>.grid_item[span-xl^="11"]{--grid-cs: 11 }.grid>.grid_item[span-xl^="12"]{--grid-cs: 12 }.grid>.grid_item[span-xl^="13"]{--grid-cs: 13 }.grid>.grid_item[span-xl^="14"]{--grid-cs: 14 }.grid>.grid_item[span-xl^="15"]{--grid-cs: 15 }.grid>.grid_item[span-xl^="16"]{--grid-cs: 16 }.grid>.grid_item[span-xl^="17"]{--grid-cs: 17 }.grid>.grid_item[span-xl^="18"]{--grid-cs: 18 }.grid>.grid_item[span-xl^="19"]{--grid-cs: 19 }.grid>.grid_item[span-xl^="20"]{--grid-cs: 20 }.grid>.grid_item[span-xl^="21"]{--grid-cs: 21 }.grid>.grid_item[span-xl^="22"]{--grid-cs: 22 }.grid>.grid_item[span-xl^="23"]{--grid-cs: 23 }.grid>.grid_item[span-xl^="24"]{--grid-cs: 24 }.grid>.grid_item[span-xl$="+1"],.grid>.grid_item[span-xl="1"]{--grid-ce: 1 }.grid>.grid_item[span-xl$="+2"],.grid>.grid_item[span-xl$="-1"],.grid>.grid_item[span-xl="2"]{--grid-ce: 2 }.grid>.grid_item[span-xl$="+3"],.grid>.grid_item[span-xl$="-2"],.grid>.grid_item[span-xl="3"]{--grid-ce: 3 }.grid>.grid_item[span-xl$="+4"],.grid>.grid_item[span-xl$="-3"],.grid>.grid_item[span-xl="4"]{--grid-ce: 4 }.grid>.grid_item[span-xl$="+5"],.grid>.grid_item[span-xl$="-4"],.grid>.grid_item[span-xl="5"]{--grid-ce: 5 }.grid>.grid_item[span-xl$="+6"],.grid>.grid_item[span-xl$="-5"],.grid>.grid_item[span-xl="6"]{--grid-ce: 6 }.grid>.grid_item[span-xl$="+7"],.grid>.grid_item[span-xl$="-6"],.grid>.grid_item[span-xl="7"]{--grid-ce: 7 }.grid>.grid_item[span-xl$="+8"],.grid>.grid_item[span-xl$="-7"],.grid>.grid_item[span-xl="8"]{--grid-ce: 8 }.grid>.grid_item[span-xl$="+9"],.grid>.grid_item[span-xl$="-8"],.grid>.grid_item[span-xl="9"]{--grid-ce: 9 }.grid>.grid_item[span-xl$="+10"],.grid>.grid_item[span-xl$="-9"],.grid>.grid_item[span-xl="10"]{--grid-ce: 10 }.grid>.grid_item[span-xl$="+11"],.grid>.grid_item[span-xl$="-10"],.grid>.grid_item[span-xl="11"]{--grid-ce: 11 }.grid>.grid_item[span-xl$="+12"],.grid>.grid_item[span-xl$="-11"],.grid>.grid_item[span-xl="12"]{--grid-ce: 12 }.grid>.grid_item[span-xl$="+13"],.grid>.grid_item[span-xl$="-12"],.grid>.grid_item[span-xl="13"]{--grid-ce: 13 }.grid>.grid_item[span-xl$="+14"],.grid>.grid_item[span-xl$="-13"],.grid>.grid_item[span-xl="14"]{--grid-ce: 14 }.grid>.grid_item[span-xl$="+15"],.grid>.grid_item[span-xl$="-14"],.grid>.grid_item[span-xl="15"]{--grid-ce: 15 }.grid>.grid_item[span-xl$="+16"],.grid>.grid_item[span-xl$="-15"],.grid>.grid_item[span-xl="16"]{--grid-ce: 16 }.grid>.grid_item[span-xl$="+17"],.grid>.grid_item[span-xl$="-16"],.grid>.grid_item[span-xl="17"]{--grid-ce: 17 }.grid>.grid_item[span-xl$="+18"],.grid>.grid_item[span-xl$="-17"],.grid>.grid_item[span-xl="18"]{--grid-ce: 18 }.grid>.grid_item[span-xl$="+19"],.grid>.grid_item[span-xl$="-18"],.grid>.grid_item[span-xl="19"]{--grid-ce: 19 }.grid>.grid_item[span-xl$="+20"],.grid>.grid_item[span-xl$="-19"],.grid>.grid_item[span-xl="20"]{--grid-ce: 20 }.grid>.grid_item[span-xl$="+21"],.grid>.grid_item[span-xl$="-20"],.grid>.grid_item[span-xl="21"]{--grid-ce: 21 }.grid>.grid_item[span-xl$="+22"],.grid>.grid_item[span-xl$="-21"],.grid>.grid_item[span-xl="22"]{--grid-ce: 22 }.grid>.grid_item[span-xl$="+23"],.grid>.grid_item[span-xl$="-22"],.grid>.grid_item[span-xl="23"]{--grid-ce: 23 }.grid>.grid_item[span-xl$="+24"],.grid>.grid_item[span-xl$="-23"],.grid>.grid_item[span-xl="24"]{--grid-ce: 24 }.grid>.grid_item[span-xl$="-24"]{--grid-ce: 25 }.grid>.grid_item[span-xl]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span-xl*="+"],.grid>.grid_item[span-xl*="-"],.grid>.grid_item[span-xl*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span-xl*="-"],.grid>.grid_item[span-xl*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span-xl=row]{grid-column:1 / -1}}}@layer global{.layout{display:flex;flex-direction:column;width:100vw;min-height:100vh;.layout_content{flex:1}}.layout_content_main{container:main / inline-size}.layout-centered{.layout_content{display:grid;gap:var(--sm3);grid-template-columns:1fr minmax(0,var(--layout-content-width)) 1fr;margin-top:var(--lg1);margin-bottom:var(--sm1);@media(width>=768px){margin-top:var(--xl3);margin-bottom:var(--md3);gap:var(--md3)}}.layout_content_main{grid-column:2}}.layout-sidebar{.layout_content{@media(width>=768px){display:grid;grid-template-columns:var(--layout-aside-width) minmax(0,1fr)}}.layout_content_main{padding:var(--sm2);@media(width>=768px){grid-row:1;grid-column:2;padding:var(--lg1) var(--md2)}}.layout_content_aside{@media(width>=768px){grid-row:1;grid-column:1;padding:var(--lg1) var(--md3)}}}.layout-sidebar-end{.layout_content{@media(width>=768px){grid-template-columns:minmax(0,1fr) var(--layout-aside-width)}}.layout_content_main{@media(width>=768px){grid-column:1}}.layout_content_aside{@media(width>=768px){grid-column:2}}}.layout-docs{.layout_content{@media(width>=768px){display:grid;grid-template-columns:var(--layout-aside-width) minmax(0,1fr)}@media(width>=1024px){grid-template-columns:var(--layout-aside-width) minmax(0,var(--layout-content-width)) var(--layout-toc-width)}}.layout_content_main{padding:var(--sm2);@media(width>=768px){grid-row:1;grid-column:2;padding:var(--lg1) var(--md2)}}.layout_content_aside{display:none;@media(width>=768px){display:block;grid-row:1;grid-column:1;padding:var(--lg1) var(--md3)}}.layout_content_aside-toc{@media(width>=768px){display:none}@media(width>=1024px){display:block;grid-row:1;grid-column:3;padding:var(--lg1) var(--md3)}}}.layout-split{.layout_content{display:grid;@media(width>=768px){grid-template-columns:1fr 1fr}}}.layout-cover{min-height:100dvh;.layout_content{display:grid;place-items:center}}}@layer global{@scope(.prose)to (.not-prose){:is(p,ul,ol,blockquote,table):has(+:is(h1,h2,h3,h4)){margin-bottom:calc(var(--prose-spacing) * 2)}p,ul,ol,dl{margin-bottom:var(--prose-spacing);p,ul,ol,dl{margin-bottom:0}}ul,ol{ul,ol{margin-inline-start:0;padding-inline-start:var(--sm2)}li{margin-bottom:.5em;&::marker{color:light-dark(var(--base-300),var(--base-600))}}}ul{margin-inline-start:var(--sm2);list-style-type:"\2192 "}ol{margin-inline-start:var(--md2);list-style-type:decimal-leading-zero;li::marker{font-size:var(--text-sm)}}table{margin-top:var(--md1);margin-bottom:var(--md1)}}}@layer global{.wrap{display:grid;grid-template-columns:1fr var(--wrap-width) 1fr;>*,>astro-island>*,>astro-slot>*,>astro-static-slot>*{grid-column:2;padding-inline:var(--wrap-spacing);@media(width>=768px){padding-inline:var(--wrap-md-spacing)}@media(width>=1024px){padding-inline:var(--wrap-lg-spacing)}}}.wrap-sm{--wrap-width: var(--wrap-width-sm)}.wrap-md{--wrap-width: var(--wrap-width-md)}.wrap-lg{--wrap-width: var(--wrap-width-lg)}.wrap_content-fullBleed{grid-column:1 / -1;width:100%;object-fit:cover}}@layer helpers{.c-base-0{color:var(--base-0)!important}.bdc-base-0{border-color:var(--base-0)!important}.bgc-base-0{background-color:var(--base-0)!important}.c-base-50{color:var(--base-50)!important}.bdc-base-50{border-color:var(--base-50)!important}.bgc-base-50{background-color:var(--base-50)!important}.c-base-100{color:var(--base-100)!important}.bdc-base-100{border-color:var(--base-100)!important}.bgc-base-100{background-color:var(--base-100)!important}.c-base-200{color:var(--base-200)!important}.bdc-base-200{border-color:var(--base-200)!important}.bgc-base-200{background-color:var(--base-200)!important}.c-base-300{color:var(--base-300)!important}.bdc-base-300{border-color:var(--base-300)!important}.bgc-base-300{background-color:var(--base-300)!important}.c-base-400{color:var(--base-400)!important}.bdc-base-400{border-color:var(--base-400)!important}.bgc-base-400{background-color:var(--base-400)!important}.c-base-500{color:var(--base-500)!important}.bdc-base-500{border-color:var(--base-500)!important}.bgc-base-500{background-color:var(--base-500)!important}.c-base-600{color:var(--base-600)!important}.bdc-base-600{border-color:var(--base-600)!important}.bgc-base-600{background-color:var(--base-600)!important}.c-base-700{color:var(--base-700)!important}.bdc-base-700{border-color:var(--base-700)!important}.bgc-base-700{background-color:var(--base-700)!important}.c-base-800{color:var(--base-800)!important}.bdc-base-800{border-color:var(--base-800)!important}.bgc-base-800{background-color:var(--base-800)!important}.c-base-900{color:var(--base-900)!important}.bdc-base-900{border-color:var(--base-900)!important}.bgc-base-900{background-color:var(--base-900)!important}.c-base-950{color:var(--base-950)!important}.bdc-base-950{border-color:var(--base-950)!important}.bgc-base-950{background-color:var(--base-950)!important}.c-primary-50{color:var(--primary-50)!important}.bdc-primary-50{border-color:var(--primary-50)!important}.bgc-primary-50{background-color:var(--primary-50)!important}.c-primary-100{color:var(--primary-100)!important}.bdc-primary-100{border-color:var(--primary-100)!important}.bgc-primary-100{background-color:var(--primary-100)!important}.c-primary-200{color:var(--primary-200)!important}.bdc-primary-200{border-color:var(--primary-200)!important}.bgc-primary-200{background-color:var(--primary-200)!important}.c-primary-300{color:var(--primary-300)!important}.bdc-primary-300{border-color:var(--primary-300)!important}.bgc-primary-300{background-color:var(--primary-300)!important}.c-primary-400{color:var(--primary-400)!important}.bdc-primary-400{border-color:var(--primary-400)!important}.bgc-primary-400{background-color:var(--primary-400)!important}.c-primary-500{color:var(--primary-500)!important}.bdc-primary-500{border-color:var(--primary-500)!important}.bgc-primary-500{background-color:var(--primary-500)!important}.c-primary-600{color:var(--primary-600)!important}.bdc-primary-600{border-color:var(--primary-600)!important}.bgc-primary-600{background-color:var(--primary-600)!important}.c-primary-700{color:var(--primary-700)!important}.bdc-primary-700{border-color:var(--primary-700)!important}.bgc-primary-700{background-color:var(--primary-700)!important}.c-primary-800{color:var(--primary-800)!important}.bdc-primary-800{border-color:var(--primary-800)!important}.bgc-primary-800{background-color:var(--primary-800)!important}.c-primary-900{color:var(--primary-900)!important}.bdc-primary-900{border-color:var(--primary-900)!important}.bgc-primary-900{background-color:var(--primary-900)!important}.c-primary-950{color:var(--primary-950)!important}.bdc-primary-950{border-color:var(--primary-950)!important}.bgc-primary-950{background-color:var(--primary-950)!important}.c-yes-100{color:var(--yes-100)!important}.bdc-yes-100{border-color:var(--yes-100)!important}.bgc-yes-100{background-color:var(--yes-100)!important}.c-yes-200{color:var(--yes-200)!important}.bdc-yes-200{border-color:var(--yes-200)!important}.bgc-yes-200{background-color:var(--yes-200)!important}.c-yes-300{color:var(--yes-300)!important}.bdc-yes-300{border-color:var(--yes-300)!important}.bgc-yes-300{background-color:var(--yes-300)!important}.c-yes-400{color:var(--yes-400)!important}.bdc-yes-400{border-color:var(--yes-400)!important}.bgc-yes-400{background-color:var(--yes-400)!important}.c-yes-500{color:var(--yes-500)!important}.bdc-yes-500{border-color:var(--yes-500)!important}.bgc-yes-500{background-color:var(--yes-500)!important}.c-no-100{color:var(--no-100)!important}.bdc-no-100{border-color:var(--no-100)!important}.bgc-no-100{background-color:var(--no-100)!important}.c-no-200{color:var(--no-200)!important}.bdc-no-200{border-color:var(--no-200)!important}.bgc-no-200{background-color:var(--no-200)!important}.c-no-300{color:var(--no-300)!important}.bdc-no-300{border-color:var(--no-300)!important}.bgc-no-300{background-color:var(--no-300)!important}.c-no-400{color:var(--no-400)!important}.bdc-no-400{border-color:var(--no-400)!important}.bgc-no-400{background-color:var(--no-400)!important}.c-no-500{color:var(--no-500)!important}.bdc-no-500{border-color:var(--no-500)!important}.bgc-no-500{background-color:var(--no-500)!important}.c-maybe-100{color:var(--maybe-100)!important}.bdc-maybe-100{border-color:var(--maybe-100)!important}.bgc-maybe-100{background-color:var(--maybe-100)!important}.c-maybe-200{color:var(--maybe-200)!important}.bdc-maybe-200{border-color:var(--maybe-200)!important}.bgc-maybe-200{background-color:var(--maybe-200)!important}.c-maybe-300{color:var(--maybe-300)!important}.bdc-maybe-300{border-color:var(--maybe-300)!important}.bgc-maybe-300{background-color:var(--maybe-300)!important}.c-maybe-400{color:var(--maybe-400)!important}.bdc-maybe-400{border-color:var(--maybe-400)!important}.bgc-maybe-400{background-color:var(--maybe-400)!important}.c-maybe-500{color:var(--maybe-500)!important}.bdc-maybe-500{border-color:var(--maybe-500)!important}.bgc-maybe-500{background-color:var(--maybe-500)!important}}@layer helpers{body.dev{--baseline: 8;background-size:100% calc(var(--baseline) * 1px)!important;background-image:linear-gradient(to bottom,#0000 calc((var(--baseline) - 1) * 1px),#ff69b4 calc(var(--baseline) * 1px))!important}.dev-error{position:fixed!important;top:var(--md1)!important;left:var(--md1)!important;z-index:var(--z-top)!important;padding:var(--sm1)!important;font-size:1rem!important;color:var(--danger-500)!important;background:var(--danger-100)!important;border:1px solid var(--danger-500)!important;border-radius:var(--radius-md)!important}}@layer helpers{.of-auto,.overflow-auto{overflow:auto!important}.of-hidden,.overflow-hidden{overflow:hidden!important}.of-clip,.overflow-clip{overflow:clip!important}.of-visible,.overflow-visible{overflow:visible!important}.of-scroll,.overflow-scroll{overflow:scroll!important}.of-x-auto,.overflow-x-auto{overflow-x:auto!important}.of-y-auto,.overflow-y-auto{overflow-y:auto!important}.of-x-hidden,.overflow-x-hidden{overflow-x:hidden!important}.of-y-hidden,.overflow-y-hidden{overflow-y:hidden!important}.of-x-clip,.overflow-x-clip{overflow-x:clip!important}.of-y-clip,.overflow-y-clip{overflow-y:clip!important}.of-x-visible,.overflow-x-visible{overflow-x:visible!important}.of-y-visible,.overflow-y-visible{overflow-y:visible!important}.of-x-scroll,.overflow-x-scroll{overflow-x:scroll!important}.of-y-scroll,.overflow-y-scroll{overflow-y:scroll!important}.position-static{position:static!important}.position-fixed{position:fixed!important}.position-absolute{position:absolute!important}.position-relative{position:relative!important}.position-sticky{position:sticky!important}.visibility-visible{visibility:visible!important}.visibility-hidden{visibility:hidden!important}.visibility-collapse{visibility:collapse!important}.z-auto{z-index:auto!important}.z-bottom{z-index:var(--z-bottom)!important}.z-0{z-index:var(--z-0)!important}.z-1{z-index:var(--z-1)!important}.z-2{z-index:var(--z-2)!important}.z-3{z-index:var(--z-3)!important}.z-4{z-index:var(--z-4)!important}.z-5{z-index:var(--z-5)!important}.z-top{z-index:var(--z-top)!important}}@layer helpers{.o-0{opacity:var(--o-0)!important}.o-1{opacity:var(--o-1)!important}.o-2{opacity:var(--o-2)!important}.o-3{opacity:var(--o-3)!important}.o-4{opacity:var(--o-4)!important}.o-5{opacity:var(--o-5)!important}}@layer helpers{.ar-square{aspect-ratio:var(--ar-square)!important}.ar-landscape{aspect-ratio:var(--ar-landscape)!important}.ar-portrait{aspect-ratio:var(--ar-portrait)!important}.ar-widescreen{aspect-ratio:var(--ar-widescreen)!important}.ar-golden{aspect-ratio:var(--ar-golden)!important}}@layer helpers{.w-0{width:0!important}.h-0{height:0!important}.m-0{margin:0!important}.mt-0{margin-top:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mr-0{margin-right:0!important}.mis-0{margin-inline-start:0!important}.mie-0{margin-inline-end:0!important}.p-0{padding:0!important}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.pis-0{padding-inline-start:0!important}.pie-0{padding-inline-end:0!important}.w-xs1{width:var(--xs1)!important}.h-xs1{height:var(--xs1)!important}.m-xs1{margin:var(--xs1)!important}.mt-xs1{margin-top:var(--xs1)!important}.mb-xs1{margin-bottom:var(--xs1)!important}.ml-xs1{margin-left:var(--xs1)!important}.mr-xs1{margin-right:var(--xs1)!important}.mis-xs1{margin-inline-start:var(--xs1)!important}.mie-xs1{margin-inline-end:var(--xs1)!important}.p-xs1{padding:var(--xs1)!important}.pt-xs1{padding-top:var(--xs1)!important}.pb-xs1{padding-bottom:var(--xs1)!important}.pl-xs1{padding-left:var(--xs1)!important}.pr-xs1{padding-right:var(--xs1)!important}.pis-xs1{padding-inline-start:var(--xs1)!important}.pie-xs1{padding-inline-end:var(--xs1)!important}.w-xs2{width:var(--xs2)!important}.h-xs2{height:var(--xs2)!important}.m-xs2{margin:var(--xs2)!important}.mt-xs2{margin-top:var(--xs2)!important}.mb-xs2{margin-bottom:var(--xs2)!important}.ml-xs2{margin-left:var(--xs2)!important}.mr-xs2{margin-right:var(--xs2)!important}.mis-xs2{margin-inline-start:var(--xs2)!important}.mie-xs2{margin-inline-end:var(--xs2)!important}.p-xs2{padding:var(--xs2)!important}.pt-xs2{padding-top:var(--xs2)!important}.pb-xs2{padding-bottom:var(--xs2)!important}.pl-xs2{padding-left:var(--xs2)!important}.pr-xs2{padding-right:var(--xs2)!important}.pis-xs2{padding-inline-start:var(--xs2)!important}.pie-xs2{padding-inline-end:var(--xs2)!important}.w-xs3{width:var(--xs3)!important}.h-xs3{height:var(--xs3)!important}.m-xs3{margin:var(--xs3)!important}.mt-xs3{margin-top:var(--xs3)!important}.mb-xs3{margin-bottom:var(--xs3)!important}.ml-xs3{margin-left:var(--xs3)!important}.mr-xs3{margin-right:var(--xs3)!important}.mis-xs3{margin-inline-start:var(--xs3)!important}.mie-xs3{margin-inline-end:var(--xs3)!important}.p-xs3{padding:var(--xs3)!important}.pt-xs3{padding-top:var(--xs3)!important}.pb-xs3{padding-bottom:var(--xs3)!important}.pl-xs3{padding-left:var(--xs3)!important}.pr-xs3{padding-right:var(--xs3)!important}.pis-xs3{padding-inline-start:var(--xs3)!important}.pie-xs3{padding-inline-end:var(--xs3)!important}.w-sm1{width:var(--sm1)!important}.h-sm1{height:var(--sm1)!important}.m-sm1{margin:var(--sm1)!important}.mt-sm1{margin-top:var(--sm1)!important}.mb-sm1{margin-bottom:var(--sm1)!important}.ml-sm1{margin-left:var(--sm1)!important}.mr-sm1{margin-right:var(--sm1)!important}.mis-sm1{margin-inline-start:var(--sm1)!important}.mie-sm1{margin-inline-end:var(--sm1)!important}.p-sm1{padding:var(--sm1)!important}.pt-sm1{padding-top:var(--sm1)!important}.pb-sm1{padding-bottom:var(--sm1)!important}.pl-sm1{padding-left:var(--sm1)!important}.pr-sm1{padding-right:var(--sm1)!important}.pis-sm1{padding-inline-start:var(--sm1)!important}.pie-sm1{padding-inline-end:var(--sm1)!important}.w-sm2{width:var(--sm2)!important}.h-sm2{height:var(--sm2)!important}.m-sm2{margin:var(--sm2)!important}.mt-sm2{margin-top:var(--sm2)!important}.mb-sm2{margin-bottom:var(--sm2)!important}.ml-sm2{margin-left:var(--sm2)!important}.mr-sm2{margin-right:var(--sm2)!important}.mis-sm2{margin-inline-start:var(--sm2)!important}.mie-sm2{margin-inline-end:var(--sm2)!important}.p-sm2{padding:var(--sm2)!important}.pt-sm2{padding-top:var(--sm2)!important}.pb-sm2{padding-bottom:var(--sm2)!important}.pl-sm2{padding-left:var(--sm2)!important}.pr-sm2{padding-right:var(--sm2)!important}.pis-sm2{padding-inline-start:var(--sm2)!important}.pie-sm2{padding-inline-end:var(--sm2)!important}.w-sm3{width:var(--sm3)!important}.h-sm3{height:var(--sm3)!important}.m-sm3{margin:var(--sm3)!important}.mt-sm3{margin-top:var(--sm3)!important}.mb-sm3{margin-bottom:var(--sm3)!important}.ml-sm3{margin-left:var(--sm3)!important}.mr-sm3{margin-right:var(--sm3)!important}.mis-sm3{margin-inline-start:var(--sm3)!important}.mie-sm3{margin-inline-end:var(--sm3)!important}.p-sm3{padding:var(--sm3)!important}.pt-sm3{padding-top:var(--sm3)!important}.pb-sm3{padding-bottom:var(--sm3)!important}.pl-sm3{padding-left:var(--sm3)!important}.pr-sm3{padding-right:var(--sm3)!important}.pis-sm3{padding-inline-start:var(--sm3)!important}.pie-sm3{padding-inline-end:var(--sm3)!important}.w-md1{width:var(--md1)!important}.h-md1{height:var(--md1)!important}.m-md1{margin:var(--md1)!important}.mt-md1{margin-top:var(--md1)!important}.mb-md1{margin-bottom:var(--md1)!important}.ml-md1{margin-left:var(--md1)!important}.mr-md1{margin-right:var(--md1)!important}.mis-md1{margin-inline-start:var(--md1)!important}.mie-md1{margin-inline-end:var(--md1)!important}.p-md1{padding:var(--md1)!important}.pt-md1{padding-top:var(--md1)!important}.pb-md1{padding-bottom:var(--md1)!important}.pl-md1{padding-left:var(--md1)!important}.pr-md1{padding-right:var(--md1)!important}.pis-md1{padding-inline-start:var(--md1)!important}.pie-md1{padding-inline-end:var(--md1)!important}.w-md2{width:var(--md2)!important}.h-md2{height:var(--md2)!important}.m-md2{margin:var(--md2)!important}.mt-md2{margin-top:var(--md2)!important}.mb-md2{margin-bottom:var(--md2)!important}.ml-md2{margin-left:var(--md2)!important}.mr-md2{margin-right:var(--md2)!important}.mis-md2{margin-inline-start:var(--md2)!important}.mie-md2{margin-inline-end:var(--md2)!important}.p-md2{padding:var(--md2)!important}.pt-md2{padding-top:var(--md2)!important}.pb-md2{padding-bottom:var(--md2)!important}.pl-md2{padding-left:var(--md2)!important}.pr-md2{padding-right:var(--md2)!important}.pis-md2{padding-inline-start:var(--md2)!important}.pie-md2{padding-inline-end:var(--md2)!important}.w-md3{width:var(--md3)!important}.h-md3{height:var(--md3)!important}.m-md3{margin:var(--md3)!important}.mt-md3{margin-top:var(--md3)!important}.mb-md3{margin-bottom:var(--md3)!important}.ml-md3{margin-left:var(--md3)!important}.mr-md3{margin-right:var(--md3)!important}.mis-md3{margin-inline-start:var(--md3)!important}.mie-md3{margin-inline-end:var(--md3)!important}.p-md3{padding:var(--md3)!important}.pt-md3{padding-top:var(--md3)!important}.pb-md3{padding-bottom:var(--md3)!important}.pl-md3{padding-left:var(--md3)!important}.pr-md3{padding-right:var(--md3)!important}.pis-md3{padding-inline-start:var(--md3)!important}.pie-md3{padding-inline-end:var(--md3)!important}.w-lg1{width:var(--lg1)!important}.h-lg1{height:var(--lg1)!important}.m-lg1{margin:var(--lg1)!important}.mt-lg1{margin-top:var(--lg1)!important}.mb-lg1{margin-bottom:var(--lg1)!important}.ml-lg1{margin-left:var(--lg1)!important}.mr-lg1{margin-right:var(--lg1)!important}.mis-lg1{margin-inline-start:var(--lg1)!important}.mie-lg1{margin-inline-end:var(--lg1)!important}.p-lg1{padding:var(--lg1)!important}.pt-lg1{padding-top:var(--lg1)!important}.pb-lg1{padding-bottom:var(--lg1)!important}.pl-lg1{padding-left:var(--lg1)!important}.pr-lg1{padding-right:var(--lg1)!important}.pis-lg1{padding-inline-start:var(--lg1)!important}.pie-lg1{padding-inline-end:var(--lg1)!important}.w-lg2{width:var(--lg2)!important}.h-lg2{height:var(--lg2)!important}.m-lg2{margin:var(--lg2)!important}.mt-lg2{margin-top:var(--lg2)!important}.mb-lg2{margin-bottom:var(--lg2)!important}.ml-lg2{margin-left:var(--lg2)!important}.mr-lg2{margin-right:var(--lg2)!important}.mis-lg2{margin-inline-start:var(--lg2)!important}.mie-lg2{margin-inline-end:var(--lg2)!important}.p-lg2{padding:var(--lg2)!important}.pt-lg2{padding-top:var(--lg2)!important}.pb-lg2{padding-bottom:var(--lg2)!important}.pl-lg2{padding-left:var(--lg2)!important}.pr-lg2{padding-right:var(--lg2)!important}.pis-lg2{padding-inline-start:var(--lg2)!important}.pie-lg2{padding-inline-end:var(--lg2)!important}.w-lg3{width:var(--lg3)!important}.h-lg3{height:var(--lg3)!important}.m-lg3{margin:var(--lg3)!important}.mt-lg3{margin-top:var(--lg3)!important}.mb-lg3{margin-bottom:var(--lg3)!important}.ml-lg3{margin-left:var(--lg3)!important}.mr-lg3{margin-right:var(--lg3)!important}.mis-lg3{margin-inline-start:var(--lg3)!important}.mie-lg3{margin-inline-end:var(--lg3)!important}.p-lg3{padding:var(--lg3)!important}.pt-lg3{padding-top:var(--lg3)!important}.pb-lg3{padding-bottom:var(--lg3)!important}.pl-lg3{padding-left:var(--lg3)!important}.pr-lg3{padding-right:var(--lg3)!important}.pis-lg3{padding-inline-start:var(--lg3)!important}.pie-lg3{padding-inline-end:var(--lg3)!important}.w-xl1{width:var(--xl1)!important}.h-xl1{height:var(--xl1)!important}.m-xl1{margin:var(--xl1)!important}.mt-xl1{margin-top:var(--xl1)!important}.mb-xl1{margin-bottom:var(--xl1)!important}.ml-xl1{margin-left:var(--xl1)!important}.mr-xl1{margin-right:var(--xl1)!important}.mis-xl1{margin-inline-start:var(--xl1)!important}.mie-xl1{margin-inline-end:var(--xl1)!important}.p-xl1{padding:var(--xl1)!important}.pt-xl1{padding-top:var(--xl1)!important}.pb-xl1{padding-bottom:var(--xl1)!important}.pl-xl1{padding-left:var(--xl1)!important}.pr-xl1{padding-right:var(--xl1)!important}.pis-xl1{padding-inline-start:var(--xl1)!important}.pie-xl1{padding-inline-end:var(--xl1)!important}.w-xl2{width:var(--xl2)!important}.h-xl2{height:var(--xl2)!important}.m-xl2{margin:var(--xl2)!important}.mt-xl2{margin-top:var(--xl2)!important}.mb-xl2{margin-bottom:var(--xl2)!important}.ml-xl2{margin-left:var(--xl2)!important}.mr-xl2{margin-right:var(--xl2)!important}.mis-xl2{margin-inline-start:var(--xl2)!important}.mie-xl2{margin-inline-end:var(--xl2)!important}.p-xl2{padding:var(--xl2)!important}.pt-xl2{padding-top:var(--xl2)!important}.pb-xl2{padding-bottom:var(--xl2)!important}.pl-xl2{padding-left:var(--xl2)!important}.pr-xl2{padding-right:var(--xl2)!important}.pis-xl2{padding-inline-start:var(--xl2)!important}.pie-xl2{padding-inline-end:var(--xl2)!important}.w-xl3{width:var(--xl3)!important}.h-xl3{height:var(--xl3)!important}.m-xl3{margin:var(--xl3)!important}.mt-xl3{margin-top:var(--xl3)!important}.mb-xl3{margin-bottom:var(--xl3)!important}.ml-xl3{margin-left:var(--xl3)!important}.mr-xl3{margin-right:var(--xl3)!important}.mis-xl3{margin-inline-start:var(--xl3)!important}.mie-xl3{margin-inline-end:var(--xl3)!important}.p-xl3{padding:var(--xl3)!important}.pt-xl3{padding-top:var(--xl3)!important}.pb-xl3{padding-bottom:var(--xl3)!important}.pl-xl3{padding-left:var(--xl3)!important}.pr-xl3{padding-right:var(--xl3)!important}.pis-xl3{padding-inline-start:var(--xl3)!important}.pie-xl3{padding-inline-end:var(--xl3)!important}.w-xxl1{width:var(--xxl1)!important}.h-xxl1{height:var(--xxl1)!important}.m-xxl1{margin:var(--xxl1)!important}.mt-xxl1{margin-top:var(--xxl1)!important}.mb-xxl1{margin-bottom:var(--xxl1)!important}.ml-xxl1{margin-left:var(--xxl1)!important}.mr-xxl1{margin-right:var(--xxl1)!important}.mis-xxl1{margin-inline-start:var(--xxl1)!important}.mie-xxl1{margin-inline-end:var(--xxl1)!important}.p-xxl1{padding:var(--xxl1)!important}.pt-xxl1{padding-top:var(--xxl1)!important}.pb-xxl1{padding-bottom:var(--xxl1)!important}.pl-xxl1{padding-left:var(--xxl1)!important}.pr-xxl1{padding-right:var(--xxl1)!important}.pis-xxl1{padding-inline-start:var(--xxl1)!important}.pie-xxl1{padding-inline-end:var(--xxl1)!important}.w-xxl2{width:var(--xxl2)!important}.h-xxl2{height:var(--xxl2)!important}.m-xxl2{margin:var(--xxl2)!important}.mt-xxl2{margin-top:var(--xxl2)!important}.mb-xxl2{margin-bottom:var(--xxl2)!important}.ml-xxl2{margin-left:var(--xxl2)!important}.mr-xxl2{margin-right:var(--xxl2)!important}.mis-xxl2{margin-inline-start:var(--xxl2)!important}.mie-xxl2{margin-inline-end:var(--xxl2)!important}.p-xxl2{padding:var(--xxl2)!important}.pt-xxl2{padding-top:var(--xxl2)!important}.pb-xxl2{padding-bottom:var(--xxl2)!important}.pl-xxl2{padding-left:var(--xxl2)!important}.pr-xxl2{padding-right:var(--xxl2)!important}.pis-xxl2{padding-inline-start:var(--xxl2)!important}.pie-xxl2{padding-inline-end:var(--xxl2)!important}.w-xxl3{width:var(--xxl3)!important}.h-xxl3{height:var(--xxl3)!important}.m-xxl3{margin:var(--xxl3)!important}.mt-xxl3{margin-top:var(--xxl3)!important}.mb-xxl3{margin-bottom:var(--xxl3)!important}.ml-xxl3{margin-left:var(--xxl3)!important}.mr-xxl3{margin-right:var(--xxl3)!important}.mis-xxl3{margin-inline-start:var(--xxl3)!important}.mie-xxl3{margin-inline-end:var(--xxl3)!important}.p-xxl3{padding:var(--xxl3)!important}.pt-xxl3{padding-top:var(--xxl3)!important}.pb-xxl3{padding-bottom:var(--xxl3)!important}.pl-xxl3{padding-left:var(--xxl3)!important}.pr-xxl3{padding-right:var(--xxl3)!important}.pis-xxl3{padding-inline-start:var(--xxl3)!important}.pie-xxl3{padding-inline-end:var(--xxl3)!important}.w-mega1{width:var(--mega1)!important}.h-mega1{height:var(--mega1)!important}.m-mega1{margin:var(--mega1)!important}.mt-mega1{margin-top:var(--mega1)!important}.mb-mega1{margin-bottom:var(--mega1)!important}.ml-mega1{margin-left:var(--mega1)!important}.mr-mega1{margin-right:var(--mega1)!important}.mis-mega1{margin-inline-start:var(--mega1)!important}.mie-mega1{margin-inline-end:var(--mega1)!important}.p-mega1{padding:var(--mega1)!important}.pt-mega1{padding-top:var(--mega1)!important}.pb-mega1{padding-bottom:var(--mega1)!important}.pl-mega1{padding-left:var(--mega1)!important}.pr-mega1{padding-right:var(--mega1)!important}.pis-mega1{padding-inline-start:var(--mega1)!important}.pie-mega1{padding-inline-end:var(--mega1)!important}.w-mega2{width:var(--mega2)!important}.h-mega2{height:var(--mega2)!important}.m-mega2{margin:var(--mega2)!important}.mt-mega2{margin-top:var(--mega2)!important}.mb-mega2{margin-bottom:var(--mega2)!important}.ml-mega2{margin-left:var(--mega2)!important}.mr-mega2{margin-right:var(--mega2)!important}.mis-mega2{margin-inline-start:var(--mega2)!important}.mie-mega2{margin-inline-end:var(--mega2)!important}.p-mega2{padding:var(--mega2)!important}.pt-mega2{padding-top:var(--mega2)!important}.pb-mega2{padding-bottom:var(--mega2)!important}.pl-mega2{padding-left:var(--mega2)!important}.pr-mega2{padding-right:var(--mega2)!important}.pis-mega2{padding-inline-start:var(--mega2)!important}.pie-mega2{padding-inline-end:var(--mega2)!important}.w-mega3{width:var(--mega3)!important}.h-mega3{height:var(--mega3)!important}.m-mega3{margin:var(--mega3)!important}.mt-mega3{margin-top:var(--mega3)!important}.mb-mega3{margin-bottom:var(--mega3)!important}.ml-mega3{margin-left:var(--mega3)!important}.mr-mega3{margin-right:var(--mega3)!important}.mis-mega3{margin-inline-start:var(--mega3)!important}.mie-mega3{margin-inline-end:var(--mega3)!important}.p-mega3{padding:var(--mega3)!important}.pt-mega3{padding-top:var(--mega3)!important}.pb-mega3{padding-bottom:var(--mega3)!important}.pl-mega3{padding-left:var(--mega3)!important}.pr-mega3{padding-right:var(--mega3)!important}.pis-mega3{padding-inline-start:var(--mega3)!important}.pie-mega3{padding-inline-end:var(--mega3)!important}.w-giga1{width:var(--giga1)!important}.h-giga1{height:var(--giga1)!important}.m-giga1{margin:var(--giga1)!important}.mt-giga1{margin-top:var(--giga1)!important}.mb-giga1{margin-bottom:var(--giga1)!important}.ml-giga1{margin-left:var(--giga1)!important}.mr-giga1{margin-right:var(--giga1)!important}.mis-giga1{margin-inline-start:var(--giga1)!important}.mie-giga1{margin-inline-end:var(--giga1)!important}.p-giga1{padding:var(--giga1)!important}.pt-giga1{padding-top:var(--giga1)!important}.pb-giga1{padding-bottom:var(--giga1)!important}.pl-giga1{padding-left:var(--giga1)!important}.pr-giga1{padding-right:var(--giga1)!important}.pis-giga1{padding-inline-start:var(--giga1)!important}.pie-giga1{padding-inline-end:var(--giga1)!important}.w-giga2{width:var(--giga2)!important}.h-giga2{height:var(--giga2)!important}.m-giga2{margin:var(--giga2)!important}.mt-giga2{margin-top:var(--giga2)!important}.mb-giga2{margin-bottom:var(--giga2)!important}.ml-giga2{margin-left:var(--giga2)!important}.mr-giga2{margin-right:var(--giga2)!important}.mis-giga2{margin-inline-start:var(--giga2)!important}.mie-giga2{margin-inline-end:var(--giga2)!important}.p-giga2{padding:var(--giga2)!important}.pt-giga2{padding-top:var(--giga2)!important}.pb-giga2{padding-bottom:var(--giga2)!important}.pl-giga2{padding-left:var(--giga2)!important}.pr-giga2{padding-right:var(--giga2)!important}.pis-giga2{padding-inline-start:var(--giga2)!important}.pie-giga2{padding-inline-end:var(--giga2)!important}.w-giga3{width:var(--giga3)!important}.h-giga3{height:var(--giga3)!important}.m-giga3{margin:var(--giga3)!important}.mt-giga3{margin-top:var(--giga3)!important}.mb-giga3{margin-bottom:var(--giga3)!important}.ml-giga3{margin-left:var(--giga3)!important}.mr-giga3{margin-right:var(--giga3)!important}.mis-giga3{margin-inline-start:var(--giga3)!important}.mie-giga3{margin-inline-end:var(--giga3)!important}.p-giga3{padding:var(--giga3)!important}.pt-giga3{padding-top:var(--giga3)!important}.pb-giga3{padding-bottom:var(--giga3)!important}.pl-giga3{padding-left:var(--giga3)!important}.pr-giga3{padding-right:var(--giga3)!important}.pis-giga3{padding-inline-start:var(--giga3)!important}.pie-giga3{padding-inline-end:var(--giga3)!important}.w-tera1{width:var(--tera1)!important}.h-tera1{height:var(--tera1)!important}.m-tera1{margin:var(--tera1)!important}.mt-tera1{margin-top:var(--tera1)!important}.mb-tera1{margin-bottom:var(--tera1)!important}.ml-tera1{margin-left:var(--tera1)!important}.mr-tera1{margin-right:var(--tera1)!important}.mis-tera1{margin-inline-start:var(--tera1)!important}.mie-tera1{margin-inline-end:var(--tera1)!important}.p-tera1{padding:var(--tera1)!important}.pt-tera1{padding-top:var(--tera1)!important}.pb-tera1{padding-bottom:var(--tera1)!important}.pl-tera1{padding-left:var(--tera1)!important}.pr-tera1{padding-right:var(--tera1)!important}.pis-tera1{padding-inline-start:var(--tera1)!important}.pie-tera1{padding-inline-end:var(--tera1)!important}.w-tera2{width:var(--tera2)!important}.h-tera2{height:var(--tera2)!important}.m-tera2{margin:var(--tera2)!important}.mt-tera2{margin-top:var(--tera2)!important}.mb-tera2{margin-bottom:var(--tera2)!important}.ml-tera2{margin-left:var(--tera2)!important}.mr-tera2{margin-right:var(--tera2)!important}.mis-tera2{margin-inline-start:var(--tera2)!important}.mie-tera2{margin-inline-end:var(--tera2)!important}.p-tera2{padding:var(--tera2)!important}.pt-tera2{padding-top:var(--tera2)!important}.pb-tera2{padding-bottom:var(--tera2)!important}.pl-tera2{padding-left:var(--tera2)!important}.pr-tera2{padding-right:var(--tera2)!important}.pis-tera2{padding-inline-start:var(--tera2)!important}.pie-tera2{padding-inline-end:var(--tera2)!important}.w-tera3{width:var(--tera3)!important}.h-tera3{height:var(--tera3)!important}.m-tera3{margin:var(--tera3)!important}.mt-tera3{margin-top:var(--tera3)!important}.mb-tera3{margin-bottom:var(--tera3)!important}.ml-tera3{margin-left:var(--tera3)!important}.mr-tera3{margin-right:var(--tera3)!important}.mis-tera3{margin-inline-start:var(--tera3)!important}.mie-tera3{margin-inline-end:var(--tera3)!important}.p-tera3{padding:var(--tera3)!important}.pt-tera3{padding-top:var(--tera3)!important}.pb-tera3{padding-bottom:var(--tera3)!important}.pl-tera3{padding-left:var(--tera3)!important}.pr-tera3{padding-right:var(--tera3)!important}.pis-tera3{padding-inline-start:var(--tera3)!important}.pie-tera3{padding-inline-end:var(--tera3)!important}}@layer helpers{.font-text{font-family:var(--text)!important}.font-display{font-family:var(--display)!important}.font-mono{font-family:var(--mono)!important}.font-italic{font-style:italic!important}.font-normal{font-style:normal!important}.font-extra-light{font-weight:var(--extra-light)!important}.font-light{font-weight:var(--light)!important}.font-book{font-weight:var(--book)!important}.font-semi-bold{font-weight:var(--semi-bold)!important}.font-bold{font-weight:var(--bold)!important}.font-black{font-weight:var(--black)!important}.text-xs{font-size:var(--text-xs)!important}.text-sm{font-size:var(--text-sm)!important}.text-md{font-size:var(--text-md)!important}.text-lg{font-size:var(--text-lg)!important}.text-xl{font-size:var(--text-xl)!important}.display-sm{font-size:var(--display-sm)!important}.display-md{font-size:var(--display-md)!important}.display-lg{font-size:var(--display-lg)!important}.display-xl{font-size:var(--display-xl)!important}.display-mega{font-size:var(--display-mega)!important}.display-giga{font-size:var(--display-giga)!important}.tracking-sm{letter-spacing:var(--tracking-sm)!important}.tracking-md{letter-spacing:var(--tracking-md)!important}.tracking-lg{letter-spacing:var(--tracking-lg)!important}.tracking-xl{letter-spacing:var(--tracking-xl)!important}.tracking-xxl{letter-spacing:var(--tracking-xxl)!important}.leading-xs{line-height:var(--leading-xs)!important}.leading-sm{line-height:var(--leading-sm)!important}.leading-md{line-height:var(--leading-md)!important}.leading-lg{line-height:var(--leading-lg)!important}.leading-xl{line-height:var(--leading-xl)!important}.leading-xxl{line-height:var(--leading-xxl)!important}.text-left{text-align:left!important}.text-center{text-align:center!important}.text-right{text-align:right!important}.text-justify{text-align:justify!important}.text-start{text-align:start!important}.text-end{text-align:end!important}.text-uppercase{text-transform:uppercase!important}.text-lowercase{text-transform:lowercase!important}.text-capitalize{text-transform:capitalize!important}} diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 22388739..7f4e19e6 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -54,7 +54,7 @@ const headImage = `${Astro.url.origin}${logoImg.src.split('?')[0]}`; {markdownHref && } {/* Values mirror --body-background-color (--base-0 / --base-950 in - settings.tokens.css). ThemeToggle.astro re-syncs them when the + theme.default.tokens.css). ThemeToggle.astro re-syncs them when the visitor overrides the OS color scheme. */} diff --git a/src/styles/_global.css b/src/styles/_global.css index def32c81..21eeff51 100644 --- a/src/styles/_global.css +++ b/src/styles/_global.css @@ -4,15 +4,17 @@ @import url(./framework/mcss.components.css); /* - Theme activation. A theme is part of this site's CSS, not the framework's: - mcss.css declares the `theme` layer slot but never fills it. Import at - most one theme.*.css file here to restyle the whole site. No layer() - annotation: themes self-layer (@layer theme inside the file), and adding - one would nest a redundant theme.theme sub-layer. The layer order - declared in mcss.css decides priority, which is why the unlayered - site styles below beat the theme no matter where this line sits. - None imported = the default look. + Theme activation. Themes are part of this site's CSS, not the + framework's: mcss.css declares the theme layer slots but never fills + them. The default theme carries every design value, so activate exactly + one theme entry: theme.default.css for the stock look, or a skin like + theme.wireframe.css that composes the default and overrides on top. A + theme of this site's own would import after the default and land in + `theme.overrides` (copy theme.starter.css). No layer() annotation: + theme files self-layer. Unlayered site styles below beat any theme + no matter where these lines sit. */ +@import url(./framework/theme.default.css); /* @import url(./framework/theme.wireframe.css); */ /* diff --git a/src/styles/framework/component.toggle.css b/src/styles/framework/component.toggle.css index 8ba2b420..bc3f26eb 100644 --- a/src/styles/framework/component.toggle.css +++ b/src/styles/framework/component.toggle.css @@ -1,5 +1,5 @@ .toggle { - /* Themable via the --toggle-* tokens in settings.ui.css */ + /* Themable via the --toggle-* tokens in theme.default.ui.css */ --toggle-w: var(--toggle-width); --toggle-h: var(--toggle-height); --toggle-bd: var(--toggle-border-width); diff --git a/src/styles/framework/global.layout.css b/src/styles/framework/global.layout.css index 0321d2fd..0b82081e 100644 --- a/src/styles/framework/global.layout.css +++ b/src/styles/framework/global.layout.css @@ -10,7 +10,7 @@
…
- Widths come from the layout tokens in settings.ui.css: + Widths come from the layout tokens in theme.default.ui.css: --layout-content-width, --layout-aside-width, --layout-toc-width. */ diff --git a/src/styles/framework/mcss.css b/src/styles/framework/mcss.css index a8c307aa..64abbf23 100644 --- a/src/styles/framework/mcss.css +++ b/src/styles/framework/mcss.css @@ -8,24 +8,25 @@ declarations beat unlayered CSS. Helpers are element-level overrides that win everywhere, like inline styling. */ -@layer settings, base, elements, global, components, theme, helpers; +@layer base, elements, global, components, theme.defaults, theme.overrides, helpers; /* Build-time only (@custom-media + mixin definitions, no runtime output) */ @import url(./settings.media-queries.css); @import url(./settings.mixins.css); -/* Settings */ -@import url(./settings.tokens.css) layer(settings); -@import url(./settings.ui.css) layer(settings); - /* - No theme is imported here, ever: the framework only declares the empty - `theme` slot above. A theme (theme.*.css) is part of YOUR css: a swappable - theme of token overrides plus optional style rules that you activate, at - most one, from your own entry point (see _global.css for this site's). - Theme files self-layer (@layer theme inside the file), so wherever that - import sits it lands in this slot. - None imported = the default look (settings.* holds every default). + No theme is imported here, ever: the framework only declares the two + theme slots above. Every design value (scales and defaults) lives in the + default theme, which YOUR entry point activates right after this file: + + @import url(./framework/mcss.css); + @import url(./framework/theme.default.css); + + Without it, every token is unset and the page renders half-styled. Your + own theme (copy theme.starter.css) imports after that and lands in + `theme.overrides`, so it beats the default's `theme.defaults` no matter + the import order. Theme files self-layer, so no layer() annotation is + needed on their imports. See _global.css for this site's entry. */ /* Reset & Normalize */ diff --git a/src/styles/framework/settings.media-queries.css b/src/styles/framework/settings.media-queries.css index 406f61af..c5476245 100644 --- a/src/styles/framework/settings.media-queries.css +++ b/src/styles/framework/settings.media-queries.css @@ -6,7 +6,7 @@ https://open-props.style/#media-queries Can't use var() inside media queries 🤦‍♂️ https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in settings.tokens.css +so breakpoints are not in theme.default.tokens.css xxs: 240px xs: 360px diff --git a/src/styles/framework/settings.tokens.css b/src/styles/framework/settings.tokens.css deleted file mode 100644 index df7cc22e..00000000 --- a/src/styles/framework/settings.tokens.css +++ /dev/null @@ -1,256 +0,0 @@ -/* SETTINGS TOKENS */ - -/* -Can't use var() inside media queries, so breakpoints are hard coded in -settings.media-queries.css - -xxs: 240px xs: 360px sm: 480px md: 768px lg: 1024px xl: 1440px xxl: 1920px -*/ - -/* - -• Dimensions (Margin, Padding, Width, Height) -• Aspect Ratios - -• Font Families -• Font Size -• Font Weight - -• Letter Spacing -• Line Height - -• Colors - -• Box shadows -• Border radius -• Border width -• Opacity -*/ - -:root { - /* GLOBALS */ - - /* DIMENSIONS */ - - /* Sizes */ - - --xs1: 4px; - --xs2: 8px; - --xs3: 12px; - - --sm1: 16px; - --sm2: 20px; - --sm3: 24px; - - --md1: 28px; - --md2: 32px; - --md3: 36px; - - --lg1: 40px; - --lg2: 44px; - --lg3: 48px; - - --xl1: 56px; - --xl2: 64px; - --xl3: 80px; - - --xxl1: 96px; - --xxl2: 112px; - --xxl3: 128px; - - --mega1: 160px; - --mega2: 192px; - --mega3: 224px; - - --giga1: 256px; - --giga2: 288px; - --giga3: 320px; - - --tera1: 384px; - --tera2: 480px; - --tera3: 520px; - - /* Aspect Ratios */ - --ar-square: 1; - --ar-landscape: 4/3; - --ar-portrait: 3/4; - --ar-widescreen: 16/9; - --ar-golden: 1.618/1; - - /* TYPOGRAPHY */ - /* See also elements.text & help.text */ - - /* Font Families */ - /* Local font stacks - More options @ https://modernfontstacks.com */ - --display: - Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, ui-sans-serif, - sans-serif; - --text: ui-sans-serif, system-ui, sans-serif; - --mono: - Dank Mono, Inconsolata, Fira Mono, SF Mono, Monaco, Droid Sans Mono, - Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, - ui-monospace, monospace; - - /* Font Sizes */ - /* Create your own sizes @ https://typescale.com */ - --text-xs: 0.694rem; - --text-sm: 0.833rem; - --text-md: 1rem; - --text-lg: 1.2rem; - --text-xl: 1.44rem; - --display-sm: 1.728rem; - --display-md: 2.074rem; - --display-lg: 2.488rem; - --display-xl: 2.986rem; /* h1 */ - --display-mega: 3.583rem; - --display-giga: 4.299rem; - - /* Heading font sizes are decisions, not scale steps: they map each - heading level onto this scale. See --heading-font-size-* in - settings.ui.css. */ - - /* Font Weights */ - --extra-light: 200; - --light: 300; - --book: 400; - --semi-bold: 600; - --bold: 700; - --black: 900; - - /* Letter Spacing */ - --tracking-sm: -0.05em; - --tracking-md: 0.025em; - --tracking-lg: 0.05em; - --tracking-xl: 0.075em; - --tracking-xxl: 0.15em; - - /* Line Height */ - --leading-xs: 1; - --leading-sm: 1.15; - --leading-md: 1.375; - --leading-lg: 1.5; - --leading-xl: 1.75; - --leading-xxl: 2; - - /* COLORS */ - /* Make your own palettes programmatically: https://www.tints.dev */ - - /* Base */ - - --base-0: #fff; - --base-50: #f6f7f9; - --base-100: #edeef1; - --base-200: #d6dbe1; - --base-300: #b2bbc7; - --base-400: #8897a8; - --base-500: #697a8e; - --base-600: #546375; - --base-700: #4a5666; - --base-800: #3c4550; - --base-900: #353c45; - --base-950: #23282e; - - /* Primary */ - - --primary-50: #f0f9ff; - --primary-100: #e0f2fe; - --primary-200: #bae6fd; - --primary-300: #7dd3fc; - --primary-400: #38bdf8; - --primary-500: #0ea5e9; - --primary-600: #0284c7; - --primary-700: #0369a1; - --primary-800: #075985; - --primary-900: #0c4a6e; - --primary-950: #082f49; - - /* Secondary and/or Highlight goes here */ - - /* Feedback */ - - --yes-100: #d5f6e8; - --yes-200: #afebd4; - --yes-300: #7adbbd; - --yes-400: #46c4a0; - --yes-500: #13886d; - - --no-100: #ffe4e6; - --no-200: #fecdd3; - --no-300: #fda4af; - --no-400: #fb7185; - --no-500: #e11d48; - - --maybe-100: #fff7d6; - --maybe-200: #fff0b3; - --maybe-300: #ffd64a; - --maybe-400: #ffc220; - --maybe-500: #f9a007; - - /* Highlight (text marker) */ - - --highlight-500: #ffee00; - - /* GRADIENTS */ - - --gradient-primary: linear-gradient( - 90deg, - var(--primary-950) 0%, - var(--primary-400) 100% - ); - - /* BORDERS */ - - --border-sm: 1px; - --border-md: 2px; - --border-lg: 4px; - --border-xl: 8px; - --border-xxl: 12px; - - --radius-sm: 3px; - --radius-md: 5px; - --radius-lg: 8px; - --radius-xl: 12px; - --radius-xxl: 16px; - --radius-round: 1e5px; - - /* DROP SHADOWS */ - - --shadow-sm: - 0 1px 3px 0 var(--ui-shadow-color), 0 1px 2px -1px var(--ui-shadow-color); - --shadow-md: - 0 4px 6px -1px var(--ui-shadow-color), 0 2px 4px -2px var(--ui-shadow-color); - --shadow-lg: - 0 8px 13px -3px var(--ui-shadow-color), - 0 4px 6px -4px var(--ui-shadow-color); - --shadow-xl: - 0 20px 20px -5px var(--ui-shadow-color), - 0 8px 10px -6px var(--ui-shadow-color); - --shadow-xxl: - 0px 11px 8px -6px var(--ui-shadow-color), - 0 10px 15px 2px var(--ui-shadow-color); - - /* OPACITY */ - - --o-0: 0; /* overkill for consistency */ - --o-1: 0.2; - --o-2: 0.4; - --o-3: 0.6; - --o-4: 0.8; - --o-5: 1; - - /* Z-INDEX */ - - --z-bottom: -1000000000; - --z-0: 0; /* overkill for consistency */ - --z-1: 10; - --z-2: 20; - --z-3: 30; - --z-4: 40; - --z-5: 50; - --z-top: 1000000000; - - /* TRANSITIONS */ - - --transition: 220ms ease-in-out; - --transition-fast: 100ms ease-in-out; -} diff --git a/src/styles/framework/settings.ui.css b/src/styles/framework/settings.ui.css deleted file mode 100644 index 3a8a3f2d..00000000 --- a/src/styles/framework/settings.ui.css +++ /dev/null @@ -1,593 +0,0 @@ -/* INTERFACE TOKENS */ - -/* - The decisions layer. Every token here is named for what it's FOR (an - element, a component, or a shared meaning) and answers "what does this - thing use by default". Tokens named for what they ARE (--sm1, --base-500, - --bold) are scale tokens and live in settings.tokens.css. That's the - whole split: a name that mentions a UI thing belongs here; a name that - labels a step on a scale belongs there. - - Values, in order of preference: - 1. Another interface token, when the meaning is shared - (--input-border-color: var(--ui-border-color)). - 2. A scale token, when the value should follow the system scales - (--fieldset-padding: var(--sm3)). - 3. A raw value, only where following the scales would be wrong: - content (separator strings, icon URLs), geometry tuned to one - control (--toggle-width), or element-relative measures that track - the element's own type instead of the page (em heading spacing). - The test: "if a theme retuned the scales, should this follow?" - - Deliberate deviations from these defaults live in a theme file - (see theme.default.css). -*/ - -:root { - /* Color scheme (light/dark), toggled by the .theme-light / .theme-dark - classes below. Unrelated to theme files, which are full themes. */ - color-scheme: light dark; - - --ui-border-color: light-dark(var(--base-200), var(--base-500)); - /* Also consumed by the --shadow-* scale in settings.tokens.css: the one - reference between the files that runs upward, so shadows can switch - with the color scheme. Raw alpha colors: the palettes have no alpha - steps. */ - --ui-shadow-color: light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.6)); - - /* Keyboard focus ring (consumed by :focus-visible in global.a11y.css). - Raw 2px on purpose: an accessibility affordance that shouldn't move - when a theme retunes the decorative border scale. */ - --focus-ring-color: light-dark(var(--primary-500), var(--primary-400)); - --focus-ring-width: 2px; - --focus-ring-offset: 2px; - - /* Semantic feedback aliases over the raw feedback palettes. - Prefer these in components and themes; a theme can restyle feedback by - overriding the aliases without touching the raw scales. */ - --success-100: var(--yes-100); - --success-200: var(--yes-200); - --success-300: var(--yes-300); - --success-400: var(--yes-400); - --success-500: var(--yes-500); - --danger-100: var(--no-100); - --danger-200: var(--no-200); - --danger-300: var(--no-300); - --danger-400: var(--no-400); - --danger-500: var(--no-500); - --warning-100: var(--maybe-100); - --warning-200: var(--maybe-200); - --warning-300: var(--maybe-300); - --warning-400: var(--maybe-400); - --warning-500: var(--maybe-500); -} - -:root.theme-light { - color-scheme: light; -} - -:root.theme-dark { - color-scheme: dark; -} - -/* HTML ELEMENTS */ - -:root { - accent-color: var(--primary-500); - - --body-background-color: light-dark(var(--base-0), var(--base-950)); - --body-line-height: var(--leading-lg); - - --input-height: var(--md3); - --input-padding: var(--xs3); - --input-border-width: var(--border-sm); - --input-border-color: var(--ui-border-color); - --input-border-radius: var(--radius-md); - --input-border-color-invalid: light-dark( - var(--danger-500), - var(--danger-400) - ); - - /* Gap under a label that precedes its control */ - --label-spacing: var(--xs1); - - --fieldset-padding: var(--sm3); - --fieldset-border-width: var(--border-sm); - --fieldset-border-color: var(--ui-border-color); - --fieldset-border-radius: var(--radius-lg); - - /* meter: low/medium/high map to the even-less-good, suboptimum, and - optimum pseudo-elements */ - --meter-height: var(--sm1); - --meter-border-radius: var(--radius-md); - --meter-track-color: var(--primary-100); - --meter-low-color: var(--danger-400); - --meter-medium-color: var(--warning-400); - --meter-high-color: var(--success-400); - - --progress-height: var(--sm1); - --progress-color: var(--primary-500); - --progress-track-color: var(--primary-100); - --progress-border-radius: var(--radius-md); - - /* select's chevron, applied as a mask painted with the text color; - any url() works here, data URL or file */ - --select-icon-size: var(--sm3); - --select-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E"); - - --dialog-min-width: var(--tera1); - --dialog-max-width: var(--tera3); - --dialog-padding: var(--lg1) var(--md1); - --dialog-border-width: var(--border-sm); - --dialog-border-color: light-dark(var(--base-200), var(--base-800)); - --dialog-background-color: light-dark(var(--base-50), var(--base-900)); - --dialog-border-radius: var(--radius-lg); - --dialog-backdrop-color: var(--base-950); - --dialog-backdrop-opacity: var(--o-4); - - /* details: same surface as dialog by default, on purpose but - independently overridable. Spacing is the gap between an open - summary and its content. */ - --details-padding: var(--sm1); - --details-spacing: var(--xs3); - --details-border-width: var(--border-sm); - --details-border-color: light-dark(var(--base-200), var(--base-800)); - --details-background-color: light-dark(var(--base-50), var(--base-900)); - --details-border-radius: var(--radius-lg); - --details-icon-size: var(--sm3); - /* Marker icon, applied as a mask painted with the text color; any - url() works here, data URL or file */ - --details-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E"); - - --table-padding: var(--xs2) var(--sm1); - --table-border-width: var(--border-sm); - --table-border-color: light-dark(var(--base-100), var(--base-700)); - --table-border-radius: var(--radius-md); - --table-background-color: none; - /* Gap between the table and its caption */ - --table-caption-spacing: var(--xs3); - /* Gap between a figure's content and caption on either side */ - --figcaption-spacing: var(--xs2); - - /* Text */ - - --heading-font: var(--display); - --heading-weight: var(--black); - --heading-letter-spacing: normal; /* (e.g. -0.02em or var(--tracking-sm)) */ - - --heading-font-size-h1: clamp( - var(--display-md), - 1.269rem + 2.682vw, - var(--display-xl) - ); /* 2.074rem → 2.986rem */ - --heading-font-size-h2: clamp( - var(--display-sm), - 1.057rem + 2.235vw, - var(--display-lg) - ); /* 1.728rem → 2.488rem */ - --heading-font-size-h3: clamp( - var(--text-xl), - 0.881rem + 1.865vw, - var(--display-md) - ); /* 1.44rem → 2.074rem */ - --heading-font-size-h4: clamp( - var(--text-lg), - 0.734rem + 1.553vw, - var(--display-sm) - ); /* 1.2rem → 1.728rem */ - --heading-font-size-h5: clamp( - var(--text-lg), - 0.988rem + 0.706vw, - var(--text-xl) - ); /* 1.2rem → 1.44rem */ - --heading-font-size-h6: clamp( - var(--text-md), - 0.824rem + 0.588vw, - var(--text-lg) - ); /* 1rem → 1.2rem */ - - --heading-line-height: var(--leading-sm); - --heading-line-height-h1: var(--heading-line-height); - --heading-line-height-h2: var(--heading-line-height); - --heading-line-height-h3: var(--heading-line-height); - --heading-line-height-h4: var(--leading-md); - --heading-line-height-h5: var(--leading-md); - --heading-line-height-h6: var(--leading-md); - - /* Headings bottom margin */ - --heading-spacing-h1: 0.4em; - --heading-spacing-h2: 0.4em; - --heading-spacing-h3: 0.4em; - --heading-spacing-h4: 0.4em; - --heading-spacing-h5: 0.4em; - --heading-spacing-h6: 0.4em; - /* Any h1 before h2, h2 before h3, h3 before h4. */ - --heading-spacing-consecutive: 0.3em; - - --text-color: light-dark(var(--base-950), var(--base-200)); - --link-font-weight: var(--semi-bold); - --link-color: light-dark(var(--primary-600), var(--primary-400)); - --link-color-hover: var(--primary-500); - - --text-code-color: light-dark(var(--primary-600), var(--primary-400)); - --text-code-background-color: light-dark( - var(--primary-100), - var(--primary-900) - ); - /* when code inline styling doesn't apply (inside headings and pre) */ - --text-code-muted-color: light-dark(var(--base-500), var(--base-300)); - - --pre-border-radius: var(--radius-md); - /* matching the 0.9em of inline code */ - --pre-font-size: 0.9rem; - - --blockquote-padding-block: var(--sm1); - --blockquote-padding-inline: var(--md1) var(--sm3); - --blockquote-background-color: light-dark( - var(--primary-50), - var(--primary-900) - ); - --blockquote-border-radius: var(--radius-md); - --blockquote-accent-width: var(--xs2); - --blockquote-accent-color: linear-gradient( - var(--primary-800), - var(--primary-500) - ); - - /* .prose related stuff in GLOBAL */ - - /* Optional centered label on
, e.g. "***" or a dingbat */ - --hr-content: ""; - - /* ins: background stays light in both light/dark modes */ - --ins-color: var(--base-950); - --ins-background-color: var(--success-200); - - --marker-color: var(--highlight-500); - - --selection-color: light-dark(var(--base-950), var(--base-0)); - --selection-background-color: light-dark( - var(--primary-200), - var(--primary-700) - ); -} - -/* GLOBAL */ - -:root { - /* Mobile-first: tighter gutters on small screens, 24px from --md up */ - --grid-column-gap: var(--sm1); - --grid-row-gap: var(--sm1); - @media (--md) { - --grid-column-gap: var(--sm3); - --grid-row-gap: var(--sm3); - } - - --wrap-spacing: var(--sm1); - --wrap-md-spacing: var(--sm3); - --wrap-lg-spacing: 0; - /* Widths are measures: ch tracks the text size, so raw on purpose. */ - --wrap-width-sm: minmax(0, 55ch); - --wrap-width-md: minmax(0, 70ch); - --wrap-width-lg: minmax(0, 900px); - --wrap-width: var(--wrap-width-md); - - --layout-content-width: 70ch; - --layout-aside-width: 245px; - --layout-toc-width: 1fr; - - --prose-spacing: var(--sm1); -} - -/* COMPONENTS */ - -/* Badge */ - -:root { - --badge-font-size: var(--text-sm); - --badge-border-radius: var(--radius-md); - --badge-color: var(--base-0); - --badge-background-color: light-dark(var(--base-700), var(--base-600)); - - --badge-primary-color: var(--base-0); - --badge-primary-background-color: light-dark( - var(--primary-600), - var(--primary-500) - ); - --badge-success-color: light-dark(var(--success-500), var(--base-0)); - --badge-success-background-color: light-dark( - var(--success-100), - var(--success-500) - ); - --badge-danger-color: light-dark(var(--danger-500), var(--base-0)); - --badge-danger-background-color: light-dark( - var(--danger-100), - var(--danger-500) - ); - --badge-warning-color: light-dark(var(--warning-500), var(--base-950)); - --badge-warning-background-color: light-dark( - var(--warning-100), - var(--warning-500) - ); -} - -/* Button */ -/* (Button defaults and primary button colors) */ - -:root { - /* Optical minimums, deliberately off the spacing scale */ - --bt-min-width: 101px; - --bt-min-width-md: 123px; - --bt-min-width-lg: 133px; - - --bt-font-size: var(--text-sm); - --bt-font-size-lg: var(--text-md); - --bt-font-weight: var(--semi-bold); - - --bt-color: var(--text-color); - --bt-color-hover: light-dark(var(--text-color), var(--base-0)); - - --bt-background-color: light-dark(var(--base-0), var(--base-800)); - --bt-background-color-hover: light-dark(var(--base-50), var(--base-900)); - - --bt-border-color: var(--ui-border-color); - --bt-border-width: var(--border-sm); - --bt-border-radius: var(--radius-lg); - --bt-border-radius-lg: var(--radius-xl); - - --bt-outline-color-hover: light-dark(var(--base-950), var(--base-0)); - --bt-outline-background-color-hover: light-dark( - rgb(0 0 0 / 0.1), - rgb(255 255 255 / 0.1) - ); - --bt-outline-border-color: light-dark(var(--base-950), var(--base-0)); - --bt-outline-border-color-hover: light-dark(var(--base-950), var(--base-0)); - - --bt-primary-color: var(--base-0); - --bt-primary-color-hover: var(--base-0); - --bt-primary-background-color: var(--primary-600); - --bt-primary-background-color-hover: var(--primary-500); - --bt-primary-border-color: var(--primary-600); - --bt-primary-border-color-hover: var(--primary-600); -} - -/* Avatar */ - -:root { - --avatar-color: var(--base-0); - --avatar-background-color: var(--base-400); - --avatar-border-color: light-dark(var(--base-0), var(--base-500)); - --avatar-border-width: var(--border-sm); - --avatar-radius: var(--radius-round); - --avatar-status-dot-color-offline: var(--base-300); - --avatar-status-dot-color-online: var(--yes-400); -} - -/* Banner */ - -:root { - --banner-color: var(--base-0); - --banner-background-color: light-dark(var(--primary-600), var(--primary-800)); -} - -/* Breadcrumbs */ - -:root { - --breadcrumbs-separator: "/"; - --breadcrumbs-separator-color: light-dark(var(--base-300), var(--base-600)); - --breadcrumbs-color: light-dark(var(--base-500), var(--base-400)); - --breadcrumbs-color-current: var(--text-color); -} - -/* Card */ - -:root { - --card-spacing: var(--sm3); - --card-color: var(--text-color); - --card-secondary-text-color: light-dark(var(--base-400), var(--base-500)); - --card-bg-color: light-dark(var(--base-100), var(--base-900)); - --card-border-radius: var(--radius-lg); - --card-border-color: var(--ui-border-color); - --card-border-width: var(--border-sm); - --card-shadow: var(--shadow-md); - --card-shadow-hover: var(--shadow-xl); - --card-loading-bg: light-dark(var(--base-200), var(--base-900)); - /* Default media aspect ratio; the Card component pins it inline only - when its aspectRatio prop is passed */ - --card-aspect-ratio: var(--ar-golden); -} - -/* Toggle */ - -:root { - /* Drawn-control geometry, deliberately off the scales */ - --toggle-width: 50px; - --toggle-height: 28px; - --toggle-border-width: 2px; - --toggle-track-color: light-dark(var(--base-300), var(--base-700)); - --toggle-track-color-checked: var(--yes-400); - --toggle-thumb-color: var(--body-background-color); -} - -/* FAQ */ - -:root { - --faq-spacing: var(--xs3); -} - -/* Field */ - -:root { - --field-spacing: var(--xs1); - --field-hint-color: light-dark(var(--base-400), var(--base-500)); - --field-error-color: light-dark(var(--danger-500), var(--danger-300)); - /*Field's hint/error position. Use `static` to reflow under, use `absolute` - (and leave enough space below) if you don't want any shift on errors */ - --field-message-position: static; -} - -/* FeatureItem */ - -:root { - --featureItem-icon-box-size: var(--lg3); - --featureItem-icon-size: var(--sm3); - --featureItem-icon-color: light-dark(var(--primary-600), var(--primary-300)); - --featureItem-icon-background-color: light-dark( - var(--primary-100), - var(--primary-900) - ); - --featureItem-icon-border-radius: var(--radius-lg); -} - -/* Footer */ - -:root { - --footer-background-color: light-dark(var(--primary-950), var(--base-950)); - --footer-text-color: light-dark(var(--base-0), var(--base-200)); - --footer-border-width: var(--border-md); - --footer-border-color: light-dark(transparent, var(--base-700)); - --footer-link-color: light-dark(var(--base-0), var(--base-200)); - --footer-link-color-hover: light-dark(var(--primary-200), var(--base-0)); -} - -/* Header */ - -:root { - --header-height: var(--xl1); - --header-padding: var(--sm1); - @media (--md) { - --header-height: var(--xl2); - --header-padding: var(--sm3); - } - --header-background-color: light-dark(var(--base-0), var(--base-950)); - - /* The mobile menu is an always-dark by design */ - --header-menu-background-color: var(--base-950); - --header-menu-color: var(--base-0); - --header-menu-color-current: var(--primary-400); - --header-menu-secondary-color: var(--base-300); - --header-menu-border-color: var(--base-500); -} - -/* Hero */ - -:root { - --hero-radius: var(--radius-xl); - --hero-content-padding: var(--md3); - --hero-actions-spacing: var(--lg3); - --hero-pagination-dot: var(--sm1); - --hero-pagination-dot-color: var(--base-0); - --hero-pagination-dot-active-color: var(--primary-600); - --hero-pagination-opacity: var(--o-4); -} - -/* Pagination */ - -:root { - --pagination-size: var(--md3); - --pagination-border-radius: var(--radius-md); - --pagination-color: var(--text-color); - --pagination-color-current: var(--base-0); - --pagination-background-color-current: light-dark( - var(--primary-600), - var(--primary-500) - ); - --pagination-background-color-hover: light-dark( - var(--base-100), - var(--base-800) - ); -} - -/* PrevNext */ - -:root { - --prevNext-border-color: var(--ui-border-color); - --prevNext-border-radius: var(--radius-lg); - --prevNext-border-color-hover: var(--link-color); - --prevNext-label-color: light-dark(var(--base-400), var(--base-500)); -} - -/* Notice */ - -:root { - --notice-spacing: var(--sm1); - --notice-text-color: light-dark(var(--base-950), var(--base-0)); - --notice-background-color: light-dark(var(--base-50), var(--base-800)); - --notice-border-color: light-dark(var(--base-200), var(--base-500)); - --notice-border-width: var(--border-sm); - --notice-border-radius: var(--radius-lg); -} - -/* Pricing */ - -:root { - --pricingCard-highlight-border-color: light-dark( - var(--primary-600), - var(--primary-400) - ); - --pricingCard-check-color: light-dark(var(--success-500), var(--success-400)); -} - -/* Read Progress Bar */ - -:root { - --readProgressBar-height: var(--xs1); - --readProgressBar-color: linear-gradient( - 90deg, - var(--primary-600) 0%, - var(--primary-400) 100% - ); -} - -/* Section */ - -:root { - --section-spacing: var(--xl3); - --section-header-spacing: var(--lg3); - --section-eyebrow-color: light-dark(var(--primary-600), var(--primary-400)); - --section-lede-color: light-dark(var(--base-500), var(--base-400)); - --section-filled-background-color: light-dark( - var(--base-50), - var(--base-900) - ); - --section-primary-background-color: light-dark( - var(--primary-600), - var(--primary-900) - ); - --section-primary-text-color: var(--base-0); - --section-primary-link-color: var(--primary-100); - --section-primary-link-color-hover: var(--base-0); - --section-primary-eyebrow-color: var(--primary-200); - --section-primary-lede-color: var(--primary-100); -} - -/* Testimonial */ - -:root { - --testimonial-role-color: light-dark(var(--base-400), var(--base-500)); -} - -/* Tags */ - -:root { - --tags-padding: var(--xs2); - --tags-font-size: var(--text-sm); - --tags-color: light-dark(var(--base-500), var(--base-400)); - --tags-background-color: light-dark(var(--base-100), var(--base-800)); - --tags-background-color-hover: light-dark(var(--base-200), var(--base-950)); - --tags-radius: var(--radius-md); -} - -/* Tiles has no tokens here: its column count is set by container queries in - component.tiles.css since custom properties don't work inside @container. -*/ - -/* TOC */ - -:root { - --toc-color: var(--link-color); - --toc-color-hover: var(--link-color-hover); - --toc-spacing: var(--xs1); - --toc-indentation: var(--xs3); - --toc-icon-size: var(--sm1); -} diff --git a/src/styles/framework/theme.default.css b/src/styles/framework/theme.default.css index 9f6ca450..62bbbf94 100644 --- a/src/styles/framework/theme.default.css +++ b/src/styles/framework/theme.default.css @@ -1,44 +1,23 @@ -/* DEFAULT THEME (template) */ +/* DEFAULT THEME (entry) */ /* - A theme is a file of token overrides, plus optional rules for what - tokens can't express. Swap which theme file your entry point imports and - the whole site restyles; everything a theme doesn't mention falls back to - the framework defaults (settings.tokens.css + settings.ui.css). - - Themes are self-layered: the @layer theme block below slots this file - into the layer order declared in mcss.css no matter how it's loaded - (plain @import, link tag, bundler). Import exactly one theme from your - own entry point, after mcss.css: + The framework's design values: the scales (theme.default.tokens.css) and + the defaults every element and component consumes (theme.default.ui.css). + Activate it from your own entry point, right after mcss.css: @import url(./framework/mcss.css); - @import url(./framework/theme.wireframe.css); + @import url(./framework/theme.default.css); - mCSS imports no theme by default: an empty theme layer IS the default - look. Copy this file to start your own theme. + mcss.css imports no theme itself; without this file every token is unset + and the page renders half-styled. - Guidelines: - - Prefer token overrides. Override raw tokens (--base-*, --text) to shift - the whole palette or type, interface tokens (--ui-border-color, - --heading-font) for cross-cutting changes, or component tokens - (--bt-border-radius) for surgical ones. - - Rules are for what tokens can't express (pseudo-elements, - nth-child rhythm, text-decoration). Theme files are the one place - allowed to style component classes from outside; they still lose - to your unlayered CSS and to helpers, by design. - - No !important: that privilege is reserved for the helpers layer. + Never edit the default theme. Your palette, type, and overrides go in a + theme of your own, imported after this one (copy theme.starter.css). The + parts here land in the `theme.defaults` layer and your theme lands in + `theme.overrides`, so yours wins no matter the import order. A full + replacement skin works the same way: theme.wireframe.css composes this + entry and overrides on top. */ -@layer theme { - :root { - /* A new palette usually gets you 80% of the way: */ - /* --base-0: #fff; */ - /* --primary-500: rebeccapurple; */ - /* Then reach for interface and component tokens as needed: */ - /* --heading-font: Georgia, serif; */ - /* --card-border-radius: 0; */ - /* A theme may also add scales the framework doesn't ship, */ - /* e.g. a second accent, and use them in its own style rules: */ - /* --secondary-500: teal; */ - } -} +@import url(./theme.default.tokens.css); +@import url(./theme.default.ui.css); diff --git a/src/styles/framework/theme.default.tokens.css b/src/styles/framework/theme.default.tokens.css new file mode 100644 index 00000000..2d5d1554 --- /dev/null +++ b/src/styles/framework/theme.default.tokens.css @@ -0,0 +1,262 @@ +/* DEFAULT THEME: TOKENS */ + +/* + The scales: every token here is named for what it IS (a step on a scale), + never for what it's for. Part of the default theme (see theme.default.css); + don't edit it, override from your own theme (see theme.starter.css). + + Can't use var() inside media queries, so breakpoints are hard coded in + settings.media-queries.css: + xxs: 240px xs: 360px sm: 480px md: 768px lg: 1024px xl: 1440px xxl: 1920px +*/ + +@layer theme.defaults { + /* + +• Dimensions (Margin, Padding, Width, Height) +• Aspect Ratios + +• Font Families +• Font Size +• Font Weight + +• Letter Spacing +• Line Height + +• Colors + +• Box shadows +• Border radius +• Border width +• Opacity +*/ + + :root { + /* GLOBALS */ + + /* DIMENSIONS */ + + /* Sizes */ + + --xs1: 4px; + --xs2: 8px; + --xs3: 12px; + + --sm1: 16px; + --sm2: 20px; + --sm3: 24px; + + --md1: 28px; + --md2: 32px; + --md3: 36px; + + --lg1: 40px; + --lg2: 44px; + --lg3: 48px; + + --xl1: 56px; + --xl2: 64px; + --xl3: 80px; + + --xxl1: 96px; + --xxl2: 112px; + --xxl3: 128px; + + --mega1: 160px; + --mega2: 192px; + --mega3: 224px; + + --giga1: 256px; + --giga2: 288px; + --giga3: 320px; + + --tera1: 384px; + --tera2: 480px; + --tera3: 520px; + + /* Aspect Ratios */ + --ar-square: 1; + --ar-landscape: 4/3; + --ar-portrait: 3/4; + --ar-widescreen: 16/9; + --ar-golden: 1.618/1; + + /* TYPOGRAPHY */ + /* See also elements.text & help.text */ + + /* Font Families */ + /* Local font stacks - More options @ https://modernfontstacks.com */ + --display: + Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, ui-sans-serif, + sans-serif; + --text: ui-sans-serif, system-ui, sans-serif; + --mono: + Dank Mono, Inconsolata, Fira Mono, SF Mono, Monaco, Droid Sans Mono, + Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, + ui-monospace, monospace; + + /* Font Sizes */ + /* Create your own sizes @ https://typescale.com */ + --text-xs: 0.694rem; + --text-sm: 0.833rem; + --text-md: 1rem; + --text-lg: 1.2rem; + --text-xl: 1.44rem; + --display-sm: 1.728rem; + --display-md: 2.074rem; + --display-lg: 2.488rem; + --display-xl: 2.986rem; /* h1 */ + --display-mega: 3.583rem; + --display-giga: 4.299rem; + + /* Heading font sizes are decisions, not scale steps: they map each + heading level onto this scale. See --heading-font-size-* in + theme.default.ui.css. */ + + /* Font Weights */ + --extra-light: 200; + --light: 300; + --book: 400; + --semi-bold: 600; + --bold: 700; + --black: 900; + + /* Letter Spacing */ + --tracking-sm: -0.05em; + --tracking-md: 0.025em; + --tracking-lg: 0.05em; + --tracking-xl: 0.075em; + --tracking-xxl: 0.15em; + + /* Line Height */ + --leading-xs: 1; + --leading-sm: 1.15; + --leading-md: 1.375; + --leading-lg: 1.5; + --leading-xl: 1.75; + --leading-xxl: 2; + + /* COLORS */ + /* Make your own palettes programmatically: https://www.tints.dev */ + + /* Base */ + + --base-0: #fff; + --base-50: #f6f7f9; + --base-100: #edeef1; + --base-200: #d6dbe1; + --base-300: #b2bbc7; + --base-400: #8897a8; + --base-500: #697a8e; + --base-600: #546375; + --base-700: #4a5666; + --base-800: #3c4550; + --base-900: #353c45; + --base-950: #23282e; + + /* Primary */ + + --primary-50: #f0f9ff; + --primary-100: #e0f2fe; + --primary-200: #bae6fd; + --primary-300: #7dd3fc; + --primary-400: #38bdf8; + --primary-500: #0ea5e9; + --primary-600: #0284c7; + --primary-700: #0369a1; + --primary-800: #075985; + --primary-900: #0c4a6e; + --primary-950: #082f49; + + /* Secondary and/or Highlight goes here */ + + /* Feedback */ + + --yes-100: #d5f6e8; + --yes-200: #afebd4; + --yes-300: #7adbbd; + --yes-400: #46c4a0; + --yes-500: #13886d; + + --no-100: #ffe4e6; + --no-200: #fecdd3; + --no-300: #fda4af; + --no-400: #fb7185; + --no-500: #e11d48; + + --maybe-100: #fff7d6; + --maybe-200: #fff0b3; + --maybe-300: #ffd64a; + --maybe-400: #ffc220; + --maybe-500: #f9a007; + + /* Highlight (text marker) */ + + --highlight-500: #ffee00; + + /* GRADIENTS */ + + --gradient-primary: linear-gradient( + 90deg, + var(--primary-950) 0%, + var(--primary-400) 100% + ); + + /* BORDERS */ + + --border-sm: 1px; + --border-md: 2px; + --border-lg: 4px; + --border-xl: 8px; + --border-xxl: 12px; + + --radius-sm: 3px; + --radius-md: 5px; + --radius-lg: 8px; + --radius-xl: 12px; + --radius-xxl: 16px; + --radius-round: 1e5px; + + /* DROP SHADOWS */ + + --shadow-sm: + 0 1px 3px 0 var(--ui-shadow-color), 0 1px 2px -1px var(--ui-shadow-color); + --shadow-md: + 0 4px 6px -1px var(--ui-shadow-color), + 0 2px 4px -2px var(--ui-shadow-color); + --shadow-lg: + 0 8px 13px -3px var(--ui-shadow-color), + 0 4px 6px -4px var(--ui-shadow-color); + --shadow-xl: + 0 20px 20px -5px var(--ui-shadow-color), + 0 8px 10px -6px var(--ui-shadow-color); + --shadow-xxl: + 0px 11px 8px -6px var(--ui-shadow-color), + 0 10px 15px 2px var(--ui-shadow-color); + + /* OPACITY */ + + --o-0: 0; /* overkill for consistency */ + --o-1: 0.2; + --o-2: 0.4; + --o-3: 0.6; + --o-4: 0.8; + --o-5: 1; + + /* Z-INDEX */ + + --z-bottom: -1000000000; + --z-0: 0; /* overkill for consistency */ + --z-1: 10; + --z-2: 20; + --z-3: 30; + --z-4: 40; + --z-5: 50; + --z-top: 1000000000; + + /* TRANSITIONS */ + + --transition: 220ms ease-in-out; + --transition-fast: 100ms ease-in-out; + } +} diff --git a/src/styles/framework/theme.default.ui.css b/src/styles/framework/theme.default.ui.css new file mode 100644 index 00000000..5395ca5e --- /dev/null +++ b/src/styles/framework/theme.default.ui.css @@ -0,0 +1,604 @@ +/* DEFAULT THEME: UI */ + +/* + The decisions. Every token here is named for what it's FOR (an + element, a component, or a shared meaning) and answers "what does this + thing use by default". Tokens named for what they ARE (--sm1, --base-500, + --bold) are scale tokens and live in theme.default.tokens.css. That's the + whole split: a name that mentions a UI thing belongs here; a name that + labels a step on a scale belongs there. + + Values, in order of preference: + 1. Another ui token, when the meaning is shared + (--input-border-color: var(--ui-border-color)). + 2. A scale token, when the value should follow the system scales + (--fieldset-padding: var(--sm3)). + 3. A raw value, only where following the scales would be wrong: + content (separator strings, icon URLs), geometry tuned to one + control (--toggle-width), or element-relative measures that track + the element's own type instead of the page (em heading spacing). + The test: "if a theme retuned the scales, should this follow?" + + Part of the default theme (see theme.default.css); don't edit it, + override from your own theme (see theme.starter.css). +*/ + +@layer theme.defaults { + :root { + /* Color scheme (light/dark), toggled by the .theme-light / .theme-dark + classes below. Unrelated to theme files, which are full themes. */ + color-scheme: light dark; + + --ui-border-color: light-dark(var(--base-200), var(--base-500)); + /* Also consumed by the --shadow-* scale in theme.default.tokens.css: + the one reference between the files that runs upward, so shadows can + switch with the color scheme. Raw alpha colors: the palettes have no + alpha steps. */ + --ui-shadow-color: light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.6)); + + /* Keyboard focus ring (consumed by :focus-visible in global.a11y.css). + Raw 2px on purpose: an accessibility affordance that shouldn't move + when a theme retunes the decorative border scale. */ + --focus-ring-color: light-dark(var(--primary-500), var(--primary-400)); + --focus-ring-width: 2px; + --focus-ring-offset: 2px; + + /* Semantic feedback aliases over the raw feedback palettes. + Prefer these in components and themes; a theme can restyle feedback by + overriding the aliases without touching the raw scales. */ + --success-100: var(--yes-100); + --success-200: var(--yes-200); + --success-300: var(--yes-300); + --success-400: var(--yes-400); + --success-500: var(--yes-500); + --danger-100: var(--no-100); + --danger-200: var(--no-200); + --danger-300: var(--no-300); + --danger-400: var(--no-400); + --danger-500: var(--no-500); + --warning-100: var(--maybe-100); + --warning-200: var(--maybe-200); + --warning-300: var(--maybe-300); + --warning-400: var(--maybe-400); + --warning-500: var(--maybe-500); + } + + :root.theme-light { + color-scheme: light; + } + + :root.theme-dark { + color-scheme: dark; + } + + /* HTML ELEMENTS */ + + :root { + accent-color: var(--primary-500); + + --body-background-color: light-dark(var(--base-0), var(--base-950)); + --body-line-height: var(--leading-lg); + + --input-height: var(--md3); + --input-padding: var(--xs3); + --input-border-width: var(--border-sm); + --input-border-color: var(--ui-border-color); + --input-border-radius: var(--radius-md); + --input-border-color-invalid: light-dark( + var(--danger-500), + var(--danger-400) + ); + + /* Gap under a label that precedes its control */ + --label-spacing: var(--xs1); + + --fieldset-padding: var(--sm3); + --fieldset-border-width: var(--border-sm); + --fieldset-border-color: var(--ui-border-color); + --fieldset-border-radius: var(--radius-lg); + + /* meter: low/medium/high map to the even-less-good, suboptimum, and + optimum pseudo-elements */ + --meter-height: var(--sm1); + --meter-border-radius: var(--radius-md); + --meter-track-color: var(--primary-100); + --meter-low-color: var(--danger-400); + --meter-medium-color: var(--warning-400); + --meter-high-color: var(--success-400); + + --progress-height: var(--sm1); + --progress-color: var(--primary-500); + --progress-track-color: var(--primary-100); + --progress-border-radius: var(--radius-md); + + /* select's chevron, applied as a mask painted with the text color; + any url() works here, data URL or file */ + --select-icon-size: var(--sm3); + --select-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E"); + + --dialog-min-width: var(--tera1); + --dialog-max-width: var(--tera3); + --dialog-padding: var(--lg1) var(--md1); + --dialog-border-width: var(--border-sm); + --dialog-border-color: light-dark(var(--base-200), var(--base-800)); + --dialog-background-color: light-dark(var(--base-50), var(--base-900)); + --dialog-border-radius: var(--radius-lg); + --dialog-backdrop-color: var(--base-950); + --dialog-backdrop-opacity: var(--o-4); + + /* details: same surface as dialog by default, on purpose but + independently overridable. Spacing is the gap between an open + summary and its content. */ + --details-padding: var(--sm1); + --details-spacing: var(--xs3); + --details-border-width: var(--border-sm); + --details-border-color: light-dark(var(--base-200), var(--base-800)); + --details-background-color: light-dark(var(--base-50), var(--base-900)); + --details-border-radius: var(--radius-lg); + --details-icon-size: var(--sm3); + /* Marker icon, applied as a mask painted with the text color; any + url() works here, data URL or file */ + --details-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E"); + + --table-padding: var(--xs2) var(--sm1); + --table-border-width: var(--border-sm); + --table-border-color: light-dark(var(--base-100), var(--base-700)); + --table-border-radius: var(--radius-md); + --table-background-color: none; + /* Gap between the table and its caption */ + --table-caption-spacing: var(--xs3); + /* Gap between a figure's content and caption on either side */ + --figcaption-spacing: var(--xs2); + + /* Text */ + + --heading-font: var(--display); + --heading-weight: var(--black); + --heading-letter-spacing: normal; /* (e.g. -0.02em or var(--tracking-sm)) */ + + --heading-font-size-h1: clamp( + var(--display-md), + 1.269rem + 2.682vw, + var(--display-xl) + ); /* 2.074rem → 2.986rem */ + --heading-font-size-h2: clamp( + var(--display-sm), + 1.057rem + 2.235vw, + var(--display-lg) + ); /* 1.728rem → 2.488rem */ + --heading-font-size-h3: clamp( + var(--text-xl), + 0.881rem + 1.865vw, + var(--display-md) + ); /* 1.44rem → 2.074rem */ + --heading-font-size-h4: clamp( + var(--text-lg), + 0.734rem + 1.553vw, + var(--display-sm) + ); /* 1.2rem → 1.728rem */ + --heading-font-size-h5: clamp( + var(--text-lg), + 0.988rem + 0.706vw, + var(--text-xl) + ); /* 1.2rem → 1.44rem */ + --heading-font-size-h6: clamp( + var(--text-md), + 0.824rem + 0.588vw, + var(--text-lg) + ); /* 1rem → 1.2rem */ + + --heading-line-height: var(--leading-sm); + --heading-line-height-h1: var(--heading-line-height); + --heading-line-height-h2: var(--heading-line-height); + --heading-line-height-h3: var(--heading-line-height); + --heading-line-height-h4: var(--leading-md); + --heading-line-height-h5: var(--leading-md); + --heading-line-height-h6: var(--leading-md); + + /* Headings bottom margin */ + --heading-spacing-h1: 0.4em; + --heading-spacing-h2: 0.4em; + --heading-spacing-h3: 0.4em; + --heading-spacing-h4: 0.4em; + --heading-spacing-h5: 0.4em; + --heading-spacing-h6: 0.4em; + /* Any h1 before h2, h2 before h3, h3 before h4. */ + --heading-spacing-consecutive: 0.3em; + + --text-color: light-dark(var(--base-950), var(--base-200)); + --link-font-weight: var(--semi-bold); + --link-color: light-dark(var(--primary-600), var(--primary-400)); + --link-color-hover: var(--primary-500); + + --text-code-color: light-dark(var(--primary-600), var(--primary-400)); + --text-code-background-color: light-dark( + var(--primary-100), + var(--primary-900) + ); + /* when code inline styling doesn't apply (inside headings and pre) */ + --text-code-muted-color: light-dark(var(--base-500), var(--base-300)); + + --pre-border-radius: var(--radius-md); + /* matching the 0.9em of inline code */ + --pre-font-size: 0.9rem; + + --blockquote-padding-block: var(--sm1); + --blockquote-padding-inline: var(--md1) var(--sm3); + --blockquote-background-color: light-dark( + var(--primary-50), + var(--primary-900) + ); + --blockquote-border-radius: var(--radius-md); + --blockquote-accent-width: var(--xs2); + --blockquote-accent-color: linear-gradient( + var(--primary-800), + var(--primary-500) + ); + + /* .prose related stuff in GLOBAL */ + + /* Optional centered label on
, e.g. "***" or a dingbat */ + --hr-content: ""; + + /* ins: background stays light in both light/dark modes */ + --ins-color: var(--base-950); + --ins-background-color: var(--success-200); + + --marker-color: var(--highlight-500); + + --selection-color: light-dark(var(--base-950), var(--base-0)); + --selection-background-color: light-dark( + var(--primary-200), + var(--primary-700) + ); + } + + /* GLOBAL */ + + :root { + /* Mobile-first: tighter gutters on small screens, 24px from --md up */ + --grid-column-gap: var(--sm1); + --grid-row-gap: var(--sm1); + @media (--md) { + --grid-column-gap: var(--sm3); + --grid-row-gap: var(--sm3); + } + + --wrap-spacing: var(--sm1); + --wrap-md-spacing: var(--sm3); + --wrap-lg-spacing: 0; + /* Widths are measures: ch tracks the text size, so raw on purpose. */ + --wrap-width-sm: minmax(0, 55ch); + --wrap-width-md: minmax(0, 70ch); + --wrap-width-lg: minmax(0, 900px); + --wrap-width: var(--wrap-width-md); + + --layout-content-width: 70ch; + --layout-aside-width: 245px; + --layout-toc-width: 1fr; + + --prose-spacing: var(--sm1); + } + + /* COMPONENTS */ + + /* Badge */ + + :root { + --badge-font-size: var(--text-sm); + --badge-border-radius: var(--radius-md); + --badge-color: var(--base-0); + --badge-background-color: light-dark(var(--base-700), var(--base-600)); + + --badge-primary-color: var(--base-0); + --badge-primary-background-color: light-dark( + var(--primary-600), + var(--primary-500) + ); + --badge-success-color: light-dark(var(--success-500), var(--base-0)); + --badge-success-background-color: light-dark( + var(--success-100), + var(--success-500) + ); + --badge-danger-color: light-dark(var(--danger-500), var(--base-0)); + --badge-danger-background-color: light-dark( + var(--danger-100), + var(--danger-500) + ); + --badge-warning-color: light-dark(var(--warning-500), var(--base-950)); + --badge-warning-background-color: light-dark( + var(--warning-100), + var(--warning-500) + ); + } + + /* Button */ + /* (Button defaults and primary button colors) */ + + :root { + /* Optical minimums, deliberately off the spacing scale */ + --bt-min-width: 101px; + --bt-min-width-md: 123px; + --bt-min-width-lg: 133px; + + --bt-font-size: var(--text-sm); + --bt-font-size-lg: var(--text-md); + --bt-font-weight: var(--semi-bold); + + --bt-color: var(--text-color); + --bt-color-hover: light-dark(var(--text-color), var(--base-0)); + + --bt-background-color: light-dark(var(--base-0), var(--base-800)); + --bt-background-color-hover: light-dark(var(--base-50), var(--base-900)); + + --bt-border-color: var(--ui-border-color); + --bt-border-width: var(--border-sm); + --bt-border-radius: var(--radius-lg); + --bt-border-radius-lg: var(--radius-xl); + + --bt-outline-color-hover: light-dark(var(--base-950), var(--base-0)); + --bt-outline-background-color-hover: light-dark( + rgb(0 0 0 / 0.1), + rgb(255 255 255 / 0.1) + ); + --bt-outline-border-color: light-dark(var(--base-950), var(--base-0)); + --bt-outline-border-color-hover: light-dark(var(--base-950), var(--base-0)); + + --bt-primary-color: var(--base-0); + --bt-primary-color-hover: var(--base-0); + --bt-primary-background-color: var(--primary-600); + --bt-primary-background-color-hover: var(--primary-500); + --bt-primary-border-color: var(--primary-600); + --bt-primary-border-color-hover: var(--primary-600); + } + + /* Avatar */ + + :root { + --avatar-color: var(--base-0); + --avatar-background-color: var(--base-400); + --avatar-border-color: light-dark(var(--base-0), var(--base-500)); + --avatar-border-width: var(--border-sm); + --avatar-radius: var(--radius-round); + --avatar-status-dot-color-offline: var(--base-300); + --avatar-status-dot-color-online: var(--yes-400); + } + + /* Banner */ + + :root { + --banner-color: var(--base-0); + --banner-background-color: light-dark( + var(--primary-600), + var(--primary-800) + ); + } + + /* Breadcrumbs */ + + :root { + --breadcrumbs-separator: "/"; + --breadcrumbs-separator-color: light-dark(var(--base-300), var(--base-600)); + --breadcrumbs-color: light-dark(var(--base-500), var(--base-400)); + --breadcrumbs-color-current: var(--text-color); + } + + /* Card */ + + :root { + --card-spacing: var(--sm3); + --card-color: var(--text-color); + --card-secondary-text-color: light-dark(var(--base-400), var(--base-500)); + --card-bg-color: light-dark(var(--base-100), var(--base-900)); + --card-border-radius: var(--radius-lg); + --card-border-color: var(--ui-border-color); + --card-border-width: var(--border-sm); + --card-shadow: var(--shadow-md); + --card-shadow-hover: var(--shadow-xl); + --card-loading-bg: light-dark(var(--base-200), var(--base-900)); + /* Default media aspect ratio; the Card component pins it inline only + when its aspectRatio prop is passed */ + --card-aspect-ratio: var(--ar-golden); + } + + /* Toggle */ + + :root { + /* Drawn-control geometry, deliberately off the scales */ + --toggle-width: 50px; + --toggle-height: 28px; + --toggle-border-width: 2px; + --toggle-track-color: light-dark(var(--base-300), var(--base-700)); + --toggle-track-color-checked: var(--yes-400); + --toggle-thumb-color: var(--body-background-color); + } + + /* FAQ */ + + :root { + --faq-spacing: var(--xs3); + } + + /* Field */ + + :root { + --field-spacing: var(--xs1); + --field-hint-color: light-dark(var(--base-400), var(--base-500)); + --field-error-color: light-dark(var(--danger-500), var(--danger-300)); + /*Field's hint/error position. Use `static` to reflow under, use `absolute` + (and leave enough space below) if you don't want any shift on errors */ + --field-message-position: static; + } + + /* FeatureItem */ + + :root { + --featureItem-icon-box-size: var(--lg3); + --featureItem-icon-size: var(--sm3); + --featureItem-icon-color: light-dark( + var(--primary-600), + var(--primary-300) + ); + --featureItem-icon-background-color: light-dark( + var(--primary-100), + var(--primary-900) + ); + --featureItem-icon-border-radius: var(--radius-lg); + } + + /* Footer */ + + :root { + --footer-background-color: light-dark(var(--primary-950), var(--base-950)); + --footer-text-color: light-dark(var(--base-0), var(--base-200)); + --footer-border-width: var(--border-md); + --footer-border-color: light-dark(transparent, var(--base-700)); + --footer-link-color: light-dark(var(--base-0), var(--base-200)); + --footer-link-color-hover: light-dark(var(--primary-200), var(--base-0)); + } + + /* Header */ + + :root { + --header-height: var(--xl1); + --header-padding: var(--sm1); + @media (--md) { + --header-height: var(--xl2); + --header-padding: var(--sm3); + } + --header-background-color: light-dark(var(--base-0), var(--base-950)); + + /* The mobile menu is an always-dark by design */ + --header-menu-background-color: var(--base-950); + --header-menu-color: var(--base-0); + --header-menu-color-current: var(--primary-400); + --header-menu-secondary-color: var(--base-300); + --header-menu-border-color: var(--base-500); + } + + /* Hero */ + + :root { + --hero-radius: var(--radius-xl); + --hero-content-padding: var(--md3); + --hero-actions-spacing: var(--lg3); + --hero-pagination-dot: var(--sm1); + --hero-pagination-dot-color: var(--base-0); + --hero-pagination-dot-active-color: var(--primary-600); + --hero-pagination-opacity: var(--o-4); + } + + /* Pagination */ + + :root { + --pagination-size: var(--md3); + --pagination-border-radius: var(--radius-md); + --pagination-color: var(--text-color); + --pagination-color-current: var(--base-0); + --pagination-background-color-current: light-dark( + var(--primary-600), + var(--primary-500) + ); + --pagination-background-color-hover: light-dark( + var(--base-100), + var(--base-800) + ); + } + + /* PrevNext */ + + :root { + --prevNext-border-color: var(--ui-border-color); + --prevNext-border-radius: var(--radius-lg); + --prevNext-border-color-hover: var(--link-color); + --prevNext-label-color: light-dark(var(--base-400), var(--base-500)); + } + + /* Notice */ + + :root { + --notice-spacing: var(--sm1); + --notice-text-color: light-dark(var(--base-950), var(--base-0)); + --notice-background-color: light-dark(var(--base-50), var(--base-800)); + --notice-border-color: light-dark(var(--base-200), var(--base-500)); + --notice-border-width: var(--border-sm); + --notice-border-radius: var(--radius-lg); + } + + /* Pricing */ + + :root { + --pricingCard-highlight-border-color: light-dark( + var(--primary-600), + var(--primary-400) + ); + --pricingCard-check-color: light-dark( + var(--success-500), + var(--success-400) + ); + } + + /* Read Progress Bar */ + + :root { + --readProgressBar-height: var(--xs1); + --readProgressBar-color: linear-gradient( + 90deg, + var(--primary-600) 0%, + var(--primary-400) 100% + ); + } + + /* Section */ + + :root { + --section-spacing: var(--xl3); + --section-header-spacing: var(--lg3); + --section-eyebrow-color: light-dark(var(--primary-600), var(--primary-400)); + --section-lede-color: light-dark(var(--base-500), var(--base-400)); + --section-filled-background-color: light-dark( + var(--base-50), + var(--base-900) + ); + --section-primary-background-color: light-dark( + var(--primary-600), + var(--primary-900) + ); + --section-primary-text-color: var(--base-0); + --section-primary-link-color: var(--primary-100); + --section-primary-link-color-hover: var(--base-0); + --section-primary-eyebrow-color: var(--primary-200); + --section-primary-lede-color: var(--primary-100); + } + + /* Testimonial */ + + :root { + --testimonial-role-color: light-dark(var(--base-400), var(--base-500)); + } + + /* Tags */ + + :root { + --tags-padding: var(--xs2); + --tags-font-size: var(--text-sm); + --tags-color: light-dark(var(--base-500), var(--base-400)); + --tags-background-color: light-dark(var(--base-100), var(--base-800)); + --tags-background-color-hover: light-dark(var(--base-200), var(--base-950)); + --tags-radius: var(--radius-md); + } + + /* Tiles has no tokens here: its column count is set by container queries in + component.tiles.css since custom properties don't work inside @container. +*/ + + /* TOC */ + + :root { + --toc-color: var(--link-color); + --toc-color-hover: var(--link-color-hover); + --toc-spacing: var(--xs1); + --toc-indentation: var(--xs3); + --toc-icon-size: var(--sm1); + } +} From 8eb7fce33e333d9064ab266b5d221328e12ea627 Mon Sep 17 00:00:00 2001 From: Yann Date: Fri, 14 Aug 2026 16:48:51 -0700 Subject: [PATCH 02/37] Wireframe becomes a composed entry; add theme.starter.css theme.wireframe.css now imports the default theme and lands its own overrides in theme.overrides, making it a self-contained swappable skin: activate it INSTEAD of theme.default.css. The marketing template's pinned layer statement follows the new order. The old empty theme.default.css template role moves to theme.starter.css, pre-wrapped in theme.overrides with the same guidelines. Co-Authored-By: Claude Fable 5 --- dist/css/mcss.css | 1 + dist/css/theme.starter.css | 70 ++++++++++++++++++++++++ dist/css/theme.wireframe.css | 37 ++++++++----- src/pages/templates/marketing.astro | 2 +- src/styles/framework/theme.starter.css | 44 +++++++++++++++ src/styles/framework/theme.wireframe.css | 37 ++++++++----- 6 files changed, 160 insertions(+), 31 deletions(-) create mode 100644 dist/css/theme.starter.css create mode 100644 src/styles/framework/theme.starter.css diff --git a/dist/css/mcss.css b/dist/css/mcss.css index 76eae298..f933861a 100644 --- a/dist/css/mcss.css +++ b/dist/css/mcss.css @@ -49,4 +49,5 @@ /* @import url(./theme.default.css); */ /* theme: activate at most one */ /* @import url(./theme.default.tokens.css); */ /* theme: activate at most one */ /* @import url(./theme.default.ui.css); */ /* theme: activate at most one */ +/* @import url(./theme.starter.css); */ /* theme: activate at most one */ /* @import url(./theme.wireframe.css); */ /* theme: activate at most one */ diff --git a/dist/css/theme.starter.css b/dist/css/theme.starter.css new file mode 100644 index 00000000..d6e383e1 --- /dev/null +++ b/dist/css/theme.starter.css @@ -0,0 +1,70 @@ +/*! mCSS v1.3.0 | MIT | https://mcss.dev */ +/* +SETTINGS MEDIA QUERIES + +https://github.com/argyleink/open-props/blob/main/src/props.media.css +https://open-props.style/#media-queries + +Can't use var() inside media queries 🤦‍♂️ +https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 +so breakpoints are not in theme.default.tokens.css + +xxs: 240px +xs: 360px +sm: 480px +md: 768px +lg: 1024px +xl: 1440px +xxl: 1920px +*/ + +/* https://github.com/postcss/postcss-mixins */ + +/* Example */ + +/* truncate single line of text and adds … */ + +/* YOUR THEME (starter) */ + +/* + A theme is a file of token overrides, plus optional style rules for what + tokens can't express. Copy this file, name it after your project, and + import it from your own entry point after the default theme: + + @import url(./framework/mcss.css); + @import url(./framework/theme.default.css); + @import url(./theme.acme.css); + + Everything this file doesn't mention falls back to the default theme. + It self-layers into `theme.overrides`, which beats the default theme's + `theme.defaults` no matter the import order. Never edit the default + theme files: your palette, type, and overrides all live here, which is + what keeps framework updates painless. + + Guidelines: + - Prefer token overrides. Override scale tokens (--base-*, --text) to + shift the whole palette or type, ui tokens (--ui-border-color, + --heading-font) for cross-cutting changes, or component tokens + (--bt-border-radius) for surgical ones. + - Rules are for what tokens can't express (pseudo-elements, nth-child + rhythm, text-decoration). Theme files are the one place allowed to + style framework classes from outside; they still lose to your + unlayered CSS and to helpers, by design. + - No !important: that privilege is reserved for the helpers layer. + - For a full swappable skin, write an entry that composes the default + theme and overrides on top instead: see theme.wireframe.css. +*/ + +@layer theme.overrides { + :root { + /* A new palette usually gets you 80% of the way: */ + /* --base-0: #fff; */ + /* --primary-500: rebeccapurple; */ + /* Then reach for ui and component tokens as needed: */ + /* --heading-font: Georgia, serif; */ + /* --card-border-radius: 0; */ + /* A theme may also add scales the framework doesn't ship, */ + /* e.g. a second accent, and use them in its own style rules: */ + /* --secondary-500: teal; */ + } +} diff --git a/dist/css/theme.wireframe.css b/dist/css/theme.wireframe.css index 5efe422a..1b2d8794 100644 --- a/dist/css/theme.wireframe.css +++ b/dist/css/theme.wireframe.css @@ -30,10 +30,17 @@ xxl: 1920px A hand-drawn wireframe theme: grayscale palette, rounded type, wobbly borders, paper-cutout shadows, and a traced-twice pencil stroke on cards and buttons. Mostly token overrides; the style rules at the - bottom cover what tokens can't express. See theme.default.css for how - themes work and how to activate one. + bottom cover what tokens can't express. + + A full skin is an entry that composes the default theme and overrides + on top: the import below brings in every default, and this file's own + rules land in `theme.overrides`, which wins over the default's + `theme.defaults`. Activate exactly one theme entry from your own entry + point (see theme.default.css). */ +@import url(./theme.default.css); + /* Registered so it computes on the element that declares it and then inherits as a plain integer: a card and its media resolve the SAME seed and can derive matching corners. Property registrations are @@ -44,7 +51,7 @@ xxl: 1920px initial-value: 1; } -@layer theme { +@layer theme.overrides { :root { /* COLORS: everything goes grayscale, including the primary scale */ @@ -98,7 +105,9 @@ xxl: 1920px Comic Sans ships on macOS and Windows, Chalkboard SE on iOS, casual is the Android generic. */ - --text: 'Comic Sans MS', 'Chalkboard SE', Chalkboard, 'Comic Neue', 'Segoe Print', 'Bradley Hand', casual, cursive; + --text: + "Comic Sans MS", "Chalkboard SE", Chalkboard, "Comic Neue", "Segoe Print", + "Bradley Hand", casual, cursive; --display: var(--text); --heading-font: var(--text); --heading-weight: var(--bold); @@ -157,7 +166,10 @@ xxl: 1920px against paper, not one gray against another. */ --toggle-track-color-checked: light-dark(var(--base-800), var(--base-200)); - --avatar-status-dot-color-online: light-dark(var(--base-800), var(--base-200)); + --avatar-status-dot-color-online: light-dark( + var(--base-800), + var(--base-200) + ); /* WAYFINDING STAYS CRISP: the focus ring is not part of the sketch, and --marker-color is already highlighter yellow. */ @@ -273,8 +285,7 @@ xxl: 1920px Corner pattern mirrors --wobble-2 (short/long alternation). */ .card, .card_media { - border-radius: - calc(9px + sin(var(--sketch-seed) * 9.1) * 2px) + border-radius: calc(9px + sin(var(--sketch-seed) * 9.1) * 2px) calc(105px + sin(var(--sketch-seed) * 4.7) * 18px) calc(7px + sin(var(--sketch-seed) * 3.1) * 2px) calc(120px + sin(var(--sketch-seed) * 5.5) * 18px) / @@ -286,13 +297,10 @@ xxl: 1920px /* Flush media bleeds to the card's top edge only */ .card_media-flush { - border-radius: - calc(9px + sin(var(--sketch-seed) * 9.1) * 2px) - calc(105px + sin(var(--sketch-seed) * 4.7) * 18px) - 0 0 / + border-radius: calc(9px + sin(var(--sketch-seed) * 9.1) * 2px) + calc(105px + sin(var(--sketch-seed) * 4.7) * 18px) 0 0 / calc(115px + sin(var(--sketch-seed) * 5.9) * 18px) - calc(8px + sin(var(--sketch-seed) * 7.7) * 2px) - 0 0; + calc(8px + sin(var(--sketch-seed) * 7.7) * 2px) 0 0; } .card::after, @@ -300,8 +308,7 @@ xxl: 1920px rotate: calc(sin(var(--sketch-seed) * 7.3) * 0.6deg); translate: calc(sin(var(--sketch-seed) * 3.7) * 1.5px) calc(cos(var(--sketch-seed) * 5.3) * 1.5px); - border-radius: - calc(100px + sin(var(--sketch-seed) * 5.1) * 20px) + border-radius: calc(100px + sin(var(--sketch-seed) * 5.1) * 20px) calc(8px + sin(var(--sketch-seed) * 2.3) * 3px) calc(110px + sin(var(--sketch-seed) * 4.9) * 20px) calc(9px + sin(var(--sketch-seed) * 4.3) * 3px) / diff --git a/src/pages/templates/marketing.astro b/src/pages/templates/marketing.astro index eec88fe5..abe05acc 100644 --- a/src/pages/templates/marketing.astro +++ b/src/pages/templates/marketing.astro @@ -41,7 +41,7 @@ const navItems = [ /* Pin the cascade-layer order before any stylesheet loads: layer priority is set by first occurrence, and the theme below may be parsed before the framework's own @layer statement. */ - @layer settings, base, elements, global, components, theme, helpers; + @layer base, elements, global, components, theme.defaults, theme.overrides, helpers; diff --git a/src/styles/framework/theme.starter.css b/src/styles/framework/theme.starter.css new file mode 100644 index 00000000..5bfb9ca2 --- /dev/null +++ b/src/styles/framework/theme.starter.css @@ -0,0 +1,44 @@ +/* YOUR THEME (starter) */ + +/* + A theme is a file of token overrides, plus optional style rules for what + tokens can't express. Copy this file, name it after your project, and + import it from your own entry point after the default theme: + + @import url(./framework/mcss.css); + @import url(./framework/theme.default.css); + @import url(./theme.acme.css); + + Everything this file doesn't mention falls back to the default theme. + It self-layers into `theme.overrides`, which beats the default theme's + `theme.defaults` no matter the import order. Never edit the default + theme files: your palette, type, and overrides all live here, which is + what keeps framework updates painless. + + Guidelines: + - Prefer token overrides. Override scale tokens (--base-*, --text) to + shift the whole palette or type, ui tokens (--ui-border-color, + --heading-font) for cross-cutting changes, or component tokens + (--bt-border-radius) for surgical ones. + - Rules are for what tokens can't express (pseudo-elements, nth-child + rhythm, text-decoration). Theme files are the one place allowed to + style framework classes from outside; they still lose to your + unlayered CSS and to helpers, by design. + - No !important: that privilege is reserved for the helpers layer. + - For a full swappable skin, write an entry that composes the default + theme and overrides on top instead: see theme.wireframe.css. +*/ + +@layer theme.overrides { + :root { + /* A new palette usually gets you 80% of the way: */ + /* --base-0: #fff; */ + /* --primary-500: rebeccapurple; */ + /* Then reach for ui and component tokens as needed: */ + /* --heading-font: Georgia, serif; */ + /* --card-border-radius: 0; */ + /* A theme may also add scales the framework doesn't ship, */ + /* e.g. a second accent, and use them in its own style rules: */ + /* --secondary-500: teal; */ + } +} diff --git a/src/styles/framework/theme.wireframe.css b/src/styles/framework/theme.wireframe.css index 33576838..b9619433 100644 --- a/src/styles/framework/theme.wireframe.css +++ b/src/styles/framework/theme.wireframe.css @@ -4,10 +4,17 @@ A hand-drawn wireframe theme: grayscale palette, rounded type, wobbly borders, paper-cutout shadows, and a traced-twice pencil stroke on cards and buttons. Mostly token overrides; the style rules at the - bottom cover what tokens can't express. See theme.default.css for how - themes work and how to activate one. + bottom cover what tokens can't express. + + A full skin is an entry that composes the default theme and overrides + on top: the import below brings in every default, and this file's own + rules land in `theme.overrides`, which wins over the default's + `theme.defaults`. Activate exactly one theme entry from your own entry + point (see theme.default.css). */ +@import url(./theme.default.css); + /* Registered so it computes on the element that declares it and then inherits as a plain integer: a card and its media resolve the SAME seed and can derive matching corners. Property registrations are @@ -18,7 +25,7 @@ initial-value: 1; } -@layer theme { +@layer theme.overrides { :root { /* COLORS: everything goes grayscale, including the primary scale */ @@ -72,7 +79,9 @@ Comic Sans ships on macOS and Windows, Chalkboard SE on iOS, casual is the Android generic. */ - --text: 'Comic Sans MS', 'Chalkboard SE', Chalkboard, 'Comic Neue', 'Segoe Print', 'Bradley Hand', casual, cursive; + --text: + "Comic Sans MS", "Chalkboard SE", Chalkboard, "Comic Neue", "Segoe Print", + "Bradley Hand", casual, cursive; --display: var(--text); --heading-font: var(--text); --heading-weight: var(--bold); @@ -131,7 +140,10 @@ against paper, not one gray against another. */ --toggle-track-color-checked: light-dark(var(--base-800), var(--base-200)); - --avatar-status-dot-color-online: light-dark(var(--base-800), var(--base-200)); + --avatar-status-dot-color-online: light-dark( + var(--base-800), + var(--base-200) + ); /* WAYFINDING STAYS CRISP: the focus ring is not part of the sketch, and --marker-color is already highlighter yellow. */ @@ -247,8 +259,7 @@ Corner pattern mirrors --wobble-2 (short/long alternation). */ .card, .card_media { - border-radius: - calc(9px + sin(var(--sketch-seed) * 9.1) * 2px) + border-radius: calc(9px + sin(var(--sketch-seed) * 9.1) * 2px) calc(105px + sin(var(--sketch-seed) * 4.7) * 18px) calc(7px + sin(var(--sketch-seed) * 3.1) * 2px) calc(120px + sin(var(--sketch-seed) * 5.5) * 18px) / @@ -260,13 +271,10 @@ /* Flush media bleeds to the card's top edge only */ .card_media-flush { - border-radius: - calc(9px + sin(var(--sketch-seed) * 9.1) * 2px) - calc(105px + sin(var(--sketch-seed) * 4.7) * 18px) - 0 0 / + border-radius: calc(9px + sin(var(--sketch-seed) * 9.1) * 2px) + calc(105px + sin(var(--sketch-seed) * 4.7) * 18px) 0 0 / calc(115px + sin(var(--sketch-seed) * 5.9) * 18px) - calc(8px + sin(var(--sketch-seed) * 7.7) * 2px) - 0 0; + calc(8px + sin(var(--sketch-seed) * 7.7) * 2px) 0 0; } .card::after, @@ -274,8 +282,7 @@ rotate: calc(sin(var(--sketch-seed) * 7.3) * 0.6deg); translate: calc(sin(var(--sketch-seed) * 3.7) * 1.5px) calc(cos(var(--sketch-seed) * 5.3) * 1.5px); - border-radius: - calc(100px + sin(var(--sketch-seed) * 5.1) * 20px) + border-radius: calc(100px + sin(var(--sketch-seed) * 5.1) * 20px) calc(8px + sin(var(--sketch-seed) * 2.3) * 3px) calc(110px + sin(var(--sketch-seed) * 4.9) * 20px) calc(9px + sin(var(--sketch-seed) * 4.3) * 3px) / From 51f0b171ada8b91586aeafdac7820d058c820e49 Mon Sep 17 00:00:00 2001 From: Yann Date: Fri, 14 Aug 2026 16:49:08 -0700 Subject: [PATCH 03/37] Evict --gradient-primary to its one consumer A composed brand gradient is site content, not a scale step. The marketing template's hero inlines it; the token is gone. Co-Authored-By: Claude Fable 5 --- dist/css/theme.default.tokens.css | 8 -------- src/pages/templates/marketing.astro | 2 +- src/styles/framework/theme.default.tokens.css | 8 -------- 3 files changed, 1 insertion(+), 17 deletions(-) diff --git a/dist/css/theme.default.tokens.css b/dist/css/theme.default.tokens.css index f3884d03..d1b9df5b 100644 --- a/dist/css/theme.default.tokens.css +++ b/dist/css/theme.default.tokens.css @@ -220,14 +220,6 @@ xxl: 1920px --highlight-500: #ffee00; - /* GRADIENTS */ - - --gradient-primary: linear-gradient( - 90deg, - var(--primary-950) 0%, - var(--primary-400) 100% - ); - /* BORDERS */ --border-sm: 1px; diff --git a/src/pages/templates/marketing.astro b/src/pages/templates/marketing.astro index abe05acc..462934da 100644 --- a/src/pages/templates/marketing.astro +++ b/src/pages/templates/marketing.astro @@ -64,7 +64,7 @@ const navItems = [
- +

The landing page you already know how to read

Big headline, reassuring sentence underneath, two buttons where the bright one is the one we want. You've scanned this exact page four hundred times, so we won't pretend it's a surprise.

diff --git a/src/styles/framework/theme.default.tokens.css b/src/styles/framework/theme.default.tokens.css index 2d5d1554..1e4dce2e 100644 --- a/src/styles/framework/theme.default.tokens.css +++ b/src/styles/framework/theme.default.tokens.css @@ -194,14 +194,6 @@ --highlight-500: #ffee00; - /* GRADIENTS */ - - --gradient-primary: linear-gradient( - 90deg, - var(--primary-950) 0%, - var(--primary-400) 100% - ); - /* BORDERS */ --border-sm: 1px; From ba27947ef82a9c5ee8826536a0f23bd89b450994 Mon Sep 17 00:00:00 2001 From: Yann Date: Fri, 14 Aug 2026 16:51:00 -0700 Subject: [PATCH 04/37] Dist: bake the default theme into the core bundle dist/mcss.css and dist/mcss.min.css now bundle theme.default.css so the one-file drop-in keeps painting a complete default look. The dist/css index activates the default theme import (the framework doesn't paint without one), marks its two parts as imported by the entry, and leaves other theme entries commented for swapping. Layer statement and prefix map drop the retired settings layer; the theme.default.css per-file output passes through untouched (imports only). Co-Authored-By: Claude Fable 5 --- dist/css/mcss.css | 12 +- dist/css/theme.default.css | 25 -- dist/mcss.css | 879 +++++++++++++++++++++++++++++++++++++ dist/mcss.min.css | 2 +- src/tools/build-css.mjs | 70 +-- 5 files changed, 931 insertions(+), 57 deletions(-) diff --git a/dist/css/mcss.css b/dist/css/mcss.css index f933861a..1efb00c2 100644 --- a/dist/css/mcss.css +++ b/dist/css/mcss.css @@ -1,5 +1,5 @@ /*! mCSS v1.3.0 | MIT | https://mcss.dev */ -@layer settings, base, elements, global, components, theme, helpers; +@layer base, elements, global, components, theme.defaults, theme.overrides, helpers; @import url(./base.reset.css) layer(base); @import url(./component.avatar.css) layer(components); @import url(./component.badge.css) layer(components); @@ -46,8 +46,8 @@ @import url(./help.ratios.css) layer(helpers); @import url(./help.spacing.css) layer(helpers); @import url(./help.typography.css) layer(helpers); -/* @import url(./theme.default.css); */ /* theme: activate at most one */ -/* @import url(./theme.default.tokens.css); */ /* theme: activate at most one */ -/* @import url(./theme.default.ui.css); */ /* theme: activate at most one */ -/* @import url(./theme.starter.css); */ /* theme: activate at most one */ -/* @import url(./theme.wireframe.css); */ /* theme: activate at most one */ +@import url(./theme.default.css); /* the default theme */ +/* @import url(./theme.default.tokens.css); */ /* imported by theme.default.css */ +/* @import url(./theme.default.ui.css); */ /* imported by theme.default.css */ +/* @import url(./theme.starter.css); */ /* theme: swap for the default */ +/* @import url(./theme.wireframe.css); */ /* theme: swap for the default */ diff --git a/dist/css/theme.default.css b/dist/css/theme.default.css index 394b9c4a..c6482e9e 100644 --- a/dist/css/theme.default.css +++ b/dist/css/theme.default.css @@ -1,29 +1,4 @@ /*! mCSS v1.3.0 | MIT | https://mcss.dev */ -/* -SETTINGS MEDIA QUERIES - -https://github.com/argyleink/open-props/blob/main/src/props.media.css -https://open-props.style/#media-queries - -Can't use var() inside media queries 🤦‍♂️ -https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942 -so breakpoints are not in theme.default.tokens.css - -xxs: 240px -xs: 360px -sm: 480px -md: 768px -lg: 1024px -xl: 1440px -xxl: 1920px -*/ - -/* https://github.com/postcss/postcss-mixins */ - -/* Example */ - -/* truncate single line of text and adds … */ - /* DEFAULT THEME (entry) */ /* diff --git a/dist/mcss.css b/dist/mcss.css index 58649269..e43509c5 100644 --- a/dist/mcss.css +++ b/dist/mcss.css @@ -4572,3 +4572,882 @@ body.dev { text-transform: capitalize !important; } } +/* DEFAULT THEME (entry) */ + +/* + The framework's design values: the scales (theme.default.tokens.css) and + the defaults every element and component consumes (theme.default.ui.css). + Activate it from your own entry point, right after mcss.css: + + @import url(./framework/mcss.css); + @import url(./framework/theme.default.css); + + mcss.css imports no theme itself; without this file every token is unset + and the page renders half-styled. + + Never edit the default theme. Your palette, type, and overrides go in a + theme of your own, imported after this one (copy theme.starter.css). The + parts here land in the `theme.defaults` layer and your theme lands in + `theme.overrides`, so yours wins no matter the import order. A full + replacement skin works the same way: theme.wireframe.css composes this + entry and overrides on top. +*/ + +/* DEFAULT THEME: TOKENS */ + +/* + The scales: every token here is named for what it IS (a step on a scale), + never for what it's for. Part of the default theme (see theme.default.css); + don't edit it, override from your own theme (see theme.starter.css). + + Can't use var() inside media queries, so breakpoints are hard coded in + settings.media-queries.css: + xxs: 240px xs: 360px sm: 480px md: 768px lg: 1024px xl: 1440px xxl: 1920px +*/ + +@layer theme.defaults { + /* + +• Dimensions (Margin, Padding, Width, Height) +• Aspect Ratios + +• Font Families +• Font Size +• Font Weight + +• Letter Spacing +• Line Height + +• Colors + +• Box shadows +• Border radius +• Border width +• Opacity +*/ + + :root { + /* GLOBALS */ + + /* DIMENSIONS */ + + /* Sizes */ + + --xs1: 4px; + --xs2: 8px; + --xs3: 12px; + + --sm1: 16px; + --sm2: 20px; + --sm3: 24px; + + --md1: 28px; + --md2: 32px; + --md3: 36px; + + --lg1: 40px; + --lg2: 44px; + --lg3: 48px; + + --xl1: 56px; + --xl2: 64px; + --xl3: 80px; + + --xxl1: 96px; + --xxl2: 112px; + --xxl3: 128px; + + --mega1: 160px; + --mega2: 192px; + --mega3: 224px; + + --giga1: 256px; + --giga2: 288px; + --giga3: 320px; + + --tera1: 384px; + --tera2: 480px; + --tera3: 520px; + + /* Aspect Ratios */ + --ar-square: 1; + --ar-landscape: 4/3; + --ar-portrait: 3/4; + --ar-widescreen: 16/9; + --ar-golden: 1.618/1; + + /* TYPOGRAPHY */ + /* See also elements.text & help.text */ + + /* Font Families */ + /* Local font stacks - More options @ https://modernfontstacks.com */ + --display: + Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, ui-sans-serif, + sans-serif; + --text: ui-sans-serif, system-ui, sans-serif; + --mono: + Dank Mono, Inconsolata, Fira Mono, SF Mono, Monaco, Droid Sans Mono, + Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, + ui-monospace, monospace; + + /* Font Sizes */ + /* Create your own sizes @ https://typescale.com */ + --text-xs: 0.694rem; + --text-sm: 0.833rem; + --text-md: 1rem; + --text-lg: 1.2rem; + --text-xl: 1.44rem; + --display-sm: 1.728rem; + --display-md: 2.074rem; + --display-lg: 2.488rem; + --display-xl: 2.986rem; /* h1 */ + --display-mega: 3.583rem; + --display-giga: 4.299rem; + + /* Heading font sizes are decisions, not scale steps: they map each + heading level onto this scale. See --heading-font-size-* in + theme.default.ui.css. */ + + /* Font Weights */ + --extra-light: 200; + --light: 300; + --book: 400; + --semi-bold: 600; + --bold: 700; + --black: 900; + + /* Letter Spacing */ + --tracking-sm: -0.05em; + --tracking-md: 0.025em; + --tracking-lg: 0.05em; + --tracking-xl: 0.075em; + --tracking-xxl: 0.15em; + + /* Line Height */ + --leading-xs: 1; + --leading-sm: 1.15; + --leading-md: 1.375; + --leading-lg: 1.5; + --leading-xl: 1.75; + --leading-xxl: 2; + + /* COLORS */ + /* Make your own palettes programmatically: https://www.tints.dev */ + + /* Base */ + + --base-0: #fff; + --base-50: #f6f7f9; + --base-100: #edeef1; + --base-200: #d6dbe1; + --base-300: #b2bbc7; + --base-400: #8897a8; + --base-500: #697a8e; + --base-600: #546375; + --base-700: #4a5666; + --base-800: #3c4550; + --base-900: #353c45; + --base-950: #23282e; + + /* Primary */ + + --primary-50: #f0f9ff; + --primary-100: #e0f2fe; + --primary-200: #bae6fd; + --primary-300: #7dd3fc; + --primary-400: #38bdf8; + --primary-500: #0ea5e9; + --primary-600: #0284c7; + --primary-700: #0369a1; + --primary-800: #075985; + --primary-900: #0c4a6e; + --primary-950: #082f49; + + /* Secondary and/or Highlight goes here */ + + /* Feedback */ + + --yes-100: #d5f6e8; + --yes-200: #afebd4; + --yes-300: #7adbbd; + --yes-400: #46c4a0; + --yes-500: #13886d; + + --no-100: #ffe4e6; + --no-200: #fecdd3; + --no-300: #fda4af; + --no-400: #fb7185; + --no-500: #e11d48; + + --maybe-100: #fff7d6; + --maybe-200: #fff0b3; + --maybe-300: #ffd64a; + --maybe-400: #ffc220; + --maybe-500: #f9a007; + + /* Highlight (text marker) */ + + --highlight-500: #ffee00; + + /* BORDERS */ + + --border-sm: 1px; + --border-md: 2px; + --border-lg: 4px; + --border-xl: 8px; + --border-xxl: 12px; + + --radius-sm: 3px; + --radius-md: 5px; + --radius-lg: 8px; + --radius-xl: 12px; + --radius-xxl: 16px; + --radius-round: 1e5px; + + /* DROP SHADOWS */ + + --shadow-sm: + 0 1px 3px 0 var(--ui-shadow-color), 0 1px 2px -1px var(--ui-shadow-color); + --shadow-md: + 0 4px 6px -1px var(--ui-shadow-color), + 0 2px 4px -2px var(--ui-shadow-color); + --shadow-lg: + 0 8px 13px -3px var(--ui-shadow-color), + 0 4px 6px -4px var(--ui-shadow-color); + --shadow-xl: + 0 20px 20px -5px var(--ui-shadow-color), + 0 8px 10px -6px var(--ui-shadow-color); + --shadow-xxl: + 0px 11px 8px -6px var(--ui-shadow-color), + 0 10px 15px 2px var(--ui-shadow-color); + + /* OPACITY */ + + --o-0: 0; /* overkill for consistency */ + --o-1: 0.2; + --o-2: 0.4; + --o-3: 0.6; + --o-4: 0.8; + --o-5: 1; + + /* Z-INDEX */ + + --z-bottom: -1000000000; + --z-0: 0; /* overkill for consistency */ + --z-1: 10; + --z-2: 20; + --z-3: 30; + --z-4: 40; + --z-5: 50; + --z-top: 1000000000; + + /* TRANSITIONS */ + + --transition: 220ms ease-in-out; + --transition-fast: 100ms ease-in-out; + } +} +/* DEFAULT THEME: UI */ + +/* + The decisions. Every token here is named for what it's FOR (an + element, a component, or a shared meaning) and answers "what does this + thing use by default". Tokens named for what they ARE (--sm1, --base-500, + --bold) are scale tokens and live in theme.default.tokens.css. That's the + whole split: a name that mentions a UI thing belongs here; a name that + labels a step on a scale belongs there. + + Values, in order of preference: + 1. Another ui token, when the meaning is shared + (--input-border-color: var(--ui-border-color)). + 2. A scale token, when the value should follow the system scales + (--fieldset-padding: var(--sm3)). + 3. A raw value, only where following the scales would be wrong: + content (separator strings, icon URLs), geometry tuned to one + control (--toggle-width), or element-relative measures that track + the element's own type instead of the page (em heading spacing). + The test: "if a theme retuned the scales, should this follow?" + + Part of the default theme (see theme.default.css); don't edit it, + override from your own theme (see theme.starter.css). +*/ + +@layer theme.defaults { + :root { + /* Color scheme (light/dark), toggled by the .theme-light / .theme-dark + classes below. Unrelated to theme files, which are full themes. */ + color-scheme: light dark; + + --ui-border-color: light-dark(var(--base-200), var(--base-500)); + /* Also consumed by the --shadow-* scale in theme.default.tokens.css: + the one reference between the files that runs upward, so shadows can + switch with the color scheme. Raw alpha colors: the palettes have no + alpha steps. */ + --ui-shadow-color: light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.6)); + + /* Keyboard focus ring (consumed by :focus-visible in global.a11y.css). + Raw 2px on purpose: an accessibility affordance that shouldn't move + when a theme retunes the decorative border scale. */ + --focus-ring-color: light-dark(var(--primary-500), var(--primary-400)); + --focus-ring-width: 2px; + --focus-ring-offset: 2px; + + /* Semantic feedback aliases over the raw feedback palettes. + Prefer these in components and themes; a theme can restyle feedback by + overriding the aliases without touching the raw scales. */ + --success-100: var(--yes-100); + --success-200: var(--yes-200); + --success-300: var(--yes-300); + --success-400: var(--yes-400); + --success-500: var(--yes-500); + --danger-100: var(--no-100); + --danger-200: var(--no-200); + --danger-300: var(--no-300); + --danger-400: var(--no-400); + --danger-500: var(--no-500); + --warning-100: var(--maybe-100); + --warning-200: var(--maybe-200); + --warning-300: var(--maybe-300); + --warning-400: var(--maybe-400); + --warning-500: var(--maybe-500); + } + + :root.theme-light { + color-scheme: light; + } + + :root.theme-dark { + color-scheme: dark; + } + + /* HTML ELEMENTS */ + + :root { + accent-color: var(--primary-500); + + --body-background-color: light-dark(var(--base-0), var(--base-950)); + --body-line-height: var(--leading-lg); + + --input-height: var(--md3); + --input-padding: var(--xs3); + --input-border-width: var(--border-sm); + --input-border-color: var(--ui-border-color); + --input-border-radius: var(--radius-md); + --input-border-color-invalid: light-dark( + var(--danger-500), + var(--danger-400) + ); + + /* Gap under a label that precedes its control */ + --label-spacing: var(--xs1); + + --fieldset-padding: var(--sm3); + --fieldset-border-width: var(--border-sm); + --fieldset-border-color: var(--ui-border-color); + --fieldset-border-radius: var(--radius-lg); + + /* meter: low/medium/high map to the even-less-good, suboptimum, and + optimum pseudo-elements */ + --meter-height: var(--sm1); + --meter-border-radius: var(--radius-md); + --meter-track-color: var(--primary-100); + --meter-low-color: var(--danger-400); + --meter-medium-color: var(--warning-400); + --meter-high-color: var(--success-400); + + --progress-height: var(--sm1); + --progress-color: var(--primary-500); + --progress-track-color: var(--primary-100); + --progress-border-radius: var(--radius-md); + + /* select's chevron, applied as a mask painted with the text color; + any url() works here, data URL or file */ + --select-icon-size: var(--sm3); + --select-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E"); + + --dialog-min-width: var(--tera1); + --dialog-max-width: var(--tera3); + --dialog-padding: var(--lg1) var(--md1); + --dialog-border-width: var(--border-sm); + --dialog-border-color: light-dark(var(--base-200), var(--base-800)); + --dialog-background-color: light-dark(var(--base-50), var(--base-900)); + --dialog-border-radius: var(--radius-lg); + --dialog-backdrop-color: var(--base-950); + --dialog-backdrop-opacity: var(--o-4); + + /* details: same surface as dialog by default, on purpose but + independently overridable. Spacing is the gap between an open + summary and its content. */ + --details-padding: var(--sm1); + --details-spacing: var(--xs3); + --details-border-width: var(--border-sm); + --details-border-color: light-dark(var(--base-200), var(--base-800)); + --details-background-color: light-dark(var(--base-50), var(--base-900)); + --details-border-radius: var(--radius-lg); + --details-icon-size: var(--sm3); + /* Marker icon, applied as a mask painted with the text color; any + url() works here, data URL or file */ + --details-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E"); + + --table-padding: var(--xs2) var(--sm1); + --table-border-width: var(--border-sm); + --table-border-color: light-dark(var(--base-100), var(--base-700)); + --table-border-radius: var(--radius-md); + --table-background-color: none; + /* Gap between the table and its caption */ + --table-caption-spacing: var(--xs3); + /* Gap between a figure's content and caption on either side */ + --figcaption-spacing: var(--xs2); + + /* Text */ + + --heading-font: var(--display); + --heading-weight: var(--black); + --heading-letter-spacing: normal; /* (e.g. -0.02em or var(--tracking-sm)) */ + + --heading-font-size-h1: clamp( + var(--display-md), + 1.269rem + 2.682vw, + var(--display-xl) + ); /* 2.074rem → 2.986rem */ + --heading-font-size-h2: clamp( + var(--display-sm), + 1.057rem + 2.235vw, + var(--display-lg) + ); /* 1.728rem → 2.488rem */ + --heading-font-size-h3: clamp( + var(--text-xl), + 0.881rem + 1.865vw, + var(--display-md) + ); /* 1.44rem → 2.074rem */ + --heading-font-size-h4: clamp( + var(--text-lg), + 0.734rem + 1.553vw, + var(--display-sm) + ); /* 1.2rem → 1.728rem */ + --heading-font-size-h5: clamp( + var(--text-lg), + 0.988rem + 0.706vw, + var(--text-xl) + ); /* 1.2rem → 1.44rem */ + --heading-font-size-h6: clamp( + var(--text-md), + 0.824rem + 0.588vw, + var(--text-lg) + ); /* 1rem → 1.2rem */ + + --heading-line-height: var(--leading-sm); + --heading-line-height-h1: var(--heading-line-height); + --heading-line-height-h2: var(--heading-line-height); + --heading-line-height-h3: var(--heading-line-height); + --heading-line-height-h4: var(--leading-md); + --heading-line-height-h5: var(--leading-md); + --heading-line-height-h6: var(--leading-md); + + /* Headings bottom margin */ + --heading-spacing-h1: 0.4em; + --heading-spacing-h2: 0.4em; + --heading-spacing-h3: 0.4em; + --heading-spacing-h4: 0.4em; + --heading-spacing-h5: 0.4em; + --heading-spacing-h6: 0.4em; + /* Any h1 before h2, h2 before h3, h3 before h4. */ + --heading-spacing-consecutive: 0.3em; + + --text-color: light-dark(var(--base-950), var(--base-200)); + --link-font-weight: var(--semi-bold); + --link-color: light-dark(var(--primary-600), var(--primary-400)); + --link-color-hover: var(--primary-500); + + --text-code-color: light-dark(var(--primary-600), var(--primary-400)); + --text-code-background-color: light-dark( + var(--primary-100), + var(--primary-900) + ); + /* when code inline styling doesn't apply (inside headings and pre) */ + --text-code-muted-color: light-dark(var(--base-500), var(--base-300)); + + --pre-border-radius: var(--radius-md); + /* matching the 0.9em of inline code */ + --pre-font-size: 0.9rem; + + --blockquote-padding-block: var(--sm1); + --blockquote-padding-inline: var(--md1) var(--sm3); + --blockquote-background-color: light-dark( + var(--primary-50), + var(--primary-900) + ); + --blockquote-border-radius: var(--radius-md); + --blockquote-accent-width: var(--xs2); + --blockquote-accent-color: linear-gradient( + var(--primary-800), + var(--primary-500) + ); + + /* .prose related stuff in GLOBAL */ + + /* Optional centered label on
, e.g. "***" or a dingbat */ + --hr-content: ""; + + /* ins: background stays light in both light/dark modes */ + --ins-color: var(--base-950); + --ins-background-color: var(--success-200); + + --marker-color: var(--highlight-500); + + --selection-color: light-dark(var(--base-950), var(--base-0)); + --selection-background-color: light-dark( + var(--primary-200), + var(--primary-700) + ); + } + + /* GLOBAL */ + + :root { + /* Mobile-first: tighter gutters on small screens, 24px from --md up */ + --grid-column-gap: var(--sm1); + --grid-row-gap: var(--sm1); + @media (width >= 768px) { + --grid-column-gap: var(--sm3); + --grid-row-gap: var(--sm3); + } + + --wrap-spacing: var(--sm1); + --wrap-md-spacing: var(--sm3); + --wrap-lg-spacing: 0; + /* Widths are measures: ch tracks the text size, so raw on purpose. */ + --wrap-width-sm: minmax(0, 55ch); + --wrap-width-md: minmax(0, 70ch); + --wrap-width-lg: minmax(0, 900px); + --wrap-width: var(--wrap-width-md); + + --layout-content-width: 70ch; + --layout-aside-width: 245px; + --layout-toc-width: 1fr; + + --prose-spacing: var(--sm1); + } + + /* COMPONENTS */ + + /* Badge */ + + :root { + --badge-font-size: var(--text-sm); + --badge-border-radius: var(--radius-md); + --badge-color: var(--base-0); + --badge-background-color: light-dark(var(--base-700), var(--base-600)); + + --badge-primary-color: var(--base-0); + --badge-primary-background-color: light-dark( + var(--primary-600), + var(--primary-500) + ); + --badge-success-color: light-dark(var(--success-500), var(--base-0)); + --badge-success-background-color: light-dark( + var(--success-100), + var(--success-500) + ); + --badge-danger-color: light-dark(var(--danger-500), var(--base-0)); + --badge-danger-background-color: light-dark( + var(--danger-100), + var(--danger-500) + ); + --badge-warning-color: light-dark(var(--warning-500), var(--base-950)); + --badge-warning-background-color: light-dark( + var(--warning-100), + var(--warning-500) + ); + } + + /* Button */ + /* (Button defaults and primary button colors) */ + + :root { + /* Optical minimums, deliberately off the spacing scale */ + --bt-min-width: 101px; + --bt-min-width-md: 123px; + --bt-min-width-lg: 133px; + + --bt-font-size: var(--text-sm); + --bt-font-size-lg: var(--text-md); + --bt-font-weight: var(--semi-bold); + + --bt-color: var(--text-color); + --bt-color-hover: light-dark(var(--text-color), var(--base-0)); + + --bt-background-color: light-dark(var(--base-0), var(--base-800)); + --bt-background-color-hover: light-dark(var(--base-50), var(--base-900)); + + --bt-border-color: var(--ui-border-color); + --bt-border-width: var(--border-sm); + --bt-border-radius: var(--radius-lg); + --bt-border-radius-lg: var(--radius-xl); + + --bt-outline-color-hover: light-dark(var(--base-950), var(--base-0)); + --bt-outline-background-color-hover: light-dark( + rgb(0 0 0 / 0.1), + rgb(255 255 255 / 0.1) + ); + --bt-outline-border-color: light-dark(var(--base-950), var(--base-0)); + --bt-outline-border-color-hover: light-dark(var(--base-950), var(--base-0)); + + --bt-primary-color: var(--base-0); + --bt-primary-color-hover: var(--base-0); + --bt-primary-background-color: var(--primary-600); + --bt-primary-background-color-hover: var(--primary-500); + --bt-primary-border-color: var(--primary-600); + --bt-primary-border-color-hover: var(--primary-600); + } + + /* Avatar */ + + :root { + --avatar-color: var(--base-0); + --avatar-background-color: var(--base-400); + --avatar-border-color: light-dark(var(--base-0), var(--base-500)); + --avatar-border-width: var(--border-sm); + --avatar-radius: var(--radius-round); + --avatar-status-dot-color-offline: var(--base-300); + --avatar-status-dot-color-online: var(--yes-400); + } + + /* Banner */ + + :root { + --banner-color: var(--base-0); + --banner-background-color: light-dark( + var(--primary-600), + var(--primary-800) + ); + } + + /* Breadcrumbs */ + + :root { + --breadcrumbs-separator: "/"; + --breadcrumbs-separator-color: light-dark(var(--base-300), var(--base-600)); + --breadcrumbs-color: light-dark(var(--base-500), var(--base-400)); + --breadcrumbs-color-current: var(--text-color); + } + + /* Card */ + + :root { + --card-spacing: var(--sm3); + --card-color: var(--text-color); + --card-secondary-text-color: light-dark(var(--base-400), var(--base-500)); + --card-bg-color: light-dark(var(--base-100), var(--base-900)); + --card-border-radius: var(--radius-lg); + --card-border-color: var(--ui-border-color); + --card-border-width: var(--border-sm); + --card-shadow: var(--shadow-md); + --card-shadow-hover: var(--shadow-xl); + --card-loading-bg: light-dark(var(--base-200), var(--base-900)); + /* Default media aspect ratio; the Card component pins it inline only + when its aspectRatio prop is passed */ + --card-aspect-ratio: var(--ar-golden); + } + + /* Toggle */ + + :root { + /* Drawn-control geometry, deliberately off the scales */ + --toggle-width: 50px; + --toggle-height: 28px; + --toggle-border-width: 2px; + --toggle-track-color: light-dark(var(--base-300), var(--base-700)); + --toggle-track-color-checked: var(--yes-400); + --toggle-thumb-color: var(--body-background-color); + } + + /* FAQ */ + + :root { + --faq-spacing: var(--xs3); + } + + /* Field */ + + :root { + --field-spacing: var(--xs1); + --field-hint-color: light-dark(var(--base-400), var(--base-500)); + --field-error-color: light-dark(var(--danger-500), var(--danger-300)); + /*Field's hint/error position. Use `static` to reflow under, use `absolute` + (and leave enough space below) if you don't want any shift on errors */ + --field-message-position: static; + } + + /* FeatureItem */ + + :root { + --featureItem-icon-box-size: var(--lg3); + --featureItem-icon-size: var(--sm3); + --featureItem-icon-color: light-dark( + var(--primary-600), + var(--primary-300) + ); + --featureItem-icon-background-color: light-dark( + var(--primary-100), + var(--primary-900) + ); + --featureItem-icon-border-radius: var(--radius-lg); + } + + /* Footer */ + + :root { + --footer-background-color: light-dark(var(--primary-950), var(--base-950)); + --footer-text-color: light-dark(var(--base-0), var(--base-200)); + --footer-border-width: var(--border-md); + --footer-border-color: light-dark(transparent, var(--base-700)); + --footer-link-color: light-dark(var(--base-0), var(--base-200)); + --footer-link-color-hover: light-dark(var(--primary-200), var(--base-0)); + } + + /* Header */ + + :root { + --header-height: var(--xl1); + --header-padding: var(--sm1); + @media (width >= 768px) { + --header-height: var(--xl2); + --header-padding: var(--sm3); + } + --header-background-color: light-dark(var(--base-0), var(--base-950)); + + /* The mobile menu is an always-dark by design */ + --header-menu-background-color: var(--base-950); + --header-menu-color: var(--base-0); + --header-menu-color-current: var(--primary-400); + --header-menu-secondary-color: var(--base-300); + --header-menu-border-color: var(--base-500); + } + + /* Hero */ + + :root { + --hero-radius: var(--radius-xl); + --hero-content-padding: var(--md3); + --hero-actions-spacing: var(--lg3); + --hero-pagination-dot: var(--sm1); + --hero-pagination-dot-color: var(--base-0); + --hero-pagination-dot-active-color: var(--primary-600); + --hero-pagination-opacity: var(--o-4); + } + + /* Pagination */ + + :root { + --pagination-size: var(--md3); + --pagination-border-radius: var(--radius-md); + --pagination-color: var(--text-color); + --pagination-color-current: var(--base-0); + --pagination-background-color-current: light-dark( + var(--primary-600), + var(--primary-500) + ); + --pagination-background-color-hover: light-dark( + var(--base-100), + var(--base-800) + ); + } + + /* PrevNext */ + + :root { + --prevNext-border-color: var(--ui-border-color); + --prevNext-border-radius: var(--radius-lg); + --prevNext-border-color-hover: var(--link-color); + --prevNext-label-color: light-dark(var(--base-400), var(--base-500)); + } + + /* Notice */ + + :root { + --notice-spacing: var(--sm1); + --notice-text-color: light-dark(var(--base-950), var(--base-0)); + --notice-background-color: light-dark(var(--base-50), var(--base-800)); + --notice-border-color: light-dark(var(--base-200), var(--base-500)); + --notice-border-width: var(--border-sm); + --notice-border-radius: var(--radius-lg); + } + + /* Pricing */ + + :root { + --pricingCard-highlight-border-color: light-dark( + var(--primary-600), + var(--primary-400) + ); + --pricingCard-check-color: light-dark( + var(--success-500), + var(--success-400) + ); + } + + /* Read Progress Bar */ + + :root { + --readProgressBar-height: var(--xs1); + --readProgressBar-color: linear-gradient( + 90deg, + var(--primary-600) 0%, + var(--primary-400) 100% + ); + } + + /* Section */ + + :root { + --section-spacing: var(--xl3); + --section-header-spacing: var(--lg3); + --section-eyebrow-color: light-dark(var(--primary-600), var(--primary-400)); + --section-lede-color: light-dark(var(--base-500), var(--base-400)); + --section-filled-background-color: light-dark( + var(--base-50), + var(--base-900) + ); + --section-primary-background-color: light-dark( + var(--primary-600), + var(--primary-900) + ); + --section-primary-text-color: var(--base-0); + --section-primary-link-color: var(--primary-100); + --section-primary-link-color-hover: var(--base-0); + --section-primary-eyebrow-color: var(--primary-200); + --section-primary-lede-color: var(--primary-100); + } + + /* Testimonial */ + + :root { + --testimonial-role-color: light-dark(var(--base-400), var(--base-500)); + } + + /* Tags */ + + :root { + --tags-padding: var(--xs2); + --tags-font-size: var(--text-sm); + --tags-color: light-dark(var(--base-500), var(--base-400)); + --tags-background-color: light-dark(var(--base-100), var(--base-800)); + --tags-background-color-hover: light-dark(var(--base-200), var(--base-950)); + --tags-radius: var(--radius-md); + } + + /* Tiles has no tokens here: its column count is set by container queries in + component.tiles.css since custom properties don't work inside @container. +*/ + + /* TOC */ + + :root { + --toc-color: var(--link-color); + --toc-color-hover: var(--link-color-hover); + --toc-spacing: var(--xs1); + --toc-indentation: var(--xs3); + --toc-icon-size: var(--sm1); + } +} diff --git a/dist/mcss.min.css b/dist/mcss.min.css index 68d0f3f1..321daac5 100644 --- a/dist/mcss.min.css +++ b/dist/mcss.min.css @@ -1,2 +1,2 @@ /*! mCSS v1.3.0 | MIT | https://mcss.dev */ -@layer base,elements,global,components,theme.defaults,theme.overrides,helpers;@layer base{*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion:reduce){*,:before,:after{animation-delay:-1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}}:where(:not(dialog)){margin:0}html,body{min-height:100%}}@layer elements{body{line-sizing:normal;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;background-color:var(--body-background-color);color:var(--text-color);font-family:var(--text);line-height:var(--body-line-height);&:has(.body-is-locked){overflow:hidden}}}@layer elements{::selection{color:var(--selection-color);background-color:var(--selection-background-color)}:where(a,u,ins,abbr){text-underline-offset:2px}a{font-weight:var(--link-font-weight);color:var(--link-color);&:where(:hover){color:var(--link-color-hover);-webkit-text-decoration:none;text-decoration:none}}address{width:max-content;max-width:100%;padding:var(--sm1) var(--sm3);font-style:normal;background-color:light-dark(var(--base-50),var(--base-900));border:var(--xs2) solid transparent;border-image:8 repeating-linear-gradient(-45deg,var(--no-500) 0,var(--no-500) var(--xs2),transparent 0,transparent calc(var(--xs2) * 2),var(--primary-500) 0,var(--primary-500) calc(var(--xs2) * 3),transparent 0,transparent calc(var(--xs2) * 4))}abbr{position:relative;cursor:help;&:after{position:relative;top:calc(var(--xs1) * -1);width:var(--sm1);height:var(--sm1);display:inline-block;content:"";background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='circle-help'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M9.09%209a3%203%200%200%201%205.83%201c0%202-3%203-3%203'/%3E%3Cpath%20d='M12%2017h.01'/%3E%3C/svg%3E");background-size:contain}&:hover:before{width:max-content;max-width:400px;position:absolute;left:50%;padding:var(--xs1) var(--xs3);content:attr(title);color:var(--base-0);background-color:var(--base-900);opacity:var(--o-4);border-radius:var(--radius-sm);transform:translate(-50%,-2em)}}blockquote{position:relative;margin-bottom:var(--prose-spacing);padding-block:var(--blockquote-padding-block);padding-inline:var(--blockquote-padding-inline);font-style:italic;background-color:var(--blockquote-background-color);border-radius:var(--blockquote-border-radius);&:before{content:"";position:absolute;top:0;inset-inline-start:0;width:var(--blockquote-accent-width);height:100%;border-start-start-radius:var(--blockquote-border-radius);border-end-start-radius:var(--blockquote-border-radius);background:var(--blockquote-accent-color)}p{&:first-child:before{content:open-quote}&:last-child{margin-bottom:0;&:after{content:close-quote}}}}cite{font-style:italic}code,var,kbd{font-family:var(--mono);font-size:.9em;font-style:normal;color:var(--text-code-muted-color)}:is(code,var,kbd):not(h1 *,h2 *,h3 *,h4 *,h5 *,h6 *,pre *){padding:.15em .3em;color:var(--text-code-color);background-color:var(--text-code-background-color);border-radius:var(--radius-sm)}dt{font-weight:var(--bold)}dd+dt{margin-top:.5em}del{text-decoration-color:var(--danger-500);text-decoration-style:wavy}h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{overflow-wrap:break-word;text-wrap:balance}h1,.h1,h2,.h2,h3,.h3,h4,.h4{font-family:var(--heading-font);font-weight:var(--heading-weight);letter-spacing:var(--heading-letter-spacing)}h1,.h1{margin-bottom:var(--heading-spacing-h1);font-size:var(--heading-font-size-h1);line-height:var(--heading-line-height-h1)}h2,.h2{margin-bottom:var(--heading-spacing-h2);font-size:var(--heading-font-size-h2);line-height:var(--heading-line-height-h2)}h3,.h3{margin-bottom:var(--heading-spacing-h3);font-size:var(--heading-font-size-h3);line-height:var(--heading-line-height-h3)}h4,.h4{margin-bottom:var(--heading-spacing-h4);font-size:var(--heading-font-size-h4);line-height:var(--heading-line-height-h4)}h5,.h5{margin-bottom:var(--heading-spacing-h5);font-size:var(--heading-font-size-h5);line-height:var(--heading-line-height-h5)}h6,.h6{margin-bottom:var(--heading-spacing-h6);font-size:var(--heading-font-size-h6);line-height:var(--heading-line-height-h6)}:where(h1,h2,h3):has(+:is(h2,h3,h4)){margin-bottom:var(--heading-spacing-consecutive)}hr{display:flex;justify-content:center;align-items:center;height:0;border-style:solid;border-width:var(--border-sm) 0 0;color:var(--ui-border-color);overflow:visible;&:after{content:var(--hr-content);padding:0 var(--xs1);line-height:1;letter-spacing:var(--tracking-sm);background-color:var(--body-background-color)}}:where(hr):has(+:is(p)){margin-bottom:var(--prose-spacing)}ins{padding:.15em .3em;color:var(--ins-color);background-color:var(--ins-background-color);border-radius:var(--radius-sm);-webkit-text-decoration:none;text-decoration:none;&:before{content:"+ "}}mark{padding:.15em .5em;background:var(--marker-color);border-radius:1em 0}:where(ol,ul){list-style-type:none;padding:0}pre{font-family:var(--mono);font-size:var(--pre-font-size);white-space:pre-wrap;border-radius:var(--pre-border-radius)}q{font-style:italic}s{text-decoration-color:light-dark(var(--base-950),var(--base-50));text-decoration-style:wavy}sub,sup{line-height:1}}@layer elements{:root{quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(af),:not(:lang(af))>:lang(af){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ak),:not(:lang(ak))>:lang(ak){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(asa),:not(:lang(asa))>:lang(asa){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(az),:not(:lang(az))>:lang(az){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(bem),:not(:lang(bem))>:lang(bem){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(bez),:not(:lang(bez))>:lang(bez){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(bn),:not(:lang(bn))>:lang(bn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(brx),:not(:lang(brx))>:lang(brx){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(cgg),:not(:lang(cgg))>:lang(cgg){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(chr),:not(:lang(chr))>:lang(chr){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(cy),:not(:lang(cy))>:lang(cy){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(da),:not(:lang(da))>:lang(da){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(dav),:not(:lang(dav))>:lang(dav){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(dje),:not(:lang(dje))>:lang(dje){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(dz),:not(:lang(dz))>:lang(dz){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ebu),:not(:lang(ebu))>:lang(ebu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ee),:not(:lang(ee))>:lang(ee){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(en),:not(:lang(en))>:lang(en){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(fil),:not(:lang(fil))>:lang(fil){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(fo),:not(:lang(fo))>:lang(fo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ga),:not(:lang(ga))>:lang(ga){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(gd),:not(:lang(gd))>:lang(gd){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(gl),:not(:lang(gl))>:lang(gl){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(gu),:not(:lang(gu))>:lang(gu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(guz),:not(:lang(guz))>:lang(guz){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ha),:not(:lang(ha))>:lang(ha){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(hi),:not(:lang(hi))>:lang(hi){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(id),:not(:lang(id))>:lang(id){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ig),:not(:lang(ig))>:lang(ig){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(jmc),:not(:lang(jmc))>:lang(jmc){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kam),:not(:lang(kam))>:lang(kam){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kde),:not(:lang(kde))>:lang(kde){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kea),:not(:lang(kea))>:lang(kea){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(khq),:not(:lang(khq))>:lang(khq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ki),:not(:lang(ki))>:lang(ki){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kln),:not(:lang(kln))>:lang(kln){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(km),:not(:lang(km))>:lang(km){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kn),:not(:lang(kn))>:lang(kn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ko),:not(:lang(ko))>:lang(ko){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ksb),:not(:lang(ksb))>:lang(ksb){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lg),:not(:lang(lg))>:lang(lg){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ln),:not(:lang(ln))>:lang(ln){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lo),:not(:lang(lo))>:lang(lo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lrc),:not(:lang(lrc))>:lang(lrc){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lu),:not(:lang(lu))>:lang(lu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(luo),:not(:lang(luo))>:lang(luo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lv),:not(:lang(lv))>:lang(lv){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mas),:not(:lang(mas))>:lang(mas){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mer),:not(:lang(mer))>:lang(mer){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mfe),:not(:lang(mfe))>:lang(mfe){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mgo),:not(:lang(mgo))>:lang(mgo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ml),:not(:lang(ml))>:lang(ml){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mn),:not(:lang(mn))>:lang(mn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mr),:not(:lang(mr))>:lang(mr){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ms),:not(:lang(ms))>:lang(ms){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mt),:not(:lang(mt))>:lang(mt){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(my),:not(:lang(my))>:lang(my){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(naq),:not(:lang(naq))>:lang(naq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(nd),:not(:lang(nd))>:lang(nd){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ne),:not(:lang(ne))>:lang(ne){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(nus),:not(:lang(nus))>:lang(nus){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(nyn),:not(:lang(nyn))>:lang(nyn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(pa),:not(:lang(pa))>:lang(pa){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(pt),:not(:lang(pt))>:lang(pt){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(rof),:not(:lang(rof))>:lang(rof){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(rwk),:not(:lang(rwk))>:lang(rwk){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(saq),:not(:lang(saq))>:lang(saq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(sbp),:not(:lang(sbp))>:lang(sbp){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(seh),:not(:lang(seh))>:lang(seh){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ses),:not(:lang(ses))>:lang(ses){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(si),:not(:lang(si))>:lang(si){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(so),:not(:lang(so))>:lang(so){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(sw),:not(:lang(sw))>:lang(sw){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ta),:not(:lang(ta))>:lang(ta){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(te),:not(:lang(te))>:lang(te){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(teo),:not(:lang(teo))>:lang(teo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(th),:not(:lang(th))>:lang(th){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(to),:not(:lang(to))>:lang(to){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(tr),:not(:lang(tr))>:lang(tr){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(twq),:not(:lang(twq))>:lang(twq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(tzm),:not(:lang(tzm))>:lang(tzm){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(uz-Cyrl),:not(:lang(uz-Cyrl))>:lang(uz-Cyrl){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vai),:not(:lang(vai))>:lang(vai){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vai-Latn),:not(:lang(vai-Latn))>:lang(vai-Latn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vi),:not(:lang(vi))>:lang(vi){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vun),:not(:lang(vun))>:lang(vun){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(xog),:not(:lang(xog))>:lang(xog){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(yo),:not(:lang(yo))>:lang(yo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(yue-Hans),:not(:lang(yue-Hans))>:lang(yue-Hans){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(zh),:not(:lang(zh))>:lang(zh){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(zu),:not(:lang(zu))>:lang(zu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(uz),:not(:lang(uz))>:lang(uz){quotes:"\201c" "\201d" "\2019" "\2018"}:root:lang(eu),:not(:lang(eu))>:lang(eu){quotes:"\201c" "\201d" "\201c" "\201d"}:root:lang(tk),:not(:lang(tk))>:lang(tk){quotes:"\201c" "\201d" "\201c" "\201d"}:root:lang(ar),:not(:lang(ar))>:lang(ar){quotes:"\201d" "\201c" "\2019" "\2018"}:root:lang(ur),:not(:lang(ur))>:lang(ur){quotes:"\201d" "\201c" "\2019" "\2018"}:root:lang(fi),:not(:lang(fi))>:lang(fi){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(he),:not(:lang(he))>:lang(he){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(lag),:not(:lang(lag))>:lang(lag){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(rn),:not(:lang(rn))>:lang(rn){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(sn),:not(:lang(sn))>:lang(sn){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(sv),:not(:lang(sv))>:lang(sv){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(sr),:not(:lang(sr))>:lang(sr){quotes:"\201e" "\201c" "\2018" "\2018"}:root:lang(sr-Latn),:not(:lang(sr-Latn))>:lang(sr-Latn){quotes:"\201e" "\201c" "\2018" "\2018"}:root:lang(bg),:not(:lang(bg))>:lang(bg){quotes:"\201e" "\201c" "\201e" "\201c"}:root:lang(lt),:not(:lang(lt))>:lang(lt){quotes:"\201e" "\201c" "\201e" "\201c"}:root:lang(bs-Cyrl),:not(:lang(bs-Cyrl))>:lang(bs-Cyrl){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(cs),:not(:lang(cs))>:lang(cs){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(de),:not(:lang(de))>:lang(de){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(dsb),:not(:lang(dsb))>:lang(dsb){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(et),:not(:lang(et))>:lang(et){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(hr),:not(:lang(hr))>:lang(hr){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(hsb),:not(:lang(hsb))>:lang(hsb){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(is),:not(:lang(is))>:lang(is){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(lb),:not(:lang(lb))>:lang(lb){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(luy),:not(:lang(luy))>:lang(luy){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(mk),:not(:lang(mk))>:lang(mk){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(sk),:not(:lang(sk))>:lang(sk){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(sl),:not(:lang(sl))>:lang(sl){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(ka),:not(:lang(ka))>:lang(ka){quotes:"\201e" "\201c" "\ab" "\bb"}:root:lang(bs),:not(:lang(bs))>:lang(bs){quotes:"\201e" "\201d" "\2018" "\2019"}:root:lang(agq),:not(:lang(agq))>:lang(agq){quotes:"\201e" "\201d" "\201a" "\2019"}:root:lang(ff),:not(:lang(ff))>:lang(ff){quotes:"\201e" "\201d" "\201a" "\2019"}:root:lang(nmg),:not(:lang(nmg))>:lang(nmg){quotes:"\201e" "\201d" "\ab" "\bb"}:root:lang(ro),:not(:lang(ro))>:lang(ro){quotes:"\201e" "\201d" "\ab" "\bb"}:root:lang(pl),:not(:lang(pl))>:lang(pl){quotes:"\201e" "\201d" "\ab" "\bb"}:root:lang(hu),:not(:lang(hu))>:lang(hu){quotes:"\201e" "\201d" "\bb" "\ab"}:root:lang(nl),:not(:lang(nl))>:lang(nl){quotes:"\2018" "\2019" "\201c" "\201d"}:root:lang(ti-ER),:not(:lang(ti-ER))>:lang(ti-ER){quotes:"\2018" "\2019" "\201c" "\201d"}:root:lang(dua),:not(:lang(dua))>:lang(dua){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(ksf),:not(:lang(ksf))>:lang(ksf){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(rw),:not(:lang(rw))>:lang(rw){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(nn),:not(:lang(nn))>:lang(nn){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(nb),:not(:lang(nb))>:lang(nb){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(ast),:not(:lang(ast))>:lang(ast){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(bm),:not(:lang(bm))>:lang(bm){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(br),:not(:lang(br))>:lang(br){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(ca),:not(:lang(ca))>:lang(ca){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(dyo),:not(:lang(dyo))>:lang(dyo){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(el),:not(:lang(el))>:lang(el){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(es),:not(:lang(es))>:lang(es){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(ewo),:not(:lang(ewo))>:lang(ewo){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(mg),:not(:lang(mg))>:lang(mg){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(mua),:not(:lang(mua))>:lang(mua){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(sg),:not(:lang(sg))>:lang(sg){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(it),:not(:lang(it))>:lang(it){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(kab),:not(:lang(kab))>:lang(kab){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(kk),:not(:lang(kk))>:lang(kk){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(pt-PT),:not(:lang(pt-PT))>:lang(pt-PT){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(nnh),:not(:lang(nnh))>:lang(nnh){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(sq),:not(:lang(sq))>:lang(sq){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(bas),:not(:lang(bas))>:lang(bas){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(be),:not(:lang(be))>:lang(be){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(ky),:not(:lang(ky))>:lang(ky){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(sah),:not(:lang(sah))>:lang(sah){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(ru),:not(:lang(ru))>:lang(ru){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(uk),:not(:lang(uk))>:lang(uk){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(zgh),:not(:lang(zgh))>:lang(zgh){quotes:"\ab" "\bb" "\201e" "\201d"}:root:lang(shi),:not(:lang(shi))>:lang(shi){quotes:"\ab" "\bb" "\201e" "\201d"}:root:lang(shi-Latn),:not(:lang(shi-Latn))>:lang(shi-Latn){quotes:"\ab" "\bb" "\201e" "\201d"}:root:lang(am),:not(:lang(am))>:lang(am){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(az-Cyrl),:not(:lang(az-Cyrl))>:lang(az-Cyrl){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(fa),:not(:lang(fa))>:lang(fa){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(fr-CH),:not(:lang(fr-CH))>:lang(fr-CH){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(gsw),:not(:lang(gsw))>:lang(gsw){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(jgo),:not(:lang(jgo))>:lang(jgo){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(kkj),:not(:lang(kkj))>:lang(kkj){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(mzn),:not(:lang(mzn))>:lang(mzn){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(fr),:not(:lang(fr))>:lang(fr){quotes:"\ab" "\bb" "\ab" "\bb"}:root:lang(hy),:not(:lang(hy))>:lang(hy){quotes:"\ab" "\bb" "\ab" "\bb"}:root:lang(yav),:not(:lang(yav))>:lang(yav){quotes:"\ab" "\bb" "\ab" "\bb"}:root:lang(ja),:not(:lang(ja))>:lang(ja){quotes:"\300c" "\300d" "\300e" "\300f"}:root:lang(yue),:not(:lang(yue))>:lang(yue){quotes:"\300c" "\300d" "\300e" "\300f"}:root:lang(zh-Hant),:not(:lang(zh-Hant))>:lang(zh-Hant){quotes:"\300c" "\300d" "\300e" "\300f"}}@layer elements{audio,canvas,embed,iframe,img,object,picture,svg,video{display:block;vertical-align:middle;max-width:100%}img,svg,video,canvas{height:auto}audio{width:100%;max-width:var(--tera1)}audio:not([controls]){display:none}figcaption{font-style:italic;font-size:var(--text-sm)}figure{&:has(*+figcaption){figcaption{margin-top:var(--figcaption-spacing)}}&:has(figcaption+*){figcaption{margin-bottom:var(--figcaption-spacing)}}}iframe{border:var(--border-sm) solid var(--ui-border-color)}}@layer elements{caption{caption-side:bottom;margin-top:var(--table-caption-spacing);font-size:var(--text-sm)}table{border-spacing:0;border:var(--table-border-width) solid var(--table-border-color);border-radius:var(--table-border-radius);background-color:var(--table-background-color)}th,td{text-align:start;padding:var(--table-padding);border-bottom:var(--table-border-width) solid var(--table-border-color);border-inline-start:var(--table-border-width) solid var(--table-border-color)}tr{th:first-child,td:first-child{border-inline-start-width:0}}tbody{tr:last-child{th,td{border-bottom-width:0}}}tfoot{th,td{border-top:var(--table-border-width) solid var(--table-border-color);border-bottom-width:0}}}@layer elements{::placeholder{opacity:var(--o-4)}input,button,textarea,select{font:inherit;color:var(--text-color)}button{color:var(--text-color)}fieldset{border:var(--fieldset-border-width) solid var(--fieldset-border-color);border-radius:var(--fieldset-border-radius);padding:var(--fieldset-padding);ul:has([type=checkbox],[type=radio]){padding-inline-start:0}>[aria-hidden]{margin-bottom:var(--sm3);font-size:var(--text-lg);grid-column:1 / -1}}:is(input,select,textarea):user-invalid{border-color:var(--input-border-color-invalid)}input{&:where(:not([type=checkbox],[type=radio])){height:var(--input-height)}&:where(:not([type=color],[type=file],[type=reset],[type=submit])){padding:var(--input-padding)}&:where(:not([type=color])){border-radius:var(--input-border-radius)}&:where(:not([type=file])){border:var(--input-border-width) solid var(--input-border-color)}&[type=file]{width:100%;accent-color:var(--text-color)}&[type=number]{padding-inline-end:var(--xs1)}}label{display:block;&:has(+:is(input,select,textarea)){margin-bottom:var(--label-spacing)}}legend{position:absolute;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);width:1px;height:1px;white-space:nowrap}meter{width:100%;background:var(--meter-track-color);border-radius:var(--meter-border-radius);height:var(--meter-height);&::-webkit-meter-bar{background:var(--meter-track-color)}&::-webkit-meter-bar,&::-webkit-meter-optimum-value,&::-webkit-meter-suboptimum-value,&::-webkit-meter-even-less-good-value{height:var(--meter-height);border:none;border-radius:var(--meter-border-radius)}&::-webkit-meter-even-less-good-value{background:var(--meter-low-color)}&::-webkit-meter-suboptimum-value{background:var(--meter-medium-color)}&::-webkit-meter-optimum-value{background:var(--meter-high-color)}&:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:var(--meter-low-color)}&:-moz-meter-sub-optimum::-moz-meter-bar{background:var(--meter-medium-color)}&:-moz-meter-optimum::-moz-meter-bar{background:var(--meter-high-color)}}progress{appearance:none;width:100%;height:var(--progress-height);background:var(--progress-track-color);border-radius:var(--progress-border-radius);border:none;&::-moz-progress-bar{background:var(--progress-color);border-radius:var(--progress-border-radius)}&::-webkit-progress-bar{width:100%;background:var(--progress-track-color);border-radius:var(--progress-border-radius);height:var(--progress-height)}&::-webkit-progress-value{background:var(--progress-color);border-radius:var(--progress-border-radius)}}select{--split: calc(100% - var(--select-icon-size));display:flex;appearance:none;height:var(--input-height);padding:var(--xs1) calc(var(--input-padding) + var(--md1)) var(--xs1) var(--input-padding);border:var(--input-border-width) solid var(--input-border-color);border-radius:var(--input-border-radius);background:linear-gradient(to right,var(--body-background-color) 0 var(--split),var(--text-color) var(--split) 100%);mask-image:var(--select-icon),linear-gradient(to right,transparent calc(var(--split) - 1px),red 0),linear-gradient(red 0 0);mask-size:var(--select-icon-size),auto,auto;mask-position:calc(100% - var(--xs1)) center,0 0,0 0;mask-repeat:no-repeat;mask-clip:padding-box,padding-box,border-box;mask-origin:padding-box,padding-box,border-box;mask-composite:add,exclude;&:disabled{--disabled-color: light-dark( hsl(from var(--text-color) h s 70%), hsl(from var(--text-color) h s 40%) );cursor:not-allowed;color:var(--disabled-color);background:linear-gradient(to right,var(--body-background-color) 0 var(--split),var(--disabled-color) var(--split) 100%)}&[multiple]{height:auto;padding:var(--input-padding);background:var(--body-background-color);mask-image:none}}textarea{width:100%;padding:var(--input-padding);border-radius:var(--input-border-radius);border:var(--input-border-width) solid var(--input-border-color);resize:vertical;&:not([rows]){min-height:6em}}}@layer elements{dialog{min-width:var(--dialog-min-width);max-width:var(--dialog-max-width);padding:var(--dialog-padding);border:var(--dialog-border-width) solid var(--dialog-border-color);background-color:var(--dialog-background-color);border-radius:var(--dialog-border-radius);&::backdrop{background:var(--dialog-backdrop-color);opacity:var(--dialog-backdrop-opacity)}[aria-label="close pop-up"]{position:absolute;top:var(--xs3);right:var( --xs3 );background:transparent;border:none;outline:none;cursor:pointer}p:last-of-type{margin-bottom:0}}details{padding:var(--details-padding);border:var(--details-border-width) solid var(--details-border-color);background-color:var(--details-background-color);border-radius:var(--details-border-radius);cursor:pointer;summary{display:flex;justify-content:space-between;font-weight:var(--bold);&::-webkit-details-marker{display:none}&:after{content:"";width:var(--details-icon-size);height:var(--details-icon-size);background-color:currentColor;mask-image:var(--details-icon);mask-size:contain;mask-repeat:no-repeat;transition:transform var(--transition)}}&[open]>summary{margin-bottom:var(--details-spacing);&:after{transform:rotate(180deg)}}p:last-of-type{margin-bottom:0}}}@layer global{:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.a11y-skipLink{position:fixed;z-index:var(--z-top);inset-block-start:-100vb;inset-inline-start:0;padding:.75em 1.25em;background-color:var(--body-background-color);color:var(--text-color)}.a11y-skipLink:focus{inset-block-start:0}.a11y-srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}}@layer global{@keyframes fadeFromOpaque{0%{opacity:1}}@keyframes fadeToOpaque{to{opacity:1}}@keyframes fadeFromTransparent{0%{opacity:0}}@keyframes fadeToTransparent{to{opacity:0}}}@layer global{.grid{display:grid;--grid-tc: repeat(4, 1fr);--grid-cs: 1;--grid-ce: -1;grid-template-columns:var(--grid-tc);grid-column-gap:var(--grid-column-gap);grid-row-gap:var(--grid-row-gap)}.grid-flush{grid-column-gap:0;grid-row-gap:0}.grid>.grid_item{display:block;appearance:none;-webkit-appearance:none}.grid[col="1"]{--grid-tc: repeat(1, 1fr) }.grid[col="2"]{--grid-tc: repeat(2, 1fr) }.grid[col="3"]{--grid-tc: repeat(3, 1fr) }.grid[col="4"]{--grid-tc: repeat(4, 1fr) }.grid[col="5"]{--grid-tc: repeat(5, 1fr) }.grid[col="6"]{--grid-tc: repeat(6, 1fr) }.grid[col="7"]{--grid-tc: repeat(7, 1fr) }.grid[col="8"]{--grid-tc: repeat(8, 1fr) }.grid[col="9"]{--grid-tc: repeat(9, 1fr) }.grid[col="10"]{--grid-tc: repeat(10, 1fr) }.grid[col="11"]{--grid-tc: repeat(11, 1fr) }.grid[col="12"]{--grid-tc: repeat(12, 1fr) }.grid[col="13"]{--grid-tc: repeat(13, 1fr) }.grid[col="14"]{--grid-tc: repeat(14, 1fr) }.grid[col="15"]{--grid-tc: repeat(15, 1fr) }.grid[col="16"]{--grid-tc: repeat(16, 1fr) }.grid[col="17"]{--grid-tc: repeat(17, 1fr) }.grid[col="18"]{--grid-tc: repeat(18, 1fr) }.grid[col="19"]{--grid-tc: repeat(19, 1fr) }.grid[col="20"]{--grid-tc: repeat(20, 1fr) }.grid[col="21"]{--grid-tc: repeat(21, 1fr) }.grid[col="22"]{--grid-tc: repeat(22, 1fr) }.grid[col="23"]{--grid-tc: repeat(23, 1fr) }.grid[col="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span^="1"]{--grid-cs: 1 }.grid>.grid_item[span^="2"]{--grid-cs: 2 }.grid>.grid_item[span^="3"]{--grid-cs: 3 }.grid>.grid_item[span^="4"]{--grid-cs: 4 }.grid>.grid_item[span^="5"]{--grid-cs: 5 }.grid>.grid_item[span^="6"]{--grid-cs: 6 }.grid>.grid_item[span^="7"]{--grid-cs: 7 }.grid>.grid_item[span^="8"]{--grid-cs: 8 }.grid>.grid_item[span^="9"]{--grid-cs: 9 }.grid>.grid_item[span^="10"]{--grid-cs: 10 }.grid>.grid_item[span^="11"]{--grid-cs: 11 }.grid>.grid_item[span^="12"]{--grid-cs: 12 }.grid>.grid_item[span^="13"]{--grid-cs: 13 }.grid>.grid_item[span^="14"]{--grid-cs: 14 }.grid>.grid_item[span^="15"]{--grid-cs: 15 }.grid>.grid_item[span^="16"]{--grid-cs: 16 }.grid>.grid_item[span^="17"]{--grid-cs: 17 }.grid>.grid_item[span^="18"]{--grid-cs: 18 }.grid>.grid_item[span^="19"]{--grid-cs: 19 }.grid>.grid_item[span^="20"]{--grid-cs: 20 }.grid>.grid_item[span^="21"]{--grid-cs: 21 }.grid>.grid_item[span^="22"]{--grid-cs: 22 }.grid>.grid_item[span^="23"]{--grid-cs: 23 }.grid>.grid_item[span^="24"]{--grid-cs: 24 }.grid>.grid_item[span$="+1"],.grid>.grid_item[span="1"]{--grid-ce: 1 }.grid>.grid_item[span$="+2"],.grid>.grid_item[span$="-1"],.grid>.grid_item[span="2"]{--grid-ce: 2 }.grid>.grid_item[span$="+3"],.grid>.grid_item[span$="-2"],.grid>.grid_item[span="3"]{--grid-ce: 3 }.grid>.grid_item[span$="+4"],.grid>.grid_item[span$="-3"],.grid>.grid_item[span="4"]{--grid-ce: 4 }.grid>.grid_item[span$="+5"],.grid>.grid_item[span$="-4"],.grid>.grid_item[span="5"]{--grid-ce: 5 }.grid>.grid_item[span$="+6"],.grid>.grid_item[span$="-5"],.grid>.grid_item[span="6"]{--grid-ce: 6 }.grid>.grid_item[span$="+7"],.grid>.grid_item[span$="-6"],.grid>.grid_item[span="7"]{--grid-ce: 7 }.grid>.grid_item[span$="+8"],.grid>.grid_item[span$="-7"],.grid>.grid_item[span="8"]{--grid-ce: 8 }.grid>.grid_item[span$="+9"],.grid>.grid_item[span$="-8"],.grid>.grid_item[span="9"]{--grid-ce: 9 }.grid>.grid_item[span$="+10"],.grid>.grid_item[span$="-9"],.grid>.grid_item[span="10"]{--grid-ce: 10 }.grid>.grid_item[span$="+11"],.grid>.grid_item[span$="-10"],.grid>.grid_item[span="11"]{--grid-ce: 11 }.grid>.grid_item[span$="+12"],.grid>.grid_item[span$="-11"],.grid>.grid_item[span="12"]{--grid-ce: 12 }.grid>.grid_item[span$="+13"],.grid>.grid_item[span$="-12"],.grid>.grid_item[span="13"]{--grid-ce: 13 }.grid>.grid_item[span$="+14"],.grid>.grid_item[span$="-13"],.grid>.grid_item[span="14"]{--grid-ce: 14 }.grid>.grid_item[span$="+15"],.grid>.grid_item[span$="-14"],.grid>.grid_item[span="15"]{--grid-ce: 15 }.grid>.grid_item[span$="+16"],.grid>.grid_item[span$="-15"],.grid>.grid_item[span="16"]{--grid-ce: 16 }.grid>.grid_item[span$="+17"],.grid>.grid_item[span$="-16"],.grid>.grid_item[span="17"]{--grid-ce: 17 }.grid>.grid_item[span$="+18"],.grid>.grid_item[span$="-17"],.grid>.grid_item[span="18"]{--grid-ce: 18 }.grid>.grid_item[span$="+19"],.grid>.grid_item[span$="-18"],.grid>.grid_item[span="19"]{--grid-ce: 19 }.grid>.grid_item[span$="+20"],.grid>.grid_item[span$="-19"],.grid>.grid_item[span="20"]{--grid-ce: 20 }.grid>.grid_item[span$="+21"],.grid>.grid_item[span$="-20"],.grid>.grid_item[span="21"]{--grid-ce: 21 }.grid>.grid_item[span$="+22"],.grid>.grid_item[span$="-21"],.grid>.grid_item[span="22"]{--grid-ce: 22 }.grid>.grid_item[span$="+23"],.grid>.grid_item[span$="-22"],.grid>.grid_item[span="23"]{--grid-ce: 23 }.grid>.grid_item[span$="+24"],.grid>.grid_item[span$="-23"],.grid>.grid_item[span="24"]{--grid-ce: 24 }.grid>.grid_item[span$="-24"]{--grid-ce: 25 }.grid>.grid_item[span]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span*="+"],.grid>.grid_item[span*="-"],.grid>.grid_item[span*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span*="-"],.grid>.grid_item[span*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span=row]{grid-column:1 / -1}@media only screen and (width>=768px){.grid[col-md="1"]{--grid-tc: repeat(1, 1fr) }.grid[col-md="2"]{--grid-tc: repeat(2, 1fr) }.grid[col-md="3"]{--grid-tc: repeat(3, 1fr) }.grid[col-md="4"]{--grid-tc: repeat(4, 1fr) }.grid[col-md="5"]{--grid-tc: repeat(5, 1fr) }.grid[col-md="6"]{--grid-tc: repeat(6, 1fr) }.grid[col-md="7"]{--grid-tc: repeat(7, 1fr) }.grid[col-md="8"]{--grid-tc: repeat(8, 1fr) }.grid[col-md="9"]{--grid-tc: repeat(9, 1fr) }.grid[col-md="10"]{--grid-tc: repeat(10, 1fr) }.grid[col-md="11"]{--grid-tc: repeat(11, 1fr) }.grid[col-md="12"]{--grid-tc: repeat(12, 1fr) }.grid[col-md="13"]{--grid-tc: repeat(13, 1fr) }.grid[col-md="14"]{--grid-tc: repeat(14, 1fr) }.grid[col-md="15"]{--grid-tc: repeat(15, 1fr) }.grid[col-md="16"]{--grid-tc: repeat(16, 1fr) }.grid[col-md="17"]{--grid-tc: repeat(17, 1fr) }.grid[col-md="18"]{--grid-tc: repeat(18, 1fr) }.grid[col-md="19"]{--grid-tc: repeat(19, 1fr) }.grid[col-md="20"]{--grid-tc: repeat(20, 1fr) }.grid[col-md="21"]{--grid-tc: repeat(21, 1fr) }.grid[col-md="22"]{--grid-tc: repeat(22, 1fr) }.grid[col-md="23"]{--grid-tc: repeat(23, 1fr) }.grid[col-md="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span-md^="1"]{--grid-cs: 1 }.grid>.grid_item[span-md^="2"]{--grid-cs: 2 }.grid>.grid_item[span-md^="3"]{--grid-cs: 3 }.grid>.grid_item[span-md^="4"]{--grid-cs: 4 }.grid>.grid_item[span-md^="5"]{--grid-cs: 5 }.grid>.grid_item[span-md^="6"]{--grid-cs: 6 }.grid>.grid_item[span-md^="7"]{--grid-cs: 7 }.grid>.grid_item[span-md^="8"]{--grid-cs: 8 }.grid>.grid_item[span-md^="9"]{--grid-cs: 9 }.grid>.grid_item[span-md^="10"]{--grid-cs: 10 }.grid>.grid_item[span-md^="11"]{--grid-cs: 11 }.grid>.grid_item[span-md^="12"]{--grid-cs: 12 }.grid>.grid_item[span-md^="13"]{--grid-cs: 13 }.grid>.grid_item[span-md^="14"]{--grid-cs: 14 }.grid>.grid_item[span-md^="15"]{--grid-cs: 15 }.grid>.grid_item[span-md^="16"]{--grid-cs: 16 }.grid>.grid_item[span-md^="17"]{--grid-cs: 17 }.grid>.grid_item[span-md^="18"]{--grid-cs: 18 }.grid>.grid_item[span-md^="19"]{--grid-cs: 19 }.grid>.grid_item[span-md^="20"]{--grid-cs: 20 }.grid>.grid_item[span-md^="21"]{--grid-cs: 21 }.grid>.grid_item[span-md^="22"]{--grid-cs: 22 }.grid>.grid_item[span-md^="23"]{--grid-cs: 23 }.grid>.grid_item[span-md^="24"]{--grid-cs: 24 }.grid>.grid_item[span-md$="+1"],.grid>.grid_item[span-md="1"]{--grid-ce: 1 }.grid>.grid_item[span-md$="+2"],.grid>.grid_item[span-md$="-1"],.grid>.grid_item[span-md="2"]{--grid-ce: 2 }.grid>.grid_item[span-md$="+3"],.grid>.grid_item[span-md$="-2"],.grid>.grid_item[span-md="3"]{--grid-ce: 3 }.grid>.grid_item[span-md$="+4"],.grid>.grid_item[span-md$="-3"],.grid>.grid_item[span-md="4"]{--grid-ce: 4 }.grid>.grid_item[span-md$="+5"],.grid>.grid_item[span-md$="-4"],.grid>.grid_item[span-md="5"]{--grid-ce: 5 }.grid>.grid_item[span-md$="+6"],.grid>.grid_item[span-md$="-5"],.grid>.grid_item[span-md="6"]{--grid-ce: 6 }.grid>.grid_item[span-md$="+7"],.grid>.grid_item[span-md$="-6"],.grid>.grid_item[span-md="7"]{--grid-ce: 7 }.grid>.grid_item[span-md$="+8"],.grid>.grid_item[span-md$="-7"],.grid>.grid_item[span-md="8"]{--grid-ce: 8 }.grid>.grid_item[span-md$="+9"],.grid>.grid_item[span-md$="-8"],.grid>.grid_item[span-md="9"]{--grid-ce: 9 }.grid>.grid_item[span-md$="+10"],.grid>.grid_item[span-md$="-9"],.grid>.grid_item[span-md="10"]{--grid-ce: 10 }.grid>.grid_item[span-md$="+11"],.grid>.grid_item[span-md$="-10"],.grid>.grid_item[span-md="11"]{--grid-ce: 11 }.grid>.grid_item[span-md$="+12"],.grid>.grid_item[span-md$="-11"],.grid>.grid_item[span-md="12"]{--grid-ce: 12 }.grid>.grid_item[span-md$="+13"],.grid>.grid_item[span-md$="-12"],.grid>.grid_item[span-md="13"]{--grid-ce: 13 }.grid>.grid_item[span-md$="+14"],.grid>.grid_item[span-md$="-13"],.grid>.grid_item[span-md="14"]{--grid-ce: 14 }.grid>.grid_item[span-md$="+15"],.grid>.grid_item[span-md$="-14"],.grid>.grid_item[span-md="15"]{--grid-ce: 15 }.grid>.grid_item[span-md$="+16"],.grid>.grid_item[span-md$="-15"],.grid>.grid_item[span-md="16"]{--grid-ce: 16 }.grid>.grid_item[span-md$="+17"],.grid>.grid_item[span-md$="-16"],.grid>.grid_item[span-md="17"]{--grid-ce: 17 }.grid>.grid_item[span-md$="+18"],.grid>.grid_item[span-md$="-17"],.grid>.grid_item[span-md="18"]{--grid-ce: 18 }.grid>.grid_item[span-md$="+19"],.grid>.grid_item[span-md$="-18"],.grid>.grid_item[span-md="19"]{--grid-ce: 19 }.grid>.grid_item[span-md$="+20"],.grid>.grid_item[span-md$="-19"],.grid>.grid_item[span-md="20"]{--grid-ce: 20 }.grid>.grid_item[span-md$="+21"],.grid>.grid_item[span-md$="-20"],.grid>.grid_item[span-md="21"]{--grid-ce: 21 }.grid>.grid_item[span-md$="+22"],.grid>.grid_item[span-md$="-21"],.grid>.grid_item[span-md="22"]{--grid-ce: 22 }.grid>.grid_item[span-md$="+23"],.grid>.grid_item[span-md$="-22"],.grid>.grid_item[span-md="23"]{--grid-ce: 23 }.grid>.grid_item[span-md$="+24"],.grid>.grid_item[span-md$="-23"],.grid>.grid_item[span-md="24"]{--grid-ce: 24 }.grid>.grid_item[span-md$="-24"]{--grid-ce: 25 }.grid>.grid_item[span-md]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span-md*="+"],.grid>.grid_item[span-md*="-"],.grid>.grid_item[span-md*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span-md*="-"],.grid>.grid_item[span-md*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span-md=row]{grid-column:1 / -1}}@media only screen and (width>=1024px){.grid[col-lg="1"]{--grid-tc: repeat(1, 1fr) }.grid[col-lg="2"]{--grid-tc: repeat(2, 1fr) }.grid[col-lg="3"]{--grid-tc: repeat(3, 1fr) }.grid[col-lg="4"]{--grid-tc: repeat(4, 1fr) }.grid[col-lg="5"]{--grid-tc: repeat(5, 1fr) }.grid[col-lg="6"]{--grid-tc: repeat(6, 1fr) }.grid[col-lg="7"]{--grid-tc: repeat(7, 1fr) }.grid[col-lg="8"]{--grid-tc: repeat(8, 1fr) }.grid[col-lg="9"]{--grid-tc: repeat(9, 1fr) }.grid[col-lg="10"]{--grid-tc: repeat(10, 1fr) }.grid[col-lg="11"]{--grid-tc: repeat(11, 1fr) }.grid[col-lg="12"]{--grid-tc: repeat(12, 1fr) }.grid[col-lg="13"]{--grid-tc: repeat(13, 1fr) }.grid[col-lg="14"]{--grid-tc: repeat(14, 1fr) }.grid[col-lg="15"]{--grid-tc: repeat(15, 1fr) }.grid[col-lg="16"]{--grid-tc: repeat(16, 1fr) }.grid[col-lg="17"]{--grid-tc: repeat(17, 1fr) }.grid[col-lg="18"]{--grid-tc: repeat(18, 1fr) }.grid[col-lg="19"]{--grid-tc: repeat(19, 1fr) }.grid[col-lg="20"]{--grid-tc: repeat(20, 1fr) }.grid[col-lg="21"]{--grid-tc: repeat(21, 1fr) }.grid[col-lg="22"]{--grid-tc: repeat(22, 1fr) }.grid[col-lg="23"]{--grid-tc: repeat(23, 1fr) }.grid[col-lg="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span-lg^="1"]{--grid-cs: 1 }.grid>.grid_item[span-lg^="2"]{--grid-cs: 2 }.grid>.grid_item[span-lg^="3"]{--grid-cs: 3 }.grid>.grid_item[span-lg^="4"]{--grid-cs: 4 }.grid>.grid_item[span-lg^="5"]{--grid-cs: 5 }.grid>.grid_item[span-lg^="6"]{--grid-cs: 6 }.grid>.grid_item[span-lg^="7"]{--grid-cs: 7 }.grid>.grid_item[span-lg^="8"]{--grid-cs: 8 }.grid>.grid_item[span-lg^="9"]{--grid-cs: 9 }.grid>.grid_item[span-lg^="10"]{--grid-cs: 10 }.grid>.grid_item[span-lg^="11"]{--grid-cs: 11 }.grid>.grid_item[span-lg^="12"]{--grid-cs: 12 }.grid>.grid_item[span-lg^="13"]{--grid-cs: 13 }.grid>.grid_item[span-lg^="14"]{--grid-cs: 14 }.grid>.grid_item[span-lg^="15"]{--grid-cs: 15 }.grid>.grid_item[span-lg^="16"]{--grid-cs: 16 }.grid>.grid_item[span-lg^="17"]{--grid-cs: 17 }.grid>.grid_item[span-lg^="18"]{--grid-cs: 18 }.grid>.grid_item[span-lg^="19"]{--grid-cs: 19 }.grid>.grid_item[span-lg^="20"]{--grid-cs: 20 }.grid>.grid_item[span-lg^="21"]{--grid-cs: 21 }.grid>.grid_item[span-lg^="22"]{--grid-cs: 22 }.grid>.grid_item[span-lg^="23"]{--grid-cs: 23 }.grid>.grid_item[span-lg^="24"]{--grid-cs: 24 }.grid>.grid_item[span-lg$="+1"],.grid>.grid_item[span-lg="1"]{--grid-ce: 1 }.grid>.grid_item[span-lg$="+2"],.grid>.grid_item[span-lg$="-1"],.grid>.grid_item[span-lg="2"]{--grid-ce: 2 }.grid>.grid_item[span-lg$="+3"],.grid>.grid_item[span-lg$="-2"],.grid>.grid_item[span-lg="3"]{--grid-ce: 3 }.grid>.grid_item[span-lg$="+4"],.grid>.grid_item[span-lg$="-3"],.grid>.grid_item[span-lg="4"]{--grid-ce: 4 }.grid>.grid_item[span-lg$="+5"],.grid>.grid_item[span-lg$="-4"],.grid>.grid_item[span-lg="5"]{--grid-ce: 5 }.grid>.grid_item[span-lg$="+6"],.grid>.grid_item[span-lg$="-5"],.grid>.grid_item[span-lg="6"]{--grid-ce: 6 }.grid>.grid_item[span-lg$="+7"],.grid>.grid_item[span-lg$="-6"],.grid>.grid_item[span-lg="7"]{--grid-ce: 7 }.grid>.grid_item[span-lg$="+8"],.grid>.grid_item[span-lg$="-7"],.grid>.grid_item[span-lg="8"]{--grid-ce: 8 }.grid>.grid_item[span-lg$="+9"],.grid>.grid_item[span-lg$="-8"],.grid>.grid_item[span-lg="9"]{--grid-ce: 9 }.grid>.grid_item[span-lg$="+10"],.grid>.grid_item[span-lg$="-9"],.grid>.grid_item[span-lg="10"]{--grid-ce: 10 }.grid>.grid_item[span-lg$="+11"],.grid>.grid_item[span-lg$="-10"],.grid>.grid_item[span-lg="11"]{--grid-ce: 11 }.grid>.grid_item[span-lg$="+12"],.grid>.grid_item[span-lg$="-11"],.grid>.grid_item[span-lg="12"]{--grid-ce: 12 }.grid>.grid_item[span-lg$="+13"],.grid>.grid_item[span-lg$="-12"],.grid>.grid_item[span-lg="13"]{--grid-ce: 13 }.grid>.grid_item[span-lg$="+14"],.grid>.grid_item[span-lg$="-13"],.grid>.grid_item[span-lg="14"]{--grid-ce: 14 }.grid>.grid_item[span-lg$="+15"],.grid>.grid_item[span-lg$="-14"],.grid>.grid_item[span-lg="15"]{--grid-ce: 15 }.grid>.grid_item[span-lg$="+16"],.grid>.grid_item[span-lg$="-15"],.grid>.grid_item[span-lg="16"]{--grid-ce: 16 }.grid>.grid_item[span-lg$="+17"],.grid>.grid_item[span-lg$="-16"],.grid>.grid_item[span-lg="17"]{--grid-ce: 17 }.grid>.grid_item[span-lg$="+18"],.grid>.grid_item[span-lg$="-17"],.grid>.grid_item[span-lg="18"]{--grid-ce: 18 }.grid>.grid_item[span-lg$="+19"],.grid>.grid_item[span-lg$="-18"],.grid>.grid_item[span-lg="19"]{--grid-ce: 19 }.grid>.grid_item[span-lg$="+20"],.grid>.grid_item[span-lg$="-19"],.grid>.grid_item[span-lg="20"]{--grid-ce: 20 }.grid>.grid_item[span-lg$="+21"],.grid>.grid_item[span-lg$="-20"],.grid>.grid_item[span-lg="21"]{--grid-ce: 21 }.grid>.grid_item[span-lg$="+22"],.grid>.grid_item[span-lg$="-21"],.grid>.grid_item[span-lg="22"]{--grid-ce: 22 }.grid>.grid_item[span-lg$="+23"],.grid>.grid_item[span-lg$="-22"],.grid>.grid_item[span-lg="23"]{--grid-ce: 23 }.grid>.grid_item[span-lg$="+24"],.grid>.grid_item[span-lg$="-23"],.grid>.grid_item[span-lg="24"]{--grid-ce: 24 }.grid>.grid_item[span-lg$="-24"]{--grid-ce: 25 }.grid>.grid_item[span-lg]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span-lg*="+"],.grid>.grid_item[span-lg*="-"],.grid>.grid_item[span-lg*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span-lg*="-"],.grid>.grid_item[span-lg*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span-lg=row]{grid-column:1 / -1}}@media only screen and (width>=1440px){.grid[col-xl="1"]{--grid-tc: repeat(1, 1fr) }.grid[col-xl="2"]{--grid-tc: repeat(2, 1fr) }.grid[col-xl="3"]{--grid-tc: repeat(3, 1fr) }.grid[col-xl="4"]{--grid-tc: repeat(4, 1fr) }.grid[col-xl="5"]{--grid-tc: repeat(5, 1fr) }.grid[col-xl="6"]{--grid-tc: repeat(6, 1fr) }.grid[col-xl="7"]{--grid-tc: repeat(7, 1fr) }.grid[col-xl="8"]{--grid-tc: repeat(8, 1fr) }.grid[col-xl="9"]{--grid-tc: repeat(9, 1fr) }.grid[col-xl="10"]{--grid-tc: repeat(10, 1fr) }.grid[col-xl="11"]{--grid-tc: repeat(11, 1fr) }.grid[col-xl="12"]{--grid-tc: repeat(12, 1fr) }.grid[col-xl="13"]{--grid-tc: repeat(13, 1fr) }.grid[col-xl="14"]{--grid-tc: repeat(14, 1fr) }.grid[col-xl="15"]{--grid-tc: repeat(15, 1fr) }.grid[col-xl="16"]{--grid-tc: repeat(16, 1fr) }.grid[col-xl="17"]{--grid-tc: repeat(17, 1fr) }.grid[col-xl="18"]{--grid-tc: repeat(18, 1fr) }.grid[col-xl="19"]{--grid-tc: repeat(19, 1fr) }.grid[col-xl="20"]{--grid-tc: repeat(20, 1fr) }.grid[col-xl="21"]{--grid-tc: repeat(21, 1fr) }.grid[col-xl="22"]{--grid-tc: repeat(22, 1fr) }.grid[col-xl="23"]{--grid-tc: repeat(23, 1fr) }.grid[col-xl="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span-xl^="1"]{--grid-cs: 1 }.grid>.grid_item[span-xl^="2"]{--grid-cs: 2 }.grid>.grid_item[span-xl^="3"]{--grid-cs: 3 }.grid>.grid_item[span-xl^="4"]{--grid-cs: 4 }.grid>.grid_item[span-xl^="5"]{--grid-cs: 5 }.grid>.grid_item[span-xl^="6"]{--grid-cs: 6 }.grid>.grid_item[span-xl^="7"]{--grid-cs: 7 }.grid>.grid_item[span-xl^="8"]{--grid-cs: 8 }.grid>.grid_item[span-xl^="9"]{--grid-cs: 9 }.grid>.grid_item[span-xl^="10"]{--grid-cs: 10 }.grid>.grid_item[span-xl^="11"]{--grid-cs: 11 }.grid>.grid_item[span-xl^="12"]{--grid-cs: 12 }.grid>.grid_item[span-xl^="13"]{--grid-cs: 13 }.grid>.grid_item[span-xl^="14"]{--grid-cs: 14 }.grid>.grid_item[span-xl^="15"]{--grid-cs: 15 }.grid>.grid_item[span-xl^="16"]{--grid-cs: 16 }.grid>.grid_item[span-xl^="17"]{--grid-cs: 17 }.grid>.grid_item[span-xl^="18"]{--grid-cs: 18 }.grid>.grid_item[span-xl^="19"]{--grid-cs: 19 }.grid>.grid_item[span-xl^="20"]{--grid-cs: 20 }.grid>.grid_item[span-xl^="21"]{--grid-cs: 21 }.grid>.grid_item[span-xl^="22"]{--grid-cs: 22 }.grid>.grid_item[span-xl^="23"]{--grid-cs: 23 }.grid>.grid_item[span-xl^="24"]{--grid-cs: 24 }.grid>.grid_item[span-xl$="+1"],.grid>.grid_item[span-xl="1"]{--grid-ce: 1 }.grid>.grid_item[span-xl$="+2"],.grid>.grid_item[span-xl$="-1"],.grid>.grid_item[span-xl="2"]{--grid-ce: 2 }.grid>.grid_item[span-xl$="+3"],.grid>.grid_item[span-xl$="-2"],.grid>.grid_item[span-xl="3"]{--grid-ce: 3 }.grid>.grid_item[span-xl$="+4"],.grid>.grid_item[span-xl$="-3"],.grid>.grid_item[span-xl="4"]{--grid-ce: 4 }.grid>.grid_item[span-xl$="+5"],.grid>.grid_item[span-xl$="-4"],.grid>.grid_item[span-xl="5"]{--grid-ce: 5 }.grid>.grid_item[span-xl$="+6"],.grid>.grid_item[span-xl$="-5"],.grid>.grid_item[span-xl="6"]{--grid-ce: 6 }.grid>.grid_item[span-xl$="+7"],.grid>.grid_item[span-xl$="-6"],.grid>.grid_item[span-xl="7"]{--grid-ce: 7 }.grid>.grid_item[span-xl$="+8"],.grid>.grid_item[span-xl$="-7"],.grid>.grid_item[span-xl="8"]{--grid-ce: 8 }.grid>.grid_item[span-xl$="+9"],.grid>.grid_item[span-xl$="-8"],.grid>.grid_item[span-xl="9"]{--grid-ce: 9 }.grid>.grid_item[span-xl$="+10"],.grid>.grid_item[span-xl$="-9"],.grid>.grid_item[span-xl="10"]{--grid-ce: 10 }.grid>.grid_item[span-xl$="+11"],.grid>.grid_item[span-xl$="-10"],.grid>.grid_item[span-xl="11"]{--grid-ce: 11 }.grid>.grid_item[span-xl$="+12"],.grid>.grid_item[span-xl$="-11"],.grid>.grid_item[span-xl="12"]{--grid-ce: 12 }.grid>.grid_item[span-xl$="+13"],.grid>.grid_item[span-xl$="-12"],.grid>.grid_item[span-xl="13"]{--grid-ce: 13 }.grid>.grid_item[span-xl$="+14"],.grid>.grid_item[span-xl$="-13"],.grid>.grid_item[span-xl="14"]{--grid-ce: 14 }.grid>.grid_item[span-xl$="+15"],.grid>.grid_item[span-xl$="-14"],.grid>.grid_item[span-xl="15"]{--grid-ce: 15 }.grid>.grid_item[span-xl$="+16"],.grid>.grid_item[span-xl$="-15"],.grid>.grid_item[span-xl="16"]{--grid-ce: 16 }.grid>.grid_item[span-xl$="+17"],.grid>.grid_item[span-xl$="-16"],.grid>.grid_item[span-xl="17"]{--grid-ce: 17 }.grid>.grid_item[span-xl$="+18"],.grid>.grid_item[span-xl$="-17"],.grid>.grid_item[span-xl="18"]{--grid-ce: 18 }.grid>.grid_item[span-xl$="+19"],.grid>.grid_item[span-xl$="-18"],.grid>.grid_item[span-xl="19"]{--grid-ce: 19 }.grid>.grid_item[span-xl$="+20"],.grid>.grid_item[span-xl$="-19"],.grid>.grid_item[span-xl="20"]{--grid-ce: 20 }.grid>.grid_item[span-xl$="+21"],.grid>.grid_item[span-xl$="-20"],.grid>.grid_item[span-xl="21"]{--grid-ce: 21 }.grid>.grid_item[span-xl$="+22"],.grid>.grid_item[span-xl$="-21"],.grid>.grid_item[span-xl="22"]{--grid-ce: 22 }.grid>.grid_item[span-xl$="+23"],.grid>.grid_item[span-xl$="-22"],.grid>.grid_item[span-xl="23"]{--grid-ce: 23 }.grid>.grid_item[span-xl$="+24"],.grid>.grid_item[span-xl$="-23"],.grid>.grid_item[span-xl="24"]{--grid-ce: 24 }.grid>.grid_item[span-xl$="-24"]{--grid-ce: 25 }.grid>.grid_item[span-xl]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span-xl*="+"],.grid>.grid_item[span-xl*="-"],.grid>.grid_item[span-xl*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span-xl*="-"],.grid>.grid_item[span-xl*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span-xl=row]{grid-column:1 / -1}}}@layer global{.layout{display:flex;flex-direction:column;width:100vw;min-height:100vh;.layout_content{flex:1}}.layout_content_main{container:main / inline-size}.layout-centered{.layout_content{display:grid;gap:var(--sm3);grid-template-columns:1fr minmax(0,var(--layout-content-width)) 1fr;margin-top:var(--lg1);margin-bottom:var(--sm1);@media(width>=768px){margin-top:var(--xl3);margin-bottom:var(--md3);gap:var(--md3)}}.layout_content_main{grid-column:2}}.layout-sidebar{.layout_content{@media(width>=768px){display:grid;grid-template-columns:var(--layout-aside-width) minmax(0,1fr)}}.layout_content_main{padding:var(--sm2);@media(width>=768px){grid-row:1;grid-column:2;padding:var(--lg1) var(--md2)}}.layout_content_aside{@media(width>=768px){grid-row:1;grid-column:1;padding:var(--lg1) var(--md3)}}}.layout-sidebar-end{.layout_content{@media(width>=768px){grid-template-columns:minmax(0,1fr) var(--layout-aside-width)}}.layout_content_main{@media(width>=768px){grid-column:1}}.layout_content_aside{@media(width>=768px){grid-column:2}}}.layout-docs{.layout_content{@media(width>=768px){display:grid;grid-template-columns:var(--layout-aside-width) minmax(0,1fr)}@media(width>=1024px){grid-template-columns:var(--layout-aside-width) minmax(0,var(--layout-content-width)) var(--layout-toc-width)}}.layout_content_main{padding:var(--sm2);@media(width>=768px){grid-row:1;grid-column:2;padding:var(--lg1) var(--md2)}}.layout_content_aside{display:none;@media(width>=768px){display:block;grid-row:1;grid-column:1;padding:var(--lg1) var(--md3)}}.layout_content_aside-toc{@media(width>=768px){display:none}@media(width>=1024px){display:block;grid-row:1;grid-column:3;padding:var(--lg1) var(--md3)}}}.layout-split{.layout_content{display:grid;@media(width>=768px){grid-template-columns:1fr 1fr}}}.layout-cover{min-height:100dvh;.layout_content{display:grid;place-items:center}}}@layer global{@scope(.prose)to (.not-prose){:is(p,ul,ol,blockquote,table):has(+:is(h1,h2,h3,h4)){margin-bottom:calc(var(--prose-spacing) * 2)}p,ul,ol,dl{margin-bottom:var(--prose-spacing);p,ul,ol,dl{margin-bottom:0}}ul,ol{ul,ol{margin-inline-start:0;padding-inline-start:var(--sm2)}li{margin-bottom:.5em;&::marker{color:light-dark(var(--base-300),var(--base-600))}}}ul{margin-inline-start:var(--sm2);list-style-type:"\2192 "}ol{margin-inline-start:var(--md2);list-style-type:decimal-leading-zero;li::marker{font-size:var(--text-sm)}}table{margin-top:var(--md1);margin-bottom:var(--md1)}}}@layer global{.wrap{display:grid;grid-template-columns:1fr var(--wrap-width) 1fr;>*,>astro-island>*,>astro-slot>*,>astro-static-slot>*{grid-column:2;padding-inline:var(--wrap-spacing);@media(width>=768px){padding-inline:var(--wrap-md-spacing)}@media(width>=1024px){padding-inline:var(--wrap-lg-spacing)}}}.wrap-sm{--wrap-width: var(--wrap-width-sm)}.wrap-md{--wrap-width: var(--wrap-width-md)}.wrap-lg{--wrap-width: var(--wrap-width-lg)}.wrap_content-fullBleed{grid-column:1 / -1;width:100%;object-fit:cover}}@layer helpers{.c-base-0{color:var(--base-0)!important}.bdc-base-0{border-color:var(--base-0)!important}.bgc-base-0{background-color:var(--base-0)!important}.c-base-50{color:var(--base-50)!important}.bdc-base-50{border-color:var(--base-50)!important}.bgc-base-50{background-color:var(--base-50)!important}.c-base-100{color:var(--base-100)!important}.bdc-base-100{border-color:var(--base-100)!important}.bgc-base-100{background-color:var(--base-100)!important}.c-base-200{color:var(--base-200)!important}.bdc-base-200{border-color:var(--base-200)!important}.bgc-base-200{background-color:var(--base-200)!important}.c-base-300{color:var(--base-300)!important}.bdc-base-300{border-color:var(--base-300)!important}.bgc-base-300{background-color:var(--base-300)!important}.c-base-400{color:var(--base-400)!important}.bdc-base-400{border-color:var(--base-400)!important}.bgc-base-400{background-color:var(--base-400)!important}.c-base-500{color:var(--base-500)!important}.bdc-base-500{border-color:var(--base-500)!important}.bgc-base-500{background-color:var(--base-500)!important}.c-base-600{color:var(--base-600)!important}.bdc-base-600{border-color:var(--base-600)!important}.bgc-base-600{background-color:var(--base-600)!important}.c-base-700{color:var(--base-700)!important}.bdc-base-700{border-color:var(--base-700)!important}.bgc-base-700{background-color:var(--base-700)!important}.c-base-800{color:var(--base-800)!important}.bdc-base-800{border-color:var(--base-800)!important}.bgc-base-800{background-color:var(--base-800)!important}.c-base-900{color:var(--base-900)!important}.bdc-base-900{border-color:var(--base-900)!important}.bgc-base-900{background-color:var(--base-900)!important}.c-base-950{color:var(--base-950)!important}.bdc-base-950{border-color:var(--base-950)!important}.bgc-base-950{background-color:var(--base-950)!important}.c-primary-50{color:var(--primary-50)!important}.bdc-primary-50{border-color:var(--primary-50)!important}.bgc-primary-50{background-color:var(--primary-50)!important}.c-primary-100{color:var(--primary-100)!important}.bdc-primary-100{border-color:var(--primary-100)!important}.bgc-primary-100{background-color:var(--primary-100)!important}.c-primary-200{color:var(--primary-200)!important}.bdc-primary-200{border-color:var(--primary-200)!important}.bgc-primary-200{background-color:var(--primary-200)!important}.c-primary-300{color:var(--primary-300)!important}.bdc-primary-300{border-color:var(--primary-300)!important}.bgc-primary-300{background-color:var(--primary-300)!important}.c-primary-400{color:var(--primary-400)!important}.bdc-primary-400{border-color:var(--primary-400)!important}.bgc-primary-400{background-color:var(--primary-400)!important}.c-primary-500{color:var(--primary-500)!important}.bdc-primary-500{border-color:var(--primary-500)!important}.bgc-primary-500{background-color:var(--primary-500)!important}.c-primary-600{color:var(--primary-600)!important}.bdc-primary-600{border-color:var(--primary-600)!important}.bgc-primary-600{background-color:var(--primary-600)!important}.c-primary-700{color:var(--primary-700)!important}.bdc-primary-700{border-color:var(--primary-700)!important}.bgc-primary-700{background-color:var(--primary-700)!important}.c-primary-800{color:var(--primary-800)!important}.bdc-primary-800{border-color:var(--primary-800)!important}.bgc-primary-800{background-color:var(--primary-800)!important}.c-primary-900{color:var(--primary-900)!important}.bdc-primary-900{border-color:var(--primary-900)!important}.bgc-primary-900{background-color:var(--primary-900)!important}.c-primary-950{color:var(--primary-950)!important}.bdc-primary-950{border-color:var(--primary-950)!important}.bgc-primary-950{background-color:var(--primary-950)!important}.c-yes-100{color:var(--yes-100)!important}.bdc-yes-100{border-color:var(--yes-100)!important}.bgc-yes-100{background-color:var(--yes-100)!important}.c-yes-200{color:var(--yes-200)!important}.bdc-yes-200{border-color:var(--yes-200)!important}.bgc-yes-200{background-color:var(--yes-200)!important}.c-yes-300{color:var(--yes-300)!important}.bdc-yes-300{border-color:var(--yes-300)!important}.bgc-yes-300{background-color:var(--yes-300)!important}.c-yes-400{color:var(--yes-400)!important}.bdc-yes-400{border-color:var(--yes-400)!important}.bgc-yes-400{background-color:var(--yes-400)!important}.c-yes-500{color:var(--yes-500)!important}.bdc-yes-500{border-color:var(--yes-500)!important}.bgc-yes-500{background-color:var(--yes-500)!important}.c-no-100{color:var(--no-100)!important}.bdc-no-100{border-color:var(--no-100)!important}.bgc-no-100{background-color:var(--no-100)!important}.c-no-200{color:var(--no-200)!important}.bdc-no-200{border-color:var(--no-200)!important}.bgc-no-200{background-color:var(--no-200)!important}.c-no-300{color:var(--no-300)!important}.bdc-no-300{border-color:var(--no-300)!important}.bgc-no-300{background-color:var(--no-300)!important}.c-no-400{color:var(--no-400)!important}.bdc-no-400{border-color:var(--no-400)!important}.bgc-no-400{background-color:var(--no-400)!important}.c-no-500{color:var(--no-500)!important}.bdc-no-500{border-color:var(--no-500)!important}.bgc-no-500{background-color:var(--no-500)!important}.c-maybe-100{color:var(--maybe-100)!important}.bdc-maybe-100{border-color:var(--maybe-100)!important}.bgc-maybe-100{background-color:var(--maybe-100)!important}.c-maybe-200{color:var(--maybe-200)!important}.bdc-maybe-200{border-color:var(--maybe-200)!important}.bgc-maybe-200{background-color:var(--maybe-200)!important}.c-maybe-300{color:var(--maybe-300)!important}.bdc-maybe-300{border-color:var(--maybe-300)!important}.bgc-maybe-300{background-color:var(--maybe-300)!important}.c-maybe-400{color:var(--maybe-400)!important}.bdc-maybe-400{border-color:var(--maybe-400)!important}.bgc-maybe-400{background-color:var(--maybe-400)!important}.c-maybe-500{color:var(--maybe-500)!important}.bdc-maybe-500{border-color:var(--maybe-500)!important}.bgc-maybe-500{background-color:var(--maybe-500)!important}}@layer helpers{body.dev{--baseline: 8;background-size:100% calc(var(--baseline) * 1px)!important;background-image:linear-gradient(to bottom,#0000 calc((var(--baseline) - 1) * 1px),#ff69b4 calc(var(--baseline) * 1px))!important}.dev-error{position:fixed!important;top:var(--md1)!important;left:var(--md1)!important;z-index:var(--z-top)!important;padding:var(--sm1)!important;font-size:1rem!important;color:var(--danger-500)!important;background:var(--danger-100)!important;border:1px solid var(--danger-500)!important;border-radius:var(--radius-md)!important}}@layer helpers{.of-auto,.overflow-auto{overflow:auto!important}.of-hidden,.overflow-hidden{overflow:hidden!important}.of-clip,.overflow-clip{overflow:clip!important}.of-visible,.overflow-visible{overflow:visible!important}.of-scroll,.overflow-scroll{overflow:scroll!important}.of-x-auto,.overflow-x-auto{overflow-x:auto!important}.of-y-auto,.overflow-y-auto{overflow-y:auto!important}.of-x-hidden,.overflow-x-hidden{overflow-x:hidden!important}.of-y-hidden,.overflow-y-hidden{overflow-y:hidden!important}.of-x-clip,.overflow-x-clip{overflow-x:clip!important}.of-y-clip,.overflow-y-clip{overflow-y:clip!important}.of-x-visible,.overflow-x-visible{overflow-x:visible!important}.of-y-visible,.overflow-y-visible{overflow-y:visible!important}.of-x-scroll,.overflow-x-scroll{overflow-x:scroll!important}.of-y-scroll,.overflow-y-scroll{overflow-y:scroll!important}.position-static{position:static!important}.position-fixed{position:fixed!important}.position-absolute{position:absolute!important}.position-relative{position:relative!important}.position-sticky{position:sticky!important}.visibility-visible{visibility:visible!important}.visibility-hidden{visibility:hidden!important}.visibility-collapse{visibility:collapse!important}.z-auto{z-index:auto!important}.z-bottom{z-index:var(--z-bottom)!important}.z-0{z-index:var(--z-0)!important}.z-1{z-index:var(--z-1)!important}.z-2{z-index:var(--z-2)!important}.z-3{z-index:var(--z-3)!important}.z-4{z-index:var(--z-4)!important}.z-5{z-index:var(--z-5)!important}.z-top{z-index:var(--z-top)!important}}@layer helpers{.o-0{opacity:var(--o-0)!important}.o-1{opacity:var(--o-1)!important}.o-2{opacity:var(--o-2)!important}.o-3{opacity:var(--o-3)!important}.o-4{opacity:var(--o-4)!important}.o-5{opacity:var(--o-5)!important}}@layer helpers{.ar-square{aspect-ratio:var(--ar-square)!important}.ar-landscape{aspect-ratio:var(--ar-landscape)!important}.ar-portrait{aspect-ratio:var(--ar-portrait)!important}.ar-widescreen{aspect-ratio:var(--ar-widescreen)!important}.ar-golden{aspect-ratio:var(--ar-golden)!important}}@layer helpers{.w-0{width:0!important}.h-0{height:0!important}.m-0{margin:0!important}.mt-0{margin-top:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mr-0{margin-right:0!important}.mis-0{margin-inline-start:0!important}.mie-0{margin-inline-end:0!important}.p-0{padding:0!important}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.pis-0{padding-inline-start:0!important}.pie-0{padding-inline-end:0!important}.w-xs1{width:var(--xs1)!important}.h-xs1{height:var(--xs1)!important}.m-xs1{margin:var(--xs1)!important}.mt-xs1{margin-top:var(--xs1)!important}.mb-xs1{margin-bottom:var(--xs1)!important}.ml-xs1{margin-left:var(--xs1)!important}.mr-xs1{margin-right:var(--xs1)!important}.mis-xs1{margin-inline-start:var(--xs1)!important}.mie-xs1{margin-inline-end:var(--xs1)!important}.p-xs1{padding:var(--xs1)!important}.pt-xs1{padding-top:var(--xs1)!important}.pb-xs1{padding-bottom:var(--xs1)!important}.pl-xs1{padding-left:var(--xs1)!important}.pr-xs1{padding-right:var(--xs1)!important}.pis-xs1{padding-inline-start:var(--xs1)!important}.pie-xs1{padding-inline-end:var(--xs1)!important}.w-xs2{width:var(--xs2)!important}.h-xs2{height:var(--xs2)!important}.m-xs2{margin:var(--xs2)!important}.mt-xs2{margin-top:var(--xs2)!important}.mb-xs2{margin-bottom:var(--xs2)!important}.ml-xs2{margin-left:var(--xs2)!important}.mr-xs2{margin-right:var(--xs2)!important}.mis-xs2{margin-inline-start:var(--xs2)!important}.mie-xs2{margin-inline-end:var(--xs2)!important}.p-xs2{padding:var(--xs2)!important}.pt-xs2{padding-top:var(--xs2)!important}.pb-xs2{padding-bottom:var(--xs2)!important}.pl-xs2{padding-left:var(--xs2)!important}.pr-xs2{padding-right:var(--xs2)!important}.pis-xs2{padding-inline-start:var(--xs2)!important}.pie-xs2{padding-inline-end:var(--xs2)!important}.w-xs3{width:var(--xs3)!important}.h-xs3{height:var(--xs3)!important}.m-xs3{margin:var(--xs3)!important}.mt-xs3{margin-top:var(--xs3)!important}.mb-xs3{margin-bottom:var(--xs3)!important}.ml-xs3{margin-left:var(--xs3)!important}.mr-xs3{margin-right:var(--xs3)!important}.mis-xs3{margin-inline-start:var(--xs3)!important}.mie-xs3{margin-inline-end:var(--xs3)!important}.p-xs3{padding:var(--xs3)!important}.pt-xs3{padding-top:var(--xs3)!important}.pb-xs3{padding-bottom:var(--xs3)!important}.pl-xs3{padding-left:var(--xs3)!important}.pr-xs3{padding-right:var(--xs3)!important}.pis-xs3{padding-inline-start:var(--xs3)!important}.pie-xs3{padding-inline-end:var(--xs3)!important}.w-sm1{width:var(--sm1)!important}.h-sm1{height:var(--sm1)!important}.m-sm1{margin:var(--sm1)!important}.mt-sm1{margin-top:var(--sm1)!important}.mb-sm1{margin-bottom:var(--sm1)!important}.ml-sm1{margin-left:var(--sm1)!important}.mr-sm1{margin-right:var(--sm1)!important}.mis-sm1{margin-inline-start:var(--sm1)!important}.mie-sm1{margin-inline-end:var(--sm1)!important}.p-sm1{padding:var(--sm1)!important}.pt-sm1{padding-top:var(--sm1)!important}.pb-sm1{padding-bottom:var(--sm1)!important}.pl-sm1{padding-left:var(--sm1)!important}.pr-sm1{padding-right:var(--sm1)!important}.pis-sm1{padding-inline-start:var(--sm1)!important}.pie-sm1{padding-inline-end:var(--sm1)!important}.w-sm2{width:var(--sm2)!important}.h-sm2{height:var(--sm2)!important}.m-sm2{margin:var(--sm2)!important}.mt-sm2{margin-top:var(--sm2)!important}.mb-sm2{margin-bottom:var(--sm2)!important}.ml-sm2{margin-left:var(--sm2)!important}.mr-sm2{margin-right:var(--sm2)!important}.mis-sm2{margin-inline-start:var(--sm2)!important}.mie-sm2{margin-inline-end:var(--sm2)!important}.p-sm2{padding:var(--sm2)!important}.pt-sm2{padding-top:var(--sm2)!important}.pb-sm2{padding-bottom:var(--sm2)!important}.pl-sm2{padding-left:var(--sm2)!important}.pr-sm2{padding-right:var(--sm2)!important}.pis-sm2{padding-inline-start:var(--sm2)!important}.pie-sm2{padding-inline-end:var(--sm2)!important}.w-sm3{width:var(--sm3)!important}.h-sm3{height:var(--sm3)!important}.m-sm3{margin:var(--sm3)!important}.mt-sm3{margin-top:var(--sm3)!important}.mb-sm3{margin-bottom:var(--sm3)!important}.ml-sm3{margin-left:var(--sm3)!important}.mr-sm3{margin-right:var(--sm3)!important}.mis-sm3{margin-inline-start:var(--sm3)!important}.mie-sm3{margin-inline-end:var(--sm3)!important}.p-sm3{padding:var(--sm3)!important}.pt-sm3{padding-top:var(--sm3)!important}.pb-sm3{padding-bottom:var(--sm3)!important}.pl-sm3{padding-left:var(--sm3)!important}.pr-sm3{padding-right:var(--sm3)!important}.pis-sm3{padding-inline-start:var(--sm3)!important}.pie-sm3{padding-inline-end:var(--sm3)!important}.w-md1{width:var(--md1)!important}.h-md1{height:var(--md1)!important}.m-md1{margin:var(--md1)!important}.mt-md1{margin-top:var(--md1)!important}.mb-md1{margin-bottom:var(--md1)!important}.ml-md1{margin-left:var(--md1)!important}.mr-md1{margin-right:var(--md1)!important}.mis-md1{margin-inline-start:var(--md1)!important}.mie-md1{margin-inline-end:var(--md1)!important}.p-md1{padding:var(--md1)!important}.pt-md1{padding-top:var(--md1)!important}.pb-md1{padding-bottom:var(--md1)!important}.pl-md1{padding-left:var(--md1)!important}.pr-md1{padding-right:var(--md1)!important}.pis-md1{padding-inline-start:var(--md1)!important}.pie-md1{padding-inline-end:var(--md1)!important}.w-md2{width:var(--md2)!important}.h-md2{height:var(--md2)!important}.m-md2{margin:var(--md2)!important}.mt-md2{margin-top:var(--md2)!important}.mb-md2{margin-bottom:var(--md2)!important}.ml-md2{margin-left:var(--md2)!important}.mr-md2{margin-right:var(--md2)!important}.mis-md2{margin-inline-start:var(--md2)!important}.mie-md2{margin-inline-end:var(--md2)!important}.p-md2{padding:var(--md2)!important}.pt-md2{padding-top:var(--md2)!important}.pb-md2{padding-bottom:var(--md2)!important}.pl-md2{padding-left:var(--md2)!important}.pr-md2{padding-right:var(--md2)!important}.pis-md2{padding-inline-start:var(--md2)!important}.pie-md2{padding-inline-end:var(--md2)!important}.w-md3{width:var(--md3)!important}.h-md3{height:var(--md3)!important}.m-md3{margin:var(--md3)!important}.mt-md3{margin-top:var(--md3)!important}.mb-md3{margin-bottom:var(--md3)!important}.ml-md3{margin-left:var(--md3)!important}.mr-md3{margin-right:var(--md3)!important}.mis-md3{margin-inline-start:var(--md3)!important}.mie-md3{margin-inline-end:var(--md3)!important}.p-md3{padding:var(--md3)!important}.pt-md3{padding-top:var(--md3)!important}.pb-md3{padding-bottom:var(--md3)!important}.pl-md3{padding-left:var(--md3)!important}.pr-md3{padding-right:var(--md3)!important}.pis-md3{padding-inline-start:var(--md3)!important}.pie-md3{padding-inline-end:var(--md3)!important}.w-lg1{width:var(--lg1)!important}.h-lg1{height:var(--lg1)!important}.m-lg1{margin:var(--lg1)!important}.mt-lg1{margin-top:var(--lg1)!important}.mb-lg1{margin-bottom:var(--lg1)!important}.ml-lg1{margin-left:var(--lg1)!important}.mr-lg1{margin-right:var(--lg1)!important}.mis-lg1{margin-inline-start:var(--lg1)!important}.mie-lg1{margin-inline-end:var(--lg1)!important}.p-lg1{padding:var(--lg1)!important}.pt-lg1{padding-top:var(--lg1)!important}.pb-lg1{padding-bottom:var(--lg1)!important}.pl-lg1{padding-left:var(--lg1)!important}.pr-lg1{padding-right:var(--lg1)!important}.pis-lg1{padding-inline-start:var(--lg1)!important}.pie-lg1{padding-inline-end:var(--lg1)!important}.w-lg2{width:var(--lg2)!important}.h-lg2{height:var(--lg2)!important}.m-lg2{margin:var(--lg2)!important}.mt-lg2{margin-top:var(--lg2)!important}.mb-lg2{margin-bottom:var(--lg2)!important}.ml-lg2{margin-left:var(--lg2)!important}.mr-lg2{margin-right:var(--lg2)!important}.mis-lg2{margin-inline-start:var(--lg2)!important}.mie-lg2{margin-inline-end:var(--lg2)!important}.p-lg2{padding:var(--lg2)!important}.pt-lg2{padding-top:var(--lg2)!important}.pb-lg2{padding-bottom:var(--lg2)!important}.pl-lg2{padding-left:var(--lg2)!important}.pr-lg2{padding-right:var(--lg2)!important}.pis-lg2{padding-inline-start:var(--lg2)!important}.pie-lg2{padding-inline-end:var(--lg2)!important}.w-lg3{width:var(--lg3)!important}.h-lg3{height:var(--lg3)!important}.m-lg3{margin:var(--lg3)!important}.mt-lg3{margin-top:var(--lg3)!important}.mb-lg3{margin-bottom:var(--lg3)!important}.ml-lg3{margin-left:var(--lg3)!important}.mr-lg3{margin-right:var(--lg3)!important}.mis-lg3{margin-inline-start:var(--lg3)!important}.mie-lg3{margin-inline-end:var(--lg3)!important}.p-lg3{padding:var(--lg3)!important}.pt-lg3{padding-top:var(--lg3)!important}.pb-lg3{padding-bottom:var(--lg3)!important}.pl-lg3{padding-left:var(--lg3)!important}.pr-lg3{padding-right:var(--lg3)!important}.pis-lg3{padding-inline-start:var(--lg3)!important}.pie-lg3{padding-inline-end:var(--lg3)!important}.w-xl1{width:var(--xl1)!important}.h-xl1{height:var(--xl1)!important}.m-xl1{margin:var(--xl1)!important}.mt-xl1{margin-top:var(--xl1)!important}.mb-xl1{margin-bottom:var(--xl1)!important}.ml-xl1{margin-left:var(--xl1)!important}.mr-xl1{margin-right:var(--xl1)!important}.mis-xl1{margin-inline-start:var(--xl1)!important}.mie-xl1{margin-inline-end:var(--xl1)!important}.p-xl1{padding:var(--xl1)!important}.pt-xl1{padding-top:var(--xl1)!important}.pb-xl1{padding-bottom:var(--xl1)!important}.pl-xl1{padding-left:var(--xl1)!important}.pr-xl1{padding-right:var(--xl1)!important}.pis-xl1{padding-inline-start:var(--xl1)!important}.pie-xl1{padding-inline-end:var(--xl1)!important}.w-xl2{width:var(--xl2)!important}.h-xl2{height:var(--xl2)!important}.m-xl2{margin:var(--xl2)!important}.mt-xl2{margin-top:var(--xl2)!important}.mb-xl2{margin-bottom:var(--xl2)!important}.ml-xl2{margin-left:var(--xl2)!important}.mr-xl2{margin-right:var(--xl2)!important}.mis-xl2{margin-inline-start:var(--xl2)!important}.mie-xl2{margin-inline-end:var(--xl2)!important}.p-xl2{padding:var(--xl2)!important}.pt-xl2{padding-top:var(--xl2)!important}.pb-xl2{padding-bottom:var(--xl2)!important}.pl-xl2{padding-left:var(--xl2)!important}.pr-xl2{padding-right:var(--xl2)!important}.pis-xl2{padding-inline-start:var(--xl2)!important}.pie-xl2{padding-inline-end:var(--xl2)!important}.w-xl3{width:var(--xl3)!important}.h-xl3{height:var(--xl3)!important}.m-xl3{margin:var(--xl3)!important}.mt-xl3{margin-top:var(--xl3)!important}.mb-xl3{margin-bottom:var(--xl3)!important}.ml-xl3{margin-left:var(--xl3)!important}.mr-xl3{margin-right:var(--xl3)!important}.mis-xl3{margin-inline-start:var(--xl3)!important}.mie-xl3{margin-inline-end:var(--xl3)!important}.p-xl3{padding:var(--xl3)!important}.pt-xl3{padding-top:var(--xl3)!important}.pb-xl3{padding-bottom:var(--xl3)!important}.pl-xl3{padding-left:var(--xl3)!important}.pr-xl3{padding-right:var(--xl3)!important}.pis-xl3{padding-inline-start:var(--xl3)!important}.pie-xl3{padding-inline-end:var(--xl3)!important}.w-xxl1{width:var(--xxl1)!important}.h-xxl1{height:var(--xxl1)!important}.m-xxl1{margin:var(--xxl1)!important}.mt-xxl1{margin-top:var(--xxl1)!important}.mb-xxl1{margin-bottom:var(--xxl1)!important}.ml-xxl1{margin-left:var(--xxl1)!important}.mr-xxl1{margin-right:var(--xxl1)!important}.mis-xxl1{margin-inline-start:var(--xxl1)!important}.mie-xxl1{margin-inline-end:var(--xxl1)!important}.p-xxl1{padding:var(--xxl1)!important}.pt-xxl1{padding-top:var(--xxl1)!important}.pb-xxl1{padding-bottom:var(--xxl1)!important}.pl-xxl1{padding-left:var(--xxl1)!important}.pr-xxl1{padding-right:var(--xxl1)!important}.pis-xxl1{padding-inline-start:var(--xxl1)!important}.pie-xxl1{padding-inline-end:var(--xxl1)!important}.w-xxl2{width:var(--xxl2)!important}.h-xxl2{height:var(--xxl2)!important}.m-xxl2{margin:var(--xxl2)!important}.mt-xxl2{margin-top:var(--xxl2)!important}.mb-xxl2{margin-bottom:var(--xxl2)!important}.ml-xxl2{margin-left:var(--xxl2)!important}.mr-xxl2{margin-right:var(--xxl2)!important}.mis-xxl2{margin-inline-start:var(--xxl2)!important}.mie-xxl2{margin-inline-end:var(--xxl2)!important}.p-xxl2{padding:var(--xxl2)!important}.pt-xxl2{padding-top:var(--xxl2)!important}.pb-xxl2{padding-bottom:var(--xxl2)!important}.pl-xxl2{padding-left:var(--xxl2)!important}.pr-xxl2{padding-right:var(--xxl2)!important}.pis-xxl2{padding-inline-start:var(--xxl2)!important}.pie-xxl2{padding-inline-end:var(--xxl2)!important}.w-xxl3{width:var(--xxl3)!important}.h-xxl3{height:var(--xxl3)!important}.m-xxl3{margin:var(--xxl3)!important}.mt-xxl3{margin-top:var(--xxl3)!important}.mb-xxl3{margin-bottom:var(--xxl3)!important}.ml-xxl3{margin-left:var(--xxl3)!important}.mr-xxl3{margin-right:var(--xxl3)!important}.mis-xxl3{margin-inline-start:var(--xxl3)!important}.mie-xxl3{margin-inline-end:var(--xxl3)!important}.p-xxl3{padding:var(--xxl3)!important}.pt-xxl3{padding-top:var(--xxl3)!important}.pb-xxl3{padding-bottom:var(--xxl3)!important}.pl-xxl3{padding-left:var(--xxl3)!important}.pr-xxl3{padding-right:var(--xxl3)!important}.pis-xxl3{padding-inline-start:var(--xxl3)!important}.pie-xxl3{padding-inline-end:var(--xxl3)!important}.w-mega1{width:var(--mega1)!important}.h-mega1{height:var(--mega1)!important}.m-mega1{margin:var(--mega1)!important}.mt-mega1{margin-top:var(--mega1)!important}.mb-mega1{margin-bottom:var(--mega1)!important}.ml-mega1{margin-left:var(--mega1)!important}.mr-mega1{margin-right:var(--mega1)!important}.mis-mega1{margin-inline-start:var(--mega1)!important}.mie-mega1{margin-inline-end:var(--mega1)!important}.p-mega1{padding:var(--mega1)!important}.pt-mega1{padding-top:var(--mega1)!important}.pb-mega1{padding-bottom:var(--mega1)!important}.pl-mega1{padding-left:var(--mega1)!important}.pr-mega1{padding-right:var(--mega1)!important}.pis-mega1{padding-inline-start:var(--mega1)!important}.pie-mega1{padding-inline-end:var(--mega1)!important}.w-mega2{width:var(--mega2)!important}.h-mega2{height:var(--mega2)!important}.m-mega2{margin:var(--mega2)!important}.mt-mega2{margin-top:var(--mega2)!important}.mb-mega2{margin-bottom:var(--mega2)!important}.ml-mega2{margin-left:var(--mega2)!important}.mr-mega2{margin-right:var(--mega2)!important}.mis-mega2{margin-inline-start:var(--mega2)!important}.mie-mega2{margin-inline-end:var(--mega2)!important}.p-mega2{padding:var(--mega2)!important}.pt-mega2{padding-top:var(--mega2)!important}.pb-mega2{padding-bottom:var(--mega2)!important}.pl-mega2{padding-left:var(--mega2)!important}.pr-mega2{padding-right:var(--mega2)!important}.pis-mega2{padding-inline-start:var(--mega2)!important}.pie-mega2{padding-inline-end:var(--mega2)!important}.w-mega3{width:var(--mega3)!important}.h-mega3{height:var(--mega3)!important}.m-mega3{margin:var(--mega3)!important}.mt-mega3{margin-top:var(--mega3)!important}.mb-mega3{margin-bottom:var(--mega3)!important}.ml-mega3{margin-left:var(--mega3)!important}.mr-mega3{margin-right:var(--mega3)!important}.mis-mega3{margin-inline-start:var(--mega3)!important}.mie-mega3{margin-inline-end:var(--mega3)!important}.p-mega3{padding:var(--mega3)!important}.pt-mega3{padding-top:var(--mega3)!important}.pb-mega3{padding-bottom:var(--mega3)!important}.pl-mega3{padding-left:var(--mega3)!important}.pr-mega3{padding-right:var(--mega3)!important}.pis-mega3{padding-inline-start:var(--mega3)!important}.pie-mega3{padding-inline-end:var(--mega3)!important}.w-giga1{width:var(--giga1)!important}.h-giga1{height:var(--giga1)!important}.m-giga1{margin:var(--giga1)!important}.mt-giga1{margin-top:var(--giga1)!important}.mb-giga1{margin-bottom:var(--giga1)!important}.ml-giga1{margin-left:var(--giga1)!important}.mr-giga1{margin-right:var(--giga1)!important}.mis-giga1{margin-inline-start:var(--giga1)!important}.mie-giga1{margin-inline-end:var(--giga1)!important}.p-giga1{padding:var(--giga1)!important}.pt-giga1{padding-top:var(--giga1)!important}.pb-giga1{padding-bottom:var(--giga1)!important}.pl-giga1{padding-left:var(--giga1)!important}.pr-giga1{padding-right:var(--giga1)!important}.pis-giga1{padding-inline-start:var(--giga1)!important}.pie-giga1{padding-inline-end:var(--giga1)!important}.w-giga2{width:var(--giga2)!important}.h-giga2{height:var(--giga2)!important}.m-giga2{margin:var(--giga2)!important}.mt-giga2{margin-top:var(--giga2)!important}.mb-giga2{margin-bottom:var(--giga2)!important}.ml-giga2{margin-left:var(--giga2)!important}.mr-giga2{margin-right:var(--giga2)!important}.mis-giga2{margin-inline-start:var(--giga2)!important}.mie-giga2{margin-inline-end:var(--giga2)!important}.p-giga2{padding:var(--giga2)!important}.pt-giga2{padding-top:var(--giga2)!important}.pb-giga2{padding-bottom:var(--giga2)!important}.pl-giga2{padding-left:var(--giga2)!important}.pr-giga2{padding-right:var(--giga2)!important}.pis-giga2{padding-inline-start:var(--giga2)!important}.pie-giga2{padding-inline-end:var(--giga2)!important}.w-giga3{width:var(--giga3)!important}.h-giga3{height:var(--giga3)!important}.m-giga3{margin:var(--giga3)!important}.mt-giga3{margin-top:var(--giga3)!important}.mb-giga3{margin-bottom:var(--giga3)!important}.ml-giga3{margin-left:var(--giga3)!important}.mr-giga3{margin-right:var(--giga3)!important}.mis-giga3{margin-inline-start:var(--giga3)!important}.mie-giga3{margin-inline-end:var(--giga3)!important}.p-giga3{padding:var(--giga3)!important}.pt-giga3{padding-top:var(--giga3)!important}.pb-giga3{padding-bottom:var(--giga3)!important}.pl-giga3{padding-left:var(--giga3)!important}.pr-giga3{padding-right:var(--giga3)!important}.pis-giga3{padding-inline-start:var(--giga3)!important}.pie-giga3{padding-inline-end:var(--giga3)!important}.w-tera1{width:var(--tera1)!important}.h-tera1{height:var(--tera1)!important}.m-tera1{margin:var(--tera1)!important}.mt-tera1{margin-top:var(--tera1)!important}.mb-tera1{margin-bottom:var(--tera1)!important}.ml-tera1{margin-left:var(--tera1)!important}.mr-tera1{margin-right:var(--tera1)!important}.mis-tera1{margin-inline-start:var(--tera1)!important}.mie-tera1{margin-inline-end:var(--tera1)!important}.p-tera1{padding:var(--tera1)!important}.pt-tera1{padding-top:var(--tera1)!important}.pb-tera1{padding-bottom:var(--tera1)!important}.pl-tera1{padding-left:var(--tera1)!important}.pr-tera1{padding-right:var(--tera1)!important}.pis-tera1{padding-inline-start:var(--tera1)!important}.pie-tera1{padding-inline-end:var(--tera1)!important}.w-tera2{width:var(--tera2)!important}.h-tera2{height:var(--tera2)!important}.m-tera2{margin:var(--tera2)!important}.mt-tera2{margin-top:var(--tera2)!important}.mb-tera2{margin-bottom:var(--tera2)!important}.ml-tera2{margin-left:var(--tera2)!important}.mr-tera2{margin-right:var(--tera2)!important}.mis-tera2{margin-inline-start:var(--tera2)!important}.mie-tera2{margin-inline-end:var(--tera2)!important}.p-tera2{padding:var(--tera2)!important}.pt-tera2{padding-top:var(--tera2)!important}.pb-tera2{padding-bottom:var(--tera2)!important}.pl-tera2{padding-left:var(--tera2)!important}.pr-tera2{padding-right:var(--tera2)!important}.pis-tera2{padding-inline-start:var(--tera2)!important}.pie-tera2{padding-inline-end:var(--tera2)!important}.w-tera3{width:var(--tera3)!important}.h-tera3{height:var(--tera3)!important}.m-tera3{margin:var(--tera3)!important}.mt-tera3{margin-top:var(--tera3)!important}.mb-tera3{margin-bottom:var(--tera3)!important}.ml-tera3{margin-left:var(--tera3)!important}.mr-tera3{margin-right:var(--tera3)!important}.mis-tera3{margin-inline-start:var(--tera3)!important}.mie-tera3{margin-inline-end:var(--tera3)!important}.p-tera3{padding:var(--tera3)!important}.pt-tera3{padding-top:var(--tera3)!important}.pb-tera3{padding-bottom:var(--tera3)!important}.pl-tera3{padding-left:var(--tera3)!important}.pr-tera3{padding-right:var(--tera3)!important}.pis-tera3{padding-inline-start:var(--tera3)!important}.pie-tera3{padding-inline-end:var(--tera3)!important}}@layer helpers{.font-text{font-family:var(--text)!important}.font-display{font-family:var(--display)!important}.font-mono{font-family:var(--mono)!important}.font-italic{font-style:italic!important}.font-normal{font-style:normal!important}.font-extra-light{font-weight:var(--extra-light)!important}.font-light{font-weight:var(--light)!important}.font-book{font-weight:var(--book)!important}.font-semi-bold{font-weight:var(--semi-bold)!important}.font-bold{font-weight:var(--bold)!important}.font-black{font-weight:var(--black)!important}.text-xs{font-size:var(--text-xs)!important}.text-sm{font-size:var(--text-sm)!important}.text-md{font-size:var(--text-md)!important}.text-lg{font-size:var(--text-lg)!important}.text-xl{font-size:var(--text-xl)!important}.display-sm{font-size:var(--display-sm)!important}.display-md{font-size:var(--display-md)!important}.display-lg{font-size:var(--display-lg)!important}.display-xl{font-size:var(--display-xl)!important}.display-mega{font-size:var(--display-mega)!important}.display-giga{font-size:var(--display-giga)!important}.tracking-sm{letter-spacing:var(--tracking-sm)!important}.tracking-md{letter-spacing:var(--tracking-md)!important}.tracking-lg{letter-spacing:var(--tracking-lg)!important}.tracking-xl{letter-spacing:var(--tracking-xl)!important}.tracking-xxl{letter-spacing:var(--tracking-xxl)!important}.leading-xs{line-height:var(--leading-xs)!important}.leading-sm{line-height:var(--leading-sm)!important}.leading-md{line-height:var(--leading-md)!important}.leading-lg{line-height:var(--leading-lg)!important}.leading-xl{line-height:var(--leading-xl)!important}.leading-xxl{line-height:var(--leading-xxl)!important}.text-left{text-align:left!important}.text-center{text-align:center!important}.text-right{text-align:right!important}.text-justify{text-align:justify!important}.text-start{text-align:start!important}.text-end{text-align:end!important}.text-uppercase{text-transform:uppercase!important}.text-lowercase{text-transform:lowercase!important}.text-capitalize{text-transform:capitalize!important}} +@layer base,elements,global,components,theme.defaults,theme.overrides,helpers;@layer base{*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion:reduce){*,:before,:after{animation-delay:-1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}}:where(:not(dialog)){margin:0}html,body{min-height:100%}}@layer elements{body{line-sizing:normal;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;background-color:var(--body-background-color);color:var(--text-color);font-family:var(--text);line-height:var(--body-line-height);&:has(.body-is-locked){overflow:hidden}}}@layer elements{::selection{color:var(--selection-color);background-color:var(--selection-background-color)}:where(a,u,ins,abbr){text-underline-offset:2px}a{font-weight:var(--link-font-weight);color:var(--link-color);&:where(:hover){color:var(--link-color-hover);-webkit-text-decoration:none;text-decoration:none}}address{width:max-content;max-width:100%;padding:var(--sm1) var(--sm3);font-style:normal;background-color:light-dark(var(--base-50),var(--base-900));border:var(--xs2) solid transparent;border-image:8 repeating-linear-gradient(-45deg,var(--no-500) 0,var(--no-500) var(--xs2),transparent 0,transparent calc(var(--xs2) * 2),var(--primary-500) 0,var(--primary-500) calc(var(--xs2) * 3),transparent 0,transparent calc(var(--xs2) * 4))}abbr{position:relative;cursor:help;&:after{position:relative;top:calc(var(--xs1) * -1);width:var(--sm1);height:var(--sm1);display:inline-block;content:"";background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='circle-help'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M9.09%209a3%203%200%200%201%205.83%201c0%202-3%203-3%203'/%3E%3Cpath%20d='M12%2017h.01'/%3E%3C/svg%3E");background-size:contain}&:hover:before{width:max-content;max-width:400px;position:absolute;left:50%;padding:var(--xs1) var(--xs3);content:attr(title);color:var(--base-0);background-color:var(--base-900);opacity:var(--o-4);border-radius:var(--radius-sm);transform:translate(-50%,-2em)}}blockquote{position:relative;margin-bottom:var(--prose-spacing);padding-block:var(--blockquote-padding-block);padding-inline:var(--blockquote-padding-inline);font-style:italic;background-color:var(--blockquote-background-color);border-radius:var(--blockquote-border-radius);&:before{content:"";position:absolute;top:0;inset-inline-start:0;width:var(--blockquote-accent-width);height:100%;border-start-start-radius:var(--blockquote-border-radius);border-end-start-radius:var(--blockquote-border-radius);background:var(--blockquote-accent-color)}p{&:first-child:before{content:open-quote}&:last-child{margin-bottom:0;&:after{content:close-quote}}}}cite{font-style:italic}code,var,kbd{font-family:var(--mono);font-size:.9em;font-style:normal;color:var(--text-code-muted-color)}:is(code,var,kbd):not(h1 *,h2 *,h3 *,h4 *,h5 *,h6 *,pre *){padding:.15em .3em;color:var(--text-code-color);background-color:var(--text-code-background-color);border-radius:var(--radius-sm)}dt{font-weight:var(--bold)}dd+dt{margin-top:.5em}del{text-decoration-color:var(--danger-500);text-decoration-style:wavy}h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{overflow-wrap:break-word;text-wrap:balance}h1,.h1,h2,.h2,h3,.h3,h4,.h4{font-family:var(--heading-font);font-weight:var(--heading-weight);letter-spacing:var(--heading-letter-spacing)}h1,.h1{margin-bottom:var(--heading-spacing-h1);font-size:var(--heading-font-size-h1);line-height:var(--heading-line-height-h1)}h2,.h2{margin-bottom:var(--heading-spacing-h2);font-size:var(--heading-font-size-h2);line-height:var(--heading-line-height-h2)}h3,.h3{margin-bottom:var(--heading-spacing-h3);font-size:var(--heading-font-size-h3);line-height:var(--heading-line-height-h3)}h4,.h4{margin-bottom:var(--heading-spacing-h4);font-size:var(--heading-font-size-h4);line-height:var(--heading-line-height-h4)}h5,.h5{margin-bottom:var(--heading-spacing-h5);font-size:var(--heading-font-size-h5);line-height:var(--heading-line-height-h5)}h6,.h6{margin-bottom:var(--heading-spacing-h6);font-size:var(--heading-font-size-h6);line-height:var(--heading-line-height-h6)}:where(h1,h2,h3):has(+:is(h2,h3,h4)){margin-bottom:var(--heading-spacing-consecutive)}hr{display:flex;justify-content:center;align-items:center;height:0;border-style:solid;border-width:var(--border-sm) 0 0;color:var(--ui-border-color);overflow:visible;&:after{content:var(--hr-content);padding:0 var(--xs1);line-height:1;letter-spacing:var(--tracking-sm);background-color:var(--body-background-color)}}:where(hr):has(+:is(p)){margin-bottom:var(--prose-spacing)}ins{padding:.15em .3em;color:var(--ins-color);background-color:var(--ins-background-color);border-radius:var(--radius-sm);-webkit-text-decoration:none;text-decoration:none;&:before{content:"+ "}}mark{padding:.15em .5em;background:var(--marker-color);border-radius:1em 0}:where(ol,ul){list-style-type:none;padding:0}pre{font-family:var(--mono);font-size:var(--pre-font-size);white-space:pre-wrap;border-radius:var(--pre-border-radius)}q{font-style:italic}s{text-decoration-color:light-dark(var(--base-950),var(--base-50));text-decoration-style:wavy}sub,sup{line-height:1}}@layer elements{:root{quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(af),:not(:lang(af))>:lang(af){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ak),:not(:lang(ak))>:lang(ak){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(asa),:not(:lang(asa))>:lang(asa){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(az),:not(:lang(az))>:lang(az){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(bem),:not(:lang(bem))>:lang(bem){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(bez),:not(:lang(bez))>:lang(bez){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(bn),:not(:lang(bn))>:lang(bn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(brx),:not(:lang(brx))>:lang(brx){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(cgg),:not(:lang(cgg))>:lang(cgg){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(chr),:not(:lang(chr))>:lang(chr){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(cy),:not(:lang(cy))>:lang(cy){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(da),:not(:lang(da))>:lang(da){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(dav),:not(:lang(dav))>:lang(dav){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(dje),:not(:lang(dje))>:lang(dje){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(dz),:not(:lang(dz))>:lang(dz){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ebu),:not(:lang(ebu))>:lang(ebu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ee),:not(:lang(ee))>:lang(ee){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(en),:not(:lang(en))>:lang(en){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(fil),:not(:lang(fil))>:lang(fil){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(fo),:not(:lang(fo))>:lang(fo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ga),:not(:lang(ga))>:lang(ga){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(gd),:not(:lang(gd))>:lang(gd){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(gl),:not(:lang(gl))>:lang(gl){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(gu),:not(:lang(gu))>:lang(gu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(guz),:not(:lang(guz))>:lang(guz){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ha),:not(:lang(ha))>:lang(ha){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(hi),:not(:lang(hi))>:lang(hi){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(id),:not(:lang(id))>:lang(id){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ig),:not(:lang(ig))>:lang(ig){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(jmc),:not(:lang(jmc))>:lang(jmc){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kam),:not(:lang(kam))>:lang(kam){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kde),:not(:lang(kde))>:lang(kde){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kea),:not(:lang(kea))>:lang(kea){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(khq),:not(:lang(khq))>:lang(khq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ki),:not(:lang(ki))>:lang(ki){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kln),:not(:lang(kln))>:lang(kln){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(km),:not(:lang(km))>:lang(km){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kn),:not(:lang(kn))>:lang(kn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ko),:not(:lang(ko))>:lang(ko){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ksb),:not(:lang(ksb))>:lang(ksb){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lg),:not(:lang(lg))>:lang(lg){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ln),:not(:lang(ln))>:lang(ln){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lo),:not(:lang(lo))>:lang(lo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lrc),:not(:lang(lrc))>:lang(lrc){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lu),:not(:lang(lu))>:lang(lu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(luo),:not(:lang(luo))>:lang(luo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lv),:not(:lang(lv))>:lang(lv){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mas),:not(:lang(mas))>:lang(mas){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mer),:not(:lang(mer))>:lang(mer){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mfe),:not(:lang(mfe))>:lang(mfe){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mgo),:not(:lang(mgo))>:lang(mgo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ml),:not(:lang(ml))>:lang(ml){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mn),:not(:lang(mn))>:lang(mn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mr),:not(:lang(mr))>:lang(mr){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ms),:not(:lang(ms))>:lang(ms){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mt),:not(:lang(mt))>:lang(mt){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(my),:not(:lang(my))>:lang(my){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(naq),:not(:lang(naq))>:lang(naq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(nd),:not(:lang(nd))>:lang(nd){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ne),:not(:lang(ne))>:lang(ne){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(nus),:not(:lang(nus))>:lang(nus){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(nyn),:not(:lang(nyn))>:lang(nyn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(pa),:not(:lang(pa))>:lang(pa){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(pt),:not(:lang(pt))>:lang(pt){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(rof),:not(:lang(rof))>:lang(rof){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(rwk),:not(:lang(rwk))>:lang(rwk){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(saq),:not(:lang(saq))>:lang(saq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(sbp),:not(:lang(sbp))>:lang(sbp){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(seh),:not(:lang(seh))>:lang(seh){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ses),:not(:lang(ses))>:lang(ses){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(si),:not(:lang(si))>:lang(si){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(so),:not(:lang(so))>:lang(so){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(sw),:not(:lang(sw))>:lang(sw){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ta),:not(:lang(ta))>:lang(ta){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(te),:not(:lang(te))>:lang(te){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(teo),:not(:lang(teo))>:lang(teo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(th),:not(:lang(th))>:lang(th){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(to),:not(:lang(to))>:lang(to){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(tr),:not(:lang(tr))>:lang(tr){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(twq),:not(:lang(twq))>:lang(twq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(tzm),:not(:lang(tzm))>:lang(tzm){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(uz-Cyrl),:not(:lang(uz-Cyrl))>:lang(uz-Cyrl){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vai),:not(:lang(vai))>:lang(vai){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vai-Latn),:not(:lang(vai-Latn))>:lang(vai-Latn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vi),:not(:lang(vi))>:lang(vi){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vun),:not(:lang(vun))>:lang(vun){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(xog),:not(:lang(xog))>:lang(xog){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(yo),:not(:lang(yo))>:lang(yo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(yue-Hans),:not(:lang(yue-Hans))>:lang(yue-Hans){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(zh),:not(:lang(zh))>:lang(zh){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(zu),:not(:lang(zu))>:lang(zu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(uz),:not(:lang(uz))>:lang(uz){quotes:"\201c" "\201d" "\2019" "\2018"}:root:lang(eu),:not(:lang(eu))>:lang(eu){quotes:"\201c" "\201d" "\201c" "\201d"}:root:lang(tk),:not(:lang(tk))>:lang(tk){quotes:"\201c" "\201d" "\201c" "\201d"}:root:lang(ar),:not(:lang(ar))>:lang(ar){quotes:"\201d" "\201c" "\2019" "\2018"}:root:lang(ur),:not(:lang(ur))>:lang(ur){quotes:"\201d" "\201c" "\2019" "\2018"}:root:lang(fi),:not(:lang(fi))>:lang(fi){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(he),:not(:lang(he))>:lang(he){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(lag),:not(:lang(lag))>:lang(lag){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(rn),:not(:lang(rn))>:lang(rn){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(sn),:not(:lang(sn))>:lang(sn){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(sv),:not(:lang(sv))>:lang(sv){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(sr),:not(:lang(sr))>:lang(sr){quotes:"\201e" "\201c" "\2018" "\2018"}:root:lang(sr-Latn),:not(:lang(sr-Latn))>:lang(sr-Latn){quotes:"\201e" "\201c" "\2018" "\2018"}:root:lang(bg),:not(:lang(bg))>:lang(bg){quotes:"\201e" "\201c" "\201e" "\201c"}:root:lang(lt),:not(:lang(lt))>:lang(lt){quotes:"\201e" "\201c" "\201e" "\201c"}:root:lang(bs-Cyrl),:not(:lang(bs-Cyrl))>:lang(bs-Cyrl){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(cs),:not(:lang(cs))>:lang(cs){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(de),:not(:lang(de))>:lang(de){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(dsb),:not(:lang(dsb))>:lang(dsb){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(et),:not(:lang(et))>:lang(et){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(hr),:not(:lang(hr))>:lang(hr){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(hsb),:not(:lang(hsb))>:lang(hsb){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(is),:not(:lang(is))>:lang(is){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(lb),:not(:lang(lb))>:lang(lb){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(luy),:not(:lang(luy))>:lang(luy){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(mk),:not(:lang(mk))>:lang(mk){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(sk),:not(:lang(sk))>:lang(sk){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(sl),:not(:lang(sl))>:lang(sl){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(ka),:not(:lang(ka))>:lang(ka){quotes:"\201e" "\201c" "\ab" "\bb"}:root:lang(bs),:not(:lang(bs))>:lang(bs){quotes:"\201e" "\201d" "\2018" "\2019"}:root:lang(agq),:not(:lang(agq))>:lang(agq){quotes:"\201e" "\201d" "\201a" "\2019"}:root:lang(ff),:not(:lang(ff))>:lang(ff){quotes:"\201e" "\201d" "\201a" "\2019"}:root:lang(nmg),:not(:lang(nmg))>:lang(nmg){quotes:"\201e" "\201d" "\ab" "\bb"}:root:lang(ro),:not(:lang(ro))>:lang(ro){quotes:"\201e" "\201d" "\ab" "\bb"}:root:lang(pl),:not(:lang(pl))>:lang(pl){quotes:"\201e" "\201d" "\ab" "\bb"}:root:lang(hu),:not(:lang(hu))>:lang(hu){quotes:"\201e" "\201d" "\bb" "\ab"}:root:lang(nl),:not(:lang(nl))>:lang(nl){quotes:"\2018" "\2019" "\201c" "\201d"}:root:lang(ti-ER),:not(:lang(ti-ER))>:lang(ti-ER){quotes:"\2018" "\2019" "\201c" "\201d"}:root:lang(dua),:not(:lang(dua))>:lang(dua){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(ksf),:not(:lang(ksf))>:lang(ksf){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(rw),:not(:lang(rw))>:lang(rw){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(nn),:not(:lang(nn))>:lang(nn){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(nb),:not(:lang(nb))>:lang(nb){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(ast),:not(:lang(ast))>:lang(ast){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(bm),:not(:lang(bm))>:lang(bm){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(br),:not(:lang(br))>:lang(br){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(ca),:not(:lang(ca))>:lang(ca){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(dyo),:not(:lang(dyo))>:lang(dyo){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(el),:not(:lang(el))>:lang(el){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(es),:not(:lang(es))>:lang(es){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(ewo),:not(:lang(ewo))>:lang(ewo){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(mg),:not(:lang(mg))>:lang(mg){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(mua),:not(:lang(mua))>:lang(mua){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(sg),:not(:lang(sg))>:lang(sg){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(it),:not(:lang(it))>:lang(it){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(kab),:not(:lang(kab))>:lang(kab){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(kk),:not(:lang(kk))>:lang(kk){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(pt-PT),:not(:lang(pt-PT))>:lang(pt-PT){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(nnh),:not(:lang(nnh))>:lang(nnh){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(sq),:not(:lang(sq))>:lang(sq){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(bas),:not(:lang(bas))>:lang(bas){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(be),:not(:lang(be))>:lang(be){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(ky),:not(:lang(ky))>:lang(ky){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(sah),:not(:lang(sah))>:lang(sah){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(ru),:not(:lang(ru))>:lang(ru){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(uk),:not(:lang(uk))>:lang(uk){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(zgh),:not(:lang(zgh))>:lang(zgh){quotes:"\ab" "\bb" "\201e" "\201d"}:root:lang(shi),:not(:lang(shi))>:lang(shi){quotes:"\ab" "\bb" "\201e" "\201d"}:root:lang(shi-Latn),:not(:lang(shi-Latn))>:lang(shi-Latn){quotes:"\ab" "\bb" "\201e" "\201d"}:root:lang(am),:not(:lang(am))>:lang(am){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(az-Cyrl),:not(:lang(az-Cyrl))>:lang(az-Cyrl){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(fa),:not(:lang(fa))>:lang(fa){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(fr-CH),:not(:lang(fr-CH))>:lang(fr-CH){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(gsw),:not(:lang(gsw))>:lang(gsw){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(jgo),:not(:lang(jgo))>:lang(jgo){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(kkj),:not(:lang(kkj))>:lang(kkj){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(mzn),:not(:lang(mzn))>:lang(mzn){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(fr),:not(:lang(fr))>:lang(fr){quotes:"\ab" "\bb" "\ab" "\bb"}:root:lang(hy),:not(:lang(hy))>:lang(hy){quotes:"\ab" "\bb" "\ab" "\bb"}:root:lang(yav),:not(:lang(yav))>:lang(yav){quotes:"\ab" "\bb" "\ab" "\bb"}:root:lang(ja),:not(:lang(ja))>:lang(ja){quotes:"\300c" "\300d" "\300e" "\300f"}:root:lang(yue),:not(:lang(yue))>:lang(yue){quotes:"\300c" "\300d" "\300e" "\300f"}:root:lang(zh-Hant),:not(:lang(zh-Hant))>:lang(zh-Hant){quotes:"\300c" "\300d" "\300e" "\300f"}}@layer elements{audio,canvas,embed,iframe,img,object,picture,svg,video{display:block;vertical-align:middle;max-width:100%}img,svg,video,canvas{height:auto}audio{width:100%;max-width:var(--tera1)}audio:not([controls]){display:none}figcaption{font-style:italic;font-size:var(--text-sm)}figure{&:has(*+figcaption){figcaption{margin-top:var(--figcaption-spacing)}}&:has(figcaption+*){figcaption{margin-bottom:var(--figcaption-spacing)}}}iframe{border:var(--border-sm) solid var(--ui-border-color)}}@layer elements{caption{caption-side:bottom;margin-top:var(--table-caption-spacing);font-size:var(--text-sm)}table{border-spacing:0;border:var(--table-border-width) solid var(--table-border-color);border-radius:var(--table-border-radius);background-color:var(--table-background-color)}th,td{text-align:start;padding:var(--table-padding);border-bottom:var(--table-border-width) solid var(--table-border-color);border-inline-start:var(--table-border-width) solid var(--table-border-color)}tr{th:first-child,td:first-child{border-inline-start-width:0}}tbody{tr:last-child{th,td{border-bottom-width:0}}}tfoot{th,td{border-top:var(--table-border-width) solid var(--table-border-color);border-bottom-width:0}}}@layer elements{::placeholder{opacity:var(--o-4)}input,button,textarea,select{font:inherit;color:var(--text-color)}button{color:var(--text-color)}fieldset{border:var(--fieldset-border-width) solid var(--fieldset-border-color);border-radius:var(--fieldset-border-radius);padding:var(--fieldset-padding);ul:has([type=checkbox],[type=radio]){padding-inline-start:0}>[aria-hidden]{margin-bottom:var(--sm3);font-size:var(--text-lg);grid-column:1 / -1}}:is(input,select,textarea):user-invalid{border-color:var(--input-border-color-invalid)}input{&:where(:not([type=checkbox],[type=radio])){height:var(--input-height)}&:where(:not([type=color],[type=file],[type=reset],[type=submit])){padding:var(--input-padding)}&:where(:not([type=color])){border-radius:var(--input-border-radius)}&:where(:not([type=file])){border:var(--input-border-width) solid var(--input-border-color)}&[type=file]{width:100%;accent-color:var(--text-color)}&[type=number]{padding-inline-end:var(--xs1)}}label{display:block;&:has(+:is(input,select,textarea)){margin-bottom:var(--label-spacing)}}legend{position:absolute;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);width:1px;height:1px;white-space:nowrap}meter{width:100%;background:var(--meter-track-color);border-radius:var(--meter-border-radius);height:var(--meter-height);&::-webkit-meter-bar{background:var(--meter-track-color)}&::-webkit-meter-bar,&::-webkit-meter-optimum-value,&::-webkit-meter-suboptimum-value,&::-webkit-meter-even-less-good-value{height:var(--meter-height);border:none;border-radius:var(--meter-border-radius)}&::-webkit-meter-even-less-good-value{background:var(--meter-low-color)}&::-webkit-meter-suboptimum-value{background:var(--meter-medium-color)}&::-webkit-meter-optimum-value{background:var(--meter-high-color)}&:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:var(--meter-low-color)}&:-moz-meter-sub-optimum::-moz-meter-bar{background:var(--meter-medium-color)}&:-moz-meter-optimum::-moz-meter-bar{background:var(--meter-high-color)}}progress{appearance:none;width:100%;height:var(--progress-height);background:var(--progress-track-color);border-radius:var(--progress-border-radius);border:none;&::-moz-progress-bar{background:var(--progress-color);border-radius:var(--progress-border-radius)}&::-webkit-progress-bar{width:100%;background:var(--progress-track-color);border-radius:var(--progress-border-radius);height:var(--progress-height)}&::-webkit-progress-value{background:var(--progress-color);border-radius:var(--progress-border-radius)}}select{--split: calc(100% - var(--select-icon-size));display:flex;appearance:none;height:var(--input-height);padding:var(--xs1) calc(var(--input-padding) + var(--md1)) var(--xs1) var(--input-padding);border:var(--input-border-width) solid var(--input-border-color);border-radius:var(--input-border-radius);background:linear-gradient(to right,var(--body-background-color) 0 var(--split),var(--text-color) var(--split) 100%);mask-image:var(--select-icon),linear-gradient(to right,transparent calc(var(--split) - 1px),red 0),linear-gradient(red 0 0);mask-size:var(--select-icon-size),auto,auto;mask-position:calc(100% - var(--xs1)) center,0 0,0 0;mask-repeat:no-repeat;mask-clip:padding-box,padding-box,border-box;mask-origin:padding-box,padding-box,border-box;mask-composite:add,exclude;&:disabled{--disabled-color: light-dark( hsl(from var(--text-color) h s 70%), hsl(from var(--text-color) h s 40%) );cursor:not-allowed;color:var(--disabled-color);background:linear-gradient(to right,var(--body-background-color) 0 var(--split),var(--disabled-color) var(--split) 100%)}&[multiple]{height:auto;padding:var(--input-padding);background:var(--body-background-color);mask-image:none}}textarea{width:100%;padding:var(--input-padding);border-radius:var(--input-border-radius);border:var(--input-border-width) solid var(--input-border-color);resize:vertical;&:not([rows]){min-height:6em}}}@layer elements{dialog{min-width:var(--dialog-min-width);max-width:var(--dialog-max-width);padding:var(--dialog-padding);border:var(--dialog-border-width) solid var(--dialog-border-color);background-color:var(--dialog-background-color);border-radius:var(--dialog-border-radius);&::backdrop{background:var(--dialog-backdrop-color);opacity:var(--dialog-backdrop-opacity)}[aria-label="close pop-up"]{position:absolute;top:var(--xs3);right:var( --xs3 );background:transparent;border:none;outline:none;cursor:pointer}p:last-of-type{margin-bottom:0}}details{padding:var(--details-padding);border:var(--details-border-width) solid var(--details-border-color);background-color:var(--details-background-color);border-radius:var(--details-border-radius);cursor:pointer;summary{display:flex;justify-content:space-between;font-weight:var(--bold);&::-webkit-details-marker{display:none}&:after{content:"";width:var(--details-icon-size);height:var(--details-icon-size);background-color:currentColor;mask-image:var(--details-icon);mask-size:contain;mask-repeat:no-repeat;transition:transform var(--transition)}}&[open]>summary{margin-bottom:var(--details-spacing);&:after{transform:rotate(180deg)}}p:last-of-type{margin-bottom:0}}}@layer global{:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.a11y-skipLink{position:fixed;z-index:var(--z-top);inset-block-start:-100vb;inset-inline-start:0;padding:.75em 1.25em;background-color:var(--body-background-color);color:var(--text-color)}.a11y-skipLink:focus{inset-block-start:0}.a11y-srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}}@layer global{@keyframes fadeFromOpaque{0%{opacity:1}}@keyframes fadeToOpaque{to{opacity:1}}@keyframes fadeFromTransparent{0%{opacity:0}}@keyframes fadeToTransparent{to{opacity:0}}}@layer global{.grid{display:grid;--grid-tc: repeat(4, 1fr);--grid-cs: 1;--grid-ce: -1;grid-template-columns:var(--grid-tc);grid-column-gap:var(--grid-column-gap);grid-row-gap:var(--grid-row-gap)}.grid-flush{grid-column-gap:0;grid-row-gap:0}.grid>.grid_item{display:block;appearance:none;-webkit-appearance:none}.grid[col="1"]{--grid-tc: repeat(1, 1fr) }.grid[col="2"]{--grid-tc: repeat(2, 1fr) }.grid[col="3"]{--grid-tc: repeat(3, 1fr) }.grid[col="4"]{--grid-tc: repeat(4, 1fr) }.grid[col="5"]{--grid-tc: repeat(5, 1fr) }.grid[col="6"]{--grid-tc: repeat(6, 1fr) }.grid[col="7"]{--grid-tc: repeat(7, 1fr) }.grid[col="8"]{--grid-tc: repeat(8, 1fr) }.grid[col="9"]{--grid-tc: repeat(9, 1fr) }.grid[col="10"]{--grid-tc: repeat(10, 1fr) }.grid[col="11"]{--grid-tc: repeat(11, 1fr) }.grid[col="12"]{--grid-tc: repeat(12, 1fr) }.grid[col="13"]{--grid-tc: repeat(13, 1fr) }.grid[col="14"]{--grid-tc: repeat(14, 1fr) }.grid[col="15"]{--grid-tc: repeat(15, 1fr) }.grid[col="16"]{--grid-tc: repeat(16, 1fr) }.grid[col="17"]{--grid-tc: repeat(17, 1fr) }.grid[col="18"]{--grid-tc: repeat(18, 1fr) }.grid[col="19"]{--grid-tc: repeat(19, 1fr) }.grid[col="20"]{--grid-tc: repeat(20, 1fr) }.grid[col="21"]{--grid-tc: repeat(21, 1fr) }.grid[col="22"]{--grid-tc: repeat(22, 1fr) }.grid[col="23"]{--grid-tc: repeat(23, 1fr) }.grid[col="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span^="1"]{--grid-cs: 1 }.grid>.grid_item[span^="2"]{--grid-cs: 2 }.grid>.grid_item[span^="3"]{--grid-cs: 3 }.grid>.grid_item[span^="4"]{--grid-cs: 4 }.grid>.grid_item[span^="5"]{--grid-cs: 5 }.grid>.grid_item[span^="6"]{--grid-cs: 6 }.grid>.grid_item[span^="7"]{--grid-cs: 7 }.grid>.grid_item[span^="8"]{--grid-cs: 8 }.grid>.grid_item[span^="9"]{--grid-cs: 9 }.grid>.grid_item[span^="10"]{--grid-cs: 10 }.grid>.grid_item[span^="11"]{--grid-cs: 11 }.grid>.grid_item[span^="12"]{--grid-cs: 12 }.grid>.grid_item[span^="13"]{--grid-cs: 13 }.grid>.grid_item[span^="14"]{--grid-cs: 14 }.grid>.grid_item[span^="15"]{--grid-cs: 15 }.grid>.grid_item[span^="16"]{--grid-cs: 16 }.grid>.grid_item[span^="17"]{--grid-cs: 17 }.grid>.grid_item[span^="18"]{--grid-cs: 18 }.grid>.grid_item[span^="19"]{--grid-cs: 19 }.grid>.grid_item[span^="20"]{--grid-cs: 20 }.grid>.grid_item[span^="21"]{--grid-cs: 21 }.grid>.grid_item[span^="22"]{--grid-cs: 22 }.grid>.grid_item[span^="23"]{--grid-cs: 23 }.grid>.grid_item[span^="24"]{--grid-cs: 24 }.grid>.grid_item[span$="+1"],.grid>.grid_item[span="1"]{--grid-ce: 1 }.grid>.grid_item[span$="+2"],.grid>.grid_item[span$="-1"],.grid>.grid_item[span="2"]{--grid-ce: 2 }.grid>.grid_item[span$="+3"],.grid>.grid_item[span$="-2"],.grid>.grid_item[span="3"]{--grid-ce: 3 }.grid>.grid_item[span$="+4"],.grid>.grid_item[span$="-3"],.grid>.grid_item[span="4"]{--grid-ce: 4 }.grid>.grid_item[span$="+5"],.grid>.grid_item[span$="-4"],.grid>.grid_item[span="5"]{--grid-ce: 5 }.grid>.grid_item[span$="+6"],.grid>.grid_item[span$="-5"],.grid>.grid_item[span="6"]{--grid-ce: 6 }.grid>.grid_item[span$="+7"],.grid>.grid_item[span$="-6"],.grid>.grid_item[span="7"]{--grid-ce: 7 }.grid>.grid_item[span$="+8"],.grid>.grid_item[span$="-7"],.grid>.grid_item[span="8"]{--grid-ce: 8 }.grid>.grid_item[span$="+9"],.grid>.grid_item[span$="-8"],.grid>.grid_item[span="9"]{--grid-ce: 9 }.grid>.grid_item[span$="+10"],.grid>.grid_item[span$="-9"],.grid>.grid_item[span="10"]{--grid-ce: 10 }.grid>.grid_item[span$="+11"],.grid>.grid_item[span$="-10"],.grid>.grid_item[span="11"]{--grid-ce: 11 }.grid>.grid_item[span$="+12"],.grid>.grid_item[span$="-11"],.grid>.grid_item[span="12"]{--grid-ce: 12 }.grid>.grid_item[span$="+13"],.grid>.grid_item[span$="-12"],.grid>.grid_item[span="13"]{--grid-ce: 13 }.grid>.grid_item[span$="+14"],.grid>.grid_item[span$="-13"],.grid>.grid_item[span="14"]{--grid-ce: 14 }.grid>.grid_item[span$="+15"],.grid>.grid_item[span$="-14"],.grid>.grid_item[span="15"]{--grid-ce: 15 }.grid>.grid_item[span$="+16"],.grid>.grid_item[span$="-15"],.grid>.grid_item[span="16"]{--grid-ce: 16 }.grid>.grid_item[span$="+17"],.grid>.grid_item[span$="-16"],.grid>.grid_item[span="17"]{--grid-ce: 17 }.grid>.grid_item[span$="+18"],.grid>.grid_item[span$="-17"],.grid>.grid_item[span="18"]{--grid-ce: 18 }.grid>.grid_item[span$="+19"],.grid>.grid_item[span$="-18"],.grid>.grid_item[span="19"]{--grid-ce: 19 }.grid>.grid_item[span$="+20"],.grid>.grid_item[span$="-19"],.grid>.grid_item[span="20"]{--grid-ce: 20 }.grid>.grid_item[span$="+21"],.grid>.grid_item[span$="-20"],.grid>.grid_item[span="21"]{--grid-ce: 21 }.grid>.grid_item[span$="+22"],.grid>.grid_item[span$="-21"],.grid>.grid_item[span="22"]{--grid-ce: 22 }.grid>.grid_item[span$="+23"],.grid>.grid_item[span$="-22"],.grid>.grid_item[span="23"]{--grid-ce: 23 }.grid>.grid_item[span$="+24"],.grid>.grid_item[span$="-23"],.grid>.grid_item[span="24"]{--grid-ce: 24 }.grid>.grid_item[span$="-24"]{--grid-ce: 25 }.grid>.grid_item[span]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span*="+"],.grid>.grid_item[span*="-"],.grid>.grid_item[span*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span*="-"],.grid>.grid_item[span*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span=row]{grid-column:1 / -1}@media only screen and (width>=768px){.grid[col-md="1"]{--grid-tc: repeat(1, 1fr) }.grid[col-md="2"]{--grid-tc: repeat(2, 1fr) }.grid[col-md="3"]{--grid-tc: repeat(3, 1fr) }.grid[col-md="4"]{--grid-tc: repeat(4, 1fr) }.grid[col-md="5"]{--grid-tc: repeat(5, 1fr) }.grid[col-md="6"]{--grid-tc: repeat(6, 1fr) }.grid[col-md="7"]{--grid-tc: repeat(7, 1fr) }.grid[col-md="8"]{--grid-tc: repeat(8, 1fr) }.grid[col-md="9"]{--grid-tc: repeat(9, 1fr) }.grid[col-md="10"]{--grid-tc: repeat(10, 1fr) }.grid[col-md="11"]{--grid-tc: repeat(11, 1fr) }.grid[col-md="12"]{--grid-tc: repeat(12, 1fr) }.grid[col-md="13"]{--grid-tc: repeat(13, 1fr) }.grid[col-md="14"]{--grid-tc: repeat(14, 1fr) }.grid[col-md="15"]{--grid-tc: repeat(15, 1fr) }.grid[col-md="16"]{--grid-tc: repeat(16, 1fr) }.grid[col-md="17"]{--grid-tc: repeat(17, 1fr) }.grid[col-md="18"]{--grid-tc: repeat(18, 1fr) }.grid[col-md="19"]{--grid-tc: repeat(19, 1fr) }.grid[col-md="20"]{--grid-tc: repeat(20, 1fr) }.grid[col-md="21"]{--grid-tc: repeat(21, 1fr) }.grid[col-md="22"]{--grid-tc: repeat(22, 1fr) }.grid[col-md="23"]{--grid-tc: repeat(23, 1fr) }.grid[col-md="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span-md^="1"]{--grid-cs: 1 }.grid>.grid_item[span-md^="2"]{--grid-cs: 2 }.grid>.grid_item[span-md^="3"]{--grid-cs: 3 }.grid>.grid_item[span-md^="4"]{--grid-cs: 4 }.grid>.grid_item[span-md^="5"]{--grid-cs: 5 }.grid>.grid_item[span-md^="6"]{--grid-cs: 6 }.grid>.grid_item[span-md^="7"]{--grid-cs: 7 }.grid>.grid_item[span-md^="8"]{--grid-cs: 8 }.grid>.grid_item[span-md^="9"]{--grid-cs: 9 }.grid>.grid_item[span-md^="10"]{--grid-cs: 10 }.grid>.grid_item[span-md^="11"]{--grid-cs: 11 }.grid>.grid_item[span-md^="12"]{--grid-cs: 12 }.grid>.grid_item[span-md^="13"]{--grid-cs: 13 }.grid>.grid_item[span-md^="14"]{--grid-cs: 14 }.grid>.grid_item[span-md^="15"]{--grid-cs: 15 }.grid>.grid_item[span-md^="16"]{--grid-cs: 16 }.grid>.grid_item[span-md^="17"]{--grid-cs: 17 }.grid>.grid_item[span-md^="18"]{--grid-cs: 18 }.grid>.grid_item[span-md^="19"]{--grid-cs: 19 }.grid>.grid_item[span-md^="20"]{--grid-cs: 20 }.grid>.grid_item[span-md^="21"]{--grid-cs: 21 }.grid>.grid_item[span-md^="22"]{--grid-cs: 22 }.grid>.grid_item[span-md^="23"]{--grid-cs: 23 }.grid>.grid_item[span-md^="24"]{--grid-cs: 24 }.grid>.grid_item[span-md$="+1"],.grid>.grid_item[span-md="1"]{--grid-ce: 1 }.grid>.grid_item[span-md$="+2"],.grid>.grid_item[span-md$="-1"],.grid>.grid_item[span-md="2"]{--grid-ce: 2 }.grid>.grid_item[span-md$="+3"],.grid>.grid_item[span-md$="-2"],.grid>.grid_item[span-md="3"]{--grid-ce: 3 }.grid>.grid_item[span-md$="+4"],.grid>.grid_item[span-md$="-3"],.grid>.grid_item[span-md="4"]{--grid-ce: 4 }.grid>.grid_item[span-md$="+5"],.grid>.grid_item[span-md$="-4"],.grid>.grid_item[span-md="5"]{--grid-ce: 5 }.grid>.grid_item[span-md$="+6"],.grid>.grid_item[span-md$="-5"],.grid>.grid_item[span-md="6"]{--grid-ce: 6 }.grid>.grid_item[span-md$="+7"],.grid>.grid_item[span-md$="-6"],.grid>.grid_item[span-md="7"]{--grid-ce: 7 }.grid>.grid_item[span-md$="+8"],.grid>.grid_item[span-md$="-7"],.grid>.grid_item[span-md="8"]{--grid-ce: 8 }.grid>.grid_item[span-md$="+9"],.grid>.grid_item[span-md$="-8"],.grid>.grid_item[span-md="9"]{--grid-ce: 9 }.grid>.grid_item[span-md$="+10"],.grid>.grid_item[span-md$="-9"],.grid>.grid_item[span-md="10"]{--grid-ce: 10 }.grid>.grid_item[span-md$="+11"],.grid>.grid_item[span-md$="-10"],.grid>.grid_item[span-md="11"]{--grid-ce: 11 }.grid>.grid_item[span-md$="+12"],.grid>.grid_item[span-md$="-11"],.grid>.grid_item[span-md="12"]{--grid-ce: 12 }.grid>.grid_item[span-md$="+13"],.grid>.grid_item[span-md$="-12"],.grid>.grid_item[span-md="13"]{--grid-ce: 13 }.grid>.grid_item[span-md$="+14"],.grid>.grid_item[span-md$="-13"],.grid>.grid_item[span-md="14"]{--grid-ce: 14 }.grid>.grid_item[span-md$="+15"],.grid>.grid_item[span-md$="-14"],.grid>.grid_item[span-md="15"]{--grid-ce: 15 }.grid>.grid_item[span-md$="+16"],.grid>.grid_item[span-md$="-15"],.grid>.grid_item[span-md="16"]{--grid-ce: 16 }.grid>.grid_item[span-md$="+17"],.grid>.grid_item[span-md$="-16"],.grid>.grid_item[span-md="17"]{--grid-ce: 17 }.grid>.grid_item[span-md$="+18"],.grid>.grid_item[span-md$="-17"],.grid>.grid_item[span-md="18"]{--grid-ce: 18 }.grid>.grid_item[span-md$="+19"],.grid>.grid_item[span-md$="-18"],.grid>.grid_item[span-md="19"]{--grid-ce: 19 }.grid>.grid_item[span-md$="+20"],.grid>.grid_item[span-md$="-19"],.grid>.grid_item[span-md="20"]{--grid-ce: 20 }.grid>.grid_item[span-md$="+21"],.grid>.grid_item[span-md$="-20"],.grid>.grid_item[span-md="21"]{--grid-ce: 21 }.grid>.grid_item[span-md$="+22"],.grid>.grid_item[span-md$="-21"],.grid>.grid_item[span-md="22"]{--grid-ce: 22 }.grid>.grid_item[span-md$="+23"],.grid>.grid_item[span-md$="-22"],.grid>.grid_item[span-md="23"]{--grid-ce: 23 }.grid>.grid_item[span-md$="+24"],.grid>.grid_item[span-md$="-23"],.grid>.grid_item[span-md="24"]{--grid-ce: 24 }.grid>.grid_item[span-md$="-24"]{--grid-ce: 25 }.grid>.grid_item[span-md]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span-md*="+"],.grid>.grid_item[span-md*="-"],.grid>.grid_item[span-md*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span-md*="-"],.grid>.grid_item[span-md*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span-md=row]{grid-column:1 / -1}}@media only screen and (width>=1024px){.grid[col-lg="1"]{--grid-tc: repeat(1, 1fr) }.grid[col-lg="2"]{--grid-tc: repeat(2, 1fr) }.grid[col-lg="3"]{--grid-tc: repeat(3, 1fr) }.grid[col-lg="4"]{--grid-tc: repeat(4, 1fr) }.grid[col-lg="5"]{--grid-tc: repeat(5, 1fr) }.grid[col-lg="6"]{--grid-tc: repeat(6, 1fr) }.grid[col-lg="7"]{--grid-tc: repeat(7, 1fr) }.grid[col-lg="8"]{--grid-tc: repeat(8, 1fr) }.grid[col-lg="9"]{--grid-tc: repeat(9, 1fr) }.grid[col-lg="10"]{--grid-tc: repeat(10, 1fr) }.grid[col-lg="11"]{--grid-tc: repeat(11, 1fr) }.grid[col-lg="12"]{--grid-tc: repeat(12, 1fr) }.grid[col-lg="13"]{--grid-tc: repeat(13, 1fr) }.grid[col-lg="14"]{--grid-tc: repeat(14, 1fr) }.grid[col-lg="15"]{--grid-tc: repeat(15, 1fr) }.grid[col-lg="16"]{--grid-tc: repeat(16, 1fr) }.grid[col-lg="17"]{--grid-tc: repeat(17, 1fr) }.grid[col-lg="18"]{--grid-tc: repeat(18, 1fr) }.grid[col-lg="19"]{--grid-tc: repeat(19, 1fr) }.grid[col-lg="20"]{--grid-tc: repeat(20, 1fr) }.grid[col-lg="21"]{--grid-tc: repeat(21, 1fr) }.grid[col-lg="22"]{--grid-tc: repeat(22, 1fr) }.grid[col-lg="23"]{--grid-tc: repeat(23, 1fr) }.grid[col-lg="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span-lg^="1"]{--grid-cs: 1 }.grid>.grid_item[span-lg^="2"]{--grid-cs: 2 }.grid>.grid_item[span-lg^="3"]{--grid-cs: 3 }.grid>.grid_item[span-lg^="4"]{--grid-cs: 4 }.grid>.grid_item[span-lg^="5"]{--grid-cs: 5 }.grid>.grid_item[span-lg^="6"]{--grid-cs: 6 }.grid>.grid_item[span-lg^="7"]{--grid-cs: 7 }.grid>.grid_item[span-lg^="8"]{--grid-cs: 8 }.grid>.grid_item[span-lg^="9"]{--grid-cs: 9 }.grid>.grid_item[span-lg^="10"]{--grid-cs: 10 }.grid>.grid_item[span-lg^="11"]{--grid-cs: 11 }.grid>.grid_item[span-lg^="12"]{--grid-cs: 12 }.grid>.grid_item[span-lg^="13"]{--grid-cs: 13 }.grid>.grid_item[span-lg^="14"]{--grid-cs: 14 }.grid>.grid_item[span-lg^="15"]{--grid-cs: 15 }.grid>.grid_item[span-lg^="16"]{--grid-cs: 16 }.grid>.grid_item[span-lg^="17"]{--grid-cs: 17 }.grid>.grid_item[span-lg^="18"]{--grid-cs: 18 }.grid>.grid_item[span-lg^="19"]{--grid-cs: 19 }.grid>.grid_item[span-lg^="20"]{--grid-cs: 20 }.grid>.grid_item[span-lg^="21"]{--grid-cs: 21 }.grid>.grid_item[span-lg^="22"]{--grid-cs: 22 }.grid>.grid_item[span-lg^="23"]{--grid-cs: 23 }.grid>.grid_item[span-lg^="24"]{--grid-cs: 24 }.grid>.grid_item[span-lg$="+1"],.grid>.grid_item[span-lg="1"]{--grid-ce: 1 }.grid>.grid_item[span-lg$="+2"],.grid>.grid_item[span-lg$="-1"],.grid>.grid_item[span-lg="2"]{--grid-ce: 2 }.grid>.grid_item[span-lg$="+3"],.grid>.grid_item[span-lg$="-2"],.grid>.grid_item[span-lg="3"]{--grid-ce: 3 }.grid>.grid_item[span-lg$="+4"],.grid>.grid_item[span-lg$="-3"],.grid>.grid_item[span-lg="4"]{--grid-ce: 4 }.grid>.grid_item[span-lg$="+5"],.grid>.grid_item[span-lg$="-4"],.grid>.grid_item[span-lg="5"]{--grid-ce: 5 }.grid>.grid_item[span-lg$="+6"],.grid>.grid_item[span-lg$="-5"],.grid>.grid_item[span-lg="6"]{--grid-ce: 6 }.grid>.grid_item[span-lg$="+7"],.grid>.grid_item[span-lg$="-6"],.grid>.grid_item[span-lg="7"]{--grid-ce: 7 }.grid>.grid_item[span-lg$="+8"],.grid>.grid_item[span-lg$="-7"],.grid>.grid_item[span-lg="8"]{--grid-ce: 8 }.grid>.grid_item[span-lg$="+9"],.grid>.grid_item[span-lg$="-8"],.grid>.grid_item[span-lg="9"]{--grid-ce: 9 }.grid>.grid_item[span-lg$="+10"],.grid>.grid_item[span-lg$="-9"],.grid>.grid_item[span-lg="10"]{--grid-ce: 10 }.grid>.grid_item[span-lg$="+11"],.grid>.grid_item[span-lg$="-10"],.grid>.grid_item[span-lg="11"]{--grid-ce: 11 }.grid>.grid_item[span-lg$="+12"],.grid>.grid_item[span-lg$="-11"],.grid>.grid_item[span-lg="12"]{--grid-ce: 12 }.grid>.grid_item[span-lg$="+13"],.grid>.grid_item[span-lg$="-12"],.grid>.grid_item[span-lg="13"]{--grid-ce: 13 }.grid>.grid_item[span-lg$="+14"],.grid>.grid_item[span-lg$="-13"],.grid>.grid_item[span-lg="14"]{--grid-ce: 14 }.grid>.grid_item[span-lg$="+15"],.grid>.grid_item[span-lg$="-14"],.grid>.grid_item[span-lg="15"]{--grid-ce: 15 }.grid>.grid_item[span-lg$="+16"],.grid>.grid_item[span-lg$="-15"],.grid>.grid_item[span-lg="16"]{--grid-ce: 16 }.grid>.grid_item[span-lg$="+17"],.grid>.grid_item[span-lg$="-16"],.grid>.grid_item[span-lg="17"]{--grid-ce: 17 }.grid>.grid_item[span-lg$="+18"],.grid>.grid_item[span-lg$="-17"],.grid>.grid_item[span-lg="18"]{--grid-ce: 18 }.grid>.grid_item[span-lg$="+19"],.grid>.grid_item[span-lg$="-18"],.grid>.grid_item[span-lg="19"]{--grid-ce: 19 }.grid>.grid_item[span-lg$="+20"],.grid>.grid_item[span-lg$="-19"],.grid>.grid_item[span-lg="20"]{--grid-ce: 20 }.grid>.grid_item[span-lg$="+21"],.grid>.grid_item[span-lg$="-20"],.grid>.grid_item[span-lg="21"]{--grid-ce: 21 }.grid>.grid_item[span-lg$="+22"],.grid>.grid_item[span-lg$="-21"],.grid>.grid_item[span-lg="22"]{--grid-ce: 22 }.grid>.grid_item[span-lg$="+23"],.grid>.grid_item[span-lg$="-22"],.grid>.grid_item[span-lg="23"]{--grid-ce: 23 }.grid>.grid_item[span-lg$="+24"],.grid>.grid_item[span-lg$="-23"],.grid>.grid_item[span-lg="24"]{--grid-ce: 24 }.grid>.grid_item[span-lg$="-24"]{--grid-ce: 25 }.grid>.grid_item[span-lg]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span-lg*="+"],.grid>.grid_item[span-lg*="-"],.grid>.grid_item[span-lg*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span-lg*="-"],.grid>.grid_item[span-lg*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span-lg=row]{grid-column:1 / -1}}@media only screen and (width>=1440px){.grid[col-xl="1"]{--grid-tc: repeat(1, 1fr) }.grid[col-xl="2"]{--grid-tc: repeat(2, 1fr) }.grid[col-xl="3"]{--grid-tc: repeat(3, 1fr) }.grid[col-xl="4"]{--grid-tc: repeat(4, 1fr) }.grid[col-xl="5"]{--grid-tc: repeat(5, 1fr) }.grid[col-xl="6"]{--grid-tc: repeat(6, 1fr) }.grid[col-xl="7"]{--grid-tc: repeat(7, 1fr) }.grid[col-xl="8"]{--grid-tc: repeat(8, 1fr) }.grid[col-xl="9"]{--grid-tc: repeat(9, 1fr) }.grid[col-xl="10"]{--grid-tc: repeat(10, 1fr) }.grid[col-xl="11"]{--grid-tc: repeat(11, 1fr) }.grid[col-xl="12"]{--grid-tc: repeat(12, 1fr) }.grid[col-xl="13"]{--grid-tc: repeat(13, 1fr) }.grid[col-xl="14"]{--grid-tc: repeat(14, 1fr) }.grid[col-xl="15"]{--grid-tc: repeat(15, 1fr) }.grid[col-xl="16"]{--grid-tc: repeat(16, 1fr) }.grid[col-xl="17"]{--grid-tc: repeat(17, 1fr) }.grid[col-xl="18"]{--grid-tc: repeat(18, 1fr) }.grid[col-xl="19"]{--grid-tc: repeat(19, 1fr) }.grid[col-xl="20"]{--grid-tc: repeat(20, 1fr) }.grid[col-xl="21"]{--grid-tc: repeat(21, 1fr) }.grid[col-xl="22"]{--grid-tc: repeat(22, 1fr) }.grid[col-xl="23"]{--grid-tc: repeat(23, 1fr) }.grid[col-xl="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span-xl^="1"]{--grid-cs: 1 }.grid>.grid_item[span-xl^="2"]{--grid-cs: 2 }.grid>.grid_item[span-xl^="3"]{--grid-cs: 3 }.grid>.grid_item[span-xl^="4"]{--grid-cs: 4 }.grid>.grid_item[span-xl^="5"]{--grid-cs: 5 }.grid>.grid_item[span-xl^="6"]{--grid-cs: 6 }.grid>.grid_item[span-xl^="7"]{--grid-cs: 7 }.grid>.grid_item[span-xl^="8"]{--grid-cs: 8 }.grid>.grid_item[span-xl^="9"]{--grid-cs: 9 }.grid>.grid_item[span-xl^="10"]{--grid-cs: 10 }.grid>.grid_item[span-xl^="11"]{--grid-cs: 11 }.grid>.grid_item[span-xl^="12"]{--grid-cs: 12 }.grid>.grid_item[span-xl^="13"]{--grid-cs: 13 }.grid>.grid_item[span-xl^="14"]{--grid-cs: 14 }.grid>.grid_item[span-xl^="15"]{--grid-cs: 15 }.grid>.grid_item[span-xl^="16"]{--grid-cs: 16 }.grid>.grid_item[span-xl^="17"]{--grid-cs: 17 }.grid>.grid_item[span-xl^="18"]{--grid-cs: 18 }.grid>.grid_item[span-xl^="19"]{--grid-cs: 19 }.grid>.grid_item[span-xl^="20"]{--grid-cs: 20 }.grid>.grid_item[span-xl^="21"]{--grid-cs: 21 }.grid>.grid_item[span-xl^="22"]{--grid-cs: 22 }.grid>.grid_item[span-xl^="23"]{--grid-cs: 23 }.grid>.grid_item[span-xl^="24"]{--grid-cs: 24 }.grid>.grid_item[span-xl$="+1"],.grid>.grid_item[span-xl="1"]{--grid-ce: 1 }.grid>.grid_item[span-xl$="+2"],.grid>.grid_item[span-xl$="-1"],.grid>.grid_item[span-xl="2"]{--grid-ce: 2 }.grid>.grid_item[span-xl$="+3"],.grid>.grid_item[span-xl$="-2"],.grid>.grid_item[span-xl="3"]{--grid-ce: 3 }.grid>.grid_item[span-xl$="+4"],.grid>.grid_item[span-xl$="-3"],.grid>.grid_item[span-xl="4"]{--grid-ce: 4 }.grid>.grid_item[span-xl$="+5"],.grid>.grid_item[span-xl$="-4"],.grid>.grid_item[span-xl="5"]{--grid-ce: 5 }.grid>.grid_item[span-xl$="+6"],.grid>.grid_item[span-xl$="-5"],.grid>.grid_item[span-xl="6"]{--grid-ce: 6 }.grid>.grid_item[span-xl$="+7"],.grid>.grid_item[span-xl$="-6"],.grid>.grid_item[span-xl="7"]{--grid-ce: 7 }.grid>.grid_item[span-xl$="+8"],.grid>.grid_item[span-xl$="-7"],.grid>.grid_item[span-xl="8"]{--grid-ce: 8 }.grid>.grid_item[span-xl$="+9"],.grid>.grid_item[span-xl$="-8"],.grid>.grid_item[span-xl="9"]{--grid-ce: 9 }.grid>.grid_item[span-xl$="+10"],.grid>.grid_item[span-xl$="-9"],.grid>.grid_item[span-xl="10"]{--grid-ce: 10 }.grid>.grid_item[span-xl$="+11"],.grid>.grid_item[span-xl$="-10"],.grid>.grid_item[span-xl="11"]{--grid-ce: 11 }.grid>.grid_item[span-xl$="+12"],.grid>.grid_item[span-xl$="-11"],.grid>.grid_item[span-xl="12"]{--grid-ce: 12 }.grid>.grid_item[span-xl$="+13"],.grid>.grid_item[span-xl$="-12"],.grid>.grid_item[span-xl="13"]{--grid-ce: 13 }.grid>.grid_item[span-xl$="+14"],.grid>.grid_item[span-xl$="-13"],.grid>.grid_item[span-xl="14"]{--grid-ce: 14 }.grid>.grid_item[span-xl$="+15"],.grid>.grid_item[span-xl$="-14"],.grid>.grid_item[span-xl="15"]{--grid-ce: 15 }.grid>.grid_item[span-xl$="+16"],.grid>.grid_item[span-xl$="-15"],.grid>.grid_item[span-xl="16"]{--grid-ce: 16 }.grid>.grid_item[span-xl$="+17"],.grid>.grid_item[span-xl$="-16"],.grid>.grid_item[span-xl="17"]{--grid-ce: 17 }.grid>.grid_item[span-xl$="+18"],.grid>.grid_item[span-xl$="-17"],.grid>.grid_item[span-xl="18"]{--grid-ce: 18 }.grid>.grid_item[span-xl$="+19"],.grid>.grid_item[span-xl$="-18"],.grid>.grid_item[span-xl="19"]{--grid-ce: 19 }.grid>.grid_item[span-xl$="+20"],.grid>.grid_item[span-xl$="-19"],.grid>.grid_item[span-xl="20"]{--grid-ce: 20 }.grid>.grid_item[span-xl$="+21"],.grid>.grid_item[span-xl$="-20"],.grid>.grid_item[span-xl="21"]{--grid-ce: 21 }.grid>.grid_item[span-xl$="+22"],.grid>.grid_item[span-xl$="-21"],.grid>.grid_item[span-xl="22"]{--grid-ce: 22 }.grid>.grid_item[span-xl$="+23"],.grid>.grid_item[span-xl$="-22"],.grid>.grid_item[span-xl="23"]{--grid-ce: 23 }.grid>.grid_item[span-xl$="+24"],.grid>.grid_item[span-xl$="-23"],.grid>.grid_item[span-xl="24"]{--grid-ce: 24 }.grid>.grid_item[span-xl$="-24"]{--grid-ce: 25 }.grid>.grid_item[span-xl]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span-xl*="+"],.grid>.grid_item[span-xl*="-"],.grid>.grid_item[span-xl*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span-xl*="-"],.grid>.grid_item[span-xl*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span-xl=row]{grid-column:1 / -1}}}@layer global{.layout{display:flex;flex-direction:column;width:100vw;min-height:100vh;.layout_content{flex:1}}.layout_content_main{container:main / inline-size}.layout-centered{.layout_content{display:grid;gap:var(--sm3);grid-template-columns:1fr minmax(0,var(--layout-content-width)) 1fr;margin-top:var(--lg1);margin-bottom:var(--sm1);@media(width>=768px){margin-top:var(--xl3);margin-bottom:var(--md3);gap:var(--md3)}}.layout_content_main{grid-column:2}}.layout-sidebar{.layout_content{@media(width>=768px){display:grid;grid-template-columns:var(--layout-aside-width) minmax(0,1fr)}}.layout_content_main{padding:var(--sm2);@media(width>=768px){grid-row:1;grid-column:2;padding:var(--lg1) var(--md2)}}.layout_content_aside{@media(width>=768px){grid-row:1;grid-column:1;padding:var(--lg1) var(--md3)}}}.layout-sidebar-end{.layout_content{@media(width>=768px){grid-template-columns:minmax(0,1fr) var(--layout-aside-width)}}.layout_content_main{@media(width>=768px){grid-column:1}}.layout_content_aside{@media(width>=768px){grid-column:2}}}.layout-docs{.layout_content{@media(width>=768px){display:grid;grid-template-columns:var(--layout-aside-width) minmax(0,1fr)}@media(width>=1024px){grid-template-columns:var(--layout-aside-width) minmax(0,var(--layout-content-width)) var(--layout-toc-width)}}.layout_content_main{padding:var(--sm2);@media(width>=768px){grid-row:1;grid-column:2;padding:var(--lg1) var(--md2)}}.layout_content_aside{display:none;@media(width>=768px){display:block;grid-row:1;grid-column:1;padding:var(--lg1) var(--md3)}}.layout_content_aside-toc{@media(width>=768px){display:none}@media(width>=1024px){display:block;grid-row:1;grid-column:3;padding:var(--lg1) var(--md3)}}}.layout-split{.layout_content{display:grid;@media(width>=768px){grid-template-columns:1fr 1fr}}}.layout-cover{min-height:100dvh;.layout_content{display:grid;place-items:center}}}@layer global{@scope(.prose)to (.not-prose){:is(p,ul,ol,blockquote,table):has(+:is(h1,h2,h3,h4)){margin-bottom:calc(var(--prose-spacing) * 2)}p,ul,ol,dl{margin-bottom:var(--prose-spacing);p,ul,ol,dl{margin-bottom:0}}ul,ol{ul,ol{margin-inline-start:0;padding-inline-start:var(--sm2)}li{margin-bottom:.5em;&::marker{color:light-dark(var(--base-300),var(--base-600))}}}ul{margin-inline-start:var(--sm2);list-style-type:"\2192 "}ol{margin-inline-start:var(--md2);list-style-type:decimal-leading-zero;li::marker{font-size:var(--text-sm)}}table{margin-top:var(--md1);margin-bottom:var(--md1)}}}@layer global{.wrap{display:grid;grid-template-columns:1fr var(--wrap-width) 1fr;>*,>astro-island>*,>astro-slot>*,>astro-static-slot>*{grid-column:2;padding-inline:var(--wrap-spacing);@media(width>=768px){padding-inline:var(--wrap-md-spacing)}@media(width>=1024px){padding-inline:var(--wrap-lg-spacing)}}}.wrap-sm{--wrap-width: var(--wrap-width-sm)}.wrap-md{--wrap-width: var(--wrap-width-md)}.wrap-lg{--wrap-width: var(--wrap-width-lg)}.wrap_content-fullBleed{grid-column:1 / -1;width:100%;object-fit:cover}}@layer helpers{.c-base-0{color:var(--base-0)!important}.bdc-base-0{border-color:var(--base-0)!important}.bgc-base-0{background-color:var(--base-0)!important}.c-base-50{color:var(--base-50)!important}.bdc-base-50{border-color:var(--base-50)!important}.bgc-base-50{background-color:var(--base-50)!important}.c-base-100{color:var(--base-100)!important}.bdc-base-100{border-color:var(--base-100)!important}.bgc-base-100{background-color:var(--base-100)!important}.c-base-200{color:var(--base-200)!important}.bdc-base-200{border-color:var(--base-200)!important}.bgc-base-200{background-color:var(--base-200)!important}.c-base-300{color:var(--base-300)!important}.bdc-base-300{border-color:var(--base-300)!important}.bgc-base-300{background-color:var(--base-300)!important}.c-base-400{color:var(--base-400)!important}.bdc-base-400{border-color:var(--base-400)!important}.bgc-base-400{background-color:var(--base-400)!important}.c-base-500{color:var(--base-500)!important}.bdc-base-500{border-color:var(--base-500)!important}.bgc-base-500{background-color:var(--base-500)!important}.c-base-600{color:var(--base-600)!important}.bdc-base-600{border-color:var(--base-600)!important}.bgc-base-600{background-color:var(--base-600)!important}.c-base-700{color:var(--base-700)!important}.bdc-base-700{border-color:var(--base-700)!important}.bgc-base-700{background-color:var(--base-700)!important}.c-base-800{color:var(--base-800)!important}.bdc-base-800{border-color:var(--base-800)!important}.bgc-base-800{background-color:var(--base-800)!important}.c-base-900{color:var(--base-900)!important}.bdc-base-900{border-color:var(--base-900)!important}.bgc-base-900{background-color:var(--base-900)!important}.c-base-950{color:var(--base-950)!important}.bdc-base-950{border-color:var(--base-950)!important}.bgc-base-950{background-color:var(--base-950)!important}.c-primary-50{color:var(--primary-50)!important}.bdc-primary-50{border-color:var(--primary-50)!important}.bgc-primary-50{background-color:var(--primary-50)!important}.c-primary-100{color:var(--primary-100)!important}.bdc-primary-100{border-color:var(--primary-100)!important}.bgc-primary-100{background-color:var(--primary-100)!important}.c-primary-200{color:var(--primary-200)!important}.bdc-primary-200{border-color:var(--primary-200)!important}.bgc-primary-200{background-color:var(--primary-200)!important}.c-primary-300{color:var(--primary-300)!important}.bdc-primary-300{border-color:var(--primary-300)!important}.bgc-primary-300{background-color:var(--primary-300)!important}.c-primary-400{color:var(--primary-400)!important}.bdc-primary-400{border-color:var(--primary-400)!important}.bgc-primary-400{background-color:var(--primary-400)!important}.c-primary-500{color:var(--primary-500)!important}.bdc-primary-500{border-color:var(--primary-500)!important}.bgc-primary-500{background-color:var(--primary-500)!important}.c-primary-600{color:var(--primary-600)!important}.bdc-primary-600{border-color:var(--primary-600)!important}.bgc-primary-600{background-color:var(--primary-600)!important}.c-primary-700{color:var(--primary-700)!important}.bdc-primary-700{border-color:var(--primary-700)!important}.bgc-primary-700{background-color:var(--primary-700)!important}.c-primary-800{color:var(--primary-800)!important}.bdc-primary-800{border-color:var(--primary-800)!important}.bgc-primary-800{background-color:var(--primary-800)!important}.c-primary-900{color:var(--primary-900)!important}.bdc-primary-900{border-color:var(--primary-900)!important}.bgc-primary-900{background-color:var(--primary-900)!important}.c-primary-950{color:var(--primary-950)!important}.bdc-primary-950{border-color:var(--primary-950)!important}.bgc-primary-950{background-color:var(--primary-950)!important}.c-yes-100{color:var(--yes-100)!important}.bdc-yes-100{border-color:var(--yes-100)!important}.bgc-yes-100{background-color:var(--yes-100)!important}.c-yes-200{color:var(--yes-200)!important}.bdc-yes-200{border-color:var(--yes-200)!important}.bgc-yes-200{background-color:var(--yes-200)!important}.c-yes-300{color:var(--yes-300)!important}.bdc-yes-300{border-color:var(--yes-300)!important}.bgc-yes-300{background-color:var(--yes-300)!important}.c-yes-400{color:var(--yes-400)!important}.bdc-yes-400{border-color:var(--yes-400)!important}.bgc-yes-400{background-color:var(--yes-400)!important}.c-yes-500{color:var(--yes-500)!important}.bdc-yes-500{border-color:var(--yes-500)!important}.bgc-yes-500{background-color:var(--yes-500)!important}.c-no-100{color:var(--no-100)!important}.bdc-no-100{border-color:var(--no-100)!important}.bgc-no-100{background-color:var(--no-100)!important}.c-no-200{color:var(--no-200)!important}.bdc-no-200{border-color:var(--no-200)!important}.bgc-no-200{background-color:var(--no-200)!important}.c-no-300{color:var(--no-300)!important}.bdc-no-300{border-color:var(--no-300)!important}.bgc-no-300{background-color:var(--no-300)!important}.c-no-400{color:var(--no-400)!important}.bdc-no-400{border-color:var(--no-400)!important}.bgc-no-400{background-color:var(--no-400)!important}.c-no-500{color:var(--no-500)!important}.bdc-no-500{border-color:var(--no-500)!important}.bgc-no-500{background-color:var(--no-500)!important}.c-maybe-100{color:var(--maybe-100)!important}.bdc-maybe-100{border-color:var(--maybe-100)!important}.bgc-maybe-100{background-color:var(--maybe-100)!important}.c-maybe-200{color:var(--maybe-200)!important}.bdc-maybe-200{border-color:var(--maybe-200)!important}.bgc-maybe-200{background-color:var(--maybe-200)!important}.c-maybe-300{color:var(--maybe-300)!important}.bdc-maybe-300{border-color:var(--maybe-300)!important}.bgc-maybe-300{background-color:var(--maybe-300)!important}.c-maybe-400{color:var(--maybe-400)!important}.bdc-maybe-400{border-color:var(--maybe-400)!important}.bgc-maybe-400{background-color:var(--maybe-400)!important}.c-maybe-500{color:var(--maybe-500)!important}.bdc-maybe-500{border-color:var(--maybe-500)!important}.bgc-maybe-500{background-color:var(--maybe-500)!important}}@layer helpers{body.dev{--baseline: 8;background-size:100% calc(var(--baseline) * 1px)!important;background-image:linear-gradient(to bottom,#0000 calc((var(--baseline) - 1) * 1px),#ff69b4 calc(var(--baseline) * 1px))!important}.dev-error{position:fixed!important;top:var(--md1)!important;left:var(--md1)!important;z-index:var(--z-top)!important;padding:var(--sm1)!important;font-size:1rem!important;color:var(--danger-500)!important;background:var(--danger-100)!important;border:1px solid var(--danger-500)!important;border-radius:var(--radius-md)!important}}@layer helpers{.of-auto,.overflow-auto{overflow:auto!important}.of-hidden,.overflow-hidden{overflow:hidden!important}.of-clip,.overflow-clip{overflow:clip!important}.of-visible,.overflow-visible{overflow:visible!important}.of-scroll,.overflow-scroll{overflow:scroll!important}.of-x-auto,.overflow-x-auto{overflow-x:auto!important}.of-y-auto,.overflow-y-auto{overflow-y:auto!important}.of-x-hidden,.overflow-x-hidden{overflow-x:hidden!important}.of-y-hidden,.overflow-y-hidden{overflow-y:hidden!important}.of-x-clip,.overflow-x-clip{overflow-x:clip!important}.of-y-clip,.overflow-y-clip{overflow-y:clip!important}.of-x-visible,.overflow-x-visible{overflow-x:visible!important}.of-y-visible,.overflow-y-visible{overflow-y:visible!important}.of-x-scroll,.overflow-x-scroll{overflow-x:scroll!important}.of-y-scroll,.overflow-y-scroll{overflow-y:scroll!important}.position-static{position:static!important}.position-fixed{position:fixed!important}.position-absolute{position:absolute!important}.position-relative{position:relative!important}.position-sticky{position:sticky!important}.visibility-visible{visibility:visible!important}.visibility-hidden{visibility:hidden!important}.visibility-collapse{visibility:collapse!important}.z-auto{z-index:auto!important}.z-bottom{z-index:var(--z-bottom)!important}.z-0{z-index:var(--z-0)!important}.z-1{z-index:var(--z-1)!important}.z-2{z-index:var(--z-2)!important}.z-3{z-index:var(--z-3)!important}.z-4{z-index:var(--z-4)!important}.z-5{z-index:var(--z-5)!important}.z-top{z-index:var(--z-top)!important}}@layer helpers{.o-0{opacity:var(--o-0)!important}.o-1{opacity:var(--o-1)!important}.o-2{opacity:var(--o-2)!important}.o-3{opacity:var(--o-3)!important}.o-4{opacity:var(--o-4)!important}.o-5{opacity:var(--o-5)!important}}@layer helpers{.ar-square{aspect-ratio:var(--ar-square)!important}.ar-landscape{aspect-ratio:var(--ar-landscape)!important}.ar-portrait{aspect-ratio:var(--ar-portrait)!important}.ar-widescreen{aspect-ratio:var(--ar-widescreen)!important}.ar-golden{aspect-ratio:var(--ar-golden)!important}}@layer helpers{.w-0{width:0!important}.h-0{height:0!important}.m-0{margin:0!important}.mt-0{margin-top:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mr-0{margin-right:0!important}.mis-0{margin-inline-start:0!important}.mie-0{margin-inline-end:0!important}.p-0{padding:0!important}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.pis-0{padding-inline-start:0!important}.pie-0{padding-inline-end:0!important}.w-xs1{width:var(--xs1)!important}.h-xs1{height:var(--xs1)!important}.m-xs1{margin:var(--xs1)!important}.mt-xs1{margin-top:var(--xs1)!important}.mb-xs1{margin-bottom:var(--xs1)!important}.ml-xs1{margin-left:var(--xs1)!important}.mr-xs1{margin-right:var(--xs1)!important}.mis-xs1{margin-inline-start:var(--xs1)!important}.mie-xs1{margin-inline-end:var(--xs1)!important}.p-xs1{padding:var(--xs1)!important}.pt-xs1{padding-top:var(--xs1)!important}.pb-xs1{padding-bottom:var(--xs1)!important}.pl-xs1{padding-left:var(--xs1)!important}.pr-xs1{padding-right:var(--xs1)!important}.pis-xs1{padding-inline-start:var(--xs1)!important}.pie-xs1{padding-inline-end:var(--xs1)!important}.w-xs2{width:var(--xs2)!important}.h-xs2{height:var(--xs2)!important}.m-xs2{margin:var(--xs2)!important}.mt-xs2{margin-top:var(--xs2)!important}.mb-xs2{margin-bottom:var(--xs2)!important}.ml-xs2{margin-left:var(--xs2)!important}.mr-xs2{margin-right:var(--xs2)!important}.mis-xs2{margin-inline-start:var(--xs2)!important}.mie-xs2{margin-inline-end:var(--xs2)!important}.p-xs2{padding:var(--xs2)!important}.pt-xs2{padding-top:var(--xs2)!important}.pb-xs2{padding-bottom:var(--xs2)!important}.pl-xs2{padding-left:var(--xs2)!important}.pr-xs2{padding-right:var(--xs2)!important}.pis-xs2{padding-inline-start:var(--xs2)!important}.pie-xs2{padding-inline-end:var(--xs2)!important}.w-xs3{width:var(--xs3)!important}.h-xs3{height:var(--xs3)!important}.m-xs3{margin:var(--xs3)!important}.mt-xs3{margin-top:var(--xs3)!important}.mb-xs3{margin-bottom:var(--xs3)!important}.ml-xs3{margin-left:var(--xs3)!important}.mr-xs3{margin-right:var(--xs3)!important}.mis-xs3{margin-inline-start:var(--xs3)!important}.mie-xs3{margin-inline-end:var(--xs3)!important}.p-xs3{padding:var(--xs3)!important}.pt-xs3{padding-top:var(--xs3)!important}.pb-xs3{padding-bottom:var(--xs3)!important}.pl-xs3{padding-left:var(--xs3)!important}.pr-xs3{padding-right:var(--xs3)!important}.pis-xs3{padding-inline-start:var(--xs3)!important}.pie-xs3{padding-inline-end:var(--xs3)!important}.w-sm1{width:var(--sm1)!important}.h-sm1{height:var(--sm1)!important}.m-sm1{margin:var(--sm1)!important}.mt-sm1{margin-top:var(--sm1)!important}.mb-sm1{margin-bottom:var(--sm1)!important}.ml-sm1{margin-left:var(--sm1)!important}.mr-sm1{margin-right:var(--sm1)!important}.mis-sm1{margin-inline-start:var(--sm1)!important}.mie-sm1{margin-inline-end:var(--sm1)!important}.p-sm1{padding:var(--sm1)!important}.pt-sm1{padding-top:var(--sm1)!important}.pb-sm1{padding-bottom:var(--sm1)!important}.pl-sm1{padding-left:var(--sm1)!important}.pr-sm1{padding-right:var(--sm1)!important}.pis-sm1{padding-inline-start:var(--sm1)!important}.pie-sm1{padding-inline-end:var(--sm1)!important}.w-sm2{width:var(--sm2)!important}.h-sm2{height:var(--sm2)!important}.m-sm2{margin:var(--sm2)!important}.mt-sm2{margin-top:var(--sm2)!important}.mb-sm2{margin-bottom:var(--sm2)!important}.ml-sm2{margin-left:var(--sm2)!important}.mr-sm2{margin-right:var(--sm2)!important}.mis-sm2{margin-inline-start:var(--sm2)!important}.mie-sm2{margin-inline-end:var(--sm2)!important}.p-sm2{padding:var(--sm2)!important}.pt-sm2{padding-top:var(--sm2)!important}.pb-sm2{padding-bottom:var(--sm2)!important}.pl-sm2{padding-left:var(--sm2)!important}.pr-sm2{padding-right:var(--sm2)!important}.pis-sm2{padding-inline-start:var(--sm2)!important}.pie-sm2{padding-inline-end:var(--sm2)!important}.w-sm3{width:var(--sm3)!important}.h-sm3{height:var(--sm3)!important}.m-sm3{margin:var(--sm3)!important}.mt-sm3{margin-top:var(--sm3)!important}.mb-sm3{margin-bottom:var(--sm3)!important}.ml-sm3{margin-left:var(--sm3)!important}.mr-sm3{margin-right:var(--sm3)!important}.mis-sm3{margin-inline-start:var(--sm3)!important}.mie-sm3{margin-inline-end:var(--sm3)!important}.p-sm3{padding:var(--sm3)!important}.pt-sm3{padding-top:var(--sm3)!important}.pb-sm3{padding-bottom:var(--sm3)!important}.pl-sm3{padding-left:var(--sm3)!important}.pr-sm3{padding-right:var(--sm3)!important}.pis-sm3{padding-inline-start:var(--sm3)!important}.pie-sm3{padding-inline-end:var(--sm3)!important}.w-md1{width:var(--md1)!important}.h-md1{height:var(--md1)!important}.m-md1{margin:var(--md1)!important}.mt-md1{margin-top:var(--md1)!important}.mb-md1{margin-bottom:var(--md1)!important}.ml-md1{margin-left:var(--md1)!important}.mr-md1{margin-right:var(--md1)!important}.mis-md1{margin-inline-start:var(--md1)!important}.mie-md1{margin-inline-end:var(--md1)!important}.p-md1{padding:var(--md1)!important}.pt-md1{padding-top:var(--md1)!important}.pb-md1{padding-bottom:var(--md1)!important}.pl-md1{padding-left:var(--md1)!important}.pr-md1{padding-right:var(--md1)!important}.pis-md1{padding-inline-start:var(--md1)!important}.pie-md1{padding-inline-end:var(--md1)!important}.w-md2{width:var(--md2)!important}.h-md2{height:var(--md2)!important}.m-md2{margin:var(--md2)!important}.mt-md2{margin-top:var(--md2)!important}.mb-md2{margin-bottom:var(--md2)!important}.ml-md2{margin-left:var(--md2)!important}.mr-md2{margin-right:var(--md2)!important}.mis-md2{margin-inline-start:var(--md2)!important}.mie-md2{margin-inline-end:var(--md2)!important}.p-md2{padding:var(--md2)!important}.pt-md2{padding-top:var(--md2)!important}.pb-md2{padding-bottom:var(--md2)!important}.pl-md2{padding-left:var(--md2)!important}.pr-md2{padding-right:var(--md2)!important}.pis-md2{padding-inline-start:var(--md2)!important}.pie-md2{padding-inline-end:var(--md2)!important}.w-md3{width:var(--md3)!important}.h-md3{height:var(--md3)!important}.m-md3{margin:var(--md3)!important}.mt-md3{margin-top:var(--md3)!important}.mb-md3{margin-bottom:var(--md3)!important}.ml-md3{margin-left:var(--md3)!important}.mr-md3{margin-right:var(--md3)!important}.mis-md3{margin-inline-start:var(--md3)!important}.mie-md3{margin-inline-end:var(--md3)!important}.p-md3{padding:var(--md3)!important}.pt-md3{padding-top:var(--md3)!important}.pb-md3{padding-bottom:var(--md3)!important}.pl-md3{padding-left:var(--md3)!important}.pr-md3{padding-right:var(--md3)!important}.pis-md3{padding-inline-start:var(--md3)!important}.pie-md3{padding-inline-end:var(--md3)!important}.w-lg1{width:var(--lg1)!important}.h-lg1{height:var(--lg1)!important}.m-lg1{margin:var(--lg1)!important}.mt-lg1{margin-top:var(--lg1)!important}.mb-lg1{margin-bottom:var(--lg1)!important}.ml-lg1{margin-left:var(--lg1)!important}.mr-lg1{margin-right:var(--lg1)!important}.mis-lg1{margin-inline-start:var(--lg1)!important}.mie-lg1{margin-inline-end:var(--lg1)!important}.p-lg1{padding:var(--lg1)!important}.pt-lg1{padding-top:var(--lg1)!important}.pb-lg1{padding-bottom:var(--lg1)!important}.pl-lg1{padding-left:var(--lg1)!important}.pr-lg1{padding-right:var(--lg1)!important}.pis-lg1{padding-inline-start:var(--lg1)!important}.pie-lg1{padding-inline-end:var(--lg1)!important}.w-lg2{width:var(--lg2)!important}.h-lg2{height:var(--lg2)!important}.m-lg2{margin:var(--lg2)!important}.mt-lg2{margin-top:var(--lg2)!important}.mb-lg2{margin-bottom:var(--lg2)!important}.ml-lg2{margin-left:var(--lg2)!important}.mr-lg2{margin-right:var(--lg2)!important}.mis-lg2{margin-inline-start:var(--lg2)!important}.mie-lg2{margin-inline-end:var(--lg2)!important}.p-lg2{padding:var(--lg2)!important}.pt-lg2{padding-top:var(--lg2)!important}.pb-lg2{padding-bottom:var(--lg2)!important}.pl-lg2{padding-left:var(--lg2)!important}.pr-lg2{padding-right:var(--lg2)!important}.pis-lg2{padding-inline-start:var(--lg2)!important}.pie-lg2{padding-inline-end:var(--lg2)!important}.w-lg3{width:var(--lg3)!important}.h-lg3{height:var(--lg3)!important}.m-lg3{margin:var(--lg3)!important}.mt-lg3{margin-top:var(--lg3)!important}.mb-lg3{margin-bottom:var(--lg3)!important}.ml-lg3{margin-left:var(--lg3)!important}.mr-lg3{margin-right:var(--lg3)!important}.mis-lg3{margin-inline-start:var(--lg3)!important}.mie-lg3{margin-inline-end:var(--lg3)!important}.p-lg3{padding:var(--lg3)!important}.pt-lg3{padding-top:var(--lg3)!important}.pb-lg3{padding-bottom:var(--lg3)!important}.pl-lg3{padding-left:var(--lg3)!important}.pr-lg3{padding-right:var(--lg3)!important}.pis-lg3{padding-inline-start:var(--lg3)!important}.pie-lg3{padding-inline-end:var(--lg3)!important}.w-xl1{width:var(--xl1)!important}.h-xl1{height:var(--xl1)!important}.m-xl1{margin:var(--xl1)!important}.mt-xl1{margin-top:var(--xl1)!important}.mb-xl1{margin-bottom:var(--xl1)!important}.ml-xl1{margin-left:var(--xl1)!important}.mr-xl1{margin-right:var(--xl1)!important}.mis-xl1{margin-inline-start:var(--xl1)!important}.mie-xl1{margin-inline-end:var(--xl1)!important}.p-xl1{padding:var(--xl1)!important}.pt-xl1{padding-top:var(--xl1)!important}.pb-xl1{padding-bottom:var(--xl1)!important}.pl-xl1{padding-left:var(--xl1)!important}.pr-xl1{padding-right:var(--xl1)!important}.pis-xl1{padding-inline-start:var(--xl1)!important}.pie-xl1{padding-inline-end:var(--xl1)!important}.w-xl2{width:var(--xl2)!important}.h-xl2{height:var(--xl2)!important}.m-xl2{margin:var(--xl2)!important}.mt-xl2{margin-top:var(--xl2)!important}.mb-xl2{margin-bottom:var(--xl2)!important}.ml-xl2{margin-left:var(--xl2)!important}.mr-xl2{margin-right:var(--xl2)!important}.mis-xl2{margin-inline-start:var(--xl2)!important}.mie-xl2{margin-inline-end:var(--xl2)!important}.p-xl2{padding:var(--xl2)!important}.pt-xl2{padding-top:var(--xl2)!important}.pb-xl2{padding-bottom:var(--xl2)!important}.pl-xl2{padding-left:var(--xl2)!important}.pr-xl2{padding-right:var(--xl2)!important}.pis-xl2{padding-inline-start:var(--xl2)!important}.pie-xl2{padding-inline-end:var(--xl2)!important}.w-xl3{width:var(--xl3)!important}.h-xl3{height:var(--xl3)!important}.m-xl3{margin:var(--xl3)!important}.mt-xl3{margin-top:var(--xl3)!important}.mb-xl3{margin-bottom:var(--xl3)!important}.ml-xl3{margin-left:var(--xl3)!important}.mr-xl3{margin-right:var(--xl3)!important}.mis-xl3{margin-inline-start:var(--xl3)!important}.mie-xl3{margin-inline-end:var(--xl3)!important}.p-xl3{padding:var(--xl3)!important}.pt-xl3{padding-top:var(--xl3)!important}.pb-xl3{padding-bottom:var(--xl3)!important}.pl-xl3{padding-left:var(--xl3)!important}.pr-xl3{padding-right:var(--xl3)!important}.pis-xl3{padding-inline-start:var(--xl3)!important}.pie-xl3{padding-inline-end:var(--xl3)!important}.w-xxl1{width:var(--xxl1)!important}.h-xxl1{height:var(--xxl1)!important}.m-xxl1{margin:var(--xxl1)!important}.mt-xxl1{margin-top:var(--xxl1)!important}.mb-xxl1{margin-bottom:var(--xxl1)!important}.ml-xxl1{margin-left:var(--xxl1)!important}.mr-xxl1{margin-right:var(--xxl1)!important}.mis-xxl1{margin-inline-start:var(--xxl1)!important}.mie-xxl1{margin-inline-end:var(--xxl1)!important}.p-xxl1{padding:var(--xxl1)!important}.pt-xxl1{padding-top:var(--xxl1)!important}.pb-xxl1{padding-bottom:var(--xxl1)!important}.pl-xxl1{padding-left:var(--xxl1)!important}.pr-xxl1{padding-right:var(--xxl1)!important}.pis-xxl1{padding-inline-start:var(--xxl1)!important}.pie-xxl1{padding-inline-end:var(--xxl1)!important}.w-xxl2{width:var(--xxl2)!important}.h-xxl2{height:var(--xxl2)!important}.m-xxl2{margin:var(--xxl2)!important}.mt-xxl2{margin-top:var(--xxl2)!important}.mb-xxl2{margin-bottom:var(--xxl2)!important}.ml-xxl2{margin-left:var(--xxl2)!important}.mr-xxl2{margin-right:var(--xxl2)!important}.mis-xxl2{margin-inline-start:var(--xxl2)!important}.mie-xxl2{margin-inline-end:var(--xxl2)!important}.p-xxl2{padding:var(--xxl2)!important}.pt-xxl2{padding-top:var(--xxl2)!important}.pb-xxl2{padding-bottom:var(--xxl2)!important}.pl-xxl2{padding-left:var(--xxl2)!important}.pr-xxl2{padding-right:var(--xxl2)!important}.pis-xxl2{padding-inline-start:var(--xxl2)!important}.pie-xxl2{padding-inline-end:var(--xxl2)!important}.w-xxl3{width:var(--xxl3)!important}.h-xxl3{height:var(--xxl3)!important}.m-xxl3{margin:var(--xxl3)!important}.mt-xxl3{margin-top:var(--xxl3)!important}.mb-xxl3{margin-bottom:var(--xxl3)!important}.ml-xxl3{margin-left:var(--xxl3)!important}.mr-xxl3{margin-right:var(--xxl3)!important}.mis-xxl3{margin-inline-start:var(--xxl3)!important}.mie-xxl3{margin-inline-end:var(--xxl3)!important}.p-xxl3{padding:var(--xxl3)!important}.pt-xxl3{padding-top:var(--xxl3)!important}.pb-xxl3{padding-bottom:var(--xxl3)!important}.pl-xxl3{padding-left:var(--xxl3)!important}.pr-xxl3{padding-right:var(--xxl3)!important}.pis-xxl3{padding-inline-start:var(--xxl3)!important}.pie-xxl3{padding-inline-end:var(--xxl3)!important}.w-mega1{width:var(--mega1)!important}.h-mega1{height:var(--mega1)!important}.m-mega1{margin:var(--mega1)!important}.mt-mega1{margin-top:var(--mega1)!important}.mb-mega1{margin-bottom:var(--mega1)!important}.ml-mega1{margin-left:var(--mega1)!important}.mr-mega1{margin-right:var(--mega1)!important}.mis-mega1{margin-inline-start:var(--mega1)!important}.mie-mega1{margin-inline-end:var(--mega1)!important}.p-mega1{padding:var(--mega1)!important}.pt-mega1{padding-top:var(--mega1)!important}.pb-mega1{padding-bottom:var(--mega1)!important}.pl-mega1{padding-left:var(--mega1)!important}.pr-mega1{padding-right:var(--mega1)!important}.pis-mega1{padding-inline-start:var(--mega1)!important}.pie-mega1{padding-inline-end:var(--mega1)!important}.w-mega2{width:var(--mega2)!important}.h-mega2{height:var(--mega2)!important}.m-mega2{margin:var(--mega2)!important}.mt-mega2{margin-top:var(--mega2)!important}.mb-mega2{margin-bottom:var(--mega2)!important}.ml-mega2{margin-left:var(--mega2)!important}.mr-mega2{margin-right:var(--mega2)!important}.mis-mega2{margin-inline-start:var(--mega2)!important}.mie-mega2{margin-inline-end:var(--mega2)!important}.p-mega2{padding:var(--mega2)!important}.pt-mega2{padding-top:var(--mega2)!important}.pb-mega2{padding-bottom:var(--mega2)!important}.pl-mega2{padding-left:var(--mega2)!important}.pr-mega2{padding-right:var(--mega2)!important}.pis-mega2{padding-inline-start:var(--mega2)!important}.pie-mega2{padding-inline-end:var(--mega2)!important}.w-mega3{width:var(--mega3)!important}.h-mega3{height:var(--mega3)!important}.m-mega3{margin:var(--mega3)!important}.mt-mega3{margin-top:var(--mega3)!important}.mb-mega3{margin-bottom:var(--mega3)!important}.ml-mega3{margin-left:var(--mega3)!important}.mr-mega3{margin-right:var(--mega3)!important}.mis-mega3{margin-inline-start:var(--mega3)!important}.mie-mega3{margin-inline-end:var(--mega3)!important}.p-mega3{padding:var(--mega3)!important}.pt-mega3{padding-top:var(--mega3)!important}.pb-mega3{padding-bottom:var(--mega3)!important}.pl-mega3{padding-left:var(--mega3)!important}.pr-mega3{padding-right:var(--mega3)!important}.pis-mega3{padding-inline-start:var(--mega3)!important}.pie-mega3{padding-inline-end:var(--mega3)!important}.w-giga1{width:var(--giga1)!important}.h-giga1{height:var(--giga1)!important}.m-giga1{margin:var(--giga1)!important}.mt-giga1{margin-top:var(--giga1)!important}.mb-giga1{margin-bottom:var(--giga1)!important}.ml-giga1{margin-left:var(--giga1)!important}.mr-giga1{margin-right:var(--giga1)!important}.mis-giga1{margin-inline-start:var(--giga1)!important}.mie-giga1{margin-inline-end:var(--giga1)!important}.p-giga1{padding:var(--giga1)!important}.pt-giga1{padding-top:var(--giga1)!important}.pb-giga1{padding-bottom:var(--giga1)!important}.pl-giga1{padding-left:var(--giga1)!important}.pr-giga1{padding-right:var(--giga1)!important}.pis-giga1{padding-inline-start:var(--giga1)!important}.pie-giga1{padding-inline-end:var(--giga1)!important}.w-giga2{width:var(--giga2)!important}.h-giga2{height:var(--giga2)!important}.m-giga2{margin:var(--giga2)!important}.mt-giga2{margin-top:var(--giga2)!important}.mb-giga2{margin-bottom:var(--giga2)!important}.ml-giga2{margin-left:var(--giga2)!important}.mr-giga2{margin-right:var(--giga2)!important}.mis-giga2{margin-inline-start:var(--giga2)!important}.mie-giga2{margin-inline-end:var(--giga2)!important}.p-giga2{padding:var(--giga2)!important}.pt-giga2{padding-top:var(--giga2)!important}.pb-giga2{padding-bottom:var(--giga2)!important}.pl-giga2{padding-left:var(--giga2)!important}.pr-giga2{padding-right:var(--giga2)!important}.pis-giga2{padding-inline-start:var(--giga2)!important}.pie-giga2{padding-inline-end:var(--giga2)!important}.w-giga3{width:var(--giga3)!important}.h-giga3{height:var(--giga3)!important}.m-giga3{margin:var(--giga3)!important}.mt-giga3{margin-top:var(--giga3)!important}.mb-giga3{margin-bottom:var(--giga3)!important}.ml-giga3{margin-left:var(--giga3)!important}.mr-giga3{margin-right:var(--giga3)!important}.mis-giga3{margin-inline-start:var(--giga3)!important}.mie-giga3{margin-inline-end:var(--giga3)!important}.p-giga3{padding:var(--giga3)!important}.pt-giga3{padding-top:var(--giga3)!important}.pb-giga3{padding-bottom:var(--giga3)!important}.pl-giga3{padding-left:var(--giga3)!important}.pr-giga3{padding-right:var(--giga3)!important}.pis-giga3{padding-inline-start:var(--giga3)!important}.pie-giga3{padding-inline-end:var(--giga3)!important}.w-tera1{width:var(--tera1)!important}.h-tera1{height:var(--tera1)!important}.m-tera1{margin:var(--tera1)!important}.mt-tera1{margin-top:var(--tera1)!important}.mb-tera1{margin-bottom:var(--tera1)!important}.ml-tera1{margin-left:var(--tera1)!important}.mr-tera1{margin-right:var(--tera1)!important}.mis-tera1{margin-inline-start:var(--tera1)!important}.mie-tera1{margin-inline-end:var(--tera1)!important}.p-tera1{padding:var(--tera1)!important}.pt-tera1{padding-top:var(--tera1)!important}.pb-tera1{padding-bottom:var(--tera1)!important}.pl-tera1{padding-left:var(--tera1)!important}.pr-tera1{padding-right:var(--tera1)!important}.pis-tera1{padding-inline-start:var(--tera1)!important}.pie-tera1{padding-inline-end:var(--tera1)!important}.w-tera2{width:var(--tera2)!important}.h-tera2{height:var(--tera2)!important}.m-tera2{margin:var(--tera2)!important}.mt-tera2{margin-top:var(--tera2)!important}.mb-tera2{margin-bottom:var(--tera2)!important}.ml-tera2{margin-left:var(--tera2)!important}.mr-tera2{margin-right:var(--tera2)!important}.mis-tera2{margin-inline-start:var(--tera2)!important}.mie-tera2{margin-inline-end:var(--tera2)!important}.p-tera2{padding:var(--tera2)!important}.pt-tera2{padding-top:var(--tera2)!important}.pb-tera2{padding-bottom:var(--tera2)!important}.pl-tera2{padding-left:var(--tera2)!important}.pr-tera2{padding-right:var(--tera2)!important}.pis-tera2{padding-inline-start:var(--tera2)!important}.pie-tera2{padding-inline-end:var(--tera2)!important}.w-tera3{width:var(--tera3)!important}.h-tera3{height:var(--tera3)!important}.m-tera3{margin:var(--tera3)!important}.mt-tera3{margin-top:var(--tera3)!important}.mb-tera3{margin-bottom:var(--tera3)!important}.ml-tera3{margin-left:var(--tera3)!important}.mr-tera3{margin-right:var(--tera3)!important}.mis-tera3{margin-inline-start:var(--tera3)!important}.mie-tera3{margin-inline-end:var(--tera3)!important}.p-tera3{padding:var(--tera3)!important}.pt-tera3{padding-top:var(--tera3)!important}.pb-tera3{padding-bottom:var(--tera3)!important}.pl-tera3{padding-left:var(--tera3)!important}.pr-tera3{padding-right:var(--tera3)!important}.pis-tera3{padding-inline-start:var(--tera3)!important}.pie-tera3{padding-inline-end:var(--tera3)!important}}@layer helpers{.font-text{font-family:var(--text)!important}.font-display{font-family:var(--display)!important}.font-mono{font-family:var(--mono)!important}.font-italic{font-style:italic!important}.font-normal{font-style:normal!important}.font-extra-light{font-weight:var(--extra-light)!important}.font-light{font-weight:var(--light)!important}.font-book{font-weight:var(--book)!important}.font-semi-bold{font-weight:var(--semi-bold)!important}.font-bold{font-weight:var(--bold)!important}.font-black{font-weight:var(--black)!important}.text-xs{font-size:var(--text-xs)!important}.text-sm{font-size:var(--text-sm)!important}.text-md{font-size:var(--text-md)!important}.text-lg{font-size:var(--text-lg)!important}.text-xl{font-size:var(--text-xl)!important}.display-sm{font-size:var(--display-sm)!important}.display-md{font-size:var(--display-md)!important}.display-lg{font-size:var(--display-lg)!important}.display-xl{font-size:var(--display-xl)!important}.display-mega{font-size:var(--display-mega)!important}.display-giga{font-size:var(--display-giga)!important}.tracking-sm{letter-spacing:var(--tracking-sm)!important}.tracking-md{letter-spacing:var(--tracking-md)!important}.tracking-lg{letter-spacing:var(--tracking-lg)!important}.tracking-xl{letter-spacing:var(--tracking-xl)!important}.tracking-xxl{letter-spacing:var(--tracking-xxl)!important}.leading-xs{line-height:var(--leading-xs)!important}.leading-sm{line-height:var(--leading-sm)!important}.leading-md{line-height:var(--leading-md)!important}.leading-lg{line-height:var(--leading-lg)!important}.leading-xl{line-height:var(--leading-xl)!important}.leading-xxl{line-height:var(--leading-xxl)!important}.text-left{text-align:left!important}.text-center{text-align:center!important}.text-right{text-align:right!important}.text-justify{text-align:justify!important}.text-start{text-align:start!important}.text-end{text-align:end!important}.text-uppercase{text-transform:uppercase!important}.text-lowercase{text-transform:lowercase!important}.text-capitalize{text-transform:capitalize!important}}@layer theme.defaults{:root{--xs1: 4px;--xs2: 8px;--xs3: 12px;--sm1: 16px;--sm2: 20px;--sm3: 24px;--md1: 28px;--md2: 32px;--md3: 36px;--lg1: 40px;--lg2: 44px;--lg3: 48px;--xl1: 56px;--xl2: 64px;--xl3: 80px;--xxl1: 96px;--xxl2: 112px;--xxl3: 128px;--mega1: 160px;--mega2: 192px;--mega3: 224px;--giga1: 256px;--giga2: 288px;--giga3: 320px;--tera1: 384px;--tera2: 480px;--tera3: 520px;--ar-square: 1;--ar-landscape: 4/3;--ar-portrait: 3/4;--ar-widescreen: 16/9;--ar-golden: 1.618/1;--display: Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, ui-sans-serif, sans-serif;--text: ui-sans-serif, system-ui, sans-serif;--mono: Dank Mono, Inconsolata, Fira Mono, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, ui-monospace, monospace;--text-xs: .694rem;--text-sm: .833rem;--text-md: 1rem;--text-lg: 1.2rem;--text-xl: 1.44rem;--display-sm: 1.728rem;--display-md: 2.074rem;--display-lg: 2.488rem;--display-xl: 2.986rem;--display-mega: 3.583rem;--display-giga: 4.299rem;--extra-light: 200;--light: 300;--book: 400;--semi-bold: 600;--bold: 700;--black: 900;--tracking-sm: -.05em;--tracking-md: .025em;--tracking-lg: .05em;--tracking-xl: .075em;--tracking-xxl: .15em;--leading-xs: 1;--leading-sm: 1.15;--leading-md: 1.375;--leading-lg: 1.5;--leading-xl: 1.75;--leading-xxl: 2;--base-0: #fff;--base-50: #f6f7f9;--base-100: #edeef1;--base-200: #d6dbe1;--base-300: #b2bbc7;--base-400: #8897a8;--base-500: #697a8e;--base-600: #546375;--base-700: #4a5666;--base-800: #3c4550;--base-900: #353c45;--base-950: #23282e;--primary-50: #f0f9ff;--primary-100: #e0f2fe;--primary-200: #bae6fd;--primary-300: #7dd3fc;--primary-400: #38bdf8;--primary-500: #0ea5e9;--primary-600: #0284c7;--primary-700: #0369a1;--primary-800: #075985;--primary-900: #0c4a6e;--primary-950: #082f49;--yes-100: #d5f6e8;--yes-200: #afebd4;--yes-300: #7adbbd;--yes-400: #46c4a0;--yes-500: #13886d;--no-100: #ffe4e6;--no-200: #fecdd3;--no-300: #fda4af;--no-400: #fb7185;--no-500: #e11d48;--maybe-100: #fff7d6;--maybe-200: #fff0b3;--maybe-300: #ffd64a;--maybe-400: #ffc220;--maybe-500: #f9a007;--highlight-500: #ffee00;--border-sm: 1px;--border-md: 2px;--border-lg: 4px;--border-xl: 8px;--border-xxl: 12px;--radius-sm: 3px;--radius-md: 5px;--radius-lg: 8px;--radius-xl: 12px;--radius-xxl: 16px;--radius-round: 1e5px;--shadow-sm: 0 1px 3px 0 var(--ui-shadow-color), 0 1px 2px -1px var(--ui-shadow-color);--shadow-md: 0 4px 6px -1px var(--ui-shadow-color), 0 2px 4px -2px var(--ui-shadow-color);--shadow-lg: 0 8px 13px -3px var(--ui-shadow-color), 0 4px 6px -4px var(--ui-shadow-color);--shadow-xl: 0 20px 20px -5px var(--ui-shadow-color), 0 8px 10px -6px var(--ui-shadow-color);--shadow-xxl: 0px 11px 8px -6px var(--ui-shadow-color), 0 10px 15px 2px var(--ui-shadow-color);--o-0: 0;--o-1: .2;--o-2: .4;--o-3: .6;--o-4: .8;--o-5: 1;--z-bottom: -1000000000;--z-0: 0;--z-1: 10;--z-2: 20;--z-3: 30;--z-4: 40;--z-5: 50;--z-top: 1000000000;--transition: .22s ease-in-out;--transition-fast: .1s ease-in-out}}@layer theme.defaults{:root{color-scheme:light dark;--ui-border-color: light-dark(var(--base-200), var(--base-500));--ui-shadow-color: light-dark(rgb(0 0 0 / .1), rgb(0 0 0 / .6));--focus-ring-color: light-dark(var(--primary-500), var(--primary-400));--focus-ring-width: 2px;--focus-ring-offset: 2px;--success-100: var(--yes-100);--success-200: var(--yes-200);--success-300: var(--yes-300);--success-400: var(--yes-400);--success-500: var(--yes-500);--danger-100: var(--no-100);--danger-200: var(--no-200);--danger-300: var(--no-300);--danger-400: var(--no-400);--danger-500: var(--no-500);--warning-100: var(--maybe-100);--warning-200: var(--maybe-200);--warning-300: var(--maybe-300);--warning-400: var(--maybe-400);--warning-500: var(--maybe-500)}:root.theme-light{color-scheme:light}:root.theme-dark{color-scheme:dark}:root{accent-color:var(--primary-500);--body-background-color: light-dark(var(--base-0), var(--base-950));--body-line-height: var(--leading-lg);--input-height: var(--md3);--input-padding: var(--xs3);--input-border-width: var(--border-sm);--input-border-color: var(--ui-border-color);--input-border-radius: var(--radius-md);--input-border-color-invalid: light-dark( var(--danger-500), var(--danger-400) );--label-spacing: var(--xs1);--fieldset-padding: var(--sm3);--fieldset-border-width: var(--border-sm);--fieldset-border-color: var(--ui-border-color);--fieldset-border-radius: var(--radius-lg);--meter-height: var(--sm1);--meter-border-radius: var(--radius-md);--meter-track-color: var(--primary-100);--meter-low-color: var(--danger-400);--meter-medium-color: var(--warning-400);--meter-high-color: var(--success-400);--progress-height: var(--sm1);--progress-color: var(--primary-500);--progress-track-color: var(--primary-100);--progress-border-radius: var(--radius-md);--select-icon-size: var(--sm3);--select-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");--dialog-min-width: var(--tera1);--dialog-max-width: var(--tera3);--dialog-padding: var(--lg1) var(--md1);--dialog-border-width: var(--border-sm);--dialog-border-color: light-dark(var(--base-200), var(--base-800));--dialog-background-color: light-dark(var(--base-50), var(--base-900));--dialog-border-radius: var(--radius-lg);--dialog-backdrop-color: var(--base-950);--dialog-backdrop-opacity: var(--o-4);--details-padding: var(--sm1);--details-spacing: var(--xs3);--details-border-width: var(--border-sm);--details-border-color: light-dark(var(--base-200), var(--base-800));--details-background-color: light-dark(var(--base-50), var(--base-900));--details-border-radius: var(--radius-lg);--details-icon-size: var(--sm3);--details-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");--table-padding: var(--xs2) var(--sm1);--table-border-width: var(--border-sm);--table-border-color: light-dark(var(--base-100), var(--base-700));--table-border-radius: var(--radius-md);--table-background-color: none;--table-caption-spacing: var(--xs3);--figcaption-spacing: var(--xs2);--heading-font: var(--display);--heading-weight: var(--black);--heading-letter-spacing: normal;--heading-font-size-h1: clamp( var(--display-md), 1.269rem + 2.682vw, var(--display-xl) );--heading-font-size-h2: clamp( var(--display-sm), 1.057rem + 2.235vw, var(--display-lg) );--heading-font-size-h3: clamp( var(--text-xl), .881rem + 1.865vw, var(--display-md) );--heading-font-size-h4: clamp( var(--text-lg), .734rem + 1.553vw, var(--display-sm) );--heading-font-size-h5: clamp( var(--text-lg), .988rem + .706vw, var(--text-xl) );--heading-font-size-h6: clamp( var(--text-md), .824rem + .588vw, var(--text-lg) );--heading-line-height: var(--leading-sm);--heading-line-height-h1: var(--heading-line-height);--heading-line-height-h2: var(--heading-line-height);--heading-line-height-h3: var(--heading-line-height);--heading-line-height-h4: var(--leading-md);--heading-line-height-h5: var(--leading-md);--heading-line-height-h6: var(--leading-md);--heading-spacing-h1: .4em;--heading-spacing-h2: .4em;--heading-spacing-h3: .4em;--heading-spacing-h4: .4em;--heading-spacing-h5: .4em;--heading-spacing-h6: .4em;--heading-spacing-consecutive: .3em;--text-color: light-dark(var(--base-950), var(--base-200));--link-font-weight: var(--semi-bold);--link-color: light-dark(var(--primary-600), var(--primary-400));--link-color-hover: var(--primary-500);--text-code-color: light-dark(var(--primary-600), var(--primary-400));--text-code-background-color: light-dark( var(--primary-100), var(--primary-900) );--text-code-muted-color: light-dark(var(--base-500), var(--base-300));--pre-border-radius: var(--radius-md);--pre-font-size: .9rem;--blockquote-padding-block: var(--sm1);--blockquote-padding-inline: var(--md1) var(--sm3);--blockquote-background-color: light-dark( var(--primary-50), var(--primary-900) );--blockquote-border-radius: var(--radius-md);--blockquote-accent-width: var(--xs2);--blockquote-accent-color: linear-gradient( var(--primary-800), var(--primary-500) );--hr-content: "";--ins-color: var(--base-950);--ins-background-color: var(--success-200);--marker-color: var(--highlight-500);--selection-color: light-dark(var(--base-950), var(--base-0));--selection-background-color: light-dark( var(--primary-200), var(--primary-700) )}:root{--grid-column-gap: var(--sm1);--grid-row-gap: var(--sm1);@media(width>=768px){--grid-column-gap: var(--sm3);--grid-row-gap: var(--sm3)}--wrap-spacing: var(--sm1);--wrap-md-spacing: var(--sm3);--wrap-lg-spacing: 0;--wrap-width-sm: minmax(0, 55ch);--wrap-width-md: minmax(0, 70ch);--wrap-width-lg: minmax(0, 900px);--wrap-width: var(--wrap-width-md);--layout-content-width: 70ch;--layout-aside-width: 245px;--layout-toc-width: 1fr;--prose-spacing: var(--sm1)}:root{--badge-font-size: var(--text-sm);--badge-border-radius: var(--radius-md);--badge-color: var(--base-0);--badge-background-color: light-dark(var(--base-700), var(--base-600));--badge-primary-color: var(--base-0);--badge-primary-background-color: light-dark( var(--primary-600), var(--primary-500) );--badge-success-color: light-dark(var(--success-500), var(--base-0));--badge-success-background-color: light-dark( var(--success-100), var(--success-500) );--badge-danger-color: light-dark(var(--danger-500), var(--base-0));--badge-danger-background-color: light-dark( var(--danger-100), var(--danger-500) );--badge-warning-color: light-dark(var(--warning-500), var(--base-950));--badge-warning-background-color: light-dark( var(--warning-100), var(--warning-500) )}:root{--bt-min-width: 101px;--bt-min-width-md: 123px;--bt-min-width-lg: 133px;--bt-font-size: var(--text-sm);--bt-font-size-lg: var(--text-md);--bt-font-weight: var(--semi-bold);--bt-color: var(--text-color);--bt-color-hover: light-dark(var(--text-color), var(--base-0));--bt-background-color: light-dark(var(--base-0), var(--base-800));--bt-background-color-hover: light-dark(var(--base-50), var(--base-900));--bt-border-color: var(--ui-border-color);--bt-border-width: var(--border-sm);--bt-border-radius: var(--radius-lg);--bt-border-radius-lg: var(--radius-xl);--bt-outline-color-hover: light-dark(var(--base-950), var(--base-0));--bt-outline-background-color-hover: light-dark( rgb(0 0 0 / .1), rgb(255 255 255 / .1) );--bt-outline-border-color: light-dark(var(--base-950), var(--base-0));--bt-outline-border-color-hover: light-dark(var(--base-950), var(--base-0));--bt-primary-color: var(--base-0);--bt-primary-color-hover: var(--base-0);--bt-primary-background-color: var(--primary-600);--bt-primary-background-color-hover: var(--primary-500);--bt-primary-border-color: var(--primary-600);--bt-primary-border-color-hover: var(--primary-600)}:root{--avatar-color: var(--base-0);--avatar-background-color: var(--base-400);--avatar-border-color: light-dark(var(--base-0), var(--base-500));--avatar-border-width: var(--border-sm);--avatar-radius: var(--radius-round);--avatar-status-dot-color-offline: var(--base-300);--avatar-status-dot-color-online: var(--yes-400)}:root{--banner-color: var(--base-0);--banner-background-color: light-dark( var(--primary-600), var(--primary-800) )}:root{--breadcrumbs-separator: "/";--breadcrumbs-separator-color: light-dark(var(--base-300), var(--base-600));--breadcrumbs-color: light-dark(var(--base-500), var(--base-400));--breadcrumbs-color-current: var(--text-color)}:root{--card-spacing: var(--sm3);--card-color: var(--text-color);--card-secondary-text-color: light-dark(var(--base-400), var(--base-500));--card-bg-color: light-dark(var(--base-100), var(--base-900));--card-border-radius: var(--radius-lg);--card-border-color: var(--ui-border-color);--card-border-width: var(--border-sm);--card-shadow: var(--shadow-md);--card-shadow-hover: var(--shadow-xl);--card-loading-bg: light-dark(var(--base-200), var(--base-900));--card-aspect-ratio: var(--ar-golden)}:root{--toggle-width: 50px;--toggle-height: 28px;--toggle-border-width: 2px;--toggle-track-color: light-dark(var(--base-300), var(--base-700));--toggle-track-color-checked: var(--yes-400);--toggle-thumb-color: var(--body-background-color)}:root{--faq-spacing: var(--xs3)}:root{--field-spacing: var(--xs1);--field-hint-color: light-dark(var(--base-400), var(--base-500));--field-error-color: light-dark(var(--danger-500), var(--danger-300));--field-message-position: static}:root{--featureItem-icon-box-size: var(--lg3);--featureItem-icon-size: var(--sm3);--featureItem-icon-color: light-dark( var(--primary-600), var(--primary-300) );--featureItem-icon-background-color: light-dark( var(--primary-100), var(--primary-900) );--featureItem-icon-border-radius: var(--radius-lg)}:root{--footer-background-color: light-dark(var(--primary-950), var(--base-950));--footer-text-color: light-dark(var(--base-0), var(--base-200));--footer-border-width: var(--border-md);--footer-border-color: light-dark(transparent, var(--base-700));--footer-link-color: light-dark(var(--base-0), var(--base-200));--footer-link-color-hover: light-dark(var(--primary-200), var(--base-0))}:root{--header-height: var(--xl1);--header-padding: var(--sm1);@media(width>=768px){--header-height: var(--xl2);--header-padding: var(--sm3)}--header-background-color: light-dark(var(--base-0), var(--base-950));--header-menu-background-color: var(--base-950);--header-menu-color: var(--base-0);--header-menu-color-current: var(--primary-400);--header-menu-secondary-color: var(--base-300);--header-menu-border-color: var(--base-500)}:root{--hero-radius: var(--radius-xl);--hero-content-padding: var(--md3);--hero-actions-spacing: var(--lg3);--hero-pagination-dot: var(--sm1);--hero-pagination-dot-color: var(--base-0);--hero-pagination-dot-active-color: var(--primary-600);--hero-pagination-opacity: var(--o-4)}:root{--pagination-size: var(--md3);--pagination-border-radius: var(--radius-md);--pagination-color: var(--text-color);--pagination-color-current: var(--base-0);--pagination-background-color-current: light-dark( var(--primary-600), var(--primary-500) );--pagination-background-color-hover: light-dark( var(--base-100), var(--base-800) )}:root{--prevNext-border-color: var(--ui-border-color);--prevNext-border-radius: var(--radius-lg);--prevNext-border-color-hover: var(--link-color);--prevNext-label-color: light-dark(var(--base-400), var(--base-500))}:root{--notice-spacing: var(--sm1);--notice-text-color: light-dark(var(--base-950), var(--base-0));--notice-background-color: light-dark(var(--base-50), var(--base-800));--notice-border-color: light-dark(var(--base-200), var(--base-500));--notice-border-width: var(--border-sm);--notice-border-radius: var(--radius-lg)}:root{--pricingCard-highlight-border-color: light-dark( var(--primary-600), var(--primary-400) );--pricingCard-check-color: light-dark( var(--success-500), var(--success-400) )}:root{--readProgressBar-height: var(--xs1);--readProgressBar-color: linear-gradient( 90deg, var(--primary-600) 0%, var(--primary-400) 100% )}:root{--section-spacing: var(--xl3);--section-header-spacing: var(--lg3);--section-eyebrow-color: light-dark(var(--primary-600), var(--primary-400));--section-lede-color: light-dark(var(--base-500), var(--base-400));--section-filled-background-color: light-dark( var(--base-50), var(--base-900) );--section-primary-background-color: light-dark( var(--primary-600), var(--primary-900) );--section-primary-text-color: var(--base-0);--section-primary-link-color: var(--primary-100);--section-primary-link-color-hover: var(--base-0);--section-primary-eyebrow-color: var(--primary-200);--section-primary-lede-color: var(--primary-100)}:root{--testimonial-role-color: light-dark(var(--base-400), var(--base-500))}:root{--tags-padding: var(--xs2);--tags-font-size: var(--text-sm);--tags-color: light-dark(var(--base-500), var(--base-400));--tags-background-color: light-dark(var(--base-100), var(--base-800));--tags-background-color-hover: light-dark(var(--base-200), var(--base-950));--tags-radius: var(--radius-md)}:root{--toc-color: var(--link-color);--toc-color-hover: var(--link-color-hover);--toc-spacing: var(--xs1);--toc-indentation: var(--xs3);--toc-icon-size: var(--sm1)}} diff --git a/src/tools/build-css.mjs b/src/tools/build-css.mjs index 937ac4f8..ea06f76f 100644 --- a/src/tools/build-css.mjs +++ b/src/tools/build-css.mjs @@ -4,18 +4,21 @@ * Outputs (all with @custom-media resolved and mixins expanded, so they work * with zero tooling; cascade layers are kept intact): * dist/mcss.css — single-file bundle of the framework core - * (declares the components/theme layer - * slots, imports neither) + * WITH the default theme baked in, so it + * stays a working drop-in on its own + * (declares the components slot, imports + * no component) * dist/mcss.min.css — minified core bundle * dist/mcss.components.css — single-file bundle of the component * library (@layer components) * dist/mcss.components.min.css — minified components bundle * dist/css/.css — every framework file processed individually, - * wrapped in its cascade layer (theme.* files ship - * their own @layer theme block and aren't re-wrapped) - * dist/css/mcss.css — @import index over the per-file outputs; theme - * imports are commented out (activating one is the - * consumer's move) + * wrapped in its cascade layer (theme.* files + * self-layer and aren't re-wrapped) + * dist/css/mcss.css — @import index over the per-file outputs; the + * default theme import is active (the framework + * doesn't paint without it), other themes are + * commented out (swap which one is active) * * Run: npm run build:css */ @@ -65,7 +68,6 @@ function layerOf(file) { const prefix = file.split(".")[0]; return ( { - settings: "settings", base: "base", elements: "elements", global: "global", @@ -77,7 +79,7 @@ function layerOf(file) { } const LAYER_STATEMENT = - "@layer settings, base, elements, global, components, theme, helpers;\n"; + "@layer base, elements, global, components, theme.defaults, theme.overrides, helpers;\n"; // Rebuild dist/css from scratch so renamed or deleted source files can't // leave stale outputs behind. @@ -85,11 +87,17 @@ await rm(join(OUT, "css"), { recursive: true, force: true }); await mkdir(join(OUT, "css"), { recursive: true }); // 1. Single-file bundles, core + component library (postcss-import inlines -// the layer() imports), each with a minified variant. +// the layer() imports), each with a minified variant. The core bundle +// bakes the default theme in so dist/mcss.css works as a one-file +// drop-in; source consumers activate the theme themselves. +const coreEntry = + "@import url(./mcss.css);\n@import url(./theme.default.css);\n"; const bundles = {}; for (const name of ["mcss.css", "mcss.components.css"]) { const entry = join(SRC, name); - const bundled = await process(await readFile(entry, "utf8"), entry, true); + const source = + name === "mcss.css" ? coreEntry : await readFile(entry, "utf8"); + const bundled = await process(source, join(SRC, `_entry-${name}`), true); await writeFile(join(OUT, name), BANNER + bundled); const { code: minified } = await esbuildTransform(bundled, { @@ -102,7 +110,10 @@ for (const name of ["mcss.css", "mcss.components.css"]) { } // 2. Per-file outputs for copy-paste consumers. -const buildTimeOnly = new Set(["settings.media-queries.css", "settings.mixins.css"]); +const buildTimeOnly = new Set([ + "settings.media-queries.css", + "settings.mixins.css", +]); const settingsPrelude = [ await readFile(join(SRC, "settings.media-queries.css"), "utf8"), await readFile(join(SRC, "settings.mixins.css"), "utf8"), @@ -114,7 +125,7 @@ const files = (await readdir(SRC)) f.endsWith(".css") && f !== "mcss.css" && f !== "mcss.components.css" && - !buildTimeOnly.has(f) + !buildTimeOnly.has(f), ) .sort(); @@ -124,26 +135,35 @@ for (const file of files) { const css = await readFile(join(SRC, file), "utf8"); // Prepend the build-time settings so @custom-media/@mixin resolve, then // wrap the file's own rules in its layer. preset-env removes the - // @custom-media definitions from the output. Theme files already carry - // their own @layer theme block, so they're not re-wrapped, and the index - // leaves them commented: activating a theme is the consumer's move. + // @custom-media definitions from the output. Theme files self-layer, so + // they're not re-wrapped. In the index the default theme import is + // active (the framework doesn't paint without a theme); other theme + // entries are commented: swap which one is active to change skins. const selfLayered = layer === "theme"; - const wrapped = selfLayered - ? `${settingsPrelude}\n${css}` - : `${settingsPrelude}\n@layer ${layer} {\n${css}\n}`; + const importsOnly = file === "theme.default.css"; + const wrapped = importsOnly + ? css + : selfLayered + ? `${settingsPrelude}\n${css}` + : `${settingsPrelude}\n@layer ${layer} {\n${css}\n}`; const processed = await process(wrapped, join(SRC, file)); await writeFile(join(OUT, "css", file), BANNER + processed.trim() + "\n"); + const isDefaultPart = file.startsWith("theme.default.") && !importsOnly; indexImports.push( - selfLayered - ? `/* @import url(./${file}); */ /* theme: activate at most one */` - : `@import url(./${file}) layer(${layer});` + importsOnly + ? `@import url(./${file}); /* the default theme */` + : isDefaultPart + ? `/* @import url(./${file}); */ /* imported by theme.default.css */` + : selfLayered + ? `/* @import url(./${file}); */ /* theme: swap for the default */` + : `@import url(./${file}) layer(${layer});`, ); } // 3. @import index (usable in the browser with no build step). await writeFile( join(OUT, "css", "mcss.css"), - BANNER + LAYER_STATEMENT + indexImports.join("\n") + "\n" + BANNER + LAYER_STATEMENT + indexImports.join("\n") + "\n", ); console.log( @@ -151,7 +171,7 @@ console.log( .map( ([name, { bundled, minified, minName }]) => `Built dist/${name} (${(bundled.length / 1024).toFixed(1)} kB), ` + - `dist/${minName} (${(minified.length / 1024).toFixed(1)} kB)` + `dist/${minName} (${(minified.length / 1024).toFixed(1)} kB)`, ) - .join("\n") + `\n${files.length} files in dist/css/` + .join("\n") + `\n${files.length} files in dist/css/`, ); From a3de32876f52d6a01d72189a7ffccbc8ff3e32fb Mon Sep 17 00:00:00 2001 From: Yann Date: Fri, 14 Aug 2026 16:58:52 -0700 Subject: [PATCH 05/37] Docs: the default theme replaces settings, interface tokens become ui tokens Every reference to settings.tokens.css / settings.ui.css follows the files into theme.default.*; the term interface tokens dies in favor of ui tokens everywhere (docs pages, component pages, agents docs, CLAUDE.md, blog structure post's kept-current list, homepage copy, llms.txt pointer). start.mdx, themes.mdx, tokens.mdx, and ai.mdx teach the new model: the framework is structure plus a default theme you activate and never edit; your theme overrides it from theme.overrides regardless of import order; the ownership rule now has no exceptions (the edit-tokens-at-setup guidance is gone). The AI rules block and skill mirror are synced. Co-Authored-By: Claude Fable 5 --- CLAUDE.md | 12 ++--- agents/components.md | 2 +- agents/css.md | 34 ++++++------ dist/css/component.fieldRow.css | 2 +- dist/mcss.components.css | 2 +- src/content/blog/mcss-structure.md | 6 +-- src/content/components/avatar.mdx | 2 +- src/content/components/badge.mdx | 6 +-- src/content/components/banner.mdx | 6 +-- src/content/components/breadcrumbs.mdx | 4 +- src/content/components/button.mdx | 2 +- src/content/components/card.mdx | 6 +-- src/content/components/faq.mdx | 4 +- src/content/components/featuregrid.mdx | 6 +-- src/content/components/field.mdx | 4 +- src/content/components/footer.mdx | 6 +-- src/content/components/header.mdx | 6 +-- src/content/components/hero.mdx | 2 +- src/content/components/notice.mdx | 2 +- src/content/components/pagination.mdx | 4 +- src/content/components/pricing.mdx | 4 +- src/content/components/readprogressbar.mdx | 2 +- src/content/components/section.mdx | 6 +-- src/content/components/start.mdx | 4 +- src/content/components/tags.mdx | 2 +- src/content/components/testimonial.mdx | 4 +- src/content/components/toc.mdx | 2 +- src/content/docs/ai.mdx | 12 ++--- src/content/docs/elements.mdx | 2 +- src/content/docs/global.mdx | 6 +-- src/content/docs/start.mdx | 59 +++++++++++---------- src/content/docs/themes.mdx | 37 ++++++------- src/content/docs/tokens.mdx | 34 ++++++------ src/pages/index.astro | 4 +- src/pages/llms.txt.js | 2 +- src/styles/framework/component.fieldRow.css | 2 +- 36 files changed, 154 insertions(+), 146 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index 8e1d9fac..2dae42f4 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -8,11 +8,11 @@ mCSS is a CSS framework (ITCSS-based) paired with an Astro documentation site, c ## Commands -| Command | Purpose | -| ------------------- | -------------------------------- | -| `npm run dev` | Start Astro dev server | -| `npm run build` | Production static build | -| `npm run preview` | Preview the production build | +| Command | Purpose | +| ----------------- | ---------------------------- | +| `npm run dev` | Start Astro dev server | +| `npm run build` | Production static build | +| `npm run preview` | Preview the production build | ## Architecture overview @@ -25,7 +25,7 @@ mCSS is a CSS framework (ITCSS-based) paired with an Astro documentation site, c ## CSS cascade layers are load-bearing -The framework uses native `@layer`; the layer name (declared in `src/styles/framework/mcss.css`) decides priority, and unlayered site CSS beats every layer. Import new framework files with `layer()`, except `theme.*.css` files: those wrap themselves in `@layer theme` and are activated from the consumer entry (`_global.css`), never imported by `mcss.css`. Never re-enable preset-env's `cascade-layers` polyfill in `postcss.config.cjs`. Always consult [agents/css.md](agents/css.md) before adding or moving CSS files. +The framework uses native `@layer`; the layer name (declared in `src/styles/framework/mcss.css`) decides priority, and unlayered site CSS beats every layer. Import new framework files with `layer()`, except `theme.*.css` files: those self-layer (`@layer theme.defaults` for the default theme's parts, `@layer theme.overrides` for consumer themes) and are activated from the consumer entry (`_global.css`), never imported by `mcss.css`. Every design value lives in the default theme (`theme.default.css`); the framework does not paint without it. Never re-enable preset-env's `cascade-layers` polyfill in `postcss.config.cjs`. Always consult [agents/css.md](agents/css.md) before adding or moving CSS files. ## Detailed reference docs diff --git a/agents/components.md b/agents/components.md index bec7ea3d..7c22a01e 100644 --- a/agents/components.md +++ b/agents/components.md @@ -8,7 +8,7 @@ 4. **Rest spread**: `{...rest}` on the root element so consumers can set any native attribute. 5. **`data-testid`**: accepted as a prop with a sensible per-component default. 6. **States vs modifiers**: runtime states are `.is-*` classes (`.is-active`, `.is-online`); build-time variants are block modifiers (`.card-filled`). Prefer styling ARIA attributes when one exists (`[aria-current]`, `[aria-disabled]`). -7. **Interface tokens**: every themable knob has a declared default in `settings.ui.css`; local-only custom properties use descriptive names (`--avatar-size`, not `--w`). +7. **UI tokens**: every themable knob has a declared default in `theme.default.ui.css`; local-only custom properties use descriptive names (`--avatar-size`, not `--w`). 8. **Slots**: default slot for main content; named slots documented on the component's docs page. 9. **A11y**: keyboard operable, labelled, JS motion gated on `prefers-reduced-motion`, no live-region roles on static content. diff --git a/agents/css.md b/agents/css.md index 69fa6e46..7f4ceb66 100644 --- a/agents/css.md +++ b/agents/css.md @@ -9,25 +9,27 @@ mCSS uses **native CSS cascade layers** (`@layer`) on top of an ITCSS-inspired f ## Cascade rules (load-bearing) 1. Framework layers, in priority order (later wins): - `settings, base, elements, global, components, theme, helpers` - The order runs **from default to deliberate**: `settings` through `components` are the framework's defaults, `theme` is a deliberate override of those defaults, helpers are the last word. (Not "generic to specific": a theme is broad in reach but late in intent, and intent decides cascade order.) + `base, elements, global, components, theme.defaults, theme.overrides, helpers` + The order runs **from default to deliberate**: `base` through `components` are the framework's structure, `theme.defaults` holds the default theme's design values, `theme.overrides` holds the consumer's deliberate deviations, helpers are the last word. (Not "generic to specific": a theme is broad in reach but late in intent, and intent decides cascade order.) 2. **Unlayered CSS beats every layer for normal declarations.** That's the consumer guarantee ("your CSS wins") and why site CSS is unlayered. -3. **The `theme` layer holds at most one active theme** (`theme.*.css`): token overrides plus optional style rules. Theme files are self-layered (each wraps its own content in `@layer theme`) and are **never imported by `mcss.css`**; the consumer entry activates one (see `_global.css`). No theme = the default look. Unlayered consumer CSS still beats themes. +3. **Every design value lives in the default theme** (`theme.default.css` entry importing `theme.default.tokens.css` + `theme.default.ui.css`, self-layered into `theme.defaults`). It is **never imported by `mcss.css`**; the consumer entry activates it right after `mcss.css` (see `_global.css`), and the framework does not paint without it. A consumer theme (self-layered into `theme.overrides`, see `theme.starter.css`) beats the default regardless of import order; a full skin like `theme.wireframe.css` is an entry that composes `theme.default.css` and overrides on top. Activate exactly one theme entry. Unlayered consumer CSS still beats all themes. 4. **Helpers are the exception: every helper declaration carries `!important`.** Important layered declarations beat unlayered CSS (the cascade inverts for important), so helpers win over site and consumer CSS too. They're element-level overrides, like inline styling. For important declarations layer order also inverts (earlier layer wins), which is why the reduced-motion block in `base.reset.css` still beats helpers. 5. `!important` is REQUIRED in every helper declaration and banned everywhere else in the framework, except the reduced-motion block in `base.reset.css` and third-party override files (see `site/external.astro.css`). `help.colors.css` and `help.spacing.css` get it from their generators. 6. `postcss.config.cjs` disables preset-env's `cascade-layers` polyfill. **Never remove that option** — the polyfill strips every `@layer` rule and silently replaces the cascade with specificity hacks. The browser floor is set in `.browserslistrc` (`defaults and supports css-cascade-layers`). ## Layer table -| Layer | Prefix | Purpose | -| ---------- | ------------- | ----------------------------------------------------------- | -| settings | `settings.*` | Primitive tokens (`settings.tokens.css`) and interface tokens (`settings.ui.css`); media queries + mixins import unlayered: build-time only | -| base | `base.*` | Reset only (`base.reset.css`) | -| elements | `elements.*` | Bare HTML element styles (text, form, media) | -| global | `global.*` | Structural patterns (a11y, grid, layout, prose, wrap) | -| components | `component.*` | Library components (card, hero, notice, …), including CSS-only single-class ones (badge, button, toggle); imported by `mcss.components.css`, never by `mcss.css` | -| theme | `theme.*` | Swappable themes: token overrides + style rules, self-layered via `@layer theme`, activated by the consumer entry (never by `mcss.css`) | -| helpers | `help.*` | Utility overrides (colors, spacing, typography), all `!important`: beats everything, including unlayered CSS | +| Layer | Prefix | Purpose | +| --------------- | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| base | `base.*` | Reset only (`base.reset.css`) | +| elements | `elements.*` | Bare HTML element styles (text, form, media) | +| global | `global.*` | Structural patterns (a11y, grid, layout, prose, wrap) | +| components | `component.*` | Library components (card, hero, notice, …), including CSS-only single-class ones (badge, button, toggle); imported by `mcss.components.css`, never by `mcss.css` | +| theme.defaults | `theme.default.*` | The default theme: scale tokens (`theme.default.tokens.css`) and ui tokens (`theme.default.ui.css`), imported by the `theme.default.css` entry, activated by the consumer entry (never by `mcss.css`); the framework does not paint without it | +| theme.overrides | `theme.*` | Your theme and swappable skins: token overrides + style rules, self-layered via `@layer theme.overrides`; a full skin (`theme.wireframe.css`) is an entry composing `theme.default.css` and overriding on top | +| helpers | `help.*` | Utility overrides (colors, spacing, typography), all `!important`: beats everything, including unlayered CSS | + +`settings.media-queries.css` and `settings.mixins.css` are the only remaining `settings.*` files: build-time material (`@custom-media` + mixins), imported unlayered, no runtime output. `page.*` is a file-naming convention only (page-specific styles, e.g. site `page.docs.css`); those files are plain unlayered consumer CSS, there is no `pages` layer. @@ -46,7 +48,7 @@ Site-only files keep the same prefixes but live in `src/styles/site/` and import - Block modifiers (`.card-filled`, `.bt-primary`) for **build-time variants** chosen by props/markup. - Prefer styling an ARIA attribute when one exists: `[aria-current="true"]`, `[aria-expanded="true"]`, `[aria-disabled="true"]` beat inventing a parallel class. - Nested states compile to two-class selectors (`.avatar.is-online`) that out-specify single-class modifiers (`.avatar-xl`). So declare custom-property **defaults on the block**, let modifiers override them, and only **consume** the properties inside state blocks — never declare defaults there (that's how the avatar status-dot regression happened). -- Element chains may go as deep as the block's own structure needs (`.home_morph_static_arrow` = arrow inside the morph's static state). The underscore marks hierarchy **within one block**; multi-word single names stay camelCase (`.home_themer_formRow`). A nested *component* always starts its own block (`.themeToggle_text`, never `.header_navMobile_themeToggle_text`). +- Element chains may go as deep as the block's own structure needs (`.home_morph_static_arrow` = arrow inside the morph's static state). The underscore marks hierarchy **within one block**; multi-word single names stay camelCase (`.home_themer_formRow`). A nested _component_ always starts its own block (`.themeToggle_text`, never `.header_navMobile_themeToggle_text`). ### Never couple classes from different components (CRITICAL) @@ -55,14 +57,14 @@ A selector must only contain classes from its own block. Never write a descendan To style a component from outside: - **Its root**: mix your own class onto the element in markup (`
`) and style that class. -- **Its internals**: use the component's `Class` props (`headerClass`, `titleClass`, …) to mix a class onto the part, or set the component's interface tokens on your own hook class. If neither exists yet, add the prop or token to the component. Do not reach in with a selector. +- **Its internals**: use the component's `Class` props (`headerClass`, `titleClass`, …) to mix a class onto the part, or set the component's ui tokens on your own hook class. If neither exists yet, add the prop or token to the component. Do not reach in with a selector. - **Bare HTML tags** (`.home_themer_formRow > button`), `.is-*` states, and ARIA attribute selectors are fine inside your own block. - **Context blocks are not components**: a component may reference the environment it sits in (`@scope (.prose) to (.not-prose)` in `component.notice.css`, `:root.theme-dark`), but the context's own file must never name specific components (that's why `global.prose.css` lists only bare tags). - **Theme files are the one sanctioned exception**: a `theme.*.css` file may select component classes from outside (`.card::after`, `.bt`) because a theme is by definition a style over the whole system, versioned with the framework. Even there, prefer token overrides; reach for selectors only for what tokens can't express (pseudo-elements, `nth-child` rhythm, `text-decoration`). ### Token naming grammar -Interface tokens (`settings.ui.css`) are the public API of every component; they follow `--component-part-property`, longhand, kebab-case: +UI tokens (`theme.default.ui.css`) are the public API of every component; they follow `--component-part-property`, longhand, kebab-case: - `--bt-background-color-hover`, `--notice-border-width`, `--avatar-status-dot-color-online` - No abbreviations (`--card-bg-color` is legacy; new tokens spell out `background-color`), no camelCase, no underscores. @@ -85,7 +87,7 @@ Never `transition: all` — it also transitions layout properties, so any late-a - **One block per file.** Every block gets its own file named after it (`.featureItem` lives in `component.featureItem.css`, never inside `component.featureGrid.css`), even for small companion blocks (`component.fieldRow.css`, site `component.webring.css`). - Framework file: create `src/styles/framework/..css` and add `@import url(./) layer();` in the matching block of `framework/mcss.css`, EXCEPT `component.*` files: those import in `framework/mcss.components.css` (the component library's own entry; `mcss.css` only declares the `components` slot). -- Theme file: create `src/styles/framework/theme..css` wrapping its own content in `@layer theme { … }`; do NOT import it in `mcss.css` (the consumer entry activates it; the dist index lists it commented out). +- Theme file: copy `src/styles/framework/theme.starter.css` to `theme..css` (its content self-layers via `@layer theme.overrides { … }`); do NOT import it in `mcss.css` (the consumer entry activates it after `theme.default.css`). For a full swappable skin, write an entry that imports `theme.default.css` and overrides on top, like `theme.wireframe.css`. The dist index lists non-default themes commented out. - Site file: create `src/styles/site/..css` and add a plain `@import` in `_global.css` (unlayered). - Framework CSS must never reference site-only selectors (e.g. `.expressive-code`); the site file mirrors any shared pattern itself. diff --git a/dist/css/component.fieldRow.css b/dist/css/component.fieldRow.css index ba5e8da0..5d934852 100644 --- a/dist/css/component.fieldRow.css +++ b/dist/css/component.fieldRow.css @@ -30,7 +30,7 @@ xxl: 1920px /* Inline composition: fields and buttons on one wrapping row (newsletter signup, search bar…). Mix .fieldRow_field onto each field: fieldRow never reaches into the field block itself, it only sets the - --field-message-position interface token so hints and errors overlay + --field-message-position ui token so hints and errors overlay below the row instead of pushing bottom-aligned buttons out of line. Leave a little vertical room under the row for them. */ .fieldRow { diff --git a/dist/mcss.components.css b/dist/mcss.components.css index 5305a89d..e26d7f63 100644 --- a/dist/mcss.components.css +++ b/dist/mcss.components.css @@ -772,7 +772,7 @@ li + li::before { /* Inline composition: fields and buttons on one wrapping row (newsletter signup, search bar…). Mix .fieldRow_field onto each field: fieldRow never reaches into the field block itself, it only sets the - --field-message-position interface token so hints and errors overlay + --field-message-position ui token so hints and errors overlay below the row instead of pushing bottom-aligned buttons out of line. Leave a little vertical room under the row for them. */ .fieldRow { diff --git a/src/content/blog/mcss-structure.md b/src/content/blog/mcss-structure.md index 73d9fed7..723f9f28 100644 --- a/src/content/blog/mcss-structure.md +++ b/src/content/blog/mcss-structure.md @@ -8,16 +8,16 @@ description: "An overview of how and why mCSS file structure is organized the wa ## File structure -> **Update (2026):** mCSS now uses native [CSS cascade layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer): each file is imported into a named `@layer`, and the layer name decides priority instead of the import order. The former "atoms" layer was also folded into components for v1 (a badge or a button is just a CSS-only component now). The list below reflects the current structure, and your own unlayered CSS always wins over the framework. See the [Getting Started docs][docs] for the current setup. +> **Update (2026):** mCSS now uses native [CSS cascade layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer): each file is imported into a named `@layer`, and the layer name decides priority instead of the import order. The former "atoms" layer was also folded into components for v1 (a badge or a button is just a CSS-only component now), and the former settings files later became the **default theme** (`theme.default.tokens.css` + `theme.default.ui.css`): every design value now lives in a theme, activated from your entry point, with your own theme overriding it. The list below reflects the current structure, and your own unlayered CSS always wins over the framework. See the [Getting Started docs][docs] for the current setup. If you look at the imports in `mcss.css` [on Github][1], you'll get the basic idea behind mCSS structure. Each file belongs to a layer, and the layers keep the cascade working _for_ us as opposed to specificity wars and cascading conflicts. This architecture is based on [ITCSS][itcss]. The basic idea is to organize CSS from least specific/broadest reach to most specific/local override so you get a smooth [specificity graph][graph] trending upward. -- Settings: where all the global variables are set (tokens and interface tokens). - Base: your reset and normalize rules. - Elements: HTML elements defaults, without any classes. - Global: layouts like `.wrap` and `.grid` and global styling like `.prose`. - Components: component specific styling, from single-class pieces like `.bt` buttons to full structures. -- Theme: a swappable theme, one file of token overrides that restyles the whole site. +- Theme defaults: the default theme, where every global variable is set (scale tokens and ui tokens). +- Theme overrides: your own theme, a file of token overrides that restyles the whole site. - Helpers: local overrides (last layer, so they beat everything above). - Your own CSS imports unlayered, after the framework, and wins over all of it. diff --git a/src/content/components/avatar.mdx b/src/content/components/avatar.mdx index de95419d..f53fca25 100644 --- a/src/content/components/avatar.mdx +++ b/src/content/components/avatar.mdx @@ -93,7 +93,7 @@ Its default size is 56px. (See the [HTML](#html) section below for all options.) ### Custom properties -The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens): +The following custom properties are available in [`theme.default.ui.css`](/docs/tokens#ui-tokens):
diff --git a/src/content/components/badge.mdx b/src/content/components/badge.mdx index fc4af899..91026445 100644 --- a/src/content/components/badge.mdx +++ b/src/content/components/badge.mdx @@ -26,12 +26,12 @@ The badge is a small label for statuses, categories, and "new" markers. It is a | File | Description | Source | | ---------------------------------- | ------------------------------ | ----------- | | `component.badge.css` | All badge styles | [Github][1] | -| `--badge-*` block in `settings.ui.css` | Interface tokens (see table below) | [Github][2] | +| `--badge-*` block in `theme.default.ui.css` | UI tokens (see table below) | [Github][2] |
[1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.badge.css -[2]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.ui.css +[2]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/theme.default.ui.css
@@ -88,7 +88,7 @@ One-off colors work like every other variant in mCSS: override the local custom ### Custom properties -The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens): +The following custom properties are available in [`theme.default.ui.css`](/docs/tokens#ui-tokens):
diff --git a/src/content/components/banner.mdx b/src/content/components/banner.mdx index b5127c02..452ff977 100644 --- a/src/content/components/banner.mdx +++ b/src/content/components/banner.mdx @@ -25,14 +25,14 @@ The `.banner` component is the thin announcement bar at the very top of the page | `component.banner.css` | All banner styles | [Github][1] | | `Banner.astro` | The Astro component | [Github][2] | | `icons/x.svg` | Dismiss icon | [Github][3] | -| `--banner-*` block in `settings.ui.css` | Interface tokens (see table below) | [Github][4] | +| `--banner-*` block in `theme.default.ui.css` | UI tokens (see table below) | [Github][4] |
[1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.banner.css [2]: https://github.com/minimaldesign/mCSS/blob/main/src/components/Banner.astro [3]: https://github.com/minimaldesign/mCSS/tree/main/src/assets/icons -[4]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.ui.css +[4]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/theme.default.ui.css @@ -82,7 +82,7 @@ Looking for the big closing call-to-action band instead? That's a [Section recip ### Custom properties -The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens): +The following custom properties are available in [`theme.default.ui.css`](/docs/tokens#ui-tokens):
diff --git a/src/content/components/breadcrumbs.mdx b/src/content/components/breadcrumbs.mdx index 92b7292a..d0138955 100644 --- a/src/content/components/breadcrumbs.mdx +++ b/src/content/components/breadcrumbs.mdx @@ -25,13 +25,13 @@ The `.breadcrumbs` component is a `nav > ol` trail with CSS-only separators, and | ---------------------------------------- | ------------------------------ | ----------- | | `component.breadcrumbs.css` | All breadcrumb styles | [Github][1] | | `Breadcrumbs.astro` | The Astro component | [Github][2] | -| `--breadcrumbs-*` block in `settings.ui.css` | Interface tokens (see table below) | [Github][3] | +| `--breadcrumbs-*` block in `theme.default.ui.css` | UI tokens (see table below) | [Github][3] |
[1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.breadcrumbs.css [2]: https://github.com/minimaldesign/mCSS/blob/main/src/components/Breadcrumbs.astro -[3]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.ui.css +[3]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/theme.default.ui.css diff --git a/src/content/components/button.mdx b/src/content/components/button.mdx index e97de389..6277b118 100644 --- a/src/content/components/button.mdx +++ b/src/content/components/button.mdx @@ -103,7 +103,7 @@ The `.bt-outline-white` and `.bt-white` (solid, primary text) are special case b ### Custom properties -The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens): +The following custom properties are available in [`theme.default.ui.css`](/docs/tokens#ui-tokens):
diff --git a/src/content/components/card.mdx b/src/content/components/card.mdx index c5584e44..f4bb94bd 100644 --- a/src/content/components/card.mdx +++ b/src/content/components/card.mdx @@ -43,14 +43,14 @@ Make sure you check out the [Tiles](/components/tiles) component to see how to l | `Card.astro` | The Astro component | [Github][3] | | `Tags.astro`, `Avatar.astro` | Composed components (dependencies) | [Github][3] | | [Tiles](/components/tiles) | Equal-height, container-responsive list layout | [Github][2] | -| `--card-*` block in `settings.ui.css` | Interface tokens (see below) | [Github][4] | +| `--card-*` block in `theme.default.ui.css` | UI tokens (see below) | [Github][4] |
[1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.card.css [2]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.tiles.css [3]: https://github.com/minimaldesign/mCSS/tree/main/src/components -[4]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.ui.css +[4]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/theme.default.ui.css @@ -265,7 +265,7 @@ A card carries **one** link: put `.card_link` on a real anchor (usually the titl ### Custom properties -The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens): +The following custom properties are available in [`theme.default.ui.css`](/docs/tokens#ui-tokens):
diff --git a/src/content/components/faq.mdx b/src/content/components/faq.mdx index 3684a12d..79596931 100644 --- a/src/content/components/faq.mdx +++ b/src/content/components/faq.mdx @@ -33,14 +33,14 @@ The `.faq` component groups `details`/`summary` disclosures into the classic FAQ | `component.faq.css` | Group spacing | [Github][1] | | `elements.interactive.css` | The `details`/`summary` styling + chevron | [Github][2] | | `Faq.astro`, `FaqItem.astro` | The Astro components | [Github][3] | -| `--faq-spacing` in `settings.ui.css` | Interface token | [Github][4] | +| `--faq-spacing` in `theme.default.ui.css` | UI token | [Github][4] |
[1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.faq.css [2]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/elements.interactive.css [3]: https://github.com/minimaldesign/mCSS/tree/main/src/components -[4]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.ui.css +[4]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/theme.default.ui.css diff --git a/src/content/components/featuregrid.mdx b/src/content/components/featuregrid.mdx index e2225db8..ffac1e95 100644 --- a/src/content/components/featuregrid.mdx +++ b/src/content/components/featuregrid.mdx @@ -37,7 +37,7 @@ The feature grid is the classic marketing "three columns of icon + title + text" | -------------------------------------------- | ---------------------------------- | ----------- | | `component.featureItem.css` | Feature item styles | [Github][1] | | `FeatureItem.astro` | The Astro component | [Github][2] | -| `--featureItem-*` block in `settings.ui.css` | Interface tokens (see table below) | [Github][3] | +| `--featureItem-*` block in `theme.default.ui.css` | UI tokens (see table below) | [Github][3] | | [Tiles](/components/tiles) | The container-responsive layout | [Github][2] |
@@ -46,7 +46,7 @@ Depends on [Tiles](/components/tiles) for the layout. Icons are yours to bring; [1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.featureItem.css [2]: https://github.com/minimaldesign/mCSS/tree/main/src/components -[3]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.ui.css +[3]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/theme.default.ui.css @@ -124,7 +124,7 @@ The icon box is `aria-hidden`: feature icons are decoration next to a real headi ### Custom properties -The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens): +The following custom properties are available in [`theme.default.ui.css`](/docs/tokens#ui-tokens):
diff --git a/src/content/components/field.mdx b/src/content/components/field.mdx index c11b5410..88000633 100644 --- a/src/content/components/field.mdx +++ b/src/content/components/field.mdx @@ -27,14 +27,14 @@ Type something that isn't an email address and tab away: the hint swaps for the | `component.fieldRow.css` | fieldRow composition (own block) | [Github][5] | | `elements.form.css` | Bare element styles + `:user-invalid` border | [Github][2] | | `Field.astro` | The Astro component | [Github][3] | -| `--field-*` block in `settings.ui.css` | Interface tokens (see table below) | [Github][4] | +| `--field-*` block in `theme.default.ui.css` | UI tokens (see table below) | [Github][4] |
[1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.field.css [2]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/elements.form.css [3]: https://github.com/minimaldesign/mCSS/blob/main/src/components/Field.astro -[4]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.ui.css +[4]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/theme.default.ui.css [5]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.fieldRow.css diff --git a/src/content/components/footer.mdx b/src/content/components/footer.mdx index e933a1ae..dac04e53 100644 --- a/src/content/components/footer.mdx +++ b/src/content/components/footer.mdx @@ -40,13 +40,13 @@ The `.footer` component is the site-wide bottom section: link columns on the rig | ----------------------------------- | ------------------------------ | ----------- | | `component.footer.css` | All footer styles | [Github][1] | | `Footer.astro` | The Astro component | [Github][2] | -| `--footer-*` block in `settings.ui.css` | Interface tokens (see table below) | [Github][3] | +| `--footer-*` block in `theme.default.ui.css` | UI tokens (see table below) | [Github][3] | [1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.footer.css [2]: https://github.com/minimaldesign/mCSS/blob/main/src/components/Footer.astro -[3]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.ui.css +[3]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/theme.default.ui.css @@ -85,7 +85,7 @@ Pick a real heading level for the column titles: the next one in your page's out ### Custom properties -The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens): +The following custom properties are available in [`theme.default.ui.css`](/docs/tokens#ui-tokens):
diff --git a/src/content/components/header.mdx b/src/content/components/header.mdx index b244a827..e3e4ef88 100644 --- a/src/content/components/header.mdx +++ b/src/content/components/header.mdx @@ -32,7 +32,7 @@ The `.header` component is the site-wide top bar: logo, primary navigation, opti | `component.header.css` | All header styles | [Github][1] | | `Header.astro` | The Astro component | [Github][2] | | `icons/menu.svg`, `icons/x.svg` | Mobile menu open/close icons | [Github][3] | -| `--header-*` block in `settings.ui.css` | Interface tokens (see table below) | [Github][4] | +| `--header-*` block in `theme.default.ui.css` | UI tokens (see table below) | [Github][4] | | `scripts/utilities.js` (`throttle`) | Used by the sticky-shadow script | [Github][5] |
@@ -40,7 +40,7 @@ The `.header` component is the site-wide top bar: logo, primary navigation, opti [1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.header.css [2]: https://github.com/minimaldesign/mCSS/blob/main/src/components/Header.astro [3]: https://github.com/minimaldesign/mCSS/tree/main/src/assets/icons -[4]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.ui.css +[4]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/theme.default.ui.css [5]: https://github.com/minimaldesign/mCSS/blob/main/src/scripts/utilities.js @@ -91,7 +91,7 @@ When using plain HTML you also need the small script that wires the hamburger; c ### Custom properties -The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens): +The following custom properties are available in [`theme.default.ui.css`](/docs/tokens#ui-tokens):
diff --git a/src/content/components/hero.mdx b/src/content/components/hero.mdx index 525ff00c..ef467fd9 100644 --- a/src/content/components/hero.mdx +++ b/src/content/components/hero.mdx @@ -81,7 +81,7 @@ The Slideshow layout features rotating content and background (same options avai ### Custom properties -The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens): +The following custom properties are available in [`theme.default.ui.css`](/docs/tokens#ui-tokens):
diff --git a/src/content/components/notice.mdx b/src/content/components/notice.mdx index 7c4883f8..d5640696 100644 --- a/src/content/components/notice.mdx +++ b/src/content/components/notice.mdx @@ -90,7 +90,7 @@ When using HTML, you'll need to include the SVG icons "manually." All the icons ### Custom properties -The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens): +The following custom properties are available in [`theme.default.ui.css`](/docs/tokens#ui-tokens):
diff --git a/src/content/components/pagination.mdx b/src/content/components/pagination.mdx index 2ca05db4..86fad993 100644 --- a/src/content/components/pagination.mdx +++ b/src/content/components/pagination.mdx @@ -26,7 +26,7 @@ Two navigation patterns for content sites: `.pagination` is the numbered kind fo | `component.prevNext.css` | Prev/next styles | [Github][2] | | `Pagination.astro`, `PrevNext.astro` | The Astro components | [Github][3] | | `icons/chevron-down.svg` | Arrow icon (rotated in CSS) | [Github][4] | -| `--pagination-*`, `--prevNext-*` token blocks | Interface tokens (see table below) | [Github][5] | +| `--pagination-*`, `--prevNext-*` token blocks | UI tokens (see table below) | [Github][5] |
@@ -34,7 +34,7 @@ Two navigation patterns for content sites: `.pagination` is the numbered kind fo [2]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.prevNext.css [3]: https://github.com/minimaldesign/mCSS/tree/main/src/components [4]: https://github.com/minimaldesign/mCSS/tree/main/src/assets/icons -[5]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.ui.css +[5]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/theme.default.ui.css diff --git a/src/content/components/pricing.mdx b/src/content/components/pricing.mdx index 26f67dc5..7ff6eb5d 100644 --- a/src/content/components/pricing.mdx +++ b/src/content/components/pricing.mdx @@ -28,7 +28,7 @@ The `.pricingCard` component is one tier of a pricing table: name, price, featur | `component.card.css`, `component.badge.css`, `component.button.css` | Base visuals (dependencies) | [Github][2] | | `PricingCard.astro` | The Astro component | [Github][3] | | `icons/check.svg` | Feature list check icon | [Github][4] | -| `--pricingCard-*` block in `settings.ui.css` | Interface tokens (see table below) | [Github][5] | +| `--pricingCard-*` block in `theme.default.ui.css` | UI tokens (see table below) | [Github][5] |
@@ -38,7 +38,7 @@ It extends the [card](/components/card) and uses the [badge](/components/badge) [2]: https://github.com/minimaldesign/mCSS/tree/main/src/styles/framework [3]: https://github.com/minimaldesign/mCSS/blob/main/src/components/PricingCard.astro [4]: https://github.com/minimaldesign/mCSS/tree/main/src/assets/icons -[5]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.ui.css +[5]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/theme.default.ui.css diff --git a/src/content/components/readprogressbar.mdx b/src/content/components/readprogressbar.mdx index 672710c1..72c93313 100644 --- a/src/content/components/readprogressbar.mdx +++ b/src/content/components/readprogressbar.mdx @@ -40,7 +40,7 @@ import ReadProgressBar from "../../components/ReadProgressBar.astro"; ### Custom properties -The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens): +The following custom properties are available in [`theme.default.ui.css`](/docs/tokens#ui-tokens): | Property | Description | | -------------------------- | ------------------------------ | diff --git a/src/content/components/section.mdx b/src/content/components/section.mdx index 662b3037..2b0758ca 100644 --- a/src/content/components/section.mdx +++ b/src/content/components/section.mdx @@ -28,7 +28,7 @@ The `.section` component is the workhorse wrapper marketing pages are made of: a | ---------------------------------------- | ---------------------------------- | ----------- | | `component.section.css` | All section styles | [Github][1] | | `Section.astro` | The Astro component | [Github][2] | -| `--section-*` block in `settings.ui.css` | Interface tokens (see table below) | [Github][3] | +| `--section-*` block in `theme.default.ui.css` | UI tokens (see table below) | [Github][3] |
@@ -36,7 +36,7 @@ Depends on `.wrap` (`global.wrap.css`), part of the mCSS core: the header and th [1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.section.css [2]: https://github.com/minimaldesign/mCSS/blob/main/src/components/Section.astro -[3]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.ui.css +[3]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/theme.default.ui.css @@ -148,7 +148,7 @@ The header and content each compose `.wrap` with a [width preset](/docs/global#w ### Custom properties -The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens): +The following custom properties are available in [`theme.default.ui.css`](/docs/tokens#ui-tokens):
diff --git a/src/content/components/start.mdx b/src/content/components/start.mdx index 2504c4ea..e1400878 100644 --- a/src/content/components/start.mdx +++ b/src/content/components/start.mdx @@ -8,14 +8,14 @@ type: "intro"
-The mCSS component library is entirely built with the [mCSS framework](/docs/start), and you **own the code**: instead of installing a package, you copy the pieces you want into your project and edit them like anything else you wrote. Every component's docs page starts with a table listing exactly which files, dependencies, and interface tokens it needs. +The mCSS component library is entirely built with the [mCSS framework](/docs/start), and you **own the code**: instead of installing a package, you copy the pieces you want into your project and edit them like anything else you wrote. Every component's docs page starts with a table listing exactly which files, dependencies, and ui tokens it needs. Each component comes in two flavors: - **Plain HTML + CSS.** Copy the `component.*.css` file (or grab the compiled version from [`dist/css/`](https://github.com/minimaldesign/mCSS/tree/main/dist/css); the whole library in one file is [`dist/mcss.components.css`](https://github.com/minimaldesign/mCSS/blob/main/dist/mcss.components.css)) and use the documented markup. Works with any framework, or none. - **Astro.** Copy the `.astro` file(s) for typed props, slots, and sensible accessibility defaults out of the box. -Components stay as pure HTML/CSS as possible. The exceptions ship only the few lines they need: the [header](/components/header)'s mobile menu, the dismissible [banner](/components/banner), the [hero](/components/hero)'s slideshow, the [table of contents](/components/toc)' scrollspy, and the [read progress bar](/components/readprogressbar)'s fallback for browsers without scroll-driven animations. Styling lives in [cascade layers](/docs/start), so your own unlayered CSS always wins, and every visual knob is a documented `--component-*` [interface token](/docs/tokens#interface-tokens). +Components stay as pure HTML/CSS as possible. The exceptions ship only the few lines they need: the [header](/components/header)'s mobile menu, the dismissible [banner](/components/banner), the [hero](/components/hero)'s slideshow, the [table of contents](/components/toc)' scrollspy, and the [read progress bar](/components/readprogressbar)'s fallback for browsers without scroll-driven animations. Styling lives in [cascade layers](/docs/start), so your own unlayered CSS always wins, and every visual knob is a documented `--component-*` [ui token](/docs/tokens#ui-tokens). You can see some of the Astro components in action on the [Marketing Template](/templates/marketing) ([code](https://github.com/minimaldesign/mCSS/blob/main/src/pages/templates/marketing.astro)). diff --git a/src/content/components/tags.mdx b/src/content/components/tags.mdx index 3f03599d..e55a51f4 100644 --- a/src/content/components/tags.mdx +++ b/src/content/components/tags.mdx @@ -56,7 +56,7 @@ import Playground from "../../components/_Playground.jsx"; ### Custom properties -The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens): +The following custom properties are available in [`theme.default.ui.css`](/docs/tokens#ui-tokens): | Property | Description | | ------------------------------- | --------------------------- | diff --git a/src/content/components/testimonial.mdx b/src/content/components/testimonial.mdx index 42fa47aa..f7eeb90c 100644 --- a/src/content/components/testimonial.mdx +++ b/src/content/components/testimonial.mdx @@ -27,14 +27,14 @@ The `.testimonial` component is a quote with attribution: a `figure` wrapping mC | `component.testimonial.css` | Layout + byline styles | [Github][1] | | `elements.text.css` | The `blockquote` styling (dependency) | [Github][2] | | `Testimonial.astro`, `Avatar.astro` | The Astro components | [Github][3] | -| `--testimonial-role-color` in `settings.ui.css` | Interface token | [Github][4] | +| `--testimonial-role-color` in `theme.default.ui.css` | UI token | [Github][4] |
[1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.testimonial.css [2]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/elements.text.css [3]: https://github.com/minimaldesign/mCSS/tree/main/src/components -[4]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.ui.css +[4]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/theme.default.ui.css diff --git a/src/content/components/toc.mdx b/src/content/components/toc.mdx index 551145f2..d8e2b814 100644 --- a/src/content/components/toc.mdx +++ b/src/content/components/toc.mdx @@ -42,7 +42,7 @@ This component's main functionality is to create a table of content via JavaScri ### Custom properties -The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens): +The following custom properties are available in [`theme.default.ui.css`](/docs/tokens#ui-tokens): | Property | Color | | ------------------- | ------------------------- | diff --git a/src/content/docs/ai.mdx b/src/content/docs/ai.mdx index 20a60004..dce622d6 100644 --- a/src/content/docs/ai.mdx +++ b/src/content/docs/ai.mdx @@ -40,10 +40,11 @@ Per-page docs: append `.md` to any mcss.dev docs or components URL (e.g. https:/ ### Mental model: layers from default to deliberate -All framework CSS lives in native cascade layers, declared in `mcss.css` in priority order (later wins): `settings, base, elements, global, components, theme, helpers`. `mcss.css` only declares the `components` slot; the component library fills it from a second entry, `mcss.components.css`, imported alongside (skip it in projects that build their own components). +All framework CSS lives in native cascade layers, declared in `mcss.css` in priority order (later wins): `base, elements, global, components, theme.defaults, theme.overrides, helpers`. `mcss.css` only declares the `components` and theme slots; the component library fills `components` from a second entry, `mcss.components.css`, imported alongside (skip it in projects that build their own components), and the default theme (`theme.default.css`) fills `theme.defaults` from YOUR entry, imported right after `mcss.css`: nothing paints without it. -- `settings` through `components` are the framework defaults: what things look like when nobody has an opinion. Never edit these files to restyle; override them from further up the order. -- `theme` holds at most one theme file: a deliberate opinion about the defaults. An empty theme layer IS the default look. +- `base` through `components` are the framework's structure. Never edit these files to restyle; override them from further up the order. +- `theme.defaults` holds the default theme: every design value (scale tokens + ui tokens). Never edit it either; it is what your overrides fall back to. +- `theme.overrides` holds at most one theme of your own: a deliberate opinion about the defaults (copy `theme.starter.css`). A full skin like `theme.wireframe.css` is an entry that composes the default theme and overrides on top; either way, activate exactly one theme entry. - Your own unlayered CSS is more deliberate still: it beats every layer, by design. Never use `!important` to win against the framework. - `helpers` (`help.*` files: spacing, color, typography utilities) are the one exception: every declaration carries `!important`, which inverts the cascade, so they beat even unlayered CSS. Use sparingly. `!important` is banned everywhere else. @@ -55,7 +56,7 @@ Inline `style` attributes don't participate in the order at all: they beat every ### Restyling, in order of preference -1. **Theme token overrides.** A theme is one file that restyles the whole site: `@layer theme { :root { ... } }` (self-layered, so it slots correctly however it's loaded). Copy `theme.default.css` to start one; activate exactly one from your CSS entry point, after `mcss.css` (which never imports themes itself). Anything the theme doesn't mention falls back to the defaults. Pick the blast radius per override: raw tokens (`--base-*`, `--text`) shift the whole palette or type scale, interface tokens (`--ui-border-color`, `--heading-font`) change every surface that shares the meaning, component tokens (`--bt-border-radius`, `--card-*`) turn one knob. +1. **Theme token overrides.** A theme is one file that restyles the whole site: `@layer theme.overrides { :root { ... } }` (self-layered, so it slots correctly however it's loaded). Copy `theme.starter.css` to start one; import it from your CSS entry point after `theme.default.css`, the default theme that carries every design value and that your entry must activate right after `mcss.css` (which never imports themes itself; nothing paints without the default theme). Your theme lands in `theme.overrides` and beats the default's `theme.defaults` regardless of import order; anything it doesn't mention falls back to the default theme. Pick the blast radius per override: scale tokens (`--base-*`, `--text`) shift the whole palette or type scale, ui tokens (`--ui-border-color`, `--heading-font`) change every surface that shares the meaning, component tokens (`--bt-border-radius`, `--card-*`) turn one knob. 2. **Theme style rules**, only if a token doesn't exist for that value, or for what tokens can't express (pseudo-elements, `nth-child` rhythm, etc.). It's ok to override elements like `body` if there is no other way to reliably set it globally. Theme files are the ONE place allowed to select framework classes from outside: component classes, framework globals like `.a11y-skipLink`, and bare element selectors. **A `body` rule belongs here, not in project CSS**. Make sure you keep the ordering general to specific (same as ITCSS). No `!important` in themes. 3. **Unlayered project CSS** for what belongs to your project rather than to the design: page layouts, one-off blocks. @@ -63,8 +64,7 @@ Do not edit framework files. ### Tokens -- `settings.tokens.css`: raw primitives (palettes, type scale, spacing, radii). -- `settings.ui.css`: interface tokens, the public API of every element and component (semantic aliases plus all defaults). Placement is by name: a token named for what it's for (`--heading-*`, `--bt-*`, `--ui-border-color`) goes here; a token named for what it is (`--sm1`, `--base-500`) is a scale token and goes in `settings.tokens.css`. Values prefer another token (a shared-meaning interface token first, else a scale token); raw values only for content (strings, icon URLs), one-off control geometry, or element-relative `em`/`ch` measures. +- Every token lives in the default theme, split in two: `theme.default.tokens.css` holds the scales (palettes, type scale, spacing, radii), `theme.default.ui.css` holds the ui tokens, the public API of every element and component (semantic aliases plus all defaults). Placement is by name: a token named for what it's for (`--heading-*`, `--bt-*`, `--ui-border-color`) is a ui token; a token named for what it is (`--sm1`, `--base-500`) is a scale token. Values prefer another token (a shared-meaning ui token first, else a scale token); raw values only for content (strings, icon URLs), one-off control geometry, or element-relative `em`/`ch` measures. - Grammar: `--component-part-property`, longhand, kebab-case, no abbreviations: `--bt-background-color-hover`, `--notice-border-width`. - Feedback colors: use the semantic aliases `--success-*`, `--danger-*`, `--warning-*`, not the raw scales they point at. - The same discipline applies to your own CSS: **no raw color and no raw type size in a `component.*.css` file.** If the theme doesn't name the value you need, add a token to the theme and use that. A `#8a5500` or a `1.0625rem` sitting in a component is a design decision nobody can find, and the second use of it will be a slightly different number. diff --git a/src/content/docs/elements.mdx b/src/content/docs/elements.mdx index 72a8b35e..ff18bfa0 100644 --- a/src/content/docs/elements.mdx +++ b/src/content/docs/elements.mdx @@ -49,7 +49,7 @@ import iconX from '../../assets/icons/x.svg?raw'; ### Headings - Heading sizes are fluid via `clamp()` set on `--heading-font-size-h1`—`--heading-font-size-h6` tokens: each interpolates from a minimum size (at 480px viewports and below) to a maximum (from 1024px up), so the type scale tightens on small screens without media queries. The preferred value mixes `rem` with `vw`, which keeps browser text zoom working. The tokens live in `settings.ui.css` with the rest of the heading family (`--heading-spacing-*`, `--heading-line-height-*`), mapping each level onto the [type scale](/docs/tokens#font-size); override any of them in your theme to change how a heading level scales. + Heading sizes are fluid via `clamp()` set on `--heading-font-size-h1`—`--heading-font-size-h6` tokens: each interpolates from a minimum size (at 480px viewports and below) to a maximum (from 1024px up), so the type scale tightens on small screens without media queries. The preferred value mixes `rem` with `vw`, which keeps browser text zoom working. The tokens live in `theme.default.ui.css` with the rest of the heading family (`--heading-spacing-*`, `--heading-line-height-*`), mapping each level onto the [type scale](/docs/tokens#font-size); override any of them in your theme to change how a heading level scales.
diff --git a/src/content/docs/global.mdx b/src/content/docs/global.mdx index ff37b87f..ab21d14b 100644 --- a/src/content/docs/global.mdx +++ b/src/content/docs/global.mdx @@ -28,7 +28,7 @@ The grid system is extremely easy to use, light weight, and very flexible. It us It's composed of 2 classes: `.grid` for the container, and `.grid_item` for each grid item. -The default grid gap is defined as a custom property in [`settings.ui.css`](/docs/tokens#interface-tokens) and is responsive: `16px` (`--sm1`) on small screens, stepping up to `24px` (`--sm3`) at the `--md` breakpoint (768px). You can override `--grid-column-gap` and `--grid-row-gap` globally in your own theme, or on a specific `.grid` element. A `grid-flush` modifier is available if you don't want any gap. +The default grid gap is defined as a custom property in [`theme.default.ui.css`](/docs/tokens#ui-tokens) and is responsive: `16px` (`--sm1`) on small screens, stepping up to `24px` (`--sm3`) at the `--md` breakpoint (768px). You can override `--grid-column-gap` and `--grid-row-gap` globally in your own theme, or on a specific `.grid` element. A `grid-flush` modifier is available if you don't want any gap. Because `.grid` reads its gaps from those two custom properties, overriding a specific grid is just a matter of setting them on the element. Add a class of your own: @@ -170,7 +170,7 @@ The content column comes in three width presets, set with a modifier on the wrap ### Settings -You can customize 3 diffent sizes of left/right padding for responsive designs as well as the width of your content. The values below are set in `settings.ui.css`. +You can customize 3 diffent sizes of left/right padding for responsive designs as well as the width of your content. The values below are set in `theme.default.ui.css`.
@@ -274,7 +274,7 @@ Every scaffold's main column (`.layout_content_main`) is a named [size container ### Settings -Column widths come from three tokens in `settings.ui.css`. `--layout-toc-width` accepts any grid track size; the `1fr` default lets the TOC absorb whatever space the main column doesn't use. +Column widths come from three tokens in `theme.default.ui.css`. `--layout-toc-width` accepts any grid track size; the `1fr` default lets the TOC absorb whatever space the main column doesn't use.
diff --git a/src/content/docs/start.mdx b/src/content/docs/start.mdx index f8596c60..fd61fa95 100644 --- a/src/content/docs/start.mdx +++ b/src/content/docs/start.mdx @@ -56,7 +56,7 @@ mCSS implements this with native [CSS cascade layers][cascade-layers]: every fra The styles live in two folders, and the split is the methodology in miniature: -- **[`framework/`][framework-src]**: mCSS itself, every file in a named layer. You copy it and mostly leave it alone: customization goes through the `settings.*` tokens, a [theme](/docs/themes), or your own CSS, not through edits scattered across framework files. +- **[`framework/`][framework-src]**: mCSS itself, every file in a named layer, including the default theme that holds all its design values. You copy it and leave it alone: customization goes through [a theme of your own](/docs/themes) or your own CSS, never through edits to framework files. - **[`site/`][site-src]**: this site's own CSS, imported **unlayered, after the framework**, so it wins without specificity games. Because those files are unlayered, the order you import them in is important so make sure you have a clear mental model of [ITCSS][1] principles before delving in. You can also refer to mCSS [own `/site`'s setup][4] as a reference. ### The layers, in order @@ -65,31 +65,31 @@ Each layer only ever loses to the ones after it. The sections below detail each
-| Layer | Files | What lives there | -| ------------- | ------------- | -------------------------------------------------------- | -| `settings` | `settings.*` | Tokens, interface tokens, media queries, mixins | -| `base` | `base.*` | Reset/normalize | -| `elements` | `elements.*` | Default styling of bare HTML elements | -| `global` | `global.*` | Grid, wrap, layout scaffolds, prose, a11y | -| `components` | `component.*` | One self-contained block per file | -| `theme` | `theme.*` | At most one active theme (token overrides + style rules) | -| `helpers` | `help.*` | `!important` one-off overrides, last resort | -| _(unlayered)_ | your own CSS | Beats every layer above, except helpers | +| Layer | Files | What lives there | +| ----------------- | ----------------- | --------------------------------------------------------- | +| `base` | `base.*` | Reset/normalize | +| `elements` | `elements.*` | Default styling of bare HTML elements | +| `global` | `global.*` | Grid, wrap, layout scaffolds, prose, a11y | +| `components` | `component.*` | One self-contained block per file | +| `theme.defaults` | `theme.default.*` | The default theme: every design value (scale + ui tokens) | +| `theme.overrides` | `theme.*` | Your theme or a swappable skin (overrides + style rules) | +| `helpers` | `help.*` | `!important` one-off overrides, last resort | +| _(unlayered)_ | your own CSS | Beats every layer above, except helpers |
+(Two `settings.*` files remain outside the layers: `settings.media-queries.css` and `settings.mixins.css` are build-time material with no runtime output.) + The framework's own entry, [`framework/mcss.css`][mcss-entry], makes the split concrete: it declares the layer order and puts every core framework file in its layer. You never edit it: ```css /* framework/mcss.css (abridged) */ -@layer settings, base, elements, global, components, theme, helpers; +@layer base, elements, global, components, theme.defaults, theme.overrides, helpers; /* Build-time only (media queries + mixins definitions) */ @import url(./settings.media-queries.css); @import url(./settings.mixins.css); -@import url(./settings.tokens.css) layer(settings); -@import url(./settings.ui.css) layer(settings); @import url(./base.reset.css) layer(base); @import url(./elements.text.css) layer(elements); @import url(./global.grid.css) layer(global); @@ -97,9 +97,9 @@ The framework's own entry, [`framework/mcss.css`][mcss-entry], makes the split c /* etc. — note: no component.* and no theme.* imports here */ ``` -Two layers are declared but never filled by this entry. The `theme` slot is yours (see below), and the `components` slot belongs to the component library, which lives in its own entry, [`framework/mcss.components.css`][mcss-components-entry]. Import it alongside `mcss.css` for the full library, or skip it and build your own components; the layer order declared in `mcss.css` decides priority either way, so import order between the two doesn't matter. +Three slots are declared but never filled by this entry. The two theme slots are filled from YOUR entry: `theme.defaults` by the default theme (`theme.default.css`, which the framework needs to paint at all) and `theme.overrides` by a theme of your own, if any (see below). The `components` slot belongs to the component library, which lives in its own entry, [`framework/mcss.components.css`][mcss-components-entry]. Import it alongside `mcss.css` for the full library, or skip it and build your own components; the layer order declared in `mcss.css` decides priority either way, so import order between the entries doesn't matter. -Your site's entry (this site's is [`_global.css`][4]) pulls in the framework, activates at most one theme, then imports your own CSS unlayered: +Your site's entry (this site's is [`_global.css`][4]) pulls in the framework, activates the default theme (plus optionally one of your own), then imports your own CSS unlayered: ```css /* your entry file */ @@ -109,10 +109,15 @@ Your site's entry (this site's is [`_global.css`][4]) pulls in the framework, ac your own components. */ @import url(./framework/mcss.components.css); -/* Optional: activate ONE theme, a swappable style. Theme files are - self-layered (@layer theme inside the file), so no layer() - annotation. None imported = the default look. */ -/* @import url(./framework/theme.wireframe.css); */ +/* The default theme: every design value the framework uses. + Theme files are self-layered, so no layer() annotation. For a + full swappable skin (e.g. theme.wireframe.css), import that + entry INSTEAD: it composes the default itself. */ +@import url(./framework/theme.default.css); + +/* Optional: your own theme (copy theme.starter.css). It lands in + theme.overrides, so it beats the default no matter the order. */ +/* @import url(./theme.acme.css); */ /* Your own CSS: UNLAYERED, after the framework. Its normal declarations win over every mCSS layer without fighting @@ -134,12 +139,10 @@ Your site's entry (this site's is [`_global.css`][4]) pulls in the framework, ac
-### Settings +### Build-time settings -Settings are where all custom properties are set. +Two `settings.*` files sit outside the layers entirely: they're build-time material with no runtime output. -- [Tokens][5] is where you set default values for sizes, font stacks, colors, transitions, etc. See [the docs][5] for all the values available by default. -- [Interface tokens][interfaceTokens] are an abstraction level to standardize common values across elements and components. For instance, components use `--ui-border-color` instead of the lower level token `--base-200`, so one override restyles every bordered surface. - [Media queries][6] include responsive sizes, as well as user preferences like color schemes, reduced motion, etc. See [media queries docs][6]. - **Mixins** is optional. It is not used in other parts of mCSS by default but can be useful to streamline your own components' code. It requires a [PostCSS plugin][7] to work. @@ -178,9 +181,11 @@ Some components are **CSS-only**: a single class on a single element, with no As ### Theme -This is the one layer the framework declares but never fills: `mcss.css` imports no theme, and the default look IS the empty theme layer. The theme itself is really part of [your CSS](#your-css-unlayered): one `theme.*.css` file of token overrides plus optional style rules that you activate from your own entry file, whether it's a shipped theme like `theme.wireframe.css` or one you wrote yourself. +Every design value in mCSS lives in a theme; the layers before this one are pure structure. The framework ships a **default theme** (`theme.default.css`) in two halves: [tokens][5], the scales where sizes, font stacks, colors, and transitions get their values, and [ui tokens][interfaceTokens], which map those scales onto elements and components (components use `--ui-border-color` instead of the lower level `--base-200`, so one override restyles every bordered surface). Your entry activates it right after `mcss.css`; without it, nothing paints. + +Your own theme is one `theme.*.css` file of token overrides plus optional style rules that imports after the default (copy `theme.starter.css`). It lands in the `theme.overrides` layer, so it beats the default theme no matter the import order, and everything it doesn't mention falls back. **Never edit the default theme files**; your design lives in your theme, which is what keeps framework updates painless. A shipped skin like `theme.wireframe.css` replaces the default import instead: it's an entry that composes the default and overrides on top. -The theme's remit is wider than component classes. Theme files are the ONE place allowed to select framework classes from outside: component classes, framework globals like `.a11y-skipLink`, and bare element selectors. **A `body` rule belongs in the theme, not in your project CSS.** Before adding a declaration to `body`, check whether an interface token already delivers it: the elements layer paints the page from `--body-background-color`, `--text-color`, and `--text`, so a theme that sets those does not also need to set `background-color`, `color`, and `font-family`. See [the theme docs][themes] for how themes work and how to build one. +The theme's remit is wider than component classes. Theme files are the ONE place allowed to select framework classes from outside: component classes, framework globals like `.a11y-skipLink`, and bare element selectors. **A `body` rule belongs in the theme, not in your project CSS.** Before adding a declaration to `body`, check whether a ui token already delivers it: the elements layer paints the page from `--body-background-color`, `--text-color`, and `--text`, so a theme that sets those does not also need to set `background-color`, `color`, and `font-family`. See [the theme docs][themes] for how themes work and how to build one. ### Helpers @@ -440,7 +445,7 @@ The exact compile floor lives in `.browserslistrc` (`baseline 2024`). Keep it: w [github]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.notice.css [grid]: /docs/global#grid [helpers]: /docs/helpers -[interfaceTokens]: /docs/tokens#interface-tokens +[interfaceTokens]: /docs/tokens#ui-tokens [layers]: /blog/what-is-itcss#the-layers-of-itcss [layout]: /docs/global#layouts [postcss-post]: /blog/postcss-setup-for-mcss diff --git a/src/content/docs/themes.mdx b/src/content/docs/themes.mdx index bf2442d0..7d9244f8 100644 --- a/src/content/docs/themes.mdx +++ b/src/content/docs/themes.mdx @@ -9,19 +9,19 @@ version: 1
-| File name | Description | Source | -| --------------------- | ----------------------------------------------- | ---------------------- | -| `theme.default.css` | Empty template: copy it to start your own theme | [Github][srcDefault] | -| `theme.wireframe.css` | Example theme with a hand-drawn wireframe look | [Github][srcWireframe] | +| File name | Description | Source | +| --------------------- | -------------------------------------------------------- | ---------------------- | +| `theme.default.css` | The default theme: every design value the framework uses | [Github][srcDefault] | +| `theme.starter.css` | Starter template: copy it to write your own theme | [Github][srcStarter] | +| `theme.wireframe.css` | Full swappable skin with a hand-drawn wireframe look | [Github][srcWireframe] |
[srcDefault]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/theme.default.css +[srcStarter]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/theme.starter.css [srcWireframe]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/theme.wireframe.css -A theme is **one CSS file that restyles your whole site**. It contains [token](/docs/tokens) overrides, plus optional style rules for the few things tokens can't express. Swap which theme file your entry point imports and everything changes; anything the theme doesn't mention falls back to the framework defaults. - -mCSS ships with **no theme active**: the default look is simply the framework's own token defaults with an empty `theme` layer. +A theme is **a file of design decisions**: [token](/docs/tokens) overrides, plus optional style rules for the few things tokens can't express. The framework itself ships as structure plus a **default theme** that holds every design value (the scales and the ui defaults). Your own theme imports after it and overrides only what it cares about; anything it doesn't mention falls back to the default theme. **Never edit the default theme files**: keeping them pristine is what makes framework updates painless, the same way you'd never edit a parent theme you build on.
@@ -29,17 +29,18 @@ mCSS ships with **no theme active**: the default look is simply the framework's
-Import exactly one theme file from your own entry point, after the framework: +Activate the default theme right after the framework, then (optionally) your own theme after it: ```css @import url(./framework/mcss.css); @import url(./framework/mcss.components.css); /* optional */ -@import url(./framework/theme.wireframe.css); +@import url(./framework/theme.default.css); +@import url(./theme.acme.css); /* your theme */ ``` -That's the entire swap. Theme files are **self-layered**: each one wraps its own content in `@layer theme`, so it lands in the right cascade slot no matter how you load it (plain `@import`, a `` tag on `dist/css/theme.wireframe.css`, or a bundler). No `layer()` annotation needed. +A full swappable skin like the wireframe replaces the default import instead: `theme.wireframe.css` is an entry that composes `theme.default.css` itself and overrides on top, so you import it INSTEAD of the default. Either way you activate exactly one theme entry. -The `theme` layer sits after `components` and before `helpers`, so a theme beats every framework default but still loses to your own unlayered CSS and to [helpers](/docs/helpers). The layer order runs from default to deliberate: the framework's layers are what things look like when nobody has an opinion, a theme is a deliberate opinion about those defaults, and your unlayered CSS is more deliberate still. +Theme files are **self-layered**, so they land in the right cascade slot no matter how you load them (plain `@import`, a `` tag on a `dist/css` file, or a bundler); no `layer()` annotation needed. The default theme's parts layer into `theme.defaults`, and your theme layers into `theme.overrides`, which comes after it: **your theme beats the default no matter the import order.** Both sit after `components` and before `helpers`, so any theme beats the framework's structure but still loses to your own unlayered CSS and to [helpers](/docs/helpers). The layer order runs from default to deliberate: the framework's layers and the default theme are what things look like when nobody has an opinion, your theme is a deliberate opinion about those defaults, and your unlayered CSS is more deliberate still.
@@ -47,15 +48,15 @@ The `theme` layer sits after `components` and before `helpers`, so a theme beats
-Themes work because of the two token tiers below them: +Themes work because the default theme is built in two halves your overrides can hook into: -1. **Raw tokens** (`settings.tokens.css`) hold raw values: palettes, type scale, spacing, etc. -2. **[Interface tokens](/docs/tokens#interface-tokens)** (`settings.ui.css`) map those primitives onto meaning: semantic aliases like `--ui-border-color`, element defaults (`--heading-*`, `--input-*`, ...), plus every component's token defaults (`--bt-*`, `--card-*`, ...). Interface tokens usually take another token for value; raw values appear only where following the scales would be wrong (content, one-off control geometry, `em`-relative measures). +1. **Scale tokens** (`theme.default.tokens.css`) hold the raw values, named for what they are: palettes, type scale, spacing, etc. +2. **[UI tokens](/docs/tokens#ui-tokens)** (`theme.default.ui.css`) map those scales onto meaning, named for what they're for: semantic aliases like `--ui-border-color`, element defaults (`--heading-*`, `--input-*`, ...), plus every component's token defaults (`--bt-*`, `--card-*`, ...). A ui token usually takes another token for value; raw values appear only where following the scales would be wrong (content, one-off control geometry, `em`-relative measures). Because components read `var(--ui-border-color)` instead of a raw hex, a theme gets three levels of blast radius from a single override: ```css -@layer theme { +@layer theme.overrides { :root { /* Whole palette shifts */ --base-950: #1a1208; @@ -89,11 +90,11 @@ Also worth copying: what it leaves alone. The focus ring stays crisp and high-co
-Copy [`theme.default.css`][srcDefault] and start overriding. Guidelines: +Copy [`theme.starter.css`][srcStarter] and start overriding. Guidelines: -- **Tokens first.** Most themes never need a selector: raw tokens for the palette and type, interface tokens for cross-cutting changes, component tokens for details. +- **Tokens first.** Most themes never need a selector: scale tokens for the palette and type, ui tokens for cross-cutting changes, component tokens for details. - **Style rules for the rest**, only for what tokens can't express. Pseudo-elements, `nth-child` rhythm, `text-decoration`, and text rendering on `body` such as font smoothing, `font-synthesis`, or `text-wrap` have no token hooks, so themes may style them directly. Theme files are the one place in mCSS allowed to select framework classes from outside: component classes, framework globals like `.a11y-skipLink`, and bare element selectors (see [`theme.wireframe.css`][srcWireframe] for a real example). **A `body` rule belongs here, not in your project CSS.** -- **Check tokens before writing a `body` rule.** Most of what people write into one is already an interface token. The elements layer paints the page from `--body-background-color`, `--text-color`, and `--text`, so a theme that sets those does not also need to set `background-color`, `color`, and `font-family`. What is left over (the text-rendering properties the framework exposes no token for) is exactly what a theme style rule is for. +- **Check tokens before writing a `body` rule.** Most of what people write into one is already a ui token. The elements layer paints the page from `--body-background-color`, `--text-color`, and `--text`, so a theme that sets those does not also need to set `background-color`, `color`, and `font-family`. What is left over (the text-rendering properties the framework exposes no token for) is exactly what a theme style rule is for. - **No `!important`.** A theme is meant to be overridable by your page CSS; the last word belongs to [helpers](/docs/helpers).
diff --git a/src/content/docs/tokens.mdx b/src/content/docs/tokens.mdx index 9d8e2143..806fbf64 100644 --- a/src/content/docs/tokens.mdx +++ b/src/content/docs/tokens.mdx @@ -9,15 +9,15 @@ import Notice from "../../components/Notice.astro";
-| File name | Source | -| --------------------- | ------------- | -| `settings.tokens.css` | [Github][src] | +| File name | Source | +| -------------------------- | ------------- | +| `theme.default.tokens.css` | [Github][src] | -[src]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.tokens.css +[src]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/theme.default.tokens.css **Design tokens** are the "atoms" of a design system. They define the design elements of a user interface, such as colors, typography, and spacing. -In mCSS, tokens are CSS custom properties that provide a flexible, coherent, and harmonious set of values designed to make implementing UI/UX projects fast and easy. +In mCSS, tokens are CSS custom properties, and every one of them lives in the **default theme**: `theme.default.tokens.css` holds the scales documented on this page, and `theme.default.ui.css` holds the [ui tokens](#ui-tokens) that map those scales onto elements and components. Together they provide a flexible, coherent, and harmonious set of values designed to make implementing UI/UX projects fast and easy.
@@ -25,31 +25,31 @@ In mCSS, tokens are CSS custom properties that provide a flexible, coherent, and
-When you start a new project, open `settings.tokens.css` and change the values of as many tokens as necessary to match the design you're planning to implement. (Things like spacing might not need to change, but you'll almost certainly need to customize your `base` and `primary` colors for instance.) For deviations you want to keep swappable, put the overrides in a [theme](/docs/themes) instead of editing the defaults. +When you start a new project, put your design's values in [your own theme](/docs/themes): override your `base` and `primary` colors, your font stacks, and whatever else your design calls for. (Things like spacing might not need to change.) Never edit the default theme files themselves; everything your theme doesn't mention falls back to them, and keeping them pristine is what makes updating the framework painless. The same discipline applies to the CSS you write on top of the framework: **no raw color and no raw type size in a `component.*.css` file.** If your theme does not name the value you need, add a token to the theme and use that. A `#8a5500` or a `1.0625rem` sitting in a component is a design decision nobody can find, and the second use of it will be a slightly different number. Spacing is more forgiving (a `2px` optical nudge is a property of that component and belongs to it), but color and type size are the design system, and the design system lives in one file.
-## Interface tokens +## UI tokens
-| File name | Source | -| ----------------- | --------------- | -| `settings.ui.css` | [Github][srcUi] | +| File name | Source | +| ---------------------- | --------------- | +| `theme.default.ui.css` | [Github][srcUi] |
-[srcUi]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.ui.css +[srcUi]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/theme.default.ui.css -Interface tokens are the decisions layer over the raw scales. Every one is named for what it's _for_ (an element, a component, or a shared meaning) and standardizes UI decisions in logical groups: semantic aliases like `--ui-border-color` or `--success-*`, element defaults (`--heading-*`, `--input-*`, ...), plus every component's token defaults (`--bt-*`, `--card-*`, ...). That naming is the whole split between the two files: a token named for what it _is_ (a step on a scale, like `--sm1` or `--base-500`) lives in `settings.tokens.css`; a token named for what it's _for_ lives in `settings.ui.css`. This gives tokens meaning and context, and it's what makes [themes](/docs/themes) powerful: override one interface token and every rule that consumes it follows. +UI tokens are the decisions half of the default theme. Every one is named for what it's _for_ (an element, a component, or a shared meaning) and answers "what does this thing use by default": semantic aliases like `--ui-border-color` or `--success-*`, element defaults (`--heading-*`, `--input-*`, ...), plus every component's token defaults (`--bt-*`, `--card-*`, ...). That naming is the whole split between the two files: a token named for what it _is_ (a step on a scale, like `--sm1` or `--base-500`) lives in `theme.default.tokens.css`; a token named for what it's _for_ lives in `theme.default.ui.css`. This gives tokens meaning and context, and it's what makes [themes](/docs/themes) powerful: override one ui token and every rule that consumes it follows. -An interface token usually takes another token for value: another interface token when the meaning is shared (`--input-border-color` is `--ui-border-color`), or a scale token when the value should follow the system scales (`--fieldset-padding` is `--sm3`). A raw value is correct only where following the scales would be wrong: content like separator strings and icon URLs, geometry tuned to one control (`--toggle-width`), and element-relative measures like the `em` heading spacing, which tracks each heading's own size instead of the page scale. The test: if a theme retuned the scales, should this value follow? +A ui token usually takes another token for value: another ui token when the meaning is shared (`--input-border-color` is `--ui-border-color`), or a scale token when the value should follow the system scales (`--fieldset-padding` is `--sm3`). A raw value is correct only where following the scales would be wrong: content like separator strings and icon URLs, geometry tuned to one control (`--toggle-width`), and element-relative measures like the `em` heading spacing, which tracks each heading's own size instead of the page scale. The test: if a theme retuned the scales, should this value follow? -`elements.*` and `global.*` files tend to use interface tokens, while `component.*` files mix them with low level tokens. There are no hard and fast rules about the type of token you should use in your custom component. Just try to think where else this style is used in the design and if it comes up in many places with the same context, a new interface token is probably the best option. +`elements.*` and `global.*` files tend to use ui tokens, while `component.*` files mix them with low level tokens. There are no hard and fast rules about the type of token you should use in your custom component. Just try to think where else this style is used in the design and if it comes up in many places with the same context, a new ui token is probably the best option.
@@ -120,7 +120,7 @@ Check out [tints.dev](https://www.tints.dev) if you want to make your own palett ### Highlight -The text marker color, consumed by the `--marker-color` interface token (what `` uses). Override `--highlight-500` in a theme to restyle every highlight. +The text marker color, consumed by the `--marker-color` ui token (what `` uses). Override `--highlight-500` in a theme to restyle every highlight. | Token | Value | Demo | | --------------- | ------- | --------------------------------------------------------------------------- | @@ -233,7 +233,7 @@ Check out [typescale.com ](https://typescale.com) if you need help creating your
-The heading font sizes (`--heading-font-size-h1`…`-h6`) build on this scale but are [interface tokens](#interface-tokens); they're documented with [the headings themselves](/docs/elements#headings). +The heading font sizes (`--heading-font-size-h1`…`-h6`) build on this scale but are [ui tokens](#ui-tokens); they're documented with [the headings themselves](/docs/elements#headings). ### Font weight @@ -310,7 +310,7 @@ The heading font sizes (`--heading-font-size-h1`…`-h6`) build on this scale bu It wouldn't be super useful to list the values here. You can look at them [on Github][githubShadows] if you're curious. -[githubShadows]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.tokens.css#L217 +[githubShadows]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/theme.default.tokens.css#L217
diff --git a/src/pages/index.astro b/src/pages/index.astro index 2937d5bb..61057bf8 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -36,7 +36,7 @@ const mcssComponentsMinGzipKb = Math.round(gzipSync(mcssComponentsMinCss).length // Section 4's diff panes, rendered with Shiki (github-dark) at build time. // Each list matches the overrides in page.home.css line for line. const themeDiffs = { - default: `/* settings.ui.css defaults (excerpt) */ + default: `/* theme.default.ui.css defaults (excerpt) */ :root { --heading-font: var(--display); --text: ui-sans-serif, system-ui, sans-serif; @@ -353,7 +353,7 @@ const themeDiffs = {
  • MIT LicenseUse it anywhere. Keep it forever.
  • Versioned releasesPull updates when you choose to.
    • -
  • One token fileEdit settings.tokens.css, not node_modules.
    • +
  • One theme fileYour design lives in your theme, not node_modules.
diff --git a/src/pages/llms.txt.js b/src/pages/llms.txt.js index bf5a005d..4f9d4a45 100644 --- a/src/pages/llms.txt.js +++ b/src/pages/llms.txt.js @@ -24,7 +24,7 @@ export async function GET(context) { const text = [ "# mCSS", "", - "> mCSS is a modern CSS framework and component library for websites: real CSS, real markup, zero build step, built on native cascade layers. It is not a dependency; you copy the files into your project and own them, editing them directly (starting with settings.tokens.css).", + "> mCSS is a modern CSS framework and component library for websites: real CSS, real markup, zero build step, built on native cascade layers. It is not a dependency; you copy the files into your project and own them, putting your design in a theme of your own (copy theme.starter.css).", "", "Every docs and components page has a markdown twin at the same URL with `.md` appended (e.g. /docs/tokens.md). Fetch those instead of the HTML pages. The complete reference in a single file is at /llms-full.txt.", "", diff --git a/src/styles/framework/component.fieldRow.css b/src/styles/framework/component.fieldRow.css index ef985592..09908787 100644 --- a/src/styles/framework/component.fieldRow.css +++ b/src/styles/framework/component.fieldRow.css @@ -3,7 +3,7 @@ /* Inline composition: fields and buttons on one wrapping row (newsletter signup, search bar…). Mix .fieldRow_field onto each field: fieldRow never reaches into the field block itself, it only sets the - --field-message-position interface token so hints and errors overlay + --field-message-position ui token so hints and errors overlay below the row instead of pushing bottom-aligned buttons out of line. Leave a little vertical room under the row for them. */ .fieldRow { From 801315ef229a23f305d53eb3ad04393ed8bc84ff Mon Sep 17 00:00:00 2001 From: Yann Date: Fri, 14 Aug 2026 17:01:41 -0700 Subject: [PATCH 06/37] Theme entries pin the layer order Layer priority is set by first declaration, so a theme file parsed before mcss.css used to establish the wrong order (theme before base). theme.default.css, theme.starter.css, and theme.wireframe.css now open with the canonical @layer statement, the same trick the marketing template uses inline: whichever framework file loads first pins the correct order, and a user override loaded before the framework still wins. Verified in-browser: override-before-framework wins, wireframe skin renders over the composed default, dist/mcss.min.css alone paints the complete default look. Co-Authored-By: Claude Fable 5 --- dist/css/theme.default.css | 5 +++++ dist/css/theme.starter.css | 5 +++++ dist/css/theme.wireframe.css | 5 +++++ dist/mcss.css | 5 +++++ dist/mcss.min.css | 2 +- src/styles/framework/theme.default.css | 5 +++++ src/styles/framework/theme.starter.css | 5 +++++ src/styles/framework/theme.wireframe.css | 5 +++++ 8 files changed, 36 insertions(+), 1 deletion(-) diff --git a/dist/css/theme.default.css b/dist/css/theme.default.css index c6482e9e..cb8423c6 100644 --- a/dist/css/theme.default.css +++ b/dist/css/theme.default.css @@ -20,5 +20,10 @@ entry and overrides on top. */ +/* Pin the layer order before anything else in this file: priority is + set by first declaration, so a theme loaded before mcss.css still + slots correctly. */ +@layer base, elements, global, components, theme.defaults, theme.overrides, helpers; + @import url(./theme.default.tokens.css); @import url(./theme.default.ui.css); diff --git a/dist/css/theme.starter.css b/dist/css/theme.starter.css index d6e383e1..40874785 100644 --- a/dist/css/theme.starter.css +++ b/dist/css/theme.starter.css @@ -55,6 +55,11 @@ xxl: 1920px theme and overrides on top instead: see theme.wireframe.css. */ +/* Pin the layer order before declaring into it: priority is set by + first declaration, so this file slots correctly even if it loads + before mcss.css. */ +@layer base, elements, global, components, theme.defaults, theme.overrides, helpers; + @layer theme.overrides { :root { /* A new palette usually gets you 80% of the way: */ diff --git a/dist/css/theme.wireframe.css b/dist/css/theme.wireframe.css index 1b2d8794..005432a8 100644 --- a/dist/css/theme.wireframe.css +++ b/dist/css/theme.wireframe.css @@ -39,6 +39,11 @@ xxl: 1920px point (see theme.default.css). */ +/* Pin the layer order before anything else in this file: priority is + set by first declaration, so this skin slots correctly even if it + loads before mcss.css. */ +@layer base, elements, global, components, theme.defaults, theme.overrides, helpers; + @import url(./theme.default.css); /* Registered so it computes on the element that declares it and then diff --git a/dist/mcss.css b/dist/mcss.css index e43509c5..5113e997 100644 --- a/dist/mcss.css +++ b/dist/mcss.css @@ -1,5 +1,6 @@ /*! mCSS v1.3.0 | MIT | https://mcss.dev */ +@layer base, elements, global, components, theme.defaults, theme.overrides, helpers; @layer base, elements, global, components, theme.defaults, theme.overrides, helpers; /* mCSS framework entry point. @@ -4593,6 +4594,10 @@ body.dev { entry and overrides on top. */ +/* Pin the layer order before anything else in this file: priority is + set by first declaration, so a theme loaded before mcss.css still + slots correctly. */ + /* DEFAULT THEME: TOKENS */ /* diff --git a/dist/mcss.min.css b/dist/mcss.min.css index 321daac5..a274e46a 100644 --- a/dist/mcss.min.css +++ b/dist/mcss.min.css @@ -1,2 +1,2 @@ /*! mCSS v1.3.0 | MIT | https://mcss.dev */ -@layer base,elements,global,components,theme.defaults,theme.overrides,helpers;@layer base{*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion:reduce){*,:before,:after{animation-delay:-1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}}:where(:not(dialog)){margin:0}html,body{min-height:100%}}@layer elements{body{line-sizing:normal;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;background-color:var(--body-background-color);color:var(--text-color);font-family:var(--text);line-height:var(--body-line-height);&:has(.body-is-locked){overflow:hidden}}}@layer elements{::selection{color:var(--selection-color);background-color:var(--selection-background-color)}:where(a,u,ins,abbr){text-underline-offset:2px}a{font-weight:var(--link-font-weight);color:var(--link-color);&:where(:hover){color:var(--link-color-hover);-webkit-text-decoration:none;text-decoration:none}}address{width:max-content;max-width:100%;padding:var(--sm1) var(--sm3);font-style:normal;background-color:light-dark(var(--base-50),var(--base-900));border:var(--xs2) solid transparent;border-image:8 repeating-linear-gradient(-45deg,var(--no-500) 0,var(--no-500) var(--xs2),transparent 0,transparent calc(var(--xs2) * 2),var(--primary-500) 0,var(--primary-500) calc(var(--xs2) * 3),transparent 0,transparent calc(var(--xs2) * 4))}abbr{position:relative;cursor:help;&:after{position:relative;top:calc(var(--xs1) * -1);width:var(--sm1);height:var(--sm1);display:inline-block;content:"";background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='circle-help'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M9.09%209a3%203%200%200%201%205.83%201c0%202-3%203-3%203'/%3E%3Cpath%20d='M12%2017h.01'/%3E%3C/svg%3E");background-size:contain}&:hover:before{width:max-content;max-width:400px;position:absolute;left:50%;padding:var(--xs1) var(--xs3);content:attr(title);color:var(--base-0);background-color:var(--base-900);opacity:var(--o-4);border-radius:var(--radius-sm);transform:translate(-50%,-2em)}}blockquote{position:relative;margin-bottom:var(--prose-spacing);padding-block:var(--blockquote-padding-block);padding-inline:var(--blockquote-padding-inline);font-style:italic;background-color:var(--blockquote-background-color);border-radius:var(--blockquote-border-radius);&:before{content:"";position:absolute;top:0;inset-inline-start:0;width:var(--blockquote-accent-width);height:100%;border-start-start-radius:var(--blockquote-border-radius);border-end-start-radius:var(--blockquote-border-radius);background:var(--blockquote-accent-color)}p{&:first-child:before{content:open-quote}&:last-child{margin-bottom:0;&:after{content:close-quote}}}}cite{font-style:italic}code,var,kbd{font-family:var(--mono);font-size:.9em;font-style:normal;color:var(--text-code-muted-color)}:is(code,var,kbd):not(h1 *,h2 *,h3 *,h4 *,h5 *,h6 *,pre *){padding:.15em .3em;color:var(--text-code-color);background-color:var(--text-code-background-color);border-radius:var(--radius-sm)}dt{font-weight:var(--bold)}dd+dt{margin-top:.5em}del{text-decoration-color:var(--danger-500);text-decoration-style:wavy}h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{overflow-wrap:break-word;text-wrap:balance}h1,.h1,h2,.h2,h3,.h3,h4,.h4{font-family:var(--heading-font);font-weight:var(--heading-weight);letter-spacing:var(--heading-letter-spacing)}h1,.h1{margin-bottom:var(--heading-spacing-h1);font-size:var(--heading-font-size-h1);line-height:var(--heading-line-height-h1)}h2,.h2{margin-bottom:var(--heading-spacing-h2);font-size:var(--heading-font-size-h2);line-height:var(--heading-line-height-h2)}h3,.h3{margin-bottom:var(--heading-spacing-h3);font-size:var(--heading-font-size-h3);line-height:var(--heading-line-height-h3)}h4,.h4{margin-bottom:var(--heading-spacing-h4);font-size:var(--heading-font-size-h4);line-height:var(--heading-line-height-h4)}h5,.h5{margin-bottom:var(--heading-spacing-h5);font-size:var(--heading-font-size-h5);line-height:var(--heading-line-height-h5)}h6,.h6{margin-bottom:var(--heading-spacing-h6);font-size:var(--heading-font-size-h6);line-height:var(--heading-line-height-h6)}:where(h1,h2,h3):has(+:is(h2,h3,h4)){margin-bottom:var(--heading-spacing-consecutive)}hr{display:flex;justify-content:center;align-items:center;height:0;border-style:solid;border-width:var(--border-sm) 0 0;color:var(--ui-border-color);overflow:visible;&:after{content:var(--hr-content);padding:0 var(--xs1);line-height:1;letter-spacing:var(--tracking-sm);background-color:var(--body-background-color)}}:where(hr):has(+:is(p)){margin-bottom:var(--prose-spacing)}ins{padding:.15em .3em;color:var(--ins-color);background-color:var(--ins-background-color);border-radius:var(--radius-sm);-webkit-text-decoration:none;text-decoration:none;&:before{content:"+ "}}mark{padding:.15em .5em;background:var(--marker-color);border-radius:1em 0}:where(ol,ul){list-style-type:none;padding:0}pre{font-family:var(--mono);font-size:var(--pre-font-size);white-space:pre-wrap;border-radius:var(--pre-border-radius)}q{font-style:italic}s{text-decoration-color:light-dark(var(--base-950),var(--base-50));text-decoration-style:wavy}sub,sup{line-height:1}}@layer elements{:root{quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(af),:not(:lang(af))>:lang(af){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ak),:not(:lang(ak))>:lang(ak){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(asa),:not(:lang(asa))>:lang(asa){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(az),:not(:lang(az))>:lang(az){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(bem),:not(:lang(bem))>:lang(bem){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(bez),:not(:lang(bez))>:lang(bez){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(bn),:not(:lang(bn))>:lang(bn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(brx),:not(:lang(brx))>:lang(brx){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(cgg),:not(:lang(cgg))>:lang(cgg){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(chr),:not(:lang(chr))>:lang(chr){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(cy),:not(:lang(cy))>:lang(cy){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(da),:not(:lang(da))>:lang(da){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(dav),:not(:lang(dav))>:lang(dav){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(dje),:not(:lang(dje))>:lang(dje){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(dz),:not(:lang(dz))>:lang(dz){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ebu),:not(:lang(ebu))>:lang(ebu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ee),:not(:lang(ee))>:lang(ee){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(en),:not(:lang(en))>:lang(en){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(fil),:not(:lang(fil))>:lang(fil){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(fo),:not(:lang(fo))>:lang(fo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ga),:not(:lang(ga))>:lang(ga){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(gd),:not(:lang(gd))>:lang(gd){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(gl),:not(:lang(gl))>:lang(gl){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(gu),:not(:lang(gu))>:lang(gu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(guz),:not(:lang(guz))>:lang(guz){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ha),:not(:lang(ha))>:lang(ha){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(hi),:not(:lang(hi))>:lang(hi){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(id),:not(:lang(id))>:lang(id){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ig),:not(:lang(ig))>:lang(ig){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(jmc),:not(:lang(jmc))>:lang(jmc){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kam),:not(:lang(kam))>:lang(kam){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kde),:not(:lang(kde))>:lang(kde){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kea),:not(:lang(kea))>:lang(kea){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(khq),:not(:lang(khq))>:lang(khq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ki),:not(:lang(ki))>:lang(ki){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kln),:not(:lang(kln))>:lang(kln){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(km),:not(:lang(km))>:lang(km){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kn),:not(:lang(kn))>:lang(kn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ko),:not(:lang(ko))>:lang(ko){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ksb),:not(:lang(ksb))>:lang(ksb){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lg),:not(:lang(lg))>:lang(lg){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ln),:not(:lang(ln))>:lang(ln){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lo),:not(:lang(lo))>:lang(lo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lrc),:not(:lang(lrc))>:lang(lrc){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lu),:not(:lang(lu))>:lang(lu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(luo),:not(:lang(luo))>:lang(luo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lv),:not(:lang(lv))>:lang(lv){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mas),:not(:lang(mas))>:lang(mas){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mer),:not(:lang(mer))>:lang(mer){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mfe),:not(:lang(mfe))>:lang(mfe){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mgo),:not(:lang(mgo))>:lang(mgo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ml),:not(:lang(ml))>:lang(ml){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mn),:not(:lang(mn))>:lang(mn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mr),:not(:lang(mr))>:lang(mr){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ms),:not(:lang(ms))>:lang(ms){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mt),:not(:lang(mt))>:lang(mt){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(my),:not(:lang(my))>:lang(my){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(naq),:not(:lang(naq))>:lang(naq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(nd),:not(:lang(nd))>:lang(nd){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ne),:not(:lang(ne))>:lang(ne){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(nus),:not(:lang(nus))>:lang(nus){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(nyn),:not(:lang(nyn))>:lang(nyn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(pa),:not(:lang(pa))>:lang(pa){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(pt),:not(:lang(pt))>:lang(pt){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(rof),:not(:lang(rof))>:lang(rof){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(rwk),:not(:lang(rwk))>:lang(rwk){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(saq),:not(:lang(saq))>:lang(saq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(sbp),:not(:lang(sbp))>:lang(sbp){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(seh),:not(:lang(seh))>:lang(seh){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ses),:not(:lang(ses))>:lang(ses){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(si),:not(:lang(si))>:lang(si){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(so),:not(:lang(so))>:lang(so){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(sw),:not(:lang(sw))>:lang(sw){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ta),:not(:lang(ta))>:lang(ta){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(te),:not(:lang(te))>:lang(te){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(teo),:not(:lang(teo))>:lang(teo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(th),:not(:lang(th))>:lang(th){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(to),:not(:lang(to))>:lang(to){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(tr),:not(:lang(tr))>:lang(tr){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(twq),:not(:lang(twq))>:lang(twq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(tzm),:not(:lang(tzm))>:lang(tzm){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(uz-Cyrl),:not(:lang(uz-Cyrl))>:lang(uz-Cyrl){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vai),:not(:lang(vai))>:lang(vai){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vai-Latn),:not(:lang(vai-Latn))>:lang(vai-Latn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vi),:not(:lang(vi))>:lang(vi){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vun),:not(:lang(vun))>:lang(vun){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(xog),:not(:lang(xog))>:lang(xog){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(yo),:not(:lang(yo))>:lang(yo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(yue-Hans),:not(:lang(yue-Hans))>:lang(yue-Hans){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(zh),:not(:lang(zh))>:lang(zh){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(zu),:not(:lang(zu))>:lang(zu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(uz),:not(:lang(uz))>:lang(uz){quotes:"\201c" "\201d" "\2019" "\2018"}:root:lang(eu),:not(:lang(eu))>:lang(eu){quotes:"\201c" "\201d" "\201c" "\201d"}:root:lang(tk),:not(:lang(tk))>:lang(tk){quotes:"\201c" "\201d" "\201c" "\201d"}:root:lang(ar),:not(:lang(ar))>:lang(ar){quotes:"\201d" "\201c" "\2019" "\2018"}:root:lang(ur),:not(:lang(ur))>:lang(ur){quotes:"\201d" "\201c" "\2019" "\2018"}:root:lang(fi),:not(:lang(fi))>:lang(fi){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(he),:not(:lang(he))>:lang(he){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(lag),:not(:lang(lag))>:lang(lag){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(rn),:not(:lang(rn))>:lang(rn){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(sn),:not(:lang(sn))>:lang(sn){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(sv),:not(:lang(sv))>:lang(sv){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(sr),:not(:lang(sr))>:lang(sr){quotes:"\201e" "\201c" "\2018" "\2018"}:root:lang(sr-Latn),:not(:lang(sr-Latn))>:lang(sr-Latn){quotes:"\201e" "\201c" "\2018" "\2018"}:root:lang(bg),:not(:lang(bg))>:lang(bg){quotes:"\201e" "\201c" "\201e" "\201c"}:root:lang(lt),:not(:lang(lt))>:lang(lt){quotes:"\201e" "\201c" "\201e" "\201c"}:root:lang(bs-Cyrl),:not(:lang(bs-Cyrl))>:lang(bs-Cyrl){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(cs),:not(:lang(cs))>:lang(cs){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(de),:not(:lang(de))>:lang(de){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(dsb),:not(:lang(dsb))>:lang(dsb){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(et),:not(:lang(et))>:lang(et){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(hr),:not(:lang(hr))>:lang(hr){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(hsb),:not(:lang(hsb))>:lang(hsb){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(is),:not(:lang(is))>:lang(is){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(lb),:not(:lang(lb))>:lang(lb){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(luy),:not(:lang(luy))>:lang(luy){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(mk),:not(:lang(mk))>:lang(mk){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(sk),:not(:lang(sk))>:lang(sk){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(sl),:not(:lang(sl))>:lang(sl){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(ka),:not(:lang(ka))>:lang(ka){quotes:"\201e" "\201c" "\ab" "\bb"}:root:lang(bs),:not(:lang(bs))>:lang(bs){quotes:"\201e" "\201d" "\2018" "\2019"}:root:lang(agq),:not(:lang(agq))>:lang(agq){quotes:"\201e" "\201d" "\201a" "\2019"}:root:lang(ff),:not(:lang(ff))>:lang(ff){quotes:"\201e" "\201d" "\201a" "\2019"}:root:lang(nmg),:not(:lang(nmg))>:lang(nmg){quotes:"\201e" "\201d" "\ab" "\bb"}:root:lang(ro),:not(:lang(ro))>:lang(ro){quotes:"\201e" "\201d" "\ab" "\bb"}:root:lang(pl),:not(:lang(pl))>:lang(pl){quotes:"\201e" "\201d" "\ab" "\bb"}:root:lang(hu),:not(:lang(hu))>:lang(hu){quotes:"\201e" "\201d" "\bb" "\ab"}:root:lang(nl),:not(:lang(nl))>:lang(nl){quotes:"\2018" "\2019" "\201c" "\201d"}:root:lang(ti-ER),:not(:lang(ti-ER))>:lang(ti-ER){quotes:"\2018" "\2019" "\201c" "\201d"}:root:lang(dua),:not(:lang(dua))>:lang(dua){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(ksf),:not(:lang(ksf))>:lang(ksf){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(rw),:not(:lang(rw))>:lang(rw){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(nn),:not(:lang(nn))>:lang(nn){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(nb),:not(:lang(nb))>:lang(nb){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(ast),:not(:lang(ast))>:lang(ast){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(bm),:not(:lang(bm))>:lang(bm){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(br),:not(:lang(br))>:lang(br){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(ca),:not(:lang(ca))>:lang(ca){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(dyo),:not(:lang(dyo))>:lang(dyo){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(el),:not(:lang(el))>:lang(el){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(es),:not(:lang(es))>:lang(es){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(ewo),:not(:lang(ewo))>:lang(ewo){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(mg),:not(:lang(mg))>:lang(mg){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(mua),:not(:lang(mua))>:lang(mua){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(sg),:not(:lang(sg))>:lang(sg){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(it),:not(:lang(it))>:lang(it){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(kab),:not(:lang(kab))>:lang(kab){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(kk),:not(:lang(kk))>:lang(kk){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(pt-PT),:not(:lang(pt-PT))>:lang(pt-PT){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(nnh),:not(:lang(nnh))>:lang(nnh){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(sq),:not(:lang(sq))>:lang(sq){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(bas),:not(:lang(bas))>:lang(bas){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(be),:not(:lang(be))>:lang(be){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(ky),:not(:lang(ky))>:lang(ky){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(sah),:not(:lang(sah))>:lang(sah){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(ru),:not(:lang(ru))>:lang(ru){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(uk),:not(:lang(uk))>:lang(uk){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(zgh),:not(:lang(zgh))>:lang(zgh){quotes:"\ab" "\bb" "\201e" "\201d"}:root:lang(shi),:not(:lang(shi))>:lang(shi){quotes:"\ab" "\bb" "\201e" "\201d"}:root:lang(shi-Latn),:not(:lang(shi-Latn))>:lang(shi-Latn){quotes:"\ab" "\bb" "\201e" "\201d"}:root:lang(am),:not(:lang(am))>:lang(am){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(az-Cyrl),:not(:lang(az-Cyrl))>:lang(az-Cyrl){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(fa),:not(:lang(fa))>:lang(fa){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(fr-CH),:not(:lang(fr-CH))>:lang(fr-CH){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(gsw),:not(:lang(gsw))>:lang(gsw){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(jgo),:not(:lang(jgo))>:lang(jgo){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(kkj),:not(:lang(kkj))>:lang(kkj){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(mzn),:not(:lang(mzn))>:lang(mzn){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(fr),:not(:lang(fr))>:lang(fr){quotes:"\ab" "\bb" "\ab" "\bb"}:root:lang(hy),:not(:lang(hy))>:lang(hy){quotes:"\ab" "\bb" "\ab" "\bb"}:root:lang(yav),:not(:lang(yav))>:lang(yav){quotes:"\ab" "\bb" "\ab" "\bb"}:root:lang(ja),:not(:lang(ja))>:lang(ja){quotes:"\300c" "\300d" "\300e" "\300f"}:root:lang(yue),:not(:lang(yue))>:lang(yue){quotes:"\300c" "\300d" "\300e" "\300f"}:root:lang(zh-Hant),:not(:lang(zh-Hant))>:lang(zh-Hant){quotes:"\300c" "\300d" "\300e" "\300f"}}@layer elements{audio,canvas,embed,iframe,img,object,picture,svg,video{display:block;vertical-align:middle;max-width:100%}img,svg,video,canvas{height:auto}audio{width:100%;max-width:var(--tera1)}audio:not([controls]){display:none}figcaption{font-style:italic;font-size:var(--text-sm)}figure{&:has(*+figcaption){figcaption{margin-top:var(--figcaption-spacing)}}&:has(figcaption+*){figcaption{margin-bottom:var(--figcaption-spacing)}}}iframe{border:var(--border-sm) solid var(--ui-border-color)}}@layer elements{caption{caption-side:bottom;margin-top:var(--table-caption-spacing);font-size:var(--text-sm)}table{border-spacing:0;border:var(--table-border-width) solid var(--table-border-color);border-radius:var(--table-border-radius);background-color:var(--table-background-color)}th,td{text-align:start;padding:var(--table-padding);border-bottom:var(--table-border-width) solid var(--table-border-color);border-inline-start:var(--table-border-width) solid var(--table-border-color)}tr{th:first-child,td:first-child{border-inline-start-width:0}}tbody{tr:last-child{th,td{border-bottom-width:0}}}tfoot{th,td{border-top:var(--table-border-width) solid var(--table-border-color);border-bottom-width:0}}}@layer elements{::placeholder{opacity:var(--o-4)}input,button,textarea,select{font:inherit;color:var(--text-color)}button{color:var(--text-color)}fieldset{border:var(--fieldset-border-width) solid var(--fieldset-border-color);border-radius:var(--fieldset-border-radius);padding:var(--fieldset-padding);ul:has([type=checkbox],[type=radio]){padding-inline-start:0}>[aria-hidden]{margin-bottom:var(--sm3);font-size:var(--text-lg);grid-column:1 / -1}}:is(input,select,textarea):user-invalid{border-color:var(--input-border-color-invalid)}input{&:where(:not([type=checkbox],[type=radio])){height:var(--input-height)}&:where(:not([type=color],[type=file],[type=reset],[type=submit])){padding:var(--input-padding)}&:where(:not([type=color])){border-radius:var(--input-border-radius)}&:where(:not([type=file])){border:var(--input-border-width) solid var(--input-border-color)}&[type=file]{width:100%;accent-color:var(--text-color)}&[type=number]{padding-inline-end:var(--xs1)}}label{display:block;&:has(+:is(input,select,textarea)){margin-bottom:var(--label-spacing)}}legend{position:absolute;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);width:1px;height:1px;white-space:nowrap}meter{width:100%;background:var(--meter-track-color);border-radius:var(--meter-border-radius);height:var(--meter-height);&::-webkit-meter-bar{background:var(--meter-track-color)}&::-webkit-meter-bar,&::-webkit-meter-optimum-value,&::-webkit-meter-suboptimum-value,&::-webkit-meter-even-less-good-value{height:var(--meter-height);border:none;border-radius:var(--meter-border-radius)}&::-webkit-meter-even-less-good-value{background:var(--meter-low-color)}&::-webkit-meter-suboptimum-value{background:var(--meter-medium-color)}&::-webkit-meter-optimum-value{background:var(--meter-high-color)}&:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:var(--meter-low-color)}&:-moz-meter-sub-optimum::-moz-meter-bar{background:var(--meter-medium-color)}&:-moz-meter-optimum::-moz-meter-bar{background:var(--meter-high-color)}}progress{appearance:none;width:100%;height:var(--progress-height);background:var(--progress-track-color);border-radius:var(--progress-border-radius);border:none;&::-moz-progress-bar{background:var(--progress-color);border-radius:var(--progress-border-radius)}&::-webkit-progress-bar{width:100%;background:var(--progress-track-color);border-radius:var(--progress-border-radius);height:var(--progress-height)}&::-webkit-progress-value{background:var(--progress-color);border-radius:var(--progress-border-radius)}}select{--split: calc(100% - var(--select-icon-size));display:flex;appearance:none;height:var(--input-height);padding:var(--xs1) calc(var(--input-padding) + var(--md1)) var(--xs1) var(--input-padding);border:var(--input-border-width) solid var(--input-border-color);border-radius:var(--input-border-radius);background:linear-gradient(to right,var(--body-background-color) 0 var(--split),var(--text-color) var(--split) 100%);mask-image:var(--select-icon),linear-gradient(to right,transparent calc(var(--split) - 1px),red 0),linear-gradient(red 0 0);mask-size:var(--select-icon-size),auto,auto;mask-position:calc(100% - var(--xs1)) center,0 0,0 0;mask-repeat:no-repeat;mask-clip:padding-box,padding-box,border-box;mask-origin:padding-box,padding-box,border-box;mask-composite:add,exclude;&:disabled{--disabled-color: light-dark( hsl(from var(--text-color) h s 70%), hsl(from var(--text-color) h s 40%) );cursor:not-allowed;color:var(--disabled-color);background:linear-gradient(to right,var(--body-background-color) 0 var(--split),var(--disabled-color) var(--split) 100%)}&[multiple]{height:auto;padding:var(--input-padding);background:var(--body-background-color);mask-image:none}}textarea{width:100%;padding:var(--input-padding);border-radius:var(--input-border-radius);border:var(--input-border-width) solid var(--input-border-color);resize:vertical;&:not([rows]){min-height:6em}}}@layer elements{dialog{min-width:var(--dialog-min-width);max-width:var(--dialog-max-width);padding:var(--dialog-padding);border:var(--dialog-border-width) solid var(--dialog-border-color);background-color:var(--dialog-background-color);border-radius:var(--dialog-border-radius);&::backdrop{background:var(--dialog-backdrop-color);opacity:var(--dialog-backdrop-opacity)}[aria-label="close pop-up"]{position:absolute;top:var(--xs3);right:var( --xs3 );background:transparent;border:none;outline:none;cursor:pointer}p:last-of-type{margin-bottom:0}}details{padding:var(--details-padding);border:var(--details-border-width) solid var(--details-border-color);background-color:var(--details-background-color);border-radius:var(--details-border-radius);cursor:pointer;summary{display:flex;justify-content:space-between;font-weight:var(--bold);&::-webkit-details-marker{display:none}&:after{content:"";width:var(--details-icon-size);height:var(--details-icon-size);background-color:currentColor;mask-image:var(--details-icon);mask-size:contain;mask-repeat:no-repeat;transition:transform var(--transition)}}&[open]>summary{margin-bottom:var(--details-spacing);&:after{transform:rotate(180deg)}}p:last-of-type{margin-bottom:0}}}@layer global{:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.a11y-skipLink{position:fixed;z-index:var(--z-top);inset-block-start:-100vb;inset-inline-start:0;padding:.75em 1.25em;background-color:var(--body-background-color);color:var(--text-color)}.a11y-skipLink:focus{inset-block-start:0}.a11y-srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}}@layer global{@keyframes fadeFromOpaque{0%{opacity:1}}@keyframes fadeToOpaque{to{opacity:1}}@keyframes fadeFromTransparent{0%{opacity:0}}@keyframes fadeToTransparent{to{opacity:0}}}@layer global{.grid{display:grid;--grid-tc: repeat(4, 1fr);--grid-cs: 1;--grid-ce: -1;grid-template-columns:var(--grid-tc);grid-column-gap:var(--grid-column-gap);grid-row-gap:var(--grid-row-gap)}.grid-flush{grid-column-gap:0;grid-row-gap:0}.grid>.grid_item{display:block;appearance:none;-webkit-appearance:none}.grid[col="1"]{--grid-tc: repeat(1, 1fr) }.grid[col="2"]{--grid-tc: repeat(2, 1fr) }.grid[col="3"]{--grid-tc: repeat(3, 1fr) }.grid[col="4"]{--grid-tc: repeat(4, 1fr) }.grid[col="5"]{--grid-tc: repeat(5, 1fr) }.grid[col="6"]{--grid-tc: repeat(6, 1fr) }.grid[col="7"]{--grid-tc: repeat(7, 1fr) }.grid[col="8"]{--grid-tc: repeat(8, 1fr) }.grid[col="9"]{--grid-tc: repeat(9, 1fr) }.grid[col="10"]{--grid-tc: repeat(10, 1fr) }.grid[col="11"]{--grid-tc: repeat(11, 1fr) }.grid[col="12"]{--grid-tc: repeat(12, 1fr) }.grid[col="13"]{--grid-tc: repeat(13, 1fr) }.grid[col="14"]{--grid-tc: repeat(14, 1fr) }.grid[col="15"]{--grid-tc: repeat(15, 1fr) }.grid[col="16"]{--grid-tc: repeat(16, 1fr) }.grid[col="17"]{--grid-tc: repeat(17, 1fr) }.grid[col="18"]{--grid-tc: repeat(18, 1fr) }.grid[col="19"]{--grid-tc: repeat(19, 1fr) }.grid[col="20"]{--grid-tc: repeat(20, 1fr) }.grid[col="21"]{--grid-tc: repeat(21, 1fr) }.grid[col="22"]{--grid-tc: repeat(22, 1fr) }.grid[col="23"]{--grid-tc: repeat(23, 1fr) }.grid[col="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span^="1"]{--grid-cs: 1 }.grid>.grid_item[span^="2"]{--grid-cs: 2 }.grid>.grid_item[span^="3"]{--grid-cs: 3 }.grid>.grid_item[span^="4"]{--grid-cs: 4 }.grid>.grid_item[span^="5"]{--grid-cs: 5 }.grid>.grid_item[span^="6"]{--grid-cs: 6 }.grid>.grid_item[span^="7"]{--grid-cs: 7 }.grid>.grid_item[span^="8"]{--grid-cs: 8 }.grid>.grid_item[span^="9"]{--grid-cs: 9 }.grid>.grid_item[span^="10"]{--grid-cs: 10 }.grid>.grid_item[span^="11"]{--grid-cs: 11 }.grid>.grid_item[span^="12"]{--grid-cs: 12 }.grid>.grid_item[span^="13"]{--grid-cs: 13 }.grid>.grid_item[span^="14"]{--grid-cs: 14 }.grid>.grid_item[span^="15"]{--grid-cs: 15 }.grid>.grid_item[span^="16"]{--grid-cs: 16 }.grid>.grid_item[span^="17"]{--grid-cs: 17 }.grid>.grid_item[span^="18"]{--grid-cs: 18 }.grid>.grid_item[span^="19"]{--grid-cs: 19 }.grid>.grid_item[span^="20"]{--grid-cs: 20 }.grid>.grid_item[span^="21"]{--grid-cs: 21 }.grid>.grid_item[span^="22"]{--grid-cs: 22 }.grid>.grid_item[span^="23"]{--grid-cs: 23 }.grid>.grid_item[span^="24"]{--grid-cs: 24 }.grid>.grid_item[span$="+1"],.grid>.grid_item[span="1"]{--grid-ce: 1 }.grid>.grid_item[span$="+2"],.grid>.grid_item[span$="-1"],.grid>.grid_item[span="2"]{--grid-ce: 2 }.grid>.grid_item[span$="+3"],.grid>.grid_item[span$="-2"],.grid>.grid_item[span="3"]{--grid-ce: 3 }.grid>.grid_item[span$="+4"],.grid>.grid_item[span$="-3"],.grid>.grid_item[span="4"]{--grid-ce: 4 }.grid>.grid_item[span$="+5"],.grid>.grid_item[span$="-4"],.grid>.grid_item[span="5"]{--grid-ce: 5 }.grid>.grid_item[span$="+6"],.grid>.grid_item[span$="-5"],.grid>.grid_item[span="6"]{--grid-ce: 6 }.grid>.grid_item[span$="+7"],.grid>.grid_item[span$="-6"],.grid>.grid_item[span="7"]{--grid-ce: 7 }.grid>.grid_item[span$="+8"],.grid>.grid_item[span$="-7"],.grid>.grid_item[span="8"]{--grid-ce: 8 }.grid>.grid_item[span$="+9"],.grid>.grid_item[span$="-8"],.grid>.grid_item[span="9"]{--grid-ce: 9 }.grid>.grid_item[span$="+10"],.grid>.grid_item[span$="-9"],.grid>.grid_item[span="10"]{--grid-ce: 10 }.grid>.grid_item[span$="+11"],.grid>.grid_item[span$="-10"],.grid>.grid_item[span="11"]{--grid-ce: 11 }.grid>.grid_item[span$="+12"],.grid>.grid_item[span$="-11"],.grid>.grid_item[span="12"]{--grid-ce: 12 }.grid>.grid_item[span$="+13"],.grid>.grid_item[span$="-12"],.grid>.grid_item[span="13"]{--grid-ce: 13 }.grid>.grid_item[span$="+14"],.grid>.grid_item[span$="-13"],.grid>.grid_item[span="14"]{--grid-ce: 14 }.grid>.grid_item[span$="+15"],.grid>.grid_item[span$="-14"],.grid>.grid_item[span="15"]{--grid-ce: 15 }.grid>.grid_item[span$="+16"],.grid>.grid_item[span$="-15"],.grid>.grid_item[span="16"]{--grid-ce: 16 }.grid>.grid_item[span$="+17"],.grid>.grid_item[span$="-16"],.grid>.grid_item[span="17"]{--grid-ce: 17 }.grid>.grid_item[span$="+18"],.grid>.grid_item[span$="-17"],.grid>.grid_item[span="18"]{--grid-ce: 18 }.grid>.grid_item[span$="+19"],.grid>.grid_item[span$="-18"],.grid>.grid_item[span="19"]{--grid-ce: 19 }.grid>.grid_item[span$="+20"],.grid>.grid_item[span$="-19"],.grid>.grid_item[span="20"]{--grid-ce: 20 }.grid>.grid_item[span$="+21"],.grid>.grid_item[span$="-20"],.grid>.grid_item[span="21"]{--grid-ce: 21 }.grid>.grid_item[span$="+22"],.grid>.grid_item[span$="-21"],.grid>.grid_item[span="22"]{--grid-ce: 22 }.grid>.grid_item[span$="+23"],.grid>.grid_item[span$="-22"],.grid>.grid_item[span="23"]{--grid-ce: 23 }.grid>.grid_item[span$="+24"],.grid>.grid_item[span$="-23"],.grid>.grid_item[span="24"]{--grid-ce: 24 }.grid>.grid_item[span$="-24"]{--grid-ce: 25 }.grid>.grid_item[span]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span*="+"],.grid>.grid_item[span*="-"],.grid>.grid_item[span*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span*="-"],.grid>.grid_item[span*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span=row]{grid-column:1 / -1}@media only screen and (width>=768px){.grid[col-md="1"]{--grid-tc: repeat(1, 1fr) }.grid[col-md="2"]{--grid-tc: repeat(2, 1fr) }.grid[col-md="3"]{--grid-tc: repeat(3, 1fr) }.grid[col-md="4"]{--grid-tc: repeat(4, 1fr) }.grid[col-md="5"]{--grid-tc: repeat(5, 1fr) }.grid[col-md="6"]{--grid-tc: repeat(6, 1fr) }.grid[col-md="7"]{--grid-tc: repeat(7, 1fr) }.grid[col-md="8"]{--grid-tc: repeat(8, 1fr) }.grid[col-md="9"]{--grid-tc: repeat(9, 1fr) }.grid[col-md="10"]{--grid-tc: repeat(10, 1fr) }.grid[col-md="11"]{--grid-tc: repeat(11, 1fr) }.grid[col-md="12"]{--grid-tc: repeat(12, 1fr) }.grid[col-md="13"]{--grid-tc: repeat(13, 1fr) }.grid[col-md="14"]{--grid-tc: repeat(14, 1fr) }.grid[col-md="15"]{--grid-tc: repeat(15, 1fr) }.grid[col-md="16"]{--grid-tc: repeat(16, 1fr) }.grid[col-md="17"]{--grid-tc: repeat(17, 1fr) }.grid[col-md="18"]{--grid-tc: repeat(18, 1fr) }.grid[col-md="19"]{--grid-tc: repeat(19, 1fr) }.grid[col-md="20"]{--grid-tc: repeat(20, 1fr) }.grid[col-md="21"]{--grid-tc: repeat(21, 1fr) }.grid[col-md="22"]{--grid-tc: repeat(22, 1fr) }.grid[col-md="23"]{--grid-tc: repeat(23, 1fr) }.grid[col-md="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span-md^="1"]{--grid-cs: 1 }.grid>.grid_item[span-md^="2"]{--grid-cs: 2 }.grid>.grid_item[span-md^="3"]{--grid-cs: 3 }.grid>.grid_item[span-md^="4"]{--grid-cs: 4 }.grid>.grid_item[span-md^="5"]{--grid-cs: 5 }.grid>.grid_item[span-md^="6"]{--grid-cs: 6 }.grid>.grid_item[span-md^="7"]{--grid-cs: 7 }.grid>.grid_item[span-md^="8"]{--grid-cs: 8 }.grid>.grid_item[span-md^="9"]{--grid-cs: 9 }.grid>.grid_item[span-md^="10"]{--grid-cs: 10 }.grid>.grid_item[span-md^="11"]{--grid-cs: 11 }.grid>.grid_item[span-md^="12"]{--grid-cs: 12 }.grid>.grid_item[span-md^="13"]{--grid-cs: 13 }.grid>.grid_item[span-md^="14"]{--grid-cs: 14 }.grid>.grid_item[span-md^="15"]{--grid-cs: 15 }.grid>.grid_item[span-md^="16"]{--grid-cs: 16 }.grid>.grid_item[span-md^="17"]{--grid-cs: 17 }.grid>.grid_item[span-md^="18"]{--grid-cs: 18 }.grid>.grid_item[span-md^="19"]{--grid-cs: 19 }.grid>.grid_item[span-md^="20"]{--grid-cs: 20 }.grid>.grid_item[span-md^="21"]{--grid-cs: 21 }.grid>.grid_item[span-md^="22"]{--grid-cs: 22 }.grid>.grid_item[span-md^="23"]{--grid-cs: 23 }.grid>.grid_item[span-md^="24"]{--grid-cs: 24 }.grid>.grid_item[span-md$="+1"],.grid>.grid_item[span-md="1"]{--grid-ce: 1 }.grid>.grid_item[span-md$="+2"],.grid>.grid_item[span-md$="-1"],.grid>.grid_item[span-md="2"]{--grid-ce: 2 }.grid>.grid_item[span-md$="+3"],.grid>.grid_item[span-md$="-2"],.grid>.grid_item[span-md="3"]{--grid-ce: 3 }.grid>.grid_item[span-md$="+4"],.grid>.grid_item[span-md$="-3"],.grid>.grid_item[span-md="4"]{--grid-ce: 4 }.grid>.grid_item[span-md$="+5"],.grid>.grid_item[span-md$="-4"],.grid>.grid_item[span-md="5"]{--grid-ce: 5 }.grid>.grid_item[span-md$="+6"],.grid>.grid_item[span-md$="-5"],.grid>.grid_item[span-md="6"]{--grid-ce: 6 }.grid>.grid_item[span-md$="+7"],.grid>.grid_item[span-md$="-6"],.grid>.grid_item[span-md="7"]{--grid-ce: 7 }.grid>.grid_item[span-md$="+8"],.grid>.grid_item[span-md$="-7"],.grid>.grid_item[span-md="8"]{--grid-ce: 8 }.grid>.grid_item[span-md$="+9"],.grid>.grid_item[span-md$="-8"],.grid>.grid_item[span-md="9"]{--grid-ce: 9 }.grid>.grid_item[span-md$="+10"],.grid>.grid_item[span-md$="-9"],.grid>.grid_item[span-md="10"]{--grid-ce: 10 }.grid>.grid_item[span-md$="+11"],.grid>.grid_item[span-md$="-10"],.grid>.grid_item[span-md="11"]{--grid-ce: 11 }.grid>.grid_item[span-md$="+12"],.grid>.grid_item[span-md$="-11"],.grid>.grid_item[span-md="12"]{--grid-ce: 12 }.grid>.grid_item[span-md$="+13"],.grid>.grid_item[span-md$="-12"],.grid>.grid_item[span-md="13"]{--grid-ce: 13 }.grid>.grid_item[span-md$="+14"],.grid>.grid_item[span-md$="-13"],.grid>.grid_item[span-md="14"]{--grid-ce: 14 }.grid>.grid_item[span-md$="+15"],.grid>.grid_item[span-md$="-14"],.grid>.grid_item[span-md="15"]{--grid-ce: 15 }.grid>.grid_item[span-md$="+16"],.grid>.grid_item[span-md$="-15"],.grid>.grid_item[span-md="16"]{--grid-ce: 16 }.grid>.grid_item[span-md$="+17"],.grid>.grid_item[span-md$="-16"],.grid>.grid_item[span-md="17"]{--grid-ce: 17 }.grid>.grid_item[span-md$="+18"],.grid>.grid_item[span-md$="-17"],.grid>.grid_item[span-md="18"]{--grid-ce: 18 }.grid>.grid_item[span-md$="+19"],.grid>.grid_item[span-md$="-18"],.grid>.grid_item[span-md="19"]{--grid-ce: 19 }.grid>.grid_item[span-md$="+20"],.grid>.grid_item[span-md$="-19"],.grid>.grid_item[span-md="20"]{--grid-ce: 20 }.grid>.grid_item[span-md$="+21"],.grid>.grid_item[span-md$="-20"],.grid>.grid_item[span-md="21"]{--grid-ce: 21 }.grid>.grid_item[span-md$="+22"],.grid>.grid_item[span-md$="-21"],.grid>.grid_item[span-md="22"]{--grid-ce: 22 }.grid>.grid_item[span-md$="+23"],.grid>.grid_item[span-md$="-22"],.grid>.grid_item[span-md="23"]{--grid-ce: 23 }.grid>.grid_item[span-md$="+24"],.grid>.grid_item[span-md$="-23"],.grid>.grid_item[span-md="24"]{--grid-ce: 24 }.grid>.grid_item[span-md$="-24"]{--grid-ce: 25 }.grid>.grid_item[span-md]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span-md*="+"],.grid>.grid_item[span-md*="-"],.grid>.grid_item[span-md*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span-md*="-"],.grid>.grid_item[span-md*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span-md=row]{grid-column:1 / -1}}@media only screen and (width>=1024px){.grid[col-lg="1"]{--grid-tc: repeat(1, 1fr) }.grid[col-lg="2"]{--grid-tc: repeat(2, 1fr) }.grid[col-lg="3"]{--grid-tc: repeat(3, 1fr) }.grid[col-lg="4"]{--grid-tc: repeat(4, 1fr) }.grid[col-lg="5"]{--grid-tc: repeat(5, 1fr) }.grid[col-lg="6"]{--grid-tc: repeat(6, 1fr) }.grid[col-lg="7"]{--grid-tc: repeat(7, 1fr) }.grid[col-lg="8"]{--grid-tc: repeat(8, 1fr) }.grid[col-lg="9"]{--grid-tc: repeat(9, 1fr) }.grid[col-lg="10"]{--grid-tc: repeat(10, 1fr) }.grid[col-lg="11"]{--grid-tc: repeat(11, 1fr) }.grid[col-lg="12"]{--grid-tc: repeat(12, 1fr) }.grid[col-lg="13"]{--grid-tc: repeat(13, 1fr) }.grid[col-lg="14"]{--grid-tc: repeat(14, 1fr) }.grid[col-lg="15"]{--grid-tc: repeat(15, 1fr) }.grid[col-lg="16"]{--grid-tc: repeat(16, 1fr) }.grid[col-lg="17"]{--grid-tc: repeat(17, 1fr) }.grid[col-lg="18"]{--grid-tc: repeat(18, 1fr) }.grid[col-lg="19"]{--grid-tc: repeat(19, 1fr) }.grid[col-lg="20"]{--grid-tc: repeat(20, 1fr) }.grid[col-lg="21"]{--grid-tc: repeat(21, 1fr) }.grid[col-lg="22"]{--grid-tc: repeat(22, 1fr) }.grid[col-lg="23"]{--grid-tc: repeat(23, 1fr) }.grid[col-lg="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span-lg^="1"]{--grid-cs: 1 }.grid>.grid_item[span-lg^="2"]{--grid-cs: 2 }.grid>.grid_item[span-lg^="3"]{--grid-cs: 3 }.grid>.grid_item[span-lg^="4"]{--grid-cs: 4 }.grid>.grid_item[span-lg^="5"]{--grid-cs: 5 }.grid>.grid_item[span-lg^="6"]{--grid-cs: 6 }.grid>.grid_item[span-lg^="7"]{--grid-cs: 7 }.grid>.grid_item[span-lg^="8"]{--grid-cs: 8 }.grid>.grid_item[span-lg^="9"]{--grid-cs: 9 }.grid>.grid_item[span-lg^="10"]{--grid-cs: 10 }.grid>.grid_item[span-lg^="11"]{--grid-cs: 11 }.grid>.grid_item[span-lg^="12"]{--grid-cs: 12 }.grid>.grid_item[span-lg^="13"]{--grid-cs: 13 }.grid>.grid_item[span-lg^="14"]{--grid-cs: 14 }.grid>.grid_item[span-lg^="15"]{--grid-cs: 15 }.grid>.grid_item[span-lg^="16"]{--grid-cs: 16 }.grid>.grid_item[span-lg^="17"]{--grid-cs: 17 }.grid>.grid_item[span-lg^="18"]{--grid-cs: 18 }.grid>.grid_item[span-lg^="19"]{--grid-cs: 19 }.grid>.grid_item[span-lg^="20"]{--grid-cs: 20 }.grid>.grid_item[span-lg^="21"]{--grid-cs: 21 }.grid>.grid_item[span-lg^="22"]{--grid-cs: 22 }.grid>.grid_item[span-lg^="23"]{--grid-cs: 23 }.grid>.grid_item[span-lg^="24"]{--grid-cs: 24 }.grid>.grid_item[span-lg$="+1"],.grid>.grid_item[span-lg="1"]{--grid-ce: 1 }.grid>.grid_item[span-lg$="+2"],.grid>.grid_item[span-lg$="-1"],.grid>.grid_item[span-lg="2"]{--grid-ce: 2 }.grid>.grid_item[span-lg$="+3"],.grid>.grid_item[span-lg$="-2"],.grid>.grid_item[span-lg="3"]{--grid-ce: 3 }.grid>.grid_item[span-lg$="+4"],.grid>.grid_item[span-lg$="-3"],.grid>.grid_item[span-lg="4"]{--grid-ce: 4 }.grid>.grid_item[span-lg$="+5"],.grid>.grid_item[span-lg$="-4"],.grid>.grid_item[span-lg="5"]{--grid-ce: 5 }.grid>.grid_item[span-lg$="+6"],.grid>.grid_item[span-lg$="-5"],.grid>.grid_item[span-lg="6"]{--grid-ce: 6 }.grid>.grid_item[span-lg$="+7"],.grid>.grid_item[span-lg$="-6"],.grid>.grid_item[span-lg="7"]{--grid-ce: 7 }.grid>.grid_item[span-lg$="+8"],.grid>.grid_item[span-lg$="-7"],.grid>.grid_item[span-lg="8"]{--grid-ce: 8 }.grid>.grid_item[span-lg$="+9"],.grid>.grid_item[span-lg$="-8"],.grid>.grid_item[span-lg="9"]{--grid-ce: 9 }.grid>.grid_item[span-lg$="+10"],.grid>.grid_item[span-lg$="-9"],.grid>.grid_item[span-lg="10"]{--grid-ce: 10 }.grid>.grid_item[span-lg$="+11"],.grid>.grid_item[span-lg$="-10"],.grid>.grid_item[span-lg="11"]{--grid-ce: 11 }.grid>.grid_item[span-lg$="+12"],.grid>.grid_item[span-lg$="-11"],.grid>.grid_item[span-lg="12"]{--grid-ce: 12 }.grid>.grid_item[span-lg$="+13"],.grid>.grid_item[span-lg$="-12"],.grid>.grid_item[span-lg="13"]{--grid-ce: 13 }.grid>.grid_item[span-lg$="+14"],.grid>.grid_item[span-lg$="-13"],.grid>.grid_item[span-lg="14"]{--grid-ce: 14 }.grid>.grid_item[span-lg$="+15"],.grid>.grid_item[span-lg$="-14"],.grid>.grid_item[span-lg="15"]{--grid-ce: 15 }.grid>.grid_item[span-lg$="+16"],.grid>.grid_item[span-lg$="-15"],.grid>.grid_item[span-lg="16"]{--grid-ce: 16 }.grid>.grid_item[span-lg$="+17"],.grid>.grid_item[span-lg$="-16"],.grid>.grid_item[span-lg="17"]{--grid-ce: 17 }.grid>.grid_item[span-lg$="+18"],.grid>.grid_item[span-lg$="-17"],.grid>.grid_item[span-lg="18"]{--grid-ce: 18 }.grid>.grid_item[span-lg$="+19"],.grid>.grid_item[span-lg$="-18"],.grid>.grid_item[span-lg="19"]{--grid-ce: 19 }.grid>.grid_item[span-lg$="+20"],.grid>.grid_item[span-lg$="-19"],.grid>.grid_item[span-lg="20"]{--grid-ce: 20 }.grid>.grid_item[span-lg$="+21"],.grid>.grid_item[span-lg$="-20"],.grid>.grid_item[span-lg="21"]{--grid-ce: 21 }.grid>.grid_item[span-lg$="+22"],.grid>.grid_item[span-lg$="-21"],.grid>.grid_item[span-lg="22"]{--grid-ce: 22 }.grid>.grid_item[span-lg$="+23"],.grid>.grid_item[span-lg$="-22"],.grid>.grid_item[span-lg="23"]{--grid-ce: 23 }.grid>.grid_item[span-lg$="+24"],.grid>.grid_item[span-lg$="-23"],.grid>.grid_item[span-lg="24"]{--grid-ce: 24 }.grid>.grid_item[span-lg$="-24"]{--grid-ce: 25 }.grid>.grid_item[span-lg]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span-lg*="+"],.grid>.grid_item[span-lg*="-"],.grid>.grid_item[span-lg*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span-lg*="-"],.grid>.grid_item[span-lg*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span-lg=row]{grid-column:1 / -1}}@media only screen and (width>=1440px){.grid[col-xl="1"]{--grid-tc: repeat(1, 1fr) }.grid[col-xl="2"]{--grid-tc: repeat(2, 1fr) }.grid[col-xl="3"]{--grid-tc: repeat(3, 1fr) }.grid[col-xl="4"]{--grid-tc: repeat(4, 1fr) }.grid[col-xl="5"]{--grid-tc: repeat(5, 1fr) }.grid[col-xl="6"]{--grid-tc: repeat(6, 1fr) }.grid[col-xl="7"]{--grid-tc: repeat(7, 1fr) }.grid[col-xl="8"]{--grid-tc: repeat(8, 1fr) }.grid[col-xl="9"]{--grid-tc: repeat(9, 1fr) }.grid[col-xl="10"]{--grid-tc: repeat(10, 1fr) }.grid[col-xl="11"]{--grid-tc: repeat(11, 1fr) }.grid[col-xl="12"]{--grid-tc: repeat(12, 1fr) }.grid[col-xl="13"]{--grid-tc: repeat(13, 1fr) }.grid[col-xl="14"]{--grid-tc: repeat(14, 1fr) }.grid[col-xl="15"]{--grid-tc: repeat(15, 1fr) }.grid[col-xl="16"]{--grid-tc: repeat(16, 1fr) }.grid[col-xl="17"]{--grid-tc: repeat(17, 1fr) }.grid[col-xl="18"]{--grid-tc: repeat(18, 1fr) }.grid[col-xl="19"]{--grid-tc: repeat(19, 1fr) }.grid[col-xl="20"]{--grid-tc: repeat(20, 1fr) }.grid[col-xl="21"]{--grid-tc: repeat(21, 1fr) }.grid[col-xl="22"]{--grid-tc: repeat(22, 1fr) }.grid[col-xl="23"]{--grid-tc: repeat(23, 1fr) }.grid[col-xl="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span-xl^="1"]{--grid-cs: 1 }.grid>.grid_item[span-xl^="2"]{--grid-cs: 2 }.grid>.grid_item[span-xl^="3"]{--grid-cs: 3 }.grid>.grid_item[span-xl^="4"]{--grid-cs: 4 }.grid>.grid_item[span-xl^="5"]{--grid-cs: 5 }.grid>.grid_item[span-xl^="6"]{--grid-cs: 6 }.grid>.grid_item[span-xl^="7"]{--grid-cs: 7 }.grid>.grid_item[span-xl^="8"]{--grid-cs: 8 }.grid>.grid_item[span-xl^="9"]{--grid-cs: 9 }.grid>.grid_item[span-xl^="10"]{--grid-cs: 10 }.grid>.grid_item[span-xl^="11"]{--grid-cs: 11 }.grid>.grid_item[span-xl^="12"]{--grid-cs: 12 }.grid>.grid_item[span-xl^="13"]{--grid-cs: 13 }.grid>.grid_item[span-xl^="14"]{--grid-cs: 14 }.grid>.grid_item[span-xl^="15"]{--grid-cs: 15 }.grid>.grid_item[span-xl^="16"]{--grid-cs: 16 }.grid>.grid_item[span-xl^="17"]{--grid-cs: 17 }.grid>.grid_item[span-xl^="18"]{--grid-cs: 18 }.grid>.grid_item[span-xl^="19"]{--grid-cs: 19 }.grid>.grid_item[span-xl^="20"]{--grid-cs: 20 }.grid>.grid_item[span-xl^="21"]{--grid-cs: 21 }.grid>.grid_item[span-xl^="22"]{--grid-cs: 22 }.grid>.grid_item[span-xl^="23"]{--grid-cs: 23 }.grid>.grid_item[span-xl^="24"]{--grid-cs: 24 }.grid>.grid_item[span-xl$="+1"],.grid>.grid_item[span-xl="1"]{--grid-ce: 1 }.grid>.grid_item[span-xl$="+2"],.grid>.grid_item[span-xl$="-1"],.grid>.grid_item[span-xl="2"]{--grid-ce: 2 }.grid>.grid_item[span-xl$="+3"],.grid>.grid_item[span-xl$="-2"],.grid>.grid_item[span-xl="3"]{--grid-ce: 3 }.grid>.grid_item[span-xl$="+4"],.grid>.grid_item[span-xl$="-3"],.grid>.grid_item[span-xl="4"]{--grid-ce: 4 }.grid>.grid_item[span-xl$="+5"],.grid>.grid_item[span-xl$="-4"],.grid>.grid_item[span-xl="5"]{--grid-ce: 5 }.grid>.grid_item[span-xl$="+6"],.grid>.grid_item[span-xl$="-5"],.grid>.grid_item[span-xl="6"]{--grid-ce: 6 }.grid>.grid_item[span-xl$="+7"],.grid>.grid_item[span-xl$="-6"],.grid>.grid_item[span-xl="7"]{--grid-ce: 7 }.grid>.grid_item[span-xl$="+8"],.grid>.grid_item[span-xl$="-7"],.grid>.grid_item[span-xl="8"]{--grid-ce: 8 }.grid>.grid_item[span-xl$="+9"],.grid>.grid_item[span-xl$="-8"],.grid>.grid_item[span-xl="9"]{--grid-ce: 9 }.grid>.grid_item[span-xl$="+10"],.grid>.grid_item[span-xl$="-9"],.grid>.grid_item[span-xl="10"]{--grid-ce: 10 }.grid>.grid_item[span-xl$="+11"],.grid>.grid_item[span-xl$="-10"],.grid>.grid_item[span-xl="11"]{--grid-ce: 11 }.grid>.grid_item[span-xl$="+12"],.grid>.grid_item[span-xl$="-11"],.grid>.grid_item[span-xl="12"]{--grid-ce: 12 }.grid>.grid_item[span-xl$="+13"],.grid>.grid_item[span-xl$="-12"],.grid>.grid_item[span-xl="13"]{--grid-ce: 13 }.grid>.grid_item[span-xl$="+14"],.grid>.grid_item[span-xl$="-13"],.grid>.grid_item[span-xl="14"]{--grid-ce: 14 }.grid>.grid_item[span-xl$="+15"],.grid>.grid_item[span-xl$="-14"],.grid>.grid_item[span-xl="15"]{--grid-ce: 15 }.grid>.grid_item[span-xl$="+16"],.grid>.grid_item[span-xl$="-15"],.grid>.grid_item[span-xl="16"]{--grid-ce: 16 }.grid>.grid_item[span-xl$="+17"],.grid>.grid_item[span-xl$="-16"],.grid>.grid_item[span-xl="17"]{--grid-ce: 17 }.grid>.grid_item[span-xl$="+18"],.grid>.grid_item[span-xl$="-17"],.grid>.grid_item[span-xl="18"]{--grid-ce: 18 }.grid>.grid_item[span-xl$="+19"],.grid>.grid_item[span-xl$="-18"],.grid>.grid_item[span-xl="19"]{--grid-ce: 19 }.grid>.grid_item[span-xl$="+20"],.grid>.grid_item[span-xl$="-19"],.grid>.grid_item[span-xl="20"]{--grid-ce: 20 }.grid>.grid_item[span-xl$="+21"],.grid>.grid_item[span-xl$="-20"],.grid>.grid_item[span-xl="21"]{--grid-ce: 21 }.grid>.grid_item[span-xl$="+22"],.grid>.grid_item[span-xl$="-21"],.grid>.grid_item[span-xl="22"]{--grid-ce: 22 }.grid>.grid_item[span-xl$="+23"],.grid>.grid_item[span-xl$="-22"],.grid>.grid_item[span-xl="23"]{--grid-ce: 23 }.grid>.grid_item[span-xl$="+24"],.grid>.grid_item[span-xl$="-23"],.grid>.grid_item[span-xl="24"]{--grid-ce: 24 }.grid>.grid_item[span-xl$="-24"]{--grid-ce: 25 }.grid>.grid_item[span-xl]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span-xl*="+"],.grid>.grid_item[span-xl*="-"],.grid>.grid_item[span-xl*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span-xl*="-"],.grid>.grid_item[span-xl*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span-xl=row]{grid-column:1 / -1}}}@layer global{.layout{display:flex;flex-direction:column;width:100vw;min-height:100vh;.layout_content{flex:1}}.layout_content_main{container:main / inline-size}.layout-centered{.layout_content{display:grid;gap:var(--sm3);grid-template-columns:1fr minmax(0,var(--layout-content-width)) 1fr;margin-top:var(--lg1);margin-bottom:var(--sm1);@media(width>=768px){margin-top:var(--xl3);margin-bottom:var(--md3);gap:var(--md3)}}.layout_content_main{grid-column:2}}.layout-sidebar{.layout_content{@media(width>=768px){display:grid;grid-template-columns:var(--layout-aside-width) minmax(0,1fr)}}.layout_content_main{padding:var(--sm2);@media(width>=768px){grid-row:1;grid-column:2;padding:var(--lg1) var(--md2)}}.layout_content_aside{@media(width>=768px){grid-row:1;grid-column:1;padding:var(--lg1) var(--md3)}}}.layout-sidebar-end{.layout_content{@media(width>=768px){grid-template-columns:minmax(0,1fr) var(--layout-aside-width)}}.layout_content_main{@media(width>=768px){grid-column:1}}.layout_content_aside{@media(width>=768px){grid-column:2}}}.layout-docs{.layout_content{@media(width>=768px){display:grid;grid-template-columns:var(--layout-aside-width) minmax(0,1fr)}@media(width>=1024px){grid-template-columns:var(--layout-aside-width) minmax(0,var(--layout-content-width)) var(--layout-toc-width)}}.layout_content_main{padding:var(--sm2);@media(width>=768px){grid-row:1;grid-column:2;padding:var(--lg1) var(--md2)}}.layout_content_aside{display:none;@media(width>=768px){display:block;grid-row:1;grid-column:1;padding:var(--lg1) var(--md3)}}.layout_content_aside-toc{@media(width>=768px){display:none}@media(width>=1024px){display:block;grid-row:1;grid-column:3;padding:var(--lg1) var(--md3)}}}.layout-split{.layout_content{display:grid;@media(width>=768px){grid-template-columns:1fr 1fr}}}.layout-cover{min-height:100dvh;.layout_content{display:grid;place-items:center}}}@layer global{@scope(.prose)to (.not-prose){:is(p,ul,ol,blockquote,table):has(+:is(h1,h2,h3,h4)){margin-bottom:calc(var(--prose-spacing) * 2)}p,ul,ol,dl{margin-bottom:var(--prose-spacing);p,ul,ol,dl{margin-bottom:0}}ul,ol{ul,ol{margin-inline-start:0;padding-inline-start:var(--sm2)}li{margin-bottom:.5em;&::marker{color:light-dark(var(--base-300),var(--base-600))}}}ul{margin-inline-start:var(--sm2);list-style-type:"\2192 "}ol{margin-inline-start:var(--md2);list-style-type:decimal-leading-zero;li::marker{font-size:var(--text-sm)}}table{margin-top:var(--md1);margin-bottom:var(--md1)}}}@layer global{.wrap{display:grid;grid-template-columns:1fr var(--wrap-width) 1fr;>*,>astro-island>*,>astro-slot>*,>astro-static-slot>*{grid-column:2;padding-inline:var(--wrap-spacing);@media(width>=768px){padding-inline:var(--wrap-md-spacing)}@media(width>=1024px){padding-inline:var(--wrap-lg-spacing)}}}.wrap-sm{--wrap-width: var(--wrap-width-sm)}.wrap-md{--wrap-width: var(--wrap-width-md)}.wrap-lg{--wrap-width: var(--wrap-width-lg)}.wrap_content-fullBleed{grid-column:1 / -1;width:100%;object-fit:cover}}@layer helpers{.c-base-0{color:var(--base-0)!important}.bdc-base-0{border-color:var(--base-0)!important}.bgc-base-0{background-color:var(--base-0)!important}.c-base-50{color:var(--base-50)!important}.bdc-base-50{border-color:var(--base-50)!important}.bgc-base-50{background-color:var(--base-50)!important}.c-base-100{color:var(--base-100)!important}.bdc-base-100{border-color:var(--base-100)!important}.bgc-base-100{background-color:var(--base-100)!important}.c-base-200{color:var(--base-200)!important}.bdc-base-200{border-color:var(--base-200)!important}.bgc-base-200{background-color:var(--base-200)!important}.c-base-300{color:var(--base-300)!important}.bdc-base-300{border-color:var(--base-300)!important}.bgc-base-300{background-color:var(--base-300)!important}.c-base-400{color:var(--base-400)!important}.bdc-base-400{border-color:var(--base-400)!important}.bgc-base-400{background-color:var(--base-400)!important}.c-base-500{color:var(--base-500)!important}.bdc-base-500{border-color:var(--base-500)!important}.bgc-base-500{background-color:var(--base-500)!important}.c-base-600{color:var(--base-600)!important}.bdc-base-600{border-color:var(--base-600)!important}.bgc-base-600{background-color:var(--base-600)!important}.c-base-700{color:var(--base-700)!important}.bdc-base-700{border-color:var(--base-700)!important}.bgc-base-700{background-color:var(--base-700)!important}.c-base-800{color:var(--base-800)!important}.bdc-base-800{border-color:var(--base-800)!important}.bgc-base-800{background-color:var(--base-800)!important}.c-base-900{color:var(--base-900)!important}.bdc-base-900{border-color:var(--base-900)!important}.bgc-base-900{background-color:var(--base-900)!important}.c-base-950{color:var(--base-950)!important}.bdc-base-950{border-color:var(--base-950)!important}.bgc-base-950{background-color:var(--base-950)!important}.c-primary-50{color:var(--primary-50)!important}.bdc-primary-50{border-color:var(--primary-50)!important}.bgc-primary-50{background-color:var(--primary-50)!important}.c-primary-100{color:var(--primary-100)!important}.bdc-primary-100{border-color:var(--primary-100)!important}.bgc-primary-100{background-color:var(--primary-100)!important}.c-primary-200{color:var(--primary-200)!important}.bdc-primary-200{border-color:var(--primary-200)!important}.bgc-primary-200{background-color:var(--primary-200)!important}.c-primary-300{color:var(--primary-300)!important}.bdc-primary-300{border-color:var(--primary-300)!important}.bgc-primary-300{background-color:var(--primary-300)!important}.c-primary-400{color:var(--primary-400)!important}.bdc-primary-400{border-color:var(--primary-400)!important}.bgc-primary-400{background-color:var(--primary-400)!important}.c-primary-500{color:var(--primary-500)!important}.bdc-primary-500{border-color:var(--primary-500)!important}.bgc-primary-500{background-color:var(--primary-500)!important}.c-primary-600{color:var(--primary-600)!important}.bdc-primary-600{border-color:var(--primary-600)!important}.bgc-primary-600{background-color:var(--primary-600)!important}.c-primary-700{color:var(--primary-700)!important}.bdc-primary-700{border-color:var(--primary-700)!important}.bgc-primary-700{background-color:var(--primary-700)!important}.c-primary-800{color:var(--primary-800)!important}.bdc-primary-800{border-color:var(--primary-800)!important}.bgc-primary-800{background-color:var(--primary-800)!important}.c-primary-900{color:var(--primary-900)!important}.bdc-primary-900{border-color:var(--primary-900)!important}.bgc-primary-900{background-color:var(--primary-900)!important}.c-primary-950{color:var(--primary-950)!important}.bdc-primary-950{border-color:var(--primary-950)!important}.bgc-primary-950{background-color:var(--primary-950)!important}.c-yes-100{color:var(--yes-100)!important}.bdc-yes-100{border-color:var(--yes-100)!important}.bgc-yes-100{background-color:var(--yes-100)!important}.c-yes-200{color:var(--yes-200)!important}.bdc-yes-200{border-color:var(--yes-200)!important}.bgc-yes-200{background-color:var(--yes-200)!important}.c-yes-300{color:var(--yes-300)!important}.bdc-yes-300{border-color:var(--yes-300)!important}.bgc-yes-300{background-color:var(--yes-300)!important}.c-yes-400{color:var(--yes-400)!important}.bdc-yes-400{border-color:var(--yes-400)!important}.bgc-yes-400{background-color:var(--yes-400)!important}.c-yes-500{color:var(--yes-500)!important}.bdc-yes-500{border-color:var(--yes-500)!important}.bgc-yes-500{background-color:var(--yes-500)!important}.c-no-100{color:var(--no-100)!important}.bdc-no-100{border-color:var(--no-100)!important}.bgc-no-100{background-color:var(--no-100)!important}.c-no-200{color:var(--no-200)!important}.bdc-no-200{border-color:var(--no-200)!important}.bgc-no-200{background-color:var(--no-200)!important}.c-no-300{color:var(--no-300)!important}.bdc-no-300{border-color:var(--no-300)!important}.bgc-no-300{background-color:var(--no-300)!important}.c-no-400{color:var(--no-400)!important}.bdc-no-400{border-color:var(--no-400)!important}.bgc-no-400{background-color:var(--no-400)!important}.c-no-500{color:var(--no-500)!important}.bdc-no-500{border-color:var(--no-500)!important}.bgc-no-500{background-color:var(--no-500)!important}.c-maybe-100{color:var(--maybe-100)!important}.bdc-maybe-100{border-color:var(--maybe-100)!important}.bgc-maybe-100{background-color:var(--maybe-100)!important}.c-maybe-200{color:var(--maybe-200)!important}.bdc-maybe-200{border-color:var(--maybe-200)!important}.bgc-maybe-200{background-color:var(--maybe-200)!important}.c-maybe-300{color:var(--maybe-300)!important}.bdc-maybe-300{border-color:var(--maybe-300)!important}.bgc-maybe-300{background-color:var(--maybe-300)!important}.c-maybe-400{color:var(--maybe-400)!important}.bdc-maybe-400{border-color:var(--maybe-400)!important}.bgc-maybe-400{background-color:var(--maybe-400)!important}.c-maybe-500{color:var(--maybe-500)!important}.bdc-maybe-500{border-color:var(--maybe-500)!important}.bgc-maybe-500{background-color:var(--maybe-500)!important}}@layer helpers{body.dev{--baseline: 8;background-size:100% calc(var(--baseline) * 1px)!important;background-image:linear-gradient(to bottom,#0000 calc((var(--baseline) - 1) * 1px),#ff69b4 calc(var(--baseline) * 1px))!important}.dev-error{position:fixed!important;top:var(--md1)!important;left:var(--md1)!important;z-index:var(--z-top)!important;padding:var(--sm1)!important;font-size:1rem!important;color:var(--danger-500)!important;background:var(--danger-100)!important;border:1px solid var(--danger-500)!important;border-radius:var(--radius-md)!important}}@layer helpers{.of-auto,.overflow-auto{overflow:auto!important}.of-hidden,.overflow-hidden{overflow:hidden!important}.of-clip,.overflow-clip{overflow:clip!important}.of-visible,.overflow-visible{overflow:visible!important}.of-scroll,.overflow-scroll{overflow:scroll!important}.of-x-auto,.overflow-x-auto{overflow-x:auto!important}.of-y-auto,.overflow-y-auto{overflow-y:auto!important}.of-x-hidden,.overflow-x-hidden{overflow-x:hidden!important}.of-y-hidden,.overflow-y-hidden{overflow-y:hidden!important}.of-x-clip,.overflow-x-clip{overflow-x:clip!important}.of-y-clip,.overflow-y-clip{overflow-y:clip!important}.of-x-visible,.overflow-x-visible{overflow-x:visible!important}.of-y-visible,.overflow-y-visible{overflow-y:visible!important}.of-x-scroll,.overflow-x-scroll{overflow-x:scroll!important}.of-y-scroll,.overflow-y-scroll{overflow-y:scroll!important}.position-static{position:static!important}.position-fixed{position:fixed!important}.position-absolute{position:absolute!important}.position-relative{position:relative!important}.position-sticky{position:sticky!important}.visibility-visible{visibility:visible!important}.visibility-hidden{visibility:hidden!important}.visibility-collapse{visibility:collapse!important}.z-auto{z-index:auto!important}.z-bottom{z-index:var(--z-bottom)!important}.z-0{z-index:var(--z-0)!important}.z-1{z-index:var(--z-1)!important}.z-2{z-index:var(--z-2)!important}.z-3{z-index:var(--z-3)!important}.z-4{z-index:var(--z-4)!important}.z-5{z-index:var(--z-5)!important}.z-top{z-index:var(--z-top)!important}}@layer helpers{.o-0{opacity:var(--o-0)!important}.o-1{opacity:var(--o-1)!important}.o-2{opacity:var(--o-2)!important}.o-3{opacity:var(--o-3)!important}.o-4{opacity:var(--o-4)!important}.o-5{opacity:var(--o-5)!important}}@layer helpers{.ar-square{aspect-ratio:var(--ar-square)!important}.ar-landscape{aspect-ratio:var(--ar-landscape)!important}.ar-portrait{aspect-ratio:var(--ar-portrait)!important}.ar-widescreen{aspect-ratio:var(--ar-widescreen)!important}.ar-golden{aspect-ratio:var(--ar-golden)!important}}@layer helpers{.w-0{width:0!important}.h-0{height:0!important}.m-0{margin:0!important}.mt-0{margin-top:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mr-0{margin-right:0!important}.mis-0{margin-inline-start:0!important}.mie-0{margin-inline-end:0!important}.p-0{padding:0!important}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.pis-0{padding-inline-start:0!important}.pie-0{padding-inline-end:0!important}.w-xs1{width:var(--xs1)!important}.h-xs1{height:var(--xs1)!important}.m-xs1{margin:var(--xs1)!important}.mt-xs1{margin-top:var(--xs1)!important}.mb-xs1{margin-bottom:var(--xs1)!important}.ml-xs1{margin-left:var(--xs1)!important}.mr-xs1{margin-right:var(--xs1)!important}.mis-xs1{margin-inline-start:var(--xs1)!important}.mie-xs1{margin-inline-end:var(--xs1)!important}.p-xs1{padding:var(--xs1)!important}.pt-xs1{padding-top:var(--xs1)!important}.pb-xs1{padding-bottom:var(--xs1)!important}.pl-xs1{padding-left:var(--xs1)!important}.pr-xs1{padding-right:var(--xs1)!important}.pis-xs1{padding-inline-start:var(--xs1)!important}.pie-xs1{padding-inline-end:var(--xs1)!important}.w-xs2{width:var(--xs2)!important}.h-xs2{height:var(--xs2)!important}.m-xs2{margin:var(--xs2)!important}.mt-xs2{margin-top:var(--xs2)!important}.mb-xs2{margin-bottom:var(--xs2)!important}.ml-xs2{margin-left:var(--xs2)!important}.mr-xs2{margin-right:var(--xs2)!important}.mis-xs2{margin-inline-start:var(--xs2)!important}.mie-xs2{margin-inline-end:var(--xs2)!important}.p-xs2{padding:var(--xs2)!important}.pt-xs2{padding-top:var(--xs2)!important}.pb-xs2{padding-bottom:var(--xs2)!important}.pl-xs2{padding-left:var(--xs2)!important}.pr-xs2{padding-right:var(--xs2)!important}.pis-xs2{padding-inline-start:var(--xs2)!important}.pie-xs2{padding-inline-end:var(--xs2)!important}.w-xs3{width:var(--xs3)!important}.h-xs3{height:var(--xs3)!important}.m-xs3{margin:var(--xs3)!important}.mt-xs3{margin-top:var(--xs3)!important}.mb-xs3{margin-bottom:var(--xs3)!important}.ml-xs3{margin-left:var(--xs3)!important}.mr-xs3{margin-right:var(--xs3)!important}.mis-xs3{margin-inline-start:var(--xs3)!important}.mie-xs3{margin-inline-end:var(--xs3)!important}.p-xs3{padding:var(--xs3)!important}.pt-xs3{padding-top:var(--xs3)!important}.pb-xs3{padding-bottom:var(--xs3)!important}.pl-xs3{padding-left:var(--xs3)!important}.pr-xs3{padding-right:var(--xs3)!important}.pis-xs3{padding-inline-start:var(--xs3)!important}.pie-xs3{padding-inline-end:var(--xs3)!important}.w-sm1{width:var(--sm1)!important}.h-sm1{height:var(--sm1)!important}.m-sm1{margin:var(--sm1)!important}.mt-sm1{margin-top:var(--sm1)!important}.mb-sm1{margin-bottom:var(--sm1)!important}.ml-sm1{margin-left:var(--sm1)!important}.mr-sm1{margin-right:var(--sm1)!important}.mis-sm1{margin-inline-start:var(--sm1)!important}.mie-sm1{margin-inline-end:var(--sm1)!important}.p-sm1{padding:var(--sm1)!important}.pt-sm1{padding-top:var(--sm1)!important}.pb-sm1{padding-bottom:var(--sm1)!important}.pl-sm1{padding-left:var(--sm1)!important}.pr-sm1{padding-right:var(--sm1)!important}.pis-sm1{padding-inline-start:var(--sm1)!important}.pie-sm1{padding-inline-end:var(--sm1)!important}.w-sm2{width:var(--sm2)!important}.h-sm2{height:var(--sm2)!important}.m-sm2{margin:var(--sm2)!important}.mt-sm2{margin-top:var(--sm2)!important}.mb-sm2{margin-bottom:var(--sm2)!important}.ml-sm2{margin-left:var(--sm2)!important}.mr-sm2{margin-right:var(--sm2)!important}.mis-sm2{margin-inline-start:var(--sm2)!important}.mie-sm2{margin-inline-end:var(--sm2)!important}.p-sm2{padding:var(--sm2)!important}.pt-sm2{padding-top:var(--sm2)!important}.pb-sm2{padding-bottom:var(--sm2)!important}.pl-sm2{padding-left:var(--sm2)!important}.pr-sm2{padding-right:var(--sm2)!important}.pis-sm2{padding-inline-start:var(--sm2)!important}.pie-sm2{padding-inline-end:var(--sm2)!important}.w-sm3{width:var(--sm3)!important}.h-sm3{height:var(--sm3)!important}.m-sm3{margin:var(--sm3)!important}.mt-sm3{margin-top:var(--sm3)!important}.mb-sm3{margin-bottom:var(--sm3)!important}.ml-sm3{margin-left:var(--sm3)!important}.mr-sm3{margin-right:var(--sm3)!important}.mis-sm3{margin-inline-start:var(--sm3)!important}.mie-sm3{margin-inline-end:var(--sm3)!important}.p-sm3{padding:var(--sm3)!important}.pt-sm3{padding-top:var(--sm3)!important}.pb-sm3{padding-bottom:var(--sm3)!important}.pl-sm3{padding-left:var(--sm3)!important}.pr-sm3{padding-right:var(--sm3)!important}.pis-sm3{padding-inline-start:var(--sm3)!important}.pie-sm3{padding-inline-end:var(--sm3)!important}.w-md1{width:var(--md1)!important}.h-md1{height:var(--md1)!important}.m-md1{margin:var(--md1)!important}.mt-md1{margin-top:var(--md1)!important}.mb-md1{margin-bottom:var(--md1)!important}.ml-md1{margin-left:var(--md1)!important}.mr-md1{margin-right:var(--md1)!important}.mis-md1{margin-inline-start:var(--md1)!important}.mie-md1{margin-inline-end:var(--md1)!important}.p-md1{padding:var(--md1)!important}.pt-md1{padding-top:var(--md1)!important}.pb-md1{padding-bottom:var(--md1)!important}.pl-md1{padding-left:var(--md1)!important}.pr-md1{padding-right:var(--md1)!important}.pis-md1{padding-inline-start:var(--md1)!important}.pie-md1{padding-inline-end:var(--md1)!important}.w-md2{width:var(--md2)!important}.h-md2{height:var(--md2)!important}.m-md2{margin:var(--md2)!important}.mt-md2{margin-top:var(--md2)!important}.mb-md2{margin-bottom:var(--md2)!important}.ml-md2{margin-left:var(--md2)!important}.mr-md2{margin-right:var(--md2)!important}.mis-md2{margin-inline-start:var(--md2)!important}.mie-md2{margin-inline-end:var(--md2)!important}.p-md2{padding:var(--md2)!important}.pt-md2{padding-top:var(--md2)!important}.pb-md2{padding-bottom:var(--md2)!important}.pl-md2{padding-left:var(--md2)!important}.pr-md2{padding-right:var(--md2)!important}.pis-md2{padding-inline-start:var(--md2)!important}.pie-md2{padding-inline-end:var(--md2)!important}.w-md3{width:var(--md3)!important}.h-md3{height:var(--md3)!important}.m-md3{margin:var(--md3)!important}.mt-md3{margin-top:var(--md3)!important}.mb-md3{margin-bottom:var(--md3)!important}.ml-md3{margin-left:var(--md3)!important}.mr-md3{margin-right:var(--md3)!important}.mis-md3{margin-inline-start:var(--md3)!important}.mie-md3{margin-inline-end:var(--md3)!important}.p-md3{padding:var(--md3)!important}.pt-md3{padding-top:var(--md3)!important}.pb-md3{padding-bottom:var(--md3)!important}.pl-md3{padding-left:var(--md3)!important}.pr-md3{padding-right:var(--md3)!important}.pis-md3{padding-inline-start:var(--md3)!important}.pie-md3{padding-inline-end:var(--md3)!important}.w-lg1{width:var(--lg1)!important}.h-lg1{height:var(--lg1)!important}.m-lg1{margin:var(--lg1)!important}.mt-lg1{margin-top:var(--lg1)!important}.mb-lg1{margin-bottom:var(--lg1)!important}.ml-lg1{margin-left:var(--lg1)!important}.mr-lg1{margin-right:var(--lg1)!important}.mis-lg1{margin-inline-start:var(--lg1)!important}.mie-lg1{margin-inline-end:var(--lg1)!important}.p-lg1{padding:var(--lg1)!important}.pt-lg1{padding-top:var(--lg1)!important}.pb-lg1{padding-bottom:var(--lg1)!important}.pl-lg1{padding-left:var(--lg1)!important}.pr-lg1{padding-right:var(--lg1)!important}.pis-lg1{padding-inline-start:var(--lg1)!important}.pie-lg1{padding-inline-end:var(--lg1)!important}.w-lg2{width:var(--lg2)!important}.h-lg2{height:var(--lg2)!important}.m-lg2{margin:var(--lg2)!important}.mt-lg2{margin-top:var(--lg2)!important}.mb-lg2{margin-bottom:var(--lg2)!important}.ml-lg2{margin-left:var(--lg2)!important}.mr-lg2{margin-right:var(--lg2)!important}.mis-lg2{margin-inline-start:var(--lg2)!important}.mie-lg2{margin-inline-end:var(--lg2)!important}.p-lg2{padding:var(--lg2)!important}.pt-lg2{padding-top:var(--lg2)!important}.pb-lg2{padding-bottom:var(--lg2)!important}.pl-lg2{padding-left:var(--lg2)!important}.pr-lg2{padding-right:var(--lg2)!important}.pis-lg2{padding-inline-start:var(--lg2)!important}.pie-lg2{padding-inline-end:var(--lg2)!important}.w-lg3{width:var(--lg3)!important}.h-lg3{height:var(--lg3)!important}.m-lg3{margin:var(--lg3)!important}.mt-lg3{margin-top:var(--lg3)!important}.mb-lg3{margin-bottom:var(--lg3)!important}.ml-lg3{margin-left:var(--lg3)!important}.mr-lg3{margin-right:var(--lg3)!important}.mis-lg3{margin-inline-start:var(--lg3)!important}.mie-lg3{margin-inline-end:var(--lg3)!important}.p-lg3{padding:var(--lg3)!important}.pt-lg3{padding-top:var(--lg3)!important}.pb-lg3{padding-bottom:var(--lg3)!important}.pl-lg3{padding-left:var(--lg3)!important}.pr-lg3{padding-right:var(--lg3)!important}.pis-lg3{padding-inline-start:var(--lg3)!important}.pie-lg3{padding-inline-end:var(--lg3)!important}.w-xl1{width:var(--xl1)!important}.h-xl1{height:var(--xl1)!important}.m-xl1{margin:var(--xl1)!important}.mt-xl1{margin-top:var(--xl1)!important}.mb-xl1{margin-bottom:var(--xl1)!important}.ml-xl1{margin-left:var(--xl1)!important}.mr-xl1{margin-right:var(--xl1)!important}.mis-xl1{margin-inline-start:var(--xl1)!important}.mie-xl1{margin-inline-end:var(--xl1)!important}.p-xl1{padding:var(--xl1)!important}.pt-xl1{padding-top:var(--xl1)!important}.pb-xl1{padding-bottom:var(--xl1)!important}.pl-xl1{padding-left:var(--xl1)!important}.pr-xl1{padding-right:var(--xl1)!important}.pis-xl1{padding-inline-start:var(--xl1)!important}.pie-xl1{padding-inline-end:var(--xl1)!important}.w-xl2{width:var(--xl2)!important}.h-xl2{height:var(--xl2)!important}.m-xl2{margin:var(--xl2)!important}.mt-xl2{margin-top:var(--xl2)!important}.mb-xl2{margin-bottom:var(--xl2)!important}.ml-xl2{margin-left:var(--xl2)!important}.mr-xl2{margin-right:var(--xl2)!important}.mis-xl2{margin-inline-start:var(--xl2)!important}.mie-xl2{margin-inline-end:var(--xl2)!important}.p-xl2{padding:var(--xl2)!important}.pt-xl2{padding-top:var(--xl2)!important}.pb-xl2{padding-bottom:var(--xl2)!important}.pl-xl2{padding-left:var(--xl2)!important}.pr-xl2{padding-right:var(--xl2)!important}.pis-xl2{padding-inline-start:var(--xl2)!important}.pie-xl2{padding-inline-end:var(--xl2)!important}.w-xl3{width:var(--xl3)!important}.h-xl3{height:var(--xl3)!important}.m-xl3{margin:var(--xl3)!important}.mt-xl3{margin-top:var(--xl3)!important}.mb-xl3{margin-bottom:var(--xl3)!important}.ml-xl3{margin-left:var(--xl3)!important}.mr-xl3{margin-right:var(--xl3)!important}.mis-xl3{margin-inline-start:var(--xl3)!important}.mie-xl3{margin-inline-end:var(--xl3)!important}.p-xl3{padding:var(--xl3)!important}.pt-xl3{padding-top:var(--xl3)!important}.pb-xl3{padding-bottom:var(--xl3)!important}.pl-xl3{padding-left:var(--xl3)!important}.pr-xl3{padding-right:var(--xl3)!important}.pis-xl3{padding-inline-start:var(--xl3)!important}.pie-xl3{padding-inline-end:var(--xl3)!important}.w-xxl1{width:var(--xxl1)!important}.h-xxl1{height:var(--xxl1)!important}.m-xxl1{margin:var(--xxl1)!important}.mt-xxl1{margin-top:var(--xxl1)!important}.mb-xxl1{margin-bottom:var(--xxl1)!important}.ml-xxl1{margin-left:var(--xxl1)!important}.mr-xxl1{margin-right:var(--xxl1)!important}.mis-xxl1{margin-inline-start:var(--xxl1)!important}.mie-xxl1{margin-inline-end:var(--xxl1)!important}.p-xxl1{padding:var(--xxl1)!important}.pt-xxl1{padding-top:var(--xxl1)!important}.pb-xxl1{padding-bottom:var(--xxl1)!important}.pl-xxl1{padding-left:var(--xxl1)!important}.pr-xxl1{padding-right:var(--xxl1)!important}.pis-xxl1{padding-inline-start:var(--xxl1)!important}.pie-xxl1{padding-inline-end:var(--xxl1)!important}.w-xxl2{width:var(--xxl2)!important}.h-xxl2{height:var(--xxl2)!important}.m-xxl2{margin:var(--xxl2)!important}.mt-xxl2{margin-top:var(--xxl2)!important}.mb-xxl2{margin-bottom:var(--xxl2)!important}.ml-xxl2{margin-left:var(--xxl2)!important}.mr-xxl2{margin-right:var(--xxl2)!important}.mis-xxl2{margin-inline-start:var(--xxl2)!important}.mie-xxl2{margin-inline-end:var(--xxl2)!important}.p-xxl2{padding:var(--xxl2)!important}.pt-xxl2{padding-top:var(--xxl2)!important}.pb-xxl2{padding-bottom:var(--xxl2)!important}.pl-xxl2{padding-left:var(--xxl2)!important}.pr-xxl2{padding-right:var(--xxl2)!important}.pis-xxl2{padding-inline-start:var(--xxl2)!important}.pie-xxl2{padding-inline-end:var(--xxl2)!important}.w-xxl3{width:var(--xxl3)!important}.h-xxl3{height:var(--xxl3)!important}.m-xxl3{margin:var(--xxl3)!important}.mt-xxl3{margin-top:var(--xxl3)!important}.mb-xxl3{margin-bottom:var(--xxl3)!important}.ml-xxl3{margin-left:var(--xxl3)!important}.mr-xxl3{margin-right:var(--xxl3)!important}.mis-xxl3{margin-inline-start:var(--xxl3)!important}.mie-xxl3{margin-inline-end:var(--xxl3)!important}.p-xxl3{padding:var(--xxl3)!important}.pt-xxl3{padding-top:var(--xxl3)!important}.pb-xxl3{padding-bottom:var(--xxl3)!important}.pl-xxl3{padding-left:var(--xxl3)!important}.pr-xxl3{padding-right:var(--xxl3)!important}.pis-xxl3{padding-inline-start:var(--xxl3)!important}.pie-xxl3{padding-inline-end:var(--xxl3)!important}.w-mega1{width:var(--mega1)!important}.h-mega1{height:var(--mega1)!important}.m-mega1{margin:var(--mega1)!important}.mt-mega1{margin-top:var(--mega1)!important}.mb-mega1{margin-bottom:var(--mega1)!important}.ml-mega1{margin-left:var(--mega1)!important}.mr-mega1{margin-right:var(--mega1)!important}.mis-mega1{margin-inline-start:var(--mega1)!important}.mie-mega1{margin-inline-end:var(--mega1)!important}.p-mega1{padding:var(--mega1)!important}.pt-mega1{padding-top:var(--mega1)!important}.pb-mega1{padding-bottom:var(--mega1)!important}.pl-mega1{padding-left:var(--mega1)!important}.pr-mega1{padding-right:var(--mega1)!important}.pis-mega1{padding-inline-start:var(--mega1)!important}.pie-mega1{padding-inline-end:var(--mega1)!important}.w-mega2{width:var(--mega2)!important}.h-mega2{height:var(--mega2)!important}.m-mega2{margin:var(--mega2)!important}.mt-mega2{margin-top:var(--mega2)!important}.mb-mega2{margin-bottom:var(--mega2)!important}.ml-mega2{margin-left:var(--mega2)!important}.mr-mega2{margin-right:var(--mega2)!important}.mis-mega2{margin-inline-start:var(--mega2)!important}.mie-mega2{margin-inline-end:var(--mega2)!important}.p-mega2{padding:var(--mega2)!important}.pt-mega2{padding-top:var(--mega2)!important}.pb-mega2{padding-bottom:var(--mega2)!important}.pl-mega2{padding-left:var(--mega2)!important}.pr-mega2{padding-right:var(--mega2)!important}.pis-mega2{padding-inline-start:var(--mega2)!important}.pie-mega2{padding-inline-end:var(--mega2)!important}.w-mega3{width:var(--mega3)!important}.h-mega3{height:var(--mega3)!important}.m-mega3{margin:var(--mega3)!important}.mt-mega3{margin-top:var(--mega3)!important}.mb-mega3{margin-bottom:var(--mega3)!important}.ml-mega3{margin-left:var(--mega3)!important}.mr-mega3{margin-right:var(--mega3)!important}.mis-mega3{margin-inline-start:var(--mega3)!important}.mie-mega3{margin-inline-end:var(--mega3)!important}.p-mega3{padding:var(--mega3)!important}.pt-mega3{padding-top:var(--mega3)!important}.pb-mega3{padding-bottom:var(--mega3)!important}.pl-mega3{padding-left:var(--mega3)!important}.pr-mega3{padding-right:var(--mega3)!important}.pis-mega3{padding-inline-start:var(--mega3)!important}.pie-mega3{padding-inline-end:var(--mega3)!important}.w-giga1{width:var(--giga1)!important}.h-giga1{height:var(--giga1)!important}.m-giga1{margin:var(--giga1)!important}.mt-giga1{margin-top:var(--giga1)!important}.mb-giga1{margin-bottom:var(--giga1)!important}.ml-giga1{margin-left:var(--giga1)!important}.mr-giga1{margin-right:var(--giga1)!important}.mis-giga1{margin-inline-start:var(--giga1)!important}.mie-giga1{margin-inline-end:var(--giga1)!important}.p-giga1{padding:var(--giga1)!important}.pt-giga1{padding-top:var(--giga1)!important}.pb-giga1{padding-bottom:var(--giga1)!important}.pl-giga1{padding-left:var(--giga1)!important}.pr-giga1{padding-right:var(--giga1)!important}.pis-giga1{padding-inline-start:var(--giga1)!important}.pie-giga1{padding-inline-end:var(--giga1)!important}.w-giga2{width:var(--giga2)!important}.h-giga2{height:var(--giga2)!important}.m-giga2{margin:var(--giga2)!important}.mt-giga2{margin-top:var(--giga2)!important}.mb-giga2{margin-bottom:var(--giga2)!important}.ml-giga2{margin-left:var(--giga2)!important}.mr-giga2{margin-right:var(--giga2)!important}.mis-giga2{margin-inline-start:var(--giga2)!important}.mie-giga2{margin-inline-end:var(--giga2)!important}.p-giga2{padding:var(--giga2)!important}.pt-giga2{padding-top:var(--giga2)!important}.pb-giga2{padding-bottom:var(--giga2)!important}.pl-giga2{padding-left:var(--giga2)!important}.pr-giga2{padding-right:var(--giga2)!important}.pis-giga2{padding-inline-start:var(--giga2)!important}.pie-giga2{padding-inline-end:var(--giga2)!important}.w-giga3{width:var(--giga3)!important}.h-giga3{height:var(--giga3)!important}.m-giga3{margin:var(--giga3)!important}.mt-giga3{margin-top:var(--giga3)!important}.mb-giga3{margin-bottom:var(--giga3)!important}.ml-giga3{margin-left:var(--giga3)!important}.mr-giga3{margin-right:var(--giga3)!important}.mis-giga3{margin-inline-start:var(--giga3)!important}.mie-giga3{margin-inline-end:var(--giga3)!important}.p-giga3{padding:var(--giga3)!important}.pt-giga3{padding-top:var(--giga3)!important}.pb-giga3{padding-bottom:var(--giga3)!important}.pl-giga3{padding-left:var(--giga3)!important}.pr-giga3{padding-right:var(--giga3)!important}.pis-giga3{padding-inline-start:var(--giga3)!important}.pie-giga3{padding-inline-end:var(--giga3)!important}.w-tera1{width:var(--tera1)!important}.h-tera1{height:var(--tera1)!important}.m-tera1{margin:var(--tera1)!important}.mt-tera1{margin-top:var(--tera1)!important}.mb-tera1{margin-bottom:var(--tera1)!important}.ml-tera1{margin-left:var(--tera1)!important}.mr-tera1{margin-right:var(--tera1)!important}.mis-tera1{margin-inline-start:var(--tera1)!important}.mie-tera1{margin-inline-end:var(--tera1)!important}.p-tera1{padding:var(--tera1)!important}.pt-tera1{padding-top:var(--tera1)!important}.pb-tera1{padding-bottom:var(--tera1)!important}.pl-tera1{padding-left:var(--tera1)!important}.pr-tera1{padding-right:var(--tera1)!important}.pis-tera1{padding-inline-start:var(--tera1)!important}.pie-tera1{padding-inline-end:var(--tera1)!important}.w-tera2{width:var(--tera2)!important}.h-tera2{height:var(--tera2)!important}.m-tera2{margin:var(--tera2)!important}.mt-tera2{margin-top:var(--tera2)!important}.mb-tera2{margin-bottom:var(--tera2)!important}.ml-tera2{margin-left:var(--tera2)!important}.mr-tera2{margin-right:var(--tera2)!important}.mis-tera2{margin-inline-start:var(--tera2)!important}.mie-tera2{margin-inline-end:var(--tera2)!important}.p-tera2{padding:var(--tera2)!important}.pt-tera2{padding-top:var(--tera2)!important}.pb-tera2{padding-bottom:var(--tera2)!important}.pl-tera2{padding-left:var(--tera2)!important}.pr-tera2{padding-right:var(--tera2)!important}.pis-tera2{padding-inline-start:var(--tera2)!important}.pie-tera2{padding-inline-end:var(--tera2)!important}.w-tera3{width:var(--tera3)!important}.h-tera3{height:var(--tera3)!important}.m-tera3{margin:var(--tera3)!important}.mt-tera3{margin-top:var(--tera3)!important}.mb-tera3{margin-bottom:var(--tera3)!important}.ml-tera3{margin-left:var(--tera3)!important}.mr-tera3{margin-right:var(--tera3)!important}.mis-tera3{margin-inline-start:var(--tera3)!important}.mie-tera3{margin-inline-end:var(--tera3)!important}.p-tera3{padding:var(--tera3)!important}.pt-tera3{padding-top:var(--tera3)!important}.pb-tera3{padding-bottom:var(--tera3)!important}.pl-tera3{padding-left:var(--tera3)!important}.pr-tera3{padding-right:var(--tera3)!important}.pis-tera3{padding-inline-start:var(--tera3)!important}.pie-tera3{padding-inline-end:var(--tera3)!important}}@layer helpers{.font-text{font-family:var(--text)!important}.font-display{font-family:var(--display)!important}.font-mono{font-family:var(--mono)!important}.font-italic{font-style:italic!important}.font-normal{font-style:normal!important}.font-extra-light{font-weight:var(--extra-light)!important}.font-light{font-weight:var(--light)!important}.font-book{font-weight:var(--book)!important}.font-semi-bold{font-weight:var(--semi-bold)!important}.font-bold{font-weight:var(--bold)!important}.font-black{font-weight:var(--black)!important}.text-xs{font-size:var(--text-xs)!important}.text-sm{font-size:var(--text-sm)!important}.text-md{font-size:var(--text-md)!important}.text-lg{font-size:var(--text-lg)!important}.text-xl{font-size:var(--text-xl)!important}.display-sm{font-size:var(--display-sm)!important}.display-md{font-size:var(--display-md)!important}.display-lg{font-size:var(--display-lg)!important}.display-xl{font-size:var(--display-xl)!important}.display-mega{font-size:var(--display-mega)!important}.display-giga{font-size:var(--display-giga)!important}.tracking-sm{letter-spacing:var(--tracking-sm)!important}.tracking-md{letter-spacing:var(--tracking-md)!important}.tracking-lg{letter-spacing:var(--tracking-lg)!important}.tracking-xl{letter-spacing:var(--tracking-xl)!important}.tracking-xxl{letter-spacing:var(--tracking-xxl)!important}.leading-xs{line-height:var(--leading-xs)!important}.leading-sm{line-height:var(--leading-sm)!important}.leading-md{line-height:var(--leading-md)!important}.leading-lg{line-height:var(--leading-lg)!important}.leading-xl{line-height:var(--leading-xl)!important}.leading-xxl{line-height:var(--leading-xxl)!important}.text-left{text-align:left!important}.text-center{text-align:center!important}.text-right{text-align:right!important}.text-justify{text-align:justify!important}.text-start{text-align:start!important}.text-end{text-align:end!important}.text-uppercase{text-transform:uppercase!important}.text-lowercase{text-transform:lowercase!important}.text-capitalize{text-transform:capitalize!important}}@layer theme.defaults{:root{--xs1: 4px;--xs2: 8px;--xs3: 12px;--sm1: 16px;--sm2: 20px;--sm3: 24px;--md1: 28px;--md2: 32px;--md3: 36px;--lg1: 40px;--lg2: 44px;--lg3: 48px;--xl1: 56px;--xl2: 64px;--xl3: 80px;--xxl1: 96px;--xxl2: 112px;--xxl3: 128px;--mega1: 160px;--mega2: 192px;--mega3: 224px;--giga1: 256px;--giga2: 288px;--giga3: 320px;--tera1: 384px;--tera2: 480px;--tera3: 520px;--ar-square: 1;--ar-landscape: 4/3;--ar-portrait: 3/4;--ar-widescreen: 16/9;--ar-golden: 1.618/1;--display: Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, ui-sans-serif, sans-serif;--text: ui-sans-serif, system-ui, sans-serif;--mono: Dank Mono, Inconsolata, Fira Mono, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, ui-monospace, monospace;--text-xs: .694rem;--text-sm: .833rem;--text-md: 1rem;--text-lg: 1.2rem;--text-xl: 1.44rem;--display-sm: 1.728rem;--display-md: 2.074rem;--display-lg: 2.488rem;--display-xl: 2.986rem;--display-mega: 3.583rem;--display-giga: 4.299rem;--extra-light: 200;--light: 300;--book: 400;--semi-bold: 600;--bold: 700;--black: 900;--tracking-sm: -.05em;--tracking-md: .025em;--tracking-lg: .05em;--tracking-xl: .075em;--tracking-xxl: .15em;--leading-xs: 1;--leading-sm: 1.15;--leading-md: 1.375;--leading-lg: 1.5;--leading-xl: 1.75;--leading-xxl: 2;--base-0: #fff;--base-50: #f6f7f9;--base-100: #edeef1;--base-200: #d6dbe1;--base-300: #b2bbc7;--base-400: #8897a8;--base-500: #697a8e;--base-600: #546375;--base-700: #4a5666;--base-800: #3c4550;--base-900: #353c45;--base-950: #23282e;--primary-50: #f0f9ff;--primary-100: #e0f2fe;--primary-200: #bae6fd;--primary-300: #7dd3fc;--primary-400: #38bdf8;--primary-500: #0ea5e9;--primary-600: #0284c7;--primary-700: #0369a1;--primary-800: #075985;--primary-900: #0c4a6e;--primary-950: #082f49;--yes-100: #d5f6e8;--yes-200: #afebd4;--yes-300: #7adbbd;--yes-400: #46c4a0;--yes-500: #13886d;--no-100: #ffe4e6;--no-200: #fecdd3;--no-300: #fda4af;--no-400: #fb7185;--no-500: #e11d48;--maybe-100: #fff7d6;--maybe-200: #fff0b3;--maybe-300: #ffd64a;--maybe-400: #ffc220;--maybe-500: #f9a007;--highlight-500: #ffee00;--border-sm: 1px;--border-md: 2px;--border-lg: 4px;--border-xl: 8px;--border-xxl: 12px;--radius-sm: 3px;--radius-md: 5px;--radius-lg: 8px;--radius-xl: 12px;--radius-xxl: 16px;--radius-round: 1e5px;--shadow-sm: 0 1px 3px 0 var(--ui-shadow-color), 0 1px 2px -1px var(--ui-shadow-color);--shadow-md: 0 4px 6px -1px var(--ui-shadow-color), 0 2px 4px -2px var(--ui-shadow-color);--shadow-lg: 0 8px 13px -3px var(--ui-shadow-color), 0 4px 6px -4px var(--ui-shadow-color);--shadow-xl: 0 20px 20px -5px var(--ui-shadow-color), 0 8px 10px -6px var(--ui-shadow-color);--shadow-xxl: 0px 11px 8px -6px var(--ui-shadow-color), 0 10px 15px 2px var(--ui-shadow-color);--o-0: 0;--o-1: .2;--o-2: .4;--o-3: .6;--o-4: .8;--o-5: 1;--z-bottom: -1000000000;--z-0: 0;--z-1: 10;--z-2: 20;--z-3: 30;--z-4: 40;--z-5: 50;--z-top: 1000000000;--transition: .22s ease-in-out;--transition-fast: .1s ease-in-out}}@layer theme.defaults{:root{color-scheme:light dark;--ui-border-color: light-dark(var(--base-200), var(--base-500));--ui-shadow-color: light-dark(rgb(0 0 0 / .1), rgb(0 0 0 / .6));--focus-ring-color: light-dark(var(--primary-500), var(--primary-400));--focus-ring-width: 2px;--focus-ring-offset: 2px;--success-100: var(--yes-100);--success-200: var(--yes-200);--success-300: var(--yes-300);--success-400: var(--yes-400);--success-500: var(--yes-500);--danger-100: var(--no-100);--danger-200: var(--no-200);--danger-300: var(--no-300);--danger-400: var(--no-400);--danger-500: var(--no-500);--warning-100: var(--maybe-100);--warning-200: var(--maybe-200);--warning-300: var(--maybe-300);--warning-400: var(--maybe-400);--warning-500: var(--maybe-500)}:root.theme-light{color-scheme:light}:root.theme-dark{color-scheme:dark}:root{accent-color:var(--primary-500);--body-background-color: light-dark(var(--base-0), var(--base-950));--body-line-height: var(--leading-lg);--input-height: var(--md3);--input-padding: var(--xs3);--input-border-width: var(--border-sm);--input-border-color: var(--ui-border-color);--input-border-radius: var(--radius-md);--input-border-color-invalid: light-dark( var(--danger-500), var(--danger-400) );--label-spacing: var(--xs1);--fieldset-padding: var(--sm3);--fieldset-border-width: var(--border-sm);--fieldset-border-color: var(--ui-border-color);--fieldset-border-radius: var(--radius-lg);--meter-height: var(--sm1);--meter-border-radius: var(--radius-md);--meter-track-color: var(--primary-100);--meter-low-color: var(--danger-400);--meter-medium-color: var(--warning-400);--meter-high-color: var(--success-400);--progress-height: var(--sm1);--progress-color: var(--primary-500);--progress-track-color: var(--primary-100);--progress-border-radius: var(--radius-md);--select-icon-size: var(--sm3);--select-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");--dialog-min-width: var(--tera1);--dialog-max-width: var(--tera3);--dialog-padding: var(--lg1) var(--md1);--dialog-border-width: var(--border-sm);--dialog-border-color: light-dark(var(--base-200), var(--base-800));--dialog-background-color: light-dark(var(--base-50), var(--base-900));--dialog-border-radius: var(--radius-lg);--dialog-backdrop-color: var(--base-950);--dialog-backdrop-opacity: var(--o-4);--details-padding: var(--sm1);--details-spacing: var(--xs3);--details-border-width: var(--border-sm);--details-border-color: light-dark(var(--base-200), var(--base-800));--details-background-color: light-dark(var(--base-50), var(--base-900));--details-border-radius: var(--radius-lg);--details-icon-size: var(--sm3);--details-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");--table-padding: var(--xs2) var(--sm1);--table-border-width: var(--border-sm);--table-border-color: light-dark(var(--base-100), var(--base-700));--table-border-radius: var(--radius-md);--table-background-color: none;--table-caption-spacing: var(--xs3);--figcaption-spacing: var(--xs2);--heading-font: var(--display);--heading-weight: var(--black);--heading-letter-spacing: normal;--heading-font-size-h1: clamp( var(--display-md), 1.269rem + 2.682vw, var(--display-xl) );--heading-font-size-h2: clamp( var(--display-sm), 1.057rem + 2.235vw, var(--display-lg) );--heading-font-size-h3: clamp( var(--text-xl), .881rem + 1.865vw, var(--display-md) );--heading-font-size-h4: clamp( var(--text-lg), .734rem + 1.553vw, var(--display-sm) );--heading-font-size-h5: clamp( var(--text-lg), .988rem + .706vw, var(--text-xl) );--heading-font-size-h6: clamp( var(--text-md), .824rem + .588vw, var(--text-lg) );--heading-line-height: var(--leading-sm);--heading-line-height-h1: var(--heading-line-height);--heading-line-height-h2: var(--heading-line-height);--heading-line-height-h3: var(--heading-line-height);--heading-line-height-h4: var(--leading-md);--heading-line-height-h5: var(--leading-md);--heading-line-height-h6: var(--leading-md);--heading-spacing-h1: .4em;--heading-spacing-h2: .4em;--heading-spacing-h3: .4em;--heading-spacing-h4: .4em;--heading-spacing-h5: .4em;--heading-spacing-h6: .4em;--heading-spacing-consecutive: .3em;--text-color: light-dark(var(--base-950), var(--base-200));--link-font-weight: var(--semi-bold);--link-color: light-dark(var(--primary-600), var(--primary-400));--link-color-hover: var(--primary-500);--text-code-color: light-dark(var(--primary-600), var(--primary-400));--text-code-background-color: light-dark( var(--primary-100), var(--primary-900) );--text-code-muted-color: light-dark(var(--base-500), var(--base-300));--pre-border-radius: var(--radius-md);--pre-font-size: .9rem;--blockquote-padding-block: var(--sm1);--blockquote-padding-inline: var(--md1) var(--sm3);--blockquote-background-color: light-dark( var(--primary-50), var(--primary-900) );--blockquote-border-radius: var(--radius-md);--blockquote-accent-width: var(--xs2);--blockquote-accent-color: linear-gradient( var(--primary-800), var(--primary-500) );--hr-content: "";--ins-color: var(--base-950);--ins-background-color: var(--success-200);--marker-color: var(--highlight-500);--selection-color: light-dark(var(--base-950), var(--base-0));--selection-background-color: light-dark( var(--primary-200), var(--primary-700) )}:root{--grid-column-gap: var(--sm1);--grid-row-gap: var(--sm1);@media(width>=768px){--grid-column-gap: var(--sm3);--grid-row-gap: var(--sm3)}--wrap-spacing: var(--sm1);--wrap-md-spacing: var(--sm3);--wrap-lg-spacing: 0;--wrap-width-sm: minmax(0, 55ch);--wrap-width-md: minmax(0, 70ch);--wrap-width-lg: minmax(0, 900px);--wrap-width: var(--wrap-width-md);--layout-content-width: 70ch;--layout-aside-width: 245px;--layout-toc-width: 1fr;--prose-spacing: var(--sm1)}:root{--badge-font-size: var(--text-sm);--badge-border-radius: var(--radius-md);--badge-color: var(--base-0);--badge-background-color: light-dark(var(--base-700), var(--base-600));--badge-primary-color: var(--base-0);--badge-primary-background-color: light-dark( var(--primary-600), var(--primary-500) );--badge-success-color: light-dark(var(--success-500), var(--base-0));--badge-success-background-color: light-dark( var(--success-100), var(--success-500) );--badge-danger-color: light-dark(var(--danger-500), var(--base-0));--badge-danger-background-color: light-dark( var(--danger-100), var(--danger-500) );--badge-warning-color: light-dark(var(--warning-500), var(--base-950));--badge-warning-background-color: light-dark( var(--warning-100), var(--warning-500) )}:root{--bt-min-width: 101px;--bt-min-width-md: 123px;--bt-min-width-lg: 133px;--bt-font-size: var(--text-sm);--bt-font-size-lg: var(--text-md);--bt-font-weight: var(--semi-bold);--bt-color: var(--text-color);--bt-color-hover: light-dark(var(--text-color), var(--base-0));--bt-background-color: light-dark(var(--base-0), var(--base-800));--bt-background-color-hover: light-dark(var(--base-50), var(--base-900));--bt-border-color: var(--ui-border-color);--bt-border-width: var(--border-sm);--bt-border-radius: var(--radius-lg);--bt-border-radius-lg: var(--radius-xl);--bt-outline-color-hover: light-dark(var(--base-950), var(--base-0));--bt-outline-background-color-hover: light-dark( rgb(0 0 0 / .1), rgb(255 255 255 / .1) );--bt-outline-border-color: light-dark(var(--base-950), var(--base-0));--bt-outline-border-color-hover: light-dark(var(--base-950), var(--base-0));--bt-primary-color: var(--base-0);--bt-primary-color-hover: var(--base-0);--bt-primary-background-color: var(--primary-600);--bt-primary-background-color-hover: var(--primary-500);--bt-primary-border-color: var(--primary-600);--bt-primary-border-color-hover: var(--primary-600)}:root{--avatar-color: var(--base-0);--avatar-background-color: var(--base-400);--avatar-border-color: light-dark(var(--base-0), var(--base-500));--avatar-border-width: var(--border-sm);--avatar-radius: var(--radius-round);--avatar-status-dot-color-offline: var(--base-300);--avatar-status-dot-color-online: var(--yes-400)}:root{--banner-color: var(--base-0);--banner-background-color: light-dark( var(--primary-600), var(--primary-800) )}:root{--breadcrumbs-separator: "/";--breadcrumbs-separator-color: light-dark(var(--base-300), var(--base-600));--breadcrumbs-color: light-dark(var(--base-500), var(--base-400));--breadcrumbs-color-current: var(--text-color)}:root{--card-spacing: var(--sm3);--card-color: var(--text-color);--card-secondary-text-color: light-dark(var(--base-400), var(--base-500));--card-bg-color: light-dark(var(--base-100), var(--base-900));--card-border-radius: var(--radius-lg);--card-border-color: var(--ui-border-color);--card-border-width: var(--border-sm);--card-shadow: var(--shadow-md);--card-shadow-hover: var(--shadow-xl);--card-loading-bg: light-dark(var(--base-200), var(--base-900));--card-aspect-ratio: var(--ar-golden)}:root{--toggle-width: 50px;--toggle-height: 28px;--toggle-border-width: 2px;--toggle-track-color: light-dark(var(--base-300), var(--base-700));--toggle-track-color-checked: var(--yes-400);--toggle-thumb-color: var(--body-background-color)}:root{--faq-spacing: var(--xs3)}:root{--field-spacing: var(--xs1);--field-hint-color: light-dark(var(--base-400), var(--base-500));--field-error-color: light-dark(var(--danger-500), var(--danger-300));--field-message-position: static}:root{--featureItem-icon-box-size: var(--lg3);--featureItem-icon-size: var(--sm3);--featureItem-icon-color: light-dark( var(--primary-600), var(--primary-300) );--featureItem-icon-background-color: light-dark( var(--primary-100), var(--primary-900) );--featureItem-icon-border-radius: var(--radius-lg)}:root{--footer-background-color: light-dark(var(--primary-950), var(--base-950));--footer-text-color: light-dark(var(--base-0), var(--base-200));--footer-border-width: var(--border-md);--footer-border-color: light-dark(transparent, var(--base-700));--footer-link-color: light-dark(var(--base-0), var(--base-200));--footer-link-color-hover: light-dark(var(--primary-200), var(--base-0))}:root{--header-height: var(--xl1);--header-padding: var(--sm1);@media(width>=768px){--header-height: var(--xl2);--header-padding: var(--sm3)}--header-background-color: light-dark(var(--base-0), var(--base-950));--header-menu-background-color: var(--base-950);--header-menu-color: var(--base-0);--header-menu-color-current: var(--primary-400);--header-menu-secondary-color: var(--base-300);--header-menu-border-color: var(--base-500)}:root{--hero-radius: var(--radius-xl);--hero-content-padding: var(--md3);--hero-actions-spacing: var(--lg3);--hero-pagination-dot: var(--sm1);--hero-pagination-dot-color: var(--base-0);--hero-pagination-dot-active-color: var(--primary-600);--hero-pagination-opacity: var(--o-4)}:root{--pagination-size: var(--md3);--pagination-border-radius: var(--radius-md);--pagination-color: var(--text-color);--pagination-color-current: var(--base-0);--pagination-background-color-current: light-dark( var(--primary-600), var(--primary-500) );--pagination-background-color-hover: light-dark( var(--base-100), var(--base-800) )}:root{--prevNext-border-color: var(--ui-border-color);--prevNext-border-radius: var(--radius-lg);--prevNext-border-color-hover: var(--link-color);--prevNext-label-color: light-dark(var(--base-400), var(--base-500))}:root{--notice-spacing: var(--sm1);--notice-text-color: light-dark(var(--base-950), var(--base-0));--notice-background-color: light-dark(var(--base-50), var(--base-800));--notice-border-color: light-dark(var(--base-200), var(--base-500));--notice-border-width: var(--border-sm);--notice-border-radius: var(--radius-lg)}:root{--pricingCard-highlight-border-color: light-dark( var(--primary-600), var(--primary-400) );--pricingCard-check-color: light-dark( var(--success-500), var(--success-400) )}:root{--readProgressBar-height: var(--xs1);--readProgressBar-color: linear-gradient( 90deg, var(--primary-600) 0%, var(--primary-400) 100% )}:root{--section-spacing: var(--xl3);--section-header-spacing: var(--lg3);--section-eyebrow-color: light-dark(var(--primary-600), var(--primary-400));--section-lede-color: light-dark(var(--base-500), var(--base-400));--section-filled-background-color: light-dark( var(--base-50), var(--base-900) );--section-primary-background-color: light-dark( var(--primary-600), var(--primary-900) );--section-primary-text-color: var(--base-0);--section-primary-link-color: var(--primary-100);--section-primary-link-color-hover: var(--base-0);--section-primary-eyebrow-color: var(--primary-200);--section-primary-lede-color: var(--primary-100)}:root{--testimonial-role-color: light-dark(var(--base-400), var(--base-500))}:root{--tags-padding: var(--xs2);--tags-font-size: var(--text-sm);--tags-color: light-dark(var(--base-500), var(--base-400));--tags-background-color: light-dark(var(--base-100), var(--base-800));--tags-background-color-hover: light-dark(var(--base-200), var(--base-950));--tags-radius: var(--radius-md)}:root{--toc-color: var(--link-color);--toc-color-hover: var(--link-color-hover);--toc-spacing: var(--xs1);--toc-indentation: var(--xs3);--toc-icon-size: var(--sm1)}} +@layer base,elements,global,components,theme.defaults,theme.overrides,helpers;@layer base,elements,global,components,theme.defaults,theme.overrides,helpers;@layer base{*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion:reduce){*,:before,:after{animation-delay:-1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}}:where(:not(dialog)){margin:0}html,body{min-height:100%}}@layer elements{body{line-sizing:normal;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;background-color:var(--body-background-color);color:var(--text-color);font-family:var(--text);line-height:var(--body-line-height);&:has(.body-is-locked){overflow:hidden}}}@layer elements{::selection{color:var(--selection-color);background-color:var(--selection-background-color)}:where(a,u,ins,abbr){text-underline-offset:2px}a{font-weight:var(--link-font-weight);color:var(--link-color);&:where(:hover){color:var(--link-color-hover);-webkit-text-decoration:none;text-decoration:none}}address{width:max-content;max-width:100%;padding:var(--sm1) var(--sm3);font-style:normal;background-color:light-dark(var(--base-50),var(--base-900));border:var(--xs2) solid transparent;border-image:8 repeating-linear-gradient(-45deg,var(--no-500) 0,var(--no-500) var(--xs2),transparent 0,transparent calc(var(--xs2) * 2),var(--primary-500) 0,var(--primary-500) calc(var(--xs2) * 3),transparent 0,transparent calc(var(--xs2) * 4))}abbr{position:relative;cursor:help;&:after{position:relative;top:calc(var(--xs1) * -1);width:var(--sm1);height:var(--sm1);display:inline-block;content:"";background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='circle-help'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M9.09%209a3%203%200%200%201%205.83%201c0%202-3%203-3%203'/%3E%3Cpath%20d='M12%2017h.01'/%3E%3C/svg%3E");background-size:contain}&:hover:before{width:max-content;max-width:400px;position:absolute;left:50%;padding:var(--xs1) var(--xs3);content:attr(title);color:var(--base-0);background-color:var(--base-900);opacity:var(--o-4);border-radius:var(--radius-sm);transform:translate(-50%,-2em)}}blockquote{position:relative;margin-bottom:var(--prose-spacing);padding-block:var(--blockquote-padding-block);padding-inline:var(--blockquote-padding-inline);font-style:italic;background-color:var(--blockquote-background-color);border-radius:var(--blockquote-border-radius);&:before{content:"";position:absolute;top:0;inset-inline-start:0;width:var(--blockquote-accent-width);height:100%;border-start-start-radius:var(--blockquote-border-radius);border-end-start-radius:var(--blockquote-border-radius);background:var(--blockquote-accent-color)}p{&:first-child:before{content:open-quote}&:last-child{margin-bottom:0;&:after{content:close-quote}}}}cite{font-style:italic}code,var,kbd{font-family:var(--mono);font-size:.9em;font-style:normal;color:var(--text-code-muted-color)}:is(code,var,kbd):not(h1 *,h2 *,h3 *,h4 *,h5 *,h6 *,pre *){padding:.15em .3em;color:var(--text-code-color);background-color:var(--text-code-background-color);border-radius:var(--radius-sm)}dt{font-weight:var(--bold)}dd+dt{margin-top:.5em}del{text-decoration-color:var(--danger-500);text-decoration-style:wavy}h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{overflow-wrap:break-word;text-wrap:balance}h1,.h1,h2,.h2,h3,.h3,h4,.h4{font-family:var(--heading-font);font-weight:var(--heading-weight);letter-spacing:var(--heading-letter-spacing)}h1,.h1{margin-bottom:var(--heading-spacing-h1);font-size:var(--heading-font-size-h1);line-height:var(--heading-line-height-h1)}h2,.h2{margin-bottom:var(--heading-spacing-h2);font-size:var(--heading-font-size-h2);line-height:var(--heading-line-height-h2)}h3,.h3{margin-bottom:var(--heading-spacing-h3);font-size:var(--heading-font-size-h3);line-height:var(--heading-line-height-h3)}h4,.h4{margin-bottom:var(--heading-spacing-h4);font-size:var(--heading-font-size-h4);line-height:var(--heading-line-height-h4)}h5,.h5{margin-bottom:var(--heading-spacing-h5);font-size:var(--heading-font-size-h5);line-height:var(--heading-line-height-h5)}h6,.h6{margin-bottom:var(--heading-spacing-h6);font-size:var(--heading-font-size-h6);line-height:var(--heading-line-height-h6)}:where(h1,h2,h3):has(+:is(h2,h3,h4)){margin-bottom:var(--heading-spacing-consecutive)}hr{display:flex;justify-content:center;align-items:center;height:0;border-style:solid;border-width:var(--border-sm) 0 0;color:var(--ui-border-color);overflow:visible;&:after{content:var(--hr-content);padding:0 var(--xs1);line-height:1;letter-spacing:var(--tracking-sm);background-color:var(--body-background-color)}}:where(hr):has(+:is(p)){margin-bottom:var(--prose-spacing)}ins{padding:.15em .3em;color:var(--ins-color);background-color:var(--ins-background-color);border-radius:var(--radius-sm);-webkit-text-decoration:none;text-decoration:none;&:before{content:"+ "}}mark{padding:.15em .5em;background:var(--marker-color);border-radius:1em 0}:where(ol,ul){list-style-type:none;padding:0}pre{font-family:var(--mono);font-size:var(--pre-font-size);white-space:pre-wrap;border-radius:var(--pre-border-radius)}q{font-style:italic}s{text-decoration-color:light-dark(var(--base-950),var(--base-50));text-decoration-style:wavy}sub,sup{line-height:1}}@layer elements{:root{quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(af),:not(:lang(af))>:lang(af){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ak),:not(:lang(ak))>:lang(ak){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(asa),:not(:lang(asa))>:lang(asa){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(az),:not(:lang(az))>:lang(az){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(bem),:not(:lang(bem))>:lang(bem){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(bez),:not(:lang(bez))>:lang(bez){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(bn),:not(:lang(bn))>:lang(bn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(brx),:not(:lang(brx))>:lang(brx){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(cgg),:not(:lang(cgg))>:lang(cgg){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(chr),:not(:lang(chr))>:lang(chr){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(cy),:not(:lang(cy))>:lang(cy){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(da),:not(:lang(da))>:lang(da){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(dav),:not(:lang(dav))>:lang(dav){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(dje),:not(:lang(dje))>:lang(dje){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(dz),:not(:lang(dz))>:lang(dz){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ebu),:not(:lang(ebu))>:lang(ebu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ee),:not(:lang(ee))>:lang(ee){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(en),:not(:lang(en))>:lang(en){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(fil),:not(:lang(fil))>:lang(fil){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(fo),:not(:lang(fo))>:lang(fo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ga),:not(:lang(ga))>:lang(ga){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(gd),:not(:lang(gd))>:lang(gd){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(gl),:not(:lang(gl))>:lang(gl){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(gu),:not(:lang(gu))>:lang(gu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(guz),:not(:lang(guz))>:lang(guz){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ha),:not(:lang(ha))>:lang(ha){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(hi),:not(:lang(hi))>:lang(hi){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(id),:not(:lang(id))>:lang(id){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ig),:not(:lang(ig))>:lang(ig){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(jmc),:not(:lang(jmc))>:lang(jmc){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kam),:not(:lang(kam))>:lang(kam){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kde),:not(:lang(kde))>:lang(kde){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kea),:not(:lang(kea))>:lang(kea){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(khq),:not(:lang(khq))>:lang(khq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ki),:not(:lang(ki))>:lang(ki){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kln),:not(:lang(kln))>:lang(kln){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(km),:not(:lang(km))>:lang(km){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kn),:not(:lang(kn))>:lang(kn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ko),:not(:lang(ko))>:lang(ko){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ksb),:not(:lang(ksb))>:lang(ksb){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lg),:not(:lang(lg))>:lang(lg){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ln),:not(:lang(ln))>:lang(ln){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lo),:not(:lang(lo))>:lang(lo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lrc),:not(:lang(lrc))>:lang(lrc){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lu),:not(:lang(lu))>:lang(lu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(luo),:not(:lang(luo))>:lang(luo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lv),:not(:lang(lv))>:lang(lv){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mas),:not(:lang(mas))>:lang(mas){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mer),:not(:lang(mer))>:lang(mer){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mfe),:not(:lang(mfe))>:lang(mfe){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mgo),:not(:lang(mgo))>:lang(mgo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ml),:not(:lang(ml))>:lang(ml){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mn),:not(:lang(mn))>:lang(mn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mr),:not(:lang(mr))>:lang(mr){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ms),:not(:lang(ms))>:lang(ms){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mt),:not(:lang(mt))>:lang(mt){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(my),:not(:lang(my))>:lang(my){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(naq),:not(:lang(naq))>:lang(naq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(nd),:not(:lang(nd))>:lang(nd){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ne),:not(:lang(ne))>:lang(ne){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(nus),:not(:lang(nus))>:lang(nus){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(nyn),:not(:lang(nyn))>:lang(nyn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(pa),:not(:lang(pa))>:lang(pa){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(pt),:not(:lang(pt))>:lang(pt){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(rof),:not(:lang(rof))>:lang(rof){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(rwk),:not(:lang(rwk))>:lang(rwk){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(saq),:not(:lang(saq))>:lang(saq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(sbp),:not(:lang(sbp))>:lang(sbp){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(seh),:not(:lang(seh))>:lang(seh){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ses),:not(:lang(ses))>:lang(ses){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(si),:not(:lang(si))>:lang(si){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(so),:not(:lang(so))>:lang(so){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(sw),:not(:lang(sw))>:lang(sw){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ta),:not(:lang(ta))>:lang(ta){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(te),:not(:lang(te))>:lang(te){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(teo),:not(:lang(teo))>:lang(teo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(th),:not(:lang(th))>:lang(th){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(to),:not(:lang(to))>:lang(to){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(tr),:not(:lang(tr))>:lang(tr){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(twq),:not(:lang(twq))>:lang(twq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(tzm),:not(:lang(tzm))>:lang(tzm){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(uz-Cyrl),:not(:lang(uz-Cyrl))>:lang(uz-Cyrl){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vai),:not(:lang(vai))>:lang(vai){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vai-Latn),:not(:lang(vai-Latn))>:lang(vai-Latn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vi),:not(:lang(vi))>:lang(vi){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vun),:not(:lang(vun))>:lang(vun){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(xog),:not(:lang(xog))>:lang(xog){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(yo),:not(:lang(yo))>:lang(yo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(yue-Hans),:not(:lang(yue-Hans))>:lang(yue-Hans){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(zh),:not(:lang(zh))>:lang(zh){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(zu),:not(:lang(zu))>:lang(zu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(uz),:not(:lang(uz))>:lang(uz){quotes:"\201c" "\201d" "\2019" "\2018"}:root:lang(eu),:not(:lang(eu))>:lang(eu){quotes:"\201c" "\201d" "\201c" "\201d"}:root:lang(tk),:not(:lang(tk))>:lang(tk){quotes:"\201c" "\201d" "\201c" "\201d"}:root:lang(ar),:not(:lang(ar))>:lang(ar){quotes:"\201d" "\201c" "\2019" "\2018"}:root:lang(ur),:not(:lang(ur))>:lang(ur){quotes:"\201d" "\201c" "\2019" "\2018"}:root:lang(fi),:not(:lang(fi))>:lang(fi){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(he),:not(:lang(he))>:lang(he){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(lag),:not(:lang(lag))>:lang(lag){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(rn),:not(:lang(rn))>:lang(rn){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(sn),:not(:lang(sn))>:lang(sn){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(sv),:not(:lang(sv))>:lang(sv){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(sr),:not(:lang(sr))>:lang(sr){quotes:"\201e" "\201c" "\2018" "\2018"}:root:lang(sr-Latn),:not(:lang(sr-Latn))>:lang(sr-Latn){quotes:"\201e" "\201c" "\2018" "\2018"}:root:lang(bg),:not(:lang(bg))>:lang(bg){quotes:"\201e" "\201c" "\201e" "\201c"}:root:lang(lt),:not(:lang(lt))>:lang(lt){quotes:"\201e" "\201c" "\201e" "\201c"}:root:lang(bs-Cyrl),:not(:lang(bs-Cyrl))>:lang(bs-Cyrl){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(cs),:not(:lang(cs))>:lang(cs){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(de),:not(:lang(de))>:lang(de){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(dsb),:not(:lang(dsb))>:lang(dsb){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(et),:not(:lang(et))>:lang(et){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(hr),:not(:lang(hr))>:lang(hr){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(hsb),:not(:lang(hsb))>:lang(hsb){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(is),:not(:lang(is))>:lang(is){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(lb),:not(:lang(lb))>:lang(lb){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(luy),:not(:lang(luy))>:lang(luy){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(mk),:not(:lang(mk))>:lang(mk){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(sk),:not(:lang(sk))>:lang(sk){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(sl),:not(:lang(sl))>:lang(sl){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(ka),:not(:lang(ka))>:lang(ka){quotes:"\201e" "\201c" "\ab" "\bb"}:root:lang(bs),:not(:lang(bs))>:lang(bs){quotes:"\201e" "\201d" "\2018" "\2019"}:root:lang(agq),:not(:lang(agq))>:lang(agq){quotes:"\201e" "\201d" "\201a" "\2019"}:root:lang(ff),:not(:lang(ff))>:lang(ff){quotes:"\201e" "\201d" "\201a" "\2019"}:root:lang(nmg),:not(:lang(nmg))>:lang(nmg){quotes:"\201e" "\201d" "\ab" "\bb"}:root:lang(ro),:not(:lang(ro))>:lang(ro){quotes:"\201e" "\201d" "\ab" "\bb"}:root:lang(pl),:not(:lang(pl))>:lang(pl){quotes:"\201e" "\201d" "\ab" "\bb"}:root:lang(hu),:not(:lang(hu))>:lang(hu){quotes:"\201e" "\201d" "\bb" "\ab"}:root:lang(nl),:not(:lang(nl))>:lang(nl){quotes:"\2018" "\2019" "\201c" "\201d"}:root:lang(ti-ER),:not(:lang(ti-ER))>:lang(ti-ER){quotes:"\2018" "\2019" "\201c" "\201d"}:root:lang(dua),:not(:lang(dua))>:lang(dua){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(ksf),:not(:lang(ksf))>:lang(ksf){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(rw),:not(:lang(rw))>:lang(rw){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(nn),:not(:lang(nn))>:lang(nn){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(nb),:not(:lang(nb))>:lang(nb){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(ast),:not(:lang(ast))>:lang(ast){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(bm),:not(:lang(bm))>:lang(bm){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(br),:not(:lang(br))>:lang(br){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(ca),:not(:lang(ca))>:lang(ca){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(dyo),:not(:lang(dyo))>:lang(dyo){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(el),:not(:lang(el))>:lang(el){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(es),:not(:lang(es))>:lang(es){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(ewo),:not(:lang(ewo))>:lang(ewo){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(mg),:not(:lang(mg))>:lang(mg){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(mua),:not(:lang(mua))>:lang(mua){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(sg),:not(:lang(sg))>:lang(sg){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(it),:not(:lang(it))>:lang(it){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(kab),:not(:lang(kab))>:lang(kab){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(kk),:not(:lang(kk))>:lang(kk){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(pt-PT),:not(:lang(pt-PT))>:lang(pt-PT){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(nnh),:not(:lang(nnh))>:lang(nnh){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(sq),:not(:lang(sq))>:lang(sq){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(bas),:not(:lang(bas))>:lang(bas){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(be),:not(:lang(be))>:lang(be){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(ky),:not(:lang(ky))>:lang(ky){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(sah),:not(:lang(sah))>:lang(sah){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(ru),:not(:lang(ru))>:lang(ru){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(uk),:not(:lang(uk))>:lang(uk){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(zgh),:not(:lang(zgh))>:lang(zgh){quotes:"\ab" "\bb" "\201e" "\201d"}:root:lang(shi),:not(:lang(shi))>:lang(shi){quotes:"\ab" "\bb" "\201e" "\201d"}:root:lang(shi-Latn),:not(:lang(shi-Latn))>:lang(shi-Latn){quotes:"\ab" "\bb" "\201e" "\201d"}:root:lang(am),:not(:lang(am))>:lang(am){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(az-Cyrl),:not(:lang(az-Cyrl))>:lang(az-Cyrl){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(fa),:not(:lang(fa))>:lang(fa){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(fr-CH),:not(:lang(fr-CH))>:lang(fr-CH){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(gsw),:not(:lang(gsw))>:lang(gsw){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(jgo),:not(:lang(jgo))>:lang(jgo){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(kkj),:not(:lang(kkj))>:lang(kkj){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(mzn),:not(:lang(mzn))>:lang(mzn){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(fr),:not(:lang(fr))>:lang(fr){quotes:"\ab" "\bb" "\ab" "\bb"}:root:lang(hy),:not(:lang(hy))>:lang(hy){quotes:"\ab" "\bb" "\ab" "\bb"}:root:lang(yav),:not(:lang(yav))>:lang(yav){quotes:"\ab" "\bb" "\ab" "\bb"}:root:lang(ja),:not(:lang(ja))>:lang(ja){quotes:"\300c" "\300d" "\300e" "\300f"}:root:lang(yue),:not(:lang(yue))>:lang(yue){quotes:"\300c" "\300d" "\300e" "\300f"}:root:lang(zh-Hant),:not(:lang(zh-Hant))>:lang(zh-Hant){quotes:"\300c" "\300d" "\300e" "\300f"}}@layer elements{audio,canvas,embed,iframe,img,object,picture,svg,video{display:block;vertical-align:middle;max-width:100%}img,svg,video,canvas{height:auto}audio{width:100%;max-width:var(--tera1)}audio:not([controls]){display:none}figcaption{font-style:italic;font-size:var(--text-sm)}figure{&:has(*+figcaption){figcaption{margin-top:var(--figcaption-spacing)}}&:has(figcaption+*){figcaption{margin-bottom:var(--figcaption-spacing)}}}iframe{border:var(--border-sm) solid var(--ui-border-color)}}@layer elements{caption{caption-side:bottom;margin-top:var(--table-caption-spacing);font-size:var(--text-sm)}table{border-spacing:0;border:var(--table-border-width) solid var(--table-border-color);border-radius:var(--table-border-radius);background-color:var(--table-background-color)}th,td{text-align:start;padding:var(--table-padding);border-bottom:var(--table-border-width) solid var(--table-border-color);border-inline-start:var(--table-border-width) solid var(--table-border-color)}tr{th:first-child,td:first-child{border-inline-start-width:0}}tbody{tr:last-child{th,td{border-bottom-width:0}}}tfoot{th,td{border-top:var(--table-border-width) solid var(--table-border-color);border-bottom-width:0}}}@layer elements{::placeholder{opacity:var(--o-4)}input,button,textarea,select{font:inherit;color:var(--text-color)}button{color:var(--text-color)}fieldset{border:var(--fieldset-border-width) solid var(--fieldset-border-color);border-radius:var(--fieldset-border-radius);padding:var(--fieldset-padding);ul:has([type=checkbox],[type=radio]){padding-inline-start:0}>[aria-hidden]{margin-bottom:var(--sm3);font-size:var(--text-lg);grid-column:1 / -1}}:is(input,select,textarea):user-invalid{border-color:var(--input-border-color-invalid)}input{&:where(:not([type=checkbox],[type=radio])){height:var(--input-height)}&:where(:not([type=color],[type=file],[type=reset],[type=submit])){padding:var(--input-padding)}&:where(:not([type=color])){border-radius:var(--input-border-radius)}&:where(:not([type=file])){border:var(--input-border-width) solid var(--input-border-color)}&[type=file]{width:100%;accent-color:var(--text-color)}&[type=number]{padding-inline-end:var(--xs1)}}label{display:block;&:has(+:is(input,select,textarea)){margin-bottom:var(--label-spacing)}}legend{position:absolute;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);width:1px;height:1px;white-space:nowrap}meter{width:100%;background:var(--meter-track-color);border-radius:var(--meter-border-radius);height:var(--meter-height);&::-webkit-meter-bar{background:var(--meter-track-color)}&::-webkit-meter-bar,&::-webkit-meter-optimum-value,&::-webkit-meter-suboptimum-value,&::-webkit-meter-even-less-good-value{height:var(--meter-height);border:none;border-radius:var(--meter-border-radius)}&::-webkit-meter-even-less-good-value{background:var(--meter-low-color)}&::-webkit-meter-suboptimum-value{background:var(--meter-medium-color)}&::-webkit-meter-optimum-value{background:var(--meter-high-color)}&:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:var(--meter-low-color)}&:-moz-meter-sub-optimum::-moz-meter-bar{background:var(--meter-medium-color)}&:-moz-meter-optimum::-moz-meter-bar{background:var(--meter-high-color)}}progress{appearance:none;width:100%;height:var(--progress-height);background:var(--progress-track-color);border-radius:var(--progress-border-radius);border:none;&::-moz-progress-bar{background:var(--progress-color);border-radius:var(--progress-border-radius)}&::-webkit-progress-bar{width:100%;background:var(--progress-track-color);border-radius:var(--progress-border-radius);height:var(--progress-height)}&::-webkit-progress-value{background:var(--progress-color);border-radius:var(--progress-border-radius)}}select{--split: calc(100% - var(--select-icon-size));display:flex;appearance:none;height:var(--input-height);padding:var(--xs1) calc(var(--input-padding) + var(--md1)) var(--xs1) var(--input-padding);border:var(--input-border-width) solid var(--input-border-color);border-radius:var(--input-border-radius);background:linear-gradient(to right,var(--body-background-color) 0 var(--split),var(--text-color) var(--split) 100%);mask-image:var(--select-icon),linear-gradient(to right,transparent calc(var(--split) - 1px),red 0),linear-gradient(red 0 0);mask-size:var(--select-icon-size),auto,auto;mask-position:calc(100% - var(--xs1)) center,0 0,0 0;mask-repeat:no-repeat;mask-clip:padding-box,padding-box,border-box;mask-origin:padding-box,padding-box,border-box;mask-composite:add,exclude;&:disabled{--disabled-color: light-dark( hsl(from var(--text-color) h s 70%), hsl(from var(--text-color) h s 40%) );cursor:not-allowed;color:var(--disabled-color);background:linear-gradient(to right,var(--body-background-color) 0 var(--split),var(--disabled-color) var(--split) 100%)}&[multiple]{height:auto;padding:var(--input-padding);background:var(--body-background-color);mask-image:none}}textarea{width:100%;padding:var(--input-padding);border-radius:var(--input-border-radius);border:var(--input-border-width) solid var(--input-border-color);resize:vertical;&:not([rows]){min-height:6em}}}@layer elements{dialog{min-width:var(--dialog-min-width);max-width:var(--dialog-max-width);padding:var(--dialog-padding);border:var(--dialog-border-width) solid var(--dialog-border-color);background-color:var(--dialog-background-color);border-radius:var(--dialog-border-radius);&::backdrop{background:var(--dialog-backdrop-color);opacity:var(--dialog-backdrop-opacity)}[aria-label="close pop-up"]{position:absolute;top:var(--xs3);right:var( --xs3 );background:transparent;border:none;outline:none;cursor:pointer}p:last-of-type{margin-bottom:0}}details{padding:var(--details-padding);border:var(--details-border-width) solid var(--details-border-color);background-color:var(--details-background-color);border-radius:var(--details-border-radius);cursor:pointer;summary{display:flex;justify-content:space-between;font-weight:var(--bold);&::-webkit-details-marker{display:none}&:after{content:"";width:var(--details-icon-size);height:var(--details-icon-size);background-color:currentColor;mask-image:var(--details-icon);mask-size:contain;mask-repeat:no-repeat;transition:transform var(--transition)}}&[open]>summary{margin-bottom:var(--details-spacing);&:after{transform:rotate(180deg)}}p:last-of-type{margin-bottom:0}}}@layer global{:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.a11y-skipLink{position:fixed;z-index:var(--z-top);inset-block-start:-100vb;inset-inline-start:0;padding:.75em 1.25em;background-color:var(--body-background-color);color:var(--text-color)}.a11y-skipLink:focus{inset-block-start:0}.a11y-srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}}@layer global{@keyframes fadeFromOpaque{0%{opacity:1}}@keyframes fadeToOpaque{to{opacity:1}}@keyframes fadeFromTransparent{0%{opacity:0}}@keyframes fadeToTransparent{to{opacity:0}}}@layer global{.grid{display:grid;--grid-tc: repeat(4, 1fr);--grid-cs: 1;--grid-ce: -1;grid-template-columns:var(--grid-tc);grid-column-gap:var(--grid-column-gap);grid-row-gap:var(--grid-row-gap)}.grid-flush{grid-column-gap:0;grid-row-gap:0}.grid>.grid_item{display:block;appearance:none;-webkit-appearance:none}.grid[col="1"]{--grid-tc: repeat(1, 1fr) }.grid[col="2"]{--grid-tc: repeat(2, 1fr) }.grid[col="3"]{--grid-tc: repeat(3, 1fr) }.grid[col="4"]{--grid-tc: repeat(4, 1fr) }.grid[col="5"]{--grid-tc: repeat(5, 1fr) }.grid[col="6"]{--grid-tc: repeat(6, 1fr) }.grid[col="7"]{--grid-tc: repeat(7, 1fr) }.grid[col="8"]{--grid-tc: repeat(8, 1fr) }.grid[col="9"]{--grid-tc: repeat(9, 1fr) }.grid[col="10"]{--grid-tc: repeat(10, 1fr) }.grid[col="11"]{--grid-tc: repeat(11, 1fr) }.grid[col="12"]{--grid-tc: repeat(12, 1fr) }.grid[col="13"]{--grid-tc: repeat(13, 1fr) }.grid[col="14"]{--grid-tc: repeat(14, 1fr) }.grid[col="15"]{--grid-tc: repeat(15, 1fr) }.grid[col="16"]{--grid-tc: repeat(16, 1fr) }.grid[col="17"]{--grid-tc: repeat(17, 1fr) }.grid[col="18"]{--grid-tc: repeat(18, 1fr) }.grid[col="19"]{--grid-tc: repeat(19, 1fr) }.grid[col="20"]{--grid-tc: repeat(20, 1fr) }.grid[col="21"]{--grid-tc: repeat(21, 1fr) }.grid[col="22"]{--grid-tc: repeat(22, 1fr) }.grid[col="23"]{--grid-tc: repeat(23, 1fr) }.grid[col="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span^="1"]{--grid-cs: 1 }.grid>.grid_item[span^="2"]{--grid-cs: 2 }.grid>.grid_item[span^="3"]{--grid-cs: 3 }.grid>.grid_item[span^="4"]{--grid-cs: 4 }.grid>.grid_item[span^="5"]{--grid-cs: 5 }.grid>.grid_item[span^="6"]{--grid-cs: 6 }.grid>.grid_item[span^="7"]{--grid-cs: 7 }.grid>.grid_item[span^="8"]{--grid-cs: 8 }.grid>.grid_item[span^="9"]{--grid-cs: 9 }.grid>.grid_item[span^="10"]{--grid-cs: 10 }.grid>.grid_item[span^="11"]{--grid-cs: 11 }.grid>.grid_item[span^="12"]{--grid-cs: 12 }.grid>.grid_item[span^="13"]{--grid-cs: 13 }.grid>.grid_item[span^="14"]{--grid-cs: 14 }.grid>.grid_item[span^="15"]{--grid-cs: 15 }.grid>.grid_item[span^="16"]{--grid-cs: 16 }.grid>.grid_item[span^="17"]{--grid-cs: 17 }.grid>.grid_item[span^="18"]{--grid-cs: 18 }.grid>.grid_item[span^="19"]{--grid-cs: 19 }.grid>.grid_item[span^="20"]{--grid-cs: 20 }.grid>.grid_item[span^="21"]{--grid-cs: 21 }.grid>.grid_item[span^="22"]{--grid-cs: 22 }.grid>.grid_item[span^="23"]{--grid-cs: 23 }.grid>.grid_item[span^="24"]{--grid-cs: 24 }.grid>.grid_item[span$="+1"],.grid>.grid_item[span="1"]{--grid-ce: 1 }.grid>.grid_item[span$="+2"],.grid>.grid_item[span$="-1"],.grid>.grid_item[span="2"]{--grid-ce: 2 }.grid>.grid_item[span$="+3"],.grid>.grid_item[span$="-2"],.grid>.grid_item[span="3"]{--grid-ce: 3 }.grid>.grid_item[span$="+4"],.grid>.grid_item[span$="-3"],.grid>.grid_item[span="4"]{--grid-ce: 4 }.grid>.grid_item[span$="+5"],.grid>.grid_item[span$="-4"],.grid>.grid_item[span="5"]{--grid-ce: 5 }.grid>.grid_item[span$="+6"],.grid>.grid_item[span$="-5"],.grid>.grid_item[span="6"]{--grid-ce: 6 }.grid>.grid_item[span$="+7"],.grid>.grid_item[span$="-6"],.grid>.grid_item[span="7"]{--grid-ce: 7 }.grid>.grid_item[span$="+8"],.grid>.grid_item[span$="-7"],.grid>.grid_item[span="8"]{--grid-ce: 8 }.grid>.grid_item[span$="+9"],.grid>.grid_item[span$="-8"],.grid>.grid_item[span="9"]{--grid-ce: 9 }.grid>.grid_item[span$="+10"],.grid>.grid_item[span$="-9"],.grid>.grid_item[span="10"]{--grid-ce: 10 }.grid>.grid_item[span$="+11"],.grid>.grid_item[span$="-10"],.grid>.grid_item[span="11"]{--grid-ce: 11 }.grid>.grid_item[span$="+12"],.grid>.grid_item[span$="-11"],.grid>.grid_item[span="12"]{--grid-ce: 12 }.grid>.grid_item[span$="+13"],.grid>.grid_item[span$="-12"],.grid>.grid_item[span="13"]{--grid-ce: 13 }.grid>.grid_item[span$="+14"],.grid>.grid_item[span$="-13"],.grid>.grid_item[span="14"]{--grid-ce: 14 }.grid>.grid_item[span$="+15"],.grid>.grid_item[span$="-14"],.grid>.grid_item[span="15"]{--grid-ce: 15 }.grid>.grid_item[span$="+16"],.grid>.grid_item[span$="-15"],.grid>.grid_item[span="16"]{--grid-ce: 16 }.grid>.grid_item[span$="+17"],.grid>.grid_item[span$="-16"],.grid>.grid_item[span="17"]{--grid-ce: 17 }.grid>.grid_item[span$="+18"],.grid>.grid_item[span$="-17"],.grid>.grid_item[span="18"]{--grid-ce: 18 }.grid>.grid_item[span$="+19"],.grid>.grid_item[span$="-18"],.grid>.grid_item[span="19"]{--grid-ce: 19 }.grid>.grid_item[span$="+20"],.grid>.grid_item[span$="-19"],.grid>.grid_item[span="20"]{--grid-ce: 20 }.grid>.grid_item[span$="+21"],.grid>.grid_item[span$="-20"],.grid>.grid_item[span="21"]{--grid-ce: 21 }.grid>.grid_item[span$="+22"],.grid>.grid_item[span$="-21"],.grid>.grid_item[span="22"]{--grid-ce: 22 }.grid>.grid_item[span$="+23"],.grid>.grid_item[span$="-22"],.grid>.grid_item[span="23"]{--grid-ce: 23 }.grid>.grid_item[span$="+24"],.grid>.grid_item[span$="-23"],.grid>.grid_item[span="24"]{--grid-ce: 24 }.grid>.grid_item[span$="-24"]{--grid-ce: 25 }.grid>.grid_item[span]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span*="+"],.grid>.grid_item[span*="-"],.grid>.grid_item[span*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span*="-"],.grid>.grid_item[span*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span=row]{grid-column:1 / -1}@media only screen and (width>=768px){.grid[col-md="1"]{--grid-tc: repeat(1, 1fr) }.grid[col-md="2"]{--grid-tc: repeat(2, 1fr) }.grid[col-md="3"]{--grid-tc: repeat(3, 1fr) }.grid[col-md="4"]{--grid-tc: repeat(4, 1fr) }.grid[col-md="5"]{--grid-tc: repeat(5, 1fr) }.grid[col-md="6"]{--grid-tc: repeat(6, 1fr) }.grid[col-md="7"]{--grid-tc: repeat(7, 1fr) }.grid[col-md="8"]{--grid-tc: repeat(8, 1fr) }.grid[col-md="9"]{--grid-tc: repeat(9, 1fr) }.grid[col-md="10"]{--grid-tc: repeat(10, 1fr) }.grid[col-md="11"]{--grid-tc: repeat(11, 1fr) }.grid[col-md="12"]{--grid-tc: repeat(12, 1fr) }.grid[col-md="13"]{--grid-tc: repeat(13, 1fr) }.grid[col-md="14"]{--grid-tc: repeat(14, 1fr) }.grid[col-md="15"]{--grid-tc: repeat(15, 1fr) }.grid[col-md="16"]{--grid-tc: repeat(16, 1fr) }.grid[col-md="17"]{--grid-tc: repeat(17, 1fr) }.grid[col-md="18"]{--grid-tc: repeat(18, 1fr) }.grid[col-md="19"]{--grid-tc: repeat(19, 1fr) }.grid[col-md="20"]{--grid-tc: repeat(20, 1fr) }.grid[col-md="21"]{--grid-tc: repeat(21, 1fr) }.grid[col-md="22"]{--grid-tc: repeat(22, 1fr) }.grid[col-md="23"]{--grid-tc: repeat(23, 1fr) }.grid[col-md="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span-md^="1"]{--grid-cs: 1 }.grid>.grid_item[span-md^="2"]{--grid-cs: 2 }.grid>.grid_item[span-md^="3"]{--grid-cs: 3 }.grid>.grid_item[span-md^="4"]{--grid-cs: 4 }.grid>.grid_item[span-md^="5"]{--grid-cs: 5 }.grid>.grid_item[span-md^="6"]{--grid-cs: 6 }.grid>.grid_item[span-md^="7"]{--grid-cs: 7 }.grid>.grid_item[span-md^="8"]{--grid-cs: 8 }.grid>.grid_item[span-md^="9"]{--grid-cs: 9 }.grid>.grid_item[span-md^="10"]{--grid-cs: 10 }.grid>.grid_item[span-md^="11"]{--grid-cs: 11 }.grid>.grid_item[span-md^="12"]{--grid-cs: 12 }.grid>.grid_item[span-md^="13"]{--grid-cs: 13 }.grid>.grid_item[span-md^="14"]{--grid-cs: 14 }.grid>.grid_item[span-md^="15"]{--grid-cs: 15 }.grid>.grid_item[span-md^="16"]{--grid-cs: 16 }.grid>.grid_item[span-md^="17"]{--grid-cs: 17 }.grid>.grid_item[span-md^="18"]{--grid-cs: 18 }.grid>.grid_item[span-md^="19"]{--grid-cs: 19 }.grid>.grid_item[span-md^="20"]{--grid-cs: 20 }.grid>.grid_item[span-md^="21"]{--grid-cs: 21 }.grid>.grid_item[span-md^="22"]{--grid-cs: 22 }.grid>.grid_item[span-md^="23"]{--grid-cs: 23 }.grid>.grid_item[span-md^="24"]{--grid-cs: 24 }.grid>.grid_item[span-md$="+1"],.grid>.grid_item[span-md="1"]{--grid-ce: 1 }.grid>.grid_item[span-md$="+2"],.grid>.grid_item[span-md$="-1"],.grid>.grid_item[span-md="2"]{--grid-ce: 2 }.grid>.grid_item[span-md$="+3"],.grid>.grid_item[span-md$="-2"],.grid>.grid_item[span-md="3"]{--grid-ce: 3 }.grid>.grid_item[span-md$="+4"],.grid>.grid_item[span-md$="-3"],.grid>.grid_item[span-md="4"]{--grid-ce: 4 }.grid>.grid_item[span-md$="+5"],.grid>.grid_item[span-md$="-4"],.grid>.grid_item[span-md="5"]{--grid-ce: 5 }.grid>.grid_item[span-md$="+6"],.grid>.grid_item[span-md$="-5"],.grid>.grid_item[span-md="6"]{--grid-ce: 6 }.grid>.grid_item[span-md$="+7"],.grid>.grid_item[span-md$="-6"],.grid>.grid_item[span-md="7"]{--grid-ce: 7 }.grid>.grid_item[span-md$="+8"],.grid>.grid_item[span-md$="-7"],.grid>.grid_item[span-md="8"]{--grid-ce: 8 }.grid>.grid_item[span-md$="+9"],.grid>.grid_item[span-md$="-8"],.grid>.grid_item[span-md="9"]{--grid-ce: 9 }.grid>.grid_item[span-md$="+10"],.grid>.grid_item[span-md$="-9"],.grid>.grid_item[span-md="10"]{--grid-ce: 10 }.grid>.grid_item[span-md$="+11"],.grid>.grid_item[span-md$="-10"],.grid>.grid_item[span-md="11"]{--grid-ce: 11 }.grid>.grid_item[span-md$="+12"],.grid>.grid_item[span-md$="-11"],.grid>.grid_item[span-md="12"]{--grid-ce: 12 }.grid>.grid_item[span-md$="+13"],.grid>.grid_item[span-md$="-12"],.grid>.grid_item[span-md="13"]{--grid-ce: 13 }.grid>.grid_item[span-md$="+14"],.grid>.grid_item[span-md$="-13"],.grid>.grid_item[span-md="14"]{--grid-ce: 14 }.grid>.grid_item[span-md$="+15"],.grid>.grid_item[span-md$="-14"],.grid>.grid_item[span-md="15"]{--grid-ce: 15 }.grid>.grid_item[span-md$="+16"],.grid>.grid_item[span-md$="-15"],.grid>.grid_item[span-md="16"]{--grid-ce: 16 }.grid>.grid_item[span-md$="+17"],.grid>.grid_item[span-md$="-16"],.grid>.grid_item[span-md="17"]{--grid-ce: 17 }.grid>.grid_item[span-md$="+18"],.grid>.grid_item[span-md$="-17"],.grid>.grid_item[span-md="18"]{--grid-ce: 18 }.grid>.grid_item[span-md$="+19"],.grid>.grid_item[span-md$="-18"],.grid>.grid_item[span-md="19"]{--grid-ce: 19 }.grid>.grid_item[span-md$="+20"],.grid>.grid_item[span-md$="-19"],.grid>.grid_item[span-md="20"]{--grid-ce: 20 }.grid>.grid_item[span-md$="+21"],.grid>.grid_item[span-md$="-20"],.grid>.grid_item[span-md="21"]{--grid-ce: 21 }.grid>.grid_item[span-md$="+22"],.grid>.grid_item[span-md$="-21"],.grid>.grid_item[span-md="22"]{--grid-ce: 22 }.grid>.grid_item[span-md$="+23"],.grid>.grid_item[span-md$="-22"],.grid>.grid_item[span-md="23"]{--grid-ce: 23 }.grid>.grid_item[span-md$="+24"],.grid>.grid_item[span-md$="-23"],.grid>.grid_item[span-md="24"]{--grid-ce: 24 }.grid>.grid_item[span-md$="-24"]{--grid-ce: 25 }.grid>.grid_item[span-md]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span-md*="+"],.grid>.grid_item[span-md*="-"],.grid>.grid_item[span-md*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span-md*="-"],.grid>.grid_item[span-md*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span-md=row]{grid-column:1 / -1}}@media only screen and (width>=1024px){.grid[col-lg="1"]{--grid-tc: repeat(1, 1fr) }.grid[col-lg="2"]{--grid-tc: repeat(2, 1fr) }.grid[col-lg="3"]{--grid-tc: repeat(3, 1fr) }.grid[col-lg="4"]{--grid-tc: repeat(4, 1fr) }.grid[col-lg="5"]{--grid-tc: repeat(5, 1fr) }.grid[col-lg="6"]{--grid-tc: repeat(6, 1fr) }.grid[col-lg="7"]{--grid-tc: repeat(7, 1fr) }.grid[col-lg="8"]{--grid-tc: repeat(8, 1fr) }.grid[col-lg="9"]{--grid-tc: repeat(9, 1fr) }.grid[col-lg="10"]{--grid-tc: repeat(10, 1fr) }.grid[col-lg="11"]{--grid-tc: repeat(11, 1fr) }.grid[col-lg="12"]{--grid-tc: repeat(12, 1fr) }.grid[col-lg="13"]{--grid-tc: repeat(13, 1fr) }.grid[col-lg="14"]{--grid-tc: repeat(14, 1fr) }.grid[col-lg="15"]{--grid-tc: repeat(15, 1fr) }.grid[col-lg="16"]{--grid-tc: repeat(16, 1fr) }.grid[col-lg="17"]{--grid-tc: repeat(17, 1fr) }.grid[col-lg="18"]{--grid-tc: repeat(18, 1fr) }.grid[col-lg="19"]{--grid-tc: repeat(19, 1fr) }.grid[col-lg="20"]{--grid-tc: repeat(20, 1fr) }.grid[col-lg="21"]{--grid-tc: repeat(21, 1fr) }.grid[col-lg="22"]{--grid-tc: repeat(22, 1fr) }.grid[col-lg="23"]{--grid-tc: repeat(23, 1fr) }.grid[col-lg="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span-lg^="1"]{--grid-cs: 1 }.grid>.grid_item[span-lg^="2"]{--grid-cs: 2 }.grid>.grid_item[span-lg^="3"]{--grid-cs: 3 }.grid>.grid_item[span-lg^="4"]{--grid-cs: 4 }.grid>.grid_item[span-lg^="5"]{--grid-cs: 5 }.grid>.grid_item[span-lg^="6"]{--grid-cs: 6 }.grid>.grid_item[span-lg^="7"]{--grid-cs: 7 }.grid>.grid_item[span-lg^="8"]{--grid-cs: 8 }.grid>.grid_item[span-lg^="9"]{--grid-cs: 9 }.grid>.grid_item[span-lg^="10"]{--grid-cs: 10 }.grid>.grid_item[span-lg^="11"]{--grid-cs: 11 }.grid>.grid_item[span-lg^="12"]{--grid-cs: 12 }.grid>.grid_item[span-lg^="13"]{--grid-cs: 13 }.grid>.grid_item[span-lg^="14"]{--grid-cs: 14 }.grid>.grid_item[span-lg^="15"]{--grid-cs: 15 }.grid>.grid_item[span-lg^="16"]{--grid-cs: 16 }.grid>.grid_item[span-lg^="17"]{--grid-cs: 17 }.grid>.grid_item[span-lg^="18"]{--grid-cs: 18 }.grid>.grid_item[span-lg^="19"]{--grid-cs: 19 }.grid>.grid_item[span-lg^="20"]{--grid-cs: 20 }.grid>.grid_item[span-lg^="21"]{--grid-cs: 21 }.grid>.grid_item[span-lg^="22"]{--grid-cs: 22 }.grid>.grid_item[span-lg^="23"]{--grid-cs: 23 }.grid>.grid_item[span-lg^="24"]{--grid-cs: 24 }.grid>.grid_item[span-lg$="+1"],.grid>.grid_item[span-lg="1"]{--grid-ce: 1 }.grid>.grid_item[span-lg$="+2"],.grid>.grid_item[span-lg$="-1"],.grid>.grid_item[span-lg="2"]{--grid-ce: 2 }.grid>.grid_item[span-lg$="+3"],.grid>.grid_item[span-lg$="-2"],.grid>.grid_item[span-lg="3"]{--grid-ce: 3 }.grid>.grid_item[span-lg$="+4"],.grid>.grid_item[span-lg$="-3"],.grid>.grid_item[span-lg="4"]{--grid-ce: 4 }.grid>.grid_item[span-lg$="+5"],.grid>.grid_item[span-lg$="-4"],.grid>.grid_item[span-lg="5"]{--grid-ce: 5 }.grid>.grid_item[span-lg$="+6"],.grid>.grid_item[span-lg$="-5"],.grid>.grid_item[span-lg="6"]{--grid-ce: 6 }.grid>.grid_item[span-lg$="+7"],.grid>.grid_item[span-lg$="-6"],.grid>.grid_item[span-lg="7"]{--grid-ce: 7 }.grid>.grid_item[span-lg$="+8"],.grid>.grid_item[span-lg$="-7"],.grid>.grid_item[span-lg="8"]{--grid-ce: 8 }.grid>.grid_item[span-lg$="+9"],.grid>.grid_item[span-lg$="-8"],.grid>.grid_item[span-lg="9"]{--grid-ce: 9 }.grid>.grid_item[span-lg$="+10"],.grid>.grid_item[span-lg$="-9"],.grid>.grid_item[span-lg="10"]{--grid-ce: 10 }.grid>.grid_item[span-lg$="+11"],.grid>.grid_item[span-lg$="-10"],.grid>.grid_item[span-lg="11"]{--grid-ce: 11 }.grid>.grid_item[span-lg$="+12"],.grid>.grid_item[span-lg$="-11"],.grid>.grid_item[span-lg="12"]{--grid-ce: 12 }.grid>.grid_item[span-lg$="+13"],.grid>.grid_item[span-lg$="-12"],.grid>.grid_item[span-lg="13"]{--grid-ce: 13 }.grid>.grid_item[span-lg$="+14"],.grid>.grid_item[span-lg$="-13"],.grid>.grid_item[span-lg="14"]{--grid-ce: 14 }.grid>.grid_item[span-lg$="+15"],.grid>.grid_item[span-lg$="-14"],.grid>.grid_item[span-lg="15"]{--grid-ce: 15 }.grid>.grid_item[span-lg$="+16"],.grid>.grid_item[span-lg$="-15"],.grid>.grid_item[span-lg="16"]{--grid-ce: 16 }.grid>.grid_item[span-lg$="+17"],.grid>.grid_item[span-lg$="-16"],.grid>.grid_item[span-lg="17"]{--grid-ce: 17 }.grid>.grid_item[span-lg$="+18"],.grid>.grid_item[span-lg$="-17"],.grid>.grid_item[span-lg="18"]{--grid-ce: 18 }.grid>.grid_item[span-lg$="+19"],.grid>.grid_item[span-lg$="-18"],.grid>.grid_item[span-lg="19"]{--grid-ce: 19 }.grid>.grid_item[span-lg$="+20"],.grid>.grid_item[span-lg$="-19"],.grid>.grid_item[span-lg="20"]{--grid-ce: 20 }.grid>.grid_item[span-lg$="+21"],.grid>.grid_item[span-lg$="-20"],.grid>.grid_item[span-lg="21"]{--grid-ce: 21 }.grid>.grid_item[span-lg$="+22"],.grid>.grid_item[span-lg$="-21"],.grid>.grid_item[span-lg="22"]{--grid-ce: 22 }.grid>.grid_item[span-lg$="+23"],.grid>.grid_item[span-lg$="-22"],.grid>.grid_item[span-lg="23"]{--grid-ce: 23 }.grid>.grid_item[span-lg$="+24"],.grid>.grid_item[span-lg$="-23"],.grid>.grid_item[span-lg="24"]{--grid-ce: 24 }.grid>.grid_item[span-lg$="-24"]{--grid-ce: 25 }.grid>.grid_item[span-lg]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span-lg*="+"],.grid>.grid_item[span-lg*="-"],.grid>.grid_item[span-lg*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span-lg*="-"],.grid>.grid_item[span-lg*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span-lg=row]{grid-column:1 / -1}}@media only screen and (width>=1440px){.grid[col-xl="1"]{--grid-tc: repeat(1, 1fr) }.grid[col-xl="2"]{--grid-tc: repeat(2, 1fr) }.grid[col-xl="3"]{--grid-tc: repeat(3, 1fr) }.grid[col-xl="4"]{--grid-tc: repeat(4, 1fr) }.grid[col-xl="5"]{--grid-tc: repeat(5, 1fr) }.grid[col-xl="6"]{--grid-tc: repeat(6, 1fr) }.grid[col-xl="7"]{--grid-tc: repeat(7, 1fr) }.grid[col-xl="8"]{--grid-tc: repeat(8, 1fr) }.grid[col-xl="9"]{--grid-tc: repeat(9, 1fr) }.grid[col-xl="10"]{--grid-tc: repeat(10, 1fr) }.grid[col-xl="11"]{--grid-tc: repeat(11, 1fr) }.grid[col-xl="12"]{--grid-tc: repeat(12, 1fr) }.grid[col-xl="13"]{--grid-tc: repeat(13, 1fr) }.grid[col-xl="14"]{--grid-tc: repeat(14, 1fr) }.grid[col-xl="15"]{--grid-tc: repeat(15, 1fr) }.grid[col-xl="16"]{--grid-tc: repeat(16, 1fr) }.grid[col-xl="17"]{--grid-tc: repeat(17, 1fr) }.grid[col-xl="18"]{--grid-tc: repeat(18, 1fr) }.grid[col-xl="19"]{--grid-tc: repeat(19, 1fr) }.grid[col-xl="20"]{--grid-tc: repeat(20, 1fr) }.grid[col-xl="21"]{--grid-tc: repeat(21, 1fr) }.grid[col-xl="22"]{--grid-tc: repeat(22, 1fr) }.grid[col-xl="23"]{--grid-tc: repeat(23, 1fr) }.grid[col-xl="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span-xl^="1"]{--grid-cs: 1 }.grid>.grid_item[span-xl^="2"]{--grid-cs: 2 }.grid>.grid_item[span-xl^="3"]{--grid-cs: 3 }.grid>.grid_item[span-xl^="4"]{--grid-cs: 4 }.grid>.grid_item[span-xl^="5"]{--grid-cs: 5 }.grid>.grid_item[span-xl^="6"]{--grid-cs: 6 }.grid>.grid_item[span-xl^="7"]{--grid-cs: 7 }.grid>.grid_item[span-xl^="8"]{--grid-cs: 8 }.grid>.grid_item[span-xl^="9"]{--grid-cs: 9 }.grid>.grid_item[span-xl^="10"]{--grid-cs: 10 }.grid>.grid_item[span-xl^="11"]{--grid-cs: 11 }.grid>.grid_item[span-xl^="12"]{--grid-cs: 12 }.grid>.grid_item[span-xl^="13"]{--grid-cs: 13 }.grid>.grid_item[span-xl^="14"]{--grid-cs: 14 }.grid>.grid_item[span-xl^="15"]{--grid-cs: 15 }.grid>.grid_item[span-xl^="16"]{--grid-cs: 16 }.grid>.grid_item[span-xl^="17"]{--grid-cs: 17 }.grid>.grid_item[span-xl^="18"]{--grid-cs: 18 }.grid>.grid_item[span-xl^="19"]{--grid-cs: 19 }.grid>.grid_item[span-xl^="20"]{--grid-cs: 20 }.grid>.grid_item[span-xl^="21"]{--grid-cs: 21 }.grid>.grid_item[span-xl^="22"]{--grid-cs: 22 }.grid>.grid_item[span-xl^="23"]{--grid-cs: 23 }.grid>.grid_item[span-xl^="24"]{--grid-cs: 24 }.grid>.grid_item[span-xl$="+1"],.grid>.grid_item[span-xl="1"]{--grid-ce: 1 }.grid>.grid_item[span-xl$="+2"],.grid>.grid_item[span-xl$="-1"],.grid>.grid_item[span-xl="2"]{--grid-ce: 2 }.grid>.grid_item[span-xl$="+3"],.grid>.grid_item[span-xl$="-2"],.grid>.grid_item[span-xl="3"]{--grid-ce: 3 }.grid>.grid_item[span-xl$="+4"],.grid>.grid_item[span-xl$="-3"],.grid>.grid_item[span-xl="4"]{--grid-ce: 4 }.grid>.grid_item[span-xl$="+5"],.grid>.grid_item[span-xl$="-4"],.grid>.grid_item[span-xl="5"]{--grid-ce: 5 }.grid>.grid_item[span-xl$="+6"],.grid>.grid_item[span-xl$="-5"],.grid>.grid_item[span-xl="6"]{--grid-ce: 6 }.grid>.grid_item[span-xl$="+7"],.grid>.grid_item[span-xl$="-6"],.grid>.grid_item[span-xl="7"]{--grid-ce: 7 }.grid>.grid_item[span-xl$="+8"],.grid>.grid_item[span-xl$="-7"],.grid>.grid_item[span-xl="8"]{--grid-ce: 8 }.grid>.grid_item[span-xl$="+9"],.grid>.grid_item[span-xl$="-8"],.grid>.grid_item[span-xl="9"]{--grid-ce: 9 }.grid>.grid_item[span-xl$="+10"],.grid>.grid_item[span-xl$="-9"],.grid>.grid_item[span-xl="10"]{--grid-ce: 10 }.grid>.grid_item[span-xl$="+11"],.grid>.grid_item[span-xl$="-10"],.grid>.grid_item[span-xl="11"]{--grid-ce: 11 }.grid>.grid_item[span-xl$="+12"],.grid>.grid_item[span-xl$="-11"],.grid>.grid_item[span-xl="12"]{--grid-ce: 12 }.grid>.grid_item[span-xl$="+13"],.grid>.grid_item[span-xl$="-12"],.grid>.grid_item[span-xl="13"]{--grid-ce: 13 }.grid>.grid_item[span-xl$="+14"],.grid>.grid_item[span-xl$="-13"],.grid>.grid_item[span-xl="14"]{--grid-ce: 14 }.grid>.grid_item[span-xl$="+15"],.grid>.grid_item[span-xl$="-14"],.grid>.grid_item[span-xl="15"]{--grid-ce: 15 }.grid>.grid_item[span-xl$="+16"],.grid>.grid_item[span-xl$="-15"],.grid>.grid_item[span-xl="16"]{--grid-ce: 16 }.grid>.grid_item[span-xl$="+17"],.grid>.grid_item[span-xl$="-16"],.grid>.grid_item[span-xl="17"]{--grid-ce: 17 }.grid>.grid_item[span-xl$="+18"],.grid>.grid_item[span-xl$="-17"],.grid>.grid_item[span-xl="18"]{--grid-ce: 18 }.grid>.grid_item[span-xl$="+19"],.grid>.grid_item[span-xl$="-18"],.grid>.grid_item[span-xl="19"]{--grid-ce: 19 }.grid>.grid_item[span-xl$="+20"],.grid>.grid_item[span-xl$="-19"],.grid>.grid_item[span-xl="20"]{--grid-ce: 20 }.grid>.grid_item[span-xl$="+21"],.grid>.grid_item[span-xl$="-20"],.grid>.grid_item[span-xl="21"]{--grid-ce: 21 }.grid>.grid_item[span-xl$="+22"],.grid>.grid_item[span-xl$="-21"],.grid>.grid_item[span-xl="22"]{--grid-ce: 22 }.grid>.grid_item[span-xl$="+23"],.grid>.grid_item[span-xl$="-22"],.grid>.grid_item[span-xl="23"]{--grid-ce: 23 }.grid>.grid_item[span-xl$="+24"],.grid>.grid_item[span-xl$="-23"],.grid>.grid_item[span-xl="24"]{--grid-ce: 24 }.grid>.grid_item[span-xl$="-24"]{--grid-ce: 25 }.grid>.grid_item[span-xl]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span-xl*="+"],.grid>.grid_item[span-xl*="-"],.grid>.grid_item[span-xl*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span-xl*="-"],.grid>.grid_item[span-xl*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span-xl=row]{grid-column:1 / -1}}}@layer global{.layout{display:flex;flex-direction:column;width:100vw;min-height:100vh;.layout_content{flex:1}}.layout_content_main{container:main / inline-size}.layout-centered{.layout_content{display:grid;gap:var(--sm3);grid-template-columns:1fr minmax(0,var(--layout-content-width)) 1fr;margin-top:var(--lg1);margin-bottom:var(--sm1);@media(width>=768px){margin-top:var(--xl3);margin-bottom:var(--md3);gap:var(--md3)}}.layout_content_main{grid-column:2}}.layout-sidebar{.layout_content{@media(width>=768px){display:grid;grid-template-columns:var(--layout-aside-width) minmax(0,1fr)}}.layout_content_main{padding:var(--sm2);@media(width>=768px){grid-row:1;grid-column:2;padding:var(--lg1) var(--md2)}}.layout_content_aside{@media(width>=768px){grid-row:1;grid-column:1;padding:var(--lg1) var(--md3)}}}.layout-sidebar-end{.layout_content{@media(width>=768px){grid-template-columns:minmax(0,1fr) var(--layout-aside-width)}}.layout_content_main{@media(width>=768px){grid-column:1}}.layout_content_aside{@media(width>=768px){grid-column:2}}}.layout-docs{.layout_content{@media(width>=768px){display:grid;grid-template-columns:var(--layout-aside-width) minmax(0,1fr)}@media(width>=1024px){grid-template-columns:var(--layout-aside-width) minmax(0,var(--layout-content-width)) var(--layout-toc-width)}}.layout_content_main{padding:var(--sm2);@media(width>=768px){grid-row:1;grid-column:2;padding:var(--lg1) var(--md2)}}.layout_content_aside{display:none;@media(width>=768px){display:block;grid-row:1;grid-column:1;padding:var(--lg1) var(--md3)}}.layout_content_aside-toc{@media(width>=768px){display:none}@media(width>=1024px){display:block;grid-row:1;grid-column:3;padding:var(--lg1) var(--md3)}}}.layout-split{.layout_content{display:grid;@media(width>=768px){grid-template-columns:1fr 1fr}}}.layout-cover{min-height:100dvh;.layout_content{display:grid;place-items:center}}}@layer global{@scope(.prose)to (.not-prose){:is(p,ul,ol,blockquote,table):has(+:is(h1,h2,h3,h4)){margin-bottom:calc(var(--prose-spacing) * 2)}p,ul,ol,dl{margin-bottom:var(--prose-spacing);p,ul,ol,dl{margin-bottom:0}}ul,ol{ul,ol{margin-inline-start:0;padding-inline-start:var(--sm2)}li{margin-bottom:.5em;&::marker{color:light-dark(var(--base-300),var(--base-600))}}}ul{margin-inline-start:var(--sm2);list-style-type:"\2192 "}ol{margin-inline-start:var(--md2);list-style-type:decimal-leading-zero;li::marker{font-size:var(--text-sm)}}table{margin-top:var(--md1);margin-bottom:var(--md1)}}}@layer global{.wrap{display:grid;grid-template-columns:1fr var(--wrap-width) 1fr;>*,>astro-island>*,>astro-slot>*,>astro-static-slot>*{grid-column:2;padding-inline:var(--wrap-spacing);@media(width>=768px){padding-inline:var(--wrap-md-spacing)}@media(width>=1024px){padding-inline:var(--wrap-lg-spacing)}}}.wrap-sm{--wrap-width: var(--wrap-width-sm)}.wrap-md{--wrap-width: var(--wrap-width-md)}.wrap-lg{--wrap-width: var(--wrap-width-lg)}.wrap_content-fullBleed{grid-column:1 / -1;width:100%;object-fit:cover}}@layer helpers{.c-base-0{color:var(--base-0)!important}.bdc-base-0{border-color:var(--base-0)!important}.bgc-base-0{background-color:var(--base-0)!important}.c-base-50{color:var(--base-50)!important}.bdc-base-50{border-color:var(--base-50)!important}.bgc-base-50{background-color:var(--base-50)!important}.c-base-100{color:var(--base-100)!important}.bdc-base-100{border-color:var(--base-100)!important}.bgc-base-100{background-color:var(--base-100)!important}.c-base-200{color:var(--base-200)!important}.bdc-base-200{border-color:var(--base-200)!important}.bgc-base-200{background-color:var(--base-200)!important}.c-base-300{color:var(--base-300)!important}.bdc-base-300{border-color:var(--base-300)!important}.bgc-base-300{background-color:var(--base-300)!important}.c-base-400{color:var(--base-400)!important}.bdc-base-400{border-color:var(--base-400)!important}.bgc-base-400{background-color:var(--base-400)!important}.c-base-500{color:var(--base-500)!important}.bdc-base-500{border-color:var(--base-500)!important}.bgc-base-500{background-color:var(--base-500)!important}.c-base-600{color:var(--base-600)!important}.bdc-base-600{border-color:var(--base-600)!important}.bgc-base-600{background-color:var(--base-600)!important}.c-base-700{color:var(--base-700)!important}.bdc-base-700{border-color:var(--base-700)!important}.bgc-base-700{background-color:var(--base-700)!important}.c-base-800{color:var(--base-800)!important}.bdc-base-800{border-color:var(--base-800)!important}.bgc-base-800{background-color:var(--base-800)!important}.c-base-900{color:var(--base-900)!important}.bdc-base-900{border-color:var(--base-900)!important}.bgc-base-900{background-color:var(--base-900)!important}.c-base-950{color:var(--base-950)!important}.bdc-base-950{border-color:var(--base-950)!important}.bgc-base-950{background-color:var(--base-950)!important}.c-primary-50{color:var(--primary-50)!important}.bdc-primary-50{border-color:var(--primary-50)!important}.bgc-primary-50{background-color:var(--primary-50)!important}.c-primary-100{color:var(--primary-100)!important}.bdc-primary-100{border-color:var(--primary-100)!important}.bgc-primary-100{background-color:var(--primary-100)!important}.c-primary-200{color:var(--primary-200)!important}.bdc-primary-200{border-color:var(--primary-200)!important}.bgc-primary-200{background-color:var(--primary-200)!important}.c-primary-300{color:var(--primary-300)!important}.bdc-primary-300{border-color:var(--primary-300)!important}.bgc-primary-300{background-color:var(--primary-300)!important}.c-primary-400{color:var(--primary-400)!important}.bdc-primary-400{border-color:var(--primary-400)!important}.bgc-primary-400{background-color:var(--primary-400)!important}.c-primary-500{color:var(--primary-500)!important}.bdc-primary-500{border-color:var(--primary-500)!important}.bgc-primary-500{background-color:var(--primary-500)!important}.c-primary-600{color:var(--primary-600)!important}.bdc-primary-600{border-color:var(--primary-600)!important}.bgc-primary-600{background-color:var(--primary-600)!important}.c-primary-700{color:var(--primary-700)!important}.bdc-primary-700{border-color:var(--primary-700)!important}.bgc-primary-700{background-color:var(--primary-700)!important}.c-primary-800{color:var(--primary-800)!important}.bdc-primary-800{border-color:var(--primary-800)!important}.bgc-primary-800{background-color:var(--primary-800)!important}.c-primary-900{color:var(--primary-900)!important}.bdc-primary-900{border-color:var(--primary-900)!important}.bgc-primary-900{background-color:var(--primary-900)!important}.c-primary-950{color:var(--primary-950)!important}.bdc-primary-950{border-color:var(--primary-950)!important}.bgc-primary-950{background-color:var(--primary-950)!important}.c-yes-100{color:var(--yes-100)!important}.bdc-yes-100{border-color:var(--yes-100)!important}.bgc-yes-100{background-color:var(--yes-100)!important}.c-yes-200{color:var(--yes-200)!important}.bdc-yes-200{border-color:var(--yes-200)!important}.bgc-yes-200{background-color:var(--yes-200)!important}.c-yes-300{color:var(--yes-300)!important}.bdc-yes-300{border-color:var(--yes-300)!important}.bgc-yes-300{background-color:var(--yes-300)!important}.c-yes-400{color:var(--yes-400)!important}.bdc-yes-400{border-color:var(--yes-400)!important}.bgc-yes-400{background-color:var(--yes-400)!important}.c-yes-500{color:var(--yes-500)!important}.bdc-yes-500{border-color:var(--yes-500)!important}.bgc-yes-500{background-color:var(--yes-500)!important}.c-no-100{color:var(--no-100)!important}.bdc-no-100{border-color:var(--no-100)!important}.bgc-no-100{background-color:var(--no-100)!important}.c-no-200{color:var(--no-200)!important}.bdc-no-200{border-color:var(--no-200)!important}.bgc-no-200{background-color:var(--no-200)!important}.c-no-300{color:var(--no-300)!important}.bdc-no-300{border-color:var(--no-300)!important}.bgc-no-300{background-color:var(--no-300)!important}.c-no-400{color:var(--no-400)!important}.bdc-no-400{border-color:var(--no-400)!important}.bgc-no-400{background-color:var(--no-400)!important}.c-no-500{color:var(--no-500)!important}.bdc-no-500{border-color:var(--no-500)!important}.bgc-no-500{background-color:var(--no-500)!important}.c-maybe-100{color:var(--maybe-100)!important}.bdc-maybe-100{border-color:var(--maybe-100)!important}.bgc-maybe-100{background-color:var(--maybe-100)!important}.c-maybe-200{color:var(--maybe-200)!important}.bdc-maybe-200{border-color:var(--maybe-200)!important}.bgc-maybe-200{background-color:var(--maybe-200)!important}.c-maybe-300{color:var(--maybe-300)!important}.bdc-maybe-300{border-color:var(--maybe-300)!important}.bgc-maybe-300{background-color:var(--maybe-300)!important}.c-maybe-400{color:var(--maybe-400)!important}.bdc-maybe-400{border-color:var(--maybe-400)!important}.bgc-maybe-400{background-color:var(--maybe-400)!important}.c-maybe-500{color:var(--maybe-500)!important}.bdc-maybe-500{border-color:var(--maybe-500)!important}.bgc-maybe-500{background-color:var(--maybe-500)!important}}@layer helpers{body.dev{--baseline: 8;background-size:100% calc(var(--baseline) * 1px)!important;background-image:linear-gradient(to bottom,#0000 calc((var(--baseline) - 1) * 1px),#ff69b4 calc(var(--baseline) * 1px))!important}.dev-error{position:fixed!important;top:var(--md1)!important;left:var(--md1)!important;z-index:var(--z-top)!important;padding:var(--sm1)!important;font-size:1rem!important;color:var(--danger-500)!important;background:var(--danger-100)!important;border:1px solid var(--danger-500)!important;border-radius:var(--radius-md)!important}}@layer helpers{.of-auto,.overflow-auto{overflow:auto!important}.of-hidden,.overflow-hidden{overflow:hidden!important}.of-clip,.overflow-clip{overflow:clip!important}.of-visible,.overflow-visible{overflow:visible!important}.of-scroll,.overflow-scroll{overflow:scroll!important}.of-x-auto,.overflow-x-auto{overflow-x:auto!important}.of-y-auto,.overflow-y-auto{overflow-y:auto!important}.of-x-hidden,.overflow-x-hidden{overflow-x:hidden!important}.of-y-hidden,.overflow-y-hidden{overflow-y:hidden!important}.of-x-clip,.overflow-x-clip{overflow-x:clip!important}.of-y-clip,.overflow-y-clip{overflow-y:clip!important}.of-x-visible,.overflow-x-visible{overflow-x:visible!important}.of-y-visible,.overflow-y-visible{overflow-y:visible!important}.of-x-scroll,.overflow-x-scroll{overflow-x:scroll!important}.of-y-scroll,.overflow-y-scroll{overflow-y:scroll!important}.position-static{position:static!important}.position-fixed{position:fixed!important}.position-absolute{position:absolute!important}.position-relative{position:relative!important}.position-sticky{position:sticky!important}.visibility-visible{visibility:visible!important}.visibility-hidden{visibility:hidden!important}.visibility-collapse{visibility:collapse!important}.z-auto{z-index:auto!important}.z-bottom{z-index:var(--z-bottom)!important}.z-0{z-index:var(--z-0)!important}.z-1{z-index:var(--z-1)!important}.z-2{z-index:var(--z-2)!important}.z-3{z-index:var(--z-3)!important}.z-4{z-index:var(--z-4)!important}.z-5{z-index:var(--z-5)!important}.z-top{z-index:var(--z-top)!important}}@layer helpers{.o-0{opacity:var(--o-0)!important}.o-1{opacity:var(--o-1)!important}.o-2{opacity:var(--o-2)!important}.o-3{opacity:var(--o-3)!important}.o-4{opacity:var(--o-4)!important}.o-5{opacity:var(--o-5)!important}}@layer helpers{.ar-square{aspect-ratio:var(--ar-square)!important}.ar-landscape{aspect-ratio:var(--ar-landscape)!important}.ar-portrait{aspect-ratio:var(--ar-portrait)!important}.ar-widescreen{aspect-ratio:var(--ar-widescreen)!important}.ar-golden{aspect-ratio:var(--ar-golden)!important}}@layer helpers{.w-0{width:0!important}.h-0{height:0!important}.m-0{margin:0!important}.mt-0{margin-top:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mr-0{margin-right:0!important}.mis-0{margin-inline-start:0!important}.mie-0{margin-inline-end:0!important}.p-0{padding:0!important}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.pis-0{padding-inline-start:0!important}.pie-0{padding-inline-end:0!important}.w-xs1{width:var(--xs1)!important}.h-xs1{height:var(--xs1)!important}.m-xs1{margin:var(--xs1)!important}.mt-xs1{margin-top:var(--xs1)!important}.mb-xs1{margin-bottom:var(--xs1)!important}.ml-xs1{margin-left:var(--xs1)!important}.mr-xs1{margin-right:var(--xs1)!important}.mis-xs1{margin-inline-start:var(--xs1)!important}.mie-xs1{margin-inline-end:var(--xs1)!important}.p-xs1{padding:var(--xs1)!important}.pt-xs1{padding-top:var(--xs1)!important}.pb-xs1{padding-bottom:var(--xs1)!important}.pl-xs1{padding-left:var(--xs1)!important}.pr-xs1{padding-right:var(--xs1)!important}.pis-xs1{padding-inline-start:var(--xs1)!important}.pie-xs1{padding-inline-end:var(--xs1)!important}.w-xs2{width:var(--xs2)!important}.h-xs2{height:var(--xs2)!important}.m-xs2{margin:var(--xs2)!important}.mt-xs2{margin-top:var(--xs2)!important}.mb-xs2{margin-bottom:var(--xs2)!important}.ml-xs2{margin-left:var(--xs2)!important}.mr-xs2{margin-right:var(--xs2)!important}.mis-xs2{margin-inline-start:var(--xs2)!important}.mie-xs2{margin-inline-end:var(--xs2)!important}.p-xs2{padding:var(--xs2)!important}.pt-xs2{padding-top:var(--xs2)!important}.pb-xs2{padding-bottom:var(--xs2)!important}.pl-xs2{padding-left:var(--xs2)!important}.pr-xs2{padding-right:var(--xs2)!important}.pis-xs2{padding-inline-start:var(--xs2)!important}.pie-xs2{padding-inline-end:var(--xs2)!important}.w-xs3{width:var(--xs3)!important}.h-xs3{height:var(--xs3)!important}.m-xs3{margin:var(--xs3)!important}.mt-xs3{margin-top:var(--xs3)!important}.mb-xs3{margin-bottom:var(--xs3)!important}.ml-xs3{margin-left:var(--xs3)!important}.mr-xs3{margin-right:var(--xs3)!important}.mis-xs3{margin-inline-start:var(--xs3)!important}.mie-xs3{margin-inline-end:var(--xs3)!important}.p-xs3{padding:var(--xs3)!important}.pt-xs3{padding-top:var(--xs3)!important}.pb-xs3{padding-bottom:var(--xs3)!important}.pl-xs3{padding-left:var(--xs3)!important}.pr-xs3{padding-right:var(--xs3)!important}.pis-xs3{padding-inline-start:var(--xs3)!important}.pie-xs3{padding-inline-end:var(--xs3)!important}.w-sm1{width:var(--sm1)!important}.h-sm1{height:var(--sm1)!important}.m-sm1{margin:var(--sm1)!important}.mt-sm1{margin-top:var(--sm1)!important}.mb-sm1{margin-bottom:var(--sm1)!important}.ml-sm1{margin-left:var(--sm1)!important}.mr-sm1{margin-right:var(--sm1)!important}.mis-sm1{margin-inline-start:var(--sm1)!important}.mie-sm1{margin-inline-end:var(--sm1)!important}.p-sm1{padding:var(--sm1)!important}.pt-sm1{padding-top:var(--sm1)!important}.pb-sm1{padding-bottom:var(--sm1)!important}.pl-sm1{padding-left:var(--sm1)!important}.pr-sm1{padding-right:var(--sm1)!important}.pis-sm1{padding-inline-start:var(--sm1)!important}.pie-sm1{padding-inline-end:var(--sm1)!important}.w-sm2{width:var(--sm2)!important}.h-sm2{height:var(--sm2)!important}.m-sm2{margin:var(--sm2)!important}.mt-sm2{margin-top:var(--sm2)!important}.mb-sm2{margin-bottom:var(--sm2)!important}.ml-sm2{margin-left:var(--sm2)!important}.mr-sm2{margin-right:var(--sm2)!important}.mis-sm2{margin-inline-start:var(--sm2)!important}.mie-sm2{margin-inline-end:var(--sm2)!important}.p-sm2{padding:var(--sm2)!important}.pt-sm2{padding-top:var(--sm2)!important}.pb-sm2{padding-bottom:var(--sm2)!important}.pl-sm2{padding-left:var(--sm2)!important}.pr-sm2{padding-right:var(--sm2)!important}.pis-sm2{padding-inline-start:var(--sm2)!important}.pie-sm2{padding-inline-end:var(--sm2)!important}.w-sm3{width:var(--sm3)!important}.h-sm3{height:var(--sm3)!important}.m-sm3{margin:var(--sm3)!important}.mt-sm3{margin-top:var(--sm3)!important}.mb-sm3{margin-bottom:var(--sm3)!important}.ml-sm3{margin-left:var(--sm3)!important}.mr-sm3{margin-right:var(--sm3)!important}.mis-sm3{margin-inline-start:var(--sm3)!important}.mie-sm3{margin-inline-end:var(--sm3)!important}.p-sm3{padding:var(--sm3)!important}.pt-sm3{padding-top:var(--sm3)!important}.pb-sm3{padding-bottom:var(--sm3)!important}.pl-sm3{padding-left:var(--sm3)!important}.pr-sm3{padding-right:var(--sm3)!important}.pis-sm3{padding-inline-start:var(--sm3)!important}.pie-sm3{padding-inline-end:var(--sm3)!important}.w-md1{width:var(--md1)!important}.h-md1{height:var(--md1)!important}.m-md1{margin:var(--md1)!important}.mt-md1{margin-top:var(--md1)!important}.mb-md1{margin-bottom:var(--md1)!important}.ml-md1{margin-left:var(--md1)!important}.mr-md1{margin-right:var(--md1)!important}.mis-md1{margin-inline-start:var(--md1)!important}.mie-md1{margin-inline-end:var(--md1)!important}.p-md1{padding:var(--md1)!important}.pt-md1{padding-top:var(--md1)!important}.pb-md1{padding-bottom:var(--md1)!important}.pl-md1{padding-left:var(--md1)!important}.pr-md1{padding-right:var(--md1)!important}.pis-md1{padding-inline-start:var(--md1)!important}.pie-md1{padding-inline-end:var(--md1)!important}.w-md2{width:var(--md2)!important}.h-md2{height:var(--md2)!important}.m-md2{margin:var(--md2)!important}.mt-md2{margin-top:var(--md2)!important}.mb-md2{margin-bottom:var(--md2)!important}.ml-md2{margin-left:var(--md2)!important}.mr-md2{margin-right:var(--md2)!important}.mis-md2{margin-inline-start:var(--md2)!important}.mie-md2{margin-inline-end:var(--md2)!important}.p-md2{padding:var(--md2)!important}.pt-md2{padding-top:var(--md2)!important}.pb-md2{padding-bottom:var(--md2)!important}.pl-md2{padding-left:var(--md2)!important}.pr-md2{padding-right:var(--md2)!important}.pis-md2{padding-inline-start:var(--md2)!important}.pie-md2{padding-inline-end:var(--md2)!important}.w-md3{width:var(--md3)!important}.h-md3{height:var(--md3)!important}.m-md3{margin:var(--md3)!important}.mt-md3{margin-top:var(--md3)!important}.mb-md3{margin-bottom:var(--md3)!important}.ml-md3{margin-left:var(--md3)!important}.mr-md3{margin-right:var(--md3)!important}.mis-md3{margin-inline-start:var(--md3)!important}.mie-md3{margin-inline-end:var(--md3)!important}.p-md3{padding:var(--md3)!important}.pt-md3{padding-top:var(--md3)!important}.pb-md3{padding-bottom:var(--md3)!important}.pl-md3{padding-left:var(--md3)!important}.pr-md3{padding-right:var(--md3)!important}.pis-md3{padding-inline-start:var(--md3)!important}.pie-md3{padding-inline-end:var(--md3)!important}.w-lg1{width:var(--lg1)!important}.h-lg1{height:var(--lg1)!important}.m-lg1{margin:var(--lg1)!important}.mt-lg1{margin-top:var(--lg1)!important}.mb-lg1{margin-bottom:var(--lg1)!important}.ml-lg1{margin-left:var(--lg1)!important}.mr-lg1{margin-right:var(--lg1)!important}.mis-lg1{margin-inline-start:var(--lg1)!important}.mie-lg1{margin-inline-end:var(--lg1)!important}.p-lg1{padding:var(--lg1)!important}.pt-lg1{padding-top:var(--lg1)!important}.pb-lg1{padding-bottom:var(--lg1)!important}.pl-lg1{padding-left:var(--lg1)!important}.pr-lg1{padding-right:var(--lg1)!important}.pis-lg1{padding-inline-start:var(--lg1)!important}.pie-lg1{padding-inline-end:var(--lg1)!important}.w-lg2{width:var(--lg2)!important}.h-lg2{height:var(--lg2)!important}.m-lg2{margin:var(--lg2)!important}.mt-lg2{margin-top:var(--lg2)!important}.mb-lg2{margin-bottom:var(--lg2)!important}.ml-lg2{margin-left:var(--lg2)!important}.mr-lg2{margin-right:var(--lg2)!important}.mis-lg2{margin-inline-start:var(--lg2)!important}.mie-lg2{margin-inline-end:var(--lg2)!important}.p-lg2{padding:var(--lg2)!important}.pt-lg2{padding-top:var(--lg2)!important}.pb-lg2{padding-bottom:var(--lg2)!important}.pl-lg2{padding-left:var(--lg2)!important}.pr-lg2{padding-right:var(--lg2)!important}.pis-lg2{padding-inline-start:var(--lg2)!important}.pie-lg2{padding-inline-end:var(--lg2)!important}.w-lg3{width:var(--lg3)!important}.h-lg3{height:var(--lg3)!important}.m-lg3{margin:var(--lg3)!important}.mt-lg3{margin-top:var(--lg3)!important}.mb-lg3{margin-bottom:var(--lg3)!important}.ml-lg3{margin-left:var(--lg3)!important}.mr-lg3{margin-right:var(--lg3)!important}.mis-lg3{margin-inline-start:var(--lg3)!important}.mie-lg3{margin-inline-end:var(--lg3)!important}.p-lg3{padding:var(--lg3)!important}.pt-lg3{padding-top:var(--lg3)!important}.pb-lg3{padding-bottom:var(--lg3)!important}.pl-lg3{padding-left:var(--lg3)!important}.pr-lg3{padding-right:var(--lg3)!important}.pis-lg3{padding-inline-start:var(--lg3)!important}.pie-lg3{padding-inline-end:var(--lg3)!important}.w-xl1{width:var(--xl1)!important}.h-xl1{height:var(--xl1)!important}.m-xl1{margin:var(--xl1)!important}.mt-xl1{margin-top:var(--xl1)!important}.mb-xl1{margin-bottom:var(--xl1)!important}.ml-xl1{margin-left:var(--xl1)!important}.mr-xl1{margin-right:var(--xl1)!important}.mis-xl1{margin-inline-start:var(--xl1)!important}.mie-xl1{margin-inline-end:var(--xl1)!important}.p-xl1{padding:var(--xl1)!important}.pt-xl1{padding-top:var(--xl1)!important}.pb-xl1{padding-bottom:var(--xl1)!important}.pl-xl1{padding-left:var(--xl1)!important}.pr-xl1{padding-right:var(--xl1)!important}.pis-xl1{padding-inline-start:var(--xl1)!important}.pie-xl1{padding-inline-end:var(--xl1)!important}.w-xl2{width:var(--xl2)!important}.h-xl2{height:var(--xl2)!important}.m-xl2{margin:var(--xl2)!important}.mt-xl2{margin-top:var(--xl2)!important}.mb-xl2{margin-bottom:var(--xl2)!important}.ml-xl2{margin-left:var(--xl2)!important}.mr-xl2{margin-right:var(--xl2)!important}.mis-xl2{margin-inline-start:var(--xl2)!important}.mie-xl2{margin-inline-end:var(--xl2)!important}.p-xl2{padding:var(--xl2)!important}.pt-xl2{padding-top:var(--xl2)!important}.pb-xl2{padding-bottom:var(--xl2)!important}.pl-xl2{padding-left:var(--xl2)!important}.pr-xl2{padding-right:var(--xl2)!important}.pis-xl2{padding-inline-start:var(--xl2)!important}.pie-xl2{padding-inline-end:var(--xl2)!important}.w-xl3{width:var(--xl3)!important}.h-xl3{height:var(--xl3)!important}.m-xl3{margin:var(--xl3)!important}.mt-xl3{margin-top:var(--xl3)!important}.mb-xl3{margin-bottom:var(--xl3)!important}.ml-xl3{margin-left:var(--xl3)!important}.mr-xl3{margin-right:var(--xl3)!important}.mis-xl3{margin-inline-start:var(--xl3)!important}.mie-xl3{margin-inline-end:var(--xl3)!important}.p-xl3{padding:var(--xl3)!important}.pt-xl3{padding-top:var(--xl3)!important}.pb-xl3{padding-bottom:var(--xl3)!important}.pl-xl3{padding-left:var(--xl3)!important}.pr-xl3{padding-right:var(--xl3)!important}.pis-xl3{padding-inline-start:var(--xl3)!important}.pie-xl3{padding-inline-end:var(--xl3)!important}.w-xxl1{width:var(--xxl1)!important}.h-xxl1{height:var(--xxl1)!important}.m-xxl1{margin:var(--xxl1)!important}.mt-xxl1{margin-top:var(--xxl1)!important}.mb-xxl1{margin-bottom:var(--xxl1)!important}.ml-xxl1{margin-left:var(--xxl1)!important}.mr-xxl1{margin-right:var(--xxl1)!important}.mis-xxl1{margin-inline-start:var(--xxl1)!important}.mie-xxl1{margin-inline-end:var(--xxl1)!important}.p-xxl1{padding:var(--xxl1)!important}.pt-xxl1{padding-top:var(--xxl1)!important}.pb-xxl1{padding-bottom:var(--xxl1)!important}.pl-xxl1{padding-left:var(--xxl1)!important}.pr-xxl1{padding-right:var(--xxl1)!important}.pis-xxl1{padding-inline-start:var(--xxl1)!important}.pie-xxl1{padding-inline-end:var(--xxl1)!important}.w-xxl2{width:var(--xxl2)!important}.h-xxl2{height:var(--xxl2)!important}.m-xxl2{margin:var(--xxl2)!important}.mt-xxl2{margin-top:var(--xxl2)!important}.mb-xxl2{margin-bottom:var(--xxl2)!important}.ml-xxl2{margin-left:var(--xxl2)!important}.mr-xxl2{margin-right:var(--xxl2)!important}.mis-xxl2{margin-inline-start:var(--xxl2)!important}.mie-xxl2{margin-inline-end:var(--xxl2)!important}.p-xxl2{padding:var(--xxl2)!important}.pt-xxl2{padding-top:var(--xxl2)!important}.pb-xxl2{padding-bottom:var(--xxl2)!important}.pl-xxl2{padding-left:var(--xxl2)!important}.pr-xxl2{padding-right:var(--xxl2)!important}.pis-xxl2{padding-inline-start:var(--xxl2)!important}.pie-xxl2{padding-inline-end:var(--xxl2)!important}.w-xxl3{width:var(--xxl3)!important}.h-xxl3{height:var(--xxl3)!important}.m-xxl3{margin:var(--xxl3)!important}.mt-xxl3{margin-top:var(--xxl3)!important}.mb-xxl3{margin-bottom:var(--xxl3)!important}.ml-xxl3{margin-left:var(--xxl3)!important}.mr-xxl3{margin-right:var(--xxl3)!important}.mis-xxl3{margin-inline-start:var(--xxl3)!important}.mie-xxl3{margin-inline-end:var(--xxl3)!important}.p-xxl3{padding:var(--xxl3)!important}.pt-xxl3{padding-top:var(--xxl3)!important}.pb-xxl3{padding-bottom:var(--xxl3)!important}.pl-xxl3{padding-left:var(--xxl3)!important}.pr-xxl3{padding-right:var(--xxl3)!important}.pis-xxl3{padding-inline-start:var(--xxl3)!important}.pie-xxl3{padding-inline-end:var(--xxl3)!important}.w-mega1{width:var(--mega1)!important}.h-mega1{height:var(--mega1)!important}.m-mega1{margin:var(--mega1)!important}.mt-mega1{margin-top:var(--mega1)!important}.mb-mega1{margin-bottom:var(--mega1)!important}.ml-mega1{margin-left:var(--mega1)!important}.mr-mega1{margin-right:var(--mega1)!important}.mis-mega1{margin-inline-start:var(--mega1)!important}.mie-mega1{margin-inline-end:var(--mega1)!important}.p-mega1{padding:var(--mega1)!important}.pt-mega1{padding-top:var(--mega1)!important}.pb-mega1{padding-bottom:var(--mega1)!important}.pl-mega1{padding-left:var(--mega1)!important}.pr-mega1{padding-right:var(--mega1)!important}.pis-mega1{padding-inline-start:var(--mega1)!important}.pie-mega1{padding-inline-end:var(--mega1)!important}.w-mega2{width:var(--mega2)!important}.h-mega2{height:var(--mega2)!important}.m-mega2{margin:var(--mega2)!important}.mt-mega2{margin-top:var(--mega2)!important}.mb-mega2{margin-bottom:var(--mega2)!important}.ml-mega2{margin-left:var(--mega2)!important}.mr-mega2{margin-right:var(--mega2)!important}.mis-mega2{margin-inline-start:var(--mega2)!important}.mie-mega2{margin-inline-end:var(--mega2)!important}.p-mega2{padding:var(--mega2)!important}.pt-mega2{padding-top:var(--mega2)!important}.pb-mega2{padding-bottom:var(--mega2)!important}.pl-mega2{padding-left:var(--mega2)!important}.pr-mega2{padding-right:var(--mega2)!important}.pis-mega2{padding-inline-start:var(--mega2)!important}.pie-mega2{padding-inline-end:var(--mega2)!important}.w-mega3{width:var(--mega3)!important}.h-mega3{height:var(--mega3)!important}.m-mega3{margin:var(--mega3)!important}.mt-mega3{margin-top:var(--mega3)!important}.mb-mega3{margin-bottom:var(--mega3)!important}.ml-mega3{margin-left:var(--mega3)!important}.mr-mega3{margin-right:var(--mega3)!important}.mis-mega3{margin-inline-start:var(--mega3)!important}.mie-mega3{margin-inline-end:var(--mega3)!important}.p-mega3{padding:var(--mega3)!important}.pt-mega3{padding-top:var(--mega3)!important}.pb-mega3{padding-bottom:var(--mega3)!important}.pl-mega3{padding-left:var(--mega3)!important}.pr-mega3{padding-right:var(--mega3)!important}.pis-mega3{padding-inline-start:var(--mega3)!important}.pie-mega3{padding-inline-end:var(--mega3)!important}.w-giga1{width:var(--giga1)!important}.h-giga1{height:var(--giga1)!important}.m-giga1{margin:var(--giga1)!important}.mt-giga1{margin-top:var(--giga1)!important}.mb-giga1{margin-bottom:var(--giga1)!important}.ml-giga1{margin-left:var(--giga1)!important}.mr-giga1{margin-right:var(--giga1)!important}.mis-giga1{margin-inline-start:var(--giga1)!important}.mie-giga1{margin-inline-end:var(--giga1)!important}.p-giga1{padding:var(--giga1)!important}.pt-giga1{padding-top:var(--giga1)!important}.pb-giga1{padding-bottom:var(--giga1)!important}.pl-giga1{padding-left:var(--giga1)!important}.pr-giga1{padding-right:var(--giga1)!important}.pis-giga1{padding-inline-start:var(--giga1)!important}.pie-giga1{padding-inline-end:var(--giga1)!important}.w-giga2{width:var(--giga2)!important}.h-giga2{height:var(--giga2)!important}.m-giga2{margin:var(--giga2)!important}.mt-giga2{margin-top:var(--giga2)!important}.mb-giga2{margin-bottom:var(--giga2)!important}.ml-giga2{margin-left:var(--giga2)!important}.mr-giga2{margin-right:var(--giga2)!important}.mis-giga2{margin-inline-start:var(--giga2)!important}.mie-giga2{margin-inline-end:var(--giga2)!important}.p-giga2{padding:var(--giga2)!important}.pt-giga2{padding-top:var(--giga2)!important}.pb-giga2{padding-bottom:var(--giga2)!important}.pl-giga2{padding-left:var(--giga2)!important}.pr-giga2{padding-right:var(--giga2)!important}.pis-giga2{padding-inline-start:var(--giga2)!important}.pie-giga2{padding-inline-end:var(--giga2)!important}.w-giga3{width:var(--giga3)!important}.h-giga3{height:var(--giga3)!important}.m-giga3{margin:var(--giga3)!important}.mt-giga3{margin-top:var(--giga3)!important}.mb-giga3{margin-bottom:var(--giga3)!important}.ml-giga3{margin-left:var(--giga3)!important}.mr-giga3{margin-right:var(--giga3)!important}.mis-giga3{margin-inline-start:var(--giga3)!important}.mie-giga3{margin-inline-end:var(--giga3)!important}.p-giga3{padding:var(--giga3)!important}.pt-giga3{padding-top:var(--giga3)!important}.pb-giga3{padding-bottom:var(--giga3)!important}.pl-giga3{padding-left:var(--giga3)!important}.pr-giga3{padding-right:var(--giga3)!important}.pis-giga3{padding-inline-start:var(--giga3)!important}.pie-giga3{padding-inline-end:var(--giga3)!important}.w-tera1{width:var(--tera1)!important}.h-tera1{height:var(--tera1)!important}.m-tera1{margin:var(--tera1)!important}.mt-tera1{margin-top:var(--tera1)!important}.mb-tera1{margin-bottom:var(--tera1)!important}.ml-tera1{margin-left:var(--tera1)!important}.mr-tera1{margin-right:var(--tera1)!important}.mis-tera1{margin-inline-start:var(--tera1)!important}.mie-tera1{margin-inline-end:var(--tera1)!important}.p-tera1{padding:var(--tera1)!important}.pt-tera1{padding-top:var(--tera1)!important}.pb-tera1{padding-bottom:var(--tera1)!important}.pl-tera1{padding-left:var(--tera1)!important}.pr-tera1{padding-right:var(--tera1)!important}.pis-tera1{padding-inline-start:var(--tera1)!important}.pie-tera1{padding-inline-end:var(--tera1)!important}.w-tera2{width:var(--tera2)!important}.h-tera2{height:var(--tera2)!important}.m-tera2{margin:var(--tera2)!important}.mt-tera2{margin-top:var(--tera2)!important}.mb-tera2{margin-bottom:var(--tera2)!important}.ml-tera2{margin-left:var(--tera2)!important}.mr-tera2{margin-right:var(--tera2)!important}.mis-tera2{margin-inline-start:var(--tera2)!important}.mie-tera2{margin-inline-end:var(--tera2)!important}.p-tera2{padding:var(--tera2)!important}.pt-tera2{padding-top:var(--tera2)!important}.pb-tera2{padding-bottom:var(--tera2)!important}.pl-tera2{padding-left:var(--tera2)!important}.pr-tera2{padding-right:var(--tera2)!important}.pis-tera2{padding-inline-start:var(--tera2)!important}.pie-tera2{padding-inline-end:var(--tera2)!important}.w-tera3{width:var(--tera3)!important}.h-tera3{height:var(--tera3)!important}.m-tera3{margin:var(--tera3)!important}.mt-tera3{margin-top:var(--tera3)!important}.mb-tera3{margin-bottom:var(--tera3)!important}.ml-tera3{margin-left:var(--tera3)!important}.mr-tera3{margin-right:var(--tera3)!important}.mis-tera3{margin-inline-start:var(--tera3)!important}.mie-tera3{margin-inline-end:var(--tera3)!important}.p-tera3{padding:var(--tera3)!important}.pt-tera3{padding-top:var(--tera3)!important}.pb-tera3{padding-bottom:var(--tera3)!important}.pl-tera3{padding-left:var(--tera3)!important}.pr-tera3{padding-right:var(--tera3)!important}.pis-tera3{padding-inline-start:var(--tera3)!important}.pie-tera3{padding-inline-end:var(--tera3)!important}}@layer helpers{.font-text{font-family:var(--text)!important}.font-display{font-family:var(--display)!important}.font-mono{font-family:var(--mono)!important}.font-italic{font-style:italic!important}.font-normal{font-style:normal!important}.font-extra-light{font-weight:var(--extra-light)!important}.font-light{font-weight:var(--light)!important}.font-book{font-weight:var(--book)!important}.font-semi-bold{font-weight:var(--semi-bold)!important}.font-bold{font-weight:var(--bold)!important}.font-black{font-weight:var(--black)!important}.text-xs{font-size:var(--text-xs)!important}.text-sm{font-size:var(--text-sm)!important}.text-md{font-size:var(--text-md)!important}.text-lg{font-size:var(--text-lg)!important}.text-xl{font-size:var(--text-xl)!important}.display-sm{font-size:var(--display-sm)!important}.display-md{font-size:var(--display-md)!important}.display-lg{font-size:var(--display-lg)!important}.display-xl{font-size:var(--display-xl)!important}.display-mega{font-size:var(--display-mega)!important}.display-giga{font-size:var(--display-giga)!important}.tracking-sm{letter-spacing:var(--tracking-sm)!important}.tracking-md{letter-spacing:var(--tracking-md)!important}.tracking-lg{letter-spacing:var(--tracking-lg)!important}.tracking-xl{letter-spacing:var(--tracking-xl)!important}.tracking-xxl{letter-spacing:var(--tracking-xxl)!important}.leading-xs{line-height:var(--leading-xs)!important}.leading-sm{line-height:var(--leading-sm)!important}.leading-md{line-height:var(--leading-md)!important}.leading-lg{line-height:var(--leading-lg)!important}.leading-xl{line-height:var(--leading-xl)!important}.leading-xxl{line-height:var(--leading-xxl)!important}.text-left{text-align:left!important}.text-center{text-align:center!important}.text-right{text-align:right!important}.text-justify{text-align:justify!important}.text-start{text-align:start!important}.text-end{text-align:end!important}.text-uppercase{text-transform:uppercase!important}.text-lowercase{text-transform:lowercase!important}.text-capitalize{text-transform:capitalize!important}}@layer theme.defaults{:root{--xs1: 4px;--xs2: 8px;--xs3: 12px;--sm1: 16px;--sm2: 20px;--sm3: 24px;--md1: 28px;--md2: 32px;--md3: 36px;--lg1: 40px;--lg2: 44px;--lg3: 48px;--xl1: 56px;--xl2: 64px;--xl3: 80px;--xxl1: 96px;--xxl2: 112px;--xxl3: 128px;--mega1: 160px;--mega2: 192px;--mega3: 224px;--giga1: 256px;--giga2: 288px;--giga3: 320px;--tera1: 384px;--tera2: 480px;--tera3: 520px;--ar-square: 1;--ar-landscape: 4/3;--ar-portrait: 3/4;--ar-widescreen: 16/9;--ar-golden: 1.618/1;--display: Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, ui-sans-serif, sans-serif;--text: ui-sans-serif, system-ui, sans-serif;--mono: Dank Mono, Inconsolata, Fira Mono, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, ui-monospace, monospace;--text-xs: .694rem;--text-sm: .833rem;--text-md: 1rem;--text-lg: 1.2rem;--text-xl: 1.44rem;--display-sm: 1.728rem;--display-md: 2.074rem;--display-lg: 2.488rem;--display-xl: 2.986rem;--display-mega: 3.583rem;--display-giga: 4.299rem;--extra-light: 200;--light: 300;--book: 400;--semi-bold: 600;--bold: 700;--black: 900;--tracking-sm: -.05em;--tracking-md: .025em;--tracking-lg: .05em;--tracking-xl: .075em;--tracking-xxl: .15em;--leading-xs: 1;--leading-sm: 1.15;--leading-md: 1.375;--leading-lg: 1.5;--leading-xl: 1.75;--leading-xxl: 2;--base-0: #fff;--base-50: #f6f7f9;--base-100: #edeef1;--base-200: #d6dbe1;--base-300: #b2bbc7;--base-400: #8897a8;--base-500: #697a8e;--base-600: #546375;--base-700: #4a5666;--base-800: #3c4550;--base-900: #353c45;--base-950: #23282e;--primary-50: #f0f9ff;--primary-100: #e0f2fe;--primary-200: #bae6fd;--primary-300: #7dd3fc;--primary-400: #38bdf8;--primary-500: #0ea5e9;--primary-600: #0284c7;--primary-700: #0369a1;--primary-800: #075985;--primary-900: #0c4a6e;--primary-950: #082f49;--yes-100: #d5f6e8;--yes-200: #afebd4;--yes-300: #7adbbd;--yes-400: #46c4a0;--yes-500: #13886d;--no-100: #ffe4e6;--no-200: #fecdd3;--no-300: #fda4af;--no-400: #fb7185;--no-500: #e11d48;--maybe-100: #fff7d6;--maybe-200: #fff0b3;--maybe-300: #ffd64a;--maybe-400: #ffc220;--maybe-500: #f9a007;--highlight-500: #ffee00;--border-sm: 1px;--border-md: 2px;--border-lg: 4px;--border-xl: 8px;--border-xxl: 12px;--radius-sm: 3px;--radius-md: 5px;--radius-lg: 8px;--radius-xl: 12px;--radius-xxl: 16px;--radius-round: 1e5px;--shadow-sm: 0 1px 3px 0 var(--ui-shadow-color), 0 1px 2px -1px var(--ui-shadow-color);--shadow-md: 0 4px 6px -1px var(--ui-shadow-color), 0 2px 4px -2px var(--ui-shadow-color);--shadow-lg: 0 8px 13px -3px var(--ui-shadow-color), 0 4px 6px -4px var(--ui-shadow-color);--shadow-xl: 0 20px 20px -5px var(--ui-shadow-color), 0 8px 10px -6px var(--ui-shadow-color);--shadow-xxl: 0px 11px 8px -6px var(--ui-shadow-color), 0 10px 15px 2px var(--ui-shadow-color);--o-0: 0;--o-1: .2;--o-2: .4;--o-3: .6;--o-4: .8;--o-5: 1;--z-bottom: -1000000000;--z-0: 0;--z-1: 10;--z-2: 20;--z-3: 30;--z-4: 40;--z-5: 50;--z-top: 1000000000;--transition: .22s ease-in-out;--transition-fast: .1s ease-in-out}}@layer theme.defaults{:root{color-scheme:light dark;--ui-border-color: light-dark(var(--base-200), var(--base-500));--ui-shadow-color: light-dark(rgb(0 0 0 / .1), rgb(0 0 0 / .6));--focus-ring-color: light-dark(var(--primary-500), var(--primary-400));--focus-ring-width: 2px;--focus-ring-offset: 2px;--success-100: var(--yes-100);--success-200: var(--yes-200);--success-300: var(--yes-300);--success-400: var(--yes-400);--success-500: var(--yes-500);--danger-100: var(--no-100);--danger-200: var(--no-200);--danger-300: var(--no-300);--danger-400: var(--no-400);--danger-500: var(--no-500);--warning-100: var(--maybe-100);--warning-200: var(--maybe-200);--warning-300: var(--maybe-300);--warning-400: var(--maybe-400);--warning-500: var(--maybe-500)}:root.theme-light{color-scheme:light}:root.theme-dark{color-scheme:dark}:root{accent-color:var(--primary-500);--body-background-color: light-dark(var(--base-0), var(--base-950));--body-line-height: var(--leading-lg);--input-height: var(--md3);--input-padding: var(--xs3);--input-border-width: var(--border-sm);--input-border-color: var(--ui-border-color);--input-border-radius: var(--radius-md);--input-border-color-invalid: light-dark( var(--danger-500), var(--danger-400) );--label-spacing: var(--xs1);--fieldset-padding: var(--sm3);--fieldset-border-width: var(--border-sm);--fieldset-border-color: var(--ui-border-color);--fieldset-border-radius: var(--radius-lg);--meter-height: var(--sm1);--meter-border-radius: var(--radius-md);--meter-track-color: var(--primary-100);--meter-low-color: var(--danger-400);--meter-medium-color: var(--warning-400);--meter-high-color: var(--success-400);--progress-height: var(--sm1);--progress-color: var(--primary-500);--progress-track-color: var(--primary-100);--progress-border-radius: var(--radius-md);--select-icon-size: var(--sm3);--select-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");--dialog-min-width: var(--tera1);--dialog-max-width: var(--tera3);--dialog-padding: var(--lg1) var(--md1);--dialog-border-width: var(--border-sm);--dialog-border-color: light-dark(var(--base-200), var(--base-800));--dialog-background-color: light-dark(var(--base-50), var(--base-900));--dialog-border-radius: var(--radius-lg);--dialog-backdrop-color: var(--base-950);--dialog-backdrop-opacity: var(--o-4);--details-padding: var(--sm1);--details-spacing: var(--xs3);--details-border-width: var(--border-sm);--details-border-color: light-dark(var(--base-200), var(--base-800));--details-background-color: light-dark(var(--base-50), var(--base-900));--details-border-radius: var(--radius-lg);--details-icon-size: var(--sm3);--details-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");--table-padding: var(--xs2) var(--sm1);--table-border-width: var(--border-sm);--table-border-color: light-dark(var(--base-100), var(--base-700));--table-border-radius: var(--radius-md);--table-background-color: none;--table-caption-spacing: var(--xs3);--figcaption-spacing: var(--xs2);--heading-font: var(--display);--heading-weight: var(--black);--heading-letter-spacing: normal;--heading-font-size-h1: clamp( var(--display-md), 1.269rem + 2.682vw, var(--display-xl) );--heading-font-size-h2: clamp( var(--display-sm), 1.057rem + 2.235vw, var(--display-lg) );--heading-font-size-h3: clamp( var(--text-xl), .881rem + 1.865vw, var(--display-md) );--heading-font-size-h4: clamp( var(--text-lg), .734rem + 1.553vw, var(--display-sm) );--heading-font-size-h5: clamp( var(--text-lg), .988rem + .706vw, var(--text-xl) );--heading-font-size-h6: clamp( var(--text-md), .824rem + .588vw, var(--text-lg) );--heading-line-height: var(--leading-sm);--heading-line-height-h1: var(--heading-line-height);--heading-line-height-h2: var(--heading-line-height);--heading-line-height-h3: var(--heading-line-height);--heading-line-height-h4: var(--leading-md);--heading-line-height-h5: var(--leading-md);--heading-line-height-h6: var(--leading-md);--heading-spacing-h1: .4em;--heading-spacing-h2: .4em;--heading-spacing-h3: .4em;--heading-spacing-h4: .4em;--heading-spacing-h5: .4em;--heading-spacing-h6: .4em;--heading-spacing-consecutive: .3em;--text-color: light-dark(var(--base-950), var(--base-200));--link-font-weight: var(--semi-bold);--link-color: light-dark(var(--primary-600), var(--primary-400));--link-color-hover: var(--primary-500);--text-code-color: light-dark(var(--primary-600), var(--primary-400));--text-code-background-color: light-dark( var(--primary-100), var(--primary-900) );--text-code-muted-color: light-dark(var(--base-500), var(--base-300));--pre-border-radius: var(--radius-md);--pre-font-size: .9rem;--blockquote-padding-block: var(--sm1);--blockquote-padding-inline: var(--md1) var(--sm3);--blockquote-background-color: light-dark( var(--primary-50), var(--primary-900) );--blockquote-border-radius: var(--radius-md);--blockquote-accent-width: var(--xs2);--blockquote-accent-color: linear-gradient( var(--primary-800), var(--primary-500) );--hr-content: "";--ins-color: var(--base-950);--ins-background-color: var(--success-200);--marker-color: var(--highlight-500);--selection-color: light-dark(var(--base-950), var(--base-0));--selection-background-color: light-dark( var(--primary-200), var(--primary-700) )}:root{--grid-column-gap: var(--sm1);--grid-row-gap: var(--sm1);@media(width>=768px){--grid-column-gap: var(--sm3);--grid-row-gap: var(--sm3)}--wrap-spacing: var(--sm1);--wrap-md-spacing: var(--sm3);--wrap-lg-spacing: 0;--wrap-width-sm: minmax(0, 55ch);--wrap-width-md: minmax(0, 70ch);--wrap-width-lg: minmax(0, 900px);--wrap-width: var(--wrap-width-md);--layout-content-width: 70ch;--layout-aside-width: 245px;--layout-toc-width: 1fr;--prose-spacing: var(--sm1)}:root{--badge-font-size: var(--text-sm);--badge-border-radius: var(--radius-md);--badge-color: var(--base-0);--badge-background-color: light-dark(var(--base-700), var(--base-600));--badge-primary-color: var(--base-0);--badge-primary-background-color: light-dark( var(--primary-600), var(--primary-500) );--badge-success-color: light-dark(var(--success-500), var(--base-0));--badge-success-background-color: light-dark( var(--success-100), var(--success-500) );--badge-danger-color: light-dark(var(--danger-500), var(--base-0));--badge-danger-background-color: light-dark( var(--danger-100), var(--danger-500) );--badge-warning-color: light-dark(var(--warning-500), var(--base-950));--badge-warning-background-color: light-dark( var(--warning-100), var(--warning-500) )}:root{--bt-min-width: 101px;--bt-min-width-md: 123px;--bt-min-width-lg: 133px;--bt-font-size: var(--text-sm);--bt-font-size-lg: var(--text-md);--bt-font-weight: var(--semi-bold);--bt-color: var(--text-color);--bt-color-hover: light-dark(var(--text-color), var(--base-0));--bt-background-color: light-dark(var(--base-0), var(--base-800));--bt-background-color-hover: light-dark(var(--base-50), var(--base-900));--bt-border-color: var(--ui-border-color);--bt-border-width: var(--border-sm);--bt-border-radius: var(--radius-lg);--bt-border-radius-lg: var(--radius-xl);--bt-outline-color-hover: light-dark(var(--base-950), var(--base-0));--bt-outline-background-color-hover: light-dark( rgb(0 0 0 / .1), rgb(255 255 255 / .1) );--bt-outline-border-color: light-dark(var(--base-950), var(--base-0));--bt-outline-border-color-hover: light-dark(var(--base-950), var(--base-0));--bt-primary-color: var(--base-0);--bt-primary-color-hover: var(--base-0);--bt-primary-background-color: var(--primary-600);--bt-primary-background-color-hover: var(--primary-500);--bt-primary-border-color: var(--primary-600);--bt-primary-border-color-hover: var(--primary-600)}:root{--avatar-color: var(--base-0);--avatar-background-color: var(--base-400);--avatar-border-color: light-dark(var(--base-0), var(--base-500));--avatar-border-width: var(--border-sm);--avatar-radius: var(--radius-round);--avatar-status-dot-color-offline: var(--base-300);--avatar-status-dot-color-online: var(--yes-400)}:root{--banner-color: var(--base-0);--banner-background-color: light-dark( var(--primary-600), var(--primary-800) )}:root{--breadcrumbs-separator: "/";--breadcrumbs-separator-color: light-dark(var(--base-300), var(--base-600));--breadcrumbs-color: light-dark(var(--base-500), var(--base-400));--breadcrumbs-color-current: var(--text-color)}:root{--card-spacing: var(--sm3);--card-color: var(--text-color);--card-secondary-text-color: light-dark(var(--base-400), var(--base-500));--card-bg-color: light-dark(var(--base-100), var(--base-900));--card-border-radius: var(--radius-lg);--card-border-color: var(--ui-border-color);--card-border-width: var(--border-sm);--card-shadow: var(--shadow-md);--card-shadow-hover: var(--shadow-xl);--card-loading-bg: light-dark(var(--base-200), var(--base-900));--card-aspect-ratio: var(--ar-golden)}:root{--toggle-width: 50px;--toggle-height: 28px;--toggle-border-width: 2px;--toggle-track-color: light-dark(var(--base-300), var(--base-700));--toggle-track-color-checked: var(--yes-400);--toggle-thumb-color: var(--body-background-color)}:root{--faq-spacing: var(--xs3)}:root{--field-spacing: var(--xs1);--field-hint-color: light-dark(var(--base-400), var(--base-500));--field-error-color: light-dark(var(--danger-500), var(--danger-300));--field-message-position: static}:root{--featureItem-icon-box-size: var(--lg3);--featureItem-icon-size: var(--sm3);--featureItem-icon-color: light-dark( var(--primary-600), var(--primary-300) );--featureItem-icon-background-color: light-dark( var(--primary-100), var(--primary-900) );--featureItem-icon-border-radius: var(--radius-lg)}:root{--footer-background-color: light-dark(var(--primary-950), var(--base-950));--footer-text-color: light-dark(var(--base-0), var(--base-200));--footer-border-width: var(--border-md);--footer-border-color: light-dark(transparent, var(--base-700));--footer-link-color: light-dark(var(--base-0), var(--base-200));--footer-link-color-hover: light-dark(var(--primary-200), var(--base-0))}:root{--header-height: var(--xl1);--header-padding: var(--sm1);@media(width>=768px){--header-height: var(--xl2);--header-padding: var(--sm3)}--header-background-color: light-dark(var(--base-0), var(--base-950));--header-menu-background-color: var(--base-950);--header-menu-color: var(--base-0);--header-menu-color-current: var(--primary-400);--header-menu-secondary-color: var(--base-300);--header-menu-border-color: var(--base-500)}:root{--hero-radius: var(--radius-xl);--hero-content-padding: var(--md3);--hero-actions-spacing: var(--lg3);--hero-pagination-dot: var(--sm1);--hero-pagination-dot-color: var(--base-0);--hero-pagination-dot-active-color: var(--primary-600);--hero-pagination-opacity: var(--o-4)}:root{--pagination-size: var(--md3);--pagination-border-radius: var(--radius-md);--pagination-color: var(--text-color);--pagination-color-current: var(--base-0);--pagination-background-color-current: light-dark( var(--primary-600), var(--primary-500) );--pagination-background-color-hover: light-dark( var(--base-100), var(--base-800) )}:root{--prevNext-border-color: var(--ui-border-color);--prevNext-border-radius: var(--radius-lg);--prevNext-border-color-hover: var(--link-color);--prevNext-label-color: light-dark(var(--base-400), var(--base-500))}:root{--notice-spacing: var(--sm1);--notice-text-color: light-dark(var(--base-950), var(--base-0));--notice-background-color: light-dark(var(--base-50), var(--base-800));--notice-border-color: light-dark(var(--base-200), var(--base-500));--notice-border-width: var(--border-sm);--notice-border-radius: var(--radius-lg)}:root{--pricingCard-highlight-border-color: light-dark( var(--primary-600), var(--primary-400) );--pricingCard-check-color: light-dark( var(--success-500), var(--success-400) )}:root{--readProgressBar-height: var(--xs1);--readProgressBar-color: linear-gradient( 90deg, var(--primary-600) 0%, var(--primary-400) 100% )}:root{--section-spacing: var(--xl3);--section-header-spacing: var(--lg3);--section-eyebrow-color: light-dark(var(--primary-600), var(--primary-400));--section-lede-color: light-dark(var(--base-500), var(--base-400));--section-filled-background-color: light-dark( var(--base-50), var(--base-900) );--section-primary-background-color: light-dark( var(--primary-600), var(--primary-900) );--section-primary-text-color: var(--base-0);--section-primary-link-color: var(--primary-100);--section-primary-link-color-hover: var(--base-0);--section-primary-eyebrow-color: var(--primary-200);--section-primary-lede-color: var(--primary-100)}:root{--testimonial-role-color: light-dark(var(--base-400), var(--base-500))}:root{--tags-padding: var(--xs2);--tags-font-size: var(--text-sm);--tags-color: light-dark(var(--base-500), var(--base-400));--tags-background-color: light-dark(var(--base-100), var(--base-800));--tags-background-color-hover: light-dark(var(--base-200), var(--base-950));--tags-radius: var(--radius-md)}:root{--toc-color: var(--link-color);--toc-color-hover: var(--link-color-hover);--toc-spacing: var(--xs1);--toc-indentation: var(--xs3);--toc-icon-size: var(--sm1)}} diff --git a/src/styles/framework/theme.default.css b/src/styles/framework/theme.default.css index 62bbbf94..251f9d38 100644 --- a/src/styles/framework/theme.default.css +++ b/src/styles/framework/theme.default.css @@ -19,5 +19,10 @@ entry and overrides on top. */ +/* Pin the layer order before anything else in this file: priority is + set by first declaration, so a theme loaded before mcss.css still + slots correctly. */ +@layer base, elements, global, components, theme.defaults, theme.overrides, helpers; + @import url(./theme.default.tokens.css); @import url(./theme.default.ui.css); diff --git a/src/styles/framework/theme.starter.css b/src/styles/framework/theme.starter.css index 5bfb9ca2..127cd248 100644 --- a/src/styles/framework/theme.starter.css +++ b/src/styles/framework/theme.starter.css @@ -29,6 +29,11 @@ theme and overrides on top instead: see theme.wireframe.css. */ +/* Pin the layer order before declaring into it: priority is set by + first declaration, so this file slots correctly even if it loads + before mcss.css. */ +@layer base, elements, global, components, theme.defaults, theme.overrides, helpers; + @layer theme.overrides { :root { /* A new palette usually gets you 80% of the way: */ diff --git a/src/styles/framework/theme.wireframe.css b/src/styles/framework/theme.wireframe.css index b9619433..986d98f9 100644 --- a/src/styles/framework/theme.wireframe.css +++ b/src/styles/framework/theme.wireframe.css @@ -13,6 +13,11 @@ point (see theme.default.css). */ +/* Pin the layer order before anything else in this file: priority is + set by first declaration, so this skin slots correctly even if it + loads before mcss.css. */ +@layer base, elements, global, components, theme.defaults, theme.overrides, helpers; + @import url(./theme.default.css); /* Registered so it computes on the element that declares it and then From 8c8e73caabea96dae614c84d15d395369f1c57f3 Mon Sep 17 00:00:00 2001 From: Yann Date: Fri, 14 Aug 2026 17:48:01 -0700 Subject: [PATCH 07/37] Default theme parts are layered by their entry, not self-layered The parts aren't standalone themes, they're internal files with one blessed loader, so theme.default.css assigns layer(theme.defaults) on its imports the same way mcss.css layers the structural files, and the part files go back to flat, unwrapped CSS. Only standalone theme files (starter, skins) still self-layer. The dist build pre-wraps the dist copies of the parts so a lone on one still slots correctly. agents/css.md and CLAUDE.md state the refined convention: files a consumer loads directly self-layer; files an entry imports are layered by the entry. Co-Authored-By: Claude Fable 5 --- CLAUDE.md | 2 +- agents/css.md | 2 +- dist/css/theme.default.css | 8 +- dist/css/theme.default.tokens.css | 438 ++--- dist/css/theme.default.ui.css | 1010 ++++++------ dist/mcss.css | 1430 ++++++++--------- dist/mcss.min.css | 2 +- src/styles/framework/theme.default.css | 8 +- src/styles/framework/theme.default.tokens.css | 435 +++-- src/styles/framework/theme.default.ui.css | 1007 ++++++------ src/tools/build-css.mjs | 18 +- 11 files changed, 2174 insertions(+), 2186 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index 2dae42f4..6dc01b6f 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -25,7 +25,7 @@ mCSS is a CSS framework (ITCSS-based) paired with an Astro documentation site, c ## CSS cascade layers are load-bearing -The framework uses native `@layer`; the layer name (declared in `src/styles/framework/mcss.css`) decides priority, and unlayered site CSS beats every layer. Import new framework files with `layer()`, except `theme.*.css` files: those self-layer (`@layer theme.defaults` for the default theme's parts, `@layer theme.overrides` for consumer themes) and are activated from the consumer entry (`_global.css`), never imported by `mcss.css`. Every design value lives in the default theme (`theme.default.css`); the framework does not paint without it. Never re-enable preset-env's `cascade-layers` polyfill in `postcss.config.cjs`. Always consult [agents/css.md](agents/css.md) before adding or moving CSS files. +The framework uses native `@layer`; the layer name (declared in `src/styles/framework/mcss.css`) decides priority, and unlayered site CSS beats every layer. Import new framework files with `layer()`, except standalone `theme.*.css` files (starter, skins): those self-layer via `@layer theme.overrides` and are activated from the consumer entry (`_global.css`), never imported by `mcss.css`. The default theme's parts are plain CSS layered by their entry (`theme.default.css`, with `layer(theme.defaults)`). Every design value lives in the default theme (`theme.default.css`); the framework does not paint without it. Never re-enable preset-env's `cascade-layers` polyfill in `postcss.config.cjs`. Always consult [agents/css.md](agents/css.md) before adding or moving CSS files. ## Detailed reference docs diff --git a/agents/css.md b/agents/css.md index 7f4ceb66..3da3d45e 100644 --- a/agents/css.md +++ b/agents/css.md @@ -12,7 +12,7 @@ mCSS uses **native CSS cascade layers** (`@layer`) on top of an ITCSS-inspired f `base, elements, global, components, theme.defaults, theme.overrides, helpers` The order runs **from default to deliberate**: `base` through `components` are the framework's structure, `theme.defaults` holds the default theme's design values, `theme.overrides` holds the consumer's deliberate deviations, helpers are the last word. (Not "generic to specific": a theme is broad in reach but late in intent, and intent decides cascade order.) 2. **Unlayered CSS beats every layer for normal declarations.** That's the consumer guarantee ("your CSS wins") and why site CSS is unlayered. -3. **Every design value lives in the default theme** (`theme.default.css` entry importing `theme.default.tokens.css` + `theme.default.ui.css`, self-layered into `theme.defaults`). It is **never imported by `mcss.css`**; the consumer entry activates it right after `mcss.css` (see `_global.css`), and the framework does not paint without it. A consumer theme (self-layered into `theme.overrides`, see `theme.starter.css`) beats the default regardless of import order; a full skin like `theme.wireframe.css` is an entry that composes `theme.default.css` and overrides on top. Activate exactly one theme entry. Unlayered consumer CSS still beats all themes. +3. **Every design value lives in the default theme** (`theme.default.css` entry importing `theme.default.tokens.css` + `theme.default.ui.css` with `layer(theme.defaults)`; the parts are plain CSS, the entry assigns their layer, and the dist build pre-wraps the dist copies for lone `` use). It is **never imported by `mcss.css`**; the consumer entry activates it right after `mcss.css` (see `_global.css`), and the framework does not paint without it. A consumer theme (self-layered into `theme.overrides`, see `theme.starter.css`) beats the default regardless of import order; a full skin like `theme.wireframe.css` is an entry that composes `theme.default.css` and overrides on top. Activate exactly one theme entry. Unlayered consumer CSS still beats all themes. 4. **Helpers are the exception: every helper declaration carries `!important`.** Important layered declarations beat unlayered CSS (the cascade inverts for important), so helpers win over site and consumer CSS too. They're element-level overrides, like inline styling. For important declarations layer order also inverts (earlier layer wins), which is why the reduced-motion block in `base.reset.css` still beats helpers. 5. `!important` is REQUIRED in every helper declaration and banned everywhere else in the framework, except the reduced-motion block in `base.reset.css` and third-party override files (see `site/external.astro.css`). `help.colors.css` and `help.spacing.css` get it from their generators. 6. `postcss.config.cjs` disables preset-env's `cascade-layers` polyfill. **Never remove that option** — the polyfill strips every `@layer` rule and silently replaces the cascade with specificity hacks. The browser floor is set in `.browserslistrc` (`defaults and supports css-cascade-layers`). diff --git a/dist/css/theme.default.css b/dist/css/theme.default.css index cb8423c6..0aa54588 100644 --- a/dist/css/theme.default.css +++ b/dist/css/theme.default.css @@ -25,5 +25,9 @@ slots correctly. */ @layer base, elements, global, components, theme.defaults, theme.overrides, helpers; -@import url(./theme.default.tokens.css); -@import url(./theme.default.ui.css); +/* The parts are plain CSS; this entry assigns their layer, the same way + mcss.css layers the structural files. (Only standalone theme files + self-layer; in dist/css the parts are pre-wrapped so a lone + still works.) */ +@import url(./theme.default.tokens.css) layer(theme.defaults); +@import url(./theme.default.ui.css) layer(theme.defaults); diff --git a/dist/css/theme.default.tokens.css b/dist/css/theme.default.tokens.css index d1b9df5b..393dccb4 100644 --- a/dist/css/theme.default.tokens.css +++ b/dist/css/theme.default.tokens.css @@ -24,6 +24,7 @@ xxl: 1920px /* truncate single line of text and adds … */ +@layer theme.defaults { /* DEFAULT THEME: TOKENS */ /* @@ -36,8 +37,7 @@ xxl: 1920px xxs: 240px xs: 360px sm: 480px md: 768px lg: 1024px xl: 1440px xxl: 1920px */ -@layer theme.defaults { - /* +/* • Dimensions (Margin, Padding, Width, Height) • Aspect Ratios @@ -57,224 +57,224 @@ xxl: 1920px • Opacity */ - :root { - /* GLOBALS */ - - /* DIMENSIONS */ - - /* Sizes */ - - --xs1: 4px; - --xs2: 8px; - --xs3: 12px; - - --sm1: 16px; - --sm2: 20px; - --sm3: 24px; - - --md1: 28px; - --md2: 32px; - --md3: 36px; - - --lg1: 40px; - --lg2: 44px; - --lg3: 48px; - - --xl1: 56px; - --xl2: 64px; - --xl3: 80px; - - --xxl1: 96px; - --xxl2: 112px; - --xxl3: 128px; - - --mega1: 160px; - --mega2: 192px; - --mega3: 224px; - - --giga1: 256px; - --giga2: 288px; - --giga3: 320px; - - --tera1: 384px; - --tera2: 480px; - --tera3: 520px; - - /* Aspect Ratios */ - --ar-square: 1; - --ar-landscape: 4/3; - --ar-portrait: 3/4; - --ar-widescreen: 16/9; - --ar-golden: 1.618/1; - - /* TYPOGRAPHY */ - /* See also elements.text & help.text */ - - /* Font Families */ - /* Local font stacks - More options @ https://modernfontstacks.com */ - --display: - Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, ui-sans-serif, - sans-serif; - --text: ui-sans-serif, system-ui, sans-serif; - --mono: - Dank Mono, Inconsolata, Fira Mono, SF Mono, Monaco, Droid Sans Mono, - Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, - ui-monospace, monospace; - - /* Font Sizes */ - /* Create your own sizes @ https://typescale.com */ - --text-xs: 0.694rem; - --text-sm: 0.833rem; - --text-md: 1rem; - --text-lg: 1.2rem; - --text-xl: 1.44rem; - --display-sm: 1.728rem; - --display-md: 2.074rem; - --display-lg: 2.488rem; - --display-xl: 2.986rem; /* h1 */ - --display-mega: 3.583rem; - --display-giga: 4.299rem; - - /* Heading font sizes are decisions, not scale steps: they map each +:root { + /* GLOBALS */ + + /* DIMENSIONS */ + + /* Sizes */ + + --xs1: 4px; + --xs2: 8px; + --xs3: 12px; + + --sm1: 16px; + --sm2: 20px; + --sm3: 24px; + + --md1: 28px; + --md2: 32px; + --md3: 36px; + + --lg1: 40px; + --lg2: 44px; + --lg3: 48px; + + --xl1: 56px; + --xl2: 64px; + --xl3: 80px; + + --xxl1: 96px; + --xxl2: 112px; + --xxl3: 128px; + + --mega1: 160px; + --mega2: 192px; + --mega3: 224px; + + --giga1: 256px; + --giga2: 288px; + --giga3: 320px; + + --tera1: 384px; + --tera2: 480px; + --tera3: 520px; + + /* Aspect Ratios */ + --ar-square: 1; + --ar-landscape: 4/3; + --ar-portrait: 3/4; + --ar-widescreen: 16/9; + --ar-golden: 1.618/1; + + /* TYPOGRAPHY */ + /* See also elements.text & help.text */ + + /* Font Families */ + /* Local font stacks - More options @ https://modernfontstacks.com */ + --display: + Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, ui-sans-serif, + sans-serif; + --text: ui-sans-serif, system-ui, sans-serif; + --mono: + Dank Mono, Inconsolata, Fira Mono, SF Mono, Monaco, Droid Sans Mono, + Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, + ui-monospace, monospace; + + /* Font Sizes */ + /* Create your own sizes @ https://typescale.com */ + --text-xs: 0.694rem; + --text-sm: 0.833rem; + --text-md: 1rem; + --text-lg: 1.2rem; + --text-xl: 1.44rem; + --display-sm: 1.728rem; + --display-md: 2.074rem; + --display-lg: 2.488rem; + --display-xl: 2.986rem; /* h1 */ + --display-mega: 3.583rem; + --display-giga: 4.299rem; + + /* Heading font sizes are decisions, not scale steps: they map each heading level onto this scale. See --heading-font-size-* in theme.default.ui.css. */ - /* Font Weights */ - --extra-light: 200; - --light: 300; - --book: 400; - --semi-bold: 600; - --bold: 700; - --black: 900; - - /* Letter Spacing */ - --tracking-sm: -0.05em; - --tracking-md: 0.025em; - --tracking-lg: 0.05em; - --tracking-xl: 0.075em; - --tracking-xxl: 0.15em; - - /* Line Height */ - --leading-xs: 1; - --leading-sm: 1.15; - --leading-md: 1.375; - --leading-lg: 1.5; - --leading-xl: 1.75; - --leading-xxl: 2; - - /* COLORS */ - /* Make your own palettes programmatically: https://www.tints.dev */ - - /* Base */ - - --base-0: #fff; - --base-50: #f6f7f9; - --base-100: #edeef1; - --base-200: #d6dbe1; - --base-300: #b2bbc7; - --base-400: #8897a8; - --base-500: #697a8e; - --base-600: #546375; - --base-700: #4a5666; - --base-800: #3c4550; - --base-900: #353c45; - --base-950: #23282e; - - /* Primary */ - - --primary-50: #f0f9ff; - --primary-100: #e0f2fe; - --primary-200: #bae6fd; - --primary-300: #7dd3fc; - --primary-400: #38bdf8; - --primary-500: #0ea5e9; - --primary-600: #0284c7; - --primary-700: #0369a1; - --primary-800: #075985; - --primary-900: #0c4a6e; - --primary-950: #082f49; - - /* Secondary and/or Highlight goes here */ - - /* Feedback */ - - --yes-100: #d5f6e8; - --yes-200: #afebd4; - --yes-300: #7adbbd; - --yes-400: #46c4a0; - --yes-500: #13886d; - - --no-100: #ffe4e6; - --no-200: #fecdd3; - --no-300: #fda4af; - --no-400: #fb7185; - --no-500: #e11d48; - - --maybe-100: #fff7d6; - --maybe-200: #fff0b3; - --maybe-300: #ffd64a; - --maybe-400: #ffc220; - --maybe-500: #f9a007; - - /* Highlight (text marker) */ - - --highlight-500: #ffee00; - - /* BORDERS */ - - --border-sm: 1px; - --border-md: 2px; - --border-lg: 4px; - --border-xl: 8px; - --border-xxl: 12px; - - --radius-sm: 3px; - --radius-md: 5px; - --radius-lg: 8px; - --radius-xl: 12px; - --radius-xxl: 16px; - --radius-round: 1e5px; - - /* DROP SHADOWS */ - - --shadow-sm: - 0 1px 3px 0 var(--ui-shadow-color), 0 1px 2px -1px var(--ui-shadow-color); - --shadow-md: - 0 4px 6px -1px var(--ui-shadow-color), - 0 2px 4px -2px var(--ui-shadow-color); - --shadow-lg: - 0 8px 13px -3px var(--ui-shadow-color), - 0 4px 6px -4px var(--ui-shadow-color); - --shadow-xl: - 0 20px 20px -5px var(--ui-shadow-color), - 0 8px 10px -6px var(--ui-shadow-color); - --shadow-xxl: - 0px 11px 8px -6px var(--ui-shadow-color), - 0 10px 15px 2px var(--ui-shadow-color); - - /* OPACITY */ - - --o-0: 0; /* overkill for consistency */ - --o-1: 0.2; - --o-2: 0.4; - --o-3: 0.6; - --o-4: 0.8; - --o-5: 1; - - /* Z-INDEX */ - - --z-bottom: -1000000000; - --z-0: 0; /* overkill for consistency */ - --z-1: 10; - --z-2: 20; - --z-3: 30; - --z-4: 40; - --z-5: 50; - --z-top: 1000000000; - - /* TRANSITIONS */ - - --transition: 220ms ease-in-out; - --transition-fast: 100ms ease-in-out; - } + /* Font Weights */ + --extra-light: 200; + --light: 300; + --book: 400; + --semi-bold: 600; + --bold: 700; + --black: 900; + + /* Letter Spacing */ + --tracking-sm: -0.05em; + --tracking-md: 0.025em; + --tracking-lg: 0.05em; + --tracking-xl: 0.075em; + --tracking-xxl: 0.15em; + + /* Line Height */ + --leading-xs: 1; + --leading-sm: 1.15; + --leading-md: 1.375; + --leading-lg: 1.5; + --leading-xl: 1.75; + --leading-xxl: 2; + + /* COLORS */ + /* Make your own palettes programmatically: https://www.tints.dev */ + + /* Base */ + + --base-0: #fff; + --base-50: #f6f7f9; + --base-100: #edeef1; + --base-200: #d6dbe1; + --base-300: #b2bbc7; + --base-400: #8897a8; + --base-500: #697a8e; + --base-600: #546375; + --base-700: #4a5666; + --base-800: #3c4550; + --base-900: #353c45; + --base-950: #23282e; + + /* Primary */ + + --primary-50: #f0f9ff; + --primary-100: #e0f2fe; + --primary-200: #bae6fd; + --primary-300: #7dd3fc; + --primary-400: #38bdf8; + --primary-500: #0ea5e9; + --primary-600: #0284c7; + --primary-700: #0369a1; + --primary-800: #075985; + --primary-900: #0c4a6e; + --primary-950: #082f49; + + /* Secondary and/or Highlight goes here */ + + /* Feedback */ + + --yes-100: #d5f6e8; + --yes-200: #afebd4; + --yes-300: #7adbbd; + --yes-400: #46c4a0; + --yes-500: #13886d; + + --no-100: #ffe4e6; + --no-200: #fecdd3; + --no-300: #fda4af; + --no-400: #fb7185; + --no-500: #e11d48; + + --maybe-100: #fff7d6; + --maybe-200: #fff0b3; + --maybe-300: #ffd64a; + --maybe-400: #ffc220; + --maybe-500: #f9a007; + + /* Highlight (text marker) */ + + --highlight-500: #ffee00; + + /* BORDERS */ + + --border-sm: 1px; + --border-md: 2px; + --border-lg: 4px; + --border-xl: 8px; + --border-xxl: 12px; + + --radius-sm: 3px; + --radius-md: 5px; + --radius-lg: 8px; + --radius-xl: 12px; + --radius-xxl: 16px; + --radius-round: 1e5px; + + /* DROP SHADOWS */ + + --shadow-sm: + 0 1px 3px 0 var(--ui-shadow-color), 0 1px 2px -1px var(--ui-shadow-color); + --shadow-md: + 0 4px 6px -1px var(--ui-shadow-color), 0 2px 4px -2px var(--ui-shadow-color); + --shadow-lg: + 0 8px 13px -3px var(--ui-shadow-color), + 0 4px 6px -4px var(--ui-shadow-color); + --shadow-xl: + 0 20px 20px -5px var(--ui-shadow-color), + 0 8px 10px -6px var(--ui-shadow-color); + --shadow-xxl: + 0px 11px 8px -6px var(--ui-shadow-color), + 0 10px 15px 2px var(--ui-shadow-color); + + /* OPACITY */ + + --o-0: 0; /* overkill for consistency */ + --o-1: 0.2; + --o-2: 0.4; + --o-3: 0.6; + --o-4: 0.8; + --o-5: 1; + + /* Z-INDEX */ + + --z-bottom: -1000000000; + --z-0: 0; /* overkill for consistency */ + --z-1: 10; + --z-2: 20; + --z-3: 30; + --z-4: 40; + --z-5: 50; + --z-top: 1000000000; + + /* TRANSITIONS */ + + --transition: 220ms ease-in-out; + --transition-fast: 100ms ease-in-out; +} + } diff --git a/dist/css/theme.default.ui.css b/dist/css/theme.default.ui.css index b329b117..6eb424d3 100644 --- a/dist/css/theme.default.ui.css +++ b/dist/css/theme.default.ui.css @@ -24,6 +24,7 @@ xxl: 1920px /* truncate single line of text and adds … */ +@layer theme.defaults { /* DEFAULT THEME: UI */ /* @@ -49,582 +50,573 @@ xxl: 1920px override from your own theme (see theme.starter.css). */ -@layer theme.defaults { - :root { - /* Color scheme (light/dark), toggled by the .theme-light / .theme-dark +:root { + /* Color scheme (light/dark), toggled by the .theme-light / .theme-dark classes below. Unrelated to theme files, which are full themes. */ - color-scheme: light dark; + color-scheme: light dark; - --ui-border-color: light-dark(var(--base-200), var(--base-500)); - /* Also consumed by the --shadow-* scale in theme.default.tokens.css: + --ui-border-color: light-dark(var(--base-200), var(--base-500)); + /* Also consumed by the --shadow-* scale in theme.default.tokens.css: the one reference between the files that runs upward, so shadows can switch with the color scheme. Raw alpha colors: the palettes have no alpha steps. */ - --ui-shadow-color: light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.6)); + --ui-shadow-color: light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.6)); - /* Keyboard focus ring (consumed by :focus-visible in global.a11y.css). + /* Keyboard focus ring (consumed by :focus-visible in global.a11y.css). Raw 2px on purpose: an accessibility affordance that shouldn't move when a theme retunes the decorative border scale. */ - --focus-ring-color: light-dark(var(--primary-500), var(--primary-400)); - --focus-ring-width: 2px; - --focus-ring-offset: 2px; + --focus-ring-color: light-dark(var(--primary-500), var(--primary-400)); + --focus-ring-width: 2px; + --focus-ring-offset: 2px; - /* Semantic feedback aliases over the raw feedback palettes. + /* Semantic feedback aliases over the raw feedback palettes. Prefer these in components and themes; a theme can restyle feedback by overriding the aliases without touching the raw scales. */ - --success-100: var(--yes-100); - --success-200: var(--yes-200); - --success-300: var(--yes-300); - --success-400: var(--yes-400); - --success-500: var(--yes-500); - --danger-100: var(--no-100); - --danger-200: var(--no-200); - --danger-300: var(--no-300); - --danger-400: var(--no-400); - --danger-500: var(--no-500); - --warning-100: var(--maybe-100); - --warning-200: var(--maybe-200); - --warning-300: var(--maybe-300); - --warning-400: var(--maybe-400); - --warning-500: var(--maybe-500); - } + --success-100: var(--yes-100); + --success-200: var(--yes-200); + --success-300: var(--yes-300); + --success-400: var(--yes-400); + --success-500: var(--yes-500); + --danger-100: var(--no-100); + --danger-200: var(--no-200); + --danger-300: var(--no-300); + --danger-400: var(--no-400); + --danger-500: var(--no-500); + --warning-100: var(--maybe-100); + --warning-200: var(--maybe-200); + --warning-300: var(--maybe-300); + --warning-400: var(--maybe-400); + --warning-500: var(--maybe-500); +} - :root.theme-light { - color-scheme: light; - } +:root.theme-light { + color-scheme: light; +} - :root.theme-dark { - color-scheme: dark; - } +:root.theme-dark { + color-scheme: dark; +} - /* HTML ELEMENTS */ +/* HTML ELEMENTS */ - :root { - accent-color: var(--primary-500); +:root { + accent-color: var(--primary-500); - --body-background-color: light-dark(var(--base-0), var(--base-950)); - --body-line-height: var(--leading-lg); + --body-background-color: light-dark(var(--base-0), var(--base-950)); + --body-line-height: var(--leading-lg); - --input-height: var(--md3); - --input-padding: var(--xs3); - --input-border-width: var(--border-sm); - --input-border-color: var(--ui-border-color); - --input-border-radius: var(--radius-md); - --input-border-color-invalid: light-dark( - var(--danger-500), - var(--danger-400) - ); + --input-height: var(--md3); + --input-padding: var(--xs3); + --input-border-width: var(--border-sm); + --input-border-color: var(--ui-border-color); + --input-border-radius: var(--radius-md); + --input-border-color-invalid: light-dark( + var(--danger-500), + var(--danger-400) + ); - /* Gap under a label that precedes its control */ - --label-spacing: var(--xs1); + /* Gap under a label that precedes its control */ + --label-spacing: var(--xs1); - --fieldset-padding: var(--sm3); - --fieldset-border-width: var(--border-sm); - --fieldset-border-color: var(--ui-border-color); - --fieldset-border-radius: var(--radius-lg); + --fieldset-padding: var(--sm3); + --fieldset-border-width: var(--border-sm); + --fieldset-border-color: var(--ui-border-color); + --fieldset-border-radius: var(--radius-lg); - /* meter: low/medium/high map to the even-less-good, suboptimum, and + /* meter: low/medium/high map to the even-less-good, suboptimum, and optimum pseudo-elements */ - --meter-height: var(--sm1); - --meter-border-radius: var(--radius-md); - --meter-track-color: var(--primary-100); - --meter-low-color: var(--danger-400); - --meter-medium-color: var(--warning-400); - --meter-high-color: var(--success-400); - - --progress-height: var(--sm1); - --progress-color: var(--primary-500); - --progress-track-color: var(--primary-100); - --progress-border-radius: var(--radius-md); - - /* select's chevron, applied as a mask painted with the text color; + --meter-height: var(--sm1); + --meter-border-radius: var(--radius-md); + --meter-track-color: var(--primary-100); + --meter-low-color: var(--danger-400); + --meter-medium-color: var(--warning-400); + --meter-high-color: var(--success-400); + + --progress-height: var(--sm1); + --progress-color: var(--primary-500); + --progress-track-color: var(--primary-100); + --progress-border-radius: var(--radius-md); + + /* select's chevron, applied as a mask painted with the text color; any url() works here, data URL or file */ - --select-icon-size: var(--sm3); - --select-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E"); - - --dialog-min-width: var(--tera1); - --dialog-max-width: var(--tera3); - --dialog-padding: var(--lg1) var(--md1); - --dialog-border-width: var(--border-sm); - --dialog-border-color: light-dark(var(--base-200), var(--base-800)); - --dialog-background-color: light-dark(var(--base-50), var(--base-900)); - --dialog-border-radius: var(--radius-lg); - --dialog-backdrop-color: var(--base-950); - --dialog-backdrop-opacity: var(--o-4); - - /* details: same surface as dialog by default, on purpose but + --select-icon-size: var(--sm3); + --select-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E"); + + --dialog-min-width: var(--tera1); + --dialog-max-width: var(--tera3); + --dialog-padding: var(--lg1) var(--md1); + --dialog-border-width: var(--border-sm); + --dialog-border-color: light-dark(var(--base-200), var(--base-800)); + --dialog-background-color: light-dark(var(--base-50), var(--base-900)); + --dialog-border-radius: var(--radius-lg); + --dialog-backdrop-color: var(--base-950); + --dialog-backdrop-opacity: var(--o-4); + + /* details: same surface as dialog by default, on purpose but independently overridable. Spacing is the gap between an open summary and its content. */ - --details-padding: var(--sm1); - --details-spacing: var(--xs3); - --details-border-width: var(--border-sm); - --details-border-color: light-dark(var(--base-200), var(--base-800)); - --details-background-color: light-dark(var(--base-50), var(--base-900)); - --details-border-radius: var(--radius-lg); - --details-icon-size: var(--sm3); - /* Marker icon, applied as a mask painted with the text color; any + --details-padding: var(--sm1); + --details-spacing: var(--xs3); + --details-border-width: var(--border-sm); + --details-border-color: light-dark(var(--base-200), var(--base-800)); + --details-background-color: light-dark(var(--base-50), var(--base-900)); + --details-border-radius: var(--radius-lg); + --details-icon-size: var(--sm3); + /* Marker icon, applied as a mask painted with the text color; any url() works here, data URL or file */ - --details-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E"); - - --table-padding: var(--xs2) var(--sm1); - --table-border-width: var(--border-sm); - --table-border-color: light-dark(var(--base-100), var(--base-700)); - --table-border-radius: var(--radius-md); - --table-background-color: none; - /* Gap between the table and its caption */ - --table-caption-spacing: var(--xs3); - /* Gap between a figure's content and caption on either side */ - --figcaption-spacing: var(--xs2); - - /* Text */ - - --heading-font: var(--display); - --heading-weight: var(--black); - --heading-letter-spacing: normal; /* (e.g. -0.02em or var(--tracking-sm)) */ - - --heading-font-size-h1: clamp( - var(--display-md), - 1.269rem + 2.682vw, - var(--display-xl) - ); /* 2.074rem → 2.986rem */ - --heading-font-size-h2: clamp( - var(--display-sm), - 1.057rem + 2.235vw, - var(--display-lg) - ); /* 1.728rem → 2.488rem */ - --heading-font-size-h3: clamp( - var(--text-xl), - 0.881rem + 1.865vw, - var(--display-md) - ); /* 1.44rem → 2.074rem */ - --heading-font-size-h4: clamp( - var(--text-lg), - 0.734rem + 1.553vw, - var(--display-sm) - ); /* 1.2rem → 1.728rem */ - --heading-font-size-h5: clamp( - var(--text-lg), - 0.988rem + 0.706vw, - var(--text-xl) - ); /* 1.2rem → 1.44rem */ - --heading-font-size-h6: clamp( - var(--text-md), - 0.824rem + 0.588vw, - var(--text-lg) - ); /* 1rem → 1.2rem */ - - --heading-line-height: var(--leading-sm); - --heading-line-height-h1: var(--heading-line-height); - --heading-line-height-h2: var(--heading-line-height); - --heading-line-height-h3: var(--heading-line-height); - --heading-line-height-h4: var(--leading-md); - --heading-line-height-h5: var(--leading-md); - --heading-line-height-h6: var(--leading-md); - - /* Headings bottom margin */ - --heading-spacing-h1: 0.4em; - --heading-spacing-h2: 0.4em; - --heading-spacing-h3: 0.4em; - --heading-spacing-h4: 0.4em; - --heading-spacing-h5: 0.4em; - --heading-spacing-h6: 0.4em; - /* Any h1 before h2, h2 before h3, h3 before h4. */ - --heading-spacing-consecutive: 0.3em; - - --text-color: light-dark(var(--base-950), var(--base-200)); - --link-font-weight: var(--semi-bold); - --link-color: light-dark(var(--primary-600), var(--primary-400)); - --link-color-hover: var(--primary-500); - - --text-code-color: light-dark(var(--primary-600), var(--primary-400)); - --text-code-background-color: light-dark( - var(--primary-100), - var(--primary-900) - ); - /* when code inline styling doesn't apply (inside headings and pre) */ - --text-code-muted-color: light-dark(var(--base-500), var(--base-300)); - - --pre-border-radius: var(--radius-md); - /* matching the 0.9em of inline code */ - --pre-font-size: 0.9rem; - - --blockquote-padding-block: var(--sm1); - --blockquote-padding-inline: var(--md1) var(--sm3); - --blockquote-background-color: light-dark( - var(--primary-50), - var(--primary-900) - ); - --blockquote-border-radius: var(--radius-md); - --blockquote-accent-width: var(--xs2); - --blockquote-accent-color: linear-gradient( - var(--primary-800), - var(--primary-500) - ); - - /* .prose related stuff in GLOBAL */ - - /* Optional centered label on
, e.g. "***" or a dingbat */ - --hr-content: ""; - - /* ins: background stays light in both light/dark modes */ - --ins-color: var(--base-950); - --ins-background-color: var(--success-200); - - --marker-color: var(--highlight-500); - - --selection-color: light-dark(var(--base-950), var(--base-0)); - --selection-background-color: light-dark( - var(--primary-200), - var(--primary-700) - ); - } + --details-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E"); + + --table-padding: var(--xs2) var(--sm1); + --table-border-width: var(--border-sm); + --table-border-color: light-dark(var(--base-100), var(--base-700)); + --table-border-radius: var(--radius-md); + --table-background-color: none; + /* Gap between the table and its caption */ + --table-caption-spacing: var(--xs3); + /* Gap between a figure's content and caption on either side */ + --figcaption-spacing: var(--xs2); + + /* Text */ + + --heading-font: var(--display); + --heading-weight: var(--black); + --heading-letter-spacing: normal; /* (e.g. -0.02em or var(--tracking-sm)) */ + + --heading-font-size-h1: clamp( + var(--display-md), + 1.269rem + 2.682vw, + var(--display-xl) + ); /* 2.074rem → 2.986rem */ + --heading-font-size-h2: clamp( + var(--display-sm), + 1.057rem + 2.235vw, + var(--display-lg) + ); /* 1.728rem → 2.488rem */ + --heading-font-size-h3: clamp( + var(--text-xl), + 0.881rem + 1.865vw, + var(--display-md) + ); /* 1.44rem → 2.074rem */ + --heading-font-size-h4: clamp( + var(--text-lg), + 0.734rem + 1.553vw, + var(--display-sm) + ); /* 1.2rem → 1.728rem */ + --heading-font-size-h5: clamp( + var(--text-lg), + 0.988rem + 0.706vw, + var(--text-xl) + ); /* 1.2rem → 1.44rem */ + --heading-font-size-h6: clamp( + var(--text-md), + 0.824rem + 0.588vw, + var(--text-lg) + ); /* 1rem → 1.2rem */ + + --heading-line-height: var(--leading-sm); + --heading-line-height-h1: var(--heading-line-height); + --heading-line-height-h2: var(--heading-line-height); + --heading-line-height-h3: var(--heading-line-height); + --heading-line-height-h4: var(--leading-md); + --heading-line-height-h5: var(--leading-md); + --heading-line-height-h6: var(--leading-md); + + /* Headings bottom margin */ + --heading-spacing-h1: 0.4em; + --heading-spacing-h2: 0.4em; + --heading-spacing-h3: 0.4em; + --heading-spacing-h4: 0.4em; + --heading-spacing-h5: 0.4em; + --heading-spacing-h6: 0.4em; + /* Any h1 before h2, h2 before h3, h3 before h4. */ + --heading-spacing-consecutive: 0.3em; + + --text-color: light-dark(var(--base-950), var(--base-200)); + --link-font-weight: var(--semi-bold); + --link-color: light-dark(var(--primary-600), var(--primary-400)); + --link-color-hover: var(--primary-500); + + --text-code-color: light-dark(var(--primary-600), var(--primary-400)); + --text-code-background-color: light-dark( + var(--primary-100), + var(--primary-900) + ); + /* when code inline styling doesn't apply (inside headings and pre) */ + --text-code-muted-color: light-dark(var(--base-500), var(--base-300)); + + --pre-border-radius: var(--radius-md); + /* matching the 0.9em of inline code */ + --pre-font-size: 0.9rem; + + --blockquote-padding-block: var(--sm1); + --blockquote-padding-inline: var(--md1) var(--sm3); + --blockquote-background-color: light-dark( + var(--primary-50), + var(--primary-900) + ); + --blockquote-border-radius: var(--radius-md); + --blockquote-accent-width: var(--xs2); + --blockquote-accent-color: linear-gradient( + var(--primary-800), + var(--primary-500) + ); + + /* .prose related stuff in GLOBAL */ + + /* Optional centered label on
, e.g. "***" or a dingbat */ + --hr-content: ""; + + /* ins: background stays light in both light/dark modes */ + --ins-color: var(--base-950); + --ins-background-color: var(--success-200); + + --marker-color: var(--highlight-500); + + --selection-color: light-dark(var(--base-950), var(--base-0)); + --selection-background-color: light-dark( + var(--primary-200), + var(--primary-700) + ); +} - /* GLOBAL */ - - :root { - /* Mobile-first: tighter gutters on small screens, 24px from --md up */ - --grid-column-gap: var(--sm1); - --grid-row-gap: var(--sm1); - @media (width >= 768px) { - --grid-column-gap: var(--sm3); - --grid-row-gap: var(--sm3); - } - - --wrap-spacing: var(--sm1); - --wrap-md-spacing: var(--sm3); - --wrap-lg-spacing: 0; - /* Widths are measures: ch tracks the text size, so raw on purpose. */ - --wrap-width-sm: minmax(0, 55ch); - --wrap-width-md: minmax(0, 70ch); - --wrap-width-lg: minmax(0, 900px); - --wrap-width: var(--wrap-width-md); - - --layout-content-width: 70ch; - --layout-aside-width: 245px; - --layout-toc-width: 1fr; - - --prose-spacing: var(--sm1); - } +/* GLOBAL */ - /* COMPONENTS */ - - /* Badge */ - - :root { - --badge-font-size: var(--text-sm); - --badge-border-radius: var(--radius-md); - --badge-color: var(--base-0); - --badge-background-color: light-dark(var(--base-700), var(--base-600)); - - --badge-primary-color: var(--base-0); - --badge-primary-background-color: light-dark( - var(--primary-600), - var(--primary-500) - ); - --badge-success-color: light-dark(var(--success-500), var(--base-0)); - --badge-success-background-color: light-dark( - var(--success-100), - var(--success-500) - ); - --badge-danger-color: light-dark(var(--danger-500), var(--base-0)); - --badge-danger-background-color: light-dark( - var(--danger-100), - var(--danger-500) - ); - --badge-warning-color: light-dark(var(--warning-500), var(--base-950)); - --badge-warning-background-color: light-dark( - var(--warning-100), - var(--warning-500) - ); +:root { + /* Mobile-first: tighter gutters on small screens, 24px from --md up */ + --grid-column-gap: var(--sm1); + --grid-row-gap: var(--sm1); + @media (width >= 768px) { + --grid-column-gap: var(--sm3); + --grid-row-gap: var(--sm3); } - /* Button */ - /* (Button defaults and primary button colors) */ - - :root { - /* Optical minimums, deliberately off the spacing scale */ - --bt-min-width: 101px; - --bt-min-width-md: 123px; - --bt-min-width-lg: 133px; - - --bt-font-size: var(--text-sm); - --bt-font-size-lg: var(--text-md); - --bt-font-weight: var(--semi-bold); - - --bt-color: var(--text-color); - --bt-color-hover: light-dark(var(--text-color), var(--base-0)); - - --bt-background-color: light-dark(var(--base-0), var(--base-800)); - --bt-background-color-hover: light-dark(var(--base-50), var(--base-900)); - - --bt-border-color: var(--ui-border-color); - --bt-border-width: var(--border-sm); - --bt-border-radius: var(--radius-lg); - --bt-border-radius-lg: var(--radius-xl); - - --bt-outline-color-hover: light-dark(var(--base-950), var(--base-0)); - --bt-outline-background-color-hover: light-dark( - rgb(0 0 0 / 0.1), - rgb(255 255 255 / 0.1) - ); - --bt-outline-border-color: light-dark(var(--base-950), var(--base-0)); - --bt-outline-border-color-hover: light-dark(var(--base-950), var(--base-0)); - - --bt-primary-color: var(--base-0); - --bt-primary-color-hover: var(--base-0); - --bt-primary-background-color: var(--primary-600); - --bt-primary-background-color-hover: var(--primary-500); - --bt-primary-border-color: var(--primary-600); - --bt-primary-border-color-hover: var(--primary-600); - } + --wrap-spacing: var(--sm1); + --wrap-md-spacing: var(--sm3); + --wrap-lg-spacing: 0; + /* Widths are measures: ch tracks the text size, so raw on purpose. */ + --wrap-width-sm: minmax(0, 55ch); + --wrap-width-md: minmax(0, 70ch); + --wrap-width-lg: minmax(0, 900px); + --wrap-width: var(--wrap-width-md); - /* Avatar */ + --layout-content-width: 70ch; + --layout-aside-width: 245px; + --layout-toc-width: 1fr; - :root { - --avatar-color: var(--base-0); - --avatar-background-color: var(--base-400); - --avatar-border-color: light-dark(var(--base-0), var(--base-500)); - --avatar-border-width: var(--border-sm); - --avatar-radius: var(--radius-round); - --avatar-status-dot-color-offline: var(--base-300); - --avatar-status-dot-color-online: var(--yes-400); - } + --prose-spacing: var(--sm1); +} - /* Banner */ +/* COMPONENTS */ + +/* Badge */ + +:root { + --badge-font-size: var(--text-sm); + --badge-border-radius: var(--radius-md); + --badge-color: var(--base-0); + --badge-background-color: light-dark(var(--base-700), var(--base-600)); + + --badge-primary-color: var(--base-0); + --badge-primary-background-color: light-dark( + var(--primary-600), + var(--primary-500) + ); + --badge-success-color: light-dark(var(--success-500), var(--base-0)); + --badge-success-background-color: light-dark( + var(--success-100), + var(--success-500) + ); + --badge-danger-color: light-dark(var(--danger-500), var(--base-0)); + --badge-danger-background-color: light-dark( + var(--danger-100), + var(--danger-500) + ); + --badge-warning-color: light-dark(var(--warning-500), var(--base-950)); + --badge-warning-background-color: light-dark( + var(--warning-100), + var(--warning-500) + ); +} - :root { - --banner-color: var(--base-0); - --banner-background-color: light-dark( - var(--primary-600), - var(--primary-800) - ); - } +/* Button */ +/* (Button defaults and primary button colors) */ + +:root { + /* Optical minimums, deliberately off the spacing scale */ + --bt-min-width: 101px; + --bt-min-width-md: 123px; + --bt-min-width-lg: 133px; + + --bt-font-size: var(--text-sm); + --bt-font-size-lg: var(--text-md); + --bt-font-weight: var(--semi-bold); + + --bt-color: var(--text-color); + --bt-color-hover: light-dark(var(--text-color), var(--base-0)); + + --bt-background-color: light-dark(var(--base-0), var(--base-800)); + --bt-background-color-hover: light-dark(var(--base-50), var(--base-900)); + + --bt-border-color: var(--ui-border-color); + --bt-border-width: var(--border-sm); + --bt-border-radius: var(--radius-lg); + --bt-border-radius-lg: var(--radius-xl); + + --bt-outline-color-hover: light-dark(var(--base-950), var(--base-0)); + --bt-outline-background-color-hover: light-dark( + rgb(0 0 0 / 0.1), + rgb(255 255 255 / 0.1) + ); + --bt-outline-border-color: light-dark(var(--base-950), var(--base-0)); + --bt-outline-border-color-hover: light-dark(var(--base-950), var(--base-0)); + + --bt-primary-color: var(--base-0); + --bt-primary-color-hover: var(--base-0); + --bt-primary-background-color: var(--primary-600); + --bt-primary-background-color-hover: var(--primary-500); + --bt-primary-border-color: var(--primary-600); + --bt-primary-border-color-hover: var(--primary-600); +} - /* Breadcrumbs */ +/* Avatar */ - :root { - --breadcrumbs-separator: "/"; - --breadcrumbs-separator-color: light-dark(var(--base-300), var(--base-600)); - --breadcrumbs-color: light-dark(var(--base-500), var(--base-400)); - --breadcrumbs-color-current: var(--text-color); - } +:root { + --avatar-color: var(--base-0); + --avatar-background-color: var(--base-400); + --avatar-border-color: light-dark(var(--base-0), var(--base-500)); + --avatar-border-width: var(--border-sm); + --avatar-radius: var(--radius-round); + --avatar-status-dot-color-offline: var(--base-300); + --avatar-status-dot-color-online: var(--yes-400); +} + +/* Banner */ - /* Card */ - - :root { - --card-spacing: var(--sm3); - --card-color: var(--text-color); - --card-secondary-text-color: light-dark(var(--base-400), var(--base-500)); - --card-bg-color: light-dark(var(--base-100), var(--base-900)); - --card-border-radius: var(--radius-lg); - --card-border-color: var(--ui-border-color); - --card-border-width: var(--border-sm); - --card-shadow: var(--shadow-md); - --card-shadow-hover: var(--shadow-xl); - --card-loading-bg: light-dark(var(--base-200), var(--base-900)); - /* Default media aspect ratio; the Card component pins it inline only +:root { + --banner-color: var(--base-0); + --banner-background-color: light-dark(var(--primary-600), var(--primary-800)); +} + +/* Breadcrumbs */ + +:root { + --breadcrumbs-separator: "/"; + --breadcrumbs-separator-color: light-dark(var(--base-300), var(--base-600)); + --breadcrumbs-color: light-dark(var(--base-500), var(--base-400)); + --breadcrumbs-color-current: var(--text-color); +} + +/* Card */ + +:root { + --card-spacing: var(--sm3); + --card-color: var(--text-color); + --card-secondary-text-color: light-dark(var(--base-400), var(--base-500)); + --card-bg-color: light-dark(var(--base-100), var(--base-900)); + --card-border-radius: var(--radius-lg); + --card-border-color: var(--ui-border-color); + --card-border-width: var(--border-sm); + --card-shadow: var(--shadow-md); + --card-shadow-hover: var(--shadow-xl); + --card-loading-bg: light-dark(var(--base-200), var(--base-900)); + /* Default media aspect ratio; the Card component pins it inline only when its aspectRatio prop is passed */ - --card-aspect-ratio: var(--ar-golden); - } + --card-aspect-ratio: var(--ar-golden); +} - /* Toggle */ +/* Toggle */ - :root { - /* Drawn-control geometry, deliberately off the scales */ - --toggle-width: 50px; - --toggle-height: 28px; - --toggle-border-width: 2px; - --toggle-track-color: light-dark(var(--base-300), var(--base-700)); - --toggle-track-color-checked: var(--yes-400); - --toggle-thumb-color: var(--body-background-color); - } +:root { + /* Drawn-control geometry, deliberately off the scales */ + --toggle-width: 50px; + --toggle-height: 28px; + --toggle-border-width: 2px; + --toggle-track-color: light-dark(var(--base-300), var(--base-700)); + --toggle-track-color-checked: var(--yes-400); + --toggle-thumb-color: var(--body-background-color); +} - /* FAQ */ +/* FAQ */ - :root { - --faq-spacing: var(--xs3); - } +:root { + --faq-spacing: var(--xs3); +} - /* Field */ +/* Field */ - :root { - --field-spacing: var(--xs1); - --field-hint-color: light-dark(var(--base-400), var(--base-500)); - --field-error-color: light-dark(var(--danger-500), var(--danger-300)); - /*Field's hint/error position. Use `static` to reflow under, use `absolute` +:root { + --field-spacing: var(--xs1); + --field-hint-color: light-dark(var(--base-400), var(--base-500)); + --field-error-color: light-dark(var(--danger-500), var(--danger-300)); + /*Field's hint/error position. Use `static` to reflow under, use `absolute` (and leave enough space below) if you don't want any shift on errors */ - --field-message-position: static; - } + --field-message-position: static; +} - /* FeatureItem */ - - :root { - --featureItem-icon-box-size: var(--lg3); - --featureItem-icon-size: var(--sm3); - --featureItem-icon-color: light-dark( - var(--primary-600), - var(--primary-300) - ); - --featureItem-icon-background-color: light-dark( - var(--primary-100), - var(--primary-900) - ); - --featureItem-icon-border-radius: var(--radius-lg); - } +/* FeatureItem */ + +:root { + --featureItem-icon-box-size: var(--lg3); + --featureItem-icon-size: var(--sm3); + --featureItem-icon-color: light-dark(var(--primary-600), var(--primary-300)); + --featureItem-icon-background-color: light-dark( + var(--primary-100), + var(--primary-900) + ); + --featureItem-icon-border-radius: var(--radius-lg); +} - /* Footer */ +/* Footer */ - :root { - --footer-background-color: light-dark(var(--primary-950), var(--base-950)); - --footer-text-color: light-dark(var(--base-0), var(--base-200)); - --footer-border-width: var(--border-md); - --footer-border-color: light-dark(transparent, var(--base-700)); - --footer-link-color: light-dark(var(--base-0), var(--base-200)); - --footer-link-color-hover: light-dark(var(--primary-200), var(--base-0)); - } +:root { + --footer-background-color: light-dark(var(--primary-950), var(--base-950)); + --footer-text-color: light-dark(var(--base-0), var(--base-200)); + --footer-border-width: var(--border-md); + --footer-border-color: light-dark(transparent, var(--base-700)); + --footer-link-color: light-dark(var(--base-0), var(--base-200)); + --footer-link-color-hover: light-dark(var(--primary-200), var(--base-0)); +} - /* Header */ - - :root { - --header-height: var(--xl1); - --header-padding: var(--sm1); - @media (width >= 768px) { - --header-height: var(--xl2); - --header-padding: var(--sm3); - } - --header-background-color: light-dark(var(--base-0), var(--base-950)); - - /* The mobile menu is an always-dark by design */ - --header-menu-background-color: var(--base-950); - --header-menu-color: var(--base-0); - --header-menu-color-current: var(--primary-400); - --header-menu-secondary-color: var(--base-300); - --header-menu-border-color: var(--base-500); +/* Header */ + +:root { + --header-height: var(--xl1); + --header-padding: var(--sm1); + @media (width >= 768px) { + --header-height: var(--xl2); + --header-padding: var(--sm3); } + --header-background-color: light-dark(var(--base-0), var(--base-950)); + + /* The mobile menu is an always-dark by design */ + --header-menu-background-color: var(--base-950); + --header-menu-color: var(--base-0); + --header-menu-color-current: var(--primary-400); + --header-menu-secondary-color: var(--base-300); + --header-menu-border-color: var(--base-500); +} - /* Hero */ +/* Hero */ - :root { - --hero-radius: var(--radius-xl); - --hero-content-padding: var(--md3); - --hero-actions-spacing: var(--lg3); - --hero-pagination-dot: var(--sm1); - --hero-pagination-dot-color: var(--base-0); - --hero-pagination-dot-active-color: var(--primary-600); - --hero-pagination-opacity: var(--o-4); - } +:root { + --hero-radius: var(--radius-xl); + --hero-content-padding: var(--md3); + --hero-actions-spacing: var(--lg3); + --hero-pagination-dot: var(--sm1); + --hero-pagination-dot-color: var(--base-0); + --hero-pagination-dot-active-color: var(--primary-600); + --hero-pagination-opacity: var(--o-4); +} - /* Pagination */ - - :root { - --pagination-size: var(--md3); - --pagination-border-radius: var(--radius-md); - --pagination-color: var(--text-color); - --pagination-color-current: var(--base-0); - --pagination-background-color-current: light-dark( - var(--primary-600), - var(--primary-500) - ); - --pagination-background-color-hover: light-dark( - var(--base-100), - var(--base-800) - ); - } +/* Pagination */ + +:root { + --pagination-size: var(--md3); + --pagination-border-radius: var(--radius-md); + --pagination-color: var(--text-color); + --pagination-color-current: var(--base-0); + --pagination-background-color-current: light-dark( + var(--primary-600), + var(--primary-500) + ); + --pagination-background-color-hover: light-dark( + var(--base-100), + var(--base-800) + ); +} - /* PrevNext */ +/* PrevNext */ - :root { - --prevNext-border-color: var(--ui-border-color); - --prevNext-border-radius: var(--radius-lg); - --prevNext-border-color-hover: var(--link-color); - --prevNext-label-color: light-dark(var(--base-400), var(--base-500)); - } +:root { + --prevNext-border-color: var(--ui-border-color); + --prevNext-border-radius: var(--radius-lg); + --prevNext-border-color-hover: var(--link-color); + --prevNext-label-color: light-dark(var(--base-400), var(--base-500)); +} - /* Notice */ +/* Notice */ - :root { - --notice-spacing: var(--sm1); - --notice-text-color: light-dark(var(--base-950), var(--base-0)); - --notice-background-color: light-dark(var(--base-50), var(--base-800)); - --notice-border-color: light-dark(var(--base-200), var(--base-500)); - --notice-border-width: var(--border-sm); - --notice-border-radius: var(--radius-lg); - } +:root { + --notice-spacing: var(--sm1); + --notice-text-color: light-dark(var(--base-950), var(--base-0)); + --notice-background-color: light-dark(var(--base-50), var(--base-800)); + --notice-border-color: light-dark(var(--base-200), var(--base-500)); + --notice-border-width: var(--border-sm); + --notice-border-radius: var(--radius-lg); +} - /* Pricing */ - - :root { - --pricingCard-highlight-border-color: light-dark( - var(--primary-600), - var(--primary-400) - ); - --pricingCard-check-color: light-dark( - var(--success-500), - var(--success-400) - ); - } +/* Pricing */ - /* Read Progress Bar */ +:root { + --pricingCard-highlight-border-color: light-dark( + var(--primary-600), + var(--primary-400) + ); + --pricingCard-check-color: light-dark(var(--success-500), var(--success-400)); +} - :root { - --readProgressBar-height: var(--xs1); - --readProgressBar-color: linear-gradient( - 90deg, - var(--primary-600) 0%, - var(--primary-400) 100% - ); - } +/* Read Progress Bar */ - /* Section */ - - :root { - --section-spacing: var(--xl3); - --section-header-spacing: var(--lg3); - --section-eyebrow-color: light-dark(var(--primary-600), var(--primary-400)); - --section-lede-color: light-dark(var(--base-500), var(--base-400)); - --section-filled-background-color: light-dark( - var(--base-50), - var(--base-900) - ); - --section-primary-background-color: light-dark( - var(--primary-600), - var(--primary-900) - ); - --section-primary-text-color: var(--base-0); - --section-primary-link-color: var(--primary-100); - --section-primary-link-color-hover: var(--base-0); - --section-primary-eyebrow-color: var(--primary-200); - --section-primary-lede-color: var(--primary-100); - } +:root { + --readProgressBar-height: var(--xs1); + --readProgressBar-color: linear-gradient( + 90deg, + var(--primary-600) 0%, + var(--primary-400) 100% + ); +} - /* Testimonial */ +/* Section */ + +:root { + --section-spacing: var(--xl3); + --section-header-spacing: var(--lg3); + --section-eyebrow-color: light-dark(var(--primary-600), var(--primary-400)); + --section-lede-color: light-dark(var(--base-500), var(--base-400)); + --section-filled-background-color: light-dark( + var(--base-50), + var(--base-900) + ); + --section-primary-background-color: light-dark( + var(--primary-600), + var(--primary-900) + ); + --section-primary-text-color: var(--base-0); + --section-primary-link-color: var(--primary-100); + --section-primary-link-color-hover: var(--base-0); + --section-primary-eyebrow-color: var(--primary-200); + --section-primary-lede-color: var(--primary-100); +} - :root { - --testimonial-role-color: light-dark(var(--base-400), var(--base-500)); - } +/* Testimonial */ - /* Tags */ +:root { + --testimonial-role-color: light-dark(var(--base-400), var(--base-500)); +} - :root { - --tags-padding: var(--xs2); - --tags-font-size: var(--text-sm); - --tags-color: light-dark(var(--base-500), var(--base-400)); - --tags-background-color: light-dark(var(--base-100), var(--base-800)); - --tags-background-color-hover: light-dark(var(--base-200), var(--base-950)); - --tags-radius: var(--radius-md); - } +/* Tags */ + +:root { + --tags-padding: var(--xs2); + --tags-font-size: var(--text-sm); + --tags-color: light-dark(var(--base-500), var(--base-400)); + --tags-background-color: light-dark(var(--base-100), var(--base-800)); + --tags-background-color-hover: light-dark(var(--base-200), var(--base-950)); + --tags-radius: var(--radius-md); +} - /* Tiles has no tokens here: its column count is set by container queries in +/* Tiles has no tokens here: its column count is set by container queries in component.tiles.css since custom properties don't work inside @container. */ - /* TOC */ +/* TOC */ + +:root { + --toc-color: var(--link-color); + --toc-color-hover: var(--link-color-hover); + --toc-spacing: var(--xs1); + --toc-indentation: var(--xs3); + --toc-icon-size: var(--sm1); +} - :root { - --toc-color: var(--link-color); - --toc-color-hover: var(--link-color-hover); - --toc-spacing: var(--xs1); - --toc-indentation: var(--xs3); - --toc-icon-size: var(--sm1); - } } diff --git a/dist/mcss.css b/dist/mcss.css index 5113e997..3bfb39f3 100644 --- a/dist/mcss.css +++ b/dist/mcss.css @@ -4598,6 +4598,13 @@ body.dev { set by first declaration, so a theme loaded before mcss.css still slots correctly. */ +/* The parts are plain CSS; this entry assigns their layer, the same way + mcss.css layers the structural files. (Only standalone theme files + self-layer; in dist/css the parts are pre-wrapped so a lone + still works.) */ + +@layer theme.defaults{ + /* DEFAULT THEME: TOKENS */ /* @@ -4610,8 +4617,7 @@ body.dev { xxs: 240px xs: 360px sm: 480px md: 768px lg: 1024px xl: 1440px xxl: 1920px */ -@layer theme.defaults { - /* +/* • Dimensions (Margin, Padding, Width, Height) • Aspect Ratios @@ -4631,227 +4637,229 @@ body.dev { • Opacity */ - :root { - /* GLOBALS */ - - /* DIMENSIONS */ - - /* Sizes */ - - --xs1: 4px; - --xs2: 8px; - --xs3: 12px; - - --sm1: 16px; - --sm2: 20px; - --sm3: 24px; - - --md1: 28px; - --md2: 32px; - --md3: 36px; - - --lg1: 40px; - --lg2: 44px; - --lg3: 48px; - - --xl1: 56px; - --xl2: 64px; - --xl3: 80px; - - --xxl1: 96px; - --xxl2: 112px; - --xxl3: 128px; - - --mega1: 160px; - --mega2: 192px; - --mega3: 224px; - - --giga1: 256px; - --giga2: 288px; - --giga3: 320px; - - --tera1: 384px; - --tera2: 480px; - --tera3: 520px; - - /* Aspect Ratios */ - --ar-square: 1; - --ar-landscape: 4/3; - --ar-portrait: 3/4; - --ar-widescreen: 16/9; - --ar-golden: 1.618/1; - - /* TYPOGRAPHY */ - /* See also elements.text & help.text */ - - /* Font Families */ - /* Local font stacks - More options @ https://modernfontstacks.com */ - --display: - Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, ui-sans-serif, - sans-serif; - --text: ui-sans-serif, system-ui, sans-serif; - --mono: - Dank Mono, Inconsolata, Fira Mono, SF Mono, Monaco, Droid Sans Mono, - Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, - ui-monospace, monospace; - - /* Font Sizes */ - /* Create your own sizes @ https://typescale.com */ - --text-xs: 0.694rem; - --text-sm: 0.833rem; - --text-md: 1rem; - --text-lg: 1.2rem; - --text-xl: 1.44rem; - --display-sm: 1.728rem; - --display-md: 2.074rem; - --display-lg: 2.488rem; - --display-xl: 2.986rem; /* h1 */ - --display-mega: 3.583rem; - --display-giga: 4.299rem; - - /* Heading font sizes are decisions, not scale steps: they map each +:root { + /* GLOBALS */ + + /* DIMENSIONS */ + + /* Sizes */ + + --xs1: 4px; + --xs2: 8px; + --xs3: 12px; + + --sm1: 16px; + --sm2: 20px; + --sm3: 24px; + + --md1: 28px; + --md2: 32px; + --md3: 36px; + + --lg1: 40px; + --lg2: 44px; + --lg3: 48px; + + --xl1: 56px; + --xl2: 64px; + --xl3: 80px; + + --xxl1: 96px; + --xxl2: 112px; + --xxl3: 128px; + + --mega1: 160px; + --mega2: 192px; + --mega3: 224px; + + --giga1: 256px; + --giga2: 288px; + --giga3: 320px; + + --tera1: 384px; + --tera2: 480px; + --tera3: 520px; + + /* Aspect Ratios */ + --ar-square: 1; + --ar-landscape: 4/3; + --ar-portrait: 3/4; + --ar-widescreen: 16/9; + --ar-golden: 1.618/1; + + /* TYPOGRAPHY */ + /* See also elements.text & help.text */ + + /* Font Families */ + /* Local font stacks - More options @ https://modernfontstacks.com */ + --display: + Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, ui-sans-serif, + sans-serif; + --text: ui-sans-serif, system-ui, sans-serif; + --mono: + Dank Mono, Inconsolata, Fira Mono, SF Mono, Monaco, Droid Sans Mono, + Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, + ui-monospace, monospace; + + /* Font Sizes */ + /* Create your own sizes @ https://typescale.com */ + --text-xs: 0.694rem; + --text-sm: 0.833rem; + --text-md: 1rem; + --text-lg: 1.2rem; + --text-xl: 1.44rem; + --display-sm: 1.728rem; + --display-md: 2.074rem; + --display-lg: 2.488rem; + --display-xl: 2.986rem; /* h1 */ + --display-mega: 3.583rem; + --display-giga: 4.299rem; + + /* Heading font sizes are decisions, not scale steps: they map each heading level onto this scale. See --heading-font-size-* in theme.default.ui.css. */ - /* Font Weights */ - --extra-light: 200; - --light: 300; - --book: 400; - --semi-bold: 600; - --bold: 700; - --black: 900; - - /* Letter Spacing */ - --tracking-sm: -0.05em; - --tracking-md: 0.025em; - --tracking-lg: 0.05em; - --tracking-xl: 0.075em; - --tracking-xxl: 0.15em; - - /* Line Height */ - --leading-xs: 1; - --leading-sm: 1.15; - --leading-md: 1.375; - --leading-lg: 1.5; - --leading-xl: 1.75; - --leading-xxl: 2; - - /* COLORS */ - /* Make your own palettes programmatically: https://www.tints.dev */ - - /* Base */ - - --base-0: #fff; - --base-50: #f6f7f9; - --base-100: #edeef1; - --base-200: #d6dbe1; - --base-300: #b2bbc7; - --base-400: #8897a8; - --base-500: #697a8e; - --base-600: #546375; - --base-700: #4a5666; - --base-800: #3c4550; - --base-900: #353c45; - --base-950: #23282e; - - /* Primary */ - - --primary-50: #f0f9ff; - --primary-100: #e0f2fe; - --primary-200: #bae6fd; - --primary-300: #7dd3fc; - --primary-400: #38bdf8; - --primary-500: #0ea5e9; - --primary-600: #0284c7; - --primary-700: #0369a1; - --primary-800: #075985; - --primary-900: #0c4a6e; - --primary-950: #082f49; - - /* Secondary and/or Highlight goes here */ - - /* Feedback */ - - --yes-100: #d5f6e8; - --yes-200: #afebd4; - --yes-300: #7adbbd; - --yes-400: #46c4a0; - --yes-500: #13886d; - - --no-100: #ffe4e6; - --no-200: #fecdd3; - --no-300: #fda4af; - --no-400: #fb7185; - --no-500: #e11d48; - - --maybe-100: #fff7d6; - --maybe-200: #fff0b3; - --maybe-300: #ffd64a; - --maybe-400: #ffc220; - --maybe-500: #f9a007; - - /* Highlight (text marker) */ - - --highlight-500: #ffee00; - - /* BORDERS */ - - --border-sm: 1px; - --border-md: 2px; - --border-lg: 4px; - --border-xl: 8px; - --border-xxl: 12px; - - --radius-sm: 3px; - --radius-md: 5px; - --radius-lg: 8px; - --radius-xl: 12px; - --radius-xxl: 16px; - --radius-round: 1e5px; - - /* DROP SHADOWS */ - - --shadow-sm: - 0 1px 3px 0 var(--ui-shadow-color), 0 1px 2px -1px var(--ui-shadow-color); - --shadow-md: - 0 4px 6px -1px var(--ui-shadow-color), - 0 2px 4px -2px var(--ui-shadow-color); - --shadow-lg: - 0 8px 13px -3px var(--ui-shadow-color), - 0 4px 6px -4px var(--ui-shadow-color); - --shadow-xl: - 0 20px 20px -5px var(--ui-shadow-color), - 0 8px 10px -6px var(--ui-shadow-color); - --shadow-xxl: - 0px 11px 8px -6px var(--ui-shadow-color), - 0 10px 15px 2px var(--ui-shadow-color); - - /* OPACITY */ - - --o-0: 0; /* overkill for consistency */ - --o-1: 0.2; - --o-2: 0.4; - --o-3: 0.6; - --o-4: 0.8; - --o-5: 1; - - /* Z-INDEX */ - - --z-bottom: -1000000000; - --z-0: 0; /* overkill for consistency */ - --z-1: 10; - --z-2: 20; - --z-3: 30; - --z-4: 40; - --z-5: 50; - --z-top: 1000000000; - - /* TRANSITIONS */ - - --transition: 220ms ease-in-out; - --transition-fast: 100ms ease-in-out; - } -} + /* Font Weights */ + --extra-light: 200; + --light: 300; + --book: 400; + --semi-bold: 600; + --bold: 700; + --black: 900; + + /* Letter Spacing */ + --tracking-sm: -0.05em; + --tracking-md: 0.025em; + --tracking-lg: 0.05em; + --tracking-xl: 0.075em; + --tracking-xxl: 0.15em; + + /* Line Height */ + --leading-xs: 1; + --leading-sm: 1.15; + --leading-md: 1.375; + --leading-lg: 1.5; + --leading-xl: 1.75; + --leading-xxl: 2; + + /* COLORS */ + /* Make your own palettes programmatically: https://www.tints.dev */ + + /* Base */ + + --base-0: #fff; + --base-50: #f6f7f9; + --base-100: #edeef1; + --base-200: #d6dbe1; + --base-300: #b2bbc7; + --base-400: #8897a8; + --base-500: #697a8e; + --base-600: #546375; + --base-700: #4a5666; + --base-800: #3c4550; + --base-900: #353c45; + --base-950: #23282e; + + /* Primary */ + + --primary-50: #f0f9ff; + --primary-100: #e0f2fe; + --primary-200: #bae6fd; + --primary-300: #7dd3fc; + --primary-400: #38bdf8; + --primary-500: #0ea5e9; + --primary-600: #0284c7; + --primary-700: #0369a1; + --primary-800: #075985; + --primary-900: #0c4a6e; + --primary-950: #082f49; + + /* Secondary and/or Highlight goes here */ + + /* Feedback */ + + --yes-100: #d5f6e8; + --yes-200: #afebd4; + --yes-300: #7adbbd; + --yes-400: #46c4a0; + --yes-500: #13886d; + + --no-100: #ffe4e6; + --no-200: #fecdd3; + --no-300: #fda4af; + --no-400: #fb7185; + --no-500: #e11d48; + + --maybe-100: #fff7d6; + --maybe-200: #fff0b3; + --maybe-300: #ffd64a; + --maybe-400: #ffc220; + --maybe-500: #f9a007; + + /* Highlight (text marker) */ + + --highlight-500: #ffee00; + + /* BORDERS */ + + --border-sm: 1px; + --border-md: 2px; + --border-lg: 4px; + --border-xl: 8px; + --border-xxl: 12px; + + --radius-sm: 3px; + --radius-md: 5px; + --radius-lg: 8px; + --radius-xl: 12px; + --radius-xxl: 16px; + --radius-round: 1e5px; + + /* DROP SHADOWS */ + + --shadow-sm: + 0 1px 3px 0 var(--ui-shadow-color), 0 1px 2px -1px var(--ui-shadow-color); + --shadow-md: + 0 4px 6px -1px var(--ui-shadow-color), 0 2px 4px -2px var(--ui-shadow-color); + --shadow-lg: + 0 8px 13px -3px var(--ui-shadow-color), + 0 4px 6px -4px var(--ui-shadow-color); + --shadow-xl: + 0 20px 20px -5px var(--ui-shadow-color), + 0 8px 10px -6px var(--ui-shadow-color); + --shadow-xxl: + 0px 11px 8px -6px var(--ui-shadow-color), + 0 10px 15px 2px var(--ui-shadow-color); + + /* OPACITY */ + + --o-0: 0; /* overkill for consistency */ + --o-1: 0.2; + --o-2: 0.4; + --o-3: 0.6; + --o-4: 0.8; + --o-5: 1; + + /* Z-INDEX */ + + --z-bottom: -1000000000; + --z-0: 0; /* overkill for consistency */ + --z-1: 10; + --z-2: 20; + --z-3: 30; + --z-4: 40; + --z-5: 50; + --z-top: 1000000000; + + /* TRANSITIONS */ + + --transition: 220ms ease-in-out; + --transition-fast: 100ms ease-in-out; +} +} + +@layer theme.defaults{ + /* DEFAULT THEME: UI */ /* @@ -4877,582 +4885,572 @@ body.dev { override from your own theme (see theme.starter.css). */ -@layer theme.defaults { - :root { - /* Color scheme (light/dark), toggled by the .theme-light / .theme-dark +:root { + /* Color scheme (light/dark), toggled by the .theme-light / .theme-dark classes below. Unrelated to theme files, which are full themes. */ - color-scheme: light dark; + color-scheme: light dark; - --ui-border-color: light-dark(var(--base-200), var(--base-500)); - /* Also consumed by the --shadow-* scale in theme.default.tokens.css: + --ui-border-color: light-dark(var(--base-200), var(--base-500)); + /* Also consumed by the --shadow-* scale in theme.default.tokens.css: the one reference between the files that runs upward, so shadows can switch with the color scheme. Raw alpha colors: the palettes have no alpha steps. */ - --ui-shadow-color: light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.6)); + --ui-shadow-color: light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.6)); - /* Keyboard focus ring (consumed by :focus-visible in global.a11y.css). + /* Keyboard focus ring (consumed by :focus-visible in global.a11y.css). Raw 2px on purpose: an accessibility affordance that shouldn't move when a theme retunes the decorative border scale. */ - --focus-ring-color: light-dark(var(--primary-500), var(--primary-400)); - --focus-ring-width: 2px; - --focus-ring-offset: 2px; + --focus-ring-color: light-dark(var(--primary-500), var(--primary-400)); + --focus-ring-width: 2px; + --focus-ring-offset: 2px; - /* Semantic feedback aliases over the raw feedback palettes. + /* Semantic feedback aliases over the raw feedback palettes. Prefer these in components and themes; a theme can restyle feedback by overriding the aliases without touching the raw scales. */ - --success-100: var(--yes-100); - --success-200: var(--yes-200); - --success-300: var(--yes-300); - --success-400: var(--yes-400); - --success-500: var(--yes-500); - --danger-100: var(--no-100); - --danger-200: var(--no-200); - --danger-300: var(--no-300); - --danger-400: var(--no-400); - --danger-500: var(--no-500); - --warning-100: var(--maybe-100); - --warning-200: var(--maybe-200); - --warning-300: var(--maybe-300); - --warning-400: var(--maybe-400); - --warning-500: var(--maybe-500); - } - - :root.theme-light { - color-scheme: light; - } - - :root.theme-dark { - color-scheme: dark; - } - - /* HTML ELEMENTS */ - - :root { - accent-color: var(--primary-500); - - --body-background-color: light-dark(var(--base-0), var(--base-950)); - --body-line-height: var(--leading-lg); - - --input-height: var(--md3); - --input-padding: var(--xs3); - --input-border-width: var(--border-sm); - --input-border-color: var(--ui-border-color); - --input-border-radius: var(--radius-md); - --input-border-color-invalid: light-dark( - var(--danger-500), - var(--danger-400) - ); + --success-100: var(--yes-100); + --success-200: var(--yes-200); + --success-300: var(--yes-300); + --success-400: var(--yes-400); + --success-500: var(--yes-500); + --danger-100: var(--no-100); + --danger-200: var(--no-200); + --danger-300: var(--no-300); + --danger-400: var(--no-400); + --danger-500: var(--no-500); + --warning-100: var(--maybe-100); + --warning-200: var(--maybe-200); + --warning-300: var(--maybe-300); + --warning-400: var(--maybe-400); + --warning-500: var(--maybe-500); +} + +:root.theme-light { + color-scheme: light; +} + +:root.theme-dark { + color-scheme: dark; +} + +/* HTML ELEMENTS */ + +:root { + accent-color: var(--primary-500); + + --body-background-color: light-dark(var(--base-0), var(--base-950)); + --body-line-height: var(--leading-lg); + + --input-height: var(--md3); + --input-padding: var(--xs3); + --input-border-width: var(--border-sm); + --input-border-color: var(--ui-border-color); + --input-border-radius: var(--radius-md); + --input-border-color-invalid: light-dark( + var(--danger-500), + var(--danger-400) + ); - /* Gap under a label that precedes its control */ - --label-spacing: var(--xs1); + /* Gap under a label that precedes its control */ + --label-spacing: var(--xs1); - --fieldset-padding: var(--sm3); - --fieldset-border-width: var(--border-sm); - --fieldset-border-color: var(--ui-border-color); - --fieldset-border-radius: var(--radius-lg); + --fieldset-padding: var(--sm3); + --fieldset-border-width: var(--border-sm); + --fieldset-border-color: var(--ui-border-color); + --fieldset-border-radius: var(--radius-lg); - /* meter: low/medium/high map to the even-less-good, suboptimum, and + /* meter: low/medium/high map to the even-less-good, suboptimum, and optimum pseudo-elements */ - --meter-height: var(--sm1); - --meter-border-radius: var(--radius-md); - --meter-track-color: var(--primary-100); - --meter-low-color: var(--danger-400); - --meter-medium-color: var(--warning-400); - --meter-high-color: var(--success-400); - - --progress-height: var(--sm1); - --progress-color: var(--primary-500); - --progress-track-color: var(--primary-100); - --progress-border-radius: var(--radius-md); - - /* select's chevron, applied as a mask painted with the text color; + --meter-height: var(--sm1); + --meter-border-radius: var(--radius-md); + --meter-track-color: var(--primary-100); + --meter-low-color: var(--danger-400); + --meter-medium-color: var(--warning-400); + --meter-high-color: var(--success-400); + + --progress-height: var(--sm1); + --progress-color: var(--primary-500); + --progress-track-color: var(--primary-100); + --progress-border-radius: var(--radius-md); + + /* select's chevron, applied as a mask painted with the text color; any url() works here, data URL or file */ - --select-icon-size: var(--sm3); - --select-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E"); - - --dialog-min-width: var(--tera1); - --dialog-max-width: var(--tera3); - --dialog-padding: var(--lg1) var(--md1); - --dialog-border-width: var(--border-sm); - --dialog-border-color: light-dark(var(--base-200), var(--base-800)); - --dialog-background-color: light-dark(var(--base-50), var(--base-900)); - --dialog-border-radius: var(--radius-lg); - --dialog-backdrop-color: var(--base-950); - --dialog-backdrop-opacity: var(--o-4); - - /* details: same surface as dialog by default, on purpose but + --select-icon-size: var(--sm3); + --select-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E"); + + --dialog-min-width: var(--tera1); + --dialog-max-width: var(--tera3); + --dialog-padding: var(--lg1) var(--md1); + --dialog-border-width: var(--border-sm); + --dialog-border-color: light-dark(var(--base-200), var(--base-800)); + --dialog-background-color: light-dark(var(--base-50), var(--base-900)); + --dialog-border-radius: var(--radius-lg); + --dialog-backdrop-color: var(--base-950); + --dialog-backdrop-opacity: var(--o-4); + + /* details: same surface as dialog by default, on purpose but independently overridable. Spacing is the gap between an open summary and its content. */ - --details-padding: var(--sm1); - --details-spacing: var(--xs3); - --details-border-width: var(--border-sm); - --details-border-color: light-dark(var(--base-200), var(--base-800)); - --details-background-color: light-dark(var(--base-50), var(--base-900)); - --details-border-radius: var(--radius-lg); - --details-icon-size: var(--sm3); - /* Marker icon, applied as a mask painted with the text color; any + --details-padding: var(--sm1); + --details-spacing: var(--xs3); + --details-border-width: var(--border-sm); + --details-border-color: light-dark(var(--base-200), var(--base-800)); + --details-background-color: light-dark(var(--base-50), var(--base-900)); + --details-border-radius: var(--radius-lg); + --details-icon-size: var(--sm3); + /* Marker icon, applied as a mask painted with the text color; any url() works here, data URL or file */ - --details-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E"); - - --table-padding: var(--xs2) var(--sm1); - --table-border-width: var(--border-sm); - --table-border-color: light-dark(var(--base-100), var(--base-700)); - --table-border-radius: var(--radius-md); - --table-background-color: none; - /* Gap between the table and its caption */ - --table-caption-spacing: var(--xs3); - /* Gap between a figure's content and caption on either side */ - --figcaption-spacing: var(--xs2); - - /* Text */ - - --heading-font: var(--display); - --heading-weight: var(--black); - --heading-letter-spacing: normal; /* (e.g. -0.02em or var(--tracking-sm)) */ - - --heading-font-size-h1: clamp( - var(--display-md), - 1.269rem + 2.682vw, - var(--display-xl) - ); /* 2.074rem → 2.986rem */ - --heading-font-size-h2: clamp( - var(--display-sm), - 1.057rem + 2.235vw, - var(--display-lg) - ); /* 1.728rem → 2.488rem */ - --heading-font-size-h3: clamp( - var(--text-xl), - 0.881rem + 1.865vw, - var(--display-md) - ); /* 1.44rem → 2.074rem */ - --heading-font-size-h4: clamp( - var(--text-lg), - 0.734rem + 1.553vw, - var(--display-sm) - ); /* 1.2rem → 1.728rem */ - --heading-font-size-h5: clamp( - var(--text-lg), - 0.988rem + 0.706vw, - var(--text-xl) - ); /* 1.2rem → 1.44rem */ - --heading-font-size-h6: clamp( - var(--text-md), - 0.824rem + 0.588vw, - var(--text-lg) - ); /* 1rem → 1.2rem */ - - --heading-line-height: var(--leading-sm); - --heading-line-height-h1: var(--heading-line-height); - --heading-line-height-h2: var(--heading-line-height); - --heading-line-height-h3: var(--heading-line-height); - --heading-line-height-h4: var(--leading-md); - --heading-line-height-h5: var(--leading-md); - --heading-line-height-h6: var(--leading-md); - - /* Headings bottom margin */ - --heading-spacing-h1: 0.4em; - --heading-spacing-h2: 0.4em; - --heading-spacing-h3: 0.4em; - --heading-spacing-h4: 0.4em; - --heading-spacing-h5: 0.4em; - --heading-spacing-h6: 0.4em; - /* Any h1 before h2, h2 before h3, h3 before h4. */ - --heading-spacing-consecutive: 0.3em; - - --text-color: light-dark(var(--base-950), var(--base-200)); - --link-font-weight: var(--semi-bold); - --link-color: light-dark(var(--primary-600), var(--primary-400)); - --link-color-hover: var(--primary-500); - - --text-code-color: light-dark(var(--primary-600), var(--primary-400)); - --text-code-background-color: light-dark( - var(--primary-100), - var(--primary-900) - ); - /* when code inline styling doesn't apply (inside headings and pre) */ - --text-code-muted-color: light-dark(var(--base-500), var(--base-300)); - - --pre-border-radius: var(--radius-md); - /* matching the 0.9em of inline code */ - --pre-font-size: 0.9rem; - - --blockquote-padding-block: var(--sm1); - --blockquote-padding-inline: var(--md1) var(--sm3); - --blockquote-background-color: light-dark( - var(--primary-50), - var(--primary-900) - ); - --blockquote-border-radius: var(--radius-md); - --blockquote-accent-width: var(--xs2); - --blockquote-accent-color: linear-gradient( - var(--primary-800), - var(--primary-500) - ); + --details-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E"); + + --table-padding: var(--xs2) var(--sm1); + --table-border-width: var(--border-sm); + --table-border-color: light-dark(var(--base-100), var(--base-700)); + --table-border-radius: var(--radius-md); + --table-background-color: none; + /* Gap between the table and its caption */ + --table-caption-spacing: var(--xs3); + /* Gap between a figure's content and caption on either side */ + --figcaption-spacing: var(--xs2); + + /* Text */ + + --heading-font: var(--display); + --heading-weight: var(--black); + --heading-letter-spacing: normal; /* (e.g. -0.02em or var(--tracking-sm)) */ + + --heading-font-size-h1: clamp( + var(--display-md), + 1.269rem + 2.682vw, + var(--display-xl) + ); /* 2.074rem → 2.986rem */ + --heading-font-size-h2: clamp( + var(--display-sm), + 1.057rem + 2.235vw, + var(--display-lg) + ); /* 1.728rem → 2.488rem */ + --heading-font-size-h3: clamp( + var(--text-xl), + 0.881rem + 1.865vw, + var(--display-md) + ); /* 1.44rem → 2.074rem */ + --heading-font-size-h4: clamp( + var(--text-lg), + 0.734rem + 1.553vw, + var(--display-sm) + ); /* 1.2rem → 1.728rem */ + --heading-font-size-h5: clamp( + var(--text-lg), + 0.988rem + 0.706vw, + var(--text-xl) + ); /* 1.2rem → 1.44rem */ + --heading-font-size-h6: clamp( + var(--text-md), + 0.824rem + 0.588vw, + var(--text-lg) + ); /* 1rem → 1.2rem */ + + --heading-line-height: var(--leading-sm); + --heading-line-height-h1: var(--heading-line-height); + --heading-line-height-h2: var(--heading-line-height); + --heading-line-height-h3: var(--heading-line-height); + --heading-line-height-h4: var(--leading-md); + --heading-line-height-h5: var(--leading-md); + --heading-line-height-h6: var(--leading-md); + + /* Headings bottom margin */ + --heading-spacing-h1: 0.4em; + --heading-spacing-h2: 0.4em; + --heading-spacing-h3: 0.4em; + --heading-spacing-h4: 0.4em; + --heading-spacing-h5: 0.4em; + --heading-spacing-h6: 0.4em; + /* Any h1 before h2, h2 before h3, h3 before h4. */ + --heading-spacing-consecutive: 0.3em; + + --text-color: light-dark(var(--base-950), var(--base-200)); + --link-font-weight: var(--semi-bold); + --link-color: light-dark(var(--primary-600), var(--primary-400)); + --link-color-hover: var(--primary-500); + + --text-code-color: light-dark(var(--primary-600), var(--primary-400)); + --text-code-background-color: light-dark( + var(--primary-100), + var(--primary-900) + ); + /* when code inline styling doesn't apply (inside headings and pre) */ + --text-code-muted-color: light-dark(var(--base-500), var(--base-300)); + + --pre-border-radius: var(--radius-md); + /* matching the 0.9em of inline code */ + --pre-font-size: 0.9rem; + + --blockquote-padding-block: var(--sm1); + --blockquote-padding-inline: var(--md1) var(--sm3); + --blockquote-background-color: light-dark( + var(--primary-50), + var(--primary-900) + ); + --blockquote-border-radius: var(--radius-md); + --blockquote-accent-width: var(--xs2); + --blockquote-accent-color: linear-gradient( + var(--primary-800), + var(--primary-500) + ); - /* .prose related stuff in GLOBAL */ + /* .prose related stuff in GLOBAL */ - /* Optional centered label on
, e.g. "***" or a dingbat */ - --hr-content: ""; + /* Optional centered label on
, e.g. "***" or a dingbat */ + --hr-content: ""; - /* ins: background stays light in both light/dark modes */ - --ins-color: var(--base-950); - --ins-background-color: var(--success-200); + /* ins: background stays light in both light/dark modes */ + --ins-color: var(--base-950); + --ins-background-color: var(--success-200); - --marker-color: var(--highlight-500); + --marker-color: var(--highlight-500); - --selection-color: light-dark(var(--base-950), var(--base-0)); - --selection-background-color: light-dark( - var(--primary-200), - var(--primary-700) - ); + --selection-color: light-dark(var(--base-950), var(--base-0)); + --selection-background-color: light-dark( + var(--primary-200), + var(--primary-700) + ); +} + +/* GLOBAL */ + +:root { + /* Mobile-first: tighter gutters on small screens, 24px from --md up */ + --grid-column-gap: var(--sm1); + --grid-row-gap: var(--sm1); + @media (width >= 768px) { + --grid-column-gap: var(--sm3); + --grid-row-gap: var(--sm3); } - /* GLOBAL */ + --wrap-spacing: var(--sm1); + --wrap-md-spacing: var(--sm3); + --wrap-lg-spacing: 0; + /* Widths are measures: ch tracks the text size, so raw on purpose. */ + --wrap-width-sm: minmax(0, 55ch); + --wrap-width-md: minmax(0, 70ch); + --wrap-width-lg: minmax(0, 900px); + --wrap-width: var(--wrap-width-md); - :root { - /* Mobile-first: tighter gutters on small screens, 24px from --md up */ - --grid-column-gap: var(--sm1); - --grid-row-gap: var(--sm1); - @media (width >= 768px) { - --grid-column-gap: var(--sm3); - --grid-row-gap: var(--sm3); - } + --layout-content-width: 70ch; + --layout-aside-width: 245px; + --layout-toc-width: 1fr; - --wrap-spacing: var(--sm1); - --wrap-md-spacing: var(--sm3); - --wrap-lg-spacing: 0; - /* Widths are measures: ch tracks the text size, so raw on purpose. */ - --wrap-width-sm: minmax(0, 55ch); - --wrap-width-md: minmax(0, 70ch); - --wrap-width-lg: minmax(0, 900px); - --wrap-width: var(--wrap-width-md); + --prose-spacing: var(--sm1); +} - --layout-content-width: 70ch; - --layout-aside-width: 245px; - --layout-toc-width: 1fr; +/* COMPONENTS */ - --prose-spacing: var(--sm1); - } +/* Badge */ - /* COMPONENTS */ +:root { + --badge-font-size: var(--text-sm); + --badge-border-radius: var(--radius-md); + --badge-color: var(--base-0); + --badge-background-color: light-dark(var(--base-700), var(--base-600)); - /* Badge */ + --badge-primary-color: var(--base-0); + --badge-primary-background-color: light-dark( + var(--primary-600), + var(--primary-500) + ); + --badge-success-color: light-dark(var(--success-500), var(--base-0)); + --badge-success-background-color: light-dark( + var(--success-100), + var(--success-500) + ); + --badge-danger-color: light-dark(var(--danger-500), var(--base-0)); + --badge-danger-background-color: light-dark( + var(--danger-100), + var(--danger-500) + ); + --badge-warning-color: light-dark(var(--warning-500), var(--base-950)); + --badge-warning-background-color: light-dark( + var(--warning-100), + var(--warning-500) + ); +} - :root { - --badge-font-size: var(--text-sm); - --badge-border-radius: var(--radius-md); - --badge-color: var(--base-0); - --badge-background-color: light-dark(var(--base-700), var(--base-600)); +/* Button */ +/* (Button defaults and primary button colors) */ - --badge-primary-color: var(--base-0); - --badge-primary-background-color: light-dark( - var(--primary-600), - var(--primary-500) - ); - --badge-success-color: light-dark(var(--success-500), var(--base-0)); - --badge-success-background-color: light-dark( - var(--success-100), - var(--success-500) - ); - --badge-danger-color: light-dark(var(--danger-500), var(--base-0)); - --badge-danger-background-color: light-dark( - var(--danger-100), - var(--danger-500) - ); - --badge-warning-color: light-dark(var(--warning-500), var(--base-950)); - --badge-warning-background-color: light-dark( - var(--warning-100), - var(--warning-500) - ); - } +:root { + /* Optical minimums, deliberately off the spacing scale */ + --bt-min-width: 101px; + --bt-min-width-md: 123px; + --bt-min-width-lg: 133px; - /* Button */ - /* (Button defaults and primary button colors) */ + --bt-font-size: var(--text-sm); + --bt-font-size-lg: var(--text-md); + --bt-font-weight: var(--semi-bold); - :root { - /* Optical minimums, deliberately off the spacing scale */ - --bt-min-width: 101px; - --bt-min-width-md: 123px; - --bt-min-width-lg: 133px; + --bt-color: var(--text-color); + --bt-color-hover: light-dark(var(--text-color), var(--base-0)); - --bt-font-size: var(--text-sm); - --bt-font-size-lg: var(--text-md); - --bt-font-weight: var(--semi-bold); + --bt-background-color: light-dark(var(--base-0), var(--base-800)); + --bt-background-color-hover: light-dark(var(--base-50), var(--base-900)); - --bt-color: var(--text-color); - --bt-color-hover: light-dark(var(--text-color), var(--base-0)); + --bt-border-color: var(--ui-border-color); + --bt-border-width: var(--border-sm); + --bt-border-radius: var(--radius-lg); + --bt-border-radius-lg: var(--radius-xl); - --bt-background-color: light-dark(var(--base-0), var(--base-800)); - --bt-background-color-hover: light-dark(var(--base-50), var(--base-900)); + --bt-outline-color-hover: light-dark(var(--base-950), var(--base-0)); + --bt-outline-background-color-hover: light-dark( + rgb(0 0 0 / 0.1), + rgb(255 255 255 / 0.1) + ); + --bt-outline-border-color: light-dark(var(--base-950), var(--base-0)); + --bt-outline-border-color-hover: light-dark(var(--base-950), var(--base-0)); - --bt-border-color: var(--ui-border-color); - --bt-border-width: var(--border-sm); - --bt-border-radius: var(--radius-lg); - --bt-border-radius-lg: var(--radius-xl); + --bt-primary-color: var(--base-0); + --bt-primary-color-hover: var(--base-0); + --bt-primary-background-color: var(--primary-600); + --bt-primary-background-color-hover: var(--primary-500); + --bt-primary-border-color: var(--primary-600); + --bt-primary-border-color-hover: var(--primary-600); +} - --bt-outline-color-hover: light-dark(var(--base-950), var(--base-0)); - --bt-outline-background-color-hover: light-dark( - rgb(0 0 0 / 0.1), - rgb(255 255 255 / 0.1) - ); - --bt-outline-border-color: light-dark(var(--base-950), var(--base-0)); - --bt-outline-border-color-hover: light-dark(var(--base-950), var(--base-0)); - - --bt-primary-color: var(--base-0); - --bt-primary-color-hover: var(--base-0); - --bt-primary-background-color: var(--primary-600); - --bt-primary-background-color-hover: var(--primary-500); - --bt-primary-border-color: var(--primary-600); - --bt-primary-border-color-hover: var(--primary-600); - } +/* Avatar */ - /* Avatar */ +:root { + --avatar-color: var(--base-0); + --avatar-background-color: var(--base-400); + --avatar-border-color: light-dark(var(--base-0), var(--base-500)); + --avatar-border-width: var(--border-sm); + --avatar-radius: var(--radius-round); + --avatar-status-dot-color-offline: var(--base-300); + --avatar-status-dot-color-online: var(--yes-400); +} - :root { - --avatar-color: var(--base-0); - --avatar-background-color: var(--base-400); - --avatar-border-color: light-dark(var(--base-0), var(--base-500)); - --avatar-border-width: var(--border-sm); - --avatar-radius: var(--radius-round); - --avatar-status-dot-color-offline: var(--base-300); - --avatar-status-dot-color-online: var(--yes-400); - } +/* Banner */ - /* Banner */ +:root { + --banner-color: var(--base-0); + --banner-background-color: light-dark(var(--primary-600), var(--primary-800)); +} - :root { - --banner-color: var(--base-0); - --banner-background-color: light-dark( - var(--primary-600), - var(--primary-800) - ); - } +/* Breadcrumbs */ - /* Breadcrumbs */ +:root { + --breadcrumbs-separator: "/"; + --breadcrumbs-separator-color: light-dark(var(--base-300), var(--base-600)); + --breadcrumbs-color: light-dark(var(--base-500), var(--base-400)); + --breadcrumbs-color-current: var(--text-color); +} - :root { - --breadcrumbs-separator: "/"; - --breadcrumbs-separator-color: light-dark(var(--base-300), var(--base-600)); - --breadcrumbs-color: light-dark(var(--base-500), var(--base-400)); - --breadcrumbs-color-current: var(--text-color); - } +/* Card */ - /* Card */ - - :root { - --card-spacing: var(--sm3); - --card-color: var(--text-color); - --card-secondary-text-color: light-dark(var(--base-400), var(--base-500)); - --card-bg-color: light-dark(var(--base-100), var(--base-900)); - --card-border-radius: var(--radius-lg); - --card-border-color: var(--ui-border-color); - --card-border-width: var(--border-sm); - --card-shadow: var(--shadow-md); - --card-shadow-hover: var(--shadow-xl); - --card-loading-bg: light-dark(var(--base-200), var(--base-900)); - /* Default media aspect ratio; the Card component pins it inline only +:root { + --card-spacing: var(--sm3); + --card-color: var(--text-color); + --card-secondary-text-color: light-dark(var(--base-400), var(--base-500)); + --card-bg-color: light-dark(var(--base-100), var(--base-900)); + --card-border-radius: var(--radius-lg); + --card-border-color: var(--ui-border-color); + --card-border-width: var(--border-sm); + --card-shadow: var(--shadow-md); + --card-shadow-hover: var(--shadow-xl); + --card-loading-bg: light-dark(var(--base-200), var(--base-900)); + /* Default media aspect ratio; the Card component pins it inline only when its aspectRatio prop is passed */ - --card-aspect-ratio: var(--ar-golden); - } + --card-aspect-ratio: var(--ar-golden); +} - /* Toggle */ +/* Toggle */ - :root { - /* Drawn-control geometry, deliberately off the scales */ - --toggle-width: 50px; - --toggle-height: 28px; - --toggle-border-width: 2px; - --toggle-track-color: light-dark(var(--base-300), var(--base-700)); - --toggle-track-color-checked: var(--yes-400); - --toggle-thumb-color: var(--body-background-color); - } +:root { + /* Drawn-control geometry, deliberately off the scales */ + --toggle-width: 50px; + --toggle-height: 28px; + --toggle-border-width: 2px; + --toggle-track-color: light-dark(var(--base-300), var(--base-700)); + --toggle-track-color-checked: var(--yes-400); + --toggle-thumb-color: var(--body-background-color); +} - /* FAQ */ +/* FAQ */ - :root { - --faq-spacing: var(--xs3); - } +:root { + --faq-spacing: var(--xs3); +} - /* Field */ +/* Field */ - :root { - --field-spacing: var(--xs1); - --field-hint-color: light-dark(var(--base-400), var(--base-500)); - --field-error-color: light-dark(var(--danger-500), var(--danger-300)); - /*Field's hint/error position. Use `static` to reflow under, use `absolute` +:root { + --field-spacing: var(--xs1); + --field-hint-color: light-dark(var(--base-400), var(--base-500)); + --field-error-color: light-dark(var(--danger-500), var(--danger-300)); + /*Field's hint/error position. Use `static` to reflow under, use `absolute` (and leave enough space below) if you don't want any shift on errors */ - --field-message-position: static; - } - - /* FeatureItem */ - - :root { - --featureItem-icon-box-size: var(--lg3); - --featureItem-icon-size: var(--sm3); - --featureItem-icon-color: light-dark( - var(--primary-600), - var(--primary-300) - ); - --featureItem-icon-background-color: light-dark( - var(--primary-100), - var(--primary-900) - ); - --featureItem-icon-border-radius: var(--radius-lg); - } - - /* Footer */ - - :root { - --footer-background-color: light-dark(var(--primary-950), var(--base-950)); - --footer-text-color: light-dark(var(--base-0), var(--base-200)); - --footer-border-width: var(--border-md); - --footer-border-color: light-dark(transparent, var(--base-700)); - --footer-link-color: light-dark(var(--base-0), var(--base-200)); - --footer-link-color-hover: light-dark(var(--primary-200), var(--base-0)); - } + --field-message-position: static; +} - /* Header */ +/* FeatureItem */ - :root { - --header-height: var(--xl1); - --header-padding: var(--sm1); - @media (width >= 768px) { - --header-height: var(--xl2); - --header-padding: var(--sm3); - } - --header-background-color: light-dark(var(--base-0), var(--base-950)); - - /* The mobile menu is an always-dark by design */ - --header-menu-background-color: var(--base-950); - --header-menu-color: var(--base-0); - --header-menu-color-current: var(--primary-400); - --header-menu-secondary-color: var(--base-300); - --header-menu-border-color: var(--base-500); - } +:root { + --featureItem-icon-box-size: var(--lg3); + --featureItem-icon-size: var(--sm3); + --featureItem-icon-color: light-dark(var(--primary-600), var(--primary-300)); + --featureItem-icon-background-color: light-dark( + var(--primary-100), + var(--primary-900) + ); + --featureItem-icon-border-radius: var(--radius-lg); +} - /* Hero */ +/* Footer */ - :root { - --hero-radius: var(--radius-xl); - --hero-content-padding: var(--md3); - --hero-actions-spacing: var(--lg3); - --hero-pagination-dot: var(--sm1); - --hero-pagination-dot-color: var(--base-0); - --hero-pagination-dot-active-color: var(--primary-600); - --hero-pagination-opacity: var(--o-4); - } +:root { + --footer-background-color: light-dark(var(--primary-950), var(--base-950)); + --footer-text-color: light-dark(var(--base-0), var(--base-200)); + --footer-border-width: var(--border-md); + --footer-border-color: light-dark(transparent, var(--base-700)); + --footer-link-color: light-dark(var(--base-0), var(--base-200)); + --footer-link-color-hover: light-dark(var(--primary-200), var(--base-0)); +} - /* Pagination */ +/* Header */ - :root { - --pagination-size: var(--md3); - --pagination-border-radius: var(--radius-md); - --pagination-color: var(--text-color); - --pagination-color-current: var(--base-0); - --pagination-background-color-current: light-dark( - var(--primary-600), - var(--primary-500) - ); - --pagination-background-color-hover: light-dark( - var(--base-100), - var(--base-800) - ); +:root { + --header-height: var(--xl1); + --header-padding: var(--sm1); + @media (width >= 768px) { + --header-height: var(--xl2); + --header-padding: var(--sm3); } + --header-background-color: light-dark(var(--base-0), var(--base-950)); + + /* The mobile menu is an always-dark by design */ + --header-menu-background-color: var(--base-950); + --header-menu-color: var(--base-0); + --header-menu-color-current: var(--primary-400); + --header-menu-secondary-color: var(--base-300); + --header-menu-border-color: var(--base-500); +} + +/* Hero */ + +:root { + --hero-radius: var(--radius-xl); + --hero-content-padding: var(--md3); + --hero-actions-spacing: var(--lg3); + --hero-pagination-dot: var(--sm1); + --hero-pagination-dot-color: var(--base-0); + --hero-pagination-dot-active-color: var(--primary-600); + --hero-pagination-opacity: var(--o-4); +} + +/* Pagination */ + +:root { + --pagination-size: var(--md3); + --pagination-border-radius: var(--radius-md); + --pagination-color: var(--text-color); + --pagination-color-current: var(--base-0); + --pagination-background-color-current: light-dark( + var(--primary-600), + var(--primary-500) + ); + --pagination-background-color-hover: light-dark( + var(--base-100), + var(--base-800) + ); +} - /* PrevNext */ +/* PrevNext */ - :root { - --prevNext-border-color: var(--ui-border-color); - --prevNext-border-radius: var(--radius-lg); - --prevNext-border-color-hover: var(--link-color); - --prevNext-label-color: light-dark(var(--base-400), var(--base-500)); - } +:root { + --prevNext-border-color: var(--ui-border-color); + --prevNext-border-radius: var(--radius-lg); + --prevNext-border-color-hover: var(--link-color); + --prevNext-label-color: light-dark(var(--base-400), var(--base-500)); +} - /* Notice */ +/* Notice */ - :root { - --notice-spacing: var(--sm1); - --notice-text-color: light-dark(var(--base-950), var(--base-0)); - --notice-background-color: light-dark(var(--base-50), var(--base-800)); - --notice-border-color: light-dark(var(--base-200), var(--base-500)); - --notice-border-width: var(--border-sm); - --notice-border-radius: var(--radius-lg); - } +:root { + --notice-spacing: var(--sm1); + --notice-text-color: light-dark(var(--base-950), var(--base-0)); + --notice-background-color: light-dark(var(--base-50), var(--base-800)); + --notice-border-color: light-dark(var(--base-200), var(--base-500)); + --notice-border-width: var(--border-sm); + --notice-border-radius: var(--radius-lg); +} - /* Pricing */ +/* Pricing */ - :root { - --pricingCard-highlight-border-color: light-dark( - var(--primary-600), - var(--primary-400) - ); - --pricingCard-check-color: light-dark( - var(--success-500), - var(--success-400) - ); - } +:root { + --pricingCard-highlight-border-color: light-dark( + var(--primary-600), + var(--primary-400) + ); + --pricingCard-check-color: light-dark(var(--success-500), var(--success-400)); +} - /* Read Progress Bar */ +/* Read Progress Bar */ - :root { - --readProgressBar-height: var(--xs1); - --readProgressBar-color: linear-gradient( - 90deg, - var(--primary-600) 0%, - var(--primary-400) 100% - ); - } +:root { + --readProgressBar-height: var(--xs1); + --readProgressBar-color: linear-gradient( + 90deg, + var(--primary-600) 0%, + var(--primary-400) 100% + ); +} - /* Section */ +/* Section */ - :root { - --section-spacing: var(--xl3); - --section-header-spacing: var(--lg3); - --section-eyebrow-color: light-dark(var(--primary-600), var(--primary-400)); - --section-lede-color: light-dark(var(--base-500), var(--base-400)); - --section-filled-background-color: light-dark( - var(--base-50), - var(--base-900) - ); - --section-primary-background-color: light-dark( - var(--primary-600), - var(--primary-900) - ); - --section-primary-text-color: var(--base-0); - --section-primary-link-color: var(--primary-100); - --section-primary-link-color-hover: var(--base-0); - --section-primary-eyebrow-color: var(--primary-200); - --section-primary-lede-color: var(--primary-100); - } +:root { + --section-spacing: var(--xl3); + --section-header-spacing: var(--lg3); + --section-eyebrow-color: light-dark(var(--primary-600), var(--primary-400)); + --section-lede-color: light-dark(var(--base-500), var(--base-400)); + --section-filled-background-color: light-dark( + var(--base-50), + var(--base-900) + ); + --section-primary-background-color: light-dark( + var(--primary-600), + var(--primary-900) + ); + --section-primary-text-color: var(--base-0); + --section-primary-link-color: var(--primary-100); + --section-primary-link-color-hover: var(--base-0); + --section-primary-eyebrow-color: var(--primary-200); + --section-primary-lede-color: var(--primary-100); +} - /* Testimonial */ +/* Testimonial */ - :root { - --testimonial-role-color: light-dark(var(--base-400), var(--base-500)); - } +:root { + --testimonial-role-color: light-dark(var(--base-400), var(--base-500)); +} - /* Tags */ +/* Tags */ - :root { - --tags-padding: var(--xs2); - --tags-font-size: var(--text-sm); - --tags-color: light-dark(var(--base-500), var(--base-400)); - --tags-background-color: light-dark(var(--base-100), var(--base-800)); - --tags-background-color-hover: light-dark(var(--base-200), var(--base-950)); - --tags-radius: var(--radius-md); - } +:root { + --tags-padding: var(--xs2); + --tags-font-size: var(--text-sm); + --tags-color: light-dark(var(--base-500), var(--base-400)); + --tags-background-color: light-dark(var(--base-100), var(--base-800)); + --tags-background-color-hover: light-dark(var(--base-200), var(--base-950)); + --tags-radius: var(--radius-md); +} - /* Tiles has no tokens here: its column count is set by container queries in +/* Tiles has no tokens here: its column count is set by container queries in component.tiles.css since custom properties don't work inside @container. */ - /* TOC */ +/* TOC */ - :root { - --toc-color: var(--link-color); - --toc-color-hover: var(--link-color-hover); - --toc-spacing: var(--xs1); - --toc-indentation: var(--xs3); - --toc-icon-size: var(--sm1); - } +:root { + --toc-color: var(--link-color); + --toc-color-hover: var(--link-color-hover); + --toc-spacing: var(--xs1); + --toc-indentation: var(--xs3); + --toc-icon-size: var(--sm1); +} } diff --git a/dist/mcss.min.css b/dist/mcss.min.css index a274e46a..99d76fa2 100644 --- a/dist/mcss.min.css +++ b/dist/mcss.min.css @@ -1,2 +1,2 @@ /*! mCSS v1.3.0 | MIT | https://mcss.dev */ -@layer base,elements,global,components,theme.defaults,theme.overrides,helpers;@layer base,elements,global,components,theme.defaults,theme.overrides,helpers;@layer base{*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion:reduce){*,:before,:after{animation-delay:-1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}}:where(:not(dialog)){margin:0}html,body{min-height:100%}}@layer elements{body{line-sizing:normal;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;background-color:var(--body-background-color);color:var(--text-color);font-family:var(--text);line-height:var(--body-line-height);&:has(.body-is-locked){overflow:hidden}}}@layer elements{::selection{color:var(--selection-color);background-color:var(--selection-background-color)}:where(a,u,ins,abbr){text-underline-offset:2px}a{font-weight:var(--link-font-weight);color:var(--link-color);&:where(:hover){color:var(--link-color-hover);-webkit-text-decoration:none;text-decoration:none}}address{width:max-content;max-width:100%;padding:var(--sm1) var(--sm3);font-style:normal;background-color:light-dark(var(--base-50),var(--base-900));border:var(--xs2) solid transparent;border-image:8 repeating-linear-gradient(-45deg,var(--no-500) 0,var(--no-500) var(--xs2),transparent 0,transparent calc(var(--xs2) * 2),var(--primary-500) 0,var(--primary-500) calc(var(--xs2) * 3),transparent 0,transparent calc(var(--xs2) * 4))}abbr{position:relative;cursor:help;&:after{position:relative;top:calc(var(--xs1) * -1);width:var(--sm1);height:var(--sm1);display:inline-block;content:"";background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='circle-help'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M9.09%209a3%203%200%200%201%205.83%201c0%202-3%203-3%203'/%3E%3Cpath%20d='M12%2017h.01'/%3E%3C/svg%3E");background-size:contain}&:hover:before{width:max-content;max-width:400px;position:absolute;left:50%;padding:var(--xs1) var(--xs3);content:attr(title);color:var(--base-0);background-color:var(--base-900);opacity:var(--o-4);border-radius:var(--radius-sm);transform:translate(-50%,-2em)}}blockquote{position:relative;margin-bottom:var(--prose-spacing);padding-block:var(--blockquote-padding-block);padding-inline:var(--blockquote-padding-inline);font-style:italic;background-color:var(--blockquote-background-color);border-radius:var(--blockquote-border-radius);&:before{content:"";position:absolute;top:0;inset-inline-start:0;width:var(--blockquote-accent-width);height:100%;border-start-start-radius:var(--blockquote-border-radius);border-end-start-radius:var(--blockquote-border-radius);background:var(--blockquote-accent-color)}p{&:first-child:before{content:open-quote}&:last-child{margin-bottom:0;&:after{content:close-quote}}}}cite{font-style:italic}code,var,kbd{font-family:var(--mono);font-size:.9em;font-style:normal;color:var(--text-code-muted-color)}:is(code,var,kbd):not(h1 *,h2 *,h3 *,h4 *,h5 *,h6 *,pre *){padding:.15em .3em;color:var(--text-code-color);background-color:var(--text-code-background-color);border-radius:var(--radius-sm)}dt{font-weight:var(--bold)}dd+dt{margin-top:.5em}del{text-decoration-color:var(--danger-500);text-decoration-style:wavy}h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{overflow-wrap:break-word;text-wrap:balance}h1,.h1,h2,.h2,h3,.h3,h4,.h4{font-family:var(--heading-font);font-weight:var(--heading-weight);letter-spacing:var(--heading-letter-spacing)}h1,.h1{margin-bottom:var(--heading-spacing-h1);font-size:var(--heading-font-size-h1);line-height:var(--heading-line-height-h1)}h2,.h2{margin-bottom:var(--heading-spacing-h2);font-size:var(--heading-font-size-h2);line-height:var(--heading-line-height-h2)}h3,.h3{margin-bottom:var(--heading-spacing-h3);font-size:var(--heading-font-size-h3);line-height:var(--heading-line-height-h3)}h4,.h4{margin-bottom:var(--heading-spacing-h4);font-size:var(--heading-font-size-h4);line-height:var(--heading-line-height-h4)}h5,.h5{margin-bottom:var(--heading-spacing-h5);font-size:var(--heading-font-size-h5);line-height:var(--heading-line-height-h5)}h6,.h6{margin-bottom:var(--heading-spacing-h6);font-size:var(--heading-font-size-h6);line-height:var(--heading-line-height-h6)}:where(h1,h2,h3):has(+:is(h2,h3,h4)){margin-bottom:var(--heading-spacing-consecutive)}hr{display:flex;justify-content:center;align-items:center;height:0;border-style:solid;border-width:var(--border-sm) 0 0;color:var(--ui-border-color);overflow:visible;&:after{content:var(--hr-content);padding:0 var(--xs1);line-height:1;letter-spacing:var(--tracking-sm);background-color:var(--body-background-color)}}:where(hr):has(+:is(p)){margin-bottom:var(--prose-spacing)}ins{padding:.15em .3em;color:var(--ins-color);background-color:var(--ins-background-color);border-radius:var(--radius-sm);-webkit-text-decoration:none;text-decoration:none;&:before{content:"+ "}}mark{padding:.15em .5em;background:var(--marker-color);border-radius:1em 0}:where(ol,ul){list-style-type:none;padding:0}pre{font-family:var(--mono);font-size:var(--pre-font-size);white-space:pre-wrap;border-radius:var(--pre-border-radius)}q{font-style:italic}s{text-decoration-color:light-dark(var(--base-950),var(--base-50));text-decoration-style:wavy}sub,sup{line-height:1}}@layer elements{:root{quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(af),:not(:lang(af))>:lang(af){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ak),:not(:lang(ak))>:lang(ak){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(asa),:not(:lang(asa))>:lang(asa){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(az),:not(:lang(az))>:lang(az){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(bem),:not(:lang(bem))>:lang(bem){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(bez),:not(:lang(bez))>:lang(bez){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(bn),:not(:lang(bn))>:lang(bn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(brx),:not(:lang(brx))>:lang(brx){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(cgg),:not(:lang(cgg))>:lang(cgg){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(chr),:not(:lang(chr))>:lang(chr){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(cy),:not(:lang(cy))>:lang(cy){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(da),:not(:lang(da))>:lang(da){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(dav),:not(:lang(dav))>:lang(dav){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(dje),:not(:lang(dje))>:lang(dje){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(dz),:not(:lang(dz))>:lang(dz){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ebu),:not(:lang(ebu))>:lang(ebu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ee),:not(:lang(ee))>:lang(ee){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(en),:not(:lang(en))>:lang(en){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(fil),:not(:lang(fil))>:lang(fil){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(fo),:not(:lang(fo))>:lang(fo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ga),:not(:lang(ga))>:lang(ga){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(gd),:not(:lang(gd))>:lang(gd){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(gl),:not(:lang(gl))>:lang(gl){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(gu),:not(:lang(gu))>:lang(gu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(guz),:not(:lang(guz))>:lang(guz){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ha),:not(:lang(ha))>:lang(ha){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(hi),:not(:lang(hi))>:lang(hi){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(id),:not(:lang(id))>:lang(id){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ig),:not(:lang(ig))>:lang(ig){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(jmc),:not(:lang(jmc))>:lang(jmc){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kam),:not(:lang(kam))>:lang(kam){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kde),:not(:lang(kde))>:lang(kde){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kea),:not(:lang(kea))>:lang(kea){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(khq),:not(:lang(khq))>:lang(khq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ki),:not(:lang(ki))>:lang(ki){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kln),:not(:lang(kln))>:lang(kln){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(km),:not(:lang(km))>:lang(km){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kn),:not(:lang(kn))>:lang(kn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ko),:not(:lang(ko))>:lang(ko){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ksb),:not(:lang(ksb))>:lang(ksb){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lg),:not(:lang(lg))>:lang(lg){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ln),:not(:lang(ln))>:lang(ln){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lo),:not(:lang(lo))>:lang(lo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lrc),:not(:lang(lrc))>:lang(lrc){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lu),:not(:lang(lu))>:lang(lu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(luo),:not(:lang(luo))>:lang(luo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lv),:not(:lang(lv))>:lang(lv){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mas),:not(:lang(mas))>:lang(mas){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mer),:not(:lang(mer))>:lang(mer){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mfe),:not(:lang(mfe))>:lang(mfe){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mgo),:not(:lang(mgo))>:lang(mgo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ml),:not(:lang(ml))>:lang(ml){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mn),:not(:lang(mn))>:lang(mn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mr),:not(:lang(mr))>:lang(mr){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ms),:not(:lang(ms))>:lang(ms){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mt),:not(:lang(mt))>:lang(mt){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(my),:not(:lang(my))>:lang(my){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(naq),:not(:lang(naq))>:lang(naq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(nd),:not(:lang(nd))>:lang(nd){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ne),:not(:lang(ne))>:lang(ne){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(nus),:not(:lang(nus))>:lang(nus){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(nyn),:not(:lang(nyn))>:lang(nyn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(pa),:not(:lang(pa))>:lang(pa){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(pt),:not(:lang(pt))>:lang(pt){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(rof),:not(:lang(rof))>:lang(rof){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(rwk),:not(:lang(rwk))>:lang(rwk){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(saq),:not(:lang(saq))>:lang(saq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(sbp),:not(:lang(sbp))>:lang(sbp){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(seh),:not(:lang(seh))>:lang(seh){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ses),:not(:lang(ses))>:lang(ses){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(si),:not(:lang(si))>:lang(si){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(so),:not(:lang(so))>:lang(so){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(sw),:not(:lang(sw))>:lang(sw){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ta),:not(:lang(ta))>:lang(ta){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(te),:not(:lang(te))>:lang(te){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(teo),:not(:lang(teo))>:lang(teo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(th),:not(:lang(th))>:lang(th){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(to),:not(:lang(to))>:lang(to){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(tr),:not(:lang(tr))>:lang(tr){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(twq),:not(:lang(twq))>:lang(twq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(tzm),:not(:lang(tzm))>:lang(tzm){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(uz-Cyrl),:not(:lang(uz-Cyrl))>:lang(uz-Cyrl){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vai),:not(:lang(vai))>:lang(vai){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vai-Latn),:not(:lang(vai-Latn))>:lang(vai-Latn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vi),:not(:lang(vi))>:lang(vi){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vun),:not(:lang(vun))>:lang(vun){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(xog),:not(:lang(xog))>:lang(xog){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(yo),:not(:lang(yo))>:lang(yo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(yue-Hans),:not(:lang(yue-Hans))>:lang(yue-Hans){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(zh),:not(:lang(zh))>:lang(zh){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(zu),:not(:lang(zu))>:lang(zu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(uz),:not(:lang(uz))>:lang(uz){quotes:"\201c" "\201d" "\2019" "\2018"}:root:lang(eu),:not(:lang(eu))>:lang(eu){quotes:"\201c" "\201d" "\201c" "\201d"}:root:lang(tk),:not(:lang(tk))>:lang(tk){quotes:"\201c" "\201d" "\201c" "\201d"}:root:lang(ar),:not(:lang(ar))>:lang(ar){quotes:"\201d" "\201c" "\2019" "\2018"}:root:lang(ur),:not(:lang(ur))>:lang(ur){quotes:"\201d" "\201c" "\2019" "\2018"}:root:lang(fi),:not(:lang(fi))>:lang(fi){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(he),:not(:lang(he))>:lang(he){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(lag),:not(:lang(lag))>:lang(lag){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(rn),:not(:lang(rn))>:lang(rn){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(sn),:not(:lang(sn))>:lang(sn){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(sv),:not(:lang(sv))>:lang(sv){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(sr),:not(:lang(sr))>:lang(sr){quotes:"\201e" "\201c" "\2018" "\2018"}:root:lang(sr-Latn),:not(:lang(sr-Latn))>:lang(sr-Latn){quotes:"\201e" "\201c" "\2018" "\2018"}:root:lang(bg),:not(:lang(bg))>:lang(bg){quotes:"\201e" "\201c" "\201e" "\201c"}:root:lang(lt),:not(:lang(lt))>:lang(lt){quotes:"\201e" "\201c" "\201e" "\201c"}:root:lang(bs-Cyrl),:not(:lang(bs-Cyrl))>:lang(bs-Cyrl){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(cs),:not(:lang(cs))>:lang(cs){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(de),:not(:lang(de))>:lang(de){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(dsb),:not(:lang(dsb))>:lang(dsb){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(et),:not(:lang(et))>:lang(et){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(hr),:not(:lang(hr))>:lang(hr){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(hsb),:not(:lang(hsb))>:lang(hsb){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(is),:not(:lang(is))>:lang(is){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(lb),:not(:lang(lb))>:lang(lb){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(luy),:not(:lang(luy))>:lang(luy){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(mk),:not(:lang(mk))>:lang(mk){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(sk),:not(:lang(sk))>:lang(sk){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(sl),:not(:lang(sl))>:lang(sl){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(ka),:not(:lang(ka))>:lang(ka){quotes:"\201e" "\201c" "\ab" "\bb"}:root:lang(bs),:not(:lang(bs))>:lang(bs){quotes:"\201e" "\201d" "\2018" "\2019"}:root:lang(agq),:not(:lang(agq))>:lang(agq){quotes:"\201e" "\201d" "\201a" "\2019"}:root:lang(ff),:not(:lang(ff))>:lang(ff){quotes:"\201e" "\201d" "\201a" "\2019"}:root:lang(nmg),:not(:lang(nmg))>:lang(nmg){quotes:"\201e" "\201d" "\ab" "\bb"}:root:lang(ro),:not(:lang(ro))>:lang(ro){quotes:"\201e" "\201d" "\ab" "\bb"}:root:lang(pl),:not(:lang(pl))>:lang(pl){quotes:"\201e" "\201d" "\ab" "\bb"}:root:lang(hu),:not(:lang(hu))>:lang(hu){quotes:"\201e" "\201d" "\bb" "\ab"}:root:lang(nl),:not(:lang(nl))>:lang(nl){quotes:"\2018" "\2019" "\201c" "\201d"}:root:lang(ti-ER),:not(:lang(ti-ER))>:lang(ti-ER){quotes:"\2018" "\2019" "\201c" "\201d"}:root:lang(dua),:not(:lang(dua))>:lang(dua){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(ksf),:not(:lang(ksf))>:lang(ksf){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(rw),:not(:lang(rw))>:lang(rw){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(nn),:not(:lang(nn))>:lang(nn){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(nb),:not(:lang(nb))>:lang(nb){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(ast),:not(:lang(ast))>:lang(ast){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(bm),:not(:lang(bm))>:lang(bm){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(br),:not(:lang(br))>:lang(br){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(ca),:not(:lang(ca))>:lang(ca){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(dyo),:not(:lang(dyo))>:lang(dyo){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(el),:not(:lang(el))>:lang(el){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(es),:not(:lang(es))>:lang(es){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(ewo),:not(:lang(ewo))>:lang(ewo){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(mg),:not(:lang(mg))>:lang(mg){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(mua),:not(:lang(mua))>:lang(mua){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(sg),:not(:lang(sg))>:lang(sg){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(it),:not(:lang(it))>:lang(it){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(kab),:not(:lang(kab))>:lang(kab){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(kk),:not(:lang(kk))>:lang(kk){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(pt-PT),:not(:lang(pt-PT))>:lang(pt-PT){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(nnh),:not(:lang(nnh))>:lang(nnh){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(sq),:not(:lang(sq))>:lang(sq){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(bas),:not(:lang(bas))>:lang(bas){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(be),:not(:lang(be))>:lang(be){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(ky),:not(:lang(ky))>:lang(ky){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(sah),:not(:lang(sah))>:lang(sah){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(ru),:not(:lang(ru))>:lang(ru){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(uk),:not(:lang(uk))>:lang(uk){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(zgh),:not(:lang(zgh))>:lang(zgh){quotes:"\ab" "\bb" "\201e" "\201d"}:root:lang(shi),:not(:lang(shi))>:lang(shi){quotes:"\ab" "\bb" "\201e" "\201d"}:root:lang(shi-Latn),:not(:lang(shi-Latn))>:lang(shi-Latn){quotes:"\ab" "\bb" "\201e" "\201d"}:root:lang(am),:not(:lang(am))>:lang(am){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(az-Cyrl),:not(:lang(az-Cyrl))>:lang(az-Cyrl){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(fa),:not(:lang(fa))>:lang(fa){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(fr-CH),:not(:lang(fr-CH))>:lang(fr-CH){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(gsw),:not(:lang(gsw))>:lang(gsw){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(jgo),:not(:lang(jgo))>:lang(jgo){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(kkj),:not(:lang(kkj))>:lang(kkj){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(mzn),:not(:lang(mzn))>:lang(mzn){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(fr),:not(:lang(fr))>:lang(fr){quotes:"\ab" "\bb" "\ab" "\bb"}:root:lang(hy),:not(:lang(hy))>:lang(hy){quotes:"\ab" "\bb" "\ab" "\bb"}:root:lang(yav),:not(:lang(yav))>:lang(yav){quotes:"\ab" "\bb" "\ab" "\bb"}:root:lang(ja),:not(:lang(ja))>:lang(ja){quotes:"\300c" "\300d" "\300e" "\300f"}:root:lang(yue),:not(:lang(yue))>:lang(yue){quotes:"\300c" "\300d" "\300e" "\300f"}:root:lang(zh-Hant),:not(:lang(zh-Hant))>:lang(zh-Hant){quotes:"\300c" "\300d" "\300e" "\300f"}}@layer elements{audio,canvas,embed,iframe,img,object,picture,svg,video{display:block;vertical-align:middle;max-width:100%}img,svg,video,canvas{height:auto}audio{width:100%;max-width:var(--tera1)}audio:not([controls]){display:none}figcaption{font-style:italic;font-size:var(--text-sm)}figure{&:has(*+figcaption){figcaption{margin-top:var(--figcaption-spacing)}}&:has(figcaption+*){figcaption{margin-bottom:var(--figcaption-spacing)}}}iframe{border:var(--border-sm) solid var(--ui-border-color)}}@layer elements{caption{caption-side:bottom;margin-top:var(--table-caption-spacing);font-size:var(--text-sm)}table{border-spacing:0;border:var(--table-border-width) solid var(--table-border-color);border-radius:var(--table-border-radius);background-color:var(--table-background-color)}th,td{text-align:start;padding:var(--table-padding);border-bottom:var(--table-border-width) solid var(--table-border-color);border-inline-start:var(--table-border-width) solid var(--table-border-color)}tr{th:first-child,td:first-child{border-inline-start-width:0}}tbody{tr:last-child{th,td{border-bottom-width:0}}}tfoot{th,td{border-top:var(--table-border-width) solid var(--table-border-color);border-bottom-width:0}}}@layer elements{::placeholder{opacity:var(--o-4)}input,button,textarea,select{font:inherit;color:var(--text-color)}button{color:var(--text-color)}fieldset{border:var(--fieldset-border-width) solid var(--fieldset-border-color);border-radius:var(--fieldset-border-radius);padding:var(--fieldset-padding);ul:has([type=checkbox],[type=radio]){padding-inline-start:0}>[aria-hidden]{margin-bottom:var(--sm3);font-size:var(--text-lg);grid-column:1 / -1}}:is(input,select,textarea):user-invalid{border-color:var(--input-border-color-invalid)}input{&:where(:not([type=checkbox],[type=radio])){height:var(--input-height)}&:where(:not([type=color],[type=file],[type=reset],[type=submit])){padding:var(--input-padding)}&:where(:not([type=color])){border-radius:var(--input-border-radius)}&:where(:not([type=file])){border:var(--input-border-width) solid var(--input-border-color)}&[type=file]{width:100%;accent-color:var(--text-color)}&[type=number]{padding-inline-end:var(--xs1)}}label{display:block;&:has(+:is(input,select,textarea)){margin-bottom:var(--label-spacing)}}legend{position:absolute;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);width:1px;height:1px;white-space:nowrap}meter{width:100%;background:var(--meter-track-color);border-radius:var(--meter-border-radius);height:var(--meter-height);&::-webkit-meter-bar{background:var(--meter-track-color)}&::-webkit-meter-bar,&::-webkit-meter-optimum-value,&::-webkit-meter-suboptimum-value,&::-webkit-meter-even-less-good-value{height:var(--meter-height);border:none;border-radius:var(--meter-border-radius)}&::-webkit-meter-even-less-good-value{background:var(--meter-low-color)}&::-webkit-meter-suboptimum-value{background:var(--meter-medium-color)}&::-webkit-meter-optimum-value{background:var(--meter-high-color)}&:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:var(--meter-low-color)}&:-moz-meter-sub-optimum::-moz-meter-bar{background:var(--meter-medium-color)}&:-moz-meter-optimum::-moz-meter-bar{background:var(--meter-high-color)}}progress{appearance:none;width:100%;height:var(--progress-height);background:var(--progress-track-color);border-radius:var(--progress-border-radius);border:none;&::-moz-progress-bar{background:var(--progress-color);border-radius:var(--progress-border-radius)}&::-webkit-progress-bar{width:100%;background:var(--progress-track-color);border-radius:var(--progress-border-radius);height:var(--progress-height)}&::-webkit-progress-value{background:var(--progress-color);border-radius:var(--progress-border-radius)}}select{--split: calc(100% - var(--select-icon-size));display:flex;appearance:none;height:var(--input-height);padding:var(--xs1) calc(var(--input-padding) + var(--md1)) var(--xs1) var(--input-padding);border:var(--input-border-width) solid var(--input-border-color);border-radius:var(--input-border-radius);background:linear-gradient(to right,var(--body-background-color) 0 var(--split),var(--text-color) var(--split) 100%);mask-image:var(--select-icon),linear-gradient(to right,transparent calc(var(--split) - 1px),red 0),linear-gradient(red 0 0);mask-size:var(--select-icon-size),auto,auto;mask-position:calc(100% - var(--xs1)) center,0 0,0 0;mask-repeat:no-repeat;mask-clip:padding-box,padding-box,border-box;mask-origin:padding-box,padding-box,border-box;mask-composite:add,exclude;&:disabled{--disabled-color: light-dark( hsl(from var(--text-color) h s 70%), hsl(from var(--text-color) h s 40%) );cursor:not-allowed;color:var(--disabled-color);background:linear-gradient(to right,var(--body-background-color) 0 var(--split),var(--disabled-color) var(--split) 100%)}&[multiple]{height:auto;padding:var(--input-padding);background:var(--body-background-color);mask-image:none}}textarea{width:100%;padding:var(--input-padding);border-radius:var(--input-border-radius);border:var(--input-border-width) solid var(--input-border-color);resize:vertical;&:not([rows]){min-height:6em}}}@layer elements{dialog{min-width:var(--dialog-min-width);max-width:var(--dialog-max-width);padding:var(--dialog-padding);border:var(--dialog-border-width) solid var(--dialog-border-color);background-color:var(--dialog-background-color);border-radius:var(--dialog-border-radius);&::backdrop{background:var(--dialog-backdrop-color);opacity:var(--dialog-backdrop-opacity)}[aria-label="close pop-up"]{position:absolute;top:var(--xs3);right:var( --xs3 );background:transparent;border:none;outline:none;cursor:pointer}p:last-of-type{margin-bottom:0}}details{padding:var(--details-padding);border:var(--details-border-width) solid var(--details-border-color);background-color:var(--details-background-color);border-radius:var(--details-border-radius);cursor:pointer;summary{display:flex;justify-content:space-between;font-weight:var(--bold);&::-webkit-details-marker{display:none}&:after{content:"";width:var(--details-icon-size);height:var(--details-icon-size);background-color:currentColor;mask-image:var(--details-icon);mask-size:contain;mask-repeat:no-repeat;transition:transform var(--transition)}}&[open]>summary{margin-bottom:var(--details-spacing);&:after{transform:rotate(180deg)}}p:last-of-type{margin-bottom:0}}}@layer global{:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.a11y-skipLink{position:fixed;z-index:var(--z-top);inset-block-start:-100vb;inset-inline-start:0;padding:.75em 1.25em;background-color:var(--body-background-color);color:var(--text-color)}.a11y-skipLink:focus{inset-block-start:0}.a11y-srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}}@layer global{@keyframes fadeFromOpaque{0%{opacity:1}}@keyframes fadeToOpaque{to{opacity:1}}@keyframes fadeFromTransparent{0%{opacity:0}}@keyframes fadeToTransparent{to{opacity:0}}}@layer global{.grid{display:grid;--grid-tc: repeat(4, 1fr);--grid-cs: 1;--grid-ce: -1;grid-template-columns:var(--grid-tc);grid-column-gap:var(--grid-column-gap);grid-row-gap:var(--grid-row-gap)}.grid-flush{grid-column-gap:0;grid-row-gap:0}.grid>.grid_item{display:block;appearance:none;-webkit-appearance:none}.grid[col="1"]{--grid-tc: repeat(1, 1fr) }.grid[col="2"]{--grid-tc: repeat(2, 1fr) }.grid[col="3"]{--grid-tc: repeat(3, 1fr) }.grid[col="4"]{--grid-tc: repeat(4, 1fr) }.grid[col="5"]{--grid-tc: repeat(5, 1fr) }.grid[col="6"]{--grid-tc: repeat(6, 1fr) }.grid[col="7"]{--grid-tc: repeat(7, 1fr) }.grid[col="8"]{--grid-tc: repeat(8, 1fr) }.grid[col="9"]{--grid-tc: repeat(9, 1fr) }.grid[col="10"]{--grid-tc: repeat(10, 1fr) }.grid[col="11"]{--grid-tc: repeat(11, 1fr) }.grid[col="12"]{--grid-tc: repeat(12, 1fr) }.grid[col="13"]{--grid-tc: repeat(13, 1fr) }.grid[col="14"]{--grid-tc: repeat(14, 1fr) }.grid[col="15"]{--grid-tc: repeat(15, 1fr) }.grid[col="16"]{--grid-tc: repeat(16, 1fr) }.grid[col="17"]{--grid-tc: repeat(17, 1fr) }.grid[col="18"]{--grid-tc: repeat(18, 1fr) }.grid[col="19"]{--grid-tc: repeat(19, 1fr) }.grid[col="20"]{--grid-tc: repeat(20, 1fr) }.grid[col="21"]{--grid-tc: repeat(21, 1fr) }.grid[col="22"]{--grid-tc: repeat(22, 1fr) }.grid[col="23"]{--grid-tc: repeat(23, 1fr) }.grid[col="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span^="1"]{--grid-cs: 1 }.grid>.grid_item[span^="2"]{--grid-cs: 2 }.grid>.grid_item[span^="3"]{--grid-cs: 3 }.grid>.grid_item[span^="4"]{--grid-cs: 4 }.grid>.grid_item[span^="5"]{--grid-cs: 5 }.grid>.grid_item[span^="6"]{--grid-cs: 6 }.grid>.grid_item[span^="7"]{--grid-cs: 7 }.grid>.grid_item[span^="8"]{--grid-cs: 8 }.grid>.grid_item[span^="9"]{--grid-cs: 9 }.grid>.grid_item[span^="10"]{--grid-cs: 10 }.grid>.grid_item[span^="11"]{--grid-cs: 11 }.grid>.grid_item[span^="12"]{--grid-cs: 12 }.grid>.grid_item[span^="13"]{--grid-cs: 13 }.grid>.grid_item[span^="14"]{--grid-cs: 14 }.grid>.grid_item[span^="15"]{--grid-cs: 15 }.grid>.grid_item[span^="16"]{--grid-cs: 16 }.grid>.grid_item[span^="17"]{--grid-cs: 17 }.grid>.grid_item[span^="18"]{--grid-cs: 18 }.grid>.grid_item[span^="19"]{--grid-cs: 19 }.grid>.grid_item[span^="20"]{--grid-cs: 20 }.grid>.grid_item[span^="21"]{--grid-cs: 21 }.grid>.grid_item[span^="22"]{--grid-cs: 22 }.grid>.grid_item[span^="23"]{--grid-cs: 23 }.grid>.grid_item[span^="24"]{--grid-cs: 24 }.grid>.grid_item[span$="+1"],.grid>.grid_item[span="1"]{--grid-ce: 1 }.grid>.grid_item[span$="+2"],.grid>.grid_item[span$="-1"],.grid>.grid_item[span="2"]{--grid-ce: 2 }.grid>.grid_item[span$="+3"],.grid>.grid_item[span$="-2"],.grid>.grid_item[span="3"]{--grid-ce: 3 }.grid>.grid_item[span$="+4"],.grid>.grid_item[span$="-3"],.grid>.grid_item[span="4"]{--grid-ce: 4 }.grid>.grid_item[span$="+5"],.grid>.grid_item[span$="-4"],.grid>.grid_item[span="5"]{--grid-ce: 5 }.grid>.grid_item[span$="+6"],.grid>.grid_item[span$="-5"],.grid>.grid_item[span="6"]{--grid-ce: 6 }.grid>.grid_item[span$="+7"],.grid>.grid_item[span$="-6"],.grid>.grid_item[span="7"]{--grid-ce: 7 }.grid>.grid_item[span$="+8"],.grid>.grid_item[span$="-7"],.grid>.grid_item[span="8"]{--grid-ce: 8 }.grid>.grid_item[span$="+9"],.grid>.grid_item[span$="-8"],.grid>.grid_item[span="9"]{--grid-ce: 9 }.grid>.grid_item[span$="+10"],.grid>.grid_item[span$="-9"],.grid>.grid_item[span="10"]{--grid-ce: 10 }.grid>.grid_item[span$="+11"],.grid>.grid_item[span$="-10"],.grid>.grid_item[span="11"]{--grid-ce: 11 }.grid>.grid_item[span$="+12"],.grid>.grid_item[span$="-11"],.grid>.grid_item[span="12"]{--grid-ce: 12 }.grid>.grid_item[span$="+13"],.grid>.grid_item[span$="-12"],.grid>.grid_item[span="13"]{--grid-ce: 13 }.grid>.grid_item[span$="+14"],.grid>.grid_item[span$="-13"],.grid>.grid_item[span="14"]{--grid-ce: 14 }.grid>.grid_item[span$="+15"],.grid>.grid_item[span$="-14"],.grid>.grid_item[span="15"]{--grid-ce: 15 }.grid>.grid_item[span$="+16"],.grid>.grid_item[span$="-15"],.grid>.grid_item[span="16"]{--grid-ce: 16 }.grid>.grid_item[span$="+17"],.grid>.grid_item[span$="-16"],.grid>.grid_item[span="17"]{--grid-ce: 17 }.grid>.grid_item[span$="+18"],.grid>.grid_item[span$="-17"],.grid>.grid_item[span="18"]{--grid-ce: 18 }.grid>.grid_item[span$="+19"],.grid>.grid_item[span$="-18"],.grid>.grid_item[span="19"]{--grid-ce: 19 }.grid>.grid_item[span$="+20"],.grid>.grid_item[span$="-19"],.grid>.grid_item[span="20"]{--grid-ce: 20 }.grid>.grid_item[span$="+21"],.grid>.grid_item[span$="-20"],.grid>.grid_item[span="21"]{--grid-ce: 21 }.grid>.grid_item[span$="+22"],.grid>.grid_item[span$="-21"],.grid>.grid_item[span="22"]{--grid-ce: 22 }.grid>.grid_item[span$="+23"],.grid>.grid_item[span$="-22"],.grid>.grid_item[span="23"]{--grid-ce: 23 }.grid>.grid_item[span$="+24"],.grid>.grid_item[span$="-23"],.grid>.grid_item[span="24"]{--grid-ce: 24 }.grid>.grid_item[span$="-24"]{--grid-ce: 25 }.grid>.grid_item[span]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span*="+"],.grid>.grid_item[span*="-"],.grid>.grid_item[span*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span*="-"],.grid>.grid_item[span*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span=row]{grid-column:1 / -1}@media only screen and (width>=768px){.grid[col-md="1"]{--grid-tc: repeat(1, 1fr) }.grid[col-md="2"]{--grid-tc: repeat(2, 1fr) }.grid[col-md="3"]{--grid-tc: repeat(3, 1fr) }.grid[col-md="4"]{--grid-tc: repeat(4, 1fr) }.grid[col-md="5"]{--grid-tc: repeat(5, 1fr) }.grid[col-md="6"]{--grid-tc: repeat(6, 1fr) }.grid[col-md="7"]{--grid-tc: repeat(7, 1fr) }.grid[col-md="8"]{--grid-tc: repeat(8, 1fr) }.grid[col-md="9"]{--grid-tc: repeat(9, 1fr) }.grid[col-md="10"]{--grid-tc: repeat(10, 1fr) }.grid[col-md="11"]{--grid-tc: repeat(11, 1fr) }.grid[col-md="12"]{--grid-tc: repeat(12, 1fr) }.grid[col-md="13"]{--grid-tc: repeat(13, 1fr) }.grid[col-md="14"]{--grid-tc: repeat(14, 1fr) }.grid[col-md="15"]{--grid-tc: repeat(15, 1fr) }.grid[col-md="16"]{--grid-tc: repeat(16, 1fr) }.grid[col-md="17"]{--grid-tc: repeat(17, 1fr) }.grid[col-md="18"]{--grid-tc: repeat(18, 1fr) }.grid[col-md="19"]{--grid-tc: repeat(19, 1fr) }.grid[col-md="20"]{--grid-tc: repeat(20, 1fr) }.grid[col-md="21"]{--grid-tc: repeat(21, 1fr) }.grid[col-md="22"]{--grid-tc: repeat(22, 1fr) }.grid[col-md="23"]{--grid-tc: repeat(23, 1fr) }.grid[col-md="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span-md^="1"]{--grid-cs: 1 }.grid>.grid_item[span-md^="2"]{--grid-cs: 2 }.grid>.grid_item[span-md^="3"]{--grid-cs: 3 }.grid>.grid_item[span-md^="4"]{--grid-cs: 4 }.grid>.grid_item[span-md^="5"]{--grid-cs: 5 }.grid>.grid_item[span-md^="6"]{--grid-cs: 6 }.grid>.grid_item[span-md^="7"]{--grid-cs: 7 }.grid>.grid_item[span-md^="8"]{--grid-cs: 8 }.grid>.grid_item[span-md^="9"]{--grid-cs: 9 }.grid>.grid_item[span-md^="10"]{--grid-cs: 10 }.grid>.grid_item[span-md^="11"]{--grid-cs: 11 }.grid>.grid_item[span-md^="12"]{--grid-cs: 12 }.grid>.grid_item[span-md^="13"]{--grid-cs: 13 }.grid>.grid_item[span-md^="14"]{--grid-cs: 14 }.grid>.grid_item[span-md^="15"]{--grid-cs: 15 }.grid>.grid_item[span-md^="16"]{--grid-cs: 16 }.grid>.grid_item[span-md^="17"]{--grid-cs: 17 }.grid>.grid_item[span-md^="18"]{--grid-cs: 18 }.grid>.grid_item[span-md^="19"]{--grid-cs: 19 }.grid>.grid_item[span-md^="20"]{--grid-cs: 20 }.grid>.grid_item[span-md^="21"]{--grid-cs: 21 }.grid>.grid_item[span-md^="22"]{--grid-cs: 22 }.grid>.grid_item[span-md^="23"]{--grid-cs: 23 }.grid>.grid_item[span-md^="24"]{--grid-cs: 24 }.grid>.grid_item[span-md$="+1"],.grid>.grid_item[span-md="1"]{--grid-ce: 1 }.grid>.grid_item[span-md$="+2"],.grid>.grid_item[span-md$="-1"],.grid>.grid_item[span-md="2"]{--grid-ce: 2 }.grid>.grid_item[span-md$="+3"],.grid>.grid_item[span-md$="-2"],.grid>.grid_item[span-md="3"]{--grid-ce: 3 }.grid>.grid_item[span-md$="+4"],.grid>.grid_item[span-md$="-3"],.grid>.grid_item[span-md="4"]{--grid-ce: 4 }.grid>.grid_item[span-md$="+5"],.grid>.grid_item[span-md$="-4"],.grid>.grid_item[span-md="5"]{--grid-ce: 5 }.grid>.grid_item[span-md$="+6"],.grid>.grid_item[span-md$="-5"],.grid>.grid_item[span-md="6"]{--grid-ce: 6 }.grid>.grid_item[span-md$="+7"],.grid>.grid_item[span-md$="-6"],.grid>.grid_item[span-md="7"]{--grid-ce: 7 }.grid>.grid_item[span-md$="+8"],.grid>.grid_item[span-md$="-7"],.grid>.grid_item[span-md="8"]{--grid-ce: 8 }.grid>.grid_item[span-md$="+9"],.grid>.grid_item[span-md$="-8"],.grid>.grid_item[span-md="9"]{--grid-ce: 9 }.grid>.grid_item[span-md$="+10"],.grid>.grid_item[span-md$="-9"],.grid>.grid_item[span-md="10"]{--grid-ce: 10 }.grid>.grid_item[span-md$="+11"],.grid>.grid_item[span-md$="-10"],.grid>.grid_item[span-md="11"]{--grid-ce: 11 }.grid>.grid_item[span-md$="+12"],.grid>.grid_item[span-md$="-11"],.grid>.grid_item[span-md="12"]{--grid-ce: 12 }.grid>.grid_item[span-md$="+13"],.grid>.grid_item[span-md$="-12"],.grid>.grid_item[span-md="13"]{--grid-ce: 13 }.grid>.grid_item[span-md$="+14"],.grid>.grid_item[span-md$="-13"],.grid>.grid_item[span-md="14"]{--grid-ce: 14 }.grid>.grid_item[span-md$="+15"],.grid>.grid_item[span-md$="-14"],.grid>.grid_item[span-md="15"]{--grid-ce: 15 }.grid>.grid_item[span-md$="+16"],.grid>.grid_item[span-md$="-15"],.grid>.grid_item[span-md="16"]{--grid-ce: 16 }.grid>.grid_item[span-md$="+17"],.grid>.grid_item[span-md$="-16"],.grid>.grid_item[span-md="17"]{--grid-ce: 17 }.grid>.grid_item[span-md$="+18"],.grid>.grid_item[span-md$="-17"],.grid>.grid_item[span-md="18"]{--grid-ce: 18 }.grid>.grid_item[span-md$="+19"],.grid>.grid_item[span-md$="-18"],.grid>.grid_item[span-md="19"]{--grid-ce: 19 }.grid>.grid_item[span-md$="+20"],.grid>.grid_item[span-md$="-19"],.grid>.grid_item[span-md="20"]{--grid-ce: 20 }.grid>.grid_item[span-md$="+21"],.grid>.grid_item[span-md$="-20"],.grid>.grid_item[span-md="21"]{--grid-ce: 21 }.grid>.grid_item[span-md$="+22"],.grid>.grid_item[span-md$="-21"],.grid>.grid_item[span-md="22"]{--grid-ce: 22 }.grid>.grid_item[span-md$="+23"],.grid>.grid_item[span-md$="-22"],.grid>.grid_item[span-md="23"]{--grid-ce: 23 }.grid>.grid_item[span-md$="+24"],.grid>.grid_item[span-md$="-23"],.grid>.grid_item[span-md="24"]{--grid-ce: 24 }.grid>.grid_item[span-md$="-24"]{--grid-ce: 25 }.grid>.grid_item[span-md]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span-md*="+"],.grid>.grid_item[span-md*="-"],.grid>.grid_item[span-md*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span-md*="-"],.grid>.grid_item[span-md*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span-md=row]{grid-column:1 / -1}}@media only screen and (width>=1024px){.grid[col-lg="1"]{--grid-tc: repeat(1, 1fr) }.grid[col-lg="2"]{--grid-tc: repeat(2, 1fr) }.grid[col-lg="3"]{--grid-tc: repeat(3, 1fr) }.grid[col-lg="4"]{--grid-tc: repeat(4, 1fr) }.grid[col-lg="5"]{--grid-tc: repeat(5, 1fr) }.grid[col-lg="6"]{--grid-tc: repeat(6, 1fr) }.grid[col-lg="7"]{--grid-tc: repeat(7, 1fr) }.grid[col-lg="8"]{--grid-tc: repeat(8, 1fr) }.grid[col-lg="9"]{--grid-tc: repeat(9, 1fr) }.grid[col-lg="10"]{--grid-tc: repeat(10, 1fr) }.grid[col-lg="11"]{--grid-tc: repeat(11, 1fr) }.grid[col-lg="12"]{--grid-tc: repeat(12, 1fr) }.grid[col-lg="13"]{--grid-tc: repeat(13, 1fr) }.grid[col-lg="14"]{--grid-tc: repeat(14, 1fr) }.grid[col-lg="15"]{--grid-tc: repeat(15, 1fr) }.grid[col-lg="16"]{--grid-tc: repeat(16, 1fr) }.grid[col-lg="17"]{--grid-tc: repeat(17, 1fr) }.grid[col-lg="18"]{--grid-tc: repeat(18, 1fr) }.grid[col-lg="19"]{--grid-tc: repeat(19, 1fr) }.grid[col-lg="20"]{--grid-tc: repeat(20, 1fr) }.grid[col-lg="21"]{--grid-tc: repeat(21, 1fr) }.grid[col-lg="22"]{--grid-tc: repeat(22, 1fr) }.grid[col-lg="23"]{--grid-tc: repeat(23, 1fr) }.grid[col-lg="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span-lg^="1"]{--grid-cs: 1 }.grid>.grid_item[span-lg^="2"]{--grid-cs: 2 }.grid>.grid_item[span-lg^="3"]{--grid-cs: 3 }.grid>.grid_item[span-lg^="4"]{--grid-cs: 4 }.grid>.grid_item[span-lg^="5"]{--grid-cs: 5 }.grid>.grid_item[span-lg^="6"]{--grid-cs: 6 }.grid>.grid_item[span-lg^="7"]{--grid-cs: 7 }.grid>.grid_item[span-lg^="8"]{--grid-cs: 8 }.grid>.grid_item[span-lg^="9"]{--grid-cs: 9 }.grid>.grid_item[span-lg^="10"]{--grid-cs: 10 }.grid>.grid_item[span-lg^="11"]{--grid-cs: 11 }.grid>.grid_item[span-lg^="12"]{--grid-cs: 12 }.grid>.grid_item[span-lg^="13"]{--grid-cs: 13 }.grid>.grid_item[span-lg^="14"]{--grid-cs: 14 }.grid>.grid_item[span-lg^="15"]{--grid-cs: 15 }.grid>.grid_item[span-lg^="16"]{--grid-cs: 16 }.grid>.grid_item[span-lg^="17"]{--grid-cs: 17 }.grid>.grid_item[span-lg^="18"]{--grid-cs: 18 }.grid>.grid_item[span-lg^="19"]{--grid-cs: 19 }.grid>.grid_item[span-lg^="20"]{--grid-cs: 20 }.grid>.grid_item[span-lg^="21"]{--grid-cs: 21 }.grid>.grid_item[span-lg^="22"]{--grid-cs: 22 }.grid>.grid_item[span-lg^="23"]{--grid-cs: 23 }.grid>.grid_item[span-lg^="24"]{--grid-cs: 24 }.grid>.grid_item[span-lg$="+1"],.grid>.grid_item[span-lg="1"]{--grid-ce: 1 }.grid>.grid_item[span-lg$="+2"],.grid>.grid_item[span-lg$="-1"],.grid>.grid_item[span-lg="2"]{--grid-ce: 2 }.grid>.grid_item[span-lg$="+3"],.grid>.grid_item[span-lg$="-2"],.grid>.grid_item[span-lg="3"]{--grid-ce: 3 }.grid>.grid_item[span-lg$="+4"],.grid>.grid_item[span-lg$="-3"],.grid>.grid_item[span-lg="4"]{--grid-ce: 4 }.grid>.grid_item[span-lg$="+5"],.grid>.grid_item[span-lg$="-4"],.grid>.grid_item[span-lg="5"]{--grid-ce: 5 }.grid>.grid_item[span-lg$="+6"],.grid>.grid_item[span-lg$="-5"],.grid>.grid_item[span-lg="6"]{--grid-ce: 6 }.grid>.grid_item[span-lg$="+7"],.grid>.grid_item[span-lg$="-6"],.grid>.grid_item[span-lg="7"]{--grid-ce: 7 }.grid>.grid_item[span-lg$="+8"],.grid>.grid_item[span-lg$="-7"],.grid>.grid_item[span-lg="8"]{--grid-ce: 8 }.grid>.grid_item[span-lg$="+9"],.grid>.grid_item[span-lg$="-8"],.grid>.grid_item[span-lg="9"]{--grid-ce: 9 }.grid>.grid_item[span-lg$="+10"],.grid>.grid_item[span-lg$="-9"],.grid>.grid_item[span-lg="10"]{--grid-ce: 10 }.grid>.grid_item[span-lg$="+11"],.grid>.grid_item[span-lg$="-10"],.grid>.grid_item[span-lg="11"]{--grid-ce: 11 }.grid>.grid_item[span-lg$="+12"],.grid>.grid_item[span-lg$="-11"],.grid>.grid_item[span-lg="12"]{--grid-ce: 12 }.grid>.grid_item[span-lg$="+13"],.grid>.grid_item[span-lg$="-12"],.grid>.grid_item[span-lg="13"]{--grid-ce: 13 }.grid>.grid_item[span-lg$="+14"],.grid>.grid_item[span-lg$="-13"],.grid>.grid_item[span-lg="14"]{--grid-ce: 14 }.grid>.grid_item[span-lg$="+15"],.grid>.grid_item[span-lg$="-14"],.grid>.grid_item[span-lg="15"]{--grid-ce: 15 }.grid>.grid_item[span-lg$="+16"],.grid>.grid_item[span-lg$="-15"],.grid>.grid_item[span-lg="16"]{--grid-ce: 16 }.grid>.grid_item[span-lg$="+17"],.grid>.grid_item[span-lg$="-16"],.grid>.grid_item[span-lg="17"]{--grid-ce: 17 }.grid>.grid_item[span-lg$="+18"],.grid>.grid_item[span-lg$="-17"],.grid>.grid_item[span-lg="18"]{--grid-ce: 18 }.grid>.grid_item[span-lg$="+19"],.grid>.grid_item[span-lg$="-18"],.grid>.grid_item[span-lg="19"]{--grid-ce: 19 }.grid>.grid_item[span-lg$="+20"],.grid>.grid_item[span-lg$="-19"],.grid>.grid_item[span-lg="20"]{--grid-ce: 20 }.grid>.grid_item[span-lg$="+21"],.grid>.grid_item[span-lg$="-20"],.grid>.grid_item[span-lg="21"]{--grid-ce: 21 }.grid>.grid_item[span-lg$="+22"],.grid>.grid_item[span-lg$="-21"],.grid>.grid_item[span-lg="22"]{--grid-ce: 22 }.grid>.grid_item[span-lg$="+23"],.grid>.grid_item[span-lg$="-22"],.grid>.grid_item[span-lg="23"]{--grid-ce: 23 }.grid>.grid_item[span-lg$="+24"],.grid>.grid_item[span-lg$="-23"],.grid>.grid_item[span-lg="24"]{--grid-ce: 24 }.grid>.grid_item[span-lg$="-24"]{--grid-ce: 25 }.grid>.grid_item[span-lg]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span-lg*="+"],.grid>.grid_item[span-lg*="-"],.grid>.grid_item[span-lg*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span-lg*="-"],.grid>.grid_item[span-lg*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span-lg=row]{grid-column:1 / -1}}@media only screen and (width>=1440px){.grid[col-xl="1"]{--grid-tc: repeat(1, 1fr) }.grid[col-xl="2"]{--grid-tc: repeat(2, 1fr) }.grid[col-xl="3"]{--grid-tc: repeat(3, 1fr) }.grid[col-xl="4"]{--grid-tc: repeat(4, 1fr) }.grid[col-xl="5"]{--grid-tc: repeat(5, 1fr) }.grid[col-xl="6"]{--grid-tc: repeat(6, 1fr) }.grid[col-xl="7"]{--grid-tc: repeat(7, 1fr) }.grid[col-xl="8"]{--grid-tc: repeat(8, 1fr) }.grid[col-xl="9"]{--grid-tc: repeat(9, 1fr) }.grid[col-xl="10"]{--grid-tc: repeat(10, 1fr) }.grid[col-xl="11"]{--grid-tc: repeat(11, 1fr) }.grid[col-xl="12"]{--grid-tc: repeat(12, 1fr) }.grid[col-xl="13"]{--grid-tc: repeat(13, 1fr) }.grid[col-xl="14"]{--grid-tc: repeat(14, 1fr) }.grid[col-xl="15"]{--grid-tc: repeat(15, 1fr) }.grid[col-xl="16"]{--grid-tc: repeat(16, 1fr) }.grid[col-xl="17"]{--grid-tc: repeat(17, 1fr) }.grid[col-xl="18"]{--grid-tc: repeat(18, 1fr) }.grid[col-xl="19"]{--grid-tc: repeat(19, 1fr) }.grid[col-xl="20"]{--grid-tc: repeat(20, 1fr) }.grid[col-xl="21"]{--grid-tc: repeat(21, 1fr) }.grid[col-xl="22"]{--grid-tc: repeat(22, 1fr) }.grid[col-xl="23"]{--grid-tc: repeat(23, 1fr) }.grid[col-xl="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span-xl^="1"]{--grid-cs: 1 }.grid>.grid_item[span-xl^="2"]{--grid-cs: 2 }.grid>.grid_item[span-xl^="3"]{--grid-cs: 3 }.grid>.grid_item[span-xl^="4"]{--grid-cs: 4 }.grid>.grid_item[span-xl^="5"]{--grid-cs: 5 }.grid>.grid_item[span-xl^="6"]{--grid-cs: 6 }.grid>.grid_item[span-xl^="7"]{--grid-cs: 7 }.grid>.grid_item[span-xl^="8"]{--grid-cs: 8 }.grid>.grid_item[span-xl^="9"]{--grid-cs: 9 }.grid>.grid_item[span-xl^="10"]{--grid-cs: 10 }.grid>.grid_item[span-xl^="11"]{--grid-cs: 11 }.grid>.grid_item[span-xl^="12"]{--grid-cs: 12 }.grid>.grid_item[span-xl^="13"]{--grid-cs: 13 }.grid>.grid_item[span-xl^="14"]{--grid-cs: 14 }.grid>.grid_item[span-xl^="15"]{--grid-cs: 15 }.grid>.grid_item[span-xl^="16"]{--grid-cs: 16 }.grid>.grid_item[span-xl^="17"]{--grid-cs: 17 }.grid>.grid_item[span-xl^="18"]{--grid-cs: 18 }.grid>.grid_item[span-xl^="19"]{--grid-cs: 19 }.grid>.grid_item[span-xl^="20"]{--grid-cs: 20 }.grid>.grid_item[span-xl^="21"]{--grid-cs: 21 }.grid>.grid_item[span-xl^="22"]{--grid-cs: 22 }.grid>.grid_item[span-xl^="23"]{--grid-cs: 23 }.grid>.grid_item[span-xl^="24"]{--grid-cs: 24 }.grid>.grid_item[span-xl$="+1"],.grid>.grid_item[span-xl="1"]{--grid-ce: 1 }.grid>.grid_item[span-xl$="+2"],.grid>.grid_item[span-xl$="-1"],.grid>.grid_item[span-xl="2"]{--grid-ce: 2 }.grid>.grid_item[span-xl$="+3"],.grid>.grid_item[span-xl$="-2"],.grid>.grid_item[span-xl="3"]{--grid-ce: 3 }.grid>.grid_item[span-xl$="+4"],.grid>.grid_item[span-xl$="-3"],.grid>.grid_item[span-xl="4"]{--grid-ce: 4 }.grid>.grid_item[span-xl$="+5"],.grid>.grid_item[span-xl$="-4"],.grid>.grid_item[span-xl="5"]{--grid-ce: 5 }.grid>.grid_item[span-xl$="+6"],.grid>.grid_item[span-xl$="-5"],.grid>.grid_item[span-xl="6"]{--grid-ce: 6 }.grid>.grid_item[span-xl$="+7"],.grid>.grid_item[span-xl$="-6"],.grid>.grid_item[span-xl="7"]{--grid-ce: 7 }.grid>.grid_item[span-xl$="+8"],.grid>.grid_item[span-xl$="-7"],.grid>.grid_item[span-xl="8"]{--grid-ce: 8 }.grid>.grid_item[span-xl$="+9"],.grid>.grid_item[span-xl$="-8"],.grid>.grid_item[span-xl="9"]{--grid-ce: 9 }.grid>.grid_item[span-xl$="+10"],.grid>.grid_item[span-xl$="-9"],.grid>.grid_item[span-xl="10"]{--grid-ce: 10 }.grid>.grid_item[span-xl$="+11"],.grid>.grid_item[span-xl$="-10"],.grid>.grid_item[span-xl="11"]{--grid-ce: 11 }.grid>.grid_item[span-xl$="+12"],.grid>.grid_item[span-xl$="-11"],.grid>.grid_item[span-xl="12"]{--grid-ce: 12 }.grid>.grid_item[span-xl$="+13"],.grid>.grid_item[span-xl$="-12"],.grid>.grid_item[span-xl="13"]{--grid-ce: 13 }.grid>.grid_item[span-xl$="+14"],.grid>.grid_item[span-xl$="-13"],.grid>.grid_item[span-xl="14"]{--grid-ce: 14 }.grid>.grid_item[span-xl$="+15"],.grid>.grid_item[span-xl$="-14"],.grid>.grid_item[span-xl="15"]{--grid-ce: 15 }.grid>.grid_item[span-xl$="+16"],.grid>.grid_item[span-xl$="-15"],.grid>.grid_item[span-xl="16"]{--grid-ce: 16 }.grid>.grid_item[span-xl$="+17"],.grid>.grid_item[span-xl$="-16"],.grid>.grid_item[span-xl="17"]{--grid-ce: 17 }.grid>.grid_item[span-xl$="+18"],.grid>.grid_item[span-xl$="-17"],.grid>.grid_item[span-xl="18"]{--grid-ce: 18 }.grid>.grid_item[span-xl$="+19"],.grid>.grid_item[span-xl$="-18"],.grid>.grid_item[span-xl="19"]{--grid-ce: 19 }.grid>.grid_item[span-xl$="+20"],.grid>.grid_item[span-xl$="-19"],.grid>.grid_item[span-xl="20"]{--grid-ce: 20 }.grid>.grid_item[span-xl$="+21"],.grid>.grid_item[span-xl$="-20"],.grid>.grid_item[span-xl="21"]{--grid-ce: 21 }.grid>.grid_item[span-xl$="+22"],.grid>.grid_item[span-xl$="-21"],.grid>.grid_item[span-xl="22"]{--grid-ce: 22 }.grid>.grid_item[span-xl$="+23"],.grid>.grid_item[span-xl$="-22"],.grid>.grid_item[span-xl="23"]{--grid-ce: 23 }.grid>.grid_item[span-xl$="+24"],.grid>.grid_item[span-xl$="-23"],.grid>.grid_item[span-xl="24"]{--grid-ce: 24 }.grid>.grid_item[span-xl$="-24"]{--grid-ce: 25 }.grid>.grid_item[span-xl]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span-xl*="+"],.grid>.grid_item[span-xl*="-"],.grid>.grid_item[span-xl*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span-xl*="-"],.grid>.grid_item[span-xl*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span-xl=row]{grid-column:1 / -1}}}@layer global{.layout{display:flex;flex-direction:column;width:100vw;min-height:100vh;.layout_content{flex:1}}.layout_content_main{container:main / inline-size}.layout-centered{.layout_content{display:grid;gap:var(--sm3);grid-template-columns:1fr minmax(0,var(--layout-content-width)) 1fr;margin-top:var(--lg1);margin-bottom:var(--sm1);@media(width>=768px){margin-top:var(--xl3);margin-bottom:var(--md3);gap:var(--md3)}}.layout_content_main{grid-column:2}}.layout-sidebar{.layout_content{@media(width>=768px){display:grid;grid-template-columns:var(--layout-aside-width) minmax(0,1fr)}}.layout_content_main{padding:var(--sm2);@media(width>=768px){grid-row:1;grid-column:2;padding:var(--lg1) var(--md2)}}.layout_content_aside{@media(width>=768px){grid-row:1;grid-column:1;padding:var(--lg1) var(--md3)}}}.layout-sidebar-end{.layout_content{@media(width>=768px){grid-template-columns:minmax(0,1fr) var(--layout-aside-width)}}.layout_content_main{@media(width>=768px){grid-column:1}}.layout_content_aside{@media(width>=768px){grid-column:2}}}.layout-docs{.layout_content{@media(width>=768px){display:grid;grid-template-columns:var(--layout-aside-width) minmax(0,1fr)}@media(width>=1024px){grid-template-columns:var(--layout-aside-width) minmax(0,var(--layout-content-width)) var(--layout-toc-width)}}.layout_content_main{padding:var(--sm2);@media(width>=768px){grid-row:1;grid-column:2;padding:var(--lg1) var(--md2)}}.layout_content_aside{display:none;@media(width>=768px){display:block;grid-row:1;grid-column:1;padding:var(--lg1) var(--md3)}}.layout_content_aside-toc{@media(width>=768px){display:none}@media(width>=1024px){display:block;grid-row:1;grid-column:3;padding:var(--lg1) var(--md3)}}}.layout-split{.layout_content{display:grid;@media(width>=768px){grid-template-columns:1fr 1fr}}}.layout-cover{min-height:100dvh;.layout_content{display:grid;place-items:center}}}@layer global{@scope(.prose)to (.not-prose){:is(p,ul,ol,blockquote,table):has(+:is(h1,h2,h3,h4)){margin-bottom:calc(var(--prose-spacing) * 2)}p,ul,ol,dl{margin-bottom:var(--prose-spacing);p,ul,ol,dl{margin-bottom:0}}ul,ol{ul,ol{margin-inline-start:0;padding-inline-start:var(--sm2)}li{margin-bottom:.5em;&::marker{color:light-dark(var(--base-300),var(--base-600))}}}ul{margin-inline-start:var(--sm2);list-style-type:"\2192 "}ol{margin-inline-start:var(--md2);list-style-type:decimal-leading-zero;li::marker{font-size:var(--text-sm)}}table{margin-top:var(--md1);margin-bottom:var(--md1)}}}@layer global{.wrap{display:grid;grid-template-columns:1fr var(--wrap-width) 1fr;>*,>astro-island>*,>astro-slot>*,>astro-static-slot>*{grid-column:2;padding-inline:var(--wrap-spacing);@media(width>=768px){padding-inline:var(--wrap-md-spacing)}@media(width>=1024px){padding-inline:var(--wrap-lg-spacing)}}}.wrap-sm{--wrap-width: var(--wrap-width-sm)}.wrap-md{--wrap-width: var(--wrap-width-md)}.wrap-lg{--wrap-width: var(--wrap-width-lg)}.wrap_content-fullBleed{grid-column:1 / -1;width:100%;object-fit:cover}}@layer helpers{.c-base-0{color:var(--base-0)!important}.bdc-base-0{border-color:var(--base-0)!important}.bgc-base-0{background-color:var(--base-0)!important}.c-base-50{color:var(--base-50)!important}.bdc-base-50{border-color:var(--base-50)!important}.bgc-base-50{background-color:var(--base-50)!important}.c-base-100{color:var(--base-100)!important}.bdc-base-100{border-color:var(--base-100)!important}.bgc-base-100{background-color:var(--base-100)!important}.c-base-200{color:var(--base-200)!important}.bdc-base-200{border-color:var(--base-200)!important}.bgc-base-200{background-color:var(--base-200)!important}.c-base-300{color:var(--base-300)!important}.bdc-base-300{border-color:var(--base-300)!important}.bgc-base-300{background-color:var(--base-300)!important}.c-base-400{color:var(--base-400)!important}.bdc-base-400{border-color:var(--base-400)!important}.bgc-base-400{background-color:var(--base-400)!important}.c-base-500{color:var(--base-500)!important}.bdc-base-500{border-color:var(--base-500)!important}.bgc-base-500{background-color:var(--base-500)!important}.c-base-600{color:var(--base-600)!important}.bdc-base-600{border-color:var(--base-600)!important}.bgc-base-600{background-color:var(--base-600)!important}.c-base-700{color:var(--base-700)!important}.bdc-base-700{border-color:var(--base-700)!important}.bgc-base-700{background-color:var(--base-700)!important}.c-base-800{color:var(--base-800)!important}.bdc-base-800{border-color:var(--base-800)!important}.bgc-base-800{background-color:var(--base-800)!important}.c-base-900{color:var(--base-900)!important}.bdc-base-900{border-color:var(--base-900)!important}.bgc-base-900{background-color:var(--base-900)!important}.c-base-950{color:var(--base-950)!important}.bdc-base-950{border-color:var(--base-950)!important}.bgc-base-950{background-color:var(--base-950)!important}.c-primary-50{color:var(--primary-50)!important}.bdc-primary-50{border-color:var(--primary-50)!important}.bgc-primary-50{background-color:var(--primary-50)!important}.c-primary-100{color:var(--primary-100)!important}.bdc-primary-100{border-color:var(--primary-100)!important}.bgc-primary-100{background-color:var(--primary-100)!important}.c-primary-200{color:var(--primary-200)!important}.bdc-primary-200{border-color:var(--primary-200)!important}.bgc-primary-200{background-color:var(--primary-200)!important}.c-primary-300{color:var(--primary-300)!important}.bdc-primary-300{border-color:var(--primary-300)!important}.bgc-primary-300{background-color:var(--primary-300)!important}.c-primary-400{color:var(--primary-400)!important}.bdc-primary-400{border-color:var(--primary-400)!important}.bgc-primary-400{background-color:var(--primary-400)!important}.c-primary-500{color:var(--primary-500)!important}.bdc-primary-500{border-color:var(--primary-500)!important}.bgc-primary-500{background-color:var(--primary-500)!important}.c-primary-600{color:var(--primary-600)!important}.bdc-primary-600{border-color:var(--primary-600)!important}.bgc-primary-600{background-color:var(--primary-600)!important}.c-primary-700{color:var(--primary-700)!important}.bdc-primary-700{border-color:var(--primary-700)!important}.bgc-primary-700{background-color:var(--primary-700)!important}.c-primary-800{color:var(--primary-800)!important}.bdc-primary-800{border-color:var(--primary-800)!important}.bgc-primary-800{background-color:var(--primary-800)!important}.c-primary-900{color:var(--primary-900)!important}.bdc-primary-900{border-color:var(--primary-900)!important}.bgc-primary-900{background-color:var(--primary-900)!important}.c-primary-950{color:var(--primary-950)!important}.bdc-primary-950{border-color:var(--primary-950)!important}.bgc-primary-950{background-color:var(--primary-950)!important}.c-yes-100{color:var(--yes-100)!important}.bdc-yes-100{border-color:var(--yes-100)!important}.bgc-yes-100{background-color:var(--yes-100)!important}.c-yes-200{color:var(--yes-200)!important}.bdc-yes-200{border-color:var(--yes-200)!important}.bgc-yes-200{background-color:var(--yes-200)!important}.c-yes-300{color:var(--yes-300)!important}.bdc-yes-300{border-color:var(--yes-300)!important}.bgc-yes-300{background-color:var(--yes-300)!important}.c-yes-400{color:var(--yes-400)!important}.bdc-yes-400{border-color:var(--yes-400)!important}.bgc-yes-400{background-color:var(--yes-400)!important}.c-yes-500{color:var(--yes-500)!important}.bdc-yes-500{border-color:var(--yes-500)!important}.bgc-yes-500{background-color:var(--yes-500)!important}.c-no-100{color:var(--no-100)!important}.bdc-no-100{border-color:var(--no-100)!important}.bgc-no-100{background-color:var(--no-100)!important}.c-no-200{color:var(--no-200)!important}.bdc-no-200{border-color:var(--no-200)!important}.bgc-no-200{background-color:var(--no-200)!important}.c-no-300{color:var(--no-300)!important}.bdc-no-300{border-color:var(--no-300)!important}.bgc-no-300{background-color:var(--no-300)!important}.c-no-400{color:var(--no-400)!important}.bdc-no-400{border-color:var(--no-400)!important}.bgc-no-400{background-color:var(--no-400)!important}.c-no-500{color:var(--no-500)!important}.bdc-no-500{border-color:var(--no-500)!important}.bgc-no-500{background-color:var(--no-500)!important}.c-maybe-100{color:var(--maybe-100)!important}.bdc-maybe-100{border-color:var(--maybe-100)!important}.bgc-maybe-100{background-color:var(--maybe-100)!important}.c-maybe-200{color:var(--maybe-200)!important}.bdc-maybe-200{border-color:var(--maybe-200)!important}.bgc-maybe-200{background-color:var(--maybe-200)!important}.c-maybe-300{color:var(--maybe-300)!important}.bdc-maybe-300{border-color:var(--maybe-300)!important}.bgc-maybe-300{background-color:var(--maybe-300)!important}.c-maybe-400{color:var(--maybe-400)!important}.bdc-maybe-400{border-color:var(--maybe-400)!important}.bgc-maybe-400{background-color:var(--maybe-400)!important}.c-maybe-500{color:var(--maybe-500)!important}.bdc-maybe-500{border-color:var(--maybe-500)!important}.bgc-maybe-500{background-color:var(--maybe-500)!important}}@layer helpers{body.dev{--baseline: 8;background-size:100% calc(var(--baseline) * 1px)!important;background-image:linear-gradient(to bottom,#0000 calc((var(--baseline) - 1) * 1px),#ff69b4 calc(var(--baseline) * 1px))!important}.dev-error{position:fixed!important;top:var(--md1)!important;left:var(--md1)!important;z-index:var(--z-top)!important;padding:var(--sm1)!important;font-size:1rem!important;color:var(--danger-500)!important;background:var(--danger-100)!important;border:1px solid var(--danger-500)!important;border-radius:var(--radius-md)!important}}@layer helpers{.of-auto,.overflow-auto{overflow:auto!important}.of-hidden,.overflow-hidden{overflow:hidden!important}.of-clip,.overflow-clip{overflow:clip!important}.of-visible,.overflow-visible{overflow:visible!important}.of-scroll,.overflow-scroll{overflow:scroll!important}.of-x-auto,.overflow-x-auto{overflow-x:auto!important}.of-y-auto,.overflow-y-auto{overflow-y:auto!important}.of-x-hidden,.overflow-x-hidden{overflow-x:hidden!important}.of-y-hidden,.overflow-y-hidden{overflow-y:hidden!important}.of-x-clip,.overflow-x-clip{overflow-x:clip!important}.of-y-clip,.overflow-y-clip{overflow-y:clip!important}.of-x-visible,.overflow-x-visible{overflow-x:visible!important}.of-y-visible,.overflow-y-visible{overflow-y:visible!important}.of-x-scroll,.overflow-x-scroll{overflow-x:scroll!important}.of-y-scroll,.overflow-y-scroll{overflow-y:scroll!important}.position-static{position:static!important}.position-fixed{position:fixed!important}.position-absolute{position:absolute!important}.position-relative{position:relative!important}.position-sticky{position:sticky!important}.visibility-visible{visibility:visible!important}.visibility-hidden{visibility:hidden!important}.visibility-collapse{visibility:collapse!important}.z-auto{z-index:auto!important}.z-bottom{z-index:var(--z-bottom)!important}.z-0{z-index:var(--z-0)!important}.z-1{z-index:var(--z-1)!important}.z-2{z-index:var(--z-2)!important}.z-3{z-index:var(--z-3)!important}.z-4{z-index:var(--z-4)!important}.z-5{z-index:var(--z-5)!important}.z-top{z-index:var(--z-top)!important}}@layer helpers{.o-0{opacity:var(--o-0)!important}.o-1{opacity:var(--o-1)!important}.o-2{opacity:var(--o-2)!important}.o-3{opacity:var(--o-3)!important}.o-4{opacity:var(--o-4)!important}.o-5{opacity:var(--o-5)!important}}@layer helpers{.ar-square{aspect-ratio:var(--ar-square)!important}.ar-landscape{aspect-ratio:var(--ar-landscape)!important}.ar-portrait{aspect-ratio:var(--ar-portrait)!important}.ar-widescreen{aspect-ratio:var(--ar-widescreen)!important}.ar-golden{aspect-ratio:var(--ar-golden)!important}}@layer helpers{.w-0{width:0!important}.h-0{height:0!important}.m-0{margin:0!important}.mt-0{margin-top:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mr-0{margin-right:0!important}.mis-0{margin-inline-start:0!important}.mie-0{margin-inline-end:0!important}.p-0{padding:0!important}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.pis-0{padding-inline-start:0!important}.pie-0{padding-inline-end:0!important}.w-xs1{width:var(--xs1)!important}.h-xs1{height:var(--xs1)!important}.m-xs1{margin:var(--xs1)!important}.mt-xs1{margin-top:var(--xs1)!important}.mb-xs1{margin-bottom:var(--xs1)!important}.ml-xs1{margin-left:var(--xs1)!important}.mr-xs1{margin-right:var(--xs1)!important}.mis-xs1{margin-inline-start:var(--xs1)!important}.mie-xs1{margin-inline-end:var(--xs1)!important}.p-xs1{padding:var(--xs1)!important}.pt-xs1{padding-top:var(--xs1)!important}.pb-xs1{padding-bottom:var(--xs1)!important}.pl-xs1{padding-left:var(--xs1)!important}.pr-xs1{padding-right:var(--xs1)!important}.pis-xs1{padding-inline-start:var(--xs1)!important}.pie-xs1{padding-inline-end:var(--xs1)!important}.w-xs2{width:var(--xs2)!important}.h-xs2{height:var(--xs2)!important}.m-xs2{margin:var(--xs2)!important}.mt-xs2{margin-top:var(--xs2)!important}.mb-xs2{margin-bottom:var(--xs2)!important}.ml-xs2{margin-left:var(--xs2)!important}.mr-xs2{margin-right:var(--xs2)!important}.mis-xs2{margin-inline-start:var(--xs2)!important}.mie-xs2{margin-inline-end:var(--xs2)!important}.p-xs2{padding:var(--xs2)!important}.pt-xs2{padding-top:var(--xs2)!important}.pb-xs2{padding-bottom:var(--xs2)!important}.pl-xs2{padding-left:var(--xs2)!important}.pr-xs2{padding-right:var(--xs2)!important}.pis-xs2{padding-inline-start:var(--xs2)!important}.pie-xs2{padding-inline-end:var(--xs2)!important}.w-xs3{width:var(--xs3)!important}.h-xs3{height:var(--xs3)!important}.m-xs3{margin:var(--xs3)!important}.mt-xs3{margin-top:var(--xs3)!important}.mb-xs3{margin-bottom:var(--xs3)!important}.ml-xs3{margin-left:var(--xs3)!important}.mr-xs3{margin-right:var(--xs3)!important}.mis-xs3{margin-inline-start:var(--xs3)!important}.mie-xs3{margin-inline-end:var(--xs3)!important}.p-xs3{padding:var(--xs3)!important}.pt-xs3{padding-top:var(--xs3)!important}.pb-xs3{padding-bottom:var(--xs3)!important}.pl-xs3{padding-left:var(--xs3)!important}.pr-xs3{padding-right:var(--xs3)!important}.pis-xs3{padding-inline-start:var(--xs3)!important}.pie-xs3{padding-inline-end:var(--xs3)!important}.w-sm1{width:var(--sm1)!important}.h-sm1{height:var(--sm1)!important}.m-sm1{margin:var(--sm1)!important}.mt-sm1{margin-top:var(--sm1)!important}.mb-sm1{margin-bottom:var(--sm1)!important}.ml-sm1{margin-left:var(--sm1)!important}.mr-sm1{margin-right:var(--sm1)!important}.mis-sm1{margin-inline-start:var(--sm1)!important}.mie-sm1{margin-inline-end:var(--sm1)!important}.p-sm1{padding:var(--sm1)!important}.pt-sm1{padding-top:var(--sm1)!important}.pb-sm1{padding-bottom:var(--sm1)!important}.pl-sm1{padding-left:var(--sm1)!important}.pr-sm1{padding-right:var(--sm1)!important}.pis-sm1{padding-inline-start:var(--sm1)!important}.pie-sm1{padding-inline-end:var(--sm1)!important}.w-sm2{width:var(--sm2)!important}.h-sm2{height:var(--sm2)!important}.m-sm2{margin:var(--sm2)!important}.mt-sm2{margin-top:var(--sm2)!important}.mb-sm2{margin-bottom:var(--sm2)!important}.ml-sm2{margin-left:var(--sm2)!important}.mr-sm2{margin-right:var(--sm2)!important}.mis-sm2{margin-inline-start:var(--sm2)!important}.mie-sm2{margin-inline-end:var(--sm2)!important}.p-sm2{padding:var(--sm2)!important}.pt-sm2{padding-top:var(--sm2)!important}.pb-sm2{padding-bottom:var(--sm2)!important}.pl-sm2{padding-left:var(--sm2)!important}.pr-sm2{padding-right:var(--sm2)!important}.pis-sm2{padding-inline-start:var(--sm2)!important}.pie-sm2{padding-inline-end:var(--sm2)!important}.w-sm3{width:var(--sm3)!important}.h-sm3{height:var(--sm3)!important}.m-sm3{margin:var(--sm3)!important}.mt-sm3{margin-top:var(--sm3)!important}.mb-sm3{margin-bottom:var(--sm3)!important}.ml-sm3{margin-left:var(--sm3)!important}.mr-sm3{margin-right:var(--sm3)!important}.mis-sm3{margin-inline-start:var(--sm3)!important}.mie-sm3{margin-inline-end:var(--sm3)!important}.p-sm3{padding:var(--sm3)!important}.pt-sm3{padding-top:var(--sm3)!important}.pb-sm3{padding-bottom:var(--sm3)!important}.pl-sm3{padding-left:var(--sm3)!important}.pr-sm3{padding-right:var(--sm3)!important}.pis-sm3{padding-inline-start:var(--sm3)!important}.pie-sm3{padding-inline-end:var(--sm3)!important}.w-md1{width:var(--md1)!important}.h-md1{height:var(--md1)!important}.m-md1{margin:var(--md1)!important}.mt-md1{margin-top:var(--md1)!important}.mb-md1{margin-bottom:var(--md1)!important}.ml-md1{margin-left:var(--md1)!important}.mr-md1{margin-right:var(--md1)!important}.mis-md1{margin-inline-start:var(--md1)!important}.mie-md1{margin-inline-end:var(--md1)!important}.p-md1{padding:var(--md1)!important}.pt-md1{padding-top:var(--md1)!important}.pb-md1{padding-bottom:var(--md1)!important}.pl-md1{padding-left:var(--md1)!important}.pr-md1{padding-right:var(--md1)!important}.pis-md1{padding-inline-start:var(--md1)!important}.pie-md1{padding-inline-end:var(--md1)!important}.w-md2{width:var(--md2)!important}.h-md2{height:var(--md2)!important}.m-md2{margin:var(--md2)!important}.mt-md2{margin-top:var(--md2)!important}.mb-md2{margin-bottom:var(--md2)!important}.ml-md2{margin-left:var(--md2)!important}.mr-md2{margin-right:var(--md2)!important}.mis-md2{margin-inline-start:var(--md2)!important}.mie-md2{margin-inline-end:var(--md2)!important}.p-md2{padding:var(--md2)!important}.pt-md2{padding-top:var(--md2)!important}.pb-md2{padding-bottom:var(--md2)!important}.pl-md2{padding-left:var(--md2)!important}.pr-md2{padding-right:var(--md2)!important}.pis-md2{padding-inline-start:var(--md2)!important}.pie-md2{padding-inline-end:var(--md2)!important}.w-md3{width:var(--md3)!important}.h-md3{height:var(--md3)!important}.m-md3{margin:var(--md3)!important}.mt-md3{margin-top:var(--md3)!important}.mb-md3{margin-bottom:var(--md3)!important}.ml-md3{margin-left:var(--md3)!important}.mr-md3{margin-right:var(--md3)!important}.mis-md3{margin-inline-start:var(--md3)!important}.mie-md3{margin-inline-end:var(--md3)!important}.p-md3{padding:var(--md3)!important}.pt-md3{padding-top:var(--md3)!important}.pb-md3{padding-bottom:var(--md3)!important}.pl-md3{padding-left:var(--md3)!important}.pr-md3{padding-right:var(--md3)!important}.pis-md3{padding-inline-start:var(--md3)!important}.pie-md3{padding-inline-end:var(--md3)!important}.w-lg1{width:var(--lg1)!important}.h-lg1{height:var(--lg1)!important}.m-lg1{margin:var(--lg1)!important}.mt-lg1{margin-top:var(--lg1)!important}.mb-lg1{margin-bottom:var(--lg1)!important}.ml-lg1{margin-left:var(--lg1)!important}.mr-lg1{margin-right:var(--lg1)!important}.mis-lg1{margin-inline-start:var(--lg1)!important}.mie-lg1{margin-inline-end:var(--lg1)!important}.p-lg1{padding:var(--lg1)!important}.pt-lg1{padding-top:var(--lg1)!important}.pb-lg1{padding-bottom:var(--lg1)!important}.pl-lg1{padding-left:var(--lg1)!important}.pr-lg1{padding-right:var(--lg1)!important}.pis-lg1{padding-inline-start:var(--lg1)!important}.pie-lg1{padding-inline-end:var(--lg1)!important}.w-lg2{width:var(--lg2)!important}.h-lg2{height:var(--lg2)!important}.m-lg2{margin:var(--lg2)!important}.mt-lg2{margin-top:var(--lg2)!important}.mb-lg2{margin-bottom:var(--lg2)!important}.ml-lg2{margin-left:var(--lg2)!important}.mr-lg2{margin-right:var(--lg2)!important}.mis-lg2{margin-inline-start:var(--lg2)!important}.mie-lg2{margin-inline-end:var(--lg2)!important}.p-lg2{padding:var(--lg2)!important}.pt-lg2{padding-top:var(--lg2)!important}.pb-lg2{padding-bottom:var(--lg2)!important}.pl-lg2{padding-left:var(--lg2)!important}.pr-lg2{padding-right:var(--lg2)!important}.pis-lg2{padding-inline-start:var(--lg2)!important}.pie-lg2{padding-inline-end:var(--lg2)!important}.w-lg3{width:var(--lg3)!important}.h-lg3{height:var(--lg3)!important}.m-lg3{margin:var(--lg3)!important}.mt-lg3{margin-top:var(--lg3)!important}.mb-lg3{margin-bottom:var(--lg3)!important}.ml-lg3{margin-left:var(--lg3)!important}.mr-lg3{margin-right:var(--lg3)!important}.mis-lg3{margin-inline-start:var(--lg3)!important}.mie-lg3{margin-inline-end:var(--lg3)!important}.p-lg3{padding:var(--lg3)!important}.pt-lg3{padding-top:var(--lg3)!important}.pb-lg3{padding-bottom:var(--lg3)!important}.pl-lg3{padding-left:var(--lg3)!important}.pr-lg3{padding-right:var(--lg3)!important}.pis-lg3{padding-inline-start:var(--lg3)!important}.pie-lg3{padding-inline-end:var(--lg3)!important}.w-xl1{width:var(--xl1)!important}.h-xl1{height:var(--xl1)!important}.m-xl1{margin:var(--xl1)!important}.mt-xl1{margin-top:var(--xl1)!important}.mb-xl1{margin-bottom:var(--xl1)!important}.ml-xl1{margin-left:var(--xl1)!important}.mr-xl1{margin-right:var(--xl1)!important}.mis-xl1{margin-inline-start:var(--xl1)!important}.mie-xl1{margin-inline-end:var(--xl1)!important}.p-xl1{padding:var(--xl1)!important}.pt-xl1{padding-top:var(--xl1)!important}.pb-xl1{padding-bottom:var(--xl1)!important}.pl-xl1{padding-left:var(--xl1)!important}.pr-xl1{padding-right:var(--xl1)!important}.pis-xl1{padding-inline-start:var(--xl1)!important}.pie-xl1{padding-inline-end:var(--xl1)!important}.w-xl2{width:var(--xl2)!important}.h-xl2{height:var(--xl2)!important}.m-xl2{margin:var(--xl2)!important}.mt-xl2{margin-top:var(--xl2)!important}.mb-xl2{margin-bottom:var(--xl2)!important}.ml-xl2{margin-left:var(--xl2)!important}.mr-xl2{margin-right:var(--xl2)!important}.mis-xl2{margin-inline-start:var(--xl2)!important}.mie-xl2{margin-inline-end:var(--xl2)!important}.p-xl2{padding:var(--xl2)!important}.pt-xl2{padding-top:var(--xl2)!important}.pb-xl2{padding-bottom:var(--xl2)!important}.pl-xl2{padding-left:var(--xl2)!important}.pr-xl2{padding-right:var(--xl2)!important}.pis-xl2{padding-inline-start:var(--xl2)!important}.pie-xl2{padding-inline-end:var(--xl2)!important}.w-xl3{width:var(--xl3)!important}.h-xl3{height:var(--xl3)!important}.m-xl3{margin:var(--xl3)!important}.mt-xl3{margin-top:var(--xl3)!important}.mb-xl3{margin-bottom:var(--xl3)!important}.ml-xl3{margin-left:var(--xl3)!important}.mr-xl3{margin-right:var(--xl3)!important}.mis-xl3{margin-inline-start:var(--xl3)!important}.mie-xl3{margin-inline-end:var(--xl3)!important}.p-xl3{padding:var(--xl3)!important}.pt-xl3{padding-top:var(--xl3)!important}.pb-xl3{padding-bottom:var(--xl3)!important}.pl-xl3{padding-left:var(--xl3)!important}.pr-xl3{padding-right:var(--xl3)!important}.pis-xl3{padding-inline-start:var(--xl3)!important}.pie-xl3{padding-inline-end:var(--xl3)!important}.w-xxl1{width:var(--xxl1)!important}.h-xxl1{height:var(--xxl1)!important}.m-xxl1{margin:var(--xxl1)!important}.mt-xxl1{margin-top:var(--xxl1)!important}.mb-xxl1{margin-bottom:var(--xxl1)!important}.ml-xxl1{margin-left:var(--xxl1)!important}.mr-xxl1{margin-right:var(--xxl1)!important}.mis-xxl1{margin-inline-start:var(--xxl1)!important}.mie-xxl1{margin-inline-end:var(--xxl1)!important}.p-xxl1{padding:var(--xxl1)!important}.pt-xxl1{padding-top:var(--xxl1)!important}.pb-xxl1{padding-bottom:var(--xxl1)!important}.pl-xxl1{padding-left:var(--xxl1)!important}.pr-xxl1{padding-right:var(--xxl1)!important}.pis-xxl1{padding-inline-start:var(--xxl1)!important}.pie-xxl1{padding-inline-end:var(--xxl1)!important}.w-xxl2{width:var(--xxl2)!important}.h-xxl2{height:var(--xxl2)!important}.m-xxl2{margin:var(--xxl2)!important}.mt-xxl2{margin-top:var(--xxl2)!important}.mb-xxl2{margin-bottom:var(--xxl2)!important}.ml-xxl2{margin-left:var(--xxl2)!important}.mr-xxl2{margin-right:var(--xxl2)!important}.mis-xxl2{margin-inline-start:var(--xxl2)!important}.mie-xxl2{margin-inline-end:var(--xxl2)!important}.p-xxl2{padding:var(--xxl2)!important}.pt-xxl2{padding-top:var(--xxl2)!important}.pb-xxl2{padding-bottom:var(--xxl2)!important}.pl-xxl2{padding-left:var(--xxl2)!important}.pr-xxl2{padding-right:var(--xxl2)!important}.pis-xxl2{padding-inline-start:var(--xxl2)!important}.pie-xxl2{padding-inline-end:var(--xxl2)!important}.w-xxl3{width:var(--xxl3)!important}.h-xxl3{height:var(--xxl3)!important}.m-xxl3{margin:var(--xxl3)!important}.mt-xxl3{margin-top:var(--xxl3)!important}.mb-xxl3{margin-bottom:var(--xxl3)!important}.ml-xxl3{margin-left:var(--xxl3)!important}.mr-xxl3{margin-right:var(--xxl3)!important}.mis-xxl3{margin-inline-start:var(--xxl3)!important}.mie-xxl3{margin-inline-end:var(--xxl3)!important}.p-xxl3{padding:var(--xxl3)!important}.pt-xxl3{padding-top:var(--xxl3)!important}.pb-xxl3{padding-bottom:var(--xxl3)!important}.pl-xxl3{padding-left:var(--xxl3)!important}.pr-xxl3{padding-right:var(--xxl3)!important}.pis-xxl3{padding-inline-start:var(--xxl3)!important}.pie-xxl3{padding-inline-end:var(--xxl3)!important}.w-mega1{width:var(--mega1)!important}.h-mega1{height:var(--mega1)!important}.m-mega1{margin:var(--mega1)!important}.mt-mega1{margin-top:var(--mega1)!important}.mb-mega1{margin-bottom:var(--mega1)!important}.ml-mega1{margin-left:var(--mega1)!important}.mr-mega1{margin-right:var(--mega1)!important}.mis-mega1{margin-inline-start:var(--mega1)!important}.mie-mega1{margin-inline-end:var(--mega1)!important}.p-mega1{padding:var(--mega1)!important}.pt-mega1{padding-top:var(--mega1)!important}.pb-mega1{padding-bottom:var(--mega1)!important}.pl-mega1{padding-left:var(--mega1)!important}.pr-mega1{padding-right:var(--mega1)!important}.pis-mega1{padding-inline-start:var(--mega1)!important}.pie-mega1{padding-inline-end:var(--mega1)!important}.w-mega2{width:var(--mega2)!important}.h-mega2{height:var(--mega2)!important}.m-mega2{margin:var(--mega2)!important}.mt-mega2{margin-top:var(--mega2)!important}.mb-mega2{margin-bottom:var(--mega2)!important}.ml-mega2{margin-left:var(--mega2)!important}.mr-mega2{margin-right:var(--mega2)!important}.mis-mega2{margin-inline-start:var(--mega2)!important}.mie-mega2{margin-inline-end:var(--mega2)!important}.p-mega2{padding:var(--mega2)!important}.pt-mega2{padding-top:var(--mega2)!important}.pb-mega2{padding-bottom:var(--mega2)!important}.pl-mega2{padding-left:var(--mega2)!important}.pr-mega2{padding-right:var(--mega2)!important}.pis-mega2{padding-inline-start:var(--mega2)!important}.pie-mega2{padding-inline-end:var(--mega2)!important}.w-mega3{width:var(--mega3)!important}.h-mega3{height:var(--mega3)!important}.m-mega3{margin:var(--mega3)!important}.mt-mega3{margin-top:var(--mega3)!important}.mb-mega3{margin-bottom:var(--mega3)!important}.ml-mega3{margin-left:var(--mega3)!important}.mr-mega3{margin-right:var(--mega3)!important}.mis-mega3{margin-inline-start:var(--mega3)!important}.mie-mega3{margin-inline-end:var(--mega3)!important}.p-mega3{padding:var(--mega3)!important}.pt-mega3{padding-top:var(--mega3)!important}.pb-mega3{padding-bottom:var(--mega3)!important}.pl-mega3{padding-left:var(--mega3)!important}.pr-mega3{padding-right:var(--mega3)!important}.pis-mega3{padding-inline-start:var(--mega3)!important}.pie-mega3{padding-inline-end:var(--mega3)!important}.w-giga1{width:var(--giga1)!important}.h-giga1{height:var(--giga1)!important}.m-giga1{margin:var(--giga1)!important}.mt-giga1{margin-top:var(--giga1)!important}.mb-giga1{margin-bottom:var(--giga1)!important}.ml-giga1{margin-left:var(--giga1)!important}.mr-giga1{margin-right:var(--giga1)!important}.mis-giga1{margin-inline-start:var(--giga1)!important}.mie-giga1{margin-inline-end:var(--giga1)!important}.p-giga1{padding:var(--giga1)!important}.pt-giga1{padding-top:var(--giga1)!important}.pb-giga1{padding-bottom:var(--giga1)!important}.pl-giga1{padding-left:var(--giga1)!important}.pr-giga1{padding-right:var(--giga1)!important}.pis-giga1{padding-inline-start:var(--giga1)!important}.pie-giga1{padding-inline-end:var(--giga1)!important}.w-giga2{width:var(--giga2)!important}.h-giga2{height:var(--giga2)!important}.m-giga2{margin:var(--giga2)!important}.mt-giga2{margin-top:var(--giga2)!important}.mb-giga2{margin-bottom:var(--giga2)!important}.ml-giga2{margin-left:var(--giga2)!important}.mr-giga2{margin-right:var(--giga2)!important}.mis-giga2{margin-inline-start:var(--giga2)!important}.mie-giga2{margin-inline-end:var(--giga2)!important}.p-giga2{padding:var(--giga2)!important}.pt-giga2{padding-top:var(--giga2)!important}.pb-giga2{padding-bottom:var(--giga2)!important}.pl-giga2{padding-left:var(--giga2)!important}.pr-giga2{padding-right:var(--giga2)!important}.pis-giga2{padding-inline-start:var(--giga2)!important}.pie-giga2{padding-inline-end:var(--giga2)!important}.w-giga3{width:var(--giga3)!important}.h-giga3{height:var(--giga3)!important}.m-giga3{margin:var(--giga3)!important}.mt-giga3{margin-top:var(--giga3)!important}.mb-giga3{margin-bottom:var(--giga3)!important}.ml-giga3{margin-left:var(--giga3)!important}.mr-giga3{margin-right:var(--giga3)!important}.mis-giga3{margin-inline-start:var(--giga3)!important}.mie-giga3{margin-inline-end:var(--giga3)!important}.p-giga3{padding:var(--giga3)!important}.pt-giga3{padding-top:var(--giga3)!important}.pb-giga3{padding-bottom:var(--giga3)!important}.pl-giga3{padding-left:var(--giga3)!important}.pr-giga3{padding-right:var(--giga3)!important}.pis-giga3{padding-inline-start:var(--giga3)!important}.pie-giga3{padding-inline-end:var(--giga3)!important}.w-tera1{width:var(--tera1)!important}.h-tera1{height:var(--tera1)!important}.m-tera1{margin:var(--tera1)!important}.mt-tera1{margin-top:var(--tera1)!important}.mb-tera1{margin-bottom:var(--tera1)!important}.ml-tera1{margin-left:var(--tera1)!important}.mr-tera1{margin-right:var(--tera1)!important}.mis-tera1{margin-inline-start:var(--tera1)!important}.mie-tera1{margin-inline-end:var(--tera1)!important}.p-tera1{padding:var(--tera1)!important}.pt-tera1{padding-top:var(--tera1)!important}.pb-tera1{padding-bottom:var(--tera1)!important}.pl-tera1{padding-left:var(--tera1)!important}.pr-tera1{padding-right:var(--tera1)!important}.pis-tera1{padding-inline-start:var(--tera1)!important}.pie-tera1{padding-inline-end:var(--tera1)!important}.w-tera2{width:var(--tera2)!important}.h-tera2{height:var(--tera2)!important}.m-tera2{margin:var(--tera2)!important}.mt-tera2{margin-top:var(--tera2)!important}.mb-tera2{margin-bottom:var(--tera2)!important}.ml-tera2{margin-left:var(--tera2)!important}.mr-tera2{margin-right:var(--tera2)!important}.mis-tera2{margin-inline-start:var(--tera2)!important}.mie-tera2{margin-inline-end:var(--tera2)!important}.p-tera2{padding:var(--tera2)!important}.pt-tera2{padding-top:var(--tera2)!important}.pb-tera2{padding-bottom:var(--tera2)!important}.pl-tera2{padding-left:var(--tera2)!important}.pr-tera2{padding-right:var(--tera2)!important}.pis-tera2{padding-inline-start:var(--tera2)!important}.pie-tera2{padding-inline-end:var(--tera2)!important}.w-tera3{width:var(--tera3)!important}.h-tera3{height:var(--tera3)!important}.m-tera3{margin:var(--tera3)!important}.mt-tera3{margin-top:var(--tera3)!important}.mb-tera3{margin-bottom:var(--tera3)!important}.ml-tera3{margin-left:var(--tera3)!important}.mr-tera3{margin-right:var(--tera3)!important}.mis-tera3{margin-inline-start:var(--tera3)!important}.mie-tera3{margin-inline-end:var(--tera3)!important}.p-tera3{padding:var(--tera3)!important}.pt-tera3{padding-top:var(--tera3)!important}.pb-tera3{padding-bottom:var(--tera3)!important}.pl-tera3{padding-left:var(--tera3)!important}.pr-tera3{padding-right:var(--tera3)!important}.pis-tera3{padding-inline-start:var(--tera3)!important}.pie-tera3{padding-inline-end:var(--tera3)!important}}@layer helpers{.font-text{font-family:var(--text)!important}.font-display{font-family:var(--display)!important}.font-mono{font-family:var(--mono)!important}.font-italic{font-style:italic!important}.font-normal{font-style:normal!important}.font-extra-light{font-weight:var(--extra-light)!important}.font-light{font-weight:var(--light)!important}.font-book{font-weight:var(--book)!important}.font-semi-bold{font-weight:var(--semi-bold)!important}.font-bold{font-weight:var(--bold)!important}.font-black{font-weight:var(--black)!important}.text-xs{font-size:var(--text-xs)!important}.text-sm{font-size:var(--text-sm)!important}.text-md{font-size:var(--text-md)!important}.text-lg{font-size:var(--text-lg)!important}.text-xl{font-size:var(--text-xl)!important}.display-sm{font-size:var(--display-sm)!important}.display-md{font-size:var(--display-md)!important}.display-lg{font-size:var(--display-lg)!important}.display-xl{font-size:var(--display-xl)!important}.display-mega{font-size:var(--display-mega)!important}.display-giga{font-size:var(--display-giga)!important}.tracking-sm{letter-spacing:var(--tracking-sm)!important}.tracking-md{letter-spacing:var(--tracking-md)!important}.tracking-lg{letter-spacing:var(--tracking-lg)!important}.tracking-xl{letter-spacing:var(--tracking-xl)!important}.tracking-xxl{letter-spacing:var(--tracking-xxl)!important}.leading-xs{line-height:var(--leading-xs)!important}.leading-sm{line-height:var(--leading-sm)!important}.leading-md{line-height:var(--leading-md)!important}.leading-lg{line-height:var(--leading-lg)!important}.leading-xl{line-height:var(--leading-xl)!important}.leading-xxl{line-height:var(--leading-xxl)!important}.text-left{text-align:left!important}.text-center{text-align:center!important}.text-right{text-align:right!important}.text-justify{text-align:justify!important}.text-start{text-align:start!important}.text-end{text-align:end!important}.text-uppercase{text-transform:uppercase!important}.text-lowercase{text-transform:lowercase!important}.text-capitalize{text-transform:capitalize!important}}@layer theme.defaults{:root{--xs1: 4px;--xs2: 8px;--xs3: 12px;--sm1: 16px;--sm2: 20px;--sm3: 24px;--md1: 28px;--md2: 32px;--md3: 36px;--lg1: 40px;--lg2: 44px;--lg3: 48px;--xl1: 56px;--xl2: 64px;--xl3: 80px;--xxl1: 96px;--xxl2: 112px;--xxl3: 128px;--mega1: 160px;--mega2: 192px;--mega3: 224px;--giga1: 256px;--giga2: 288px;--giga3: 320px;--tera1: 384px;--tera2: 480px;--tera3: 520px;--ar-square: 1;--ar-landscape: 4/3;--ar-portrait: 3/4;--ar-widescreen: 16/9;--ar-golden: 1.618/1;--display: Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, ui-sans-serif, sans-serif;--text: ui-sans-serif, system-ui, sans-serif;--mono: Dank Mono, Inconsolata, Fira Mono, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, ui-monospace, monospace;--text-xs: .694rem;--text-sm: .833rem;--text-md: 1rem;--text-lg: 1.2rem;--text-xl: 1.44rem;--display-sm: 1.728rem;--display-md: 2.074rem;--display-lg: 2.488rem;--display-xl: 2.986rem;--display-mega: 3.583rem;--display-giga: 4.299rem;--extra-light: 200;--light: 300;--book: 400;--semi-bold: 600;--bold: 700;--black: 900;--tracking-sm: -.05em;--tracking-md: .025em;--tracking-lg: .05em;--tracking-xl: .075em;--tracking-xxl: .15em;--leading-xs: 1;--leading-sm: 1.15;--leading-md: 1.375;--leading-lg: 1.5;--leading-xl: 1.75;--leading-xxl: 2;--base-0: #fff;--base-50: #f6f7f9;--base-100: #edeef1;--base-200: #d6dbe1;--base-300: #b2bbc7;--base-400: #8897a8;--base-500: #697a8e;--base-600: #546375;--base-700: #4a5666;--base-800: #3c4550;--base-900: #353c45;--base-950: #23282e;--primary-50: #f0f9ff;--primary-100: #e0f2fe;--primary-200: #bae6fd;--primary-300: #7dd3fc;--primary-400: #38bdf8;--primary-500: #0ea5e9;--primary-600: #0284c7;--primary-700: #0369a1;--primary-800: #075985;--primary-900: #0c4a6e;--primary-950: #082f49;--yes-100: #d5f6e8;--yes-200: #afebd4;--yes-300: #7adbbd;--yes-400: #46c4a0;--yes-500: #13886d;--no-100: #ffe4e6;--no-200: #fecdd3;--no-300: #fda4af;--no-400: #fb7185;--no-500: #e11d48;--maybe-100: #fff7d6;--maybe-200: #fff0b3;--maybe-300: #ffd64a;--maybe-400: #ffc220;--maybe-500: #f9a007;--highlight-500: #ffee00;--border-sm: 1px;--border-md: 2px;--border-lg: 4px;--border-xl: 8px;--border-xxl: 12px;--radius-sm: 3px;--radius-md: 5px;--radius-lg: 8px;--radius-xl: 12px;--radius-xxl: 16px;--radius-round: 1e5px;--shadow-sm: 0 1px 3px 0 var(--ui-shadow-color), 0 1px 2px -1px var(--ui-shadow-color);--shadow-md: 0 4px 6px -1px var(--ui-shadow-color), 0 2px 4px -2px var(--ui-shadow-color);--shadow-lg: 0 8px 13px -3px var(--ui-shadow-color), 0 4px 6px -4px var(--ui-shadow-color);--shadow-xl: 0 20px 20px -5px var(--ui-shadow-color), 0 8px 10px -6px var(--ui-shadow-color);--shadow-xxl: 0px 11px 8px -6px var(--ui-shadow-color), 0 10px 15px 2px var(--ui-shadow-color);--o-0: 0;--o-1: .2;--o-2: .4;--o-3: .6;--o-4: .8;--o-5: 1;--z-bottom: -1000000000;--z-0: 0;--z-1: 10;--z-2: 20;--z-3: 30;--z-4: 40;--z-5: 50;--z-top: 1000000000;--transition: .22s ease-in-out;--transition-fast: .1s ease-in-out}}@layer theme.defaults{:root{color-scheme:light dark;--ui-border-color: light-dark(var(--base-200), var(--base-500));--ui-shadow-color: light-dark(rgb(0 0 0 / .1), rgb(0 0 0 / .6));--focus-ring-color: light-dark(var(--primary-500), var(--primary-400));--focus-ring-width: 2px;--focus-ring-offset: 2px;--success-100: var(--yes-100);--success-200: var(--yes-200);--success-300: var(--yes-300);--success-400: var(--yes-400);--success-500: var(--yes-500);--danger-100: var(--no-100);--danger-200: var(--no-200);--danger-300: var(--no-300);--danger-400: var(--no-400);--danger-500: var(--no-500);--warning-100: var(--maybe-100);--warning-200: var(--maybe-200);--warning-300: var(--maybe-300);--warning-400: var(--maybe-400);--warning-500: var(--maybe-500)}:root.theme-light{color-scheme:light}:root.theme-dark{color-scheme:dark}:root{accent-color:var(--primary-500);--body-background-color: light-dark(var(--base-0), var(--base-950));--body-line-height: var(--leading-lg);--input-height: var(--md3);--input-padding: var(--xs3);--input-border-width: var(--border-sm);--input-border-color: var(--ui-border-color);--input-border-radius: var(--radius-md);--input-border-color-invalid: light-dark( var(--danger-500), var(--danger-400) );--label-spacing: var(--xs1);--fieldset-padding: var(--sm3);--fieldset-border-width: var(--border-sm);--fieldset-border-color: var(--ui-border-color);--fieldset-border-radius: var(--radius-lg);--meter-height: var(--sm1);--meter-border-radius: var(--radius-md);--meter-track-color: var(--primary-100);--meter-low-color: var(--danger-400);--meter-medium-color: var(--warning-400);--meter-high-color: var(--success-400);--progress-height: var(--sm1);--progress-color: var(--primary-500);--progress-track-color: var(--primary-100);--progress-border-radius: var(--radius-md);--select-icon-size: var(--sm3);--select-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");--dialog-min-width: var(--tera1);--dialog-max-width: var(--tera3);--dialog-padding: var(--lg1) var(--md1);--dialog-border-width: var(--border-sm);--dialog-border-color: light-dark(var(--base-200), var(--base-800));--dialog-background-color: light-dark(var(--base-50), var(--base-900));--dialog-border-radius: var(--radius-lg);--dialog-backdrop-color: var(--base-950);--dialog-backdrop-opacity: var(--o-4);--details-padding: var(--sm1);--details-spacing: var(--xs3);--details-border-width: var(--border-sm);--details-border-color: light-dark(var(--base-200), var(--base-800));--details-background-color: light-dark(var(--base-50), var(--base-900));--details-border-radius: var(--radius-lg);--details-icon-size: var(--sm3);--details-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");--table-padding: var(--xs2) var(--sm1);--table-border-width: var(--border-sm);--table-border-color: light-dark(var(--base-100), var(--base-700));--table-border-radius: var(--radius-md);--table-background-color: none;--table-caption-spacing: var(--xs3);--figcaption-spacing: var(--xs2);--heading-font: var(--display);--heading-weight: var(--black);--heading-letter-spacing: normal;--heading-font-size-h1: clamp( var(--display-md), 1.269rem + 2.682vw, var(--display-xl) );--heading-font-size-h2: clamp( var(--display-sm), 1.057rem + 2.235vw, var(--display-lg) );--heading-font-size-h3: clamp( var(--text-xl), .881rem + 1.865vw, var(--display-md) );--heading-font-size-h4: clamp( var(--text-lg), .734rem + 1.553vw, var(--display-sm) );--heading-font-size-h5: clamp( var(--text-lg), .988rem + .706vw, var(--text-xl) );--heading-font-size-h6: clamp( var(--text-md), .824rem + .588vw, var(--text-lg) );--heading-line-height: var(--leading-sm);--heading-line-height-h1: var(--heading-line-height);--heading-line-height-h2: var(--heading-line-height);--heading-line-height-h3: var(--heading-line-height);--heading-line-height-h4: var(--leading-md);--heading-line-height-h5: var(--leading-md);--heading-line-height-h6: var(--leading-md);--heading-spacing-h1: .4em;--heading-spacing-h2: .4em;--heading-spacing-h3: .4em;--heading-spacing-h4: .4em;--heading-spacing-h5: .4em;--heading-spacing-h6: .4em;--heading-spacing-consecutive: .3em;--text-color: light-dark(var(--base-950), var(--base-200));--link-font-weight: var(--semi-bold);--link-color: light-dark(var(--primary-600), var(--primary-400));--link-color-hover: var(--primary-500);--text-code-color: light-dark(var(--primary-600), var(--primary-400));--text-code-background-color: light-dark( var(--primary-100), var(--primary-900) );--text-code-muted-color: light-dark(var(--base-500), var(--base-300));--pre-border-radius: var(--radius-md);--pre-font-size: .9rem;--blockquote-padding-block: var(--sm1);--blockquote-padding-inline: var(--md1) var(--sm3);--blockquote-background-color: light-dark( var(--primary-50), var(--primary-900) );--blockquote-border-radius: var(--radius-md);--blockquote-accent-width: var(--xs2);--blockquote-accent-color: linear-gradient( var(--primary-800), var(--primary-500) );--hr-content: "";--ins-color: var(--base-950);--ins-background-color: var(--success-200);--marker-color: var(--highlight-500);--selection-color: light-dark(var(--base-950), var(--base-0));--selection-background-color: light-dark( var(--primary-200), var(--primary-700) )}:root{--grid-column-gap: var(--sm1);--grid-row-gap: var(--sm1);@media(width>=768px){--grid-column-gap: var(--sm3);--grid-row-gap: var(--sm3)}--wrap-spacing: var(--sm1);--wrap-md-spacing: var(--sm3);--wrap-lg-spacing: 0;--wrap-width-sm: minmax(0, 55ch);--wrap-width-md: minmax(0, 70ch);--wrap-width-lg: minmax(0, 900px);--wrap-width: var(--wrap-width-md);--layout-content-width: 70ch;--layout-aside-width: 245px;--layout-toc-width: 1fr;--prose-spacing: var(--sm1)}:root{--badge-font-size: var(--text-sm);--badge-border-radius: var(--radius-md);--badge-color: var(--base-0);--badge-background-color: light-dark(var(--base-700), var(--base-600));--badge-primary-color: var(--base-0);--badge-primary-background-color: light-dark( var(--primary-600), var(--primary-500) );--badge-success-color: light-dark(var(--success-500), var(--base-0));--badge-success-background-color: light-dark( var(--success-100), var(--success-500) );--badge-danger-color: light-dark(var(--danger-500), var(--base-0));--badge-danger-background-color: light-dark( var(--danger-100), var(--danger-500) );--badge-warning-color: light-dark(var(--warning-500), var(--base-950));--badge-warning-background-color: light-dark( var(--warning-100), var(--warning-500) )}:root{--bt-min-width: 101px;--bt-min-width-md: 123px;--bt-min-width-lg: 133px;--bt-font-size: var(--text-sm);--bt-font-size-lg: var(--text-md);--bt-font-weight: var(--semi-bold);--bt-color: var(--text-color);--bt-color-hover: light-dark(var(--text-color), var(--base-0));--bt-background-color: light-dark(var(--base-0), var(--base-800));--bt-background-color-hover: light-dark(var(--base-50), var(--base-900));--bt-border-color: var(--ui-border-color);--bt-border-width: var(--border-sm);--bt-border-radius: var(--radius-lg);--bt-border-radius-lg: var(--radius-xl);--bt-outline-color-hover: light-dark(var(--base-950), var(--base-0));--bt-outline-background-color-hover: light-dark( rgb(0 0 0 / .1), rgb(255 255 255 / .1) );--bt-outline-border-color: light-dark(var(--base-950), var(--base-0));--bt-outline-border-color-hover: light-dark(var(--base-950), var(--base-0));--bt-primary-color: var(--base-0);--bt-primary-color-hover: var(--base-0);--bt-primary-background-color: var(--primary-600);--bt-primary-background-color-hover: var(--primary-500);--bt-primary-border-color: var(--primary-600);--bt-primary-border-color-hover: var(--primary-600)}:root{--avatar-color: var(--base-0);--avatar-background-color: var(--base-400);--avatar-border-color: light-dark(var(--base-0), var(--base-500));--avatar-border-width: var(--border-sm);--avatar-radius: var(--radius-round);--avatar-status-dot-color-offline: var(--base-300);--avatar-status-dot-color-online: var(--yes-400)}:root{--banner-color: var(--base-0);--banner-background-color: light-dark( var(--primary-600), var(--primary-800) )}:root{--breadcrumbs-separator: "/";--breadcrumbs-separator-color: light-dark(var(--base-300), var(--base-600));--breadcrumbs-color: light-dark(var(--base-500), var(--base-400));--breadcrumbs-color-current: var(--text-color)}:root{--card-spacing: var(--sm3);--card-color: var(--text-color);--card-secondary-text-color: light-dark(var(--base-400), var(--base-500));--card-bg-color: light-dark(var(--base-100), var(--base-900));--card-border-radius: var(--radius-lg);--card-border-color: var(--ui-border-color);--card-border-width: var(--border-sm);--card-shadow: var(--shadow-md);--card-shadow-hover: var(--shadow-xl);--card-loading-bg: light-dark(var(--base-200), var(--base-900));--card-aspect-ratio: var(--ar-golden)}:root{--toggle-width: 50px;--toggle-height: 28px;--toggle-border-width: 2px;--toggle-track-color: light-dark(var(--base-300), var(--base-700));--toggle-track-color-checked: var(--yes-400);--toggle-thumb-color: var(--body-background-color)}:root{--faq-spacing: var(--xs3)}:root{--field-spacing: var(--xs1);--field-hint-color: light-dark(var(--base-400), var(--base-500));--field-error-color: light-dark(var(--danger-500), var(--danger-300));--field-message-position: static}:root{--featureItem-icon-box-size: var(--lg3);--featureItem-icon-size: var(--sm3);--featureItem-icon-color: light-dark( var(--primary-600), var(--primary-300) );--featureItem-icon-background-color: light-dark( var(--primary-100), var(--primary-900) );--featureItem-icon-border-radius: var(--radius-lg)}:root{--footer-background-color: light-dark(var(--primary-950), var(--base-950));--footer-text-color: light-dark(var(--base-0), var(--base-200));--footer-border-width: var(--border-md);--footer-border-color: light-dark(transparent, var(--base-700));--footer-link-color: light-dark(var(--base-0), var(--base-200));--footer-link-color-hover: light-dark(var(--primary-200), var(--base-0))}:root{--header-height: var(--xl1);--header-padding: var(--sm1);@media(width>=768px){--header-height: var(--xl2);--header-padding: var(--sm3)}--header-background-color: light-dark(var(--base-0), var(--base-950));--header-menu-background-color: var(--base-950);--header-menu-color: var(--base-0);--header-menu-color-current: var(--primary-400);--header-menu-secondary-color: var(--base-300);--header-menu-border-color: var(--base-500)}:root{--hero-radius: var(--radius-xl);--hero-content-padding: var(--md3);--hero-actions-spacing: var(--lg3);--hero-pagination-dot: var(--sm1);--hero-pagination-dot-color: var(--base-0);--hero-pagination-dot-active-color: var(--primary-600);--hero-pagination-opacity: var(--o-4)}:root{--pagination-size: var(--md3);--pagination-border-radius: var(--radius-md);--pagination-color: var(--text-color);--pagination-color-current: var(--base-0);--pagination-background-color-current: light-dark( var(--primary-600), var(--primary-500) );--pagination-background-color-hover: light-dark( var(--base-100), var(--base-800) )}:root{--prevNext-border-color: var(--ui-border-color);--prevNext-border-radius: var(--radius-lg);--prevNext-border-color-hover: var(--link-color);--prevNext-label-color: light-dark(var(--base-400), var(--base-500))}:root{--notice-spacing: var(--sm1);--notice-text-color: light-dark(var(--base-950), var(--base-0));--notice-background-color: light-dark(var(--base-50), var(--base-800));--notice-border-color: light-dark(var(--base-200), var(--base-500));--notice-border-width: var(--border-sm);--notice-border-radius: var(--radius-lg)}:root{--pricingCard-highlight-border-color: light-dark( var(--primary-600), var(--primary-400) );--pricingCard-check-color: light-dark( var(--success-500), var(--success-400) )}:root{--readProgressBar-height: var(--xs1);--readProgressBar-color: linear-gradient( 90deg, var(--primary-600) 0%, var(--primary-400) 100% )}:root{--section-spacing: var(--xl3);--section-header-spacing: var(--lg3);--section-eyebrow-color: light-dark(var(--primary-600), var(--primary-400));--section-lede-color: light-dark(var(--base-500), var(--base-400));--section-filled-background-color: light-dark( var(--base-50), var(--base-900) );--section-primary-background-color: light-dark( var(--primary-600), var(--primary-900) );--section-primary-text-color: var(--base-0);--section-primary-link-color: var(--primary-100);--section-primary-link-color-hover: var(--base-0);--section-primary-eyebrow-color: var(--primary-200);--section-primary-lede-color: var(--primary-100)}:root{--testimonial-role-color: light-dark(var(--base-400), var(--base-500))}:root{--tags-padding: var(--xs2);--tags-font-size: var(--text-sm);--tags-color: light-dark(var(--base-500), var(--base-400));--tags-background-color: light-dark(var(--base-100), var(--base-800));--tags-background-color-hover: light-dark(var(--base-200), var(--base-950));--tags-radius: var(--radius-md)}:root{--toc-color: var(--link-color);--toc-color-hover: var(--link-color-hover);--toc-spacing: var(--xs1);--toc-indentation: var(--xs3);--toc-icon-size: var(--sm1)}} +@layer base,elements,global,components,theme.defaults,theme.overrides,helpers;@layer base,elements,global,components,theme.defaults,theme.overrides,helpers;@layer base{*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion:reduce){*,:before,:after{animation-delay:-1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}}:where(:not(dialog)){margin:0}html,body{min-height:100%}}@layer elements{body{line-sizing:normal;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;background-color:var(--body-background-color);color:var(--text-color);font-family:var(--text);line-height:var(--body-line-height);&:has(.body-is-locked){overflow:hidden}}}@layer elements{::selection{color:var(--selection-color);background-color:var(--selection-background-color)}:where(a,u,ins,abbr){text-underline-offset:2px}a{font-weight:var(--link-font-weight);color:var(--link-color);&:where(:hover){color:var(--link-color-hover);-webkit-text-decoration:none;text-decoration:none}}address{width:max-content;max-width:100%;padding:var(--sm1) var(--sm3);font-style:normal;background-color:light-dark(var(--base-50),var(--base-900));border:var(--xs2) solid transparent;border-image:8 repeating-linear-gradient(-45deg,var(--no-500) 0,var(--no-500) var(--xs2),transparent 0,transparent calc(var(--xs2) * 2),var(--primary-500) 0,var(--primary-500) calc(var(--xs2) * 3),transparent 0,transparent calc(var(--xs2) * 4))}abbr{position:relative;cursor:help;&:after{position:relative;top:calc(var(--xs1) * -1);width:var(--sm1);height:var(--sm1);display:inline-block;content:"";background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='circle-help'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M9.09%209a3%203%200%200%201%205.83%201c0%202-3%203-3%203'/%3E%3Cpath%20d='M12%2017h.01'/%3E%3C/svg%3E");background-size:contain}&:hover:before{width:max-content;max-width:400px;position:absolute;left:50%;padding:var(--xs1) var(--xs3);content:attr(title);color:var(--base-0);background-color:var(--base-900);opacity:var(--o-4);border-radius:var(--radius-sm);transform:translate(-50%,-2em)}}blockquote{position:relative;margin-bottom:var(--prose-spacing);padding-block:var(--blockquote-padding-block);padding-inline:var(--blockquote-padding-inline);font-style:italic;background-color:var(--blockquote-background-color);border-radius:var(--blockquote-border-radius);&:before{content:"";position:absolute;top:0;inset-inline-start:0;width:var(--blockquote-accent-width);height:100%;border-start-start-radius:var(--blockquote-border-radius);border-end-start-radius:var(--blockquote-border-radius);background:var(--blockquote-accent-color)}p{&:first-child:before{content:open-quote}&:last-child{margin-bottom:0;&:after{content:close-quote}}}}cite{font-style:italic}code,var,kbd{font-family:var(--mono);font-size:.9em;font-style:normal;color:var(--text-code-muted-color)}:is(code,var,kbd):not(h1 *,h2 *,h3 *,h4 *,h5 *,h6 *,pre *){padding:.15em .3em;color:var(--text-code-color);background-color:var(--text-code-background-color);border-radius:var(--radius-sm)}dt{font-weight:var(--bold)}dd+dt{margin-top:.5em}del{text-decoration-color:var(--danger-500);text-decoration-style:wavy}h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{overflow-wrap:break-word;text-wrap:balance}h1,.h1,h2,.h2,h3,.h3,h4,.h4{font-family:var(--heading-font);font-weight:var(--heading-weight);letter-spacing:var(--heading-letter-spacing)}h1,.h1{margin-bottom:var(--heading-spacing-h1);font-size:var(--heading-font-size-h1);line-height:var(--heading-line-height-h1)}h2,.h2{margin-bottom:var(--heading-spacing-h2);font-size:var(--heading-font-size-h2);line-height:var(--heading-line-height-h2)}h3,.h3{margin-bottom:var(--heading-spacing-h3);font-size:var(--heading-font-size-h3);line-height:var(--heading-line-height-h3)}h4,.h4{margin-bottom:var(--heading-spacing-h4);font-size:var(--heading-font-size-h4);line-height:var(--heading-line-height-h4)}h5,.h5{margin-bottom:var(--heading-spacing-h5);font-size:var(--heading-font-size-h5);line-height:var(--heading-line-height-h5)}h6,.h6{margin-bottom:var(--heading-spacing-h6);font-size:var(--heading-font-size-h6);line-height:var(--heading-line-height-h6)}:where(h1,h2,h3):has(+:is(h2,h3,h4)){margin-bottom:var(--heading-spacing-consecutive)}hr{display:flex;justify-content:center;align-items:center;height:0;border-style:solid;border-width:var(--border-sm) 0 0;color:var(--ui-border-color);overflow:visible;&:after{content:var(--hr-content);padding:0 var(--xs1);line-height:1;letter-spacing:var(--tracking-sm);background-color:var(--body-background-color)}}:where(hr):has(+:is(p)){margin-bottom:var(--prose-spacing)}ins{padding:.15em .3em;color:var(--ins-color);background-color:var(--ins-background-color);border-radius:var(--radius-sm);-webkit-text-decoration:none;text-decoration:none;&:before{content:"+ "}}mark{padding:.15em .5em;background:var(--marker-color);border-radius:1em 0}:where(ol,ul){list-style-type:none;padding:0}pre{font-family:var(--mono);font-size:var(--pre-font-size);white-space:pre-wrap;border-radius:var(--pre-border-radius)}q{font-style:italic}s{text-decoration-color:light-dark(var(--base-950),var(--base-50));text-decoration-style:wavy}sub,sup{line-height:1}}@layer elements{:root{quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(af),:not(:lang(af))>:lang(af){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ak),:not(:lang(ak))>:lang(ak){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(asa),:not(:lang(asa))>:lang(asa){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(az),:not(:lang(az))>:lang(az){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(bem),:not(:lang(bem))>:lang(bem){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(bez),:not(:lang(bez))>:lang(bez){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(bn),:not(:lang(bn))>:lang(bn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(brx),:not(:lang(brx))>:lang(brx){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(cgg),:not(:lang(cgg))>:lang(cgg){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(chr),:not(:lang(chr))>:lang(chr){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(cy),:not(:lang(cy))>:lang(cy){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(da),:not(:lang(da))>:lang(da){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(dav),:not(:lang(dav))>:lang(dav){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(dje),:not(:lang(dje))>:lang(dje){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(dz),:not(:lang(dz))>:lang(dz){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ebu),:not(:lang(ebu))>:lang(ebu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ee),:not(:lang(ee))>:lang(ee){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(en),:not(:lang(en))>:lang(en){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(fil),:not(:lang(fil))>:lang(fil){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(fo),:not(:lang(fo))>:lang(fo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ga),:not(:lang(ga))>:lang(ga){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(gd),:not(:lang(gd))>:lang(gd){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(gl),:not(:lang(gl))>:lang(gl){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(gu),:not(:lang(gu))>:lang(gu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(guz),:not(:lang(guz))>:lang(guz){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ha),:not(:lang(ha))>:lang(ha){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(hi),:not(:lang(hi))>:lang(hi){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(id),:not(:lang(id))>:lang(id){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ig),:not(:lang(ig))>:lang(ig){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(jmc),:not(:lang(jmc))>:lang(jmc){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kam),:not(:lang(kam))>:lang(kam){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kde),:not(:lang(kde))>:lang(kde){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kea),:not(:lang(kea))>:lang(kea){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(khq),:not(:lang(khq))>:lang(khq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ki),:not(:lang(ki))>:lang(ki){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kln),:not(:lang(kln))>:lang(kln){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(km),:not(:lang(km))>:lang(km){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kn),:not(:lang(kn))>:lang(kn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ko),:not(:lang(ko))>:lang(ko){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ksb),:not(:lang(ksb))>:lang(ksb){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lg),:not(:lang(lg))>:lang(lg){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ln),:not(:lang(ln))>:lang(ln){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lo),:not(:lang(lo))>:lang(lo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lrc),:not(:lang(lrc))>:lang(lrc){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lu),:not(:lang(lu))>:lang(lu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(luo),:not(:lang(luo))>:lang(luo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lv),:not(:lang(lv))>:lang(lv){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mas),:not(:lang(mas))>:lang(mas){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mer),:not(:lang(mer))>:lang(mer){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mfe),:not(:lang(mfe))>:lang(mfe){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mgo),:not(:lang(mgo))>:lang(mgo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ml),:not(:lang(ml))>:lang(ml){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mn),:not(:lang(mn))>:lang(mn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mr),:not(:lang(mr))>:lang(mr){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ms),:not(:lang(ms))>:lang(ms){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mt),:not(:lang(mt))>:lang(mt){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(my),:not(:lang(my))>:lang(my){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(naq),:not(:lang(naq))>:lang(naq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(nd),:not(:lang(nd))>:lang(nd){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ne),:not(:lang(ne))>:lang(ne){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(nus),:not(:lang(nus))>:lang(nus){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(nyn),:not(:lang(nyn))>:lang(nyn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(pa),:not(:lang(pa))>:lang(pa){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(pt),:not(:lang(pt))>:lang(pt){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(rof),:not(:lang(rof))>:lang(rof){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(rwk),:not(:lang(rwk))>:lang(rwk){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(saq),:not(:lang(saq))>:lang(saq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(sbp),:not(:lang(sbp))>:lang(sbp){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(seh),:not(:lang(seh))>:lang(seh){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ses),:not(:lang(ses))>:lang(ses){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(si),:not(:lang(si))>:lang(si){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(so),:not(:lang(so))>:lang(so){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(sw),:not(:lang(sw))>:lang(sw){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ta),:not(:lang(ta))>:lang(ta){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(te),:not(:lang(te))>:lang(te){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(teo),:not(:lang(teo))>:lang(teo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(th),:not(:lang(th))>:lang(th){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(to),:not(:lang(to))>:lang(to){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(tr),:not(:lang(tr))>:lang(tr){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(twq),:not(:lang(twq))>:lang(twq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(tzm),:not(:lang(tzm))>:lang(tzm){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(uz-Cyrl),:not(:lang(uz-Cyrl))>:lang(uz-Cyrl){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vai),:not(:lang(vai))>:lang(vai){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vai-Latn),:not(:lang(vai-Latn))>:lang(vai-Latn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vi),:not(:lang(vi))>:lang(vi){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vun),:not(:lang(vun))>:lang(vun){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(xog),:not(:lang(xog))>:lang(xog){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(yo),:not(:lang(yo))>:lang(yo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(yue-Hans),:not(:lang(yue-Hans))>:lang(yue-Hans){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(zh),:not(:lang(zh))>:lang(zh){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(zu),:not(:lang(zu))>:lang(zu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(uz),:not(:lang(uz))>:lang(uz){quotes:"\201c" "\201d" "\2019" "\2018"}:root:lang(eu),:not(:lang(eu))>:lang(eu){quotes:"\201c" "\201d" "\201c" "\201d"}:root:lang(tk),:not(:lang(tk))>:lang(tk){quotes:"\201c" "\201d" "\201c" "\201d"}:root:lang(ar),:not(:lang(ar))>:lang(ar){quotes:"\201d" "\201c" "\2019" "\2018"}:root:lang(ur),:not(:lang(ur))>:lang(ur){quotes:"\201d" "\201c" "\2019" "\2018"}:root:lang(fi),:not(:lang(fi))>:lang(fi){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(he),:not(:lang(he))>:lang(he){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(lag),:not(:lang(lag))>:lang(lag){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(rn),:not(:lang(rn))>:lang(rn){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(sn),:not(:lang(sn))>:lang(sn){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(sv),:not(:lang(sv))>:lang(sv){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(sr),:not(:lang(sr))>:lang(sr){quotes:"\201e" "\201c" "\2018" "\2018"}:root:lang(sr-Latn),:not(:lang(sr-Latn))>:lang(sr-Latn){quotes:"\201e" "\201c" "\2018" "\2018"}:root:lang(bg),:not(:lang(bg))>:lang(bg){quotes:"\201e" "\201c" "\201e" "\201c"}:root:lang(lt),:not(:lang(lt))>:lang(lt){quotes:"\201e" "\201c" "\201e" "\201c"}:root:lang(bs-Cyrl),:not(:lang(bs-Cyrl))>:lang(bs-Cyrl){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(cs),:not(:lang(cs))>:lang(cs){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(de),:not(:lang(de))>:lang(de){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(dsb),:not(:lang(dsb))>:lang(dsb){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(et),:not(:lang(et))>:lang(et){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(hr),:not(:lang(hr))>:lang(hr){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(hsb),:not(:lang(hsb))>:lang(hsb){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(is),:not(:lang(is))>:lang(is){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(lb),:not(:lang(lb))>:lang(lb){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(luy),:not(:lang(luy))>:lang(luy){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(mk),:not(:lang(mk))>:lang(mk){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(sk),:not(:lang(sk))>:lang(sk){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(sl),:not(:lang(sl))>:lang(sl){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(ka),:not(:lang(ka))>:lang(ka){quotes:"\201e" "\201c" "\ab" "\bb"}:root:lang(bs),:not(:lang(bs))>:lang(bs){quotes:"\201e" "\201d" "\2018" "\2019"}:root:lang(agq),:not(:lang(agq))>:lang(agq){quotes:"\201e" "\201d" "\201a" "\2019"}:root:lang(ff),:not(:lang(ff))>:lang(ff){quotes:"\201e" "\201d" "\201a" "\2019"}:root:lang(nmg),:not(:lang(nmg))>:lang(nmg){quotes:"\201e" "\201d" "\ab" "\bb"}:root:lang(ro),:not(:lang(ro))>:lang(ro){quotes:"\201e" "\201d" "\ab" "\bb"}:root:lang(pl),:not(:lang(pl))>:lang(pl){quotes:"\201e" "\201d" "\ab" "\bb"}:root:lang(hu),:not(:lang(hu))>:lang(hu){quotes:"\201e" "\201d" "\bb" "\ab"}:root:lang(nl),:not(:lang(nl))>:lang(nl){quotes:"\2018" "\2019" "\201c" "\201d"}:root:lang(ti-ER),:not(:lang(ti-ER))>:lang(ti-ER){quotes:"\2018" "\2019" "\201c" "\201d"}:root:lang(dua),:not(:lang(dua))>:lang(dua){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(ksf),:not(:lang(ksf))>:lang(ksf){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(rw),:not(:lang(rw))>:lang(rw){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(nn),:not(:lang(nn))>:lang(nn){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(nb),:not(:lang(nb))>:lang(nb){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(ast),:not(:lang(ast))>:lang(ast){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(bm),:not(:lang(bm))>:lang(bm){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(br),:not(:lang(br))>:lang(br){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(ca),:not(:lang(ca))>:lang(ca){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(dyo),:not(:lang(dyo))>:lang(dyo){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(el),:not(:lang(el))>:lang(el){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(es),:not(:lang(es))>:lang(es){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(ewo),:not(:lang(ewo))>:lang(ewo){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(mg),:not(:lang(mg))>:lang(mg){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(mua),:not(:lang(mua))>:lang(mua){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(sg),:not(:lang(sg))>:lang(sg){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(it),:not(:lang(it))>:lang(it){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(kab),:not(:lang(kab))>:lang(kab){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(kk),:not(:lang(kk))>:lang(kk){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(pt-PT),:not(:lang(pt-PT))>:lang(pt-PT){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(nnh),:not(:lang(nnh))>:lang(nnh){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(sq),:not(:lang(sq))>:lang(sq){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(bas),:not(:lang(bas))>:lang(bas){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(be),:not(:lang(be))>:lang(be){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(ky),:not(:lang(ky))>:lang(ky){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(sah),:not(:lang(sah))>:lang(sah){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(ru),:not(:lang(ru))>:lang(ru){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(uk),:not(:lang(uk))>:lang(uk){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(zgh),:not(:lang(zgh))>:lang(zgh){quotes:"\ab" "\bb" "\201e" "\201d"}:root:lang(shi),:not(:lang(shi))>:lang(shi){quotes:"\ab" "\bb" "\201e" "\201d"}:root:lang(shi-Latn),:not(:lang(shi-Latn))>:lang(shi-Latn){quotes:"\ab" "\bb" "\201e" "\201d"}:root:lang(am),:not(:lang(am))>:lang(am){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(az-Cyrl),:not(:lang(az-Cyrl))>:lang(az-Cyrl){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(fa),:not(:lang(fa))>:lang(fa){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(fr-CH),:not(:lang(fr-CH))>:lang(fr-CH){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(gsw),:not(:lang(gsw))>:lang(gsw){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(jgo),:not(:lang(jgo))>:lang(jgo){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(kkj),:not(:lang(kkj))>:lang(kkj){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(mzn),:not(:lang(mzn))>:lang(mzn){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(fr),:not(:lang(fr))>:lang(fr){quotes:"\ab" "\bb" "\ab" "\bb"}:root:lang(hy),:not(:lang(hy))>:lang(hy){quotes:"\ab" "\bb" "\ab" "\bb"}:root:lang(yav),:not(:lang(yav))>:lang(yav){quotes:"\ab" "\bb" "\ab" "\bb"}:root:lang(ja),:not(:lang(ja))>:lang(ja){quotes:"\300c" "\300d" "\300e" "\300f"}:root:lang(yue),:not(:lang(yue))>:lang(yue){quotes:"\300c" "\300d" "\300e" "\300f"}:root:lang(zh-Hant),:not(:lang(zh-Hant))>:lang(zh-Hant){quotes:"\300c" "\300d" "\300e" "\300f"}}@layer elements{audio,canvas,embed,iframe,img,object,picture,svg,video{display:block;vertical-align:middle;max-width:100%}img,svg,video,canvas{height:auto}audio{width:100%;max-width:var(--tera1)}audio:not([controls]){display:none}figcaption{font-style:italic;font-size:var(--text-sm)}figure{&:has(*+figcaption){figcaption{margin-top:var(--figcaption-spacing)}}&:has(figcaption+*){figcaption{margin-bottom:var(--figcaption-spacing)}}}iframe{border:var(--border-sm) solid var(--ui-border-color)}}@layer elements{caption{caption-side:bottom;margin-top:var(--table-caption-spacing);font-size:var(--text-sm)}table{border-spacing:0;border:var(--table-border-width) solid var(--table-border-color);border-radius:var(--table-border-radius);background-color:var(--table-background-color)}th,td{text-align:start;padding:var(--table-padding);border-bottom:var(--table-border-width) solid var(--table-border-color);border-inline-start:var(--table-border-width) solid var(--table-border-color)}tr{th:first-child,td:first-child{border-inline-start-width:0}}tbody{tr:last-child{th,td{border-bottom-width:0}}}tfoot{th,td{border-top:var(--table-border-width) solid var(--table-border-color);border-bottom-width:0}}}@layer elements{::placeholder{opacity:var(--o-4)}input,button,textarea,select{font:inherit;color:var(--text-color)}button{color:var(--text-color)}fieldset{border:var(--fieldset-border-width) solid var(--fieldset-border-color);border-radius:var(--fieldset-border-radius);padding:var(--fieldset-padding);ul:has([type=checkbox],[type=radio]){padding-inline-start:0}>[aria-hidden]{margin-bottom:var(--sm3);font-size:var(--text-lg);grid-column:1 / -1}}:is(input,select,textarea):user-invalid{border-color:var(--input-border-color-invalid)}input{&:where(:not([type=checkbox],[type=radio])){height:var(--input-height)}&:where(:not([type=color],[type=file],[type=reset],[type=submit])){padding:var(--input-padding)}&:where(:not([type=color])){border-radius:var(--input-border-radius)}&:where(:not([type=file])){border:var(--input-border-width) solid var(--input-border-color)}&[type=file]{width:100%;accent-color:var(--text-color)}&[type=number]{padding-inline-end:var(--xs1)}}label{display:block;&:has(+:is(input,select,textarea)){margin-bottom:var(--label-spacing)}}legend{position:absolute;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);width:1px;height:1px;white-space:nowrap}meter{width:100%;background:var(--meter-track-color);border-radius:var(--meter-border-radius);height:var(--meter-height);&::-webkit-meter-bar{background:var(--meter-track-color)}&::-webkit-meter-bar,&::-webkit-meter-optimum-value,&::-webkit-meter-suboptimum-value,&::-webkit-meter-even-less-good-value{height:var(--meter-height);border:none;border-radius:var(--meter-border-radius)}&::-webkit-meter-even-less-good-value{background:var(--meter-low-color)}&::-webkit-meter-suboptimum-value{background:var(--meter-medium-color)}&::-webkit-meter-optimum-value{background:var(--meter-high-color)}&:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:var(--meter-low-color)}&:-moz-meter-sub-optimum::-moz-meter-bar{background:var(--meter-medium-color)}&:-moz-meter-optimum::-moz-meter-bar{background:var(--meter-high-color)}}progress{appearance:none;width:100%;height:var(--progress-height);background:var(--progress-track-color);border-radius:var(--progress-border-radius);border:none;&::-moz-progress-bar{background:var(--progress-color);border-radius:var(--progress-border-radius)}&::-webkit-progress-bar{width:100%;background:var(--progress-track-color);border-radius:var(--progress-border-radius);height:var(--progress-height)}&::-webkit-progress-value{background:var(--progress-color);border-radius:var(--progress-border-radius)}}select{--split: calc(100% - var(--select-icon-size));display:flex;appearance:none;height:var(--input-height);padding:var(--xs1) calc(var(--input-padding) + var(--md1)) var(--xs1) var(--input-padding);border:var(--input-border-width) solid var(--input-border-color);border-radius:var(--input-border-radius);background:linear-gradient(to right,var(--body-background-color) 0 var(--split),var(--text-color) var(--split) 100%);mask-image:var(--select-icon),linear-gradient(to right,transparent calc(var(--split) - 1px),red 0),linear-gradient(red 0 0);mask-size:var(--select-icon-size),auto,auto;mask-position:calc(100% - var(--xs1)) center,0 0,0 0;mask-repeat:no-repeat;mask-clip:padding-box,padding-box,border-box;mask-origin:padding-box,padding-box,border-box;mask-composite:add,exclude;&:disabled{--disabled-color: light-dark( hsl(from var(--text-color) h s 70%), hsl(from var(--text-color) h s 40%) );cursor:not-allowed;color:var(--disabled-color);background:linear-gradient(to right,var(--body-background-color) 0 var(--split),var(--disabled-color) var(--split) 100%)}&[multiple]{height:auto;padding:var(--input-padding);background:var(--body-background-color);mask-image:none}}textarea{width:100%;padding:var(--input-padding);border-radius:var(--input-border-radius);border:var(--input-border-width) solid var(--input-border-color);resize:vertical;&:not([rows]){min-height:6em}}}@layer elements{dialog{min-width:var(--dialog-min-width);max-width:var(--dialog-max-width);padding:var(--dialog-padding);border:var(--dialog-border-width) solid var(--dialog-border-color);background-color:var(--dialog-background-color);border-radius:var(--dialog-border-radius);&::backdrop{background:var(--dialog-backdrop-color);opacity:var(--dialog-backdrop-opacity)}[aria-label="close pop-up"]{position:absolute;top:var(--xs3);right:var( --xs3 );background:transparent;border:none;outline:none;cursor:pointer}p:last-of-type{margin-bottom:0}}details{padding:var(--details-padding);border:var(--details-border-width) solid var(--details-border-color);background-color:var(--details-background-color);border-radius:var(--details-border-radius);cursor:pointer;summary{display:flex;justify-content:space-between;font-weight:var(--bold);&::-webkit-details-marker{display:none}&:after{content:"";width:var(--details-icon-size);height:var(--details-icon-size);background-color:currentColor;mask-image:var(--details-icon);mask-size:contain;mask-repeat:no-repeat;transition:transform var(--transition)}}&[open]>summary{margin-bottom:var(--details-spacing);&:after{transform:rotate(180deg)}}p:last-of-type{margin-bottom:0}}}@layer global{:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.a11y-skipLink{position:fixed;z-index:var(--z-top);inset-block-start:-100vb;inset-inline-start:0;padding:.75em 1.25em;background-color:var(--body-background-color);color:var(--text-color)}.a11y-skipLink:focus{inset-block-start:0}.a11y-srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}}@layer global{@keyframes fadeFromOpaque{0%{opacity:1}}@keyframes fadeToOpaque{to{opacity:1}}@keyframes fadeFromTransparent{0%{opacity:0}}@keyframes fadeToTransparent{to{opacity:0}}}@layer global{.grid{display:grid;--grid-tc: repeat(4, 1fr);--grid-cs: 1;--grid-ce: -1;grid-template-columns:var(--grid-tc);grid-column-gap:var(--grid-column-gap);grid-row-gap:var(--grid-row-gap)}.grid-flush{grid-column-gap:0;grid-row-gap:0}.grid>.grid_item{display:block;appearance:none;-webkit-appearance:none}.grid[col="1"]{--grid-tc: repeat(1, 1fr) }.grid[col="2"]{--grid-tc: repeat(2, 1fr) }.grid[col="3"]{--grid-tc: repeat(3, 1fr) }.grid[col="4"]{--grid-tc: repeat(4, 1fr) }.grid[col="5"]{--grid-tc: repeat(5, 1fr) }.grid[col="6"]{--grid-tc: repeat(6, 1fr) }.grid[col="7"]{--grid-tc: repeat(7, 1fr) }.grid[col="8"]{--grid-tc: repeat(8, 1fr) }.grid[col="9"]{--grid-tc: repeat(9, 1fr) }.grid[col="10"]{--grid-tc: repeat(10, 1fr) }.grid[col="11"]{--grid-tc: repeat(11, 1fr) }.grid[col="12"]{--grid-tc: repeat(12, 1fr) }.grid[col="13"]{--grid-tc: repeat(13, 1fr) }.grid[col="14"]{--grid-tc: repeat(14, 1fr) }.grid[col="15"]{--grid-tc: repeat(15, 1fr) }.grid[col="16"]{--grid-tc: repeat(16, 1fr) }.grid[col="17"]{--grid-tc: repeat(17, 1fr) }.grid[col="18"]{--grid-tc: repeat(18, 1fr) }.grid[col="19"]{--grid-tc: repeat(19, 1fr) }.grid[col="20"]{--grid-tc: repeat(20, 1fr) }.grid[col="21"]{--grid-tc: repeat(21, 1fr) }.grid[col="22"]{--grid-tc: repeat(22, 1fr) }.grid[col="23"]{--grid-tc: repeat(23, 1fr) }.grid[col="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span^="1"]{--grid-cs: 1 }.grid>.grid_item[span^="2"]{--grid-cs: 2 }.grid>.grid_item[span^="3"]{--grid-cs: 3 }.grid>.grid_item[span^="4"]{--grid-cs: 4 }.grid>.grid_item[span^="5"]{--grid-cs: 5 }.grid>.grid_item[span^="6"]{--grid-cs: 6 }.grid>.grid_item[span^="7"]{--grid-cs: 7 }.grid>.grid_item[span^="8"]{--grid-cs: 8 }.grid>.grid_item[span^="9"]{--grid-cs: 9 }.grid>.grid_item[span^="10"]{--grid-cs: 10 }.grid>.grid_item[span^="11"]{--grid-cs: 11 }.grid>.grid_item[span^="12"]{--grid-cs: 12 }.grid>.grid_item[span^="13"]{--grid-cs: 13 }.grid>.grid_item[span^="14"]{--grid-cs: 14 }.grid>.grid_item[span^="15"]{--grid-cs: 15 }.grid>.grid_item[span^="16"]{--grid-cs: 16 }.grid>.grid_item[span^="17"]{--grid-cs: 17 }.grid>.grid_item[span^="18"]{--grid-cs: 18 }.grid>.grid_item[span^="19"]{--grid-cs: 19 }.grid>.grid_item[span^="20"]{--grid-cs: 20 }.grid>.grid_item[span^="21"]{--grid-cs: 21 }.grid>.grid_item[span^="22"]{--grid-cs: 22 }.grid>.grid_item[span^="23"]{--grid-cs: 23 }.grid>.grid_item[span^="24"]{--grid-cs: 24 }.grid>.grid_item[span$="+1"],.grid>.grid_item[span="1"]{--grid-ce: 1 }.grid>.grid_item[span$="+2"],.grid>.grid_item[span$="-1"],.grid>.grid_item[span="2"]{--grid-ce: 2 }.grid>.grid_item[span$="+3"],.grid>.grid_item[span$="-2"],.grid>.grid_item[span="3"]{--grid-ce: 3 }.grid>.grid_item[span$="+4"],.grid>.grid_item[span$="-3"],.grid>.grid_item[span="4"]{--grid-ce: 4 }.grid>.grid_item[span$="+5"],.grid>.grid_item[span$="-4"],.grid>.grid_item[span="5"]{--grid-ce: 5 }.grid>.grid_item[span$="+6"],.grid>.grid_item[span$="-5"],.grid>.grid_item[span="6"]{--grid-ce: 6 }.grid>.grid_item[span$="+7"],.grid>.grid_item[span$="-6"],.grid>.grid_item[span="7"]{--grid-ce: 7 }.grid>.grid_item[span$="+8"],.grid>.grid_item[span$="-7"],.grid>.grid_item[span="8"]{--grid-ce: 8 }.grid>.grid_item[span$="+9"],.grid>.grid_item[span$="-8"],.grid>.grid_item[span="9"]{--grid-ce: 9 }.grid>.grid_item[span$="+10"],.grid>.grid_item[span$="-9"],.grid>.grid_item[span="10"]{--grid-ce: 10 }.grid>.grid_item[span$="+11"],.grid>.grid_item[span$="-10"],.grid>.grid_item[span="11"]{--grid-ce: 11 }.grid>.grid_item[span$="+12"],.grid>.grid_item[span$="-11"],.grid>.grid_item[span="12"]{--grid-ce: 12 }.grid>.grid_item[span$="+13"],.grid>.grid_item[span$="-12"],.grid>.grid_item[span="13"]{--grid-ce: 13 }.grid>.grid_item[span$="+14"],.grid>.grid_item[span$="-13"],.grid>.grid_item[span="14"]{--grid-ce: 14 }.grid>.grid_item[span$="+15"],.grid>.grid_item[span$="-14"],.grid>.grid_item[span="15"]{--grid-ce: 15 }.grid>.grid_item[span$="+16"],.grid>.grid_item[span$="-15"],.grid>.grid_item[span="16"]{--grid-ce: 16 }.grid>.grid_item[span$="+17"],.grid>.grid_item[span$="-16"],.grid>.grid_item[span="17"]{--grid-ce: 17 }.grid>.grid_item[span$="+18"],.grid>.grid_item[span$="-17"],.grid>.grid_item[span="18"]{--grid-ce: 18 }.grid>.grid_item[span$="+19"],.grid>.grid_item[span$="-18"],.grid>.grid_item[span="19"]{--grid-ce: 19 }.grid>.grid_item[span$="+20"],.grid>.grid_item[span$="-19"],.grid>.grid_item[span="20"]{--grid-ce: 20 }.grid>.grid_item[span$="+21"],.grid>.grid_item[span$="-20"],.grid>.grid_item[span="21"]{--grid-ce: 21 }.grid>.grid_item[span$="+22"],.grid>.grid_item[span$="-21"],.grid>.grid_item[span="22"]{--grid-ce: 22 }.grid>.grid_item[span$="+23"],.grid>.grid_item[span$="-22"],.grid>.grid_item[span="23"]{--grid-ce: 23 }.grid>.grid_item[span$="+24"],.grid>.grid_item[span$="-23"],.grid>.grid_item[span="24"]{--grid-ce: 24 }.grid>.grid_item[span$="-24"]{--grid-ce: 25 }.grid>.grid_item[span]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span*="+"],.grid>.grid_item[span*="-"],.grid>.grid_item[span*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span*="-"],.grid>.grid_item[span*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span=row]{grid-column:1 / -1}@media only screen and (width>=768px){.grid[col-md="1"]{--grid-tc: repeat(1, 1fr) }.grid[col-md="2"]{--grid-tc: repeat(2, 1fr) }.grid[col-md="3"]{--grid-tc: repeat(3, 1fr) }.grid[col-md="4"]{--grid-tc: repeat(4, 1fr) }.grid[col-md="5"]{--grid-tc: repeat(5, 1fr) }.grid[col-md="6"]{--grid-tc: repeat(6, 1fr) }.grid[col-md="7"]{--grid-tc: repeat(7, 1fr) }.grid[col-md="8"]{--grid-tc: repeat(8, 1fr) }.grid[col-md="9"]{--grid-tc: repeat(9, 1fr) }.grid[col-md="10"]{--grid-tc: repeat(10, 1fr) }.grid[col-md="11"]{--grid-tc: repeat(11, 1fr) }.grid[col-md="12"]{--grid-tc: repeat(12, 1fr) }.grid[col-md="13"]{--grid-tc: repeat(13, 1fr) }.grid[col-md="14"]{--grid-tc: repeat(14, 1fr) }.grid[col-md="15"]{--grid-tc: repeat(15, 1fr) }.grid[col-md="16"]{--grid-tc: repeat(16, 1fr) }.grid[col-md="17"]{--grid-tc: repeat(17, 1fr) }.grid[col-md="18"]{--grid-tc: repeat(18, 1fr) }.grid[col-md="19"]{--grid-tc: repeat(19, 1fr) }.grid[col-md="20"]{--grid-tc: repeat(20, 1fr) }.grid[col-md="21"]{--grid-tc: repeat(21, 1fr) }.grid[col-md="22"]{--grid-tc: repeat(22, 1fr) }.grid[col-md="23"]{--grid-tc: repeat(23, 1fr) }.grid[col-md="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span-md^="1"]{--grid-cs: 1 }.grid>.grid_item[span-md^="2"]{--grid-cs: 2 }.grid>.grid_item[span-md^="3"]{--grid-cs: 3 }.grid>.grid_item[span-md^="4"]{--grid-cs: 4 }.grid>.grid_item[span-md^="5"]{--grid-cs: 5 }.grid>.grid_item[span-md^="6"]{--grid-cs: 6 }.grid>.grid_item[span-md^="7"]{--grid-cs: 7 }.grid>.grid_item[span-md^="8"]{--grid-cs: 8 }.grid>.grid_item[span-md^="9"]{--grid-cs: 9 }.grid>.grid_item[span-md^="10"]{--grid-cs: 10 }.grid>.grid_item[span-md^="11"]{--grid-cs: 11 }.grid>.grid_item[span-md^="12"]{--grid-cs: 12 }.grid>.grid_item[span-md^="13"]{--grid-cs: 13 }.grid>.grid_item[span-md^="14"]{--grid-cs: 14 }.grid>.grid_item[span-md^="15"]{--grid-cs: 15 }.grid>.grid_item[span-md^="16"]{--grid-cs: 16 }.grid>.grid_item[span-md^="17"]{--grid-cs: 17 }.grid>.grid_item[span-md^="18"]{--grid-cs: 18 }.grid>.grid_item[span-md^="19"]{--grid-cs: 19 }.grid>.grid_item[span-md^="20"]{--grid-cs: 20 }.grid>.grid_item[span-md^="21"]{--grid-cs: 21 }.grid>.grid_item[span-md^="22"]{--grid-cs: 22 }.grid>.grid_item[span-md^="23"]{--grid-cs: 23 }.grid>.grid_item[span-md^="24"]{--grid-cs: 24 }.grid>.grid_item[span-md$="+1"],.grid>.grid_item[span-md="1"]{--grid-ce: 1 }.grid>.grid_item[span-md$="+2"],.grid>.grid_item[span-md$="-1"],.grid>.grid_item[span-md="2"]{--grid-ce: 2 }.grid>.grid_item[span-md$="+3"],.grid>.grid_item[span-md$="-2"],.grid>.grid_item[span-md="3"]{--grid-ce: 3 }.grid>.grid_item[span-md$="+4"],.grid>.grid_item[span-md$="-3"],.grid>.grid_item[span-md="4"]{--grid-ce: 4 }.grid>.grid_item[span-md$="+5"],.grid>.grid_item[span-md$="-4"],.grid>.grid_item[span-md="5"]{--grid-ce: 5 }.grid>.grid_item[span-md$="+6"],.grid>.grid_item[span-md$="-5"],.grid>.grid_item[span-md="6"]{--grid-ce: 6 }.grid>.grid_item[span-md$="+7"],.grid>.grid_item[span-md$="-6"],.grid>.grid_item[span-md="7"]{--grid-ce: 7 }.grid>.grid_item[span-md$="+8"],.grid>.grid_item[span-md$="-7"],.grid>.grid_item[span-md="8"]{--grid-ce: 8 }.grid>.grid_item[span-md$="+9"],.grid>.grid_item[span-md$="-8"],.grid>.grid_item[span-md="9"]{--grid-ce: 9 }.grid>.grid_item[span-md$="+10"],.grid>.grid_item[span-md$="-9"],.grid>.grid_item[span-md="10"]{--grid-ce: 10 }.grid>.grid_item[span-md$="+11"],.grid>.grid_item[span-md$="-10"],.grid>.grid_item[span-md="11"]{--grid-ce: 11 }.grid>.grid_item[span-md$="+12"],.grid>.grid_item[span-md$="-11"],.grid>.grid_item[span-md="12"]{--grid-ce: 12 }.grid>.grid_item[span-md$="+13"],.grid>.grid_item[span-md$="-12"],.grid>.grid_item[span-md="13"]{--grid-ce: 13 }.grid>.grid_item[span-md$="+14"],.grid>.grid_item[span-md$="-13"],.grid>.grid_item[span-md="14"]{--grid-ce: 14 }.grid>.grid_item[span-md$="+15"],.grid>.grid_item[span-md$="-14"],.grid>.grid_item[span-md="15"]{--grid-ce: 15 }.grid>.grid_item[span-md$="+16"],.grid>.grid_item[span-md$="-15"],.grid>.grid_item[span-md="16"]{--grid-ce: 16 }.grid>.grid_item[span-md$="+17"],.grid>.grid_item[span-md$="-16"],.grid>.grid_item[span-md="17"]{--grid-ce: 17 }.grid>.grid_item[span-md$="+18"],.grid>.grid_item[span-md$="-17"],.grid>.grid_item[span-md="18"]{--grid-ce: 18 }.grid>.grid_item[span-md$="+19"],.grid>.grid_item[span-md$="-18"],.grid>.grid_item[span-md="19"]{--grid-ce: 19 }.grid>.grid_item[span-md$="+20"],.grid>.grid_item[span-md$="-19"],.grid>.grid_item[span-md="20"]{--grid-ce: 20 }.grid>.grid_item[span-md$="+21"],.grid>.grid_item[span-md$="-20"],.grid>.grid_item[span-md="21"]{--grid-ce: 21 }.grid>.grid_item[span-md$="+22"],.grid>.grid_item[span-md$="-21"],.grid>.grid_item[span-md="22"]{--grid-ce: 22 }.grid>.grid_item[span-md$="+23"],.grid>.grid_item[span-md$="-22"],.grid>.grid_item[span-md="23"]{--grid-ce: 23 }.grid>.grid_item[span-md$="+24"],.grid>.grid_item[span-md$="-23"],.grid>.grid_item[span-md="24"]{--grid-ce: 24 }.grid>.grid_item[span-md$="-24"]{--grid-ce: 25 }.grid>.grid_item[span-md]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span-md*="+"],.grid>.grid_item[span-md*="-"],.grid>.grid_item[span-md*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span-md*="-"],.grid>.grid_item[span-md*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span-md=row]{grid-column:1 / -1}}@media only screen and (width>=1024px){.grid[col-lg="1"]{--grid-tc: repeat(1, 1fr) }.grid[col-lg="2"]{--grid-tc: repeat(2, 1fr) }.grid[col-lg="3"]{--grid-tc: repeat(3, 1fr) }.grid[col-lg="4"]{--grid-tc: repeat(4, 1fr) }.grid[col-lg="5"]{--grid-tc: repeat(5, 1fr) }.grid[col-lg="6"]{--grid-tc: repeat(6, 1fr) }.grid[col-lg="7"]{--grid-tc: repeat(7, 1fr) }.grid[col-lg="8"]{--grid-tc: repeat(8, 1fr) }.grid[col-lg="9"]{--grid-tc: repeat(9, 1fr) }.grid[col-lg="10"]{--grid-tc: repeat(10, 1fr) }.grid[col-lg="11"]{--grid-tc: repeat(11, 1fr) }.grid[col-lg="12"]{--grid-tc: repeat(12, 1fr) }.grid[col-lg="13"]{--grid-tc: repeat(13, 1fr) }.grid[col-lg="14"]{--grid-tc: repeat(14, 1fr) }.grid[col-lg="15"]{--grid-tc: repeat(15, 1fr) }.grid[col-lg="16"]{--grid-tc: repeat(16, 1fr) }.grid[col-lg="17"]{--grid-tc: repeat(17, 1fr) }.grid[col-lg="18"]{--grid-tc: repeat(18, 1fr) }.grid[col-lg="19"]{--grid-tc: repeat(19, 1fr) }.grid[col-lg="20"]{--grid-tc: repeat(20, 1fr) }.grid[col-lg="21"]{--grid-tc: repeat(21, 1fr) }.grid[col-lg="22"]{--grid-tc: repeat(22, 1fr) }.grid[col-lg="23"]{--grid-tc: repeat(23, 1fr) }.grid[col-lg="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span-lg^="1"]{--grid-cs: 1 }.grid>.grid_item[span-lg^="2"]{--grid-cs: 2 }.grid>.grid_item[span-lg^="3"]{--grid-cs: 3 }.grid>.grid_item[span-lg^="4"]{--grid-cs: 4 }.grid>.grid_item[span-lg^="5"]{--grid-cs: 5 }.grid>.grid_item[span-lg^="6"]{--grid-cs: 6 }.grid>.grid_item[span-lg^="7"]{--grid-cs: 7 }.grid>.grid_item[span-lg^="8"]{--grid-cs: 8 }.grid>.grid_item[span-lg^="9"]{--grid-cs: 9 }.grid>.grid_item[span-lg^="10"]{--grid-cs: 10 }.grid>.grid_item[span-lg^="11"]{--grid-cs: 11 }.grid>.grid_item[span-lg^="12"]{--grid-cs: 12 }.grid>.grid_item[span-lg^="13"]{--grid-cs: 13 }.grid>.grid_item[span-lg^="14"]{--grid-cs: 14 }.grid>.grid_item[span-lg^="15"]{--grid-cs: 15 }.grid>.grid_item[span-lg^="16"]{--grid-cs: 16 }.grid>.grid_item[span-lg^="17"]{--grid-cs: 17 }.grid>.grid_item[span-lg^="18"]{--grid-cs: 18 }.grid>.grid_item[span-lg^="19"]{--grid-cs: 19 }.grid>.grid_item[span-lg^="20"]{--grid-cs: 20 }.grid>.grid_item[span-lg^="21"]{--grid-cs: 21 }.grid>.grid_item[span-lg^="22"]{--grid-cs: 22 }.grid>.grid_item[span-lg^="23"]{--grid-cs: 23 }.grid>.grid_item[span-lg^="24"]{--grid-cs: 24 }.grid>.grid_item[span-lg$="+1"],.grid>.grid_item[span-lg="1"]{--grid-ce: 1 }.grid>.grid_item[span-lg$="+2"],.grid>.grid_item[span-lg$="-1"],.grid>.grid_item[span-lg="2"]{--grid-ce: 2 }.grid>.grid_item[span-lg$="+3"],.grid>.grid_item[span-lg$="-2"],.grid>.grid_item[span-lg="3"]{--grid-ce: 3 }.grid>.grid_item[span-lg$="+4"],.grid>.grid_item[span-lg$="-3"],.grid>.grid_item[span-lg="4"]{--grid-ce: 4 }.grid>.grid_item[span-lg$="+5"],.grid>.grid_item[span-lg$="-4"],.grid>.grid_item[span-lg="5"]{--grid-ce: 5 }.grid>.grid_item[span-lg$="+6"],.grid>.grid_item[span-lg$="-5"],.grid>.grid_item[span-lg="6"]{--grid-ce: 6 }.grid>.grid_item[span-lg$="+7"],.grid>.grid_item[span-lg$="-6"],.grid>.grid_item[span-lg="7"]{--grid-ce: 7 }.grid>.grid_item[span-lg$="+8"],.grid>.grid_item[span-lg$="-7"],.grid>.grid_item[span-lg="8"]{--grid-ce: 8 }.grid>.grid_item[span-lg$="+9"],.grid>.grid_item[span-lg$="-8"],.grid>.grid_item[span-lg="9"]{--grid-ce: 9 }.grid>.grid_item[span-lg$="+10"],.grid>.grid_item[span-lg$="-9"],.grid>.grid_item[span-lg="10"]{--grid-ce: 10 }.grid>.grid_item[span-lg$="+11"],.grid>.grid_item[span-lg$="-10"],.grid>.grid_item[span-lg="11"]{--grid-ce: 11 }.grid>.grid_item[span-lg$="+12"],.grid>.grid_item[span-lg$="-11"],.grid>.grid_item[span-lg="12"]{--grid-ce: 12 }.grid>.grid_item[span-lg$="+13"],.grid>.grid_item[span-lg$="-12"],.grid>.grid_item[span-lg="13"]{--grid-ce: 13 }.grid>.grid_item[span-lg$="+14"],.grid>.grid_item[span-lg$="-13"],.grid>.grid_item[span-lg="14"]{--grid-ce: 14 }.grid>.grid_item[span-lg$="+15"],.grid>.grid_item[span-lg$="-14"],.grid>.grid_item[span-lg="15"]{--grid-ce: 15 }.grid>.grid_item[span-lg$="+16"],.grid>.grid_item[span-lg$="-15"],.grid>.grid_item[span-lg="16"]{--grid-ce: 16 }.grid>.grid_item[span-lg$="+17"],.grid>.grid_item[span-lg$="-16"],.grid>.grid_item[span-lg="17"]{--grid-ce: 17 }.grid>.grid_item[span-lg$="+18"],.grid>.grid_item[span-lg$="-17"],.grid>.grid_item[span-lg="18"]{--grid-ce: 18 }.grid>.grid_item[span-lg$="+19"],.grid>.grid_item[span-lg$="-18"],.grid>.grid_item[span-lg="19"]{--grid-ce: 19 }.grid>.grid_item[span-lg$="+20"],.grid>.grid_item[span-lg$="-19"],.grid>.grid_item[span-lg="20"]{--grid-ce: 20 }.grid>.grid_item[span-lg$="+21"],.grid>.grid_item[span-lg$="-20"],.grid>.grid_item[span-lg="21"]{--grid-ce: 21 }.grid>.grid_item[span-lg$="+22"],.grid>.grid_item[span-lg$="-21"],.grid>.grid_item[span-lg="22"]{--grid-ce: 22 }.grid>.grid_item[span-lg$="+23"],.grid>.grid_item[span-lg$="-22"],.grid>.grid_item[span-lg="23"]{--grid-ce: 23 }.grid>.grid_item[span-lg$="+24"],.grid>.grid_item[span-lg$="-23"],.grid>.grid_item[span-lg="24"]{--grid-ce: 24 }.grid>.grid_item[span-lg$="-24"]{--grid-ce: 25 }.grid>.grid_item[span-lg]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span-lg*="+"],.grid>.grid_item[span-lg*="-"],.grid>.grid_item[span-lg*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span-lg*="-"],.grid>.grid_item[span-lg*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span-lg=row]{grid-column:1 / -1}}@media only screen and (width>=1440px){.grid[col-xl="1"]{--grid-tc: repeat(1, 1fr) }.grid[col-xl="2"]{--grid-tc: repeat(2, 1fr) }.grid[col-xl="3"]{--grid-tc: repeat(3, 1fr) }.grid[col-xl="4"]{--grid-tc: repeat(4, 1fr) }.grid[col-xl="5"]{--grid-tc: repeat(5, 1fr) }.grid[col-xl="6"]{--grid-tc: repeat(6, 1fr) }.grid[col-xl="7"]{--grid-tc: repeat(7, 1fr) }.grid[col-xl="8"]{--grid-tc: repeat(8, 1fr) }.grid[col-xl="9"]{--grid-tc: repeat(9, 1fr) }.grid[col-xl="10"]{--grid-tc: repeat(10, 1fr) }.grid[col-xl="11"]{--grid-tc: repeat(11, 1fr) }.grid[col-xl="12"]{--grid-tc: repeat(12, 1fr) }.grid[col-xl="13"]{--grid-tc: repeat(13, 1fr) }.grid[col-xl="14"]{--grid-tc: repeat(14, 1fr) }.grid[col-xl="15"]{--grid-tc: repeat(15, 1fr) }.grid[col-xl="16"]{--grid-tc: repeat(16, 1fr) }.grid[col-xl="17"]{--grid-tc: repeat(17, 1fr) }.grid[col-xl="18"]{--grid-tc: repeat(18, 1fr) }.grid[col-xl="19"]{--grid-tc: repeat(19, 1fr) }.grid[col-xl="20"]{--grid-tc: repeat(20, 1fr) }.grid[col-xl="21"]{--grid-tc: repeat(21, 1fr) }.grid[col-xl="22"]{--grid-tc: repeat(22, 1fr) }.grid[col-xl="23"]{--grid-tc: repeat(23, 1fr) }.grid[col-xl="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span-xl^="1"]{--grid-cs: 1 }.grid>.grid_item[span-xl^="2"]{--grid-cs: 2 }.grid>.grid_item[span-xl^="3"]{--grid-cs: 3 }.grid>.grid_item[span-xl^="4"]{--grid-cs: 4 }.grid>.grid_item[span-xl^="5"]{--grid-cs: 5 }.grid>.grid_item[span-xl^="6"]{--grid-cs: 6 }.grid>.grid_item[span-xl^="7"]{--grid-cs: 7 }.grid>.grid_item[span-xl^="8"]{--grid-cs: 8 }.grid>.grid_item[span-xl^="9"]{--grid-cs: 9 }.grid>.grid_item[span-xl^="10"]{--grid-cs: 10 }.grid>.grid_item[span-xl^="11"]{--grid-cs: 11 }.grid>.grid_item[span-xl^="12"]{--grid-cs: 12 }.grid>.grid_item[span-xl^="13"]{--grid-cs: 13 }.grid>.grid_item[span-xl^="14"]{--grid-cs: 14 }.grid>.grid_item[span-xl^="15"]{--grid-cs: 15 }.grid>.grid_item[span-xl^="16"]{--grid-cs: 16 }.grid>.grid_item[span-xl^="17"]{--grid-cs: 17 }.grid>.grid_item[span-xl^="18"]{--grid-cs: 18 }.grid>.grid_item[span-xl^="19"]{--grid-cs: 19 }.grid>.grid_item[span-xl^="20"]{--grid-cs: 20 }.grid>.grid_item[span-xl^="21"]{--grid-cs: 21 }.grid>.grid_item[span-xl^="22"]{--grid-cs: 22 }.grid>.grid_item[span-xl^="23"]{--grid-cs: 23 }.grid>.grid_item[span-xl^="24"]{--grid-cs: 24 }.grid>.grid_item[span-xl$="+1"],.grid>.grid_item[span-xl="1"]{--grid-ce: 1 }.grid>.grid_item[span-xl$="+2"],.grid>.grid_item[span-xl$="-1"],.grid>.grid_item[span-xl="2"]{--grid-ce: 2 }.grid>.grid_item[span-xl$="+3"],.grid>.grid_item[span-xl$="-2"],.grid>.grid_item[span-xl="3"]{--grid-ce: 3 }.grid>.grid_item[span-xl$="+4"],.grid>.grid_item[span-xl$="-3"],.grid>.grid_item[span-xl="4"]{--grid-ce: 4 }.grid>.grid_item[span-xl$="+5"],.grid>.grid_item[span-xl$="-4"],.grid>.grid_item[span-xl="5"]{--grid-ce: 5 }.grid>.grid_item[span-xl$="+6"],.grid>.grid_item[span-xl$="-5"],.grid>.grid_item[span-xl="6"]{--grid-ce: 6 }.grid>.grid_item[span-xl$="+7"],.grid>.grid_item[span-xl$="-6"],.grid>.grid_item[span-xl="7"]{--grid-ce: 7 }.grid>.grid_item[span-xl$="+8"],.grid>.grid_item[span-xl$="-7"],.grid>.grid_item[span-xl="8"]{--grid-ce: 8 }.grid>.grid_item[span-xl$="+9"],.grid>.grid_item[span-xl$="-8"],.grid>.grid_item[span-xl="9"]{--grid-ce: 9 }.grid>.grid_item[span-xl$="+10"],.grid>.grid_item[span-xl$="-9"],.grid>.grid_item[span-xl="10"]{--grid-ce: 10 }.grid>.grid_item[span-xl$="+11"],.grid>.grid_item[span-xl$="-10"],.grid>.grid_item[span-xl="11"]{--grid-ce: 11 }.grid>.grid_item[span-xl$="+12"],.grid>.grid_item[span-xl$="-11"],.grid>.grid_item[span-xl="12"]{--grid-ce: 12 }.grid>.grid_item[span-xl$="+13"],.grid>.grid_item[span-xl$="-12"],.grid>.grid_item[span-xl="13"]{--grid-ce: 13 }.grid>.grid_item[span-xl$="+14"],.grid>.grid_item[span-xl$="-13"],.grid>.grid_item[span-xl="14"]{--grid-ce: 14 }.grid>.grid_item[span-xl$="+15"],.grid>.grid_item[span-xl$="-14"],.grid>.grid_item[span-xl="15"]{--grid-ce: 15 }.grid>.grid_item[span-xl$="+16"],.grid>.grid_item[span-xl$="-15"],.grid>.grid_item[span-xl="16"]{--grid-ce: 16 }.grid>.grid_item[span-xl$="+17"],.grid>.grid_item[span-xl$="-16"],.grid>.grid_item[span-xl="17"]{--grid-ce: 17 }.grid>.grid_item[span-xl$="+18"],.grid>.grid_item[span-xl$="-17"],.grid>.grid_item[span-xl="18"]{--grid-ce: 18 }.grid>.grid_item[span-xl$="+19"],.grid>.grid_item[span-xl$="-18"],.grid>.grid_item[span-xl="19"]{--grid-ce: 19 }.grid>.grid_item[span-xl$="+20"],.grid>.grid_item[span-xl$="-19"],.grid>.grid_item[span-xl="20"]{--grid-ce: 20 }.grid>.grid_item[span-xl$="+21"],.grid>.grid_item[span-xl$="-20"],.grid>.grid_item[span-xl="21"]{--grid-ce: 21 }.grid>.grid_item[span-xl$="+22"],.grid>.grid_item[span-xl$="-21"],.grid>.grid_item[span-xl="22"]{--grid-ce: 22 }.grid>.grid_item[span-xl$="+23"],.grid>.grid_item[span-xl$="-22"],.grid>.grid_item[span-xl="23"]{--grid-ce: 23 }.grid>.grid_item[span-xl$="+24"],.grid>.grid_item[span-xl$="-23"],.grid>.grid_item[span-xl="24"]{--grid-ce: 24 }.grid>.grid_item[span-xl$="-24"]{--grid-ce: 25 }.grid>.grid_item[span-xl]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span-xl*="+"],.grid>.grid_item[span-xl*="-"],.grid>.grid_item[span-xl*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span-xl*="-"],.grid>.grid_item[span-xl*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span-xl=row]{grid-column:1 / -1}}}@layer global{.layout{display:flex;flex-direction:column;width:100vw;min-height:100vh;.layout_content{flex:1}}.layout_content_main{container:main / inline-size}.layout-centered{.layout_content{display:grid;gap:var(--sm3);grid-template-columns:1fr minmax(0,var(--layout-content-width)) 1fr;margin-top:var(--lg1);margin-bottom:var(--sm1);@media(width>=768px){margin-top:var(--xl3);margin-bottom:var(--md3);gap:var(--md3)}}.layout_content_main{grid-column:2}}.layout-sidebar{.layout_content{@media(width>=768px){display:grid;grid-template-columns:var(--layout-aside-width) minmax(0,1fr)}}.layout_content_main{padding:var(--sm2);@media(width>=768px){grid-row:1;grid-column:2;padding:var(--lg1) var(--md2)}}.layout_content_aside{@media(width>=768px){grid-row:1;grid-column:1;padding:var(--lg1) var(--md3)}}}.layout-sidebar-end{.layout_content{@media(width>=768px){grid-template-columns:minmax(0,1fr) var(--layout-aside-width)}}.layout_content_main{@media(width>=768px){grid-column:1}}.layout_content_aside{@media(width>=768px){grid-column:2}}}.layout-docs{.layout_content{@media(width>=768px){display:grid;grid-template-columns:var(--layout-aside-width) minmax(0,1fr)}@media(width>=1024px){grid-template-columns:var(--layout-aside-width) minmax(0,var(--layout-content-width)) var(--layout-toc-width)}}.layout_content_main{padding:var(--sm2);@media(width>=768px){grid-row:1;grid-column:2;padding:var(--lg1) var(--md2)}}.layout_content_aside{display:none;@media(width>=768px){display:block;grid-row:1;grid-column:1;padding:var(--lg1) var(--md3)}}.layout_content_aside-toc{@media(width>=768px){display:none}@media(width>=1024px){display:block;grid-row:1;grid-column:3;padding:var(--lg1) var(--md3)}}}.layout-split{.layout_content{display:grid;@media(width>=768px){grid-template-columns:1fr 1fr}}}.layout-cover{min-height:100dvh;.layout_content{display:grid;place-items:center}}}@layer global{@scope(.prose)to (.not-prose){:is(p,ul,ol,blockquote,table):has(+:is(h1,h2,h3,h4)){margin-bottom:calc(var(--prose-spacing) * 2)}p,ul,ol,dl{margin-bottom:var(--prose-spacing);p,ul,ol,dl{margin-bottom:0}}ul,ol{ul,ol{margin-inline-start:0;padding-inline-start:var(--sm2)}li{margin-bottom:.5em;&::marker{color:light-dark(var(--base-300),var(--base-600))}}}ul{margin-inline-start:var(--sm2);list-style-type:"\2192 "}ol{margin-inline-start:var(--md2);list-style-type:decimal-leading-zero;li::marker{font-size:var(--text-sm)}}table{margin-top:var(--md1);margin-bottom:var(--md1)}}}@layer global{.wrap{display:grid;grid-template-columns:1fr var(--wrap-width) 1fr;>*,>astro-island>*,>astro-slot>*,>astro-static-slot>*{grid-column:2;padding-inline:var(--wrap-spacing);@media(width>=768px){padding-inline:var(--wrap-md-spacing)}@media(width>=1024px){padding-inline:var(--wrap-lg-spacing)}}}.wrap-sm{--wrap-width: var(--wrap-width-sm)}.wrap-md{--wrap-width: var(--wrap-width-md)}.wrap-lg{--wrap-width: var(--wrap-width-lg)}.wrap_content-fullBleed{grid-column:1 / -1;width:100%;object-fit:cover}}@layer helpers{.c-base-0{color:var(--base-0)!important}.bdc-base-0{border-color:var(--base-0)!important}.bgc-base-0{background-color:var(--base-0)!important}.c-base-50{color:var(--base-50)!important}.bdc-base-50{border-color:var(--base-50)!important}.bgc-base-50{background-color:var(--base-50)!important}.c-base-100{color:var(--base-100)!important}.bdc-base-100{border-color:var(--base-100)!important}.bgc-base-100{background-color:var(--base-100)!important}.c-base-200{color:var(--base-200)!important}.bdc-base-200{border-color:var(--base-200)!important}.bgc-base-200{background-color:var(--base-200)!important}.c-base-300{color:var(--base-300)!important}.bdc-base-300{border-color:var(--base-300)!important}.bgc-base-300{background-color:var(--base-300)!important}.c-base-400{color:var(--base-400)!important}.bdc-base-400{border-color:var(--base-400)!important}.bgc-base-400{background-color:var(--base-400)!important}.c-base-500{color:var(--base-500)!important}.bdc-base-500{border-color:var(--base-500)!important}.bgc-base-500{background-color:var(--base-500)!important}.c-base-600{color:var(--base-600)!important}.bdc-base-600{border-color:var(--base-600)!important}.bgc-base-600{background-color:var(--base-600)!important}.c-base-700{color:var(--base-700)!important}.bdc-base-700{border-color:var(--base-700)!important}.bgc-base-700{background-color:var(--base-700)!important}.c-base-800{color:var(--base-800)!important}.bdc-base-800{border-color:var(--base-800)!important}.bgc-base-800{background-color:var(--base-800)!important}.c-base-900{color:var(--base-900)!important}.bdc-base-900{border-color:var(--base-900)!important}.bgc-base-900{background-color:var(--base-900)!important}.c-base-950{color:var(--base-950)!important}.bdc-base-950{border-color:var(--base-950)!important}.bgc-base-950{background-color:var(--base-950)!important}.c-primary-50{color:var(--primary-50)!important}.bdc-primary-50{border-color:var(--primary-50)!important}.bgc-primary-50{background-color:var(--primary-50)!important}.c-primary-100{color:var(--primary-100)!important}.bdc-primary-100{border-color:var(--primary-100)!important}.bgc-primary-100{background-color:var(--primary-100)!important}.c-primary-200{color:var(--primary-200)!important}.bdc-primary-200{border-color:var(--primary-200)!important}.bgc-primary-200{background-color:var(--primary-200)!important}.c-primary-300{color:var(--primary-300)!important}.bdc-primary-300{border-color:var(--primary-300)!important}.bgc-primary-300{background-color:var(--primary-300)!important}.c-primary-400{color:var(--primary-400)!important}.bdc-primary-400{border-color:var(--primary-400)!important}.bgc-primary-400{background-color:var(--primary-400)!important}.c-primary-500{color:var(--primary-500)!important}.bdc-primary-500{border-color:var(--primary-500)!important}.bgc-primary-500{background-color:var(--primary-500)!important}.c-primary-600{color:var(--primary-600)!important}.bdc-primary-600{border-color:var(--primary-600)!important}.bgc-primary-600{background-color:var(--primary-600)!important}.c-primary-700{color:var(--primary-700)!important}.bdc-primary-700{border-color:var(--primary-700)!important}.bgc-primary-700{background-color:var(--primary-700)!important}.c-primary-800{color:var(--primary-800)!important}.bdc-primary-800{border-color:var(--primary-800)!important}.bgc-primary-800{background-color:var(--primary-800)!important}.c-primary-900{color:var(--primary-900)!important}.bdc-primary-900{border-color:var(--primary-900)!important}.bgc-primary-900{background-color:var(--primary-900)!important}.c-primary-950{color:var(--primary-950)!important}.bdc-primary-950{border-color:var(--primary-950)!important}.bgc-primary-950{background-color:var(--primary-950)!important}.c-yes-100{color:var(--yes-100)!important}.bdc-yes-100{border-color:var(--yes-100)!important}.bgc-yes-100{background-color:var(--yes-100)!important}.c-yes-200{color:var(--yes-200)!important}.bdc-yes-200{border-color:var(--yes-200)!important}.bgc-yes-200{background-color:var(--yes-200)!important}.c-yes-300{color:var(--yes-300)!important}.bdc-yes-300{border-color:var(--yes-300)!important}.bgc-yes-300{background-color:var(--yes-300)!important}.c-yes-400{color:var(--yes-400)!important}.bdc-yes-400{border-color:var(--yes-400)!important}.bgc-yes-400{background-color:var(--yes-400)!important}.c-yes-500{color:var(--yes-500)!important}.bdc-yes-500{border-color:var(--yes-500)!important}.bgc-yes-500{background-color:var(--yes-500)!important}.c-no-100{color:var(--no-100)!important}.bdc-no-100{border-color:var(--no-100)!important}.bgc-no-100{background-color:var(--no-100)!important}.c-no-200{color:var(--no-200)!important}.bdc-no-200{border-color:var(--no-200)!important}.bgc-no-200{background-color:var(--no-200)!important}.c-no-300{color:var(--no-300)!important}.bdc-no-300{border-color:var(--no-300)!important}.bgc-no-300{background-color:var(--no-300)!important}.c-no-400{color:var(--no-400)!important}.bdc-no-400{border-color:var(--no-400)!important}.bgc-no-400{background-color:var(--no-400)!important}.c-no-500{color:var(--no-500)!important}.bdc-no-500{border-color:var(--no-500)!important}.bgc-no-500{background-color:var(--no-500)!important}.c-maybe-100{color:var(--maybe-100)!important}.bdc-maybe-100{border-color:var(--maybe-100)!important}.bgc-maybe-100{background-color:var(--maybe-100)!important}.c-maybe-200{color:var(--maybe-200)!important}.bdc-maybe-200{border-color:var(--maybe-200)!important}.bgc-maybe-200{background-color:var(--maybe-200)!important}.c-maybe-300{color:var(--maybe-300)!important}.bdc-maybe-300{border-color:var(--maybe-300)!important}.bgc-maybe-300{background-color:var(--maybe-300)!important}.c-maybe-400{color:var(--maybe-400)!important}.bdc-maybe-400{border-color:var(--maybe-400)!important}.bgc-maybe-400{background-color:var(--maybe-400)!important}.c-maybe-500{color:var(--maybe-500)!important}.bdc-maybe-500{border-color:var(--maybe-500)!important}.bgc-maybe-500{background-color:var(--maybe-500)!important}}@layer helpers{body.dev{--baseline: 8;background-size:100% calc(var(--baseline) * 1px)!important;background-image:linear-gradient(to bottom,#0000 calc((var(--baseline) - 1) * 1px),#ff69b4 calc(var(--baseline) * 1px))!important}.dev-error{position:fixed!important;top:var(--md1)!important;left:var(--md1)!important;z-index:var(--z-top)!important;padding:var(--sm1)!important;font-size:1rem!important;color:var(--danger-500)!important;background:var(--danger-100)!important;border:1px solid var(--danger-500)!important;border-radius:var(--radius-md)!important}}@layer helpers{.of-auto,.overflow-auto{overflow:auto!important}.of-hidden,.overflow-hidden{overflow:hidden!important}.of-clip,.overflow-clip{overflow:clip!important}.of-visible,.overflow-visible{overflow:visible!important}.of-scroll,.overflow-scroll{overflow:scroll!important}.of-x-auto,.overflow-x-auto{overflow-x:auto!important}.of-y-auto,.overflow-y-auto{overflow-y:auto!important}.of-x-hidden,.overflow-x-hidden{overflow-x:hidden!important}.of-y-hidden,.overflow-y-hidden{overflow-y:hidden!important}.of-x-clip,.overflow-x-clip{overflow-x:clip!important}.of-y-clip,.overflow-y-clip{overflow-y:clip!important}.of-x-visible,.overflow-x-visible{overflow-x:visible!important}.of-y-visible,.overflow-y-visible{overflow-y:visible!important}.of-x-scroll,.overflow-x-scroll{overflow-x:scroll!important}.of-y-scroll,.overflow-y-scroll{overflow-y:scroll!important}.position-static{position:static!important}.position-fixed{position:fixed!important}.position-absolute{position:absolute!important}.position-relative{position:relative!important}.position-sticky{position:sticky!important}.visibility-visible{visibility:visible!important}.visibility-hidden{visibility:hidden!important}.visibility-collapse{visibility:collapse!important}.z-auto{z-index:auto!important}.z-bottom{z-index:var(--z-bottom)!important}.z-0{z-index:var(--z-0)!important}.z-1{z-index:var(--z-1)!important}.z-2{z-index:var(--z-2)!important}.z-3{z-index:var(--z-3)!important}.z-4{z-index:var(--z-4)!important}.z-5{z-index:var(--z-5)!important}.z-top{z-index:var(--z-top)!important}}@layer helpers{.o-0{opacity:var(--o-0)!important}.o-1{opacity:var(--o-1)!important}.o-2{opacity:var(--o-2)!important}.o-3{opacity:var(--o-3)!important}.o-4{opacity:var(--o-4)!important}.o-5{opacity:var(--o-5)!important}}@layer helpers{.ar-square{aspect-ratio:var(--ar-square)!important}.ar-landscape{aspect-ratio:var(--ar-landscape)!important}.ar-portrait{aspect-ratio:var(--ar-portrait)!important}.ar-widescreen{aspect-ratio:var(--ar-widescreen)!important}.ar-golden{aspect-ratio:var(--ar-golden)!important}}@layer helpers{.w-0{width:0!important}.h-0{height:0!important}.m-0{margin:0!important}.mt-0{margin-top:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mr-0{margin-right:0!important}.mis-0{margin-inline-start:0!important}.mie-0{margin-inline-end:0!important}.p-0{padding:0!important}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.pis-0{padding-inline-start:0!important}.pie-0{padding-inline-end:0!important}.w-xs1{width:var(--xs1)!important}.h-xs1{height:var(--xs1)!important}.m-xs1{margin:var(--xs1)!important}.mt-xs1{margin-top:var(--xs1)!important}.mb-xs1{margin-bottom:var(--xs1)!important}.ml-xs1{margin-left:var(--xs1)!important}.mr-xs1{margin-right:var(--xs1)!important}.mis-xs1{margin-inline-start:var(--xs1)!important}.mie-xs1{margin-inline-end:var(--xs1)!important}.p-xs1{padding:var(--xs1)!important}.pt-xs1{padding-top:var(--xs1)!important}.pb-xs1{padding-bottom:var(--xs1)!important}.pl-xs1{padding-left:var(--xs1)!important}.pr-xs1{padding-right:var(--xs1)!important}.pis-xs1{padding-inline-start:var(--xs1)!important}.pie-xs1{padding-inline-end:var(--xs1)!important}.w-xs2{width:var(--xs2)!important}.h-xs2{height:var(--xs2)!important}.m-xs2{margin:var(--xs2)!important}.mt-xs2{margin-top:var(--xs2)!important}.mb-xs2{margin-bottom:var(--xs2)!important}.ml-xs2{margin-left:var(--xs2)!important}.mr-xs2{margin-right:var(--xs2)!important}.mis-xs2{margin-inline-start:var(--xs2)!important}.mie-xs2{margin-inline-end:var(--xs2)!important}.p-xs2{padding:var(--xs2)!important}.pt-xs2{padding-top:var(--xs2)!important}.pb-xs2{padding-bottom:var(--xs2)!important}.pl-xs2{padding-left:var(--xs2)!important}.pr-xs2{padding-right:var(--xs2)!important}.pis-xs2{padding-inline-start:var(--xs2)!important}.pie-xs2{padding-inline-end:var(--xs2)!important}.w-xs3{width:var(--xs3)!important}.h-xs3{height:var(--xs3)!important}.m-xs3{margin:var(--xs3)!important}.mt-xs3{margin-top:var(--xs3)!important}.mb-xs3{margin-bottom:var(--xs3)!important}.ml-xs3{margin-left:var(--xs3)!important}.mr-xs3{margin-right:var(--xs3)!important}.mis-xs3{margin-inline-start:var(--xs3)!important}.mie-xs3{margin-inline-end:var(--xs3)!important}.p-xs3{padding:var(--xs3)!important}.pt-xs3{padding-top:var(--xs3)!important}.pb-xs3{padding-bottom:var(--xs3)!important}.pl-xs3{padding-left:var(--xs3)!important}.pr-xs3{padding-right:var(--xs3)!important}.pis-xs3{padding-inline-start:var(--xs3)!important}.pie-xs3{padding-inline-end:var(--xs3)!important}.w-sm1{width:var(--sm1)!important}.h-sm1{height:var(--sm1)!important}.m-sm1{margin:var(--sm1)!important}.mt-sm1{margin-top:var(--sm1)!important}.mb-sm1{margin-bottom:var(--sm1)!important}.ml-sm1{margin-left:var(--sm1)!important}.mr-sm1{margin-right:var(--sm1)!important}.mis-sm1{margin-inline-start:var(--sm1)!important}.mie-sm1{margin-inline-end:var(--sm1)!important}.p-sm1{padding:var(--sm1)!important}.pt-sm1{padding-top:var(--sm1)!important}.pb-sm1{padding-bottom:var(--sm1)!important}.pl-sm1{padding-left:var(--sm1)!important}.pr-sm1{padding-right:var(--sm1)!important}.pis-sm1{padding-inline-start:var(--sm1)!important}.pie-sm1{padding-inline-end:var(--sm1)!important}.w-sm2{width:var(--sm2)!important}.h-sm2{height:var(--sm2)!important}.m-sm2{margin:var(--sm2)!important}.mt-sm2{margin-top:var(--sm2)!important}.mb-sm2{margin-bottom:var(--sm2)!important}.ml-sm2{margin-left:var(--sm2)!important}.mr-sm2{margin-right:var(--sm2)!important}.mis-sm2{margin-inline-start:var(--sm2)!important}.mie-sm2{margin-inline-end:var(--sm2)!important}.p-sm2{padding:var(--sm2)!important}.pt-sm2{padding-top:var(--sm2)!important}.pb-sm2{padding-bottom:var(--sm2)!important}.pl-sm2{padding-left:var(--sm2)!important}.pr-sm2{padding-right:var(--sm2)!important}.pis-sm2{padding-inline-start:var(--sm2)!important}.pie-sm2{padding-inline-end:var(--sm2)!important}.w-sm3{width:var(--sm3)!important}.h-sm3{height:var(--sm3)!important}.m-sm3{margin:var(--sm3)!important}.mt-sm3{margin-top:var(--sm3)!important}.mb-sm3{margin-bottom:var(--sm3)!important}.ml-sm3{margin-left:var(--sm3)!important}.mr-sm3{margin-right:var(--sm3)!important}.mis-sm3{margin-inline-start:var(--sm3)!important}.mie-sm3{margin-inline-end:var(--sm3)!important}.p-sm3{padding:var(--sm3)!important}.pt-sm3{padding-top:var(--sm3)!important}.pb-sm3{padding-bottom:var(--sm3)!important}.pl-sm3{padding-left:var(--sm3)!important}.pr-sm3{padding-right:var(--sm3)!important}.pis-sm3{padding-inline-start:var(--sm3)!important}.pie-sm3{padding-inline-end:var(--sm3)!important}.w-md1{width:var(--md1)!important}.h-md1{height:var(--md1)!important}.m-md1{margin:var(--md1)!important}.mt-md1{margin-top:var(--md1)!important}.mb-md1{margin-bottom:var(--md1)!important}.ml-md1{margin-left:var(--md1)!important}.mr-md1{margin-right:var(--md1)!important}.mis-md1{margin-inline-start:var(--md1)!important}.mie-md1{margin-inline-end:var(--md1)!important}.p-md1{padding:var(--md1)!important}.pt-md1{padding-top:var(--md1)!important}.pb-md1{padding-bottom:var(--md1)!important}.pl-md1{padding-left:var(--md1)!important}.pr-md1{padding-right:var(--md1)!important}.pis-md1{padding-inline-start:var(--md1)!important}.pie-md1{padding-inline-end:var(--md1)!important}.w-md2{width:var(--md2)!important}.h-md2{height:var(--md2)!important}.m-md2{margin:var(--md2)!important}.mt-md2{margin-top:var(--md2)!important}.mb-md2{margin-bottom:var(--md2)!important}.ml-md2{margin-left:var(--md2)!important}.mr-md2{margin-right:var(--md2)!important}.mis-md2{margin-inline-start:var(--md2)!important}.mie-md2{margin-inline-end:var(--md2)!important}.p-md2{padding:var(--md2)!important}.pt-md2{padding-top:var(--md2)!important}.pb-md2{padding-bottom:var(--md2)!important}.pl-md2{padding-left:var(--md2)!important}.pr-md2{padding-right:var(--md2)!important}.pis-md2{padding-inline-start:var(--md2)!important}.pie-md2{padding-inline-end:var(--md2)!important}.w-md3{width:var(--md3)!important}.h-md3{height:var(--md3)!important}.m-md3{margin:var(--md3)!important}.mt-md3{margin-top:var(--md3)!important}.mb-md3{margin-bottom:var(--md3)!important}.ml-md3{margin-left:var(--md3)!important}.mr-md3{margin-right:var(--md3)!important}.mis-md3{margin-inline-start:var(--md3)!important}.mie-md3{margin-inline-end:var(--md3)!important}.p-md3{padding:var(--md3)!important}.pt-md3{padding-top:var(--md3)!important}.pb-md3{padding-bottom:var(--md3)!important}.pl-md3{padding-left:var(--md3)!important}.pr-md3{padding-right:var(--md3)!important}.pis-md3{padding-inline-start:var(--md3)!important}.pie-md3{padding-inline-end:var(--md3)!important}.w-lg1{width:var(--lg1)!important}.h-lg1{height:var(--lg1)!important}.m-lg1{margin:var(--lg1)!important}.mt-lg1{margin-top:var(--lg1)!important}.mb-lg1{margin-bottom:var(--lg1)!important}.ml-lg1{margin-left:var(--lg1)!important}.mr-lg1{margin-right:var(--lg1)!important}.mis-lg1{margin-inline-start:var(--lg1)!important}.mie-lg1{margin-inline-end:var(--lg1)!important}.p-lg1{padding:var(--lg1)!important}.pt-lg1{padding-top:var(--lg1)!important}.pb-lg1{padding-bottom:var(--lg1)!important}.pl-lg1{padding-left:var(--lg1)!important}.pr-lg1{padding-right:var(--lg1)!important}.pis-lg1{padding-inline-start:var(--lg1)!important}.pie-lg1{padding-inline-end:var(--lg1)!important}.w-lg2{width:var(--lg2)!important}.h-lg2{height:var(--lg2)!important}.m-lg2{margin:var(--lg2)!important}.mt-lg2{margin-top:var(--lg2)!important}.mb-lg2{margin-bottom:var(--lg2)!important}.ml-lg2{margin-left:var(--lg2)!important}.mr-lg2{margin-right:var(--lg2)!important}.mis-lg2{margin-inline-start:var(--lg2)!important}.mie-lg2{margin-inline-end:var(--lg2)!important}.p-lg2{padding:var(--lg2)!important}.pt-lg2{padding-top:var(--lg2)!important}.pb-lg2{padding-bottom:var(--lg2)!important}.pl-lg2{padding-left:var(--lg2)!important}.pr-lg2{padding-right:var(--lg2)!important}.pis-lg2{padding-inline-start:var(--lg2)!important}.pie-lg2{padding-inline-end:var(--lg2)!important}.w-lg3{width:var(--lg3)!important}.h-lg3{height:var(--lg3)!important}.m-lg3{margin:var(--lg3)!important}.mt-lg3{margin-top:var(--lg3)!important}.mb-lg3{margin-bottom:var(--lg3)!important}.ml-lg3{margin-left:var(--lg3)!important}.mr-lg3{margin-right:var(--lg3)!important}.mis-lg3{margin-inline-start:var(--lg3)!important}.mie-lg3{margin-inline-end:var(--lg3)!important}.p-lg3{padding:var(--lg3)!important}.pt-lg3{padding-top:var(--lg3)!important}.pb-lg3{padding-bottom:var(--lg3)!important}.pl-lg3{padding-left:var(--lg3)!important}.pr-lg3{padding-right:var(--lg3)!important}.pis-lg3{padding-inline-start:var(--lg3)!important}.pie-lg3{padding-inline-end:var(--lg3)!important}.w-xl1{width:var(--xl1)!important}.h-xl1{height:var(--xl1)!important}.m-xl1{margin:var(--xl1)!important}.mt-xl1{margin-top:var(--xl1)!important}.mb-xl1{margin-bottom:var(--xl1)!important}.ml-xl1{margin-left:var(--xl1)!important}.mr-xl1{margin-right:var(--xl1)!important}.mis-xl1{margin-inline-start:var(--xl1)!important}.mie-xl1{margin-inline-end:var(--xl1)!important}.p-xl1{padding:var(--xl1)!important}.pt-xl1{padding-top:var(--xl1)!important}.pb-xl1{padding-bottom:var(--xl1)!important}.pl-xl1{padding-left:var(--xl1)!important}.pr-xl1{padding-right:var(--xl1)!important}.pis-xl1{padding-inline-start:var(--xl1)!important}.pie-xl1{padding-inline-end:var(--xl1)!important}.w-xl2{width:var(--xl2)!important}.h-xl2{height:var(--xl2)!important}.m-xl2{margin:var(--xl2)!important}.mt-xl2{margin-top:var(--xl2)!important}.mb-xl2{margin-bottom:var(--xl2)!important}.ml-xl2{margin-left:var(--xl2)!important}.mr-xl2{margin-right:var(--xl2)!important}.mis-xl2{margin-inline-start:var(--xl2)!important}.mie-xl2{margin-inline-end:var(--xl2)!important}.p-xl2{padding:var(--xl2)!important}.pt-xl2{padding-top:var(--xl2)!important}.pb-xl2{padding-bottom:var(--xl2)!important}.pl-xl2{padding-left:var(--xl2)!important}.pr-xl2{padding-right:var(--xl2)!important}.pis-xl2{padding-inline-start:var(--xl2)!important}.pie-xl2{padding-inline-end:var(--xl2)!important}.w-xl3{width:var(--xl3)!important}.h-xl3{height:var(--xl3)!important}.m-xl3{margin:var(--xl3)!important}.mt-xl3{margin-top:var(--xl3)!important}.mb-xl3{margin-bottom:var(--xl3)!important}.ml-xl3{margin-left:var(--xl3)!important}.mr-xl3{margin-right:var(--xl3)!important}.mis-xl3{margin-inline-start:var(--xl3)!important}.mie-xl3{margin-inline-end:var(--xl3)!important}.p-xl3{padding:var(--xl3)!important}.pt-xl3{padding-top:var(--xl3)!important}.pb-xl3{padding-bottom:var(--xl3)!important}.pl-xl3{padding-left:var(--xl3)!important}.pr-xl3{padding-right:var(--xl3)!important}.pis-xl3{padding-inline-start:var(--xl3)!important}.pie-xl3{padding-inline-end:var(--xl3)!important}.w-xxl1{width:var(--xxl1)!important}.h-xxl1{height:var(--xxl1)!important}.m-xxl1{margin:var(--xxl1)!important}.mt-xxl1{margin-top:var(--xxl1)!important}.mb-xxl1{margin-bottom:var(--xxl1)!important}.ml-xxl1{margin-left:var(--xxl1)!important}.mr-xxl1{margin-right:var(--xxl1)!important}.mis-xxl1{margin-inline-start:var(--xxl1)!important}.mie-xxl1{margin-inline-end:var(--xxl1)!important}.p-xxl1{padding:var(--xxl1)!important}.pt-xxl1{padding-top:var(--xxl1)!important}.pb-xxl1{padding-bottom:var(--xxl1)!important}.pl-xxl1{padding-left:var(--xxl1)!important}.pr-xxl1{padding-right:var(--xxl1)!important}.pis-xxl1{padding-inline-start:var(--xxl1)!important}.pie-xxl1{padding-inline-end:var(--xxl1)!important}.w-xxl2{width:var(--xxl2)!important}.h-xxl2{height:var(--xxl2)!important}.m-xxl2{margin:var(--xxl2)!important}.mt-xxl2{margin-top:var(--xxl2)!important}.mb-xxl2{margin-bottom:var(--xxl2)!important}.ml-xxl2{margin-left:var(--xxl2)!important}.mr-xxl2{margin-right:var(--xxl2)!important}.mis-xxl2{margin-inline-start:var(--xxl2)!important}.mie-xxl2{margin-inline-end:var(--xxl2)!important}.p-xxl2{padding:var(--xxl2)!important}.pt-xxl2{padding-top:var(--xxl2)!important}.pb-xxl2{padding-bottom:var(--xxl2)!important}.pl-xxl2{padding-left:var(--xxl2)!important}.pr-xxl2{padding-right:var(--xxl2)!important}.pis-xxl2{padding-inline-start:var(--xxl2)!important}.pie-xxl2{padding-inline-end:var(--xxl2)!important}.w-xxl3{width:var(--xxl3)!important}.h-xxl3{height:var(--xxl3)!important}.m-xxl3{margin:var(--xxl3)!important}.mt-xxl3{margin-top:var(--xxl3)!important}.mb-xxl3{margin-bottom:var(--xxl3)!important}.ml-xxl3{margin-left:var(--xxl3)!important}.mr-xxl3{margin-right:var(--xxl3)!important}.mis-xxl3{margin-inline-start:var(--xxl3)!important}.mie-xxl3{margin-inline-end:var(--xxl3)!important}.p-xxl3{padding:var(--xxl3)!important}.pt-xxl3{padding-top:var(--xxl3)!important}.pb-xxl3{padding-bottom:var(--xxl3)!important}.pl-xxl3{padding-left:var(--xxl3)!important}.pr-xxl3{padding-right:var(--xxl3)!important}.pis-xxl3{padding-inline-start:var(--xxl3)!important}.pie-xxl3{padding-inline-end:var(--xxl3)!important}.w-mega1{width:var(--mega1)!important}.h-mega1{height:var(--mega1)!important}.m-mega1{margin:var(--mega1)!important}.mt-mega1{margin-top:var(--mega1)!important}.mb-mega1{margin-bottom:var(--mega1)!important}.ml-mega1{margin-left:var(--mega1)!important}.mr-mega1{margin-right:var(--mega1)!important}.mis-mega1{margin-inline-start:var(--mega1)!important}.mie-mega1{margin-inline-end:var(--mega1)!important}.p-mega1{padding:var(--mega1)!important}.pt-mega1{padding-top:var(--mega1)!important}.pb-mega1{padding-bottom:var(--mega1)!important}.pl-mega1{padding-left:var(--mega1)!important}.pr-mega1{padding-right:var(--mega1)!important}.pis-mega1{padding-inline-start:var(--mega1)!important}.pie-mega1{padding-inline-end:var(--mega1)!important}.w-mega2{width:var(--mega2)!important}.h-mega2{height:var(--mega2)!important}.m-mega2{margin:var(--mega2)!important}.mt-mega2{margin-top:var(--mega2)!important}.mb-mega2{margin-bottom:var(--mega2)!important}.ml-mega2{margin-left:var(--mega2)!important}.mr-mega2{margin-right:var(--mega2)!important}.mis-mega2{margin-inline-start:var(--mega2)!important}.mie-mega2{margin-inline-end:var(--mega2)!important}.p-mega2{padding:var(--mega2)!important}.pt-mega2{padding-top:var(--mega2)!important}.pb-mega2{padding-bottom:var(--mega2)!important}.pl-mega2{padding-left:var(--mega2)!important}.pr-mega2{padding-right:var(--mega2)!important}.pis-mega2{padding-inline-start:var(--mega2)!important}.pie-mega2{padding-inline-end:var(--mega2)!important}.w-mega3{width:var(--mega3)!important}.h-mega3{height:var(--mega3)!important}.m-mega3{margin:var(--mega3)!important}.mt-mega3{margin-top:var(--mega3)!important}.mb-mega3{margin-bottom:var(--mega3)!important}.ml-mega3{margin-left:var(--mega3)!important}.mr-mega3{margin-right:var(--mega3)!important}.mis-mega3{margin-inline-start:var(--mega3)!important}.mie-mega3{margin-inline-end:var(--mega3)!important}.p-mega3{padding:var(--mega3)!important}.pt-mega3{padding-top:var(--mega3)!important}.pb-mega3{padding-bottom:var(--mega3)!important}.pl-mega3{padding-left:var(--mega3)!important}.pr-mega3{padding-right:var(--mega3)!important}.pis-mega3{padding-inline-start:var(--mega3)!important}.pie-mega3{padding-inline-end:var(--mega3)!important}.w-giga1{width:var(--giga1)!important}.h-giga1{height:var(--giga1)!important}.m-giga1{margin:var(--giga1)!important}.mt-giga1{margin-top:var(--giga1)!important}.mb-giga1{margin-bottom:var(--giga1)!important}.ml-giga1{margin-left:var(--giga1)!important}.mr-giga1{margin-right:var(--giga1)!important}.mis-giga1{margin-inline-start:var(--giga1)!important}.mie-giga1{margin-inline-end:var(--giga1)!important}.p-giga1{padding:var(--giga1)!important}.pt-giga1{padding-top:var(--giga1)!important}.pb-giga1{padding-bottom:var(--giga1)!important}.pl-giga1{padding-left:var(--giga1)!important}.pr-giga1{padding-right:var(--giga1)!important}.pis-giga1{padding-inline-start:var(--giga1)!important}.pie-giga1{padding-inline-end:var(--giga1)!important}.w-giga2{width:var(--giga2)!important}.h-giga2{height:var(--giga2)!important}.m-giga2{margin:var(--giga2)!important}.mt-giga2{margin-top:var(--giga2)!important}.mb-giga2{margin-bottom:var(--giga2)!important}.ml-giga2{margin-left:var(--giga2)!important}.mr-giga2{margin-right:var(--giga2)!important}.mis-giga2{margin-inline-start:var(--giga2)!important}.mie-giga2{margin-inline-end:var(--giga2)!important}.p-giga2{padding:var(--giga2)!important}.pt-giga2{padding-top:var(--giga2)!important}.pb-giga2{padding-bottom:var(--giga2)!important}.pl-giga2{padding-left:var(--giga2)!important}.pr-giga2{padding-right:var(--giga2)!important}.pis-giga2{padding-inline-start:var(--giga2)!important}.pie-giga2{padding-inline-end:var(--giga2)!important}.w-giga3{width:var(--giga3)!important}.h-giga3{height:var(--giga3)!important}.m-giga3{margin:var(--giga3)!important}.mt-giga3{margin-top:var(--giga3)!important}.mb-giga3{margin-bottom:var(--giga3)!important}.ml-giga3{margin-left:var(--giga3)!important}.mr-giga3{margin-right:var(--giga3)!important}.mis-giga3{margin-inline-start:var(--giga3)!important}.mie-giga3{margin-inline-end:var(--giga3)!important}.p-giga3{padding:var(--giga3)!important}.pt-giga3{padding-top:var(--giga3)!important}.pb-giga3{padding-bottom:var(--giga3)!important}.pl-giga3{padding-left:var(--giga3)!important}.pr-giga3{padding-right:var(--giga3)!important}.pis-giga3{padding-inline-start:var(--giga3)!important}.pie-giga3{padding-inline-end:var(--giga3)!important}.w-tera1{width:var(--tera1)!important}.h-tera1{height:var(--tera1)!important}.m-tera1{margin:var(--tera1)!important}.mt-tera1{margin-top:var(--tera1)!important}.mb-tera1{margin-bottom:var(--tera1)!important}.ml-tera1{margin-left:var(--tera1)!important}.mr-tera1{margin-right:var(--tera1)!important}.mis-tera1{margin-inline-start:var(--tera1)!important}.mie-tera1{margin-inline-end:var(--tera1)!important}.p-tera1{padding:var(--tera1)!important}.pt-tera1{padding-top:var(--tera1)!important}.pb-tera1{padding-bottom:var(--tera1)!important}.pl-tera1{padding-left:var(--tera1)!important}.pr-tera1{padding-right:var(--tera1)!important}.pis-tera1{padding-inline-start:var(--tera1)!important}.pie-tera1{padding-inline-end:var(--tera1)!important}.w-tera2{width:var(--tera2)!important}.h-tera2{height:var(--tera2)!important}.m-tera2{margin:var(--tera2)!important}.mt-tera2{margin-top:var(--tera2)!important}.mb-tera2{margin-bottom:var(--tera2)!important}.ml-tera2{margin-left:var(--tera2)!important}.mr-tera2{margin-right:var(--tera2)!important}.mis-tera2{margin-inline-start:var(--tera2)!important}.mie-tera2{margin-inline-end:var(--tera2)!important}.p-tera2{padding:var(--tera2)!important}.pt-tera2{padding-top:var(--tera2)!important}.pb-tera2{padding-bottom:var(--tera2)!important}.pl-tera2{padding-left:var(--tera2)!important}.pr-tera2{padding-right:var(--tera2)!important}.pis-tera2{padding-inline-start:var(--tera2)!important}.pie-tera2{padding-inline-end:var(--tera2)!important}.w-tera3{width:var(--tera3)!important}.h-tera3{height:var(--tera3)!important}.m-tera3{margin:var(--tera3)!important}.mt-tera3{margin-top:var(--tera3)!important}.mb-tera3{margin-bottom:var(--tera3)!important}.ml-tera3{margin-left:var(--tera3)!important}.mr-tera3{margin-right:var(--tera3)!important}.mis-tera3{margin-inline-start:var(--tera3)!important}.mie-tera3{margin-inline-end:var(--tera3)!important}.p-tera3{padding:var(--tera3)!important}.pt-tera3{padding-top:var(--tera3)!important}.pb-tera3{padding-bottom:var(--tera3)!important}.pl-tera3{padding-left:var(--tera3)!important}.pr-tera3{padding-right:var(--tera3)!important}.pis-tera3{padding-inline-start:var(--tera3)!important}.pie-tera3{padding-inline-end:var(--tera3)!important}}@layer helpers{.font-text{font-family:var(--text)!important}.font-display{font-family:var(--display)!important}.font-mono{font-family:var(--mono)!important}.font-italic{font-style:italic!important}.font-normal{font-style:normal!important}.font-extra-light{font-weight:var(--extra-light)!important}.font-light{font-weight:var(--light)!important}.font-book{font-weight:var(--book)!important}.font-semi-bold{font-weight:var(--semi-bold)!important}.font-bold{font-weight:var(--bold)!important}.font-black{font-weight:var(--black)!important}.text-xs{font-size:var(--text-xs)!important}.text-sm{font-size:var(--text-sm)!important}.text-md{font-size:var(--text-md)!important}.text-lg{font-size:var(--text-lg)!important}.text-xl{font-size:var(--text-xl)!important}.display-sm{font-size:var(--display-sm)!important}.display-md{font-size:var(--display-md)!important}.display-lg{font-size:var(--display-lg)!important}.display-xl{font-size:var(--display-xl)!important}.display-mega{font-size:var(--display-mega)!important}.display-giga{font-size:var(--display-giga)!important}.tracking-sm{letter-spacing:var(--tracking-sm)!important}.tracking-md{letter-spacing:var(--tracking-md)!important}.tracking-lg{letter-spacing:var(--tracking-lg)!important}.tracking-xl{letter-spacing:var(--tracking-xl)!important}.tracking-xxl{letter-spacing:var(--tracking-xxl)!important}.leading-xs{line-height:var(--leading-xs)!important}.leading-sm{line-height:var(--leading-sm)!important}.leading-md{line-height:var(--leading-md)!important}.leading-lg{line-height:var(--leading-lg)!important}.leading-xl{line-height:var(--leading-xl)!important}.leading-xxl{line-height:var(--leading-xxl)!important}.text-left{text-align:left!important}.text-center{text-align:center!important}.text-right{text-align:right!important}.text-justify{text-align:justify!important}.text-start{text-align:start!important}.text-end{text-align:end!important}.text-uppercase{text-transform:uppercase!important}.text-lowercase{text-transform:lowercase!important}.text-capitalize{text-transform:capitalize!important}}@layer theme.defaults{:root{--xs1: 4px;--xs2: 8px;--xs3: 12px;--sm1: 16px;--sm2: 20px;--sm3: 24px;--md1: 28px;--md2: 32px;--md3: 36px;--lg1: 40px;--lg2: 44px;--lg3: 48px;--xl1: 56px;--xl2: 64px;--xl3: 80px;--xxl1: 96px;--xxl2: 112px;--xxl3: 128px;--mega1: 160px;--mega2: 192px;--mega3: 224px;--giga1: 256px;--giga2: 288px;--giga3: 320px;--tera1: 384px;--tera2: 480px;--tera3: 520px;--ar-square: 1;--ar-landscape: 4/3;--ar-portrait: 3/4;--ar-widescreen: 16/9;--ar-golden: 1.618/1;--display: Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, ui-sans-serif, sans-serif;--text: ui-sans-serif, system-ui, sans-serif;--mono: Dank Mono, Inconsolata, Fira Mono, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, ui-monospace, monospace;--text-xs: .694rem;--text-sm: .833rem;--text-md: 1rem;--text-lg: 1.2rem;--text-xl: 1.44rem;--display-sm: 1.728rem;--display-md: 2.074rem;--display-lg: 2.488rem;--display-xl: 2.986rem;--display-mega: 3.583rem;--display-giga: 4.299rem;--extra-light: 200;--light: 300;--book: 400;--semi-bold: 600;--bold: 700;--black: 900;--tracking-sm: -.05em;--tracking-md: .025em;--tracking-lg: .05em;--tracking-xl: .075em;--tracking-xxl: .15em;--leading-xs: 1;--leading-sm: 1.15;--leading-md: 1.375;--leading-lg: 1.5;--leading-xl: 1.75;--leading-xxl: 2;--base-0: #fff;--base-50: #f6f7f9;--base-100: #edeef1;--base-200: #d6dbe1;--base-300: #b2bbc7;--base-400: #8897a8;--base-500: #697a8e;--base-600: #546375;--base-700: #4a5666;--base-800: #3c4550;--base-900: #353c45;--base-950: #23282e;--primary-50: #f0f9ff;--primary-100: #e0f2fe;--primary-200: #bae6fd;--primary-300: #7dd3fc;--primary-400: #38bdf8;--primary-500: #0ea5e9;--primary-600: #0284c7;--primary-700: #0369a1;--primary-800: #075985;--primary-900: #0c4a6e;--primary-950: #082f49;--yes-100: #d5f6e8;--yes-200: #afebd4;--yes-300: #7adbbd;--yes-400: #46c4a0;--yes-500: #13886d;--no-100: #ffe4e6;--no-200: #fecdd3;--no-300: #fda4af;--no-400: #fb7185;--no-500: #e11d48;--maybe-100: #fff7d6;--maybe-200: #fff0b3;--maybe-300: #ffd64a;--maybe-400: #ffc220;--maybe-500: #f9a007;--highlight-500: #ffee00;--border-sm: 1px;--border-md: 2px;--border-lg: 4px;--border-xl: 8px;--border-xxl: 12px;--radius-sm: 3px;--radius-md: 5px;--radius-lg: 8px;--radius-xl: 12px;--radius-xxl: 16px;--radius-round: 1e5px;--shadow-sm: 0 1px 3px 0 var(--ui-shadow-color), 0 1px 2px -1px var(--ui-shadow-color);--shadow-md: 0 4px 6px -1px var(--ui-shadow-color), 0 2px 4px -2px var(--ui-shadow-color);--shadow-lg: 0 8px 13px -3px var(--ui-shadow-color), 0 4px 6px -4px var(--ui-shadow-color);--shadow-xl: 0 20px 20px -5px var(--ui-shadow-color), 0 8px 10px -6px var(--ui-shadow-color);--shadow-xxl: 0px 11px 8px -6px var(--ui-shadow-color), 0 10px 15px 2px var(--ui-shadow-color);--o-0: 0;--o-1: .2;--o-2: .4;--o-3: .6;--o-4: .8;--o-5: 1;--z-bottom: -1000000000;--z-0: 0;--z-1: 10;--z-2: 20;--z-3: 30;--z-4: 40;--z-5: 50;--z-top: 1000000000;--transition: .22s ease-in-out;--transition-fast: .1s ease-in-out}}@layer theme.defaults{:root{color-scheme:light dark;--ui-border-color: light-dark(var(--base-200), var(--base-500));--ui-shadow-color: light-dark(rgb(0 0 0 / .1), rgb(0 0 0 / .6));--focus-ring-color: light-dark(var(--primary-500), var(--primary-400));--focus-ring-width: 2px;--focus-ring-offset: 2px;--success-100: var(--yes-100);--success-200: var(--yes-200);--success-300: var(--yes-300);--success-400: var(--yes-400);--success-500: var(--yes-500);--danger-100: var(--no-100);--danger-200: var(--no-200);--danger-300: var(--no-300);--danger-400: var(--no-400);--danger-500: var(--no-500);--warning-100: var(--maybe-100);--warning-200: var(--maybe-200);--warning-300: var(--maybe-300);--warning-400: var(--maybe-400);--warning-500: var(--maybe-500)}:root.theme-light{color-scheme:light}:root.theme-dark{color-scheme:dark}:root{accent-color:var(--primary-500);--body-background-color: light-dark(var(--base-0), var(--base-950));--body-line-height: var(--leading-lg);--input-height: var(--md3);--input-padding: var(--xs3);--input-border-width: var(--border-sm);--input-border-color: var(--ui-border-color);--input-border-radius: var(--radius-md);--input-border-color-invalid: light-dark( var(--danger-500), var(--danger-400) );--label-spacing: var(--xs1);--fieldset-padding: var(--sm3);--fieldset-border-width: var(--border-sm);--fieldset-border-color: var(--ui-border-color);--fieldset-border-radius: var(--radius-lg);--meter-height: var(--sm1);--meter-border-radius: var(--radius-md);--meter-track-color: var(--primary-100);--meter-low-color: var(--danger-400);--meter-medium-color: var(--warning-400);--meter-high-color: var(--success-400);--progress-height: var(--sm1);--progress-color: var(--primary-500);--progress-track-color: var(--primary-100);--progress-border-radius: var(--radius-md);--select-icon-size: var(--sm3);--select-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");--dialog-min-width: var(--tera1);--dialog-max-width: var(--tera3);--dialog-padding: var(--lg1) var(--md1);--dialog-border-width: var(--border-sm);--dialog-border-color: light-dark(var(--base-200), var(--base-800));--dialog-background-color: light-dark(var(--base-50), var(--base-900));--dialog-border-radius: var(--radius-lg);--dialog-backdrop-color: var(--base-950);--dialog-backdrop-opacity: var(--o-4);--details-padding: var(--sm1);--details-spacing: var(--xs3);--details-border-width: var(--border-sm);--details-border-color: light-dark(var(--base-200), var(--base-800));--details-background-color: light-dark(var(--base-50), var(--base-900));--details-border-radius: var(--radius-lg);--details-icon-size: var(--sm3);--details-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");--table-padding: var(--xs2) var(--sm1);--table-border-width: var(--border-sm);--table-border-color: light-dark(var(--base-100), var(--base-700));--table-border-radius: var(--radius-md);--table-background-color: none;--table-caption-spacing: var(--xs3);--figcaption-spacing: var(--xs2);--heading-font: var(--display);--heading-weight: var(--black);--heading-letter-spacing: normal;--heading-font-size-h1: clamp( var(--display-md), 1.269rem + 2.682vw, var(--display-xl) );--heading-font-size-h2: clamp( var(--display-sm), 1.057rem + 2.235vw, var(--display-lg) );--heading-font-size-h3: clamp( var(--text-xl), .881rem + 1.865vw, var(--display-md) );--heading-font-size-h4: clamp( var(--text-lg), .734rem + 1.553vw, var(--display-sm) );--heading-font-size-h5: clamp( var(--text-lg), .988rem + .706vw, var(--text-xl) );--heading-font-size-h6: clamp( var(--text-md), .824rem + .588vw, var(--text-lg) );--heading-line-height: var(--leading-sm);--heading-line-height-h1: var(--heading-line-height);--heading-line-height-h2: var(--heading-line-height);--heading-line-height-h3: var(--heading-line-height);--heading-line-height-h4: var(--leading-md);--heading-line-height-h5: var(--leading-md);--heading-line-height-h6: var(--leading-md);--heading-spacing-h1: .4em;--heading-spacing-h2: .4em;--heading-spacing-h3: .4em;--heading-spacing-h4: .4em;--heading-spacing-h5: .4em;--heading-spacing-h6: .4em;--heading-spacing-consecutive: .3em;--text-color: light-dark(var(--base-950), var(--base-200));--link-font-weight: var(--semi-bold);--link-color: light-dark(var(--primary-600), var(--primary-400));--link-color-hover: var(--primary-500);--text-code-color: light-dark(var(--primary-600), var(--primary-400));--text-code-background-color: light-dark( var(--primary-100), var(--primary-900) );--text-code-muted-color: light-dark(var(--base-500), var(--base-300));--pre-border-radius: var(--radius-md);--pre-font-size: .9rem;--blockquote-padding-block: var(--sm1);--blockquote-padding-inline: var(--md1) var(--sm3);--blockquote-background-color: light-dark( var(--primary-50), var(--primary-900) );--blockquote-border-radius: var(--radius-md);--blockquote-accent-width: var(--xs2);--blockquote-accent-color: linear-gradient( var(--primary-800), var(--primary-500) );--hr-content: "";--ins-color: var(--base-950);--ins-background-color: var(--success-200);--marker-color: var(--highlight-500);--selection-color: light-dark(var(--base-950), var(--base-0));--selection-background-color: light-dark( var(--primary-200), var(--primary-700) )}:root{--grid-column-gap: var(--sm1);--grid-row-gap: var(--sm1);@media(width>=768px){--grid-column-gap: var(--sm3);--grid-row-gap: var(--sm3)}--wrap-spacing: var(--sm1);--wrap-md-spacing: var(--sm3);--wrap-lg-spacing: 0;--wrap-width-sm: minmax(0, 55ch);--wrap-width-md: minmax(0, 70ch);--wrap-width-lg: minmax(0, 900px);--wrap-width: var(--wrap-width-md);--layout-content-width: 70ch;--layout-aside-width: 245px;--layout-toc-width: 1fr;--prose-spacing: var(--sm1)}:root{--badge-font-size: var(--text-sm);--badge-border-radius: var(--radius-md);--badge-color: var(--base-0);--badge-background-color: light-dark(var(--base-700), var(--base-600));--badge-primary-color: var(--base-0);--badge-primary-background-color: light-dark( var(--primary-600), var(--primary-500) );--badge-success-color: light-dark(var(--success-500), var(--base-0));--badge-success-background-color: light-dark( var(--success-100), var(--success-500) );--badge-danger-color: light-dark(var(--danger-500), var(--base-0));--badge-danger-background-color: light-dark( var(--danger-100), var(--danger-500) );--badge-warning-color: light-dark(var(--warning-500), var(--base-950));--badge-warning-background-color: light-dark( var(--warning-100), var(--warning-500) )}:root{--bt-min-width: 101px;--bt-min-width-md: 123px;--bt-min-width-lg: 133px;--bt-font-size: var(--text-sm);--bt-font-size-lg: var(--text-md);--bt-font-weight: var(--semi-bold);--bt-color: var(--text-color);--bt-color-hover: light-dark(var(--text-color), var(--base-0));--bt-background-color: light-dark(var(--base-0), var(--base-800));--bt-background-color-hover: light-dark(var(--base-50), var(--base-900));--bt-border-color: var(--ui-border-color);--bt-border-width: var(--border-sm);--bt-border-radius: var(--radius-lg);--bt-border-radius-lg: var(--radius-xl);--bt-outline-color-hover: light-dark(var(--base-950), var(--base-0));--bt-outline-background-color-hover: light-dark( rgb(0 0 0 / .1), rgb(255 255 255 / .1) );--bt-outline-border-color: light-dark(var(--base-950), var(--base-0));--bt-outline-border-color-hover: light-dark(var(--base-950), var(--base-0));--bt-primary-color: var(--base-0);--bt-primary-color-hover: var(--base-0);--bt-primary-background-color: var(--primary-600);--bt-primary-background-color-hover: var(--primary-500);--bt-primary-border-color: var(--primary-600);--bt-primary-border-color-hover: var(--primary-600)}:root{--avatar-color: var(--base-0);--avatar-background-color: var(--base-400);--avatar-border-color: light-dark(var(--base-0), var(--base-500));--avatar-border-width: var(--border-sm);--avatar-radius: var(--radius-round);--avatar-status-dot-color-offline: var(--base-300);--avatar-status-dot-color-online: var(--yes-400)}:root{--banner-color: var(--base-0);--banner-background-color: light-dark(var(--primary-600), var(--primary-800))}:root{--breadcrumbs-separator: "/";--breadcrumbs-separator-color: light-dark(var(--base-300), var(--base-600));--breadcrumbs-color: light-dark(var(--base-500), var(--base-400));--breadcrumbs-color-current: var(--text-color)}:root{--card-spacing: var(--sm3);--card-color: var(--text-color);--card-secondary-text-color: light-dark(var(--base-400), var(--base-500));--card-bg-color: light-dark(var(--base-100), var(--base-900));--card-border-radius: var(--radius-lg);--card-border-color: var(--ui-border-color);--card-border-width: var(--border-sm);--card-shadow: var(--shadow-md);--card-shadow-hover: var(--shadow-xl);--card-loading-bg: light-dark(var(--base-200), var(--base-900));--card-aspect-ratio: var(--ar-golden)}:root{--toggle-width: 50px;--toggle-height: 28px;--toggle-border-width: 2px;--toggle-track-color: light-dark(var(--base-300), var(--base-700));--toggle-track-color-checked: var(--yes-400);--toggle-thumb-color: var(--body-background-color)}:root{--faq-spacing: var(--xs3)}:root{--field-spacing: var(--xs1);--field-hint-color: light-dark(var(--base-400), var(--base-500));--field-error-color: light-dark(var(--danger-500), var(--danger-300));--field-message-position: static}:root{--featureItem-icon-box-size: var(--lg3);--featureItem-icon-size: var(--sm3);--featureItem-icon-color: light-dark(var(--primary-600), var(--primary-300));--featureItem-icon-background-color: light-dark( var(--primary-100), var(--primary-900) );--featureItem-icon-border-radius: var(--radius-lg)}:root{--footer-background-color: light-dark(var(--primary-950), var(--base-950));--footer-text-color: light-dark(var(--base-0), var(--base-200));--footer-border-width: var(--border-md);--footer-border-color: light-dark(transparent, var(--base-700));--footer-link-color: light-dark(var(--base-0), var(--base-200));--footer-link-color-hover: light-dark(var(--primary-200), var(--base-0))}:root{--header-height: var(--xl1);--header-padding: var(--sm1);@media(width>=768px){--header-height: var(--xl2);--header-padding: var(--sm3)}--header-background-color: light-dark(var(--base-0), var(--base-950));--header-menu-background-color: var(--base-950);--header-menu-color: var(--base-0);--header-menu-color-current: var(--primary-400);--header-menu-secondary-color: var(--base-300);--header-menu-border-color: var(--base-500)}:root{--hero-radius: var(--radius-xl);--hero-content-padding: var(--md3);--hero-actions-spacing: var(--lg3);--hero-pagination-dot: var(--sm1);--hero-pagination-dot-color: var(--base-0);--hero-pagination-dot-active-color: var(--primary-600);--hero-pagination-opacity: var(--o-4)}:root{--pagination-size: var(--md3);--pagination-border-radius: var(--radius-md);--pagination-color: var(--text-color);--pagination-color-current: var(--base-0);--pagination-background-color-current: light-dark( var(--primary-600), var(--primary-500) );--pagination-background-color-hover: light-dark( var(--base-100), var(--base-800) )}:root{--prevNext-border-color: var(--ui-border-color);--prevNext-border-radius: var(--radius-lg);--prevNext-border-color-hover: var(--link-color);--prevNext-label-color: light-dark(var(--base-400), var(--base-500))}:root{--notice-spacing: var(--sm1);--notice-text-color: light-dark(var(--base-950), var(--base-0));--notice-background-color: light-dark(var(--base-50), var(--base-800));--notice-border-color: light-dark(var(--base-200), var(--base-500));--notice-border-width: var(--border-sm);--notice-border-radius: var(--radius-lg)}:root{--pricingCard-highlight-border-color: light-dark( var(--primary-600), var(--primary-400) );--pricingCard-check-color: light-dark(var(--success-500), var(--success-400))}:root{--readProgressBar-height: var(--xs1);--readProgressBar-color: linear-gradient( 90deg, var(--primary-600) 0%, var(--primary-400) 100% )}:root{--section-spacing: var(--xl3);--section-header-spacing: var(--lg3);--section-eyebrow-color: light-dark(var(--primary-600), var(--primary-400));--section-lede-color: light-dark(var(--base-500), var(--base-400));--section-filled-background-color: light-dark( var(--base-50), var(--base-900) );--section-primary-background-color: light-dark( var(--primary-600), var(--primary-900) );--section-primary-text-color: var(--base-0);--section-primary-link-color: var(--primary-100);--section-primary-link-color-hover: var(--base-0);--section-primary-eyebrow-color: var(--primary-200);--section-primary-lede-color: var(--primary-100)}:root{--testimonial-role-color: light-dark(var(--base-400), var(--base-500))}:root{--tags-padding: var(--xs2);--tags-font-size: var(--text-sm);--tags-color: light-dark(var(--base-500), var(--base-400));--tags-background-color: light-dark(var(--base-100), var(--base-800));--tags-background-color-hover: light-dark(var(--base-200), var(--base-950));--tags-radius: var(--radius-md)}:root{--toc-color: var(--link-color);--toc-color-hover: var(--link-color-hover);--toc-spacing: var(--xs1);--toc-indentation: var(--xs3);--toc-icon-size: var(--sm1)}} diff --git a/src/styles/framework/theme.default.css b/src/styles/framework/theme.default.css index 251f9d38..f54a4edd 100644 --- a/src/styles/framework/theme.default.css +++ b/src/styles/framework/theme.default.css @@ -24,5 +24,9 @@ slots correctly. */ @layer base, elements, global, components, theme.defaults, theme.overrides, helpers; -@import url(./theme.default.tokens.css); -@import url(./theme.default.ui.css); +/* The parts are plain CSS; this entry assigns their layer, the same way + mcss.css layers the structural files. (Only standalone theme files + self-layer; in dist/css the parts are pre-wrapped so a lone + still works.) */ +@import url(./theme.default.tokens.css) layer(theme.defaults); +@import url(./theme.default.ui.css) layer(theme.defaults); diff --git a/src/styles/framework/theme.default.tokens.css b/src/styles/framework/theme.default.tokens.css index 1e4dce2e..1de91ed6 100644 --- a/src/styles/framework/theme.default.tokens.css +++ b/src/styles/framework/theme.default.tokens.css @@ -10,8 +10,7 @@ xxs: 240px xs: 360px sm: 480px md: 768px lg: 1024px xl: 1440px xxl: 1920px */ -@layer theme.defaults { - /* +/* • Dimensions (Margin, Padding, Width, Height) • Aspect Ratios @@ -31,224 +30,222 @@ • Opacity */ - :root { - /* GLOBALS */ - - /* DIMENSIONS */ - - /* Sizes */ - - --xs1: 4px; - --xs2: 8px; - --xs3: 12px; - - --sm1: 16px; - --sm2: 20px; - --sm3: 24px; - - --md1: 28px; - --md2: 32px; - --md3: 36px; - - --lg1: 40px; - --lg2: 44px; - --lg3: 48px; - - --xl1: 56px; - --xl2: 64px; - --xl3: 80px; - - --xxl1: 96px; - --xxl2: 112px; - --xxl3: 128px; - - --mega1: 160px; - --mega2: 192px; - --mega3: 224px; - - --giga1: 256px; - --giga2: 288px; - --giga3: 320px; - - --tera1: 384px; - --tera2: 480px; - --tera3: 520px; - - /* Aspect Ratios */ - --ar-square: 1; - --ar-landscape: 4/3; - --ar-portrait: 3/4; - --ar-widescreen: 16/9; - --ar-golden: 1.618/1; - - /* TYPOGRAPHY */ - /* See also elements.text & help.text */ - - /* Font Families */ - /* Local font stacks - More options @ https://modernfontstacks.com */ - --display: - Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, ui-sans-serif, - sans-serif; - --text: ui-sans-serif, system-ui, sans-serif; - --mono: - Dank Mono, Inconsolata, Fira Mono, SF Mono, Monaco, Droid Sans Mono, - Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, - ui-monospace, monospace; - - /* Font Sizes */ - /* Create your own sizes @ https://typescale.com */ - --text-xs: 0.694rem; - --text-sm: 0.833rem; - --text-md: 1rem; - --text-lg: 1.2rem; - --text-xl: 1.44rem; - --display-sm: 1.728rem; - --display-md: 2.074rem; - --display-lg: 2.488rem; - --display-xl: 2.986rem; /* h1 */ - --display-mega: 3.583rem; - --display-giga: 4.299rem; - - /* Heading font sizes are decisions, not scale steps: they map each +:root { + /* GLOBALS */ + + /* DIMENSIONS */ + + /* Sizes */ + + --xs1: 4px; + --xs2: 8px; + --xs3: 12px; + + --sm1: 16px; + --sm2: 20px; + --sm3: 24px; + + --md1: 28px; + --md2: 32px; + --md3: 36px; + + --lg1: 40px; + --lg2: 44px; + --lg3: 48px; + + --xl1: 56px; + --xl2: 64px; + --xl3: 80px; + + --xxl1: 96px; + --xxl2: 112px; + --xxl3: 128px; + + --mega1: 160px; + --mega2: 192px; + --mega3: 224px; + + --giga1: 256px; + --giga2: 288px; + --giga3: 320px; + + --tera1: 384px; + --tera2: 480px; + --tera3: 520px; + + /* Aspect Ratios */ + --ar-square: 1; + --ar-landscape: 4/3; + --ar-portrait: 3/4; + --ar-widescreen: 16/9; + --ar-golden: 1.618/1; + + /* TYPOGRAPHY */ + /* See also elements.text & help.text */ + + /* Font Families */ + /* Local font stacks - More options @ https://modernfontstacks.com */ + --display: + Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, ui-sans-serif, + sans-serif; + --text: ui-sans-serif, system-ui, sans-serif; + --mono: + Dank Mono, Inconsolata, Fira Mono, SF Mono, Monaco, Droid Sans Mono, + Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, + ui-monospace, monospace; + + /* Font Sizes */ + /* Create your own sizes @ https://typescale.com */ + --text-xs: 0.694rem; + --text-sm: 0.833rem; + --text-md: 1rem; + --text-lg: 1.2rem; + --text-xl: 1.44rem; + --display-sm: 1.728rem; + --display-md: 2.074rem; + --display-lg: 2.488rem; + --display-xl: 2.986rem; /* h1 */ + --display-mega: 3.583rem; + --display-giga: 4.299rem; + + /* Heading font sizes are decisions, not scale steps: they map each heading level onto this scale. See --heading-font-size-* in theme.default.ui.css. */ - /* Font Weights */ - --extra-light: 200; - --light: 300; - --book: 400; - --semi-bold: 600; - --bold: 700; - --black: 900; - - /* Letter Spacing */ - --tracking-sm: -0.05em; - --tracking-md: 0.025em; - --tracking-lg: 0.05em; - --tracking-xl: 0.075em; - --tracking-xxl: 0.15em; - - /* Line Height */ - --leading-xs: 1; - --leading-sm: 1.15; - --leading-md: 1.375; - --leading-lg: 1.5; - --leading-xl: 1.75; - --leading-xxl: 2; - - /* COLORS */ - /* Make your own palettes programmatically: https://www.tints.dev */ - - /* Base */ - - --base-0: #fff; - --base-50: #f6f7f9; - --base-100: #edeef1; - --base-200: #d6dbe1; - --base-300: #b2bbc7; - --base-400: #8897a8; - --base-500: #697a8e; - --base-600: #546375; - --base-700: #4a5666; - --base-800: #3c4550; - --base-900: #353c45; - --base-950: #23282e; - - /* Primary */ - - --primary-50: #f0f9ff; - --primary-100: #e0f2fe; - --primary-200: #bae6fd; - --primary-300: #7dd3fc; - --primary-400: #38bdf8; - --primary-500: #0ea5e9; - --primary-600: #0284c7; - --primary-700: #0369a1; - --primary-800: #075985; - --primary-900: #0c4a6e; - --primary-950: #082f49; - - /* Secondary and/or Highlight goes here */ - - /* Feedback */ - - --yes-100: #d5f6e8; - --yes-200: #afebd4; - --yes-300: #7adbbd; - --yes-400: #46c4a0; - --yes-500: #13886d; - - --no-100: #ffe4e6; - --no-200: #fecdd3; - --no-300: #fda4af; - --no-400: #fb7185; - --no-500: #e11d48; - - --maybe-100: #fff7d6; - --maybe-200: #fff0b3; - --maybe-300: #ffd64a; - --maybe-400: #ffc220; - --maybe-500: #f9a007; - - /* Highlight (text marker) */ - - --highlight-500: #ffee00; - - /* BORDERS */ - - --border-sm: 1px; - --border-md: 2px; - --border-lg: 4px; - --border-xl: 8px; - --border-xxl: 12px; - - --radius-sm: 3px; - --radius-md: 5px; - --radius-lg: 8px; - --radius-xl: 12px; - --radius-xxl: 16px; - --radius-round: 1e5px; - - /* DROP SHADOWS */ - - --shadow-sm: - 0 1px 3px 0 var(--ui-shadow-color), 0 1px 2px -1px var(--ui-shadow-color); - --shadow-md: - 0 4px 6px -1px var(--ui-shadow-color), - 0 2px 4px -2px var(--ui-shadow-color); - --shadow-lg: - 0 8px 13px -3px var(--ui-shadow-color), - 0 4px 6px -4px var(--ui-shadow-color); - --shadow-xl: - 0 20px 20px -5px var(--ui-shadow-color), - 0 8px 10px -6px var(--ui-shadow-color); - --shadow-xxl: - 0px 11px 8px -6px var(--ui-shadow-color), - 0 10px 15px 2px var(--ui-shadow-color); - - /* OPACITY */ - - --o-0: 0; /* overkill for consistency */ - --o-1: 0.2; - --o-2: 0.4; - --o-3: 0.6; - --o-4: 0.8; - --o-5: 1; - - /* Z-INDEX */ - - --z-bottom: -1000000000; - --z-0: 0; /* overkill for consistency */ - --z-1: 10; - --z-2: 20; - --z-3: 30; - --z-4: 40; - --z-5: 50; - --z-top: 1000000000; - - /* TRANSITIONS */ - - --transition: 220ms ease-in-out; - --transition-fast: 100ms ease-in-out; - } + /* Font Weights */ + --extra-light: 200; + --light: 300; + --book: 400; + --semi-bold: 600; + --bold: 700; + --black: 900; + + /* Letter Spacing */ + --tracking-sm: -0.05em; + --tracking-md: 0.025em; + --tracking-lg: 0.05em; + --tracking-xl: 0.075em; + --tracking-xxl: 0.15em; + + /* Line Height */ + --leading-xs: 1; + --leading-sm: 1.15; + --leading-md: 1.375; + --leading-lg: 1.5; + --leading-xl: 1.75; + --leading-xxl: 2; + + /* COLORS */ + /* Make your own palettes programmatically: https://www.tints.dev */ + + /* Base */ + + --base-0: #fff; + --base-50: #f6f7f9; + --base-100: #edeef1; + --base-200: #d6dbe1; + --base-300: #b2bbc7; + --base-400: #8897a8; + --base-500: #697a8e; + --base-600: #546375; + --base-700: #4a5666; + --base-800: #3c4550; + --base-900: #353c45; + --base-950: #23282e; + + /* Primary */ + + --primary-50: #f0f9ff; + --primary-100: #e0f2fe; + --primary-200: #bae6fd; + --primary-300: #7dd3fc; + --primary-400: #38bdf8; + --primary-500: #0ea5e9; + --primary-600: #0284c7; + --primary-700: #0369a1; + --primary-800: #075985; + --primary-900: #0c4a6e; + --primary-950: #082f49; + + /* Secondary and/or Highlight goes here */ + + /* Feedback */ + + --yes-100: #d5f6e8; + --yes-200: #afebd4; + --yes-300: #7adbbd; + --yes-400: #46c4a0; + --yes-500: #13886d; + + --no-100: #ffe4e6; + --no-200: #fecdd3; + --no-300: #fda4af; + --no-400: #fb7185; + --no-500: #e11d48; + + --maybe-100: #fff7d6; + --maybe-200: #fff0b3; + --maybe-300: #ffd64a; + --maybe-400: #ffc220; + --maybe-500: #f9a007; + + /* Highlight (text marker) */ + + --highlight-500: #ffee00; + + /* BORDERS */ + + --border-sm: 1px; + --border-md: 2px; + --border-lg: 4px; + --border-xl: 8px; + --border-xxl: 12px; + + --radius-sm: 3px; + --radius-md: 5px; + --radius-lg: 8px; + --radius-xl: 12px; + --radius-xxl: 16px; + --radius-round: 1e5px; + + /* DROP SHADOWS */ + + --shadow-sm: + 0 1px 3px 0 var(--ui-shadow-color), 0 1px 2px -1px var(--ui-shadow-color); + --shadow-md: + 0 4px 6px -1px var(--ui-shadow-color), 0 2px 4px -2px var(--ui-shadow-color); + --shadow-lg: + 0 8px 13px -3px var(--ui-shadow-color), + 0 4px 6px -4px var(--ui-shadow-color); + --shadow-xl: + 0 20px 20px -5px var(--ui-shadow-color), + 0 8px 10px -6px var(--ui-shadow-color); + --shadow-xxl: + 0px 11px 8px -6px var(--ui-shadow-color), + 0 10px 15px 2px var(--ui-shadow-color); + + /* OPACITY */ + + --o-0: 0; /* overkill for consistency */ + --o-1: 0.2; + --o-2: 0.4; + --o-3: 0.6; + --o-4: 0.8; + --o-5: 1; + + /* Z-INDEX */ + + --z-bottom: -1000000000; + --z-0: 0; /* overkill for consistency */ + --z-1: 10; + --z-2: 20; + --z-3: 30; + --z-4: 40; + --z-5: 50; + --z-top: 1000000000; + + /* TRANSITIONS */ + + --transition: 220ms ease-in-out; + --transition-fast: 100ms ease-in-out; } diff --git a/src/styles/framework/theme.default.ui.css b/src/styles/framework/theme.default.ui.css index 5395ca5e..25aefb67 100644 --- a/src/styles/framework/theme.default.ui.css +++ b/src/styles/framework/theme.default.ui.css @@ -23,582 +23,571 @@ override from your own theme (see theme.starter.css). */ -@layer theme.defaults { - :root { - /* Color scheme (light/dark), toggled by the .theme-light / .theme-dark +:root { + /* Color scheme (light/dark), toggled by the .theme-light / .theme-dark classes below. Unrelated to theme files, which are full themes. */ - color-scheme: light dark; + color-scheme: light dark; - --ui-border-color: light-dark(var(--base-200), var(--base-500)); - /* Also consumed by the --shadow-* scale in theme.default.tokens.css: + --ui-border-color: light-dark(var(--base-200), var(--base-500)); + /* Also consumed by the --shadow-* scale in theme.default.tokens.css: the one reference between the files that runs upward, so shadows can switch with the color scheme. Raw alpha colors: the palettes have no alpha steps. */ - --ui-shadow-color: light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.6)); + --ui-shadow-color: light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.6)); - /* Keyboard focus ring (consumed by :focus-visible in global.a11y.css). + /* Keyboard focus ring (consumed by :focus-visible in global.a11y.css). Raw 2px on purpose: an accessibility affordance that shouldn't move when a theme retunes the decorative border scale. */ - --focus-ring-color: light-dark(var(--primary-500), var(--primary-400)); - --focus-ring-width: 2px; - --focus-ring-offset: 2px; + --focus-ring-color: light-dark(var(--primary-500), var(--primary-400)); + --focus-ring-width: 2px; + --focus-ring-offset: 2px; - /* Semantic feedback aliases over the raw feedback palettes. + /* Semantic feedback aliases over the raw feedback palettes. Prefer these in components and themes; a theme can restyle feedback by overriding the aliases without touching the raw scales. */ - --success-100: var(--yes-100); - --success-200: var(--yes-200); - --success-300: var(--yes-300); - --success-400: var(--yes-400); - --success-500: var(--yes-500); - --danger-100: var(--no-100); - --danger-200: var(--no-200); - --danger-300: var(--no-300); - --danger-400: var(--no-400); - --danger-500: var(--no-500); - --warning-100: var(--maybe-100); - --warning-200: var(--maybe-200); - --warning-300: var(--maybe-300); - --warning-400: var(--maybe-400); - --warning-500: var(--maybe-500); - } + --success-100: var(--yes-100); + --success-200: var(--yes-200); + --success-300: var(--yes-300); + --success-400: var(--yes-400); + --success-500: var(--yes-500); + --danger-100: var(--no-100); + --danger-200: var(--no-200); + --danger-300: var(--no-300); + --danger-400: var(--no-400); + --danger-500: var(--no-500); + --warning-100: var(--maybe-100); + --warning-200: var(--maybe-200); + --warning-300: var(--maybe-300); + --warning-400: var(--maybe-400); + --warning-500: var(--maybe-500); +} - :root.theme-light { - color-scheme: light; - } +:root.theme-light { + color-scheme: light; +} - :root.theme-dark { - color-scheme: dark; - } +:root.theme-dark { + color-scheme: dark; +} - /* HTML ELEMENTS */ +/* HTML ELEMENTS */ - :root { - accent-color: var(--primary-500); +:root { + accent-color: var(--primary-500); - --body-background-color: light-dark(var(--base-0), var(--base-950)); - --body-line-height: var(--leading-lg); + --body-background-color: light-dark(var(--base-0), var(--base-950)); + --body-line-height: var(--leading-lg); - --input-height: var(--md3); - --input-padding: var(--xs3); - --input-border-width: var(--border-sm); - --input-border-color: var(--ui-border-color); - --input-border-radius: var(--radius-md); - --input-border-color-invalid: light-dark( - var(--danger-500), - var(--danger-400) - ); + --input-height: var(--md3); + --input-padding: var(--xs3); + --input-border-width: var(--border-sm); + --input-border-color: var(--ui-border-color); + --input-border-radius: var(--radius-md); + --input-border-color-invalid: light-dark( + var(--danger-500), + var(--danger-400) + ); - /* Gap under a label that precedes its control */ - --label-spacing: var(--xs1); + /* Gap under a label that precedes its control */ + --label-spacing: var(--xs1); - --fieldset-padding: var(--sm3); - --fieldset-border-width: var(--border-sm); - --fieldset-border-color: var(--ui-border-color); - --fieldset-border-radius: var(--radius-lg); + --fieldset-padding: var(--sm3); + --fieldset-border-width: var(--border-sm); + --fieldset-border-color: var(--ui-border-color); + --fieldset-border-radius: var(--radius-lg); - /* meter: low/medium/high map to the even-less-good, suboptimum, and + /* meter: low/medium/high map to the even-less-good, suboptimum, and optimum pseudo-elements */ - --meter-height: var(--sm1); - --meter-border-radius: var(--radius-md); - --meter-track-color: var(--primary-100); - --meter-low-color: var(--danger-400); - --meter-medium-color: var(--warning-400); - --meter-high-color: var(--success-400); - - --progress-height: var(--sm1); - --progress-color: var(--primary-500); - --progress-track-color: var(--primary-100); - --progress-border-radius: var(--radius-md); - - /* select's chevron, applied as a mask painted with the text color; + --meter-height: var(--sm1); + --meter-border-radius: var(--radius-md); + --meter-track-color: var(--primary-100); + --meter-low-color: var(--danger-400); + --meter-medium-color: var(--warning-400); + --meter-high-color: var(--success-400); + + --progress-height: var(--sm1); + --progress-color: var(--primary-500); + --progress-track-color: var(--primary-100); + --progress-border-radius: var(--radius-md); + + /* select's chevron, applied as a mask painted with the text color; any url() works here, data URL or file */ - --select-icon-size: var(--sm3); - --select-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E"); - - --dialog-min-width: var(--tera1); - --dialog-max-width: var(--tera3); - --dialog-padding: var(--lg1) var(--md1); - --dialog-border-width: var(--border-sm); - --dialog-border-color: light-dark(var(--base-200), var(--base-800)); - --dialog-background-color: light-dark(var(--base-50), var(--base-900)); - --dialog-border-radius: var(--radius-lg); - --dialog-backdrop-color: var(--base-950); - --dialog-backdrop-opacity: var(--o-4); - - /* details: same surface as dialog by default, on purpose but + --select-icon-size: var(--sm3); + --select-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E"); + + --dialog-min-width: var(--tera1); + --dialog-max-width: var(--tera3); + --dialog-padding: var(--lg1) var(--md1); + --dialog-border-width: var(--border-sm); + --dialog-border-color: light-dark(var(--base-200), var(--base-800)); + --dialog-background-color: light-dark(var(--base-50), var(--base-900)); + --dialog-border-radius: var(--radius-lg); + --dialog-backdrop-color: var(--base-950); + --dialog-backdrop-opacity: var(--o-4); + + /* details: same surface as dialog by default, on purpose but independently overridable. Spacing is the gap between an open summary and its content. */ - --details-padding: var(--sm1); - --details-spacing: var(--xs3); - --details-border-width: var(--border-sm); - --details-border-color: light-dark(var(--base-200), var(--base-800)); - --details-background-color: light-dark(var(--base-50), var(--base-900)); - --details-border-radius: var(--radius-lg); - --details-icon-size: var(--sm3); - /* Marker icon, applied as a mask painted with the text color; any + --details-padding: var(--sm1); + --details-spacing: var(--xs3); + --details-border-width: var(--border-sm); + --details-border-color: light-dark(var(--base-200), var(--base-800)); + --details-background-color: light-dark(var(--base-50), var(--base-900)); + --details-border-radius: var(--radius-lg); + --details-icon-size: var(--sm3); + /* Marker icon, applied as a mask painted with the text color; any url() works here, data URL or file */ - --details-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E"); - - --table-padding: var(--xs2) var(--sm1); - --table-border-width: var(--border-sm); - --table-border-color: light-dark(var(--base-100), var(--base-700)); - --table-border-radius: var(--radius-md); - --table-background-color: none; - /* Gap between the table and its caption */ - --table-caption-spacing: var(--xs3); - /* Gap between a figure's content and caption on either side */ - --figcaption-spacing: var(--xs2); - - /* Text */ - - --heading-font: var(--display); - --heading-weight: var(--black); - --heading-letter-spacing: normal; /* (e.g. -0.02em or var(--tracking-sm)) */ - - --heading-font-size-h1: clamp( - var(--display-md), - 1.269rem + 2.682vw, - var(--display-xl) - ); /* 2.074rem → 2.986rem */ - --heading-font-size-h2: clamp( - var(--display-sm), - 1.057rem + 2.235vw, - var(--display-lg) - ); /* 1.728rem → 2.488rem */ - --heading-font-size-h3: clamp( - var(--text-xl), - 0.881rem + 1.865vw, - var(--display-md) - ); /* 1.44rem → 2.074rem */ - --heading-font-size-h4: clamp( - var(--text-lg), - 0.734rem + 1.553vw, - var(--display-sm) - ); /* 1.2rem → 1.728rem */ - --heading-font-size-h5: clamp( - var(--text-lg), - 0.988rem + 0.706vw, - var(--text-xl) - ); /* 1.2rem → 1.44rem */ - --heading-font-size-h6: clamp( - var(--text-md), - 0.824rem + 0.588vw, - var(--text-lg) - ); /* 1rem → 1.2rem */ - - --heading-line-height: var(--leading-sm); - --heading-line-height-h1: var(--heading-line-height); - --heading-line-height-h2: var(--heading-line-height); - --heading-line-height-h3: var(--heading-line-height); - --heading-line-height-h4: var(--leading-md); - --heading-line-height-h5: var(--leading-md); - --heading-line-height-h6: var(--leading-md); - - /* Headings bottom margin */ - --heading-spacing-h1: 0.4em; - --heading-spacing-h2: 0.4em; - --heading-spacing-h3: 0.4em; - --heading-spacing-h4: 0.4em; - --heading-spacing-h5: 0.4em; - --heading-spacing-h6: 0.4em; - /* Any h1 before h2, h2 before h3, h3 before h4. */ - --heading-spacing-consecutive: 0.3em; - - --text-color: light-dark(var(--base-950), var(--base-200)); - --link-font-weight: var(--semi-bold); - --link-color: light-dark(var(--primary-600), var(--primary-400)); - --link-color-hover: var(--primary-500); - - --text-code-color: light-dark(var(--primary-600), var(--primary-400)); - --text-code-background-color: light-dark( - var(--primary-100), - var(--primary-900) - ); - /* when code inline styling doesn't apply (inside headings and pre) */ - --text-code-muted-color: light-dark(var(--base-500), var(--base-300)); - - --pre-border-radius: var(--radius-md); - /* matching the 0.9em of inline code */ - --pre-font-size: 0.9rem; - - --blockquote-padding-block: var(--sm1); - --blockquote-padding-inline: var(--md1) var(--sm3); - --blockquote-background-color: light-dark( - var(--primary-50), - var(--primary-900) - ); - --blockquote-border-radius: var(--radius-md); - --blockquote-accent-width: var(--xs2); - --blockquote-accent-color: linear-gradient( - var(--primary-800), - var(--primary-500) - ); - - /* .prose related stuff in GLOBAL */ - - /* Optional centered label on
, e.g. "***" or a dingbat */ - --hr-content: ""; - - /* ins: background stays light in both light/dark modes */ - --ins-color: var(--base-950); - --ins-background-color: var(--success-200); - - --marker-color: var(--highlight-500); - - --selection-color: light-dark(var(--base-950), var(--base-0)); - --selection-background-color: light-dark( - var(--primary-200), - var(--primary-700) - ); - } + --details-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E"); + + --table-padding: var(--xs2) var(--sm1); + --table-border-width: var(--border-sm); + --table-border-color: light-dark(var(--base-100), var(--base-700)); + --table-border-radius: var(--radius-md); + --table-background-color: none; + /* Gap between the table and its caption */ + --table-caption-spacing: var(--xs3); + /* Gap between a figure's content and caption on either side */ + --figcaption-spacing: var(--xs2); + + /* Text */ + + --heading-font: var(--display); + --heading-weight: var(--black); + --heading-letter-spacing: normal; /* (e.g. -0.02em or var(--tracking-sm)) */ + + --heading-font-size-h1: clamp( + var(--display-md), + 1.269rem + 2.682vw, + var(--display-xl) + ); /* 2.074rem → 2.986rem */ + --heading-font-size-h2: clamp( + var(--display-sm), + 1.057rem + 2.235vw, + var(--display-lg) + ); /* 1.728rem → 2.488rem */ + --heading-font-size-h3: clamp( + var(--text-xl), + 0.881rem + 1.865vw, + var(--display-md) + ); /* 1.44rem → 2.074rem */ + --heading-font-size-h4: clamp( + var(--text-lg), + 0.734rem + 1.553vw, + var(--display-sm) + ); /* 1.2rem → 1.728rem */ + --heading-font-size-h5: clamp( + var(--text-lg), + 0.988rem + 0.706vw, + var(--text-xl) + ); /* 1.2rem → 1.44rem */ + --heading-font-size-h6: clamp( + var(--text-md), + 0.824rem + 0.588vw, + var(--text-lg) + ); /* 1rem → 1.2rem */ + + --heading-line-height: var(--leading-sm); + --heading-line-height-h1: var(--heading-line-height); + --heading-line-height-h2: var(--heading-line-height); + --heading-line-height-h3: var(--heading-line-height); + --heading-line-height-h4: var(--leading-md); + --heading-line-height-h5: var(--leading-md); + --heading-line-height-h6: var(--leading-md); + + /* Headings bottom margin */ + --heading-spacing-h1: 0.4em; + --heading-spacing-h2: 0.4em; + --heading-spacing-h3: 0.4em; + --heading-spacing-h4: 0.4em; + --heading-spacing-h5: 0.4em; + --heading-spacing-h6: 0.4em; + /* Any h1 before h2, h2 before h3, h3 before h4. */ + --heading-spacing-consecutive: 0.3em; + + --text-color: light-dark(var(--base-950), var(--base-200)); + --link-font-weight: var(--semi-bold); + --link-color: light-dark(var(--primary-600), var(--primary-400)); + --link-color-hover: var(--primary-500); + + --text-code-color: light-dark(var(--primary-600), var(--primary-400)); + --text-code-background-color: light-dark( + var(--primary-100), + var(--primary-900) + ); + /* when code inline styling doesn't apply (inside headings and pre) */ + --text-code-muted-color: light-dark(var(--base-500), var(--base-300)); + + --pre-border-radius: var(--radius-md); + /* matching the 0.9em of inline code */ + --pre-font-size: 0.9rem; + + --blockquote-padding-block: var(--sm1); + --blockquote-padding-inline: var(--md1) var(--sm3); + --blockquote-background-color: light-dark( + var(--primary-50), + var(--primary-900) + ); + --blockquote-border-radius: var(--radius-md); + --blockquote-accent-width: var(--xs2); + --blockquote-accent-color: linear-gradient( + var(--primary-800), + var(--primary-500) + ); + + /* .prose related stuff in GLOBAL */ + + /* Optional centered label on
, e.g. "***" or a dingbat */ + --hr-content: ""; + + /* ins: background stays light in both light/dark modes */ + --ins-color: var(--base-950); + --ins-background-color: var(--success-200); + + --marker-color: var(--highlight-500); + + --selection-color: light-dark(var(--base-950), var(--base-0)); + --selection-background-color: light-dark( + var(--primary-200), + var(--primary-700) + ); +} - /* GLOBAL */ - - :root { - /* Mobile-first: tighter gutters on small screens, 24px from --md up */ - --grid-column-gap: var(--sm1); - --grid-row-gap: var(--sm1); - @media (--md) { - --grid-column-gap: var(--sm3); - --grid-row-gap: var(--sm3); - } - - --wrap-spacing: var(--sm1); - --wrap-md-spacing: var(--sm3); - --wrap-lg-spacing: 0; - /* Widths are measures: ch tracks the text size, so raw on purpose. */ - --wrap-width-sm: minmax(0, 55ch); - --wrap-width-md: minmax(0, 70ch); - --wrap-width-lg: minmax(0, 900px); - --wrap-width: var(--wrap-width-md); - - --layout-content-width: 70ch; - --layout-aside-width: 245px; - --layout-toc-width: 1fr; - - --prose-spacing: var(--sm1); - } +/* GLOBAL */ - /* COMPONENTS */ - - /* Badge */ - - :root { - --badge-font-size: var(--text-sm); - --badge-border-radius: var(--radius-md); - --badge-color: var(--base-0); - --badge-background-color: light-dark(var(--base-700), var(--base-600)); - - --badge-primary-color: var(--base-0); - --badge-primary-background-color: light-dark( - var(--primary-600), - var(--primary-500) - ); - --badge-success-color: light-dark(var(--success-500), var(--base-0)); - --badge-success-background-color: light-dark( - var(--success-100), - var(--success-500) - ); - --badge-danger-color: light-dark(var(--danger-500), var(--base-0)); - --badge-danger-background-color: light-dark( - var(--danger-100), - var(--danger-500) - ); - --badge-warning-color: light-dark(var(--warning-500), var(--base-950)); - --badge-warning-background-color: light-dark( - var(--warning-100), - var(--warning-500) - ); +:root { + /* Mobile-first: tighter gutters on small screens, 24px from --md up */ + --grid-column-gap: var(--sm1); + --grid-row-gap: var(--sm1); + @media (--md) { + --grid-column-gap: var(--sm3); + --grid-row-gap: var(--sm3); } - /* Button */ - /* (Button defaults and primary button colors) */ - - :root { - /* Optical minimums, deliberately off the spacing scale */ - --bt-min-width: 101px; - --bt-min-width-md: 123px; - --bt-min-width-lg: 133px; - - --bt-font-size: var(--text-sm); - --bt-font-size-lg: var(--text-md); - --bt-font-weight: var(--semi-bold); - - --bt-color: var(--text-color); - --bt-color-hover: light-dark(var(--text-color), var(--base-0)); - - --bt-background-color: light-dark(var(--base-0), var(--base-800)); - --bt-background-color-hover: light-dark(var(--base-50), var(--base-900)); - - --bt-border-color: var(--ui-border-color); - --bt-border-width: var(--border-sm); - --bt-border-radius: var(--radius-lg); - --bt-border-radius-lg: var(--radius-xl); - - --bt-outline-color-hover: light-dark(var(--base-950), var(--base-0)); - --bt-outline-background-color-hover: light-dark( - rgb(0 0 0 / 0.1), - rgb(255 255 255 / 0.1) - ); - --bt-outline-border-color: light-dark(var(--base-950), var(--base-0)); - --bt-outline-border-color-hover: light-dark(var(--base-950), var(--base-0)); - - --bt-primary-color: var(--base-0); - --bt-primary-color-hover: var(--base-0); - --bt-primary-background-color: var(--primary-600); - --bt-primary-background-color-hover: var(--primary-500); - --bt-primary-border-color: var(--primary-600); - --bt-primary-border-color-hover: var(--primary-600); - } + --wrap-spacing: var(--sm1); + --wrap-md-spacing: var(--sm3); + --wrap-lg-spacing: 0; + /* Widths are measures: ch tracks the text size, so raw on purpose. */ + --wrap-width-sm: minmax(0, 55ch); + --wrap-width-md: minmax(0, 70ch); + --wrap-width-lg: minmax(0, 900px); + --wrap-width: var(--wrap-width-md); - /* Avatar */ + --layout-content-width: 70ch; + --layout-aside-width: 245px; + --layout-toc-width: 1fr; - :root { - --avatar-color: var(--base-0); - --avatar-background-color: var(--base-400); - --avatar-border-color: light-dark(var(--base-0), var(--base-500)); - --avatar-border-width: var(--border-sm); - --avatar-radius: var(--radius-round); - --avatar-status-dot-color-offline: var(--base-300); - --avatar-status-dot-color-online: var(--yes-400); - } + --prose-spacing: var(--sm1); +} - /* Banner */ +/* COMPONENTS */ + +/* Badge */ + +:root { + --badge-font-size: var(--text-sm); + --badge-border-radius: var(--radius-md); + --badge-color: var(--base-0); + --badge-background-color: light-dark(var(--base-700), var(--base-600)); + + --badge-primary-color: var(--base-0); + --badge-primary-background-color: light-dark( + var(--primary-600), + var(--primary-500) + ); + --badge-success-color: light-dark(var(--success-500), var(--base-0)); + --badge-success-background-color: light-dark( + var(--success-100), + var(--success-500) + ); + --badge-danger-color: light-dark(var(--danger-500), var(--base-0)); + --badge-danger-background-color: light-dark( + var(--danger-100), + var(--danger-500) + ); + --badge-warning-color: light-dark(var(--warning-500), var(--base-950)); + --badge-warning-background-color: light-dark( + var(--warning-100), + var(--warning-500) + ); +} - :root { - --banner-color: var(--base-0); - --banner-background-color: light-dark( - var(--primary-600), - var(--primary-800) - ); - } +/* Button */ +/* (Button defaults and primary button colors) */ + +:root { + /* Optical minimums, deliberately off the spacing scale */ + --bt-min-width: 101px; + --bt-min-width-md: 123px; + --bt-min-width-lg: 133px; + + --bt-font-size: var(--text-sm); + --bt-font-size-lg: var(--text-md); + --bt-font-weight: var(--semi-bold); + + --bt-color: var(--text-color); + --bt-color-hover: light-dark(var(--text-color), var(--base-0)); + + --bt-background-color: light-dark(var(--base-0), var(--base-800)); + --bt-background-color-hover: light-dark(var(--base-50), var(--base-900)); + + --bt-border-color: var(--ui-border-color); + --bt-border-width: var(--border-sm); + --bt-border-radius: var(--radius-lg); + --bt-border-radius-lg: var(--radius-xl); + + --bt-outline-color-hover: light-dark(var(--base-950), var(--base-0)); + --bt-outline-background-color-hover: light-dark( + rgb(0 0 0 / 0.1), + rgb(255 255 255 / 0.1) + ); + --bt-outline-border-color: light-dark(var(--base-950), var(--base-0)); + --bt-outline-border-color-hover: light-dark(var(--base-950), var(--base-0)); + + --bt-primary-color: var(--base-0); + --bt-primary-color-hover: var(--base-0); + --bt-primary-background-color: var(--primary-600); + --bt-primary-background-color-hover: var(--primary-500); + --bt-primary-border-color: var(--primary-600); + --bt-primary-border-color-hover: var(--primary-600); +} - /* Breadcrumbs */ +/* Avatar */ - :root { - --breadcrumbs-separator: "/"; - --breadcrumbs-separator-color: light-dark(var(--base-300), var(--base-600)); - --breadcrumbs-color: light-dark(var(--base-500), var(--base-400)); - --breadcrumbs-color-current: var(--text-color); - } +:root { + --avatar-color: var(--base-0); + --avatar-background-color: var(--base-400); + --avatar-border-color: light-dark(var(--base-0), var(--base-500)); + --avatar-border-width: var(--border-sm); + --avatar-radius: var(--radius-round); + --avatar-status-dot-color-offline: var(--base-300); + --avatar-status-dot-color-online: var(--yes-400); +} + +/* Banner */ + +:root { + --banner-color: var(--base-0); + --banner-background-color: light-dark(var(--primary-600), var(--primary-800)); +} + +/* Breadcrumbs */ + +:root { + --breadcrumbs-separator: "/"; + --breadcrumbs-separator-color: light-dark(var(--base-300), var(--base-600)); + --breadcrumbs-color: light-dark(var(--base-500), var(--base-400)); + --breadcrumbs-color-current: var(--text-color); +} - /* Card */ - - :root { - --card-spacing: var(--sm3); - --card-color: var(--text-color); - --card-secondary-text-color: light-dark(var(--base-400), var(--base-500)); - --card-bg-color: light-dark(var(--base-100), var(--base-900)); - --card-border-radius: var(--radius-lg); - --card-border-color: var(--ui-border-color); - --card-border-width: var(--border-sm); - --card-shadow: var(--shadow-md); - --card-shadow-hover: var(--shadow-xl); - --card-loading-bg: light-dark(var(--base-200), var(--base-900)); - /* Default media aspect ratio; the Card component pins it inline only +/* Card */ + +:root { + --card-spacing: var(--sm3); + --card-color: var(--text-color); + --card-secondary-text-color: light-dark(var(--base-400), var(--base-500)); + --card-bg-color: light-dark(var(--base-100), var(--base-900)); + --card-border-radius: var(--radius-lg); + --card-border-color: var(--ui-border-color); + --card-border-width: var(--border-sm); + --card-shadow: var(--shadow-md); + --card-shadow-hover: var(--shadow-xl); + --card-loading-bg: light-dark(var(--base-200), var(--base-900)); + /* Default media aspect ratio; the Card component pins it inline only when its aspectRatio prop is passed */ - --card-aspect-ratio: var(--ar-golden); - } + --card-aspect-ratio: var(--ar-golden); +} - /* Toggle */ +/* Toggle */ - :root { - /* Drawn-control geometry, deliberately off the scales */ - --toggle-width: 50px; - --toggle-height: 28px; - --toggle-border-width: 2px; - --toggle-track-color: light-dark(var(--base-300), var(--base-700)); - --toggle-track-color-checked: var(--yes-400); - --toggle-thumb-color: var(--body-background-color); - } +:root { + /* Drawn-control geometry, deliberately off the scales */ + --toggle-width: 50px; + --toggle-height: 28px; + --toggle-border-width: 2px; + --toggle-track-color: light-dark(var(--base-300), var(--base-700)); + --toggle-track-color-checked: var(--yes-400); + --toggle-thumb-color: var(--body-background-color); +} - /* FAQ */ +/* FAQ */ - :root { - --faq-spacing: var(--xs3); - } +:root { + --faq-spacing: var(--xs3); +} - /* Field */ +/* Field */ - :root { - --field-spacing: var(--xs1); - --field-hint-color: light-dark(var(--base-400), var(--base-500)); - --field-error-color: light-dark(var(--danger-500), var(--danger-300)); - /*Field's hint/error position. Use `static` to reflow under, use `absolute` +:root { + --field-spacing: var(--xs1); + --field-hint-color: light-dark(var(--base-400), var(--base-500)); + --field-error-color: light-dark(var(--danger-500), var(--danger-300)); + /*Field's hint/error position. Use `static` to reflow under, use `absolute` (and leave enough space below) if you don't want any shift on errors */ - --field-message-position: static; - } + --field-message-position: static; +} - /* FeatureItem */ - - :root { - --featureItem-icon-box-size: var(--lg3); - --featureItem-icon-size: var(--sm3); - --featureItem-icon-color: light-dark( - var(--primary-600), - var(--primary-300) - ); - --featureItem-icon-background-color: light-dark( - var(--primary-100), - var(--primary-900) - ); - --featureItem-icon-border-radius: var(--radius-lg); - } +/* FeatureItem */ + +:root { + --featureItem-icon-box-size: var(--lg3); + --featureItem-icon-size: var(--sm3); + --featureItem-icon-color: light-dark(var(--primary-600), var(--primary-300)); + --featureItem-icon-background-color: light-dark( + var(--primary-100), + var(--primary-900) + ); + --featureItem-icon-border-radius: var(--radius-lg); +} - /* Footer */ +/* Footer */ - :root { - --footer-background-color: light-dark(var(--primary-950), var(--base-950)); - --footer-text-color: light-dark(var(--base-0), var(--base-200)); - --footer-border-width: var(--border-md); - --footer-border-color: light-dark(transparent, var(--base-700)); - --footer-link-color: light-dark(var(--base-0), var(--base-200)); - --footer-link-color-hover: light-dark(var(--primary-200), var(--base-0)); - } +:root { + --footer-background-color: light-dark(var(--primary-950), var(--base-950)); + --footer-text-color: light-dark(var(--base-0), var(--base-200)); + --footer-border-width: var(--border-md); + --footer-border-color: light-dark(transparent, var(--base-700)); + --footer-link-color: light-dark(var(--base-0), var(--base-200)); + --footer-link-color-hover: light-dark(var(--primary-200), var(--base-0)); +} + +/* Header */ - /* Header */ - - :root { - --header-height: var(--xl1); - --header-padding: var(--sm1); - @media (--md) { - --header-height: var(--xl2); - --header-padding: var(--sm3); - } - --header-background-color: light-dark(var(--base-0), var(--base-950)); - - /* The mobile menu is an always-dark by design */ - --header-menu-background-color: var(--base-950); - --header-menu-color: var(--base-0); - --header-menu-color-current: var(--primary-400); - --header-menu-secondary-color: var(--base-300); - --header-menu-border-color: var(--base-500); +:root { + --header-height: var(--xl1); + --header-padding: var(--sm1); + @media (--md) { + --header-height: var(--xl2); + --header-padding: var(--sm3); } + --header-background-color: light-dark(var(--base-0), var(--base-950)); + + /* The mobile menu is an always-dark by design */ + --header-menu-background-color: var(--base-950); + --header-menu-color: var(--base-0); + --header-menu-color-current: var(--primary-400); + --header-menu-secondary-color: var(--base-300); + --header-menu-border-color: var(--base-500); +} - /* Hero */ +/* Hero */ - :root { - --hero-radius: var(--radius-xl); - --hero-content-padding: var(--md3); - --hero-actions-spacing: var(--lg3); - --hero-pagination-dot: var(--sm1); - --hero-pagination-dot-color: var(--base-0); - --hero-pagination-dot-active-color: var(--primary-600); - --hero-pagination-opacity: var(--o-4); - } +:root { + --hero-radius: var(--radius-xl); + --hero-content-padding: var(--md3); + --hero-actions-spacing: var(--lg3); + --hero-pagination-dot: var(--sm1); + --hero-pagination-dot-color: var(--base-0); + --hero-pagination-dot-active-color: var(--primary-600); + --hero-pagination-opacity: var(--o-4); +} - /* Pagination */ - - :root { - --pagination-size: var(--md3); - --pagination-border-radius: var(--radius-md); - --pagination-color: var(--text-color); - --pagination-color-current: var(--base-0); - --pagination-background-color-current: light-dark( - var(--primary-600), - var(--primary-500) - ); - --pagination-background-color-hover: light-dark( - var(--base-100), - var(--base-800) - ); - } +/* Pagination */ + +:root { + --pagination-size: var(--md3); + --pagination-border-radius: var(--radius-md); + --pagination-color: var(--text-color); + --pagination-color-current: var(--base-0); + --pagination-background-color-current: light-dark( + var(--primary-600), + var(--primary-500) + ); + --pagination-background-color-hover: light-dark( + var(--base-100), + var(--base-800) + ); +} - /* PrevNext */ +/* PrevNext */ - :root { - --prevNext-border-color: var(--ui-border-color); - --prevNext-border-radius: var(--radius-lg); - --prevNext-border-color-hover: var(--link-color); - --prevNext-label-color: light-dark(var(--base-400), var(--base-500)); - } +:root { + --prevNext-border-color: var(--ui-border-color); + --prevNext-border-radius: var(--radius-lg); + --prevNext-border-color-hover: var(--link-color); + --prevNext-label-color: light-dark(var(--base-400), var(--base-500)); +} - /* Notice */ +/* Notice */ - :root { - --notice-spacing: var(--sm1); - --notice-text-color: light-dark(var(--base-950), var(--base-0)); - --notice-background-color: light-dark(var(--base-50), var(--base-800)); - --notice-border-color: light-dark(var(--base-200), var(--base-500)); - --notice-border-width: var(--border-sm); - --notice-border-radius: var(--radius-lg); - } +:root { + --notice-spacing: var(--sm1); + --notice-text-color: light-dark(var(--base-950), var(--base-0)); + --notice-background-color: light-dark(var(--base-50), var(--base-800)); + --notice-border-color: light-dark(var(--base-200), var(--base-500)); + --notice-border-width: var(--border-sm); + --notice-border-radius: var(--radius-lg); +} - /* Pricing */ - - :root { - --pricingCard-highlight-border-color: light-dark( - var(--primary-600), - var(--primary-400) - ); - --pricingCard-check-color: light-dark( - var(--success-500), - var(--success-400) - ); - } +/* Pricing */ - /* Read Progress Bar */ +:root { + --pricingCard-highlight-border-color: light-dark( + var(--primary-600), + var(--primary-400) + ); + --pricingCard-check-color: light-dark(var(--success-500), var(--success-400)); +} - :root { - --readProgressBar-height: var(--xs1); - --readProgressBar-color: linear-gradient( - 90deg, - var(--primary-600) 0%, - var(--primary-400) 100% - ); - } +/* Read Progress Bar */ - /* Section */ - - :root { - --section-spacing: var(--xl3); - --section-header-spacing: var(--lg3); - --section-eyebrow-color: light-dark(var(--primary-600), var(--primary-400)); - --section-lede-color: light-dark(var(--base-500), var(--base-400)); - --section-filled-background-color: light-dark( - var(--base-50), - var(--base-900) - ); - --section-primary-background-color: light-dark( - var(--primary-600), - var(--primary-900) - ); - --section-primary-text-color: var(--base-0); - --section-primary-link-color: var(--primary-100); - --section-primary-link-color-hover: var(--base-0); - --section-primary-eyebrow-color: var(--primary-200); - --section-primary-lede-color: var(--primary-100); - } +:root { + --readProgressBar-height: var(--xs1); + --readProgressBar-color: linear-gradient( + 90deg, + var(--primary-600) 0%, + var(--primary-400) 100% + ); +} - /* Testimonial */ +/* Section */ + +:root { + --section-spacing: var(--xl3); + --section-header-spacing: var(--lg3); + --section-eyebrow-color: light-dark(var(--primary-600), var(--primary-400)); + --section-lede-color: light-dark(var(--base-500), var(--base-400)); + --section-filled-background-color: light-dark( + var(--base-50), + var(--base-900) + ); + --section-primary-background-color: light-dark( + var(--primary-600), + var(--primary-900) + ); + --section-primary-text-color: var(--base-0); + --section-primary-link-color: var(--primary-100); + --section-primary-link-color-hover: var(--base-0); + --section-primary-eyebrow-color: var(--primary-200); + --section-primary-lede-color: var(--primary-100); +} - :root { - --testimonial-role-color: light-dark(var(--base-400), var(--base-500)); - } +/* Testimonial */ - /* Tags */ +:root { + --testimonial-role-color: light-dark(var(--base-400), var(--base-500)); +} - :root { - --tags-padding: var(--xs2); - --tags-font-size: var(--text-sm); - --tags-color: light-dark(var(--base-500), var(--base-400)); - --tags-background-color: light-dark(var(--base-100), var(--base-800)); - --tags-background-color-hover: light-dark(var(--base-200), var(--base-950)); - --tags-radius: var(--radius-md); - } +/* Tags */ - /* Tiles has no tokens here: its column count is set by container queries in +:root { + --tags-padding: var(--xs2); + --tags-font-size: var(--text-sm); + --tags-color: light-dark(var(--base-500), var(--base-400)); + --tags-background-color: light-dark(var(--base-100), var(--base-800)); + --tags-background-color-hover: light-dark(var(--base-200), var(--base-950)); + --tags-radius: var(--radius-md); +} + +/* Tiles has no tokens here: its column count is set by container queries in component.tiles.css since custom properties don't work inside @container. */ - /* TOC */ +/* TOC */ - :root { - --toc-color: var(--link-color); - --toc-color-hover: var(--link-color-hover); - --toc-spacing: var(--xs1); - --toc-indentation: var(--xs3); - --toc-icon-size: var(--sm1); - } +:root { + --toc-color: var(--link-color); + --toc-color-hover: var(--link-color-hover); + --toc-spacing: var(--xs1); + --toc-indentation: var(--xs3); + --toc-icon-size: var(--sm1); } diff --git a/src/tools/build-css.mjs b/src/tools/build-css.mjs index ea06f76f..6e515197 100644 --- a/src/tools/build-css.mjs +++ b/src/tools/build-css.mjs @@ -135,20 +135,24 @@ for (const file of files) { const css = await readFile(join(SRC, file), "utf8"); // Prepend the build-time settings so @custom-media/@mixin resolve, then // wrap the file's own rules in its layer. preset-env removes the - // @custom-media definitions from the output. Theme files self-layer, so - // they're not re-wrapped. In the index the default theme import is - // active (the framework doesn't paint without a theme); other theme - // entries are commented: swap which one is active to change skins. - const selfLayered = layer === "theme"; + // @custom-media definitions from the output. Standalone theme files + // (starter, skins) self-layer, so they're not re-wrapped; the default + // theme's parts are plain CSS layered by their entry in source, so the + // dist copies get wrapped here so a lone still slots correctly. + // In the index the default theme import is active (the framework + // doesn't paint without a theme); other theme entries are commented: + // swap which one is active to change skins. const importsOnly = file === "theme.default.css"; + const isDefaultPart = file.startsWith("theme.default.") && !importsOnly; + const selfLayered = layer === "theme" && !isDefaultPart; + const wrapLayer = isDefaultPart ? "theme.defaults" : layer; const wrapped = importsOnly ? css : selfLayered ? `${settingsPrelude}\n${css}` - : `${settingsPrelude}\n@layer ${layer} {\n${css}\n}`; + : `${settingsPrelude}\n@layer ${wrapLayer} {\n${css}\n}`; const processed = await process(wrapped, join(SRC, file)); await writeFile(join(OUT, "css", file), BANNER + processed.trim() + "\n"); - const isDefaultPart = file.startsWith("theme.default.") && !importsOnly; indexImports.push( importsOnly ? `@import url(./${file}); /* the default theme */` From b9196f808f4d949f209debcc46c7ed079c1f91d9 Mon Sep 17 00:00:00 2001 From: Yann Date: Fri, 14 Aug 2026 17:53:13 -0700 Subject: [PATCH 08/37] Rename theme sublayers: theme.default and theme.user theme.defaults becomes theme.default, so the layer name matches the theme.default.* file prefix exactly instead of differing by a plural. theme.overrides becomes theme.user: overrides was redundant (every later layer overrides earlier ones); user names whose slot it is and pairs naturally with default. (default is safe as a layer name: the reservation applies to custom-ident contexts, and layer names take plain idents; verified parsing in-browser.) Swept across the framework, build script, marketing template pin, docs, blog note, and the AI block + skill mirror. Co-Authored-By: Claude Fable 5 --- CLAUDE.md | 2 +- agents/css.md | 26 +++++++++++----------- dist/css/mcss.css | 2 +- dist/css/theme.default.css | 10 ++++----- dist/css/theme.default.tokens.css | 2 +- dist/css/theme.default.ui.css | 2 +- dist/css/theme.starter.css | 8 +++---- dist/css/theme.wireframe.css | 8 +++---- dist/mcss.css | 14 ++++++------ dist/mcss.min.css | 2 +- src/content/blog/mcss-structure.md | 4 ++-- src/content/docs/ai.mdx | 8 +++---- src/content/docs/start.mdx | 28 ++++++++++++------------ src/content/docs/template.mdx | 14 ++++++------ src/content/docs/themes.mdx | 4 ++-- src/pages/templates/marketing.astro | 2 +- src/styles/_global.css | 2 +- src/styles/framework/mcss.css | 4 ++-- src/styles/framework/theme.default.css | 10 ++++----- src/styles/framework/theme.starter.css | 8 +++---- src/styles/framework/theme.wireframe.css | 8 +++---- src/tools/build-css.mjs | 4 ++-- 22 files changed, 86 insertions(+), 86 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index 6dc01b6f..a3890473 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -25,7 +25,7 @@ mCSS is a CSS framework (ITCSS-based) paired with an Astro documentation site, c ## CSS cascade layers are load-bearing -The framework uses native `@layer`; the layer name (declared in `src/styles/framework/mcss.css`) decides priority, and unlayered site CSS beats every layer. Import new framework files with `layer()`, except standalone `theme.*.css` files (starter, skins): those self-layer via `@layer theme.overrides` and are activated from the consumer entry (`_global.css`), never imported by `mcss.css`. The default theme's parts are plain CSS layered by their entry (`theme.default.css`, with `layer(theme.defaults)`). Every design value lives in the default theme (`theme.default.css`); the framework does not paint without it. Never re-enable preset-env's `cascade-layers` polyfill in `postcss.config.cjs`. Always consult [agents/css.md](agents/css.md) before adding or moving CSS files. +The framework uses native `@layer`; the layer name (declared in `src/styles/framework/mcss.css`) decides priority, and unlayered site CSS beats every layer. Import new framework files with `layer()`, except standalone `theme.*.css` files (starter, skins): those self-layer via `@layer theme.user` and are activated from the consumer entry (`_global.css`), never imported by `mcss.css`. The default theme's parts are plain CSS layered by their entry (`theme.default.css`, with `layer(theme.default)`). Every design value lives in the default theme (`theme.default.css`); the framework does not paint without it. Never re-enable preset-env's `cascade-layers` polyfill in `postcss.config.cjs`. Always consult [agents/css.md](agents/css.md) before adding or moving CSS files. ## Detailed reference docs diff --git a/agents/css.md b/agents/css.md index 3da3d45e..4892f8d3 100644 --- a/agents/css.md +++ b/agents/css.md @@ -9,25 +9,25 @@ mCSS uses **native CSS cascade layers** (`@layer`) on top of an ITCSS-inspired f ## Cascade rules (load-bearing) 1. Framework layers, in priority order (later wins): - `base, elements, global, components, theme.defaults, theme.overrides, helpers` - The order runs **from default to deliberate**: `base` through `components` are the framework's structure, `theme.defaults` holds the default theme's design values, `theme.overrides` holds the consumer's deliberate deviations, helpers are the last word. (Not "generic to specific": a theme is broad in reach but late in intent, and intent decides cascade order.) + `base, elements, global, components, theme.default, theme.user, helpers` + The order runs **from default to deliberate**: `base` through `components` are the framework's structure, `theme.default` holds the default theme's design values, `theme.user` holds the consumer's deliberate deviations, helpers are the last word. (Not "generic to specific": a theme is broad in reach but late in intent, and intent decides cascade order.) 2. **Unlayered CSS beats every layer for normal declarations.** That's the consumer guarantee ("your CSS wins") and why site CSS is unlayered. -3. **Every design value lives in the default theme** (`theme.default.css` entry importing `theme.default.tokens.css` + `theme.default.ui.css` with `layer(theme.defaults)`; the parts are plain CSS, the entry assigns their layer, and the dist build pre-wraps the dist copies for lone `` use). It is **never imported by `mcss.css`**; the consumer entry activates it right after `mcss.css` (see `_global.css`), and the framework does not paint without it. A consumer theme (self-layered into `theme.overrides`, see `theme.starter.css`) beats the default regardless of import order; a full skin like `theme.wireframe.css` is an entry that composes `theme.default.css` and overrides on top. Activate exactly one theme entry. Unlayered consumer CSS still beats all themes. +3. **Every design value lives in the default theme** (`theme.default.css` entry importing `theme.default.tokens.css` + `theme.default.ui.css` with `layer(theme.default)`; the parts are plain CSS, the entry assigns their layer, and the dist build pre-wraps the dist copies for lone `` use). It is **never imported by `mcss.css`**; the consumer entry activates it right after `mcss.css` (see `_global.css`), and the framework does not paint without it. A consumer theme (self-layered into `theme.user`, see `theme.starter.css`) beats the default regardless of import order; a full skin like `theme.wireframe.css` is an entry that composes `theme.default.css` and overrides on top. Activate exactly one theme entry. Unlayered consumer CSS still beats all themes. 4. **Helpers are the exception: every helper declaration carries `!important`.** Important layered declarations beat unlayered CSS (the cascade inverts for important), so helpers win over site and consumer CSS too. They're element-level overrides, like inline styling. For important declarations layer order also inverts (earlier layer wins), which is why the reduced-motion block in `base.reset.css` still beats helpers. 5. `!important` is REQUIRED in every helper declaration and banned everywhere else in the framework, except the reduced-motion block in `base.reset.css` and third-party override files (see `site/external.astro.css`). `help.colors.css` and `help.spacing.css` get it from their generators. 6. `postcss.config.cjs` disables preset-env's `cascade-layers` polyfill. **Never remove that option** — the polyfill strips every `@layer` rule and silently replaces the cascade with specificity hacks. The browser floor is set in `.browserslistrc` (`defaults and supports css-cascade-layers`). ## Layer table -| Layer | Prefix | Purpose | -| --------------- | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| base | `base.*` | Reset only (`base.reset.css`) | -| elements | `elements.*` | Bare HTML element styles (text, form, media) | -| global | `global.*` | Structural patterns (a11y, grid, layout, prose, wrap) | -| components | `component.*` | Library components (card, hero, notice, …), including CSS-only single-class ones (badge, button, toggle); imported by `mcss.components.css`, never by `mcss.css` | -| theme.defaults | `theme.default.*` | The default theme: scale tokens (`theme.default.tokens.css`) and ui tokens (`theme.default.ui.css`), imported by the `theme.default.css` entry, activated by the consumer entry (never by `mcss.css`); the framework does not paint without it | -| theme.overrides | `theme.*` | Your theme and swappable skins: token overrides + style rules, self-layered via `@layer theme.overrides`; a full skin (`theme.wireframe.css`) is an entry composing `theme.default.css` and overriding on top | -| helpers | `help.*` | Utility overrides (colors, spacing, typography), all `!important`: beats everything, including unlayered CSS | +| Layer | Prefix | Purpose | +| ------------- | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| base | `base.*` | Reset only (`base.reset.css`) | +| elements | `elements.*` | Bare HTML element styles (text, form, media) | +| global | `global.*` | Structural patterns (a11y, grid, layout, prose, wrap) | +| components | `component.*` | Library components (card, hero, notice, …), including CSS-only single-class ones (badge, button, toggle); imported by `mcss.components.css`, never by `mcss.css` | +| theme.default | `theme.default.*` | The default theme: scale tokens (`theme.default.tokens.css`) and ui tokens (`theme.default.ui.css`), imported by the `theme.default.css` entry, activated by the consumer entry (never by `mcss.css`); the framework does not paint without it | +| theme.user | `theme.*` | Your theme and swappable skins: token overrides + style rules, self-layered via `@layer theme.user`; a full skin (`theme.wireframe.css`) is an entry composing `theme.default.css` and overriding on top | +| helpers | `help.*` | Utility overrides (colors, spacing, typography), all `!important`: beats everything, including unlayered CSS | `settings.media-queries.css` and `settings.mixins.css` are the only remaining `settings.*` files: build-time material (`@custom-media` + mixins), imported unlayered, no runtime output. @@ -87,7 +87,7 @@ Never `transition: all` — it also transitions layout properties, so any late-a - **One block per file.** Every block gets its own file named after it (`.featureItem` lives in `component.featureItem.css`, never inside `component.featureGrid.css`), even for small companion blocks (`component.fieldRow.css`, site `component.webring.css`). - Framework file: create `src/styles/framework/..css` and add `@import url(./) layer();` in the matching block of `framework/mcss.css`, EXCEPT `component.*` files: those import in `framework/mcss.components.css` (the component library's own entry; `mcss.css` only declares the `components` slot). -- Theme file: copy `src/styles/framework/theme.starter.css` to `theme..css` (its content self-layers via `@layer theme.overrides { … }`); do NOT import it in `mcss.css` (the consumer entry activates it after `theme.default.css`). For a full swappable skin, write an entry that imports `theme.default.css` and overrides on top, like `theme.wireframe.css`. The dist index lists non-default themes commented out. +- Theme file: copy `src/styles/framework/theme.starter.css` to `theme..css` (its content self-layers via `@layer theme.user { … }`); do NOT import it in `mcss.css` (the consumer entry activates it after `theme.default.css`). For a full swappable skin, write an entry that imports `theme.default.css` and overrides on top, like `theme.wireframe.css`. The dist index lists non-default themes commented out. - Site file: create `src/styles/site/..css` and add a plain `@import` in `_global.css` (unlayered). - Framework CSS must never reference site-only selectors (e.g. `.expressive-code`); the site file mirrors any shared pattern itself. diff --git a/dist/css/mcss.css b/dist/css/mcss.css index 1efb00c2..8a287a01 100644 --- a/dist/css/mcss.css +++ b/dist/css/mcss.css @@ -1,5 +1,5 @@ /*! mCSS v1.3.0 | MIT | https://mcss.dev */ -@layer base, elements, global, components, theme.defaults, theme.overrides, helpers; +@layer base, elements, global, components, theme.default, theme.user, helpers; @import url(./base.reset.css) layer(base); @import url(./component.avatar.css) layer(components); @import url(./component.badge.css) layer(components); diff --git a/dist/css/theme.default.css b/dist/css/theme.default.css index 0aa54588..8f82a982 100644 --- a/dist/css/theme.default.css +++ b/dist/css/theme.default.css @@ -14,8 +14,8 @@ Never edit the default theme. Your palette, type, and overrides go in a theme of your own, imported after this one (copy theme.starter.css). The - parts here land in the `theme.defaults` layer and your theme lands in - `theme.overrides`, so yours wins no matter the import order. A full + parts here land in the `theme.default` layer and your theme lands in + `theme.user`, so yours wins no matter the import order. A full replacement skin works the same way: theme.wireframe.css composes this entry and overrides on top. */ @@ -23,11 +23,11 @@ /* Pin the layer order before anything else in this file: priority is set by first declaration, so a theme loaded before mcss.css still slots correctly. */ -@layer base, elements, global, components, theme.defaults, theme.overrides, helpers; +@layer base, elements, global, components, theme.default, theme.user, helpers; /* The parts are plain CSS; this entry assigns their layer, the same way mcss.css layers the structural files. (Only standalone theme files self-layer; in dist/css the parts are pre-wrapped so a lone still works.) */ -@import url(./theme.default.tokens.css) layer(theme.defaults); -@import url(./theme.default.ui.css) layer(theme.defaults); +@import url(./theme.default.tokens.css) layer(theme.default); +@import url(./theme.default.ui.css) layer(theme.default); diff --git a/dist/css/theme.default.tokens.css b/dist/css/theme.default.tokens.css index 393dccb4..930cfde6 100644 --- a/dist/css/theme.default.tokens.css +++ b/dist/css/theme.default.tokens.css @@ -24,7 +24,7 @@ xxl: 1920px /* truncate single line of text and adds … */ -@layer theme.defaults { +@layer theme.default { /* DEFAULT THEME: TOKENS */ /* diff --git a/dist/css/theme.default.ui.css b/dist/css/theme.default.ui.css index 6eb424d3..09bf7ae4 100644 --- a/dist/css/theme.default.ui.css +++ b/dist/css/theme.default.ui.css @@ -24,7 +24,7 @@ xxl: 1920px /* truncate single line of text and adds … */ -@layer theme.defaults { +@layer theme.default { /* DEFAULT THEME: UI */ /* diff --git a/dist/css/theme.starter.css b/dist/css/theme.starter.css index 40874785..9ab84606 100644 --- a/dist/css/theme.starter.css +++ b/dist/css/theme.starter.css @@ -36,8 +36,8 @@ xxl: 1920px @import url(./theme.acme.css); Everything this file doesn't mention falls back to the default theme. - It self-layers into `theme.overrides`, which beats the default theme's - `theme.defaults` no matter the import order. Never edit the default + It self-layers into `theme.user`, which beats the default theme's + `theme.default` no matter the import order. Never edit the default theme files: your palette, type, and overrides all live here, which is what keeps framework updates painless. @@ -58,9 +58,9 @@ xxl: 1920px /* Pin the layer order before declaring into it: priority is set by first declaration, so this file slots correctly even if it loads before mcss.css. */ -@layer base, elements, global, components, theme.defaults, theme.overrides, helpers; +@layer base, elements, global, components, theme.default, theme.user, helpers; -@layer theme.overrides { +@layer theme.user { :root { /* A new palette usually gets you 80% of the way: */ /* --base-0: #fff; */ diff --git a/dist/css/theme.wireframe.css b/dist/css/theme.wireframe.css index 005432a8..0fba29a3 100644 --- a/dist/css/theme.wireframe.css +++ b/dist/css/theme.wireframe.css @@ -34,15 +34,15 @@ xxl: 1920px A full skin is an entry that composes the default theme and overrides on top: the import below brings in every default, and this file's own - rules land in `theme.overrides`, which wins over the default's - `theme.defaults`. Activate exactly one theme entry from your own entry + rules land in `theme.user`, which wins over the default's + `theme.default`. Activate exactly one theme entry from your own entry point (see theme.default.css). */ /* Pin the layer order before anything else in this file: priority is set by first declaration, so this skin slots correctly even if it loads before mcss.css. */ -@layer base, elements, global, components, theme.defaults, theme.overrides, helpers; +@layer base, elements, global, components, theme.default, theme.user, helpers; @import url(./theme.default.css); @@ -56,7 +56,7 @@ xxl: 1920px initial-value: 1; } -@layer theme.overrides { +@layer theme.user { :root { /* COLORS: everything goes grayscale, including the primary scale */ diff --git a/dist/mcss.css b/dist/mcss.css index 3bfb39f3..0a88423f 100644 --- a/dist/mcss.css +++ b/dist/mcss.css @@ -1,7 +1,7 @@ /*! mCSS v1.3.0 | MIT | https://mcss.dev */ -@layer base, elements, global, components, theme.defaults, theme.overrides, helpers; -@layer base, elements, global, components, theme.defaults, theme.overrides, helpers; +@layer base, elements, global, components, theme.default, theme.user, helpers; +@layer base, elements, global, components, theme.default, theme.user, helpers; /* mCSS framework entry point. @@ -48,7 +48,7 @@ xxl: 1920px Without it, every token is unset and the page renders half-styled. Your own theme (copy theme.starter.css) imports after that and lands in - `theme.overrides`, so it beats the default's `theme.defaults` no matter + `theme.user`, so it beats the default's `theme.default` no matter the import order. Theme files self-layer, so no layer() annotation is needed on their imports. See _global.css for this site's entry. */ @@ -4588,8 +4588,8 @@ body.dev { Never edit the default theme. Your palette, type, and overrides go in a theme of your own, imported after this one (copy theme.starter.css). The - parts here land in the `theme.defaults` layer and your theme lands in - `theme.overrides`, so yours wins no matter the import order. A full + parts here land in the `theme.default` layer and your theme lands in + `theme.user`, so yours wins no matter the import order. A full replacement skin works the same way: theme.wireframe.css composes this entry and overrides on top. */ @@ -4603,7 +4603,7 @@ body.dev { self-layer; in dist/css the parts are pre-wrapped so a lone still works.) */ -@layer theme.defaults{ +@layer theme.default{ /* DEFAULT THEME: TOKENS */ @@ -4858,7 +4858,7 @@ body.dev { } } -@layer theme.defaults{ +@layer theme.default{ /* DEFAULT THEME: UI */ diff --git a/dist/mcss.min.css b/dist/mcss.min.css index 99d76fa2..924a6f57 100644 --- a/dist/mcss.min.css +++ b/dist/mcss.min.css @@ -1,2 +1,2 @@ /*! mCSS v1.3.0 | MIT | https://mcss.dev */ -@layer base,elements,global,components,theme.defaults,theme.overrides,helpers;@layer base,elements,global,components,theme.defaults,theme.overrides,helpers;@layer base{*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion:reduce){*,:before,:after{animation-delay:-1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}}:where(:not(dialog)){margin:0}html,body{min-height:100%}}@layer elements{body{line-sizing:normal;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;background-color:var(--body-background-color);color:var(--text-color);font-family:var(--text);line-height:var(--body-line-height);&:has(.body-is-locked){overflow:hidden}}}@layer elements{::selection{color:var(--selection-color);background-color:var(--selection-background-color)}:where(a,u,ins,abbr){text-underline-offset:2px}a{font-weight:var(--link-font-weight);color:var(--link-color);&:where(:hover){color:var(--link-color-hover);-webkit-text-decoration:none;text-decoration:none}}address{width:max-content;max-width:100%;padding:var(--sm1) var(--sm3);font-style:normal;background-color:light-dark(var(--base-50),var(--base-900));border:var(--xs2) solid transparent;border-image:8 repeating-linear-gradient(-45deg,var(--no-500) 0,var(--no-500) var(--xs2),transparent 0,transparent calc(var(--xs2) * 2),var(--primary-500) 0,var(--primary-500) calc(var(--xs2) * 3),transparent 0,transparent calc(var(--xs2) * 4))}abbr{position:relative;cursor:help;&:after{position:relative;top:calc(var(--xs1) * -1);width:var(--sm1);height:var(--sm1);display:inline-block;content:"";background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='circle-help'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M9.09%209a3%203%200%200%201%205.83%201c0%202-3%203-3%203'/%3E%3Cpath%20d='M12%2017h.01'/%3E%3C/svg%3E");background-size:contain}&:hover:before{width:max-content;max-width:400px;position:absolute;left:50%;padding:var(--xs1) var(--xs3);content:attr(title);color:var(--base-0);background-color:var(--base-900);opacity:var(--o-4);border-radius:var(--radius-sm);transform:translate(-50%,-2em)}}blockquote{position:relative;margin-bottom:var(--prose-spacing);padding-block:var(--blockquote-padding-block);padding-inline:var(--blockquote-padding-inline);font-style:italic;background-color:var(--blockquote-background-color);border-radius:var(--blockquote-border-radius);&:before{content:"";position:absolute;top:0;inset-inline-start:0;width:var(--blockquote-accent-width);height:100%;border-start-start-radius:var(--blockquote-border-radius);border-end-start-radius:var(--blockquote-border-radius);background:var(--blockquote-accent-color)}p{&:first-child:before{content:open-quote}&:last-child{margin-bottom:0;&:after{content:close-quote}}}}cite{font-style:italic}code,var,kbd{font-family:var(--mono);font-size:.9em;font-style:normal;color:var(--text-code-muted-color)}:is(code,var,kbd):not(h1 *,h2 *,h3 *,h4 *,h5 *,h6 *,pre *){padding:.15em .3em;color:var(--text-code-color);background-color:var(--text-code-background-color);border-radius:var(--radius-sm)}dt{font-weight:var(--bold)}dd+dt{margin-top:.5em}del{text-decoration-color:var(--danger-500);text-decoration-style:wavy}h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{overflow-wrap:break-word;text-wrap:balance}h1,.h1,h2,.h2,h3,.h3,h4,.h4{font-family:var(--heading-font);font-weight:var(--heading-weight);letter-spacing:var(--heading-letter-spacing)}h1,.h1{margin-bottom:var(--heading-spacing-h1);font-size:var(--heading-font-size-h1);line-height:var(--heading-line-height-h1)}h2,.h2{margin-bottom:var(--heading-spacing-h2);font-size:var(--heading-font-size-h2);line-height:var(--heading-line-height-h2)}h3,.h3{margin-bottom:var(--heading-spacing-h3);font-size:var(--heading-font-size-h3);line-height:var(--heading-line-height-h3)}h4,.h4{margin-bottom:var(--heading-spacing-h4);font-size:var(--heading-font-size-h4);line-height:var(--heading-line-height-h4)}h5,.h5{margin-bottom:var(--heading-spacing-h5);font-size:var(--heading-font-size-h5);line-height:var(--heading-line-height-h5)}h6,.h6{margin-bottom:var(--heading-spacing-h6);font-size:var(--heading-font-size-h6);line-height:var(--heading-line-height-h6)}:where(h1,h2,h3):has(+:is(h2,h3,h4)){margin-bottom:var(--heading-spacing-consecutive)}hr{display:flex;justify-content:center;align-items:center;height:0;border-style:solid;border-width:var(--border-sm) 0 0;color:var(--ui-border-color);overflow:visible;&:after{content:var(--hr-content);padding:0 var(--xs1);line-height:1;letter-spacing:var(--tracking-sm);background-color:var(--body-background-color)}}:where(hr):has(+:is(p)){margin-bottom:var(--prose-spacing)}ins{padding:.15em .3em;color:var(--ins-color);background-color:var(--ins-background-color);border-radius:var(--radius-sm);-webkit-text-decoration:none;text-decoration:none;&:before{content:"+ "}}mark{padding:.15em .5em;background:var(--marker-color);border-radius:1em 0}:where(ol,ul){list-style-type:none;padding:0}pre{font-family:var(--mono);font-size:var(--pre-font-size);white-space:pre-wrap;border-radius:var(--pre-border-radius)}q{font-style:italic}s{text-decoration-color:light-dark(var(--base-950),var(--base-50));text-decoration-style:wavy}sub,sup{line-height:1}}@layer elements{:root{quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(af),:not(:lang(af))>:lang(af){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ak),:not(:lang(ak))>:lang(ak){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(asa),:not(:lang(asa))>:lang(asa){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(az),:not(:lang(az))>:lang(az){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(bem),:not(:lang(bem))>:lang(bem){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(bez),:not(:lang(bez))>:lang(bez){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(bn),:not(:lang(bn))>:lang(bn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(brx),:not(:lang(brx))>:lang(brx){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(cgg),:not(:lang(cgg))>:lang(cgg){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(chr),:not(:lang(chr))>:lang(chr){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(cy),:not(:lang(cy))>:lang(cy){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(da),:not(:lang(da))>:lang(da){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(dav),:not(:lang(dav))>:lang(dav){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(dje),:not(:lang(dje))>:lang(dje){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(dz),:not(:lang(dz))>:lang(dz){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ebu),:not(:lang(ebu))>:lang(ebu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ee),:not(:lang(ee))>:lang(ee){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(en),:not(:lang(en))>:lang(en){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(fil),:not(:lang(fil))>:lang(fil){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(fo),:not(:lang(fo))>:lang(fo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ga),:not(:lang(ga))>:lang(ga){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(gd),:not(:lang(gd))>:lang(gd){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(gl),:not(:lang(gl))>:lang(gl){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(gu),:not(:lang(gu))>:lang(gu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(guz),:not(:lang(guz))>:lang(guz){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ha),:not(:lang(ha))>:lang(ha){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(hi),:not(:lang(hi))>:lang(hi){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(id),:not(:lang(id))>:lang(id){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ig),:not(:lang(ig))>:lang(ig){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(jmc),:not(:lang(jmc))>:lang(jmc){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kam),:not(:lang(kam))>:lang(kam){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kde),:not(:lang(kde))>:lang(kde){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kea),:not(:lang(kea))>:lang(kea){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(khq),:not(:lang(khq))>:lang(khq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ki),:not(:lang(ki))>:lang(ki){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kln),:not(:lang(kln))>:lang(kln){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(km),:not(:lang(km))>:lang(km){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kn),:not(:lang(kn))>:lang(kn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ko),:not(:lang(ko))>:lang(ko){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ksb),:not(:lang(ksb))>:lang(ksb){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lg),:not(:lang(lg))>:lang(lg){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ln),:not(:lang(ln))>:lang(ln){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lo),:not(:lang(lo))>:lang(lo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lrc),:not(:lang(lrc))>:lang(lrc){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lu),:not(:lang(lu))>:lang(lu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(luo),:not(:lang(luo))>:lang(luo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lv),:not(:lang(lv))>:lang(lv){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mas),:not(:lang(mas))>:lang(mas){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mer),:not(:lang(mer))>:lang(mer){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mfe),:not(:lang(mfe))>:lang(mfe){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mgo),:not(:lang(mgo))>:lang(mgo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ml),:not(:lang(ml))>:lang(ml){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mn),:not(:lang(mn))>:lang(mn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mr),:not(:lang(mr))>:lang(mr){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ms),:not(:lang(ms))>:lang(ms){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mt),:not(:lang(mt))>:lang(mt){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(my),:not(:lang(my))>:lang(my){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(naq),:not(:lang(naq))>:lang(naq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(nd),:not(:lang(nd))>:lang(nd){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ne),:not(:lang(ne))>:lang(ne){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(nus),:not(:lang(nus))>:lang(nus){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(nyn),:not(:lang(nyn))>:lang(nyn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(pa),:not(:lang(pa))>:lang(pa){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(pt),:not(:lang(pt))>:lang(pt){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(rof),:not(:lang(rof))>:lang(rof){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(rwk),:not(:lang(rwk))>:lang(rwk){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(saq),:not(:lang(saq))>:lang(saq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(sbp),:not(:lang(sbp))>:lang(sbp){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(seh),:not(:lang(seh))>:lang(seh){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ses),:not(:lang(ses))>:lang(ses){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(si),:not(:lang(si))>:lang(si){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(so),:not(:lang(so))>:lang(so){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(sw),:not(:lang(sw))>:lang(sw){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ta),:not(:lang(ta))>:lang(ta){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(te),:not(:lang(te))>:lang(te){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(teo),:not(:lang(teo))>:lang(teo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(th),:not(:lang(th))>:lang(th){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(to),:not(:lang(to))>:lang(to){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(tr),:not(:lang(tr))>:lang(tr){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(twq),:not(:lang(twq))>:lang(twq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(tzm),:not(:lang(tzm))>:lang(tzm){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(uz-Cyrl),:not(:lang(uz-Cyrl))>:lang(uz-Cyrl){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vai),:not(:lang(vai))>:lang(vai){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vai-Latn),:not(:lang(vai-Latn))>:lang(vai-Latn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vi),:not(:lang(vi))>:lang(vi){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vun),:not(:lang(vun))>:lang(vun){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(xog),:not(:lang(xog))>:lang(xog){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(yo),:not(:lang(yo))>:lang(yo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(yue-Hans),:not(:lang(yue-Hans))>:lang(yue-Hans){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(zh),:not(:lang(zh))>:lang(zh){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(zu),:not(:lang(zu))>:lang(zu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(uz),:not(:lang(uz))>:lang(uz){quotes:"\201c" "\201d" "\2019" "\2018"}:root:lang(eu),:not(:lang(eu))>:lang(eu){quotes:"\201c" "\201d" "\201c" "\201d"}:root:lang(tk),:not(:lang(tk))>:lang(tk){quotes:"\201c" "\201d" "\201c" "\201d"}:root:lang(ar),:not(:lang(ar))>:lang(ar){quotes:"\201d" "\201c" "\2019" "\2018"}:root:lang(ur),:not(:lang(ur))>:lang(ur){quotes:"\201d" "\201c" "\2019" "\2018"}:root:lang(fi),:not(:lang(fi))>:lang(fi){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(he),:not(:lang(he))>:lang(he){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(lag),:not(:lang(lag))>:lang(lag){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(rn),:not(:lang(rn))>:lang(rn){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(sn),:not(:lang(sn))>:lang(sn){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(sv),:not(:lang(sv))>:lang(sv){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(sr),:not(:lang(sr))>:lang(sr){quotes:"\201e" "\201c" "\2018" "\2018"}:root:lang(sr-Latn),:not(:lang(sr-Latn))>:lang(sr-Latn){quotes:"\201e" "\201c" "\2018" "\2018"}:root:lang(bg),:not(:lang(bg))>:lang(bg){quotes:"\201e" "\201c" "\201e" "\201c"}:root:lang(lt),:not(:lang(lt))>:lang(lt){quotes:"\201e" "\201c" "\201e" "\201c"}:root:lang(bs-Cyrl),:not(:lang(bs-Cyrl))>:lang(bs-Cyrl){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(cs),:not(:lang(cs))>:lang(cs){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(de),:not(:lang(de))>:lang(de){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(dsb),:not(:lang(dsb))>:lang(dsb){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(et),:not(:lang(et))>:lang(et){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(hr),:not(:lang(hr))>:lang(hr){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(hsb),:not(:lang(hsb))>:lang(hsb){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(is),:not(:lang(is))>:lang(is){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(lb),:not(:lang(lb))>:lang(lb){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(luy),:not(:lang(luy))>:lang(luy){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(mk),:not(:lang(mk))>:lang(mk){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(sk),:not(:lang(sk))>:lang(sk){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(sl),:not(:lang(sl))>:lang(sl){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(ka),:not(:lang(ka))>:lang(ka){quotes:"\201e" "\201c" "\ab" "\bb"}:root:lang(bs),:not(:lang(bs))>:lang(bs){quotes:"\201e" "\201d" "\2018" "\2019"}:root:lang(agq),:not(:lang(agq))>:lang(agq){quotes:"\201e" "\201d" "\201a" "\2019"}:root:lang(ff),:not(:lang(ff))>:lang(ff){quotes:"\201e" "\201d" "\201a" "\2019"}:root:lang(nmg),:not(:lang(nmg))>:lang(nmg){quotes:"\201e" "\201d" "\ab" "\bb"}:root:lang(ro),:not(:lang(ro))>:lang(ro){quotes:"\201e" "\201d" "\ab" "\bb"}:root:lang(pl),:not(:lang(pl))>:lang(pl){quotes:"\201e" "\201d" "\ab" "\bb"}:root:lang(hu),:not(:lang(hu))>:lang(hu){quotes:"\201e" "\201d" "\bb" "\ab"}:root:lang(nl),:not(:lang(nl))>:lang(nl){quotes:"\2018" "\2019" "\201c" "\201d"}:root:lang(ti-ER),:not(:lang(ti-ER))>:lang(ti-ER){quotes:"\2018" "\2019" "\201c" "\201d"}:root:lang(dua),:not(:lang(dua))>:lang(dua){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(ksf),:not(:lang(ksf))>:lang(ksf){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(rw),:not(:lang(rw))>:lang(rw){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(nn),:not(:lang(nn))>:lang(nn){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(nb),:not(:lang(nb))>:lang(nb){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(ast),:not(:lang(ast))>:lang(ast){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(bm),:not(:lang(bm))>:lang(bm){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(br),:not(:lang(br))>:lang(br){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(ca),:not(:lang(ca))>:lang(ca){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(dyo),:not(:lang(dyo))>:lang(dyo){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(el),:not(:lang(el))>:lang(el){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(es),:not(:lang(es))>:lang(es){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(ewo),:not(:lang(ewo))>:lang(ewo){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(mg),:not(:lang(mg))>:lang(mg){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(mua),:not(:lang(mua))>:lang(mua){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(sg),:not(:lang(sg))>:lang(sg){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(it),:not(:lang(it))>:lang(it){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(kab),:not(:lang(kab))>:lang(kab){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(kk),:not(:lang(kk))>:lang(kk){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(pt-PT),:not(:lang(pt-PT))>:lang(pt-PT){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(nnh),:not(:lang(nnh))>:lang(nnh){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(sq),:not(:lang(sq))>:lang(sq){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(bas),:not(:lang(bas))>:lang(bas){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(be),:not(:lang(be))>:lang(be){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(ky),:not(:lang(ky))>:lang(ky){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(sah),:not(:lang(sah))>:lang(sah){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(ru),:not(:lang(ru))>:lang(ru){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(uk),:not(:lang(uk))>:lang(uk){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(zgh),:not(:lang(zgh))>:lang(zgh){quotes:"\ab" "\bb" "\201e" "\201d"}:root:lang(shi),:not(:lang(shi))>:lang(shi){quotes:"\ab" "\bb" "\201e" "\201d"}:root:lang(shi-Latn),:not(:lang(shi-Latn))>:lang(shi-Latn){quotes:"\ab" "\bb" "\201e" "\201d"}:root:lang(am),:not(:lang(am))>:lang(am){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(az-Cyrl),:not(:lang(az-Cyrl))>:lang(az-Cyrl){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(fa),:not(:lang(fa))>:lang(fa){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(fr-CH),:not(:lang(fr-CH))>:lang(fr-CH){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(gsw),:not(:lang(gsw))>:lang(gsw){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(jgo),:not(:lang(jgo))>:lang(jgo){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(kkj),:not(:lang(kkj))>:lang(kkj){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(mzn),:not(:lang(mzn))>:lang(mzn){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(fr),:not(:lang(fr))>:lang(fr){quotes:"\ab" "\bb" "\ab" "\bb"}:root:lang(hy),:not(:lang(hy))>:lang(hy){quotes:"\ab" "\bb" "\ab" "\bb"}:root:lang(yav),:not(:lang(yav))>:lang(yav){quotes:"\ab" "\bb" "\ab" "\bb"}:root:lang(ja),:not(:lang(ja))>:lang(ja){quotes:"\300c" "\300d" "\300e" "\300f"}:root:lang(yue),:not(:lang(yue))>:lang(yue){quotes:"\300c" "\300d" "\300e" "\300f"}:root:lang(zh-Hant),:not(:lang(zh-Hant))>:lang(zh-Hant){quotes:"\300c" "\300d" "\300e" "\300f"}}@layer elements{audio,canvas,embed,iframe,img,object,picture,svg,video{display:block;vertical-align:middle;max-width:100%}img,svg,video,canvas{height:auto}audio{width:100%;max-width:var(--tera1)}audio:not([controls]){display:none}figcaption{font-style:italic;font-size:var(--text-sm)}figure{&:has(*+figcaption){figcaption{margin-top:var(--figcaption-spacing)}}&:has(figcaption+*){figcaption{margin-bottom:var(--figcaption-spacing)}}}iframe{border:var(--border-sm) solid var(--ui-border-color)}}@layer elements{caption{caption-side:bottom;margin-top:var(--table-caption-spacing);font-size:var(--text-sm)}table{border-spacing:0;border:var(--table-border-width) solid var(--table-border-color);border-radius:var(--table-border-radius);background-color:var(--table-background-color)}th,td{text-align:start;padding:var(--table-padding);border-bottom:var(--table-border-width) solid var(--table-border-color);border-inline-start:var(--table-border-width) solid var(--table-border-color)}tr{th:first-child,td:first-child{border-inline-start-width:0}}tbody{tr:last-child{th,td{border-bottom-width:0}}}tfoot{th,td{border-top:var(--table-border-width) solid var(--table-border-color);border-bottom-width:0}}}@layer elements{::placeholder{opacity:var(--o-4)}input,button,textarea,select{font:inherit;color:var(--text-color)}button{color:var(--text-color)}fieldset{border:var(--fieldset-border-width) solid var(--fieldset-border-color);border-radius:var(--fieldset-border-radius);padding:var(--fieldset-padding);ul:has([type=checkbox],[type=radio]){padding-inline-start:0}>[aria-hidden]{margin-bottom:var(--sm3);font-size:var(--text-lg);grid-column:1 / -1}}:is(input,select,textarea):user-invalid{border-color:var(--input-border-color-invalid)}input{&:where(:not([type=checkbox],[type=radio])){height:var(--input-height)}&:where(:not([type=color],[type=file],[type=reset],[type=submit])){padding:var(--input-padding)}&:where(:not([type=color])){border-radius:var(--input-border-radius)}&:where(:not([type=file])){border:var(--input-border-width) solid var(--input-border-color)}&[type=file]{width:100%;accent-color:var(--text-color)}&[type=number]{padding-inline-end:var(--xs1)}}label{display:block;&:has(+:is(input,select,textarea)){margin-bottom:var(--label-spacing)}}legend{position:absolute;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);width:1px;height:1px;white-space:nowrap}meter{width:100%;background:var(--meter-track-color);border-radius:var(--meter-border-radius);height:var(--meter-height);&::-webkit-meter-bar{background:var(--meter-track-color)}&::-webkit-meter-bar,&::-webkit-meter-optimum-value,&::-webkit-meter-suboptimum-value,&::-webkit-meter-even-less-good-value{height:var(--meter-height);border:none;border-radius:var(--meter-border-radius)}&::-webkit-meter-even-less-good-value{background:var(--meter-low-color)}&::-webkit-meter-suboptimum-value{background:var(--meter-medium-color)}&::-webkit-meter-optimum-value{background:var(--meter-high-color)}&:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:var(--meter-low-color)}&:-moz-meter-sub-optimum::-moz-meter-bar{background:var(--meter-medium-color)}&:-moz-meter-optimum::-moz-meter-bar{background:var(--meter-high-color)}}progress{appearance:none;width:100%;height:var(--progress-height);background:var(--progress-track-color);border-radius:var(--progress-border-radius);border:none;&::-moz-progress-bar{background:var(--progress-color);border-radius:var(--progress-border-radius)}&::-webkit-progress-bar{width:100%;background:var(--progress-track-color);border-radius:var(--progress-border-radius);height:var(--progress-height)}&::-webkit-progress-value{background:var(--progress-color);border-radius:var(--progress-border-radius)}}select{--split: calc(100% - var(--select-icon-size));display:flex;appearance:none;height:var(--input-height);padding:var(--xs1) calc(var(--input-padding) + var(--md1)) var(--xs1) var(--input-padding);border:var(--input-border-width) solid var(--input-border-color);border-radius:var(--input-border-radius);background:linear-gradient(to right,var(--body-background-color) 0 var(--split),var(--text-color) var(--split) 100%);mask-image:var(--select-icon),linear-gradient(to right,transparent calc(var(--split) - 1px),red 0),linear-gradient(red 0 0);mask-size:var(--select-icon-size),auto,auto;mask-position:calc(100% - var(--xs1)) center,0 0,0 0;mask-repeat:no-repeat;mask-clip:padding-box,padding-box,border-box;mask-origin:padding-box,padding-box,border-box;mask-composite:add,exclude;&:disabled{--disabled-color: light-dark( hsl(from var(--text-color) h s 70%), hsl(from var(--text-color) h s 40%) );cursor:not-allowed;color:var(--disabled-color);background:linear-gradient(to right,var(--body-background-color) 0 var(--split),var(--disabled-color) var(--split) 100%)}&[multiple]{height:auto;padding:var(--input-padding);background:var(--body-background-color);mask-image:none}}textarea{width:100%;padding:var(--input-padding);border-radius:var(--input-border-radius);border:var(--input-border-width) solid var(--input-border-color);resize:vertical;&:not([rows]){min-height:6em}}}@layer elements{dialog{min-width:var(--dialog-min-width);max-width:var(--dialog-max-width);padding:var(--dialog-padding);border:var(--dialog-border-width) solid var(--dialog-border-color);background-color:var(--dialog-background-color);border-radius:var(--dialog-border-radius);&::backdrop{background:var(--dialog-backdrop-color);opacity:var(--dialog-backdrop-opacity)}[aria-label="close pop-up"]{position:absolute;top:var(--xs3);right:var( --xs3 );background:transparent;border:none;outline:none;cursor:pointer}p:last-of-type{margin-bottom:0}}details{padding:var(--details-padding);border:var(--details-border-width) solid var(--details-border-color);background-color:var(--details-background-color);border-radius:var(--details-border-radius);cursor:pointer;summary{display:flex;justify-content:space-between;font-weight:var(--bold);&::-webkit-details-marker{display:none}&:after{content:"";width:var(--details-icon-size);height:var(--details-icon-size);background-color:currentColor;mask-image:var(--details-icon);mask-size:contain;mask-repeat:no-repeat;transition:transform var(--transition)}}&[open]>summary{margin-bottom:var(--details-spacing);&:after{transform:rotate(180deg)}}p:last-of-type{margin-bottom:0}}}@layer global{:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.a11y-skipLink{position:fixed;z-index:var(--z-top);inset-block-start:-100vb;inset-inline-start:0;padding:.75em 1.25em;background-color:var(--body-background-color);color:var(--text-color)}.a11y-skipLink:focus{inset-block-start:0}.a11y-srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}}@layer global{@keyframes fadeFromOpaque{0%{opacity:1}}@keyframes fadeToOpaque{to{opacity:1}}@keyframes fadeFromTransparent{0%{opacity:0}}@keyframes fadeToTransparent{to{opacity:0}}}@layer global{.grid{display:grid;--grid-tc: repeat(4, 1fr);--grid-cs: 1;--grid-ce: -1;grid-template-columns:var(--grid-tc);grid-column-gap:var(--grid-column-gap);grid-row-gap:var(--grid-row-gap)}.grid-flush{grid-column-gap:0;grid-row-gap:0}.grid>.grid_item{display:block;appearance:none;-webkit-appearance:none}.grid[col="1"]{--grid-tc: repeat(1, 1fr) }.grid[col="2"]{--grid-tc: repeat(2, 1fr) }.grid[col="3"]{--grid-tc: repeat(3, 1fr) }.grid[col="4"]{--grid-tc: repeat(4, 1fr) }.grid[col="5"]{--grid-tc: repeat(5, 1fr) }.grid[col="6"]{--grid-tc: repeat(6, 1fr) }.grid[col="7"]{--grid-tc: repeat(7, 1fr) }.grid[col="8"]{--grid-tc: repeat(8, 1fr) }.grid[col="9"]{--grid-tc: repeat(9, 1fr) }.grid[col="10"]{--grid-tc: repeat(10, 1fr) }.grid[col="11"]{--grid-tc: repeat(11, 1fr) }.grid[col="12"]{--grid-tc: repeat(12, 1fr) }.grid[col="13"]{--grid-tc: repeat(13, 1fr) }.grid[col="14"]{--grid-tc: repeat(14, 1fr) }.grid[col="15"]{--grid-tc: repeat(15, 1fr) }.grid[col="16"]{--grid-tc: repeat(16, 1fr) }.grid[col="17"]{--grid-tc: repeat(17, 1fr) }.grid[col="18"]{--grid-tc: repeat(18, 1fr) }.grid[col="19"]{--grid-tc: repeat(19, 1fr) }.grid[col="20"]{--grid-tc: repeat(20, 1fr) }.grid[col="21"]{--grid-tc: repeat(21, 1fr) }.grid[col="22"]{--grid-tc: repeat(22, 1fr) }.grid[col="23"]{--grid-tc: repeat(23, 1fr) }.grid[col="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span^="1"]{--grid-cs: 1 }.grid>.grid_item[span^="2"]{--grid-cs: 2 }.grid>.grid_item[span^="3"]{--grid-cs: 3 }.grid>.grid_item[span^="4"]{--grid-cs: 4 }.grid>.grid_item[span^="5"]{--grid-cs: 5 }.grid>.grid_item[span^="6"]{--grid-cs: 6 }.grid>.grid_item[span^="7"]{--grid-cs: 7 }.grid>.grid_item[span^="8"]{--grid-cs: 8 }.grid>.grid_item[span^="9"]{--grid-cs: 9 }.grid>.grid_item[span^="10"]{--grid-cs: 10 }.grid>.grid_item[span^="11"]{--grid-cs: 11 }.grid>.grid_item[span^="12"]{--grid-cs: 12 }.grid>.grid_item[span^="13"]{--grid-cs: 13 }.grid>.grid_item[span^="14"]{--grid-cs: 14 }.grid>.grid_item[span^="15"]{--grid-cs: 15 }.grid>.grid_item[span^="16"]{--grid-cs: 16 }.grid>.grid_item[span^="17"]{--grid-cs: 17 }.grid>.grid_item[span^="18"]{--grid-cs: 18 }.grid>.grid_item[span^="19"]{--grid-cs: 19 }.grid>.grid_item[span^="20"]{--grid-cs: 20 }.grid>.grid_item[span^="21"]{--grid-cs: 21 }.grid>.grid_item[span^="22"]{--grid-cs: 22 }.grid>.grid_item[span^="23"]{--grid-cs: 23 }.grid>.grid_item[span^="24"]{--grid-cs: 24 }.grid>.grid_item[span$="+1"],.grid>.grid_item[span="1"]{--grid-ce: 1 }.grid>.grid_item[span$="+2"],.grid>.grid_item[span$="-1"],.grid>.grid_item[span="2"]{--grid-ce: 2 }.grid>.grid_item[span$="+3"],.grid>.grid_item[span$="-2"],.grid>.grid_item[span="3"]{--grid-ce: 3 }.grid>.grid_item[span$="+4"],.grid>.grid_item[span$="-3"],.grid>.grid_item[span="4"]{--grid-ce: 4 }.grid>.grid_item[span$="+5"],.grid>.grid_item[span$="-4"],.grid>.grid_item[span="5"]{--grid-ce: 5 }.grid>.grid_item[span$="+6"],.grid>.grid_item[span$="-5"],.grid>.grid_item[span="6"]{--grid-ce: 6 }.grid>.grid_item[span$="+7"],.grid>.grid_item[span$="-6"],.grid>.grid_item[span="7"]{--grid-ce: 7 }.grid>.grid_item[span$="+8"],.grid>.grid_item[span$="-7"],.grid>.grid_item[span="8"]{--grid-ce: 8 }.grid>.grid_item[span$="+9"],.grid>.grid_item[span$="-8"],.grid>.grid_item[span="9"]{--grid-ce: 9 }.grid>.grid_item[span$="+10"],.grid>.grid_item[span$="-9"],.grid>.grid_item[span="10"]{--grid-ce: 10 }.grid>.grid_item[span$="+11"],.grid>.grid_item[span$="-10"],.grid>.grid_item[span="11"]{--grid-ce: 11 }.grid>.grid_item[span$="+12"],.grid>.grid_item[span$="-11"],.grid>.grid_item[span="12"]{--grid-ce: 12 }.grid>.grid_item[span$="+13"],.grid>.grid_item[span$="-12"],.grid>.grid_item[span="13"]{--grid-ce: 13 }.grid>.grid_item[span$="+14"],.grid>.grid_item[span$="-13"],.grid>.grid_item[span="14"]{--grid-ce: 14 }.grid>.grid_item[span$="+15"],.grid>.grid_item[span$="-14"],.grid>.grid_item[span="15"]{--grid-ce: 15 }.grid>.grid_item[span$="+16"],.grid>.grid_item[span$="-15"],.grid>.grid_item[span="16"]{--grid-ce: 16 }.grid>.grid_item[span$="+17"],.grid>.grid_item[span$="-16"],.grid>.grid_item[span="17"]{--grid-ce: 17 }.grid>.grid_item[span$="+18"],.grid>.grid_item[span$="-17"],.grid>.grid_item[span="18"]{--grid-ce: 18 }.grid>.grid_item[span$="+19"],.grid>.grid_item[span$="-18"],.grid>.grid_item[span="19"]{--grid-ce: 19 }.grid>.grid_item[span$="+20"],.grid>.grid_item[span$="-19"],.grid>.grid_item[span="20"]{--grid-ce: 20 }.grid>.grid_item[span$="+21"],.grid>.grid_item[span$="-20"],.grid>.grid_item[span="21"]{--grid-ce: 21 }.grid>.grid_item[span$="+22"],.grid>.grid_item[span$="-21"],.grid>.grid_item[span="22"]{--grid-ce: 22 }.grid>.grid_item[span$="+23"],.grid>.grid_item[span$="-22"],.grid>.grid_item[span="23"]{--grid-ce: 23 }.grid>.grid_item[span$="+24"],.grid>.grid_item[span$="-23"],.grid>.grid_item[span="24"]{--grid-ce: 24 }.grid>.grid_item[span$="-24"]{--grid-ce: 25 }.grid>.grid_item[span]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span*="+"],.grid>.grid_item[span*="-"],.grid>.grid_item[span*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span*="-"],.grid>.grid_item[span*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span=row]{grid-column:1 / -1}@media only screen and (width>=768px){.grid[col-md="1"]{--grid-tc: repeat(1, 1fr) }.grid[col-md="2"]{--grid-tc: repeat(2, 1fr) }.grid[col-md="3"]{--grid-tc: repeat(3, 1fr) }.grid[col-md="4"]{--grid-tc: repeat(4, 1fr) }.grid[col-md="5"]{--grid-tc: repeat(5, 1fr) }.grid[col-md="6"]{--grid-tc: repeat(6, 1fr) }.grid[col-md="7"]{--grid-tc: repeat(7, 1fr) }.grid[col-md="8"]{--grid-tc: repeat(8, 1fr) }.grid[col-md="9"]{--grid-tc: repeat(9, 1fr) }.grid[col-md="10"]{--grid-tc: repeat(10, 1fr) }.grid[col-md="11"]{--grid-tc: repeat(11, 1fr) }.grid[col-md="12"]{--grid-tc: repeat(12, 1fr) }.grid[col-md="13"]{--grid-tc: repeat(13, 1fr) }.grid[col-md="14"]{--grid-tc: repeat(14, 1fr) }.grid[col-md="15"]{--grid-tc: repeat(15, 1fr) }.grid[col-md="16"]{--grid-tc: repeat(16, 1fr) }.grid[col-md="17"]{--grid-tc: repeat(17, 1fr) }.grid[col-md="18"]{--grid-tc: repeat(18, 1fr) }.grid[col-md="19"]{--grid-tc: repeat(19, 1fr) }.grid[col-md="20"]{--grid-tc: repeat(20, 1fr) }.grid[col-md="21"]{--grid-tc: repeat(21, 1fr) }.grid[col-md="22"]{--grid-tc: repeat(22, 1fr) }.grid[col-md="23"]{--grid-tc: repeat(23, 1fr) }.grid[col-md="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span-md^="1"]{--grid-cs: 1 }.grid>.grid_item[span-md^="2"]{--grid-cs: 2 }.grid>.grid_item[span-md^="3"]{--grid-cs: 3 }.grid>.grid_item[span-md^="4"]{--grid-cs: 4 }.grid>.grid_item[span-md^="5"]{--grid-cs: 5 }.grid>.grid_item[span-md^="6"]{--grid-cs: 6 }.grid>.grid_item[span-md^="7"]{--grid-cs: 7 }.grid>.grid_item[span-md^="8"]{--grid-cs: 8 }.grid>.grid_item[span-md^="9"]{--grid-cs: 9 }.grid>.grid_item[span-md^="10"]{--grid-cs: 10 }.grid>.grid_item[span-md^="11"]{--grid-cs: 11 }.grid>.grid_item[span-md^="12"]{--grid-cs: 12 }.grid>.grid_item[span-md^="13"]{--grid-cs: 13 }.grid>.grid_item[span-md^="14"]{--grid-cs: 14 }.grid>.grid_item[span-md^="15"]{--grid-cs: 15 }.grid>.grid_item[span-md^="16"]{--grid-cs: 16 }.grid>.grid_item[span-md^="17"]{--grid-cs: 17 }.grid>.grid_item[span-md^="18"]{--grid-cs: 18 }.grid>.grid_item[span-md^="19"]{--grid-cs: 19 }.grid>.grid_item[span-md^="20"]{--grid-cs: 20 }.grid>.grid_item[span-md^="21"]{--grid-cs: 21 }.grid>.grid_item[span-md^="22"]{--grid-cs: 22 }.grid>.grid_item[span-md^="23"]{--grid-cs: 23 }.grid>.grid_item[span-md^="24"]{--grid-cs: 24 }.grid>.grid_item[span-md$="+1"],.grid>.grid_item[span-md="1"]{--grid-ce: 1 }.grid>.grid_item[span-md$="+2"],.grid>.grid_item[span-md$="-1"],.grid>.grid_item[span-md="2"]{--grid-ce: 2 }.grid>.grid_item[span-md$="+3"],.grid>.grid_item[span-md$="-2"],.grid>.grid_item[span-md="3"]{--grid-ce: 3 }.grid>.grid_item[span-md$="+4"],.grid>.grid_item[span-md$="-3"],.grid>.grid_item[span-md="4"]{--grid-ce: 4 }.grid>.grid_item[span-md$="+5"],.grid>.grid_item[span-md$="-4"],.grid>.grid_item[span-md="5"]{--grid-ce: 5 }.grid>.grid_item[span-md$="+6"],.grid>.grid_item[span-md$="-5"],.grid>.grid_item[span-md="6"]{--grid-ce: 6 }.grid>.grid_item[span-md$="+7"],.grid>.grid_item[span-md$="-6"],.grid>.grid_item[span-md="7"]{--grid-ce: 7 }.grid>.grid_item[span-md$="+8"],.grid>.grid_item[span-md$="-7"],.grid>.grid_item[span-md="8"]{--grid-ce: 8 }.grid>.grid_item[span-md$="+9"],.grid>.grid_item[span-md$="-8"],.grid>.grid_item[span-md="9"]{--grid-ce: 9 }.grid>.grid_item[span-md$="+10"],.grid>.grid_item[span-md$="-9"],.grid>.grid_item[span-md="10"]{--grid-ce: 10 }.grid>.grid_item[span-md$="+11"],.grid>.grid_item[span-md$="-10"],.grid>.grid_item[span-md="11"]{--grid-ce: 11 }.grid>.grid_item[span-md$="+12"],.grid>.grid_item[span-md$="-11"],.grid>.grid_item[span-md="12"]{--grid-ce: 12 }.grid>.grid_item[span-md$="+13"],.grid>.grid_item[span-md$="-12"],.grid>.grid_item[span-md="13"]{--grid-ce: 13 }.grid>.grid_item[span-md$="+14"],.grid>.grid_item[span-md$="-13"],.grid>.grid_item[span-md="14"]{--grid-ce: 14 }.grid>.grid_item[span-md$="+15"],.grid>.grid_item[span-md$="-14"],.grid>.grid_item[span-md="15"]{--grid-ce: 15 }.grid>.grid_item[span-md$="+16"],.grid>.grid_item[span-md$="-15"],.grid>.grid_item[span-md="16"]{--grid-ce: 16 }.grid>.grid_item[span-md$="+17"],.grid>.grid_item[span-md$="-16"],.grid>.grid_item[span-md="17"]{--grid-ce: 17 }.grid>.grid_item[span-md$="+18"],.grid>.grid_item[span-md$="-17"],.grid>.grid_item[span-md="18"]{--grid-ce: 18 }.grid>.grid_item[span-md$="+19"],.grid>.grid_item[span-md$="-18"],.grid>.grid_item[span-md="19"]{--grid-ce: 19 }.grid>.grid_item[span-md$="+20"],.grid>.grid_item[span-md$="-19"],.grid>.grid_item[span-md="20"]{--grid-ce: 20 }.grid>.grid_item[span-md$="+21"],.grid>.grid_item[span-md$="-20"],.grid>.grid_item[span-md="21"]{--grid-ce: 21 }.grid>.grid_item[span-md$="+22"],.grid>.grid_item[span-md$="-21"],.grid>.grid_item[span-md="22"]{--grid-ce: 22 }.grid>.grid_item[span-md$="+23"],.grid>.grid_item[span-md$="-22"],.grid>.grid_item[span-md="23"]{--grid-ce: 23 }.grid>.grid_item[span-md$="+24"],.grid>.grid_item[span-md$="-23"],.grid>.grid_item[span-md="24"]{--grid-ce: 24 }.grid>.grid_item[span-md$="-24"]{--grid-ce: 25 }.grid>.grid_item[span-md]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span-md*="+"],.grid>.grid_item[span-md*="-"],.grid>.grid_item[span-md*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span-md*="-"],.grid>.grid_item[span-md*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span-md=row]{grid-column:1 / -1}}@media only screen and (width>=1024px){.grid[col-lg="1"]{--grid-tc: repeat(1, 1fr) }.grid[col-lg="2"]{--grid-tc: repeat(2, 1fr) }.grid[col-lg="3"]{--grid-tc: repeat(3, 1fr) }.grid[col-lg="4"]{--grid-tc: repeat(4, 1fr) }.grid[col-lg="5"]{--grid-tc: repeat(5, 1fr) }.grid[col-lg="6"]{--grid-tc: repeat(6, 1fr) }.grid[col-lg="7"]{--grid-tc: repeat(7, 1fr) }.grid[col-lg="8"]{--grid-tc: repeat(8, 1fr) }.grid[col-lg="9"]{--grid-tc: repeat(9, 1fr) }.grid[col-lg="10"]{--grid-tc: repeat(10, 1fr) }.grid[col-lg="11"]{--grid-tc: repeat(11, 1fr) }.grid[col-lg="12"]{--grid-tc: repeat(12, 1fr) }.grid[col-lg="13"]{--grid-tc: repeat(13, 1fr) }.grid[col-lg="14"]{--grid-tc: repeat(14, 1fr) }.grid[col-lg="15"]{--grid-tc: repeat(15, 1fr) }.grid[col-lg="16"]{--grid-tc: repeat(16, 1fr) }.grid[col-lg="17"]{--grid-tc: repeat(17, 1fr) }.grid[col-lg="18"]{--grid-tc: repeat(18, 1fr) }.grid[col-lg="19"]{--grid-tc: repeat(19, 1fr) }.grid[col-lg="20"]{--grid-tc: repeat(20, 1fr) }.grid[col-lg="21"]{--grid-tc: repeat(21, 1fr) }.grid[col-lg="22"]{--grid-tc: repeat(22, 1fr) }.grid[col-lg="23"]{--grid-tc: repeat(23, 1fr) }.grid[col-lg="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span-lg^="1"]{--grid-cs: 1 }.grid>.grid_item[span-lg^="2"]{--grid-cs: 2 }.grid>.grid_item[span-lg^="3"]{--grid-cs: 3 }.grid>.grid_item[span-lg^="4"]{--grid-cs: 4 }.grid>.grid_item[span-lg^="5"]{--grid-cs: 5 }.grid>.grid_item[span-lg^="6"]{--grid-cs: 6 }.grid>.grid_item[span-lg^="7"]{--grid-cs: 7 }.grid>.grid_item[span-lg^="8"]{--grid-cs: 8 }.grid>.grid_item[span-lg^="9"]{--grid-cs: 9 }.grid>.grid_item[span-lg^="10"]{--grid-cs: 10 }.grid>.grid_item[span-lg^="11"]{--grid-cs: 11 }.grid>.grid_item[span-lg^="12"]{--grid-cs: 12 }.grid>.grid_item[span-lg^="13"]{--grid-cs: 13 }.grid>.grid_item[span-lg^="14"]{--grid-cs: 14 }.grid>.grid_item[span-lg^="15"]{--grid-cs: 15 }.grid>.grid_item[span-lg^="16"]{--grid-cs: 16 }.grid>.grid_item[span-lg^="17"]{--grid-cs: 17 }.grid>.grid_item[span-lg^="18"]{--grid-cs: 18 }.grid>.grid_item[span-lg^="19"]{--grid-cs: 19 }.grid>.grid_item[span-lg^="20"]{--grid-cs: 20 }.grid>.grid_item[span-lg^="21"]{--grid-cs: 21 }.grid>.grid_item[span-lg^="22"]{--grid-cs: 22 }.grid>.grid_item[span-lg^="23"]{--grid-cs: 23 }.grid>.grid_item[span-lg^="24"]{--grid-cs: 24 }.grid>.grid_item[span-lg$="+1"],.grid>.grid_item[span-lg="1"]{--grid-ce: 1 }.grid>.grid_item[span-lg$="+2"],.grid>.grid_item[span-lg$="-1"],.grid>.grid_item[span-lg="2"]{--grid-ce: 2 }.grid>.grid_item[span-lg$="+3"],.grid>.grid_item[span-lg$="-2"],.grid>.grid_item[span-lg="3"]{--grid-ce: 3 }.grid>.grid_item[span-lg$="+4"],.grid>.grid_item[span-lg$="-3"],.grid>.grid_item[span-lg="4"]{--grid-ce: 4 }.grid>.grid_item[span-lg$="+5"],.grid>.grid_item[span-lg$="-4"],.grid>.grid_item[span-lg="5"]{--grid-ce: 5 }.grid>.grid_item[span-lg$="+6"],.grid>.grid_item[span-lg$="-5"],.grid>.grid_item[span-lg="6"]{--grid-ce: 6 }.grid>.grid_item[span-lg$="+7"],.grid>.grid_item[span-lg$="-6"],.grid>.grid_item[span-lg="7"]{--grid-ce: 7 }.grid>.grid_item[span-lg$="+8"],.grid>.grid_item[span-lg$="-7"],.grid>.grid_item[span-lg="8"]{--grid-ce: 8 }.grid>.grid_item[span-lg$="+9"],.grid>.grid_item[span-lg$="-8"],.grid>.grid_item[span-lg="9"]{--grid-ce: 9 }.grid>.grid_item[span-lg$="+10"],.grid>.grid_item[span-lg$="-9"],.grid>.grid_item[span-lg="10"]{--grid-ce: 10 }.grid>.grid_item[span-lg$="+11"],.grid>.grid_item[span-lg$="-10"],.grid>.grid_item[span-lg="11"]{--grid-ce: 11 }.grid>.grid_item[span-lg$="+12"],.grid>.grid_item[span-lg$="-11"],.grid>.grid_item[span-lg="12"]{--grid-ce: 12 }.grid>.grid_item[span-lg$="+13"],.grid>.grid_item[span-lg$="-12"],.grid>.grid_item[span-lg="13"]{--grid-ce: 13 }.grid>.grid_item[span-lg$="+14"],.grid>.grid_item[span-lg$="-13"],.grid>.grid_item[span-lg="14"]{--grid-ce: 14 }.grid>.grid_item[span-lg$="+15"],.grid>.grid_item[span-lg$="-14"],.grid>.grid_item[span-lg="15"]{--grid-ce: 15 }.grid>.grid_item[span-lg$="+16"],.grid>.grid_item[span-lg$="-15"],.grid>.grid_item[span-lg="16"]{--grid-ce: 16 }.grid>.grid_item[span-lg$="+17"],.grid>.grid_item[span-lg$="-16"],.grid>.grid_item[span-lg="17"]{--grid-ce: 17 }.grid>.grid_item[span-lg$="+18"],.grid>.grid_item[span-lg$="-17"],.grid>.grid_item[span-lg="18"]{--grid-ce: 18 }.grid>.grid_item[span-lg$="+19"],.grid>.grid_item[span-lg$="-18"],.grid>.grid_item[span-lg="19"]{--grid-ce: 19 }.grid>.grid_item[span-lg$="+20"],.grid>.grid_item[span-lg$="-19"],.grid>.grid_item[span-lg="20"]{--grid-ce: 20 }.grid>.grid_item[span-lg$="+21"],.grid>.grid_item[span-lg$="-20"],.grid>.grid_item[span-lg="21"]{--grid-ce: 21 }.grid>.grid_item[span-lg$="+22"],.grid>.grid_item[span-lg$="-21"],.grid>.grid_item[span-lg="22"]{--grid-ce: 22 }.grid>.grid_item[span-lg$="+23"],.grid>.grid_item[span-lg$="-22"],.grid>.grid_item[span-lg="23"]{--grid-ce: 23 }.grid>.grid_item[span-lg$="+24"],.grid>.grid_item[span-lg$="-23"],.grid>.grid_item[span-lg="24"]{--grid-ce: 24 }.grid>.grid_item[span-lg$="-24"]{--grid-ce: 25 }.grid>.grid_item[span-lg]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span-lg*="+"],.grid>.grid_item[span-lg*="-"],.grid>.grid_item[span-lg*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span-lg*="-"],.grid>.grid_item[span-lg*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span-lg=row]{grid-column:1 / -1}}@media only screen and (width>=1440px){.grid[col-xl="1"]{--grid-tc: repeat(1, 1fr) }.grid[col-xl="2"]{--grid-tc: repeat(2, 1fr) }.grid[col-xl="3"]{--grid-tc: repeat(3, 1fr) }.grid[col-xl="4"]{--grid-tc: repeat(4, 1fr) }.grid[col-xl="5"]{--grid-tc: repeat(5, 1fr) }.grid[col-xl="6"]{--grid-tc: repeat(6, 1fr) }.grid[col-xl="7"]{--grid-tc: repeat(7, 1fr) }.grid[col-xl="8"]{--grid-tc: repeat(8, 1fr) }.grid[col-xl="9"]{--grid-tc: repeat(9, 1fr) }.grid[col-xl="10"]{--grid-tc: repeat(10, 1fr) }.grid[col-xl="11"]{--grid-tc: repeat(11, 1fr) }.grid[col-xl="12"]{--grid-tc: repeat(12, 1fr) }.grid[col-xl="13"]{--grid-tc: repeat(13, 1fr) }.grid[col-xl="14"]{--grid-tc: repeat(14, 1fr) }.grid[col-xl="15"]{--grid-tc: repeat(15, 1fr) }.grid[col-xl="16"]{--grid-tc: repeat(16, 1fr) }.grid[col-xl="17"]{--grid-tc: repeat(17, 1fr) }.grid[col-xl="18"]{--grid-tc: repeat(18, 1fr) }.grid[col-xl="19"]{--grid-tc: repeat(19, 1fr) }.grid[col-xl="20"]{--grid-tc: repeat(20, 1fr) }.grid[col-xl="21"]{--grid-tc: repeat(21, 1fr) }.grid[col-xl="22"]{--grid-tc: repeat(22, 1fr) }.grid[col-xl="23"]{--grid-tc: repeat(23, 1fr) }.grid[col-xl="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span-xl^="1"]{--grid-cs: 1 }.grid>.grid_item[span-xl^="2"]{--grid-cs: 2 }.grid>.grid_item[span-xl^="3"]{--grid-cs: 3 }.grid>.grid_item[span-xl^="4"]{--grid-cs: 4 }.grid>.grid_item[span-xl^="5"]{--grid-cs: 5 }.grid>.grid_item[span-xl^="6"]{--grid-cs: 6 }.grid>.grid_item[span-xl^="7"]{--grid-cs: 7 }.grid>.grid_item[span-xl^="8"]{--grid-cs: 8 }.grid>.grid_item[span-xl^="9"]{--grid-cs: 9 }.grid>.grid_item[span-xl^="10"]{--grid-cs: 10 }.grid>.grid_item[span-xl^="11"]{--grid-cs: 11 }.grid>.grid_item[span-xl^="12"]{--grid-cs: 12 }.grid>.grid_item[span-xl^="13"]{--grid-cs: 13 }.grid>.grid_item[span-xl^="14"]{--grid-cs: 14 }.grid>.grid_item[span-xl^="15"]{--grid-cs: 15 }.grid>.grid_item[span-xl^="16"]{--grid-cs: 16 }.grid>.grid_item[span-xl^="17"]{--grid-cs: 17 }.grid>.grid_item[span-xl^="18"]{--grid-cs: 18 }.grid>.grid_item[span-xl^="19"]{--grid-cs: 19 }.grid>.grid_item[span-xl^="20"]{--grid-cs: 20 }.grid>.grid_item[span-xl^="21"]{--grid-cs: 21 }.grid>.grid_item[span-xl^="22"]{--grid-cs: 22 }.grid>.grid_item[span-xl^="23"]{--grid-cs: 23 }.grid>.grid_item[span-xl^="24"]{--grid-cs: 24 }.grid>.grid_item[span-xl$="+1"],.grid>.grid_item[span-xl="1"]{--grid-ce: 1 }.grid>.grid_item[span-xl$="+2"],.grid>.grid_item[span-xl$="-1"],.grid>.grid_item[span-xl="2"]{--grid-ce: 2 }.grid>.grid_item[span-xl$="+3"],.grid>.grid_item[span-xl$="-2"],.grid>.grid_item[span-xl="3"]{--grid-ce: 3 }.grid>.grid_item[span-xl$="+4"],.grid>.grid_item[span-xl$="-3"],.grid>.grid_item[span-xl="4"]{--grid-ce: 4 }.grid>.grid_item[span-xl$="+5"],.grid>.grid_item[span-xl$="-4"],.grid>.grid_item[span-xl="5"]{--grid-ce: 5 }.grid>.grid_item[span-xl$="+6"],.grid>.grid_item[span-xl$="-5"],.grid>.grid_item[span-xl="6"]{--grid-ce: 6 }.grid>.grid_item[span-xl$="+7"],.grid>.grid_item[span-xl$="-6"],.grid>.grid_item[span-xl="7"]{--grid-ce: 7 }.grid>.grid_item[span-xl$="+8"],.grid>.grid_item[span-xl$="-7"],.grid>.grid_item[span-xl="8"]{--grid-ce: 8 }.grid>.grid_item[span-xl$="+9"],.grid>.grid_item[span-xl$="-8"],.grid>.grid_item[span-xl="9"]{--grid-ce: 9 }.grid>.grid_item[span-xl$="+10"],.grid>.grid_item[span-xl$="-9"],.grid>.grid_item[span-xl="10"]{--grid-ce: 10 }.grid>.grid_item[span-xl$="+11"],.grid>.grid_item[span-xl$="-10"],.grid>.grid_item[span-xl="11"]{--grid-ce: 11 }.grid>.grid_item[span-xl$="+12"],.grid>.grid_item[span-xl$="-11"],.grid>.grid_item[span-xl="12"]{--grid-ce: 12 }.grid>.grid_item[span-xl$="+13"],.grid>.grid_item[span-xl$="-12"],.grid>.grid_item[span-xl="13"]{--grid-ce: 13 }.grid>.grid_item[span-xl$="+14"],.grid>.grid_item[span-xl$="-13"],.grid>.grid_item[span-xl="14"]{--grid-ce: 14 }.grid>.grid_item[span-xl$="+15"],.grid>.grid_item[span-xl$="-14"],.grid>.grid_item[span-xl="15"]{--grid-ce: 15 }.grid>.grid_item[span-xl$="+16"],.grid>.grid_item[span-xl$="-15"],.grid>.grid_item[span-xl="16"]{--grid-ce: 16 }.grid>.grid_item[span-xl$="+17"],.grid>.grid_item[span-xl$="-16"],.grid>.grid_item[span-xl="17"]{--grid-ce: 17 }.grid>.grid_item[span-xl$="+18"],.grid>.grid_item[span-xl$="-17"],.grid>.grid_item[span-xl="18"]{--grid-ce: 18 }.grid>.grid_item[span-xl$="+19"],.grid>.grid_item[span-xl$="-18"],.grid>.grid_item[span-xl="19"]{--grid-ce: 19 }.grid>.grid_item[span-xl$="+20"],.grid>.grid_item[span-xl$="-19"],.grid>.grid_item[span-xl="20"]{--grid-ce: 20 }.grid>.grid_item[span-xl$="+21"],.grid>.grid_item[span-xl$="-20"],.grid>.grid_item[span-xl="21"]{--grid-ce: 21 }.grid>.grid_item[span-xl$="+22"],.grid>.grid_item[span-xl$="-21"],.grid>.grid_item[span-xl="22"]{--grid-ce: 22 }.grid>.grid_item[span-xl$="+23"],.grid>.grid_item[span-xl$="-22"],.grid>.grid_item[span-xl="23"]{--grid-ce: 23 }.grid>.grid_item[span-xl$="+24"],.grid>.grid_item[span-xl$="-23"],.grid>.grid_item[span-xl="24"]{--grid-ce: 24 }.grid>.grid_item[span-xl$="-24"]{--grid-ce: 25 }.grid>.grid_item[span-xl]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span-xl*="+"],.grid>.grid_item[span-xl*="-"],.grid>.grid_item[span-xl*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span-xl*="-"],.grid>.grid_item[span-xl*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span-xl=row]{grid-column:1 / -1}}}@layer global{.layout{display:flex;flex-direction:column;width:100vw;min-height:100vh;.layout_content{flex:1}}.layout_content_main{container:main / inline-size}.layout-centered{.layout_content{display:grid;gap:var(--sm3);grid-template-columns:1fr minmax(0,var(--layout-content-width)) 1fr;margin-top:var(--lg1);margin-bottom:var(--sm1);@media(width>=768px){margin-top:var(--xl3);margin-bottom:var(--md3);gap:var(--md3)}}.layout_content_main{grid-column:2}}.layout-sidebar{.layout_content{@media(width>=768px){display:grid;grid-template-columns:var(--layout-aside-width) minmax(0,1fr)}}.layout_content_main{padding:var(--sm2);@media(width>=768px){grid-row:1;grid-column:2;padding:var(--lg1) var(--md2)}}.layout_content_aside{@media(width>=768px){grid-row:1;grid-column:1;padding:var(--lg1) var(--md3)}}}.layout-sidebar-end{.layout_content{@media(width>=768px){grid-template-columns:minmax(0,1fr) var(--layout-aside-width)}}.layout_content_main{@media(width>=768px){grid-column:1}}.layout_content_aside{@media(width>=768px){grid-column:2}}}.layout-docs{.layout_content{@media(width>=768px){display:grid;grid-template-columns:var(--layout-aside-width) minmax(0,1fr)}@media(width>=1024px){grid-template-columns:var(--layout-aside-width) minmax(0,var(--layout-content-width)) var(--layout-toc-width)}}.layout_content_main{padding:var(--sm2);@media(width>=768px){grid-row:1;grid-column:2;padding:var(--lg1) var(--md2)}}.layout_content_aside{display:none;@media(width>=768px){display:block;grid-row:1;grid-column:1;padding:var(--lg1) var(--md3)}}.layout_content_aside-toc{@media(width>=768px){display:none}@media(width>=1024px){display:block;grid-row:1;grid-column:3;padding:var(--lg1) var(--md3)}}}.layout-split{.layout_content{display:grid;@media(width>=768px){grid-template-columns:1fr 1fr}}}.layout-cover{min-height:100dvh;.layout_content{display:grid;place-items:center}}}@layer global{@scope(.prose)to (.not-prose){:is(p,ul,ol,blockquote,table):has(+:is(h1,h2,h3,h4)){margin-bottom:calc(var(--prose-spacing) * 2)}p,ul,ol,dl{margin-bottom:var(--prose-spacing);p,ul,ol,dl{margin-bottom:0}}ul,ol{ul,ol{margin-inline-start:0;padding-inline-start:var(--sm2)}li{margin-bottom:.5em;&::marker{color:light-dark(var(--base-300),var(--base-600))}}}ul{margin-inline-start:var(--sm2);list-style-type:"\2192 "}ol{margin-inline-start:var(--md2);list-style-type:decimal-leading-zero;li::marker{font-size:var(--text-sm)}}table{margin-top:var(--md1);margin-bottom:var(--md1)}}}@layer global{.wrap{display:grid;grid-template-columns:1fr var(--wrap-width) 1fr;>*,>astro-island>*,>astro-slot>*,>astro-static-slot>*{grid-column:2;padding-inline:var(--wrap-spacing);@media(width>=768px){padding-inline:var(--wrap-md-spacing)}@media(width>=1024px){padding-inline:var(--wrap-lg-spacing)}}}.wrap-sm{--wrap-width: var(--wrap-width-sm)}.wrap-md{--wrap-width: var(--wrap-width-md)}.wrap-lg{--wrap-width: var(--wrap-width-lg)}.wrap_content-fullBleed{grid-column:1 / -1;width:100%;object-fit:cover}}@layer helpers{.c-base-0{color:var(--base-0)!important}.bdc-base-0{border-color:var(--base-0)!important}.bgc-base-0{background-color:var(--base-0)!important}.c-base-50{color:var(--base-50)!important}.bdc-base-50{border-color:var(--base-50)!important}.bgc-base-50{background-color:var(--base-50)!important}.c-base-100{color:var(--base-100)!important}.bdc-base-100{border-color:var(--base-100)!important}.bgc-base-100{background-color:var(--base-100)!important}.c-base-200{color:var(--base-200)!important}.bdc-base-200{border-color:var(--base-200)!important}.bgc-base-200{background-color:var(--base-200)!important}.c-base-300{color:var(--base-300)!important}.bdc-base-300{border-color:var(--base-300)!important}.bgc-base-300{background-color:var(--base-300)!important}.c-base-400{color:var(--base-400)!important}.bdc-base-400{border-color:var(--base-400)!important}.bgc-base-400{background-color:var(--base-400)!important}.c-base-500{color:var(--base-500)!important}.bdc-base-500{border-color:var(--base-500)!important}.bgc-base-500{background-color:var(--base-500)!important}.c-base-600{color:var(--base-600)!important}.bdc-base-600{border-color:var(--base-600)!important}.bgc-base-600{background-color:var(--base-600)!important}.c-base-700{color:var(--base-700)!important}.bdc-base-700{border-color:var(--base-700)!important}.bgc-base-700{background-color:var(--base-700)!important}.c-base-800{color:var(--base-800)!important}.bdc-base-800{border-color:var(--base-800)!important}.bgc-base-800{background-color:var(--base-800)!important}.c-base-900{color:var(--base-900)!important}.bdc-base-900{border-color:var(--base-900)!important}.bgc-base-900{background-color:var(--base-900)!important}.c-base-950{color:var(--base-950)!important}.bdc-base-950{border-color:var(--base-950)!important}.bgc-base-950{background-color:var(--base-950)!important}.c-primary-50{color:var(--primary-50)!important}.bdc-primary-50{border-color:var(--primary-50)!important}.bgc-primary-50{background-color:var(--primary-50)!important}.c-primary-100{color:var(--primary-100)!important}.bdc-primary-100{border-color:var(--primary-100)!important}.bgc-primary-100{background-color:var(--primary-100)!important}.c-primary-200{color:var(--primary-200)!important}.bdc-primary-200{border-color:var(--primary-200)!important}.bgc-primary-200{background-color:var(--primary-200)!important}.c-primary-300{color:var(--primary-300)!important}.bdc-primary-300{border-color:var(--primary-300)!important}.bgc-primary-300{background-color:var(--primary-300)!important}.c-primary-400{color:var(--primary-400)!important}.bdc-primary-400{border-color:var(--primary-400)!important}.bgc-primary-400{background-color:var(--primary-400)!important}.c-primary-500{color:var(--primary-500)!important}.bdc-primary-500{border-color:var(--primary-500)!important}.bgc-primary-500{background-color:var(--primary-500)!important}.c-primary-600{color:var(--primary-600)!important}.bdc-primary-600{border-color:var(--primary-600)!important}.bgc-primary-600{background-color:var(--primary-600)!important}.c-primary-700{color:var(--primary-700)!important}.bdc-primary-700{border-color:var(--primary-700)!important}.bgc-primary-700{background-color:var(--primary-700)!important}.c-primary-800{color:var(--primary-800)!important}.bdc-primary-800{border-color:var(--primary-800)!important}.bgc-primary-800{background-color:var(--primary-800)!important}.c-primary-900{color:var(--primary-900)!important}.bdc-primary-900{border-color:var(--primary-900)!important}.bgc-primary-900{background-color:var(--primary-900)!important}.c-primary-950{color:var(--primary-950)!important}.bdc-primary-950{border-color:var(--primary-950)!important}.bgc-primary-950{background-color:var(--primary-950)!important}.c-yes-100{color:var(--yes-100)!important}.bdc-yes-100{border-color:var(--yes-100)!important}.bgc-yes-100{background-color:var(--yes-100)!important}.c-yes-200{color:var(--yes-200)!important}.bdc-yes-200{border-color:var(--yes-200)!important}.bgc-yes-200{background-color:var(--yes-200)!important}.c-yes-300{color:var(--yes-300)!important}.bdc-yes-300{border-color:var(--yes-300)!important}.bgc-yes-300{background-color:var(--yes-300)!important}.c-yes-400{color:var(--yes-400)!important}.bdc-yes-400{border-color:var(--yes-400)!important}.bgc-yes-400{background-color:var(--yes-400)!important}.c-yes-500{color:var(--yes-500)!important}.bdc-yes-500{border-color:var(--yes-500)!important}.bgc-yes-500{background-color:var(--yes-500)!important}.c-no-100{color:var(--no-100)!important}.bdc-no-100{border-color:var(--no-100)!important}.bgc-no-100{background-color:var(--no-100)!important}.c-no-200{color:var(--no-200)!important}.bdc-no-200{border-color:var(--no-200)!important}.bgc-no-200{background-color:var(--no-200)!important}.c-no-300{color:var(--no-300)!important}.bdc-no-300{border-color:var(--no-300)!important}.bgc-no-300{background-color:var(--no-300)!important}.c-no-400{color:var(--no-400)!important}.bdc-no-400{border-color:var(--no-400)!important}.bgc-no-400{background-color:var(--no-400)!important}.c-no-500{color:var(--no-500)!important}.bdc-no-500{border-color:var(--no-500)!important}.bgc-no-500{background-color:var(--no-500)!important}.c-maybe-100{color:var(--maybe-100)!important}.bdc-maybe-100{border-color:var(--maybe-100)!important}.bgc-maybe-100{background-color:var(--maybe-100)!important}.c-maybe-200{color:var(--maybe-200)!important}.bdc-maybe-200{border-color:var(--maybe-200)!important}.bgc-maybe-200{background-color:var(--maybe-200)!important}.c-maybe-300{color:var(--maybe-300)!important}.bdc-maybe-300{border-color:var(--maybe-300)!important}.bgc-maybe-300{background-color:var(--maybe-300)!important}.c-maybe-400{color:var(--maybe-400)!important}.bdc-maybe-400{border-color:var(--maybe-400)!important}.bgc-maybe-400{background-color:var(--maybe-400)!important}.c-maybe-500{color:var(--maybe-500)!important}.bdc-maybe-500{border-color:var(--maybe-500)!important}.bgc-maybe-500{background-color:var(--maybe-500)!important}}@layer helpers{body.dev{--baseline: 8;background-size:100% calc(var(--baseline) * 1px)!important;background-image:linear-gradient(to bottom,#0000 calc((var(--baseline) - 1) * 1px),#ff69b4 calc(var(--baseline) * 1px))!important}.dev-error{position:fixed!important;top:var(--md1)!important;left:var(--md1)!important;z-index:var(--z-top)!important;padding:var(--sm1)!important;font-size:1rem!important;color:var(--danger-500)!important;background:var(--danger-100)!important;border:1px solid var(--danger-500)!important;border-radius:var(--radius-md)!important}}@layer helpers{.of-auto,.overflow-auto{overflow:auto!important}.of-hidden,.overflow-hidden{overflow:hidden!important}.of-clip,.overflow-clip{overflow:clip!important}.of-visible,.overflow-visible{overflow:visible!important}.of-scroll,.overflow-scroll{overflow:scroll!important}.of-x-auto,.overflow-x-auto{overflow-x:auto!important}.of-y-auto,.overflow-y-auto{overflow-y:auto!important}.of-x-hidden,.overflow-x-hidden{overflow-x:hidden!important}.of-y-hidden,.overflow-y-hidden{overflow-y:hidden!important}.of-x-clip,.overflow-x-clip{overflow-x:clip!important}.of-y-clip,.overflow-y-clip{overflow-y:clip!important}.of-x-visible,.overflow-x-visible{overflow-x:visible!important}.of-y-visible,.overflow-y-visible{overflow-y:visible!important}.of-x-scroll,.overflow-x-scroll{overflow-x:scroll!important}.of-y-scroll,.overflow-y-scroll{overflow-y:scroll!important}.position-static{position:static!important}.position-fixed{position:fixed!important}.position-absolute{position:absolute!important}.position-relative{position:relative!important}.position-sticky{position:sticky!important}.visibility-visible{visibility:visible!important}.visibility-hidden{visibility:hidden!important}.visibility-collapse{visibility:collapse!important}.z-auto{z-index:auto!important}.z-bottom{z-index:var(--z-bottom)!important}.z-0{z-index:var(--z-0)!important}.z-1{z-index:var(--z-1)!important}.z-2{z-index:var(--z-2)!important}.z-3{z-index:var(--z-3)!important}.z-4{z-index:var(--z-4)!important}.z-5{z-index:var(--z-5)!important}.z-top{z-index:var(--z-top)!important}}@layer helpers{.o-0{opacity:var(--o-0)!important}.o-1{opacity:var(--o-1)!important}.o-2{opacity:var(--o-2)!important}.o-3{opacity:var(--o-3)!important}.o-4{opacity:var(--o-4)!important}.o-5{opacity:var(--o-5)!important}}@layer helpers{.ar-square{aspect-ratio:var(--ar-square)!important}.ar-landscape{aspect-ratio:var(--ar-landscape)!important}.ar-portrait{aspect-ratio:var(--ar-portrait)!important}.ar-widescreen{aspect-ratio:var(--ar-widescreen)!important}.ar-golden{aspect-ratio:var(--ar-golden)!important}}@layer helpers{.w-0{width:0!important}.h-0{height:0!important}.m-0{margin:0!important}.mt-0{margin-top:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mr-0{margin-right:0!important}.mis-0{margin-inline-start:0!important}.mie-0{margin-inline-end:0!important}.p-0{padding:0!important}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.pis-0{padding-inline-start:0!important}.pie-0{padding-inline-end:0!important}.w-xs1{width:var(--xs1)!important}.h-xs1{height:var(--xs1)!important}.m-xs1{margin:var(--xs1)!important}.mt-xs1{margin-top:var(--xs1)!important}.mb-xs1{margin-bottom:var(--xs1)!important}.ml-xs1{margin-left:var(--xs1)!important}.mr-xs1{margin-right:var(--xs1)!important}.mis-xs1{margin-inline-start:var(--xs1)!important}.mie-xs1{margin-inline-end:var(--xs1)!important}.p-xs1{padding:var(--xs1)!important}.pt-xs1{padding-top:var(--xs1)!important}.pb-xs1{padding-bottom:var(--xs1)!important}.pl-xs1{padding-left:var(--xs1)!important}.pr-xs1{padding-right:var(--xs1)!important}.pis-xs1{padding-inline-start:var(--xs1)!important}.pie-xs1{padding-inline-end:var(--xs1)!important}.w-xs2{width:var(--xs2)!important}.h-xs2{height:var(--xs2)!important}.m-xs2{margin:var(--xs2)!important}.mt-xs2{margin-top:var(--xs2)!important}.mb-xs2{margin-bottom:var(--xs2)!important}.ml-xs2{margin-left:var(--xs2)!important}.mr-xs2{margin-right:var(--xs2)!important}.mis-xs2{margin-inline-start:var(--xs2)!important}.mie-xs2{margin-inline-end:var(--xs2)!important}.p-xs2{padding:var(--xs2)!important}.pt-xs2{padding-top:var(--xs2)!important}.pb-xs2{padding-bottom:var(--xs2)!important}.pl-xs2{padding-left:var(--xs2)!important}.pr-xs2{padding-right:var(--xs2)!important}.pis-xs2{padding-inline-start:var(--xs2)!important}.pie-xs2{padding-inline-end:var(--xs2)!important}.w-xs3{width:var(--xs3)!important}.h-xs3{height:var(--xs3)!important}.m-xs3{margin:var(--xs3)!important}.mt-xs3{margin-top:var(--xs3)!important}.mb-xs3{margin-bottom:var(--xs3)!important}.ml-xs3{margin-left:var(--xs3)!important}.mr-xs3{margin-right:var(--xs3)!important}.mis-xs3{margin-inline-start:var(--xs3)!important}.mie-xs3{margin-inline-end:var(--xs3)!important}.p-xs3{padding:var(--xs3)!important}.pt-xs3{padding-top:var(--xs3)!important}.pb-xs3{padding-bottom:var(--xs3)!important}.pl-xs3{padding-left:var(--xs3)!important}.pr-xs3{padding-right:var(--xs3)!important}.pis-xs3{padding-inline-start:var(--xs3)!important}.pie-xs3{padding-inline-end:var(--xs3)!important}.w-sm1{width:var(--sm1)!important}.h-sm1{height:var(--sm1)!important}.m-sm1{margin:var(--sm1)!important}.mt-sm1{margin-top:var(--sm1)!important}.mb-sm1{margin-bottom:var(--sm1)!important}.ml-sm1{margin-left:var(--sm1)!important}.mr-sm1{margin-right:var(--sm1)!important}.mis-sm1{margin-inline-start:var(--sm1)!important}.mie-sm1{margin-inline-end:var(--sm1)!important}.p-sm1{padding:var(--sm1)!important}.pt-sm1{padding-top:var(--sm1)!important}.pb-sm1{padding-bottom:var(--sm1)!important}.pl-sm1{padding-left:var(--sm1)!important}.pr-sm1{padding-right:var(--sm1)!important}.pis-sm1{padding-inline-start:var(--sm1)!important}.pie-sm1{padding-inline-end:var(--sm1)!important}.w-sm2{width:var(--sm2)!important}.h-sm2{height:var(--sm2)!important}.m-sm2{margin:var(--sm2)!important}.mt-sm2{margin-top:var(--sm2)!important}.mb-sm2{margin-bottom:var(--sm2)!important}.ml-sm2{margin-left:var(--sm2)!important}.mr-sm2{margin-right:var(--sm2)!important}.mis-sm2{margin-inline-start:var(--sm2)!important}.mie-sm2{margin-inline-end:var(--sm2)!important}.p-sm2{padding:var(--sm2)!important}.pt-sm2{padding-top:var(--sm2)!important}.pb-sm2{padding-bottom:var(--sm2)!important}.pl-sm2{padding-left:var(--sm2)!important}.pr-sm2{padding-right:var(--sm2)!important}.pis-sm2{padding-inline-start:var(--sm2)!important}.pie-sm2{padding-inline-end:var(--sm2)!important}.w-sm3{width:var(--sm3)!important}.h-sm3{height:var(--sm3)!important}.m-sm3{margin:var(--sm3)!important}.mt-sm3{margin-top:var(--sm3)!important}.mb-sm3{margin-bottom:var(--sm3)!important}.ml-sm3{margin-left:var(--sm3)!important}.mr-sm3{margin-right:var(--sm3)!important}.mis-sm3{margin-inline-start:var(--sm3)!important}.mie-sm3{margin-inline-end:var(--sm3)!important}.p-sm3{padding:var(--sm3)!important}.pt-sm3{padding-top:var(--sm3)!important}.pb-sm3{padding-bottom:var(--sm3)!important}.pl-sm3{padding-left:var(--sm3)!important}.pr-sm3{padding-right:var(--sm3)!important}.pis-sm3{padding-inline-start:var(--sm3)!important}.pie-sm3{padding-inline-end:var(--sm3)!important}.w-md1{width:var(--md1)!important}.h-md1{height:var(--md1)!important}.m-md1{margin:var(--md1)!important}.mt-md1{margin-top:var(--md1)!important}.mb-md1{margin-bottom:var(--md1)!important}.ml-md1{margin-left:var(--md1)!important}.mr-md1{margin-right:var(--md1)!important}.mis-md1{margin-inline-start:var(--md1)!important}.mie-md1{margin-inline-end:var(--md1)!important}.p-md1{padding:var(--md1)!important}.pt-md1{padding-top:var(--md1)!important}.pb-md1{padding-bottom:var(--md1)!important}.pl-md1{padding-left:var(--md1)!important}.pr-md1{padding-right:var(--md1)!important}.pis-md1{padding-inline-start:var(--md1)!important}.pie-md1{padding-inline-end:var(--md1)!important}.w-md2{width:var(--md2)!important}.h-md2{height:var(--md2)!important}.m-md2{margin:var(--md2)!important}.mt-md2{margin-top:var(--md2)!important}.mb-md2{margin-bottom:var(--md2)!important}.ml-md2{margin-left:var(--md2)!important}.mr-md2{margin-right:var(--md2)!important}.mis-md2{margin-inline-start:var(--md2)!important}.mie-md2{margin-inline-end:var(--md2)!important}.p-md2{padding:var(--md2)!important}.pt-md2{padding-top:var(--md2)!important}.pb-md2{padding-bottom:var(--md2)!important}.pl-md2{padding-left:var(--md2)!important}.pr-md2{padding-right:var(--md2)!important}.pis-md2{padding-inline-start:var(--md2)!important}.pie-md2{padding-inline-end:var(--md2)!important}.w-md3{width:var(--md3)!important}.h-md3{height:var(--md3)!important}.m-md3{margin:var(--md3)!important}.mt-md3{margin-top:var(--md3)!important}.mb-md3{margin-bottom:var(--md3)!important}.ml-md3{margin-left:var(--md3)!important}.mr-md3{margin-right:var(--md3)!important}.mis-md3{margin-inline-start:var(--md3)!important}.mie-md3{margin-inline-end:var(--md3)!important}.p-md3{padding:var(--md3)!important}.pt-md3{padding-top:var(--md3)!important}.pb-md3{padding-bottom:var(--md3)!important}.pl-md3{padding-left:var(--md3)!important}.pr-md3{padding-right:var(--md3)!important}.pis-md3{padding-inline-start:var(--md3)!important}.pie-md3{padding-inline-end:var(--md3)!important}.w-lg1{width:var(--lg1)!important}.h-lg1{height:var(--lg1)!important}.m-lg1{margin:var(--lg1)!important}.mt-lg1{margin-top:var(--lg1)!important}.mb-lg1{margin-bottom:var(--lg1)!important}.ml-lg1{margin-left:var(--lg1)!important}.mr-lg1{margin-right:var(--lg1)!important}.mis-lg1{margin-inline-start:var(--lg1)!important}.mie-lg1{margin-inline-end:var(--lg1)!important}.p-lg1{padding:var(--lg1)!important}.pt-lg1{padding-top:var(--lg1)!important}.pb-lg1{padding-bottom:var(--lg1)!important}.pl-lg1{padding-left:var(--lg1)!important}.pr-lg1{padding-right:var(--lg1)!important}.pis-lg1{padding-inline-start:var(--lg1)!important}.pie-lg1{padding-inline-end:var(--lg1)!important}.w-lg2{width:var(--lg2)!important}.h-lg2{height:var(--lg2)!important}.m-lg2{margin:var(--lg2)!important}.mt-lg2{margin-top:var(--lg2)!important}.mb-lg2{margin-bottom:var(--lg2)!important}.ml-lg2{margin-left:var(--lg2)!important}.mr-lg2{margin-right:var(--lg2)!important}.mis-lg2{margin-inline-start:var(--lg2)!important}.mie-lg2{margin-inline-end:var(--lg2)!important}.p-lg2{padding:var(--lg2)!important}.pt-lg2{padding-top:var(--lg2)!important}.pb-lg2{padding-bottom:var(--lg2)!important}.pl-lg2{padding-left:var(--lg2)!important}.pr-lg2{padding-right:var(--lg2)!important}.pis-lg2{padding-inline-start:var(--lg2)!important}.pie-lg2{padding-inline-end:var(--lg2)!important}.w-lg3{width:var(--lg3)!important}.h-lg3{height:var(--lg3)!important}.m-lg3{margin:var(--lg3)!important}.mt-lg3{margin-top:var(--lg3)!important}.mb-lg3{margin-bottom:var(--lg3)!important}.ml-lg3{margin-left:var(--lg3)!important}.mr-lg3{margin-right:var(--lg3)!important}.mis-lg3{margin-inline-start:var(--lg3)!important}.mie-lg3{margin-inline-end:var(--lg3)!important}.p-lg3{padding:var(--lg3)!important}.pt-lg3{padding-top:var(--lg3)!important}.pb-lg3{padding-bottom:var(--lg3)!important}.pl-lg3{padding-left:var(--lg3)!important}.pr-lg3{padding-right:var(--lg3)!important}.pis-lg3{padding-inline-start:var(--lg3)!important}.pie-lg3{padding-inline-end:var(--lg3)!important}.w-xl1{width:var(--xl1)!important}.h-xl1{height:var(--xl1)!important}.m-xl1{margin:var(--xl1)!important}.mt-xl1{margin-top:var(--xl1)!important}.mb-xl1{margin-bottom:var(--xl1)!important}.ml-xl1{margin-left:var(--xl1)!important}.mr-xl1{margin-right:var(--xl1)!important}.mis-xl1{margin-inline-start:var(--xl1)!important}.mie-xl1{margin-inline-end:var(--xl1)!important}.p-xl1{padding:var(--xl1)!important}.pt-xl1{padding-top:var(--xl1)!important}.pb-xl1{padding-bottom:var(--xl1)!important}.pl-xl1{padding-left:var(--xl1)!important}.pr-xl1{padding-right:var(--xl1)!important}.pis-xl1{padding-inline-start:var(--xl1)!important}.pie-xl1{padding-inline-end:var(--xl1)!important}.w-xl2{width:var(--xl2)!important}.h-xl2{height:var(--xl2)!important}.m-xl2{margin:var(--xl2)!important}.mt-xl2{margin-top:var(--xl2)!important}.mb-xl2{margin-bottom:var(--xl2)!important}.ml-xl2{margin-left:var(--xl2)!important}.mr-xl2{margin-right:var(--xl2)!important}.mis-xl2{margin-inline-start:var(--xl2)!important}.mie-xl2{margin-inline-end:var(--xl2)!important}.p-xl2{padding:var(--xl2)!important}.pt-xl2{padding-top:var(--xl2)!important}.pb-xl2{padding-bottom:var(--xl2)!important}.pl-xl2{padding-left:var(--xl2)!important}.pr-xl2{padding-right:var(--xl2)!important}.pis-xl2{padding-inline-start:var(--xl2)!important}.pie-xl2{padding-inline-end:var(--xl2)!important}.w-xl3{width:var(--xl3)!important}.h-xl3{height:var(--xl3)!important}.m-xl3{margin:var(--xl3)!important}.mt-xl3{margin-top:var(--xl3)!important}.mb-xl3{margin-bottom:var(--xl3)!important}.ml-xl3{margin-left:var(--xl3)!important}.mr-xl3{margin-right:var(--xl3)!important}.mis-xl3{margin-inline-start:var(--xl3)!important}.mie-xl3{margin-inline-end:var(--xl3)!important}.p-xl3{padding:var(--xl3)!important}.pt-xl3{padding-top:var(--xl3)!important}.pb-xl3{padding-bottom:var(--xl3)!important}.pl-xl3{padding-left:var(--xl3)!important}.pr-xl3{padding-right:var(--xl3)!important}.pis-xl3{padding-inline-start:var(--xl3)!important}.pie-xl3{padding-inline-end:var(--xl3)!important}.w-xxl1{width:var(--xxl1)!important}.h-xxl1{height:var(--xxl1)!important}.m-xxl1{margin:var(--xxl1)!important}.mt-xxl1{margin-top:var(--xxl1)!important}.mb-xxl1{margin-bottom:var(--xxl1)!important}.ml-xxl1{margin-left:var(--xxl1)!important}.mr-xxl1{margin-right:var(--xxl1)!important}.mis-xxl1{margin-inline-start:var(--xxl1)!important}.mie-xxl1{margin-inline-end:var(--xxl1)!important}.p-xxl1{padding:var(--xxl1)!important}.pt-xxl1{padding-top:var(--xxl1)!important}.pb-xxl1{padding-bottom:var(--xxl1)!important}.pl-xxl1{padding-left:var(--xxl1)!important}.pr-xxl1{padding-right:var(--xxl1)!important}.pis-xxl1{padding-inline-start:var(--xxl1)!important}.pie-xxl1{padding-inline-end:var(--xxl1)!important}.w-xxl2{width:var(--xxl2)!important}.h-xxl2{height:var(--xxl2)!important}.m-xxl2{margin:var(--xxl2)!important}.mt-xxl2{margin-top:var(--xxl2)!important}.mb-xxl2{margin-bottom:var(--xxl2)!important}.ml-xxl2{margin-left:var(--xxl2)!important}.mr-xxl2{margin-right:var(--xxl2)!important}.mis-xxl2{margin-inline-start:var(--xxl2)!important}.mie-xxl2{margin-inline-end:var(--xxl2)!important}.p-xxl2{padding:var(--xxl2)!important}.pt-xxl2{padding-top:var(--xxl2)!important}.pb-xxl2{padding-bottom:var(--xxl2)!important}.pl-xxl2{padding-left:var(--xxl2)!important}.pr-xxl2{padding-right:var(--xxl2)!important}.pis-xxl2{padding-inline-start:var(--xxl2)!important}.pie-xxl2{padding-inline-end:var(--xxl2)!important}.w-xxl3{width:var(--xxl3)!important}.h-xxl3{height:var(--xxl3)!important}.m-xxl3{margin:var(--xxl3)!important}.mt-xxl3{margin-top:var(--xxl3)!important}.mb-xxl3{margin-bottom:var(--xxl3)!important}.ml-xxl3{margin-left:var(--xxl3)!important}.mr-xxl3{margin-right:var(--xxl3)!important}.mis-xxl3{margin-inline-start:var(--xxl3)!important}.mie-xxl3{margin-inline-end:var(--xxl3)!important}.p-xxl3{padding:var(--xxl3)!important}.pt-xxl3{padding-top:var(--xxl3)!important}.pb-xxl3{padding-bottom:var(--xxl3)!important}.pl-xxl3{padding-left:var(--xxl3)!important}.pr-xxl3{padding-right:var(--xxl3)!important}.pis-xxl3{padding-inline-start:var(--xxl3)!important}.pie-xxl3{padding-inline-end:var(--xxl3)!important}.w-mega1{width:var(--mega1)!important}.h-mega1{height:var(--mega1)!important}.m-mega1{margin:var(--mega1)!important}.mt-mega1{margin-top:var(--mega1)!important}.mb-mega1{margin-bottom:var(--mega1)!important}.ml-mega1{margin-left:var(--mega1)!important}.mr-mega1{margin-right:var(--mega1)!important}.mis-mega1{margin-inline-start:var(--mega1)!important}.mie-mega1{margin-inline-end:var(--mega1)!important}.p-mega1{padding:var(--mega1)!important}.pt-mega1{padding-top:var(--mega1)!important}.pb-mega1{padding-bottom:var(--mega1)!important}.pl-mega1{padding-left:var(--mega1)!important}.pr-mega1{padding-right:var(--mega1)!important}.pis-mega1{padding-inline-start:var(--mega1)!important}.pie-mega1{padding-inline-end:var(--mega1)!important}.w-mega2{width:var(--mega2)!important}.h-mega2{height:var(--mega2)!important}.m-mega2{margin:var(--mega2)!important}.mt-mega2{margin-top:var(--mega2)!important}.mb-mega2{margin-bottom:var(--mega2)!important}.ml-mega2{margin-left:var(--mega2)!important}.mr-mega2{margin-right:var(--mega2)!important}.mis-mega2{margin-inline-start:var(--mega2)!important}.mie-mega2{margin-inline-end:var(--mega2)!important}.p-mega2{padding:var(--mega2)!important}.pt-mega2{padding-top:var(--mega2)!important}.pb-mega2{padding-bottom:var(--mega2)!important}.pl-mega2{padding-left:var(--mega2)!important}.pr-mega2{padding-right:var(--mega2)!important}.pis-mega2{padding-inline-start:var(--mega2)!important}.pie-mega2{padding-inline-end:var(--mega2)!important}.w-mega3{width:var(--mega3)!important}.h-mega3{height:var(--mega3)!important}.m-mega3{margin:var(--mega3)!important}.mt-mega3{margin-top:var(--mega3)!important}.mb-mega3{margin-bottom:var(--mega3)!important}.ml-mega3{margin-left:var(--mega3)!important}.mr-mega3{margin-right:var(--mega3)!important}.mis-mega3{margin-inline-start:var(--mega3)!important}.mie-mega3{margin-inline-end:var(--mega3)!important}.p-mega3{padding:var(--mega3)!important}.pt-mega3{padding-top:var(--mega3)!important}.pb-mega3{padding-bottom:var(--mega3)!important}.pl-mega3{padding-left:var(--mega3)!important}.pr-mega3{padding-right:var(--mega3)!important}.pis-mega3{padding-inline-start:var(--mega3)!important}.pie-mega3{padding-inline-end:var(--mega3)!important}.w-giga1{width:var(--giga1)!important}.h-giga1{height:var(--giga1)!important}.m-giga1{margin:var(--giga1)!important}.mt-giga1{margin-top:var(--giga1)!important}.mb-giga1{margin-bottom:var(--giga1)!important}.ml-giga1{margin-left:var(--giga1)!important}.mr-giga1{margin-right:var(--giga1)!important}.mis-giga1{margin-inline-start:var(--giga1)!important}.mie-giga1{margin-inline-end:var(--giga1)!important}.p-giga1{padding:var(--giga1)!important}.pt-giga1{padding-top:var(--giga1)!important}.pb-giga1{padding-bottom:var(--giga1)!important}.pl-giga1{padding-left:var(--giga1)!important}.pr-giga1{padding-right:var(--giga1)!important}.pis-giga1{padding-inline-start:var(--giga1)!important}.pie-giga1{padding-inline-end:var(--giga1)!important}.w-giga2{width:var(--giga2)!important}.h-giga2{height:var(--giga2)!important}.m-giga2{margin:var(--giga2)!important}.mt-giga2{margin-top:var(--giga2)!important}.mb-giga2{margin-bottom:var(--giga2)!important}.ml-giga2{margin-left:var(--giga2)!important}.mr-giga2{margin-right:var(--giga2)!important}.mis-giga2{margin-inline-start:var(--giga2)!important}.mie-giga2{margin-inline-end:var(--giga2)!important}.p-giga2{padding:var(--giga2)!important}.pt-giga2{padding-top:var(--giga2)!important}.pb-giga2{padding-bottom:var(--giga2)!important}.pl-giga2{padding-left:var(--giga2)!important}.pr-giga2{padding-right:var(--giga2)!important}.pis-giga2{padding-inline-start:var(--giga2)!important}.pie-giga2{padding-inline-end:var(--giga2)!important}.w-giga3{width:var(--giga3)!important}.h-giga3{height:var(--giga3)!important}.m-giga3{margin:var(--giga3)!important}.mt-giga3{margin-top:var(--giga3)!important}.mb-giga3{margin-bottom:var(--giga3)!important}.ml-giga3{margin-left:var(--giga3)!important}.mr-giga3{margin-right:var(--giga3)!important}.mis-giga3{margin-inline-start:var(--giga3)!important}.mie-giga3{margin-inline-end:var(--giga3)!important}.p-giga3{padding:var(--giga3)!important}.pt-giga3{padding-top:var(--giga3)!important}.pb-giga3{padding-bottom:var(--giga3)!important}.pl-giga3{padding-left:var(--giga3)!important}.pr-giga3{padding-right:var(--giga3)!important}.pis-giga3{padding-inline-start:var(--giga3)!important}.pie-giga3{padding-inline-end:var(--giga3)!important}.w-tera1{width:var(--tera1)!important}.h-tera1{height:var(--tera1)!important}.m-tera1{margin:var(--tera1)!important}.mt-tera1{margin-top:var(--tera1)!important}.mb-tera1{margin-bottom:var(--tera1)!important}.ml-tera1{margin-left:var(--tera1)!important}.mr-tera1{margin-right:var(--tera1)!important}.mis-tera1{margin-inline-start:var(--tera1)!important}.mie-tera1{margin-inline-end:var(--tera1)!important}.p-tera1{padding:var(--tera1)!important}.pt-tera1{padding-top:var(--tera1)!important}.pb-tera1{padding-bottom:var(--tera1)!important}.pl-tera1{padding-left:var(--tera1)!important}.pr-tera1{padding-right:var(--tera1)!important}.pis-tera1{padding-inline-start:var(--tera1)!important}.pie-tera1{padding-inline-end:var(--tera1)!important}.w-tera2{width:var(--tera2)!important}.h-tera2{height:var(--tera2)!important}.m-tera2{margin:var(--tera2)!important}.mt-tera2{margin-top:var(--tera2)!important}.mb-tera2{margin-bottom:var(--tera2)!important}.ml-tera2{margin-left:var(--tera2)!important}.mr-tera2{margin-right:var(--tera2)!important}.mis-tera2{margin-inline-start:var(--tera2)!important}.mie-tera2{margin-inline-end:var(--tera2)!important}.p-tera2{padding:var(--tera2)!important}.pt-tera2{padding-top:var(--tera2)!important}.pb-tera2{padding-bottom:var(--tera2)!important}.pl-tera2{padding-left:var(--tera2)!important}.pr-tera2{padding-right:var(--tera2)!important}.pis-tera2{padding-inline-start:var(--tera2)!important}.pie-tera2{padding-inline-end:var(--tera2)!important}.w-tera3{width:var(--tera3)!important}.h-tera3{height:var(--tera3)!important}.m-tera3{margin:var(--tera3)!important}.mt-tera3{margin-top:var(--tera3)!important}.mb-tera3{margin-bottom:var(--tera3)!important}.ml-tera3{margin-left:var(--tera3)!important}.mr-tera3{margin-right:var(--tera3)!important}.mis-tera3{margin-inline-start:var(--tera3)!important}.mie-tera3{margin-inline-end:var(--tera3)!important}.p-tera3{padding:var(--tera3)!important}.pt-tera3{padding-top:var(--tera3)!important}.pb-tera3{padding-bottom:var(--tera3)!important}.pl-tera3{padding-left:var(--tera3)!important}.pr-tera3{padding-right:var(--tera3)!important}.pis-tera3{padding-inline-start:var(--tera3)!important}.pie-tera3{padding-inline-end:var(--tera3)!important}}@layer helpers{.font-text{font-family:var(--text)!important}.font-display{font-family:var(--display)!important}.font-mono{font-family:var(--mono)!important}.font-italic{font-style:italic!important}.font-normal{font-style:normal!important}.font-extra-light{font-weight:var(--extra-light)!important}.font-light{font-weight:var(--light)!important}.font-book{font-weight:var(--book)!important}.font-semi-bold{font-weight:var(--semi-bold)!important}.font-bold{font-weight:var(--bold)!important}.font-black{font-weight:var(--black)!important}.text-xs{font-size:var(--text-xs)!important}.text-sm{font-size:var(--text-sm)!important}.text-md{font-size:var(--text-md)!important}.text-lg{font-size:var(--text-lg)!important}.text-xl{font-size:var(--text-xl)!important}.display-sm{font-size:var(--display-sm)!important}.display-md{font-size:var(--display-md)!important}.display-lg{font-size:var(--display-lg)!important}.display-xl{font-size:var(--display-xl)!important}.display-mega{font-size:var(--display-mega)!important}.display-giga{font-size:var(--display-giga)!important}.tracking-sm{letter-spacing:var(--tracking-sm)!important}.tracking-md{letter-spacing:var(--tracking-md)!important}.tracking-lg{letter-spacing:var(--tracking-lg)!important}.tracking-xl{letter-spacing:var(--tracking-xl)!important}.tracking-xxl{letter-spacing:var(--tracking-xxl)!important}.leading-xs{line-height:var(--leading-xs)!important}.leading-sm{line-height:var(--leading-sm)!important}.leading-md{line-height:var(--leading-md)!important}.leading-lg{line-height:var(--leading-lg)!important}.leading-xl{line-height:var(--leading-xl)!important}.leading-xxl{line-height:var(--leading-xxl)!important}.text-left{text-align:left!important}.text-center{text-align:center!important}.text-right{text-align:right!important}.text-justify{text-align:justify!important}.text-start{text-align:start!important}.text-end{text-align:end!important}.text-uppercase{text-transform:uppercase!important}.text-lowercase{text-transform:lowercase!important}.text-capitalize{text-transform:capitalize!important}}@layer theme.defaults{:root{--xs1: 4px;--xs2: 8px;--xs3: 12px;--sm1: 16px;--sm2: 20px;--sm3: 24px;--md1: 28px;--md2: 32px;--md3: 36px;--lg1: 40px;--lg2: 44px;--lg3: 48px;--xl1: 56px;--xl2: 64px;--xl3: 80px;--xxl1: 96px;--xxl2: 112px;--xxl3: 128px;--mega1: 160px;--mega2: 192px;--mega3: 224px;--giga1: 256px;--giga2: 288px;--giga3: 320px;--tera1: 384px;--tera2: 480px;--tera3: 520px;--ar-square: 1;--ar-landscape: 4/3;--ar-portrait: 3/4;--ar-widescreen: 16/9;--ar-golden: 1.618/1;--display: Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, ui-sans-serif, sans-serif;--text: ui-sans-serif, system-ui, sans-serif;--mono: Dank Mono, Inconsolata, Fira Mono, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, ui-monospace, monospace;--text-xs: .694rem;--text-sm: .833rem;--text-md: 1rem;--text-lg: 1.2rem;--text-xl: 1.44rem;--display-sm: 1.728rem;--display-md: 2.074rem;--display-lg: 2.488rem;--display-xl: 2.986rem;--display-mega: 3.583rem;--display-giga: 4.299rem;--extra-light: 200;--light: 300;--book: 400;--semi-bold: 600;--bold: 700;--black: 900;--tracking-sm: -.05em;--tracking-md: .025em;--tracking-lg: .05em;--tracking-xl: .075em;--tracking-xxl: .15em;--leading-xs: 1;--leading-sm: 1.15;--leading-md: 1.375;--leading-lg: 1.5;--leading-xl: 1.75;--leading-xxl: 2;--base-0: #fff;--base-50: #f6f7f9;--base-100: #edeef1;--base-200: #d6dbe1;--base-300: #b2bbc7;--base-400: #8897a8;--base-500: #697a8e;--base-600: #546375;--base-700: #4a5666;--base-800: #3c4550;--base-900: #353c45;--base-950: #23282e;--primary-50: #f0f9ff;--primary-100: #e0f2fe;--primary-200: #bae6fd;--primary-300: #7dd3fc;--primary-400: #38bdf8;--primary-500: #0ea5e9;--primary-600: #0284c7;--primary-700: #0369a1;--primary-800: #075985;--primary-900: #0c4a6e;--primary-950: #082f49;--yes-100: #d5f6e8;--yes-200: #afebd4;--yes-300: #7adbbd;--yes-400: #46c4a0;--yes-500: #13886d;--no-100: #ffe4e6;--no-200: #fecdd3;--no-300: #fda4af;--no-400: #fb7185;--no-500: #e11d48;--maybe-100: #fff7d6;--maybe-200: #fff0b3;--maybe-300: #ffd64a;--maybe-400: #ffc220;--maybe-500: #f9a007;--highlight-500: #ffee00;--border-sm: 1px;--border-md: 2px;--border-lg: 4px;--border-xl: 8px;--border-xxl: 12px;--radius-sm: 3px;--radius-md: 5px;--radius-lg: 8px;--radius-xl: 12px;--radius-xxl: 16px;--radius-round: 1e5px;--shadow-sm: 0 1px 3px 0 var(--ui-shadow-color), 0 1px 2px -1px var(--ui-shadow-color);--shadow-md: 0 4px 6px -1px var(--ui-shadow-color), 0 2px 4px -2px var(--ui-shadow-color);--shadow-lg: 0 8px 13px -3px var(--ui-shadow-color), 0 4px 6px -4px var(--ui-shadow-color);--shadow-xl: 0 20px 20px -5px var(--ui-shadow-color), 0 8px 10px -6px var(--ui-shadow-color);--shadow-xxl: 0px 11px 8px -6px var(--ui-shadow-color), 0 10px 15px 2px var(--ui-shadow-color);--o-0: 0;--o-1: .2;--o-2: .4;--o-3: .6;--o-4: .8;--o-5: 1;--z-bottom: -1000000000;--z-0: 0;--z-1: 10;--z-2: 20;--z-3: 30;--z-4: 40;--z-5: 50;--z-top: 1000000000;--transition: .22s ease-in-out;--transition-fast: .1s ease-in-out}}@layer theme.defaults{:root{color-scheme:light dark;--ui-border-color: light-dark(var(--base-200), var(--base-500));--ui-shadow-color: light-dark(rgb(0 0 0 / .1), rgb(0 0 0 / .6));--focus-ring-color: light-dark(var(--primary-500), var(--primary-400));--focus-ring-width: 2px;--focus-ring-offset: 2px;--success-100: var(--yes-100);--success-200: var(--yes-200);--success-300: var(--yes-300);--success-400: var(--yes-400);--success-500: var(--yes-500);--danger-100: var(--no-100);--danger-200: var(--no-200);--danger-300: var(--no-300);--danger-400: var(--no-400);--danger-500: var(--no-500);--warning-100: var(--maybe-100);--warning-200: var(--maybe-200);--warning-300: var(--maybe-300);--warning-400: var(--maybe-400);--warning-500: var(--maybe-500)}:root.theme-light{color-scheme:light}:root.theme-dark{color-scheme:dark}:root{accent-color:var(--primary-500);--body-background-color: light-dark(var(--base-0), var(--base-950));--body-line-height: var(--leading-lg);--input-height: var(--md3);--input-padding: var(--xs3);--input-border-width: var(--border-sm);--input-border-color: var(--ui-border-color);--input-border-radius: var(--radius-md);--input-border-color-invalid: light-dark( var(--danger-500), var(--danger-400) );--label-spacing: var(--xs1);--fieldset-padding: var(--sm3);--fieldset-border-width: var(--border-sm);--fieldset-border-color: var(--ui-border-color);--fieldset-border-radius: var(--radius-lg);--meter-height: var(--sm1);--meter-border-radius: var(--radius-md);--meter-track-color: var(--primary-100);--meter-low-color: var(--danger-400);--meter-medium-color: var(--warning-400);--meter-high-color: var(--success-400);--progress-height: var(--sm1);--progress-color: var(--primary-500);--progress-track-color: var(--primary-100);--progress-border-radius: var(--radius-md);--select-icon-size: var(--sm3);--select-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");--dialog-min-width: var(--tera1);--dialog-max-width: var(--tera3);--dialog-padding: var(--lg1) var(--md1);--dialog-border-width: var(--border-sm);--dialog-border-color: light-dark(var(--base-200), var(--base-800));--dialog-background-color: light-dark(var(--base-50), var(--base-900));--dialog-border-radius: var(--radius-lg);--dialog-backdrop-color: var(--base-950);--dialog-backdrop-opacity: var(--o-4);--details-padding: var(--sm1);--details-spacing: var(--xs3);--details-border-width: var(--border-sm);--details-border-color: light-dark(var(--base-200), var(--base-800));--details-background-color: light-dark(var(--base-50), var(--base-900));--details-border-radius: var(--radius-lg);--details-icon-size: var(--sm3);--details-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");--table-padding: var(--xs2) var(--sm1);--table-border-width: var(--border-sm);--table-border-color: light-dark(var(--base-100), var(--base-700));--table-border-radius: var(--radius-md);--table-background-color: none;--table-caption-spacing: var(--xs3);--figcaption-spacing: var(--xs2);--heading-font: var(--display);--heading-weight: var(--black);--heading-letter-spacing: normal;--heading-font-size-h1: clamp( var(--display-md), 1.269rem + 2.682vw, var(--display-xl) );--heading-font-size-h2: clamp( var(--display-sm), 1.057rem + 2.235vw, var(--display-lg) );--heading-font-size-h3: clamp( var(--text-xl), .881rem + 1.865vw, var(--display-md) );--heading-font-size-h4: clamp( var(--text-lg), .734rem + 1.553vw, var(--display-sm) );--heading-font-size-h5: clamp( var(--text-lg), .988rem + .706vw, var(--text-xl) );--heading-font-size-h6: clamp( var(--text-md), .824rem + .588vw, var(--text-lg) );--heading-line-height: var(--leading-sm);--heading-line-height-h1: var(--heading-line-height);--heading-line-height-h2: var(--heading-line-height);--heading-line-height-h3: var(--heading-line-height);--heading-line-height-h4: var(--leading-md);--heading-line-height-h5: var(--leading-md);--heading-line-height-h6: var(--leading-md);--heading-spacing-h1: .4em;--heading-spacing-h2: .4em;--heading-spacing-h3: .4em;--heading-spacing-h4: .4em;--heading-spacing-h5: .4em;--heading-spacing-h6: .4em;--heading-spacing-consecutive: .3em;--text-color: light-dark(var(--base-950), var(--base-200));--link-font-weight: var(--semi-bold);--link-color: light-dark(var(--primary-600), var(--primary-400));--link-color-hover: var(--primary-500);--text-code-color: light-dark(var(--primary-600), var(--primary-400));--text-code-background-color: light-dark( var(--primary-100), var(--primary-900) );--text-code-muted-color: light-dark(var(--base-500), var(--base-300));--pre-border-radius: var(--radius-md);--pre-font-size: .9rem;--blockquote-padding-block: var(--sm1);--blockquote-padding-inline: var(--md1) var(--sm3);--blockquote-background-color: light-dark( var(--primary-50), var(--primary-900) );--blockquote-border-radius: var(--radius-md);--blockquote-accent-width: var(--xs2);--blockquote-accent-color: linear-gradient( var(--primary-800), var(--primary-500) );--hr-content: "";--ins-color: var(--base-950);--ins-background-color: var(--success-200);--marker-color: var(--highlight-500);--selection-color: light-dark(var(--base-950), var(--base-0));--selection-background-color: light-dark( var(--primary-200), var(--primary-700) )}:root{--grid-column-gap: var(--sm1);--grid-row-gap: var(--sm1);@media(width>=768px){--grid-column-gap: var(--sm3);--grid-row-gap: var(--sm3)}--wrap-spacing: var(--sm1);--wrap-md-spacing: var(--sm3);--wrap-lg-spacing: 0;--wrap-width-sm: minmax(0, 55ch);--wrap-width-md: minmax(0, 70ch);--wrap-width-lg: minmax(0, 900px);--wrap-width: var(--wrap-width-md);--layout-content-width: 70ch;--layout-aside-width: 245px;--layout-toc-width: 1fr;--prose-spacing: var(--sm1)}:root{--badge-font-size: var(--text-sm);--badge-border-radius: var(--radius-md);--badge-color: var(--base-0);--badge-background-color: light-dark(var(--base-700), var(--base-600));--badge-primary-color: var(--base-0);--badge-primary-background-color: light-dark( var(--primary-600), var(--primary-500) );--badge-success-color: light-dark(var(--success-500), var(--base-0));--badge-success-background-color: light-dark( var(--success-100), var(--success-500) );--badge-danger-color: light-dark(var(--danger-500), var(--base-0));--badge-danger-background-color: light-dark( var(--danger-100), var(--danger-500) );--badge-warning-color: light-dark(var(--warning-500), var(--base-950));--badge-warning-background-color: light-dark( var(--warning-100), var(--warning-500) )}:root{--bt-min-width: 101px;--bt-min-width-md: 123px;--bt-min-width-lg: 133px;--bt-font-size: var(--text-sm);--bt-font-size-lg: var(--text-md);--bt-font-weight: var(--semi-bold);--bt-color: var(--text-color);--bt-color-hover: light-dark(var(--text-color), var(--base-0));--bt-background-color: light-dark(var(--base-0), var(--base-800));--bt-background-color-hover: light-dark(var(--base-50), var(--base-900));--bt-border-color: var(--ui-border-color);--bt-border-width: var(--border-sm);--bt-border-radius: var(--radius-lg);--bt-border-radius-lg: var(--radius-xl);--bt-outline-color-hover: light-dark(var(--base-950), var(--base-0));--bt-outline-background-color-hover: light-dark( rgb(0 0 0 / .1), rgb(255 255 255 / .1) );--bt-outline-border-color: light-dark(var(--base-950), var(--base-0));--bt-outline-border-color-hover: light-dark(var(--base-950), var(--base-0));--bt-primary-color: var(--base-0);--bt-primary-color-hover: var(--base-0);--bt-primary-background-color: var(--primary-600);--bt-primary-background-color-hover: var(--primary-500);--bt-primary-border-color: var(--primary-600);--bt-primary-border-color-hover: var(--primary-600)}:root{--avatar-color: var(--base-0);--avatar-background-color: var(--base-400);--avatar-border-color: light-dark(var(--base-0), var(--base-500));--avatar-border-width: var(--border-sm);--avatar-radius: var(--radius-round);--avatar-status-dot-color-offline: var(--base-300);--avatar-status-dot-color-online: var(--yes-400)}:root{--banner-color: var(--base-0);--banner-background-color: light-dark(var(--primary-600), var(--primary-800))}:root{--breadcrumbs-separator: "/";--breadcrumbs-separator-color: light-dark(var(--base-300), var(--base-600));--breadcrumbs-color: light-dark(var(--base-500), var(--base-400));--breadcrumbs-color-current: var(--text-color)}:root{--card-spacing: var(--sm3);--card-color: var(--text-color);--card-secondary-text-color: light-dark(var(--base-400), var(--base-500));--card-bg-color: light-dark(var(--base-100), var(--base-900));--card-border-radius: var(--radius-lg);--card-border-color: var(--ui-border-color);--card-border-width: var(--border-sm);--card-shadow: var(--shadow-md);--card-shadow-hover: var(--shadow-xl);--card-loading-bg: light-dark(var(--base-200), var(--base-900));--card-aspect-ratio: var(--ar-golden)}:root{--toggle-width: 50px;--toggle-height: 28px;--toggle-border-width: 2px;--toggle-track-color: light-dark(var(--base-300), var(--base-700));--toggle-track-color-checked: var(--yes-400);--toggle-thumb-color: var(--body-background-color)}:root{--faq-spacing: var(--xs3)}:root{--field-spacing: var(--xs1);--field-hint-color: light-dark(var(--base-400), var(--base-500));--field-error-color: light-dark(var(--danger-500), var(--danger-300));--field-message-position: static}:root{--featureItem-icon-box-size: var(--lg3);--featureItem-icon-size: var(--sm3);--featureItem-icon-color: light-dark(var(--primary-600), var(--primary-300));--featureItem-icon-background-color: light-dark( var(--primary-100), var(--primary-900) );--featureItem-icon-border-radius: var(--radius-lg)}:root{--footer-background-color: light-dark(var(--primary-950), var(--base-950));--footer-text-color: light-dark(var(--base-0), var(--base-200));--footer-border-width: var(--border-md);--footer-border-color: light-dark(transparent, var(--base-700));--footer-link-color: light-dark(var(--base-0), var(--base-200));--footer-link-color-hover: light-dark(var(--primary-200), var(--base-0))}:root{--header-height: var(--xl1);--header-padding: var(--sm1);@media(width>=768px){--header-height: var(--xl2);--header-padding: var(--sm3)}--header-background-color: light-dark(var(--base-0), var(--base-950));--header-menu-background-color: var(--base-950);--header-menu-color: var(--base-0);--header-menu-color-current: var(--primary-400);--header-menu-secondary-color: var(--base-300);--header-menu-border-color: var(--base-500)}:root{--hero-radius: var(--radius-xl);--hero-content-padding: var(--md3);--hero-actions-spacing: var(--lg3);--hero-pagination-dot: var(--sm1);--hero-pagination-dot-color: var(--base-0);--hero-pagination-dot-active-color: var(--primary-600);--hero-pagination-opacity: var(--o-4)}:root{--pagination-size: var(--md3);--pagination-border-radius: var(--radius-md);--pagination-color: var(--text-color);--pagination-color-current: var(--base-0);--pagination-background-color-current: light-dark( var(--primary-600), var(--primary-500) );--pagination-background-color-hover: light-dark( var(--base-100), var(--base-800) )}:root{--prevNext-border-color: var(--ui-border-color);--prevNext-border-radius: var(--radius-lg);--prevNext-border-color-hover: var(--link-color);--prevNext-label-color: light-dark(var(--base-400), var(--base-500))}:root{--notice-spacing: var(--sm1);--notice-text-color: light-dark(var(--base-950), var(--base-0));--notice-background-color: light-dark(var(--base-50), var(--base-800));--notice-border-color: light-dark(var(--base-200), var(--base-500));--notice-border-width: var(--border-sm);--notice-border-radius: var(--radius-lg)}:root{--pricingCard-highlight-border-color: light-dark( var(--primary-600), var(--primary-400) );--pricingCard-check-color: light-dark(var(--success-500), var(--success-400))}:root{--readProgressBar-height: var(--xs1);--readProgressBar-color: linear-gradient( 90deg, var(--primary-600) 0%, var(--primary-400) 100% )}:root{--section-spacing: var(--xl3);--section-header-spacing: var(--lg3);--section-eyebrow-color: light-dark(var(--primary-600), var(--primary-400));--section-lede-color: light-dark(var(--base-500), var(--base-400));--section-filled-background-color: light-dark( var(--base-50), var(--base-900) );--section-primary-background-color: light-dark( var(--primary-600), var(--primary-900) );--section-primary-text-color: var(--base-0);--section-primary-link-color: var(--primary-100);--section-primary-link-color-hover: var(--base-0);--section-primary-eyebrow-color: var(--primary-200);--section-primary-lede-color: var(--primary-100)}:root{--testimonial-role-color: light-dark(var(--base-400), var(--base-500))}:root{--tags-padding: var(--xs2);--tags-font-size: var(--text-sm);--tags-color: light-dark(var(--base-500), var(--base-400));--tags-background-color: light-dark(var(--base-100), var(--base-800));--tags-background-color-hover: light-dark(var(--base-200), var(--base-950));--tags-radius: var(--radius-md)}:root{--toc-color: var(--link-color);--toc-color-hover: var(--link-color-hover);--toc-spacing: var(--xs1);--toc-indentation: var(--xs3);--toc-icon-size: var(--sm1)}} +@layer base,elements,global,components,theme.default,theme.user,helpers;@layer base,elements,global,components,theme.default,theme.user,helpers;@layer base{*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion:reduce){*,:before,:after{animation-delay:-1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}}:where(:not(dialog)){margin:0}html,body{min-height:100%}}@layer elements{body{line-sizing:normal;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;background-color:var(--body-background-color);color:var(--text-color);font-family:var(--text);line-height:var(--body-line-height);&:has(.body-is-locked){overflow:hidden}}}@layer elements{::selection{color:var(--selection-color);background-color:var(--selection-background-color)}:where(a,u,ins,abbr){text-underline-offset:2px}a{font-weight:var(--link-font-weight);color:var(--link-color);&:where(:hover){color:var(--link-color-hover);-webkit-text-decoration:none;text-decoration:none}}address{width:max-content;max-width:100%;padding:var(--sm1) var(--sm3);font-style:normal;background-color:light-dark(var(--base-50),var(--base-900));border:var(--xs2) solid transparent;border-image:8 repeating-linear-gradient(-45deg,var(--no-500) 0,var(--no-500) var(--xs2),transparent 0,transparent calc(var(--xs2) * 2),var(--primary-500) 0,var(--primary-500) calc(var(--xs2) * 3),transparent 0,transparent calc(var(--xs2) * 4))}abbr{position:relative;cursor:help;&:after{position:relative;top:calc(var(--xs1) * -1);width:var(--sm1);height:var(--sm1);display:inline-block;content:"";background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='circle-help'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M9.09%209a3%203%200%200%201%205.83%201c0%202-3%203-3%203'/%3E%3Cpath%20d='M12%2017h.01'/%3E%3C/svg%3E");background-size:contain}&:hover:before{width:max-content;max-width:400px;position:absolute;left:50%;padding:var(--xs1) var(--xs3);content:attr(title);color:var(--base-0);background-color:var(--base-900);opacity:var(--o-4);border-radius:var(--radius-sm);transform:translate(-50%,-2em)}}blockquote{position:relative;margin-bottom:var(--prose-spacing);padding-block:var(--blockquote-padding-block);padding-inline:var(--blockquote-padding-inline);font-style:italic;background-color:var(--blockquote-background-color);border-radius:var(--blockquote-border-radius);&:before{content:"";position:absolute;top:0;inset-inline-start:0;width:var(--blockquote-accent-width);height:100%;border-start-start-radius:var(--blockquote-border-radius);border-end-start-radius:var(--blockquote-border-radius);background:var(--blockquote-accent-color)}p{&:first-child:before{content:open-quote}&:last-child{margin-bottom:0;&:after{content:close-quote}}}}cite{font-style:italic}code,var,kbd{font-family:var(--mono);font-size:.9em;font-style:normal;color:var(--text-code-muted-color)}:is(code,var,kbd):not(h1 *,h2 *,h3 *,h4 *,h5 *,h6 *,pre *){padding:.15em .3em;color:var(--text-code-color);background-color:var(--text-code-background-color);border-radius:var(--radius-sm)}dt{font-weight:var(--bold)}dd+dt{margin-top:.5em}del{text-decoration-color:var(--danger-500);text-decoration-style:wavy}h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{overflow-wrap:break-word;text-wrap:balance}h1,.h1,h2,.h2,h3,.h3,h4,.h4{font-family:var(--heading-font);font-weight:var(--heading-weight);letter-spacing:var(--heading-letter-spacing)}h1,.h1{margin-bottom:var(--heading-spacing-h1);font-size:var(--heading-font-size-h1);line-height:var(--heading-line-height-h1)}h2,.h2{margin-bottom:var(--heading-spacing-h2);font-size:var(--heading-font-size-h2);line-height:var(--heading-line-height-h2)}h3,.h3{margin-bottom:var(--heading-spacing-h3);font-size:var(--heading-font-size-h3);line-height:var(--heading-line-height-h3)}h4,.h4{margin-bottom:var(--heading-spacing-h4);font-size:var(--heading-font-size-h4);line-height:var(--heading-line-height-h4)}h5,.h5{margin-bottom:var(--heading-spacing-h5);font-size:var(--heading-font-size-h5);line-height:var(--heading-line-height-h5)}h6,.h6{margin-bottom:var(--heading-spacing-h6);font-size:var(--heading-font-size-h6);line-height:var(--heading-line-height-h6)}:where(h1,h2,h3):has(+:is(h2,h3,h4)){margin-bottom:var(--heading-spacing-consecutive)}hr{display:flex;justify-content:center;align-items:center;height:0;border-style:solid;border-width:var(--border-sm) 0 0;color:var(--ui-border-color);overflow:visible;&:after{content:var(--hr-content);padding:0 var(--xs1);line-height:1;letter-spacing:var(--tracking-sm);background-color:var(--body-background-color)}}:where(hr):has(+:is(p)){margin-bottom:var(--prose-spacing)}ins{padding:.15em .3em;color:var(--ins-color);background-color:var(--ins-background-color);border-radius:var(--radius-sm);-webkit-text-decoration:none;text-decoration:none;&:before{content:"+ "}}mark{padding:.15em .5em;background:var(--marker-color);border-radius:1em 0}:where(ol,ul){list-style-type:none;padding:0}pre{font-family:var(--mono);font-size:var(--pre-font-size);white-space:pre-wrap;border-radius:var(--pre-border-radius)}q{font-style:italic}s{text-decoration-color:light-dark(var(--base-950),var(--base-50));text-decoration-style:wavy}sub,sup{line-height:1}}@layer elements{:root{quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(af),:not(:lang(af))>:lang(af){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ak),:not(:lang(ak))>:lang(ak){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(asa),:not(:lang(asa))>:lang(asa){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(az),:not(:lang(az))>:lang(az){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(bem),:not(:lang(bem))>:lang(bem){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(bez),:not(:lang(bez))>:lang(bez){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(bn),:not(:lang(bn))>:lang(bn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(brx),:not(:lang(brx))>:lang(brx){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(cgg),:not(:lang(cgg))>:lang(cgg){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(chr),:not(:lang(chr))>:lang(chr){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(cy),:not(:lang(cy))>:lang(cy){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(da),:not(:lang(da))>:lang(da){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(dav),:not(:lang(dav))>:lang(dav){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(dje),:not(:lang(dje))>:lang(dje){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(dz),:not(:lang(dz))>:lang(dz){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ebu),:not(:lang(ebu))>:lang(ebu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ee),:not(:lang(ee))>:lang(ee){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(en),:not(:lang(en))>:lang(en){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(fil),:not(:lang(fil))>:lang(fil){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(fo),:not(:lang(fo))>:lang(fo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ga),:not(:lang(ga))>:lang(ga){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(gd),:not(:lang(gd))>:lang(gd){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(gl),:not(:lang(gl))>:lang(gl){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(gu),:not(:lang(gu))>:lang(gu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(guz),:not(:lang(guz))>:lang(guz){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ha),:not(:lang(ha))>:lang(ha){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(hi),:not(:lang(hi))>:lang(hi){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(id),:not(:lang(id))>:lang(id){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ig),:not(:lang(ig))>:lang(ig){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(jmc),:not(:lang(jmc))>:lang(jmc){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kam),:not(:lang(kam))>:lang(kam){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kde),:not(:lang(kde))>:lang(kde){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kea),:not(:lang(kea))>:lang(kea){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(khq),:not(:lang(khq))>:lang(khq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ki),:not(:lang(ki))>:lang(ki){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kln),:not(:lang(kln))>:lang(kln){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(km),:not(:lang(km))>:lang(km){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kn),:not(:lang(kn))>:lang(kn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ko),:not(:lang(ko))>:lang(ko){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ksb),:not(:lang(ksb))>:lang(ksb){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lg),:not(:lang(lg))>:lang(lg){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ln),:not(:lang(ln))>:lang(ln){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lo),:not(:lang(lo))>:lang(lo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lrc),:not(:lang(lrc))>:lang(lrc){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lu),:not(:lang(lu))>:lang(lu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(luo),:not(:lang(luo))>:lang(luo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lv),:not(:lang(lv))>:lang(lv){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mas),:not(:lang(mas))>:lang(mas){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mer),:not(:lang(mer))>:lang(mer){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mfe),:not(:lang(mfe))>:lang(mfe){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mgo),:not(:lang(mgo))>:lang(mgo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ml),:not(:lang(ml))>:lang(ml){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mn),:not(:lang(mn))>:lang(mn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mr),:not(:lang(mr))>:lang(mr){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ms),:not(:lang(ms))>:lang(ms){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mt),:not(:lang(mt))>:lang(mt){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(my),:not(:lang(my))>:lang(my){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(naq),:not(:lang(naq))>:lang(naq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(nd),:not(:lang(nd))>:lang(nd){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ne),:not(:lang(ne))>:lang(ne){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(nus),:not(:lang(nus))>:lang(nus){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(nyn),:not(:lang(nyn))>:lang(nyn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(pa),:not(:lang(pa))>:lang(pa){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(pt),:not(:lang(pt))>:lang(pt){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(rof),:not(:lang(rof))>:lang(rof){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(rwk),:not(:lang(rwk))>:lang(rwk){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(saq),:not(:lang(saq))>:lang(saq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(sbp),:not(:lang(sbp))>:lang(sbp){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(seh),:not(:lang(seh))>:lang(seh){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ses),:not(:lang(ses))>:lang(ses){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(si),:not(:lang(si))>:lang(si){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(so),:not(:lang(so))>:lang(so){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(sw),:not(:lang(sw))>:lang(sw){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ta),:not(:lang(ta))>:lang(ta){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(te),:not(:lang(te))>:lang(te){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(teo),:not(:lang(teo))>:lang(teo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(th),:not(:lang(th))>:lang(th){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(to),:not(:lang(to))>:lang(to){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(tr),:not(:lang(tr))>:lang(tr){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(twq),:not(:lang(twq))>:lang(twq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(tzm),:not(:lang(tzm))>:lang(tzm){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(uz-Cyrl),:not(:lang(uz-Cyrl))>:lang(uz-Cyrl){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vai),:not(:lang(vai))>:lang(vai){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vai-Latn),:not(:lang(vai-Latn))>:lang(vai-Latn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vi),:not(:lang(vi))>:lang(vi){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vun),:not(:lang(vun))>:lang(vun){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(xog),:not(:lang(xog))>:lang(xog){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(yo),:not(:lang(yo))>:lang(yo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(yue-Hans),:not(:lang(yue-Hans))>:lang(yue-Hans){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(zh),:not(:lang(zh))>:lang(zh){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(zu),:not(:lang(zu))>:lang(zu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(uz),:not(:lang(uz))>:lang(uz){quotes:"\201c" "\201d" "\2019" "\2018"}:root:lang(eu),:not(:lang(eu))>:lang(eu){quotes:"\201c" "\201d" "\201c" "\201d"}:root:lang(tk),:not(:lang(tk))>:lang(tk){quotes:"\201c" "\201d" "\201c" "\201d"}:root:lang(ar),:not(:lang(ar))>:lang(ar){quotes:"\201d" "\201c" "\2019" "\2018"}:root:lang(ur),:not(:lang(ur))>:lang(ur){quotes:"\201d" "\201c" "\2019" "\2018"}:root:lang(fi),:not(:lang(fi))>:lang(fi){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(he),:not(:lang(he))>:lang(he){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(lag),:not(:lang(lag))>:lang(lag){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(rn),:not(:lang(rn))>:lang(rn){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(sn),:not(:lang(sn))>:lang(sn){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(sv),:not(:lang(sv))>:lang(sv){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(sr),:not(:lang(sr))>:lang(sr){quotes:"\201e" "\201c" "\2018" "\2018"}:root:lang(sr-Latn),:not(:lang(sr-Latn))>:lang(sr-Latn){quotes:"\201e" "\201c" "\2018" "\2018"}:root:lang(bg),:not(:lang(bg))>:lang(bg){quotes:"\201e" "\201c" "\201e" "\201c"}:root:lang(lt),:not(:lang(lt))>:lang(lt){quotes:"\201e" "\201c" "\201e" "\201c"}:root:lang(bs-Cyrl),:not(:lang(bs-Cyrl))>:lang(bs-Cyrl){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(cs),:not(:lang(cs))>:lang(cs){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(de),:not(:lang(de))>:lang(de){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(dsb),:not(:lang(dsb))>:lang(dsb){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(et),:not(:lang(et))>:lang(et){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(hr),:not(:lang(hr))>:lang(hr){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(hsb),:not(:lang(hsb))>:lang(hsb){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(is),:not(:lang(is))>:lang(is){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(lb),:not(:lang(lb))>:lang(lb){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(luy),:not(:lang(luy))>:lang(luy){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(mk),:not(:lang(mk))>:lang(mk){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(sk),:not(:lang(sk))>:lang(sk){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(sl),:not(:lang(sl))>:lang(sl){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(ka),:not(:lang(ka))>:lang(ka){quotes:"\201e" "\201c" "\ab" "\bb"}:root:lang(bs),:not(:lang(bs))>:lang(bs){quotes:"\201e" "\201d" "\2018" "\2019"}:root:lang(agq),:not(:lang(agq))>:lang(agq){quotes:"\201e" "\201d" "\201a" "\2019"}:root:lang(ff),:not(:lang(ff))>:lang(ff){quotes:"\201e" "\201d" "\201a" "\2019"}:root:lang(nmg),:not(:lang(nmg))>:lang(nmg){quotes:"\201e" "\201d" "\ab" "\bb"}:root:lang(ro),:not(:lang(ro))>:lang(ro){quotes:"\201e" "\201d" "\ab" "\bb"}:root:lang(pl),:not(:lang(pl))>:lang(pl){quotes:"\201e" "\201d" "\ab" "\bb"}:root:lang(hu),:not(:lang(hu))>:lang(hu){quotes:"\201e" "\201d" "\bb" "\ab"}:root:lang(nl),:not(:lang(nl))>:lang(nl){quotes:"\2018" "\2019" "\201c" "\201d"}:root:lang(ti-ER),:not(:lang(ti-ER))>:lang(ti-ER){quotes:"\2018" "\2019" "\201c" "\201d"}:root:lang(dua),:not(:lang(dua))>:lang(dua){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(ksf),:not(:lang(ksf))>:lang(ksf){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(rw),:not(:lang(rw))>:lang(rw){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(nn),:not(:lang(nn))>:lang(nn){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(nb),:not(:lang(nb))>:lang(nb){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(ast),:not(:lang(ast))>:lang(ast){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(bm),:not(:lang(bm))>:lang(bm){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(br),:not(:lang(br))>:lang(br){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(ca),:not(:lang(ca))>:lang(ca){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(dyo),:not(:lang(dyo))>:lang(dyo){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(el),:not(:lang(el))>:lang(el){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(es),:not(:lang(es))>:lang(es){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(ewo),:not(:lang(ewo))>:lang(ewo){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(mg),:not(:lang(mg))>:lang(mg){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(mua),:not(:lang(mua))>:lang(mua){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(sg),:not(:lang(sg))>:lang(sg){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(it),:not(:lang(it))>:lang(it){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(kab),:not(:lang(kab))>:lang(kab){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(kk),:not(:lang(kk))>:lang(kk){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(pt-PT),:not(:lang(pt-PT))>:lang(pt-PT){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(nnh),:not(:lang(nnh))>:lang(nnh){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(sq),:not(:lang(sq))>:lang(sq){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(bas),:not(:lang(bas))>:lang(bas){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(be),:not(:lang(be))>:lang(be){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(ky),:not(:lang(ky))>:lang(ky){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(sah),:not(:lang(sah))>:lang(sah){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(ru),:not(:lang(ru))>:lang(ru){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(uk),:not(:lang(uk))>:lang(uk){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(zgh),:not(:lang(zgh))>:lang(zgh){quotes:"\ab" "\bb" "\201e" "\201d"}:root:lang(shi),:not(:lang(shi))>:lang(shi){quotes:"\ab" "\bb" "\201e" "\201d"}:root:lang(shi-Latn),:not(:lang(shi-Latn))>:lang(shi-Latn){quotes:"\ab" "\bb" "\201e" "\201d"}:root:lang(am),:not(:lang(am))>:lang(am){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(az-Cyrl),:not(:lang(az-Cyrl))>:lang(az-Cyrl){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(fa),:not(:lang(fa))>:lang(fa){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(fr-CH),:not(:lang(fr-CH))>:lang(fr-CH){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(gsw),:not(:lang(gsw))>:lang(gsw){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(jgo),:not(:lang(jgo))>:lang(jgo){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(kkj),:not(:lang(kkj))>:lang(kkj){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(mzn),:not(:lang(mzn))>:lang(mzn){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(fr),:not(:lang(fr))>:lang(fr){quotes:"\ab" "\bb" "\ab" "\bb"}:root:lang(hy),:not(:lang(hy))>:lang(hy){quotes:"\ab" "\bb" "\ab" "\bb"}:root:lang(yav),:not(:lang(yav))>:lang(yav){quotes:"\ab" "\bb" "\ab" "\bb"}:root:lang(ja),:not(:lang(ja))>:lang(ja){quotes:"\300c" "\300d" "\300e" "\300f"}:root:lang(yue),:not(:lang(yue))>:lang(yue){quotes:"\300c" "\300d" "\300e" "\300f"}:root:lang(zh-Hant),:not(:lang(zh-Hant))>:lang(zh-Hant){quotes:"\300c" "\300d" "\300e" "\300f"}}@layer elements{audio,canvas,embed,iframe,img,object,picture,svg,video{display:block;vertical-align:middle;max-width:100%}img,svg,video,canvas{height:auto}audio{width:100%;max-width:var(--tera1)}audio:not([controls]){display:none}figcaption{font-style:italic;font-size:var(--text-sm)}figure{&:has(*+figcaption){figcaption{margin-top:var(--figcaption-spacing)}}&:has(figcaption+*){figcaption{margin-bottom:var(--figcaption-spacing)}}}iframe{border:var(--border-sm) solid var(--ui-border-color)}}@layer elements{caption{caption-side:bottom;margin-top:var(--table-caption-spacing);font-size:var(--text-sm)}table{border-spacing:0;border:var(--table-border-width) solid var(--table-border-color);border-radius:var(--table-border-radius);background-color:var(--table-background-color)}th,td{text-align:start;padding:var(--table-padding);border-bottom:var(--table-border-width) solid var(--table-border-color);border-inline-start:var(--table-border-width) solid var(--table-border-color)}tr{th:first-child,td:first-child{border-inline-start-width:0}}tbody{tr:last-child{th,td{border-bottom-width:0}}}tfoot{th,td{border-top:var(--table-border-width) solid var(--table-border-color);border-bottom-width:0}}}@layer elements{::placeholder{opacity:var(--o-4)}input,button,textarea,select{font:inherit;color:var(--text-color)}button{color:var(--text-color)}fieldset{border:var(--fieldset-border-width) solid var(--fieldset-border-color);border-radius:var(--fieldset-border-radius);padding:var(--fieldset-padding);ul:has([type=checkbox],[type=radio]){padding-inline-start:0}>[aria-hidden]{margin-bottom:var(--sm3);font-size:var(--text-lg);grid-column:1 / -1}}:is(input,select,textarea):user-invalid{border-color:var(--input-border-color-invalid)}input{&:where(:not([type=checkbox],[type=radio])){height:var(--input-height)}&:where(:not([type=color],[type=file],[type=reset],[type=submit])){padding:var(--input-padding)}&:where(:not([type=color])){border-radius:var(--input-border-radius)}&:where(:not([type=file])){border:var(--input-border-width) solid var(--input-border-color)}&[type=file]{width:100%;accent-color:var(--text-color)}&[type=number]{padding-inline-end:var(--xs1)}}label{display:block;&:has(+:is(input,select,textarea)){margin-bottom:var(--label-spacing)}}legend{position:absolute;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);width:1px;height:1px;white-space:nowrap}meter{width:100%;background:var(--meter-track-color);border-radius:var(--meter-border-radius);height:var(--meter-height);&::-webkit-meter-bar{background:var(--meter-track-color)}&::-webkit-meter-bar,&::-webkit-meter-optimum-value,&::-webkit-meter-suboptimum-value,&::-webkit-meter-even-less-good-value{height:var(--meter-height);border:none;border-radius:var(--meter-border-radius)}&::-webkit-meter-even-less-good-value{background:var(--meter-low-color)}&::-webkit-meter-suboptimum-value{background:var(--meter-medium-color)}&::-webkit-meter-optimum-value{background:var(--meter-high-color)}&:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:var(--meter-low-color)}&:-moz-meter-sub-optimum::-moz-meter-bar{background:var(--meter-medium-color)}&:-moz-meter-optimum::-moz-meter-bar{background:var(--meter-high-color)}}progress{appearance:none;width:100%;height:var(--progress-height);background:var(--progress-track-color);border-radius:var(--progress-border-radius);border:none;&::-moz-progress-bar{background:var(--progress-color);border-radius:var(--progress-border-radius)}&::-webkit-progress-bar{width:100%;background:var(--progress-track-color);border-radius:var(--progress-border-radius);height:var(--progress-height)}&::-webkit-progress-value{background:var(--progress-color);border-radius:var(--progress-border-radius)}}select{--split: calc(100% - var(--select-icon-size));display:flex;appearance:none;height:var(--input-height);padding:var(--xs1) calc(var(--input-padding) + var(--md1)) var(--xs1) var(--input-padding);border:var(--input-border-width) solid var(--input-border-color);border-radius:var(--input-border-radius);background:linear-gradient(to right,var(--body-background-color) 0 var(--split),var(--text-color) var(--split) 100%);mask-image:var(--select-icon),linear-gradient(to right,transparent calc(var(--split) - 1px),red 0),linear-gradient(red 0 0);mask-size:var(--select-icon-size),auto,auto;mask-position:calc(100% - var(--xs1)) center,0 0,0 0;mask-repeat:no-repeat;mask-clip:padding-box,padding-box,border-box;mask-origin:padding-box,padding-box,border-box;mask-composite:add,exclude;&:disabled{--disabled-color: light-dark( hsl(from var(--text-color) h s 70%), hsl(from var(--text-color) h s 40%) );cursor:not-allowed;color:var(--disabled-color);background:linear-gradient(to right,var(--body-background-color) 0 var(--split),var(--disabled-color) var(--split) 100%)}&[multiple]{height:auto;padding:var(--input-padding);background:var(--body-background-color);mask-image:none}}textarea{width:100%;padding:var(--input-padding);border-radius:var(--input-border-radius);border:var(--input-border-width) solid var(--input-border-color);resize:vertical;&:not([rows]){min-height:6em}}}@layer elements{dialog{min-width:var(--dialog-min-width);max-width:var(--dialog-max-width);padding:var(--dialog-padding);border:var(--dialog-border-width) solid var(--dialog-border-color);background-color:var(--dialog-background-color);border-radius:var(--dialog-border-radius);&::backdrop{background:var(--dialog-backdrop-color);opacity:var(--dialog-backdrop-opacity)}[aria-label="close pop-up"]{position:absolute;top:var(--xs3);right:var( --xs3 );background:transparent;border:none;outline:none;cursor:pointer}p:last-of-type{margin-bottom:0}}details{padding:var(--details-padding);border:var(--details-border-width) solid var(--details-border-color);background-color:var(--details-background-color);border-radius:var(--details-border-radius);cursor:pointer;summary{display:flex;justify-content:space-between;font-weight:var(--bold);&::-webkit-details-marker{display:none}&:after{content:"";width:var(--details-icon-size);height:var(--details-icon-size);background-color:currentColor;mask-image:var(--details-icon);mask-size:contain;mask-repeat:no-repeat;transition:transform var(--transition)}}&[open]>summary{margin-bottom:var(--details-spacing);&:after{transform:rotate(180deg)}}p:last-of-type{margin-bottom:0}}}@layer global{:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.a11y-skipLink{position:fixed;z-index:var(--z-top);inset-block-start:-100vb;inset-inline-start:0;padding:.75em 1.25em;background-color:var(--body-background-color);color:var(--text-color)}.a11y-skipLink:focus{inset-block-start:0}.a11y-srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}}@layer global{@keyframes fadeFromOpaque{0%{opacity:1}}@keyframes fadeToOpaque{to{opacity:1}}@keyframes fadeFromTransparent{0%{opacity:0}}@keyframes fadeToTransparent{to{opacity:0}}}@layer global{.grid{display:grid;--grid-tc: repeat(4, 1fr);--grid-cs: 1;--grid-ce: -1;grid-template-columns:var(--grid-tc);grid-column-gap:var(--grid-column-gap);grid-row-gap:var(--grid-row-gap)}.grid-flush{grid-column-gap:0;grid-row-gap:0}.grid>.grid_item{display:block;appearance:none;-webkit-appearance:none}.grid[col="1"]{--grid-tc: repeat(1, 1fr) }.grid[col="2"]{--grid-tc: repeat(2, 1fr) }.grid[col="3"]{--grid-tc: repeat(3, 1fr) }.grid[col="4"]{--grid-tc: repeat(4, 1fr) }.grid[col="5"]{--grid-tc: repeat(5, 1fr) }.grid[col="6"]{--grid-tc: repeat(6, 1fr) }.grid[col="7"]{--grid-tc: repeat(7, 1fr) }.grid[col="8"]{--grid-tc: repeat(8, 1fr) }.grid[col="9"]{--grid-tc: repeat(9, 1fr) }.grid[col="10"]{--grid-tc: repeat(10, 1fr) }.grid[col="11"]{--grid-tc: repeat(11, 1fr) }.grid[col="12"]{--grid-tc: repeat(12, 1fr) }.grid[col="13"]{--grid-tc: repeat(13, 1fr) }.grid[col="14"]{--grid-tc: repeat(14, 1fr) }.grid[col="15"]{--grid-tc: repeat(15, 1fr) }.grid[col="16"]{--grid-tc: repeat(16, 1fr) }.grid[col="17"]{--grid-tc: repeat(17, 1fr) }.grid[col="18"]{--grid-tc: repeat(18, 1fr) }.grid[col="19"]{--grid-tc: repeat(19, 1fr) }.grid[col="20"]{--grid-tc: repeat(20, 1fr) }.grid[col="21"]{--grid-tc: repeat(21, 1fr) }.grid[col="22"]{--grid-tc: repeat(22, 1fr) }.grid[col="23"]{--grid-tc: repeat(23, 1fr) }.grid[col="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span^="1"]{--grid-cs: 1 }.grid>.grid_item[span^="2"]{--grid-cs: 2 }.grid>.grid_item[span^="3"]{--grid-cs: 3 }.grid>.grid_item[span^="4"]{--grid-cs: 4 }.grid>.grid_item[span^="5"]{--grid-cs: 5 }.grid>.grid_item[span^="6"]{--grid-cs: 6 }.grid>.grid_item[span^="7"]{--grid-cs: 7 }.grid>.grid_item[span^="8"]{--grid-cs: 8 }.grid>.grid_item[span^="9"]{--grid-cs: 9 }.grid>.grid_item[span^="10"]{--grid-cs: 10 }.grid>.grid_item[span^="11"]{--grid-cs: 11 }.grid>.grid_item[span^="12"]{--grid-cs: 12 }.grid>.grid_item[span^="13"]{--grid-cs: 13 }.grid>.grid_item[span^="14"]{--grid-cs: 14 }.grid>.grid_item[span^="15"]{--grid-cs: 15 }.grid>.grid_item[span^="16"]{--grid-cs: 16 }.grid>.grid_item[span^="17"]{--grid-cs: 17 }.grid>.grid_item[span^="18"]{--grid-cs: 18 }.grid>.grid_item[span^="19"]{--grid-cs: 19 }.grid>.grid_item[span^="20"]{--grid-cs: 20 }.grid>.grid_item[span^="21"]{--grid-cs: 21 }.grid>.grid_item[span^="22"]{--grid-cs: 22 }.grid>.grid_item[span^="23"]{--grid-cs: 23 }.grid>.grid_item[span^="24"]{--grid-cs: 24 }.grid>.grid_item[span$="+1"],.grid>.grid_item[span="1"]{--grid-ce: 1 }.grid>.grid_item[span$="+2"],.grid>.grid_item[span$="-1"],.grid>.grid_item[span="2"]{--grid-ce: 2 }.grid>.grid_item[span$="+3"],.grid>.grid_item[span$="-2"],.grid>.grid_item[span="3"]{--grid-ce: 3 }.grid>.grid_item[span$="+4"],.grid>.grid_item[span$="-3"],.grid>.grid_item[span="4"]{--grid-ce: 4 }.grid>.grid_item[span$="+5"],.grid>.grid_item[span$="-4"],.grid>.grid_item[span="5"]{--grid-ce: 5 }.grid>.grid_item[span$="+6"],.grid>.grid_item[span$="-5"],.grid>.grid_item[span="6"]{--grid-ce: 6 }.grid>.grid_item[span$="+7"],.grid>.grid_item[span$="-6"],.grid>.grid_item[span="7"]{--grid-ce: 7 }.grid>.grid_item[span$="+8"],.grid>.grid_item[span$="-7"],.grid>.grid_item[span="8"]{--grid-ce: 8 }.grid>.grid_item[span$="+9"],.grid>.grid_item[span$="-8"],.grid>.grid_item[span="9"]{--grid-ce: 9 }.grid>.grid_item[span$="+10"],.grid>.grid_item[span$="-9"],.grid>.grid_item[span="10"]{--grid-ce: 10 }.grid>.grid_item[span$="+11"],.grid>.grid_item[span$="-10"],.grid>.grid_item[span="11"]{--grid-ce: 11 }.grid>.grid_item[span$="+12"],.grid>.grid_item[span$="-11"],.grid>.grid_item[span="12"]{--grid-ce: 12 }.grid>.grid_item[span$="+13"],.grid>.grid_item[span$="-12"],.grid>.grid_item[span="13"]{--grid-ce: 13 }.grid>.grid_item[span$="+14"],.grid>.grid_item[span$="-13"],.grid>.grid_item[span="14"]{--grid-ce: 14 }.grid>.grid_item[span$="+15"],.grid>.grid_item[span$="-14"],.grid>.grid_item[span="15"]{--grid-ce: 15 }.grid>.grid_item[span$="+16"],.grid>.grid_item[span$="-15"],.grid>.grid_item[span="16"]{--grid-ce: 16 }.grid>.grid_item[span$="+17"],.grid>.grid_item[span$="-16"],.grid>.grid_item[span="17"]{--grid-ce: 17 }.grid>.grid_item[span$="+18"],.grid>.grid_item[span$="-17"],.grid>.grid_item[span="18"]{--grid-ce: 18 }.grid>.grid_item[span$="+19"],.grid>.grid_item[span$="-18"],.grid>.grid_item[span="19"]{--grid-ce: 19 }.grid>.grid_item[span$="+20"],.grid>.grid_item[span$="-19"],.grid>.grid_item[span="20"]{--grid-ce: 20 }.grid>.grid_item[span$="+21"],.grid>.grid_item[span$="-20"],.grid>.grid_item[span="21"]{--grid-ce: 21 }.grid>.grid_item[span$="+22"],.grid>.grid_item[span$="-21"],.grid>.grid_item[span="22"]{--grid-ce: 22 }.grid>.grid_item[span$="+23"],.grid>.grid_item[span$="-22"],.grid>.grid_item[span="23"]{--grid-ce: 23 }.grid>.grid_item[span$="+24"],.grid>.grid_item[span$="-23"],.grid>.grid_item[span="24"]{--grid-ce: 24 }.grid>.grid_item[span$="-24"]{--grid-ce: 25 }.grid>.grid_item[span]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span*="+"],.grid>.grid_item[span*="-"],.grid>.grid_item[span*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span*="-"],.grid>.grid_item[span*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span=row]{grid-column:1 / -1}@media only screen and (width>=768px){.grid[col-md="1"]{--grid-tc: repeat(1, 1fr) }.grid[col-md="2"]{--grid-tc: repeat(2, 1fr) }.grid[col-md="3"]{--grid-tc: repeat(3, 1fr) }.grid[col-md="4"]{--grid-tc: repeat(4, 1fr) }.grid[col-md="5"]{--grid-tc: repeat(5, 1fr) }.grid[col-md="6"]{--grid-tc: repeat(6, 1fr) }.grid[col-md="7"]{--grid-tc: repeat(7, 1fr) }.grid[col-md="8"]{--grid-tc: repeat(8, 1fr) }.grid[col-md="9"]{--grid-tc: repeat(9, 1fr) }.grid[col-md="10"]{--grid-tc: repeat(10, 1fr) }.grid[col-md="11"]{--grid-tc: repeat(11, 1fr) }.grid[col-md="12"]{--grid-tc: repeat(12, 1fr) }.grid[col-md="13"]{--grid-tc: repeat(13, 1fr) }.grid[col-md="14"]{--grid-tc: repeat(14, 1fr) }.grid[col-md="15"]{--grid-tc: repeat(15, 1fr) }.grid[col-md="16"]{--grid-tc: repeat(16, 1fr) }.grid[col-md="17"]{--grid-tc: repeat(17, 1fr) }.grid[col-md="18"]{--grid-tc: repeat(18, 1fr) }.grid[col-md="19"]{--grid-tc: repeat(19, 1fr) }.grid[col-md="20"]{--grid-tc: repeat(20, 1fr) }.grid[col-md="21"]{--grid-tc: repeat(21, 1fr) }.grid[col-md="22"]{--grid-tc: repeat(22, 1fr) }.grid[col-md="23"]{--grid-tc: repeat(23, 1fr) }.grid[col-md="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span-md^="1"]{--grid-cs: 1 }.grid>.grid_item[span-md^="2"]{--grid-cs: 2 }.grid>.grid_item[span-md^="3"]{--grid-cs: 3 }.grid>.grid_item[span-md^="4"]{--grid-cs: 4 }.grid>.grid_item[span-md^="5"]{--grid-cs: 5 }.grid>.grid_item[span-md^="6"]{--grid-cs: 6 }.grid>.grid_item[span-md^="7"]{--grid-cs: 7 }.grid>.grid_item[span-md^="8"]{--grid-cs: 8 }.grid>.grid_item[span-md^="9"]{--grid-cs: 9 }.grid>.grid_item[span-md^="10"]{--grid-cs: 10 }.grid>.grid_item[span-md^="11"]{--grid-cs: 11 }.grid>.grid_item[span-md^="12"]{--grid-cs: 12 }.grid>.grid_item[span-md^="13"]{--grid-cs: 13 }.grid>.grid_item[span-md^="14"]{--grid-cs: 14 }.grid>.grid_item[span-md^="15"]{--grid-cs: 15 }.grid>.grid_item[span-md^="16"]{--grid-cs: 16 }.grid>.grid_item[span-md^="17"]{--grid-cs: 17 }.grid>.grid_item[span-md^="18"]{--grid-cs: 18 }.grid>.grid_item[span-md^="19"]{--grid-cs: 19 }.grid>.grid_item[span-md^="20"]{--grid-cs: 20 }.grid>.grid_item[span-md^="21"]{--grid-cs: 21 }.grid>.grid_item[span-md^="22"]{--grid-cs: 22 }.grid>.grid_item[span-md^="23"]{--grid-cs: 23 }.grid>.grid_item[span-md^="24"]{--grid-cs: 24 }.grid>.grid_item[span-md$="+1"],.grid>.grid_item[span-md="1"]{--grid-ce: 1 }.grid>.grid_item[span-md$="+2"],.grid>.grid_item[span-md$="-1"],.grid>.grid_item[span-md="2"]{--grid-ce: 2 }.grid>.grid_item[span-md$="+3"],.grid>.grid_item[span-md$="-2"],.grid>.grid_item[span-md="3"]{--grid-ce: 3 }.grid>.grid_item[span-md$="+4"],.grid>.grid_item[span-md$="-3"],.grid>.grid_item[span-md="4"]{--grid-ce: 4 }.grid>.grid_item[span-md$="+5"],.grid>.grid_item[span-md$="-4"],.grid>.grid_item[span-md="5"]{--grid-ce: 5 }.grid>.grid_item[span-md$="+6"],.grid>.grid_item[span-md$="-5"],.grid>.grid_item[span-md="6"]{--grid-ce: 6 }.grid>.grid_item[span-md$="+7"],.grid>.grid_item[span-md$="-6"],.grid>.grid_item[span-md="7"]{--grid-ce: 7 }.grid>.grid_item[span-md$="+8"],.grid>.grid_item[span-md$="-7"],.grid>.grid_item[span-md="8"]{--grid-ce: 8 }.grid>.grid_item[span-md$="+9"],.grid>.grid_item[span-md$="-8"],.grid>.grid_item[span-md="9"]{--grid-ce: 9 }.grid>.grid_item[span-md$="+10"],.grid>.grid_item[span-md$="-9"],.grid>.grid_item[span-md="10"]{--grid-ce: 10 }.grid>.grid_item[span-md$="+11"],.grid>.grid_item[span-md$="-10"],.grid>.grid_item[span-md="11"]{--grid-ce: 11 }.grid>.grid_item[span-md$="+12"],.grid>.grid_item[span-md$="-11"],.grid>.grid_item[span-md="12"]{--grid-ce: 12 }.grid>.grid_item[span-md$="+13"],.grid>.grid_item[span-md$="-12"],.grid>.grid_item[span-md="13"]{--grid-ce: 13 }.grid>.grid_item[span-md$="+14"],.grid>.grid_item[span-md$="-13"],.grid>.grid_item[span-md="14"]{--grid-ce: 14 }.grid>.grid_item[span-md$="+15"],.grid>.grid_item[span-md$="-14"],.grid>.grid_item[span-md="15"]{--grid-ce: 15 }.grid>.grid_item[span-md$="+16"],.grid>.grid_item[span-md$="-15"],.grid>.grid_item[span-md="16"]{--grid-ce: 16 }.grid>.grid_item[span-md$="+17"],.grid>.grid_item[span-md$="-16"],.grid>.grid_item[span-md="17"]{--grid-ce: 17 }.grid>.grid_item[span-md$="+18"],.grid>.grid_item[span-md$="-17"],.grid>.grid_item[span-md="18"]{--grid-ce: 18 }.grid>.grid_item[span-md$="+19"],.grid>.grid_item[span-md$="-18"],.grid>.grid_item[span-md="19"]{--grid-ce: 19 }.grid>.grid_item[span-md$="+20"],.grid>.grid_item[span-md$="-19"],.grid>.grid_item[span-md="20"]{--grid-ce: 20 }.grid>.grid_item[span-md$="+21"],.grid>.grid_item[span-md$="-20"],.grid>.grid_item[span-md="21"]{--grid-ce: 21 }.grid>.grid_item[span-md$="+22"],.grid>.grid_item[span-md$="-21"],.grid>.grid_item[span-md="22"]{--grid-ce: 22 }.grid>.grid_item[span-md$="+23"],.grid>.grid_item[span-md$="-22"],.grid>.grid_item[span-md="23"]{--grid-ce: 23 }.grid>.grid_item[span-md$="+24"],.grid>.grid_item[span-md$="-23"],.grid>.grid_item[span-md="24"]{--grid-ce: 24 }.grid>.grid_item[span-md$="-24"]{--grid-ce: 25 }.grid>.grid_item[span-md]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span-md*="+"],.grid>.grid_item[span-md*="-"],.grid>.grid_item[span-md*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span-md*="-"],.grid>.grid_item[span-md*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span-md=row]{grid-column:1 / -1}}@media only screen and (width>=1024px){.grid[col-lg="1"]{--grid-tc: repeat(1, 1fr) }.grid[col-lg="2"]{--grid-tc: repeat(2, 1fr) }.grid[col-lg="3"]{--grid-tc: repeat(3, 1fr) }.grid[col-lg="4"]{--grid-tc: repeat(4, 1fr) }.grid[col-lg="5"]{--grid-tc: repeat(5, 1fr) }.grid[col-lg="6"]{--grid-tc: repeat(6, 1fr) }.grid[col-lg="7"]{--grid-tc: repeat(7, 1fr) }.grid[col-lg="8"]{--grid-tc: repeat(8, 1fr) }.grid[col-lg="9"]{--grid-tc: repeat(9, 1fr) }.grid[col-lg="10"]{--grid-tc: repeat(10, 1fr) }.grid[col-lg="11"]{--grid-tc: repeat(11, 1fr) }.grid[col-lg="12"]{--grid-tc: repeat(12, 1fr) }.grid[col-lg="13"]{--grid-tc: repeat(13, 1fr) }.grid[col-lg="14"]{--grid-tc: repeat(14, 1fr) }.grid[col-lg="15"]{--grid-tc: repeat(15, 1fr) }.grid[col-lg="16"]{--grid-tc: repeat(16, 1fr) }.grid[col-lg="17"]{--grid-tc: repeat(17, 1fr) }.grid[col-lg="18"]{--grid-tc: repeat(18, 1fr) }.grid[col-lg="19"]{--grid-tc: repeat(19, 1fr) }.grid[col-lg="20"]{--grid-tc: repeat(20, 1fr) }.grid[col-lg="21"]{--grid-tc: repeat(21, 1fr) }.grid[col-lg="22"]{--grid-tc: repeat(22, 1fr) }.grid[col-lg="23"]{--grid-tc: repeat(23, 1fr) }.grid[col-lg="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span-lg^="1"]{--grid-cs: 1 }.grid>.grid_item[span-lg^="2"]{--grid-cs: 2 }.grid>.grid_item[span-lg^="3"]{--grid-cs: 3 }.grid>.grid_item[span-lg^="4"]{--grid-cs: 4 }.grid>.grid_item[span-lg^="5"]{--grid-cs: 5 }.grid>.grid_item[span-lg^="6"]{--grid-cs: 6 }.grid>.grid_item[span-lg^="7"]{--grid-cs: 7 }.grid>.grid_item[span-lg^="8"]{--grid-cs: 8 }.grid>.grid_item[span-lg^="9"]{--grid-cs: 9 }.grid>.grid_item[span-lg^="10"]{--grid-cs: 10 }.grid>.grid_item[span-lg^="11"]{--grid-cs: 11 }.grid>.grid_item[span-lg^="12"]{--grid-cs: 12 }.grid>.grid_item[span-lg^="13"]{--grid-cs: 13 }.grid>.grid_item[span-lg^="14"]{--grid-cs: 14 }.grid>.grid_item[span-lg^="15"]{--grid-cs: 15 }.grid>.grid_item[span-lg^="16"]{--grid-cs: 16 }.grid>.grid_item[span-lg^="17"]{--grid-cs: 17 }.grid>.grid_item[span-lg^="18"]{--grid-cs: 18 }.grid>.grid_item[span-lg^="19"]{--grid-cs: 19 }.grid>.grid_item[span-lg^="20"]{--grid-cs: 20 }.grid>.grid_item[span-lg^="21"]{--grid-cs: 21 }.grid>.grid_item[span-lg^="22"]{--grid-cs: 22 }.grid>.grid_item[span-lg^="23"]{--grid-cs: 23 }.grid>.grid_item[span-lg^="24"]{--grid-cs: 24 }.grid>.grid_item[span-lg$="+1"],.grid>.grid_item[span-lg="1"]{--grid-ce: 1 }.grid>.grid_item[span-lg$="+2"],.grid>.grid_item[span-lg$="-1"],.grid>.grid_item[span-lg="2"]{--grid-ce: 2 }.grid>.grid_item[span-lg$="+3"],.grid>.grid_item[span-lg$="-2"],.grid>.grid_item[span-lg="3"]{--grid-ce: 3 }.grid>.grid_item[span-lg$="+4"],.grid>.grid_item[span-lg$="-3"],.grid>.grid_item[span-lg="4"]{--grid-ce: 4 }.grid>.grid_item[span-lg$="+5"],.grid>.grid_item[span-lg$="-4"],.grid>.grid_item[span-lg="5"]{--grid-ce: 5 }.grid>.grid_item[span-lg$="+6"],.grid>.grid_item[span-lg$="-5"],.grid>.grid_item[span-lg="6"]{--grid-ce: 6 }.grid>.grid_item[span-lg$="+7"],.grid>.grid_item[span-lg$="-6"],.grid>.grid_item[span-lg="7"]{--grid-ce: 7 }.grid>.grid_item[span-lg$="+8"],.grid>.grid_item[span-lg$="-7"],.grid>.grid_item[span-lg="8"]{--grid-ce: 8 }.grid>.grid_item[span-lg$="+9"],.grid>.grid_item[span-lg$="-8"],.grid>.grid_item[span-lg="9"]{--grid-ce: 9 }.grid>.grid_item[span-lg$="+10"],.grid>.grid_item[span-lg$="-9"],.grid>.grid_item[span-lg="10"]{--grid-ce: 10 }.grid>.grid_item[span-lg$="+11"],.grid>.grid_item[span-lg$="-10"],.grid>.grid_item[span-lg="11"]{--grid-ce: 11 }.grid>.grid_item[span-lg$="+12"],.grid>.grid_item[span-lg$="-11"],.grid>.grid_item[span-lg="12"]{--grid-ce: 12 }.grid>.grid_item[span-lg$="+13"],.grid>.grid_item[span-lg$="-12"],.grid>.grid_item[span-lg="13"]{--grid-ce: 13 }.grid>.grid_item[span-lg$="+14"],.grid>.grid_item[span-lg$="-13"],.grid>.grid_item[span-lg="14"]{--grid-ce: 14 }.grid>.grid_item[span-lg$="+15"],.grid>.grid_item[span-lg$="-14"],.grid>.grid_item[span-lg="15"]{--grid-ce: 15 }.grid>.grid_item[span-lg$="+16"],.grid>.grid_item[span-lg$="-15"],.grid>.grid_item[span-lg="16"]{--grid-ce: 16 }.grid>.grid_item[span-lg$="+17"],.grid>.grid_item[span-lg$="-16"],.grid>.grid_item[span-lg="17"]{--grid-ce: 17 }.grid>.grid_item[span-lg$="+18"],.grid>.grid_item[span-lg$="-17"],.grid>.grid_item[span-lg="18"]{--grid-ce: 18 }.grid>.grid_item[span-lg$="+19"],.grid>.grid_item[span-lg$="-18"],.grid>.grid_item[span-lg="19"]{--grid-ce: 19 }.grid>.grid_item[span-lg$="+20"],.grid>.grid_item[span-lg$="-19"],.grid>.grid_item[span-lg="20"]{--grid-ce: 20 }.grid>.grid_item[span-lg$="+21"],.grid>.grid_item[span-lg$="-20"],.grid>.grid_item[span-lg="21"]{--grid-ce: 21 }.grid>.grid_item[span-lg$="+22"],.grid>.grid_item[span-lg$="-21"],.grid>.grid_item[span-lg="22"]{--grid-ce: 22 }.grid>.grid_item[span-lg$="+23"],.grid>.grid_item[span-lg$="-22"],.grid>.grid_item[span-lg="23"]{--grid-ce: 23 }.grid>.grid_item[span-lg$="+24"],.grid>.grid_item[span-lg$="-23"],.grid>.grid_item[span-lg="24"]{--grid-ce: 24 }.grid>.grid_item[span-lg$="-24"]{--grid-ce: 25 }.grid>.grid_item[span-lg]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span-lg*="+"],.grid>.grid_item[span-lg*="-"],.grid>.grid_item[span-lg*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span-lg*="-"],.grid>.grid_item[span-lg*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span-lg=row]{grid-column:1 / -1}}@media only screen and (width>=1440px){.grid[col-xl="1"]{--grid-tc: repeat(1, 1fr) }.grid[col-xl="2"]{--grid-tc: repeat(2, 1fr) }.grid[col-xl="3"]{--grid-tc: repeat(3, 1fr) }.grid[col-xl="4"]{--grid-tc: repeat(4, 1fr) }.grid[col-xl="5"]{--grid-tc: repeat(5, 1fr) }.grid[col-xl="6"]{--grid-tc: repeat(6, 1fr) }.grid[col-xl="7"]{--grid-tc: repeat(7, 1fr) }.grid[col-xl="8"]{--grid-tc: repeat(8, 1fr) }.grid[col-xl="9"]{--grid-tc: repeat(9, 1fr) }.grid[col-xl="10"]{--grid-tc: repeat(10, 1fr) }.grid[col-xl="11"]{--grid-tc: repeat(11, 1fr) }.grid[col-xl="12"]{--grid-tc: repeat(12, 1fr) }.grid[col-xl="13"]{--grid-tc: repeat(13, 1fr) }.grid[col-xl="14"]{--grid-tc: repeat(14, 1fr) }.grid[col-xl="15"]{--grid-tc: repeat(15, 1fr) }.grid[col-xl="16"]{--grid-tc: repeat(16, 1fr) }.grid[col-xl="17"]{--grid-tc: repeat(17, 1fr) }.grid[col-xl="18"]{--grid-tc: repeat(18, 1fr) }.grid[col-xl="19"]{--grid-tc: repeat(19, 1fr) }.grid[col-xl="20"]{--grid-tc: repeat(20, 1fr) }.grid[col-xl="21"]{--grid-tc: repeat(21, 1fr) }.grid[col-xl="22"]{--grid-tc: repeat(22, 1fr) }.grid[col-xl="23"]{--grid-tc: repeat(23, 1fr) }.grid[col-xl="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span-xl^="1"]{--grid-cs: 1 }.grid>.grid_item[span-xl^="2"]{--grid-cs: 2 }.grid>.grid_item[span-xl^="3"]{--grid-cs: 3 }.grid>.grid_item[span-xl^="4"]{--grid-cs: 4 }.grid>.grid_item[span-xl^="5"]{--grid-cs: 5 }.grid>.grid_item[span-xl^="6"]{--grid-cs: 6 }.grid>.grid_item[span-xl^="7"]{--grid-cs: 7 }.grid>.grid_item[span-xl^="8"]{--grid-cs: 8 }.grid>.grid_item[span-xl^="9"]{--grid-cs: 9 }.grid>.grid_item[span-xl^="10"]{--grid-cs: 10 }.grid>.grid_item[span-xl^="11"]{--grid-cs: 11 }.grid>.grid_item[span-xl^="12"]{--grid-cs: 12 }.grid>.grid_item[span-xl^="13"]{--grid-cs: 13 }.grid>.grid_item[span-xl^="14"]{--grid-cs: 14 }.grid>.grid_item[span-xl^="15"]{--grid-cs: 15 }.grid>.grid_item[span-xl^="16"]{--grid-cs: 16 }.grid>.grid_item[span-xl^="17"]{--grid-cs: 17 }.grid>.grid_item[span-xl^="18"]{--grid-cs: 18 }.grid>.grid_item[span-xl^="19"]{--grid-cs: 19 }.grid>.grid_item[span-xl^="20"]{--grid-cs: 20 }.grid>.grid_item[span-xl^="21"]{--grid-cs: 21 }.grid>.grid_item[span-xl^="22"]{--grid-cs: 22 }.grid>.grid_item[span-xl^="23"]{--grid-cs: 23 }.grid>.grid_item[span-xl^="24"]{--grid-cs: 24 }.grid>.grid_item[span-xl$="+1"],.grid>.grid_item[span-xl="1"]{--grid-ce: 1 }.grid>.grid_item[span-xl$="+2"],.grid>.grid_item[span-xl$="-1"],.grid>.grid_item[span-xl="2"]{--grid-ce: 2 }.grid>.grid_item[span-xl$="+3"],.grid>.grid_item[span-xl$="-2"],.grid>.grid_item[span-xl="3"]{--grid-ce: 3 }.grid>.grid_item[span-xl$="+4"],.grid>.grid_item[span-xl$="-3"],.grid>.grid_item[span-xl="4"]{--grid-ce: 4 }.grid>.grid_item[span-xl$="+5"],.grid>.grid_item[span-xl$="-4"],.grid>.grid_item[span-xl="5"]{--grid-ce: 5 }.grid>.grid_item[span-xl$="+6"],.grid>.grid_item[span-xl$="-5"],.grid>.grid_item[span-xl="6"]{--grid-ce: 6 }.grid>.grid_item[span-xl$="+7"],.grid>.grid_item[span-xl$="-6"],.grid>.grid_item[span-xl="7"]{--grid-ce: 7 }.grid>.grid_item[span-xl$="+8"],.grid>.grid_item[span-xl$="-7"],.grid>.grid_item[span-xl="8"]{--grid-ce: 8 }.grid>.grid_item[span-xl$="+9"],.grid>.grid_item[span-xl$="-8"],.grid>.grid_item[span-xl="9"]{--grid-ce: 9 }.grid>.grid_item[span-xl$="+10"],.grid>.grid_item[span-xl$="-9"],.grid>.grid_item[span-xl="10"]{--grid-ce: 10 }.grid>.grid_item[span-xl$="+11"],.grid>.grid_item[span-xl$="-10"],.grid>.grid_item[span-xl="11"]{--grid-ce: 11 }.grid>.grid_item[span-xl$="+12"],.grid>.grid_item[span-xl$="-11"],.grid>.grid_item[span-xl="12"]{--grid-ce: 12 }.grid>.grid_item[span-xl$="+13"],.grid>.grid_item[span-xl$="-12"],.grid>.grid_item[span-xl="13"]{--grid-ce: 13 }.grid>.grid_item[span-xl$="+14"],.grid>.grid_item[span-xl$="-13"],.grid>.grid_item[span-xl="14"]{--grid-ce: 14 }.grid>.grid_item[span-xl$="+15"],.grid>.grid_item[span-xl$="-14"],.grid>.grid_item[span-xl="15"]{--grid-ce: 15 }.grid>.grid_item[span-xl$="+16"],.grid>.grid_item[span-xl$="-15"],.grid>.grid_item[span-xl="16"]{--grid-ce: 16 }.grid>.grid_item[span-xl$="+17"],.grid>.grid_item[span-xl$="-16"],.grid>.grid_item[span-xl="17"]{--grid-ce: 17 }.grid>.grid_item[span-xl$="+18"],.grid>.grid_item[span-xl$="-17"],.grid>.grid_item[span-xl="18"]{--grid-ce: 18 }.grid>.grid_item[span-xl$="+19"],.grid>.grid_item[span-xl$="-18"],.grid>.grid_item[span-xl="19"]{--grid-ce: 19 }.grid>.grid_item[span-xl$="+20"],.grid>.grid_item[span-xl$="-19"],.grid>.grid_item[span-xl="20"]{--grid-ce: 20 }.grid>.grid_item[span-xl$="+21"],.grid>.grid_item[span-xl$="-20"],.grid>.grid_item[span-xl="21"]{--grid-ce: 21 }.grid>.grid_item[span-xl$="+22"],.grid>.grid_item[span-xl$="-21"],.grid>.grid_item[span-xl="22"]{--grid-ce: 22 }.grid>.grid_item[span-xl$="+23"],.grid>.grid_item[span-xl$="-22"],.grid>.grid_item[span-xl="23"]{--grid-ce: 23 }.grid>.grid_item[span-xl$="+24"],.grid>.grid_item[span-xl$="-23"],.grid>.grid_item[span-xl="24"]{--grid-ce: 24 }.grid>.grid_item[span-xl$="-24"]{--grid-ce: 25 }.grid>.grid_item[span-xl]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span-xl*="+"],.grid>.grid_item[span-xl*="-"],.grid>.grid_item[span-xl*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span-xl*="-"],.grid>.grid_item[span-xl*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span-xl=row]{grid-column:1 / -1}}}@layer global{.layout{display:flex;flex-direction:column;width:100vw;min-height:100vh;.layout_content{flex:1}}.layout_content_main{container:main / inline-size}.layout-centered{.layout_content{display:grid;gap:var(--sm3);grid-template-columns:1fr minmax(0,var(--layout-content-width)) 1fr;margin-top:var(--lg1);margin-bottom:var(--sm1);@media(width>=768px){margin-top:var(--xl3);margin-bottom:var(--md3);gap:var(--md3)}}.layout_content_main{grid-column:2}}.layout-sidebar{.layout_content{@media(width>=768px){display:grid;grid-template-columns:var(--layout-aside-width) minmax(0,1fr)}}.layout_content_main{padding:var(--sm2);@media(width>=768px){grid-row:1;grid-column:2;padding:var(--lg1) var(--md2)}}.layout_content_aside{@media(width>=768px){grid-row:1;grid-column:1;padding:var(--lg1) var(--md3)}}}.layout-sidebar-end{.layout_content{@media(width>=768px){grid-template-columns:minmax(0,1fr) var(--layout-aside-width)}}.layout_content_main{@media(width>=768px){grid-column:1}}.layout_content_aside{@media(width>=768px){grid-column:2}}}.layout-docs{.layout_content{@media(width>=768px){display:grid;grid-template-columns:var(--layout-aside-width) minmax(0,1fr)}@media(width>=1024px){grid-template-columns:var(--layout-aside-width) minmax(0,var(--layout-content-width)) var(--layout-toc-width)}}.layout_content_main{padding:var(--sm2);@media(width>=768px){grid-row:1;grid-column:2;padding:var(--lg1) var(--md2)}}.layout_content_aside{display:none;@media(width>=768px){display:block;grid-row:1;grid-column:1;padding:var(--lg1) var(--md3)}}.layout_content_aside-toc{@media(width>=768px){display:none}@media(width>=1024px){display:block;grid-row:1;grid-column:3;padding:var(--lg1) var(--md3)}}}.layout-split{.layout_content{display:grid;@media(width>=768px){grid-template-columns:1fr 1fr}}}.layout-cover{min-height:100dvh;.layout_content{display:grid;place-items:center}}}@layer global{@scope(.prose)to (.not-prose){:is(p,ul,ol,blockquote,table):has(+:is(h1,h2,h3,h4)){margin-bottom:calc(var(--prose-spacing) * 2)}p,ul,ol,dl{margin-bottom:var(--prose-spacing);p,ul,ol,dl{margin-bottom:0}}ul,ol{ul,ol{margin-inline-start:0;padding-inline-start:var(--sm2)}li{margin-bottom:.5em;&::marker{color:light-dark(var(--base-300),var(--base-600))}}}ul{margin-inline-start:var(--sm2);list-style-type:"\2192 "}ol{margin-inline-start:var(--md2);list-style-type:decimal-leading-zero;li::marker{font-size:var(--text-sm)}}table{margin-top:var(--md1);margin-bottom:var(--md1)}}}@layer global{.wrap{display:grid;grid-template-columns:1fr var(--wrap-width) 1fr;>*,>astro-island>*,>astro-slot>*,>astro-static-slot>*{grid-column:2;padding-inline:var(--wrap-spacing);@media(width>=768px){padding-inline:var(--wrap-md-spacing)}@media(width>=1024px){padding-inline:var(--wrap-lg-spacing)}}}.wrap-sm{--wrap-width: var(--wrap-width-sm)}.wrap-md{--wrap-width: var(--wrap-width-md)}.wrap-lg{--wrap-width: var(--wrap-width-lg)}.wrap_content-fullBleed{grid-column:1 / -1;width:100%;object-fit:cover}}@layer helpers{.c-base-0{color:var(--base-0)!important}.bdc-base-0{border-color:var(--base-0)!important}.bgc-base-0{background-color:var(--base-0)!important}.c-base-50{color:var(--base-50)!important}.bdc-base-50{border-color:var(--base-50)!important}.bgc-base-50{background-color:var(--base-50)!important}.c-base-100{color:var(--base-100)!important}.bdc-base-100{border-color:var(--base-100)!important}.bgc-base-100{background-color:var(--base-100)!important}.c-base-200{color:var(--base-200)!important}.bdc-base-200{border-color:var(--base-200)!important}.bgc-base-200{background-color:var(--base-200)!important}.c-base-300{color:var(--base-300)!important}.bdc-base-300{border-color:var(--base-300)!important}.bgc-base-300{background-color:var(--base-300)!important}.c-base-400{color:var(--base-400)!important}.bdc-base-400{border-color:var(--base-400)!important}.bgc-base-400{background-color:var(--base-400)!important}.c-base-500{color:var(--base-500)!important}.bdc-base-500{border-color:var(--base-500)!important}.bgc-base-500{background-color:var(--base-500)!important}.c-base-600{color:var(--base-600)!important}.bdc-base-600{border-color:var(--base-600)!important}.bgc-base-600{background-color:var(--base-600)!important}.c-base-700{color:var(--base-700)!important}.bdc-base-700{border-color:var(--base-700)!important}.bgc-base-700{background-color:var(--base-700)!important}.c-base-800{color:var(--base-800)!important}.bdc-base-800{border-color:var(--base-800)!important}.bgc-base-800{background-color:var(--base-800)!important}.c-base-900{color:var(--base-900)!important}.bdc-base-900{border-color:var(--base-900)!important}.bgc-base-900{background-color:var(--base-900)!important}.c-base-950{color:var(--base-950)!important}.bdc-base-950{border-color:var(--base-950)!important}.bgc-base-950{background-color:var(--base-950)!important}.c-primary-50{color:var(--primary-50)!important}.bdc-primary-50{border-color:var(--primary-50)!important}.bgc-primary-50{background-color:var(--primary-50)!important}.c-primary-100{color:var(--primary-100)!important}.bdc-primary-100{border-color:var(--primary-100)!important}.bgc-primary-100{background-color:var(--primary-100)!important}.c-primary-200{color:var(--primary-200)!important}.bdc-primary-200{border-color:var(--primary-200)!important}.bgc-primary-200{background-color:var(--primary-200)!important}.c-primary-300{color:var(--primary-300)!important}.bdc-primary-300{border-color:var(--primary-300)!important}.bgc-primary-300{background-color:var(--primary-300)!important}.c-primary-400{color:var(--primary-400)!important}.bdc-primary-400{border-color:var(--primary-400)!important}.bgc-primary-400{background-color:var(--primary-400)!important}.c-primary-500{color:var(--primary-500)!important}.bdc-primary-500{border-color:var(--primary-500)!important}.bgc-primary-500{background-color:var(--primary-500)!important}.c-primary-600{color:var(--primary-600)!important}.bdc-primary-600{border-color:var(--primary-600)!important}.bgc-primary-600{background-color:var(--primary-600)!important}.c-primary-700{color:var(--primary-700)!important}.bdc-primary-700{border-color:var(--primary-700)!important}.bgc-primary-700{background-color:var(--primary-700)!important}.c-primary-800{color:var(--primary-800)!important}.bdc-primary-800{border-color:var(--primary-800)!important}.bgc-primary-800{background-color:var(--primary-800)!important}.c-primary-900{color:var(--primary-900)!important}.bdc-primary-900{border-color:var(--primary-900)!important}.bgc-primary-900{background-color:var(--primary-900)!important}.c-primary-950{color:var(--primary-950)!important}.bdc-primary-950{border-color:var(--primary-950)!important}.bgc-primary-950{background-color:var(--primary-950)!important}.c-yes-100{color:var(--yes-100)!important}.bdc-yes-100{border-color:var(--yes-100)!important}.bgc-yes-100{background-color:var(--yes-100)!important}.c-yes-200{color:var(--yes-200)!important}.bdc-yes-200{border-color:var(--yes-200)!important}.bgc-yes-200{background-color:var(--yes-200)!important}.c-yes-300{color:var(--yes-300)!important}.bdc-yes-300{border-color:var(--yes-300)!important}.bgc-yes-300{background-color:var(--yes-300)!important}.c-yes-400{color:var(--yes-400)!important}.bdc-yes-400{border-color:var(--yes-400)!important}.bgc-yes-400{background-color:var(--yes-400)!important}.c-yes-500{color:var(--yes-500)!important}.bdc-yes-500{border-color:var(--yes-500)!important}.bgc-yes-500{background-color:var(--yes-500)!important}.c-no-100{color:var(--no-100)!important}.bdc-no-100{border-color:var(--no-100)!important}.bgc-no-100{background-color:var(--no-100)!important}.c-no-200{color:var(--no-200)!important}.bdc-no-200{border-color:var(--no-200)!important}.bgc-no-200{background-color:var(--no-200)!important}.c-no-300{color:var(--no-300)!important}.bdc-no-300{border-color:var(--no-300)!important}.bgc-no-300{background-color:var(--no-300)!important}.c-no-400{color:var(--no-400)!important}.bdc-no-400{border-color:var(--no-400)!important}.bgc-no-400{background-color:var(--no-400)!important}.c-no-500{color:var(--no-500)!important}.bdc-no-500{border-color:var(--no-500)!important}.bgc-no-500{background-color:var(--no-500)!important}.c-maybe-100{color:var(--maybe-100)!important}.bdc-maybe-100{border-color:var(--maybe-100)!important}.bgc-maybe-100{background-color:var(--maybe-100)!important}.c-maybe-200{color:var(--maybe-200)!important}.bdc-maybe-200{border-color:var(--maybe-200)!important}.bgc-maybe-200{background-color:var(--maybe-200)!important}.c-maybe-300{color:var(--maybe-300)!important}.bdc-maybe-300{border-color:var(--maybe-300)!important}.bgc-maybe-300{background-color:var(--maybe-300)!important}.c-maybe-400{color:var(--maybe-400)!important}.bdc-maybe-400{border-color:var(--maybe-400)!important}.bgc-maybe-400{background-color:var(--maybe-400)!important}.c-maybe-500{color:var(--maybe-500)!important}.bdc-maybe-500{border-color:var(--maybe-500)!important}.bgc-maybe-500{background-color:var(--maybe-500)!important}}@layer helpers{body.dev{--baseline: 8;background-size:100% calc(var(--baseline) * 1px)!important;background-image:linear-gradient(to bottom,#0000 calc((var(--baseline) - 1) * 1px),#ff69b4 calc(var(--baseline) * 1px))!important}.dev-error{position:fixed!important;top:var(--md1)!important;left:var(--md1)!important;z-index:var(--z-top)!important;padding:var(--sm1)!important;font-size:1rem!important;color:var(--danger-500)!important;background:var(--danger-100)!important;border:1px solid var(--danger-500)!important;border-radius:var(--radius-md)!important}}@layer helpers{.of-auto,.overflow-auto{overflow:auto!important}.of-hidden,.overflow-hidden{overflow:hidden!important}.of-clip,.overflow-clip{overflow:clip!important}.of-visible,.overflow-visible{overflow:visible!important}.of-scroll,.overflow-scroll{overflow:scroll!important}.of-x-auto,.overflow-x-auto{overflow-x:auto!important}.of-y-auto,.overflow-y-auto{overflow-y:auto!important}.of-x-hidden,.overflow-x-hidden{overflow-x:hidden!important}.of-y-hidden,.overflow-y-hidden{overflow-y:hidden!important}.of-x-clip,.overflow-x-clip{overflow-x:clip!important}.of-y-clip,.overflow-y-clip{overflow-y:clip!important}.of-x-visible,.overflow-x-visible{overflow-x:visible!important}.of-y-visible,.overflow-y-visible{overflow-y:visible!important}.of-x-scroll,.overflow-x-scroll{overflow-x:scroll!important}.of-y-scroll,.overflow-y-scroll{overflow-y:scroll!important}.position-static{position:static!important}.position-fixed{position:fixed!important}.position-absolute{position:absolute!important}.position-relative{position:relative!important}.position-sticky{position:sticky!important}.visibility-visible{visibility:visible!important}.visibility-hidden{visibility:hidden!important}.visibility-collapse{visibility:collapse!important}.z-auto{z-index:auto!important}.z-bottom{z-index:var(--z-bottom)!important}.z-0{z-index:var(--z-0)!important}.z-1{z-index:var(--z-1)!important}.z-2{z-index:var(--z-2)!important}.z-3{z-index:var(--z-3)!important}.z-4{z-index:var(--z-4)!important}.z-5{z-index:var(--z-5)!important}.z-top{z-index:var(--z-top)!important}}@layer helpers{.o-0{opacity:var(--o-0)!important}.o-1{opacity:var(--o-1)!important}.o-2{opacity:var(--o-2)!important}.o-3{opacity:var(--o-3)!important}.o-4{opacity:var(--o-4)!important}.o-5{opacity:var(--o-5)!important}}@layer helpers{.ar-square{aspect-ratio:var(--ar-square)!important}.ar-landscape{aspect-ratio:var(--ar-landscape)!important}.ar-portrait{aspect-ratio:var(--ar-portrait)!important}.ar-widescreen{aspect-ratio:var(--ar-widescreen)!important}.ar-golden{aspect-ratio:var(--ar-golden)!important}}@layer helpers{.w-0{width:0!important}.h-0{height:0!important}.m-0{margin:0!important}.mt-0{margin-top:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mr-0{margin-right:0!important}.mis-0{margin-inline-start:0!important}.mie-0{margin-inline-end:0!important}.p-0{padding:0!important}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.pis-0{padding-inline-start:0!important}.pie-0{padding-inline-end:0!important}.w-xs1{width:var(--xs1)!important}.h-xs1{height:var(--xs1)!important}.m-xs1{margin:var(--xs1)!important}.mt-xs1{margin-top:var(--xs1)!important}.mb-xs1{margin-bottom:var(--xs1)!important}.ml-xs1{margin-left:var(--xs1)!important}.mr-xs1{margin-right:var(--xs1)!important}.mis-xs1{margin-inline-start:var(--xs1)!important}.mie-xs1{margin-inline-end:var(--xs1)!important}.p-xs1{padding:var(--xs1)!important}.pt-xs1{padding-top:var(--xs1)!important}.pb-xs1{padding-bottom:var(--xs1)!important}.pl-xs1{padding-left:var(--xs1)!important}.pr-xs1{padding-right:var(--xs1)!important}.pis-xs1{padding-inline-start:var(--xs1)!important}.pie-xs1{padding-inline-end:var(--xs1)!important}.w-xs2{width:var(--xs2)!important}.h-xs2{height:var(--xs2)!important}.m-xs2{margin:var(--xs2)!important}.mt-xs2{margin-top:var(--xs2)!important}.mb-xs2{margin-bottom:var(--xs2)!important}.ml-xs2{margin-left:var(--xs2)!important}.mr-xs2{margin-right:var(--xs2)!important}.mis-xs2{margin-inline-start:var(--xs2)!important}.mie-xs2{margin-inline-end:var(--xs2)!important}.p-xs2{padding:var(--xs2)!important}.pt-xs2{padding-top:var(--xs2)!important}.pb-xs2{padding-bottom:var(--xs2)!important}.pl-xs2{padding-left:var(--xs2)!important}.pr-xs2{padding-right:var(--xs2)!important}.pis-xs2{padding-inline-start:var(--xs2)!important}.pie-xs2{padding-inline-end:var(--xs2)!important}.w-xs3{width:var(--xs3)!important}.h-xs3{height:var(--xs3)!important}.m-xs3{margin:var(--xs3)!important}.mt-xs3{margin-top:var(--xs3)!important}.mb-xs3{margin-bottom:var(--xs3)!important}.ml-xs3{margin-left:var(--xs3)!important}.mr-xs3{margin-right:var(--xs3)!important}.mis-xs3{margin-inline-start:var(--xs3)!important}.mie-xs3{margin-inline-end:var(--xs3)!important}.p-xs3{padding:var(--xs3)!important}.pt-xs3{padding-top:var(--xs3)!important}.pb-xs3{padding-bottom:var(--xs3)!important}.pl-xs3{padding-left:var(--xs3)!important}.pr-xs3{padding-right:var(--xs3)!important}.pis-xs3{padding-inline-start:var(--xs3)!important}.pie-xs3{padding-inline-end:var(--xs3)!important}.w-sm1{width:var(--sm1)!important}.h-sm1{height:var(--sm1)!important}.m-sm1{margin:var(--sm1)!important}.mt-sm1{margin-top:var(--sm1)!important}.mb-sm1{margin-bottom:var(--sm1)!important}.ml-sm1{margin-left:var(--sm1)!important}.mr-sm1{margin-right:var(--sm1)!important}.mis-sm1{margin-inline-start:var(--sm1)!important}.mie-sm1{margin-inline-end:var(--sm1)!important}.p-sm1{padding:var(--sm1)!important}.pt-sm1{padding-top:var(--sm1)!important}.pb-sm1{padding-bottom:var(--sm1)!important}.pl-sm1{padding-left:var(--sm1)!important}.pr-sm1{padding-right:var(--sm1)!important}.pis-sm1{padding-inline-start:var(--sm1)!important}.pie-sm1{padding-inline-end:var(--sm1)!important}.w-sm2{width:var(--sm2)!important}.h-sm2{height:var(--sm2)!important}.m-sm2{margin:var(--sm2)!important}.mt-sm2{margin-top:var(--sm2)!important}.mb-sm2{margin-bottom:var(--sm2)!important}.ml-sm2{margin-left:var(--sm2)!important}.mr-sm2{margin-right:var(--sm2)!important}.mis-sm2{margin-inline-start:var(--sm2)!important}.mie-sm2{margin-inline-end:var(--sm2)!important}.p-sm2{padding:var(--sm2)!important}.pt-sm2{padding-top:var(--sm2)!important}.pb-sm2{padding-bottom:var(--sm2)!important}.pl-sm2{padding-left:var(--sm2)!important}.pr-sm2{padding-right:var(--sm2)!important}.pis-sm2{padding-inline-start:var(--sm2)!important}.pie-sm2{padding-inline-end:var(--sm2)!important}.w-sm3{width:var(--sm3)!important}.h-sm3{height:var(--sm3)!important}.m-sm3{margin:var(--sm3)!important}.mt-sm3{margin-top:var(--sm3)!important}.mb-sm3{margin-bottom:var(--sm3)!important}.ml-sm3{margin-left:var(--sm3)!important}.mr-sm3{margin-right:var(--sm3)!important}.mis-sm3{margin-inline-start:var(--sm3)!important}.mie-sm3{margin-inline-end:var(--sm3)!important}.p-sm3{padding:var(--sm3)!important}.pt-sm3{padding-top:var(--sm3)!important}.pb-sm3{padding-bottom:var(--sm3)!important}.pl-sm3{padding-left:var(--sm3)!important}.pr-sm3{padding-right:var(--sm3)!important}.pis-sm3{padding-inline-start:var(--sm3)!important}.pie-sm3{padding-inline-end:var(--sm3)!important}.w-md1{width:var(--md1)!important}.h-md1{height:var(--md1)!important}.m-md1{margin:var(--md1)!important}.mt-md1{margin-top:var(--md1)!important}.mb-md1{margin-bottom:var(--md1)!important}.ml-md1{margin-left:var(--md1)!important}.mr-md1{margin-right:var(--md1)!important}.mis-md1{margin-inline-start:var(--md1)!important}.mie-md1{margin-inline-end:var(--md1)!important}.p-md1{padding:var(--md1)!important}.pt-md1{padding-top:var(--md1)!important}.pb-md1{padding-bottom:var(--md1)!important}.pl-md1{padding-left:var(--md1)!important}.pr-md1{padding-right:var(--md1)!important}.pis-md1{padding-inline-start:var(--md1)!important}.pie-md1{padding-inline-end:var(--md1)!important}.w-md2{width:var(--md2)!important}.h-md2{height:var(--md2)!important}.m-md2{margin:var(--md2)!important}.mt-md2{margin-top:var(--md2)!important}.mb-md2{margin-bottom:var(--md2)!important}.ml-md2{margin-left:var(--md2)!important}.mr-md2{margin-right:var(--md2)!important}.mis-md2{margin-inline-start:var(--md2)!important}.mie-md2{margin-inline-end:var(--md2)!important}.p-md2{padding:var(--md2)!important}.pt-md2{padding-top:var(--md2)!important}.pb-md2{padding-bottom:var(--md2)!important}.pl-md2{padding-left:var(--md2)!important}.pr-md2{padding-right:var(--md2)!important}.pis-md2{padding-inline-start:var(--md2)!important}.pie-md2{padding-inline-end:var(--md2)!important}.w-md3{width:var(--md3)!important}.h-md3{height:var(--md3)!important}.m-md3{margin:var(--md3)!important}.mt-md3{margin-top:var(--md3)!important}.mb-md3{margin-bottom:var(--md3)!important}.ml-md3{margin-left:var(--md3)!important}.mr-md3{margin-right:var(--md3)!important}.mis-md3{margin-inline-start:var(--md3)!important}.mie-md3{margin-inline-end:var(--md3)!important}.p-md3{padding:var(--md3)!important}.pt-md3{padding-top:var(--md3)!important}.pb-md3{padding-bottom:var(--md3)!important}.pl-md3{padding-left:var(--md3)!important}.pr-md3{padding-right:var(--md3)!important}.pis-md3{padding-inline-start:var(--md3)!important}.pie-md3{padding-inline-end:var(--md3)!important}.w-lg1{width:var(--lg1)!important}.h-lg1{height:var(--lg1)!important}.m-lg1{margin:var(--lg1)!important}.mt-lg1{margin-top:var(--lg1)!important}.mb-lg1{margin-bottom:var(--lg1)!important}.ml-lg1{margin-left:var(--lg1)!important}.mr-lg1{margin-right:var(--lg1)!important}.mis-lg1{margin-inline-start:var(--lg1)!important}.mie-lg1{margin-inline-end:var(--lg1)!important}.p-lg1{padding:var(--lg1)!important}.pt-lg1{padding-top:var(--lg1)!important}.pb-lg1{padding-bottom:var(--lg1)!important}.pl-lg1{padding-left:var(--lg1)!important}.pr-lg1{padding-right:var(--lg1)!important}.pis-lg1{padding-inline-start:var(--lg1)!important}.pie-lg1{padding-inline-end:var(--lg1)!important}.w-lg2{width:var(--lg2)!important}.h-lg2{height:var(--lg2)!important}.m-lg2{margin:var(--lg2)!important}.mt-lg2{margin-top:var(--lg2)!important}.mb-lg2{margin-bottom:var(--lg2)!important}.ml-lg2{margin-left:var(--lg2)!important}.mr-lg2{margin-right:var(--lg2)!important}.mis-lg2{margin-inline-start:var(--lg2)!important}.mie-lg2{margin-inline-end:var(--lg2)!important}.p-lg2{padding:var(--lg2)!important}.pt-lg2{padding-top:var(--lg2)!important}.pb-lg2{padding-bottom:var(--lg2)!important}.pl-lg2{padding-left:var(--lg2)!important}.pr-lg2{padding-right:var(--lg2)!important}.pis-lg2{padding-inline-start:var(--lg2)!important}.pie-lg2{padding-inline-end:var(--lg2)!important}.w-lg3{width:var(--lg3)!important}.h-lg3{height:var(--lg3)!important}.m-lg3{margin:var(--lg3)!important}.mt-lg3{margin-top:var(--lg3)!important}.mb-lg3{margin-bottom:var(--lg3)!important}.ml-lg3{margin-left:var(--lg3)!important}.mr-lg3{margin-right:var(--lg3)!important}.mis-lg3{margin-inline-start:var(--lg3)!important}.mie-lg3{margin-inline-end:var(--lg3)!important}.p-lg3{padding:var(--lg3)!important}.pt-lg3{padding-top:var(--lg3)!important}.pb-lg3{padding-bottom:var(--lg3)!important}.pl-lg3{padding-left:var(--lg3)!important}.pr-lg3{padding-right:var(--lg3)!important}.pis-lg3{padding-inline-start:var(--lg3)!important}.pie-lg3{padding-inline-end:var(--lg3)!important}.w-xl1{width:var(--xl1)!important}.h-xl1{height:var(--xl1)!important}.m-xl1{margin:var(--xl1)!important}.mt-xl1{margin-top:var(--xl1)!important}.mb-xl1{margin-bottom:var(--xl1)!important}.ml-xl1{margin-left:var(--xl1)!important}.mr-xl1{margin-right:var(--xl1)!important}.mis-xl1{margin-inline-start:var(--xl1)!important}.mie-xl1{margin-inline-end:var(--xl1)!important}.p-xl1{padding:var(--xl1)!important}.pt-xl1{padding-top:var(--xl1)!important}.pb-xl1{padding-bottom:var(--xl1)!important}.pl-xl1{padding-left:var(--xl1)!important}.pr-xl1{padding-right:var(--xl1)!important}.pis-xl1{padding-inline-start:var(--xl1)!important}.pie-xl1{padding-inline-end:var(--xl1)!important}.w-xl2{width:var(--xl2)!important}.h-xl2{height:var(--xl2)!important}.m-xl2{margin:var(--xl2)!important}.mt-xl2{margin-top:var(--xl2)!important}.mb-xl2{margin-bottom:var(--xl2)!important}.ml-xl2{margin-left:var(--xl2)!important}.mr-xl2{margin-right:var(--xl2)!important}.mis-xl2{margin-inline-start:var(--xl2)!important}.mie-xl2{margin-inline-end:var(--xl2)!important}.p-xl2{padding:var(--xl2)!important}.pt-xl2{padding-top:var(--xl2)!important}.pb-xl2{padding-bottom:var(--xl2)!important}.pl-xl2{padding-left:var(--xl2)!important}.pr-xl2{padding-right:var(--xl2)!important}.pis-xl2{padding-inline-start:var(--xl2)!important}.pie-xl2{padding-inline-end:var(--xl2)!important}.w-xl3{width:var(--xl3)!important}.h-xl3{height:var(--xl3)!important}.m-xl3{margin:var(--xl3)!important}.mt-xl3{margin-top:var(--xl3)!important}.mb-xl3{margin-bottom:var(--xl3)!important}.ml-xl3{margin-left:var(--xl3)!important}.mr-xl3{margin-right:var(--xl3)!important}.mis-xl3{margin-inline-start:var(--xl3)!important}.mie-xl3{margin-inline-end:var(--xl3)!important}.p-xl3{padding:var(--xl3)!important}.pt-xl3{padding-top:var(--xl3)!important}.pb-xl3{padding-bottom:var(--xl3)!important}.pl-xl3{padding-left:var(--xl3)!important}.pr-xl3{padding-right:var(--xl3)!important}.pis-xl3{padding-inline-start:var(--xl3)!important}.pie-xl3{padding-inline-end:var(--xl3)!important}.w-xxl1{width:var(--xxl1)!important}.h-xxl1{height:var(--xxl1)!important}.m-xxl1{margin:var(--xxl1)!important}.mt-xxl1{margin-top:var(--xxl1)!important}.mb-xxl1{margin-bottom:var(--xxl1)!important}.ml-xxl1{margin-left:var(--xxl1)!important}.mr-xxl1{margin-right:var(--xxl1)!important}.mis-xxl1{margin-inline-start:var(--xxl1)!important}.mie-xxl1{margin-inline-end:var(--xxl1)!important}.p-xxl1{padding:var(--xxl1)!important}.pt-xxl1{padding-top:var(--xxl1)!important}.pb-xxl1{padding-bottom:var(--xxl1)!important}.pl-xxl1{padding-left:var(--xxl1)!important}.pr-xxl1{padding-right:var(--xxl1)!important}.pis-xxl1{padding-inline-start:var(--xxl1)!important}.pie-xxl1{padding-inline-end:var(--xxl1)!important}.w-xxl2{width:var(--xxl2)!important}.h-xxl2{height:var(--xxl2)!important}.m-xxl2{margin:var(--xxl2)!important}.mt-xxl2{margin-top:var(--xxl2)!important}.mb-xxl2{margin-bottom:var(--xxl2)!important}.ml-xxl2{margin-left:var(--xxl2)!important}.mr-xxl2{margin-right:var(--xxl2)!important}.mis-xxl2{margin-inline-start:var(--xxl2)!important}.mie-xxl2{margin-inline-end:var(--xxl2)!important}.p-xxl2{padding:var(--xxl2)!important}.pt-xxl2{padding-top:var(--xxl2)!important}.pb-xxl2{padding-bottom:var(--xxl2)!important}.pl-xxl2{padding-left:var(--xxl2)!important}.pr-xxl2{padding-right:var(--xxl2)!important}.pis-xxl2{padding-inline-start:var(--xxl2)!important}.pie-xxl2{padding-inline-end:var(--xxl2)!important}.w-xxl3{width:var(--xxl3)!important}.h-xxl3{height:var(--xxl3)!important}.m-xxl3{margin:var(--xxl3)!important}.mt-xxl3{margin-top:var(--xxl3)!important}.mb-xxl3{margin-bottom:var(--xxl3)!important}.ml-xxl3{margin-left:var(--xxl3)!important}.mr-xxl3{margin-right:var(--xxl3)!important}.mis-xxl3{margin-inline-start:var(--xxl3)!important}.mie-xxl3{margin-inline-end:var(--xxl3)!important}.p-xxl3{padding:var(--xxl3)!important}.pt-xxl3{padding-top:var(--xxl3)!important}.pb-xxl3{padding-bottom:var(--xxl3)!important}.pl-xxl3{padding-left:var(--xxl3)!important}.pr-xxl3{padding-right:var(--xxl3)!important}.pis-xxl3{padding-inline-start:var(--xxl3)!important}.pie-xxl3{padding-inline-end:var(--xxl3)!important}.w-mega1{width:var(--mega1)!important}.h-mega1{height:var(--mega1)!important}.m-mega1{margin:var(--mega1)!important}.mt-mega1{margin-top:var(--mega1)!important}.mb-mega1{margin-bottom:var(--mega1)!important}.ml-mega1{margin-left:var(--mega1)!important}.mr-mega1{margin-right:var(--mega1)!important}.mis-mega1{margin-inline-start:var(--mega1)!important}.mie-mega1{margin-inline-end:var(--mega1)!important}.p-mega1{padding:var(--mega1)!important}.pt-mega1{padding-top:var(--mega1)!important}.pb-mega1{padding-bottom:var(--mega1)!important}.pl-mega1{padding-left:var(--mega1)!important}.pr-mega1{padding-right:var(--mega1)!important}.pis-mega1{padding-inline-start:var(--mega1)!important}.pie-mega1{padding-inline-end:var(--mega1)!important}.w-mega2{width:var(--mega2)!important}.h-mega2{height:var(--mega2)!important}.m-mega2{margin:var(--mega2)!important}.mt-mega2{margin-top:var(--mega2)!important}.mb-mega2{margin-bottom:var(--mega2)!important}.ml-mega2{margin-left:var(--mega2)!important}.mr-mega2{margin-right:var(--mega2)!important}.mis-mega2{margin-inline-start:var(--mega2)!important}.mie-mega2{margin-inline-end:var(--mega2)!important}.p-mega2{padding:var(--mega2)!important}.pt-mega2{padding-top:var(--mega2)!important}.pb-mega2{padding-bottom:var(--mega2)!important}.pl-mega2{padding-left:var(--mega2)!important}.pr-mega2{padding-right:var(--mega2)!important}.pis-mega2{padding-inline-start:var(--mega2)!important}.pie-mega2{padding-inline-end:var(--mega2)!important}.w-mega3{width:var(--mega3)!important}.h-mega3{height:var(--mega3)!important}.m-mega3{margin:var(--mega3)!important}.mt-mega3{margin-top:var(--mega3)!important}.mb-mega3{margin-bottom:var(--mega3)!important}.ml-mega3{margin-left:var(--mega3)!important}.mr-mega3{margin-right:var(--mega3)!important}.mis-mega3{margin-inline-start:var(--mega3)!important}.mie-mega3{margin-inline-end:var(--mega3)!important}.p-mega3{padding:var(--mega3)!important}.pt-mega3{padding-top:var(--mega3)!important}.pb-mega3{padding-bottom:var(--mega3)!important}.pl-mega3{padding-left:var(--mega3)!important}.pr-mega3{padding-right:var(--mega3)!important}.pis-mega3{padding-inline-start:var(--mega3)!important}.pie-mega3{padding-inline-end:var(--mega3)!important}.w-giga1{width:var(--giga1)!important}.h-giga1{height:var(--giga1)!important}.m-giga1{margin:var(--giga1)!important}.mt-giga1{margin-top:var(--giga1)!important}.mb-giga1{margin-bottom:var(--giga1)!important}.ml-giga1{margin-left:var(--giga1)!important}.mr-giga1{margin-right:var(--giga1)!important}.mis-giga1{margin-inline-start:var(--giga1)!important}.mie-giga1{margin-inline-end:var(--giga1)!important}.p-giga1{padding:var(--giga1)!important}.pt-giga1{padding-top:var(--giga1)!important}.pb-giga1{padding-bottom:var(--giga1)!important}.pl-giga1{padding-left:var(--giga1)!important}.pr-giga1{padding-right:var(--giga1)!important}.pis-giga1{padding-inline-start:var(--giga1)!important}.pie-giga1{padding-inline-end:var(--giga1)!important}.w-giga2{width:var(--giga2)!important}.h-giga2{height:var(--giga2)!important}.m-giga2{margin:var(--giga2)!important}.mt-giga2{margin-top:var(--giga2)!important}.mb-giga2{margin-bottom:var(--giga2)!important}.ml-giga2{margin-left:var(--giga2)!important}.mr-giga2{margin-right:var(--giga2)!important}.mis-giga2{margin-inline-start:var(--giga2)!important}.mie-giga2{margin-inline-end:var(--giga2)!important}.p-giga2{padding:var(--giga2)!important}.pt-giga2{padding-top:var(--giga2)!important}.pb-giga2{padding-bottom:var(--giga2)!important}.pl-giga2{padding-left:var(--giga2)!important}.pr-giga2{padding-right:var(--giga2)!important}.pis-giga2{padding-inline-start:var(--giga2)!important}.pie-giga2{padding-inline-end:var(--giga2)!important}.w-giga3{width:var(--giga3)!important}.h-giga3{height:var(--giga3)!important}.m-giga3{margin:var(--giga3)!important}.mt-giga3{margin-top:var(--giga3)!important}.mb-giga3{margin-bottom:var(--giga3)!important}.ml-giga3{margin-left:var(--giga3)!important}.mr-giga3{margin-right:var(--giga3)!important}.mis-giga3{margin-inline-start:var(--giga3)!important}.mie-giga3{margin-inline-end:var(--giga3)!important}.p-giga3{padding:var(--giga3)!important}.pt-giga3{padding-top:var(--giga3)!important}.pb-giga3{padding-bottom:var(--giga3)!important}.pl-giga3{padding-left:var(--giga3)!important}.pr-giga3{padding-right:var(--giga3)!important}.pis-giga3{padding-inline-start:var(--giga3)!important}.pie-giga3{padding-inline-end:var(--giga3)!important}.w-tera1{width:var(--tera1)!important}.h-tera1{height:var(--tera1)!important}.m-tera1{margin:var(--tera1)!important}.mt-tera1{margin-top:var(--tera1)!important}.mb-tera1{margin-bottom:var(--tera1)!important}.ml-tera1{margin-left:var(--tera1)!important}.mr-tera1{margin-right:var(--tera1)!important}.mis-tera1{margin-inline-start:var(--tera1)!important}.mie-tera1{margin-inline-end:var(--tera1)!important}.p-tera1{padding:var(--tera1)!important}.pt-tera1{padding-top:var(--tera1)!important}.pb-tera1{padding-bottom:var(--tera1)!important}.pl-tera1{padding-left:var(--tera1)!important}.pr-tera1{padding-right:var(--tera1)!important}.pis-tera1{padding-inline-start:var(--tera1)!important}.pie-tera1{padding-inline-end:var(--tera1)!important}.w-tera2{width:var(--tera2)!important}.h-tera2{height:var(--tera2)!important}.m-tera2{margin:var(--tera2)!important}.mt-tera2{margin-top:var(--tera2)!important}.mb-tera2{margin-bottom:var(--tera2)!important}.ml-tera2{margin-left:var(--tera2)!important}.mr-tera2{margin-right:var(--tera2)!important}.mis-tera2{margin-inline-start:var(--tera2)!important}.mie-tera2{margin-inline-end:var(--tera2)!important}.p-tera2{padding:var(--tera2)!important}.pt-tera2{padding-top:var(--tera2)!important}.pb-tera2{padding-bottom:var(--tera2)!important}.pl-tera2{padding-left:var(--tera2)!important}.pr-tera2{padding-right:var(--tera2)!important}.pis-tera2{padding-inline-start:var(--tera2)!important}.pie-tera2{padding-inline-end:var(--tera2)!important}.w-tera3{width:var(--tera3)!important}.h-tera3{height:var(--tera3)!important}.m-tera3{margin:var(--tera3)!important}.mt-tera3{margin-top:var(--tera3)!important}.mb-tera3{margin-bottom:var(--tera3)!important}.ml-tera3{margin-left:var(--tera3)!important}.mr-tera3{margin-right:var(--tera3)!important}.mis-tera3{margin-inline-start:var(--tera3)!important}.mie-tera3{margin-inline-end:var(--tera3)!important}.p-tera3{padding:var(--tera3)!important}.pt-tera3{padding-top:var(--tera3)!important}.pb-tera3{padding-bottom:var(--tera3)!important}.pl-tera3{padding-left:var(--tera3)!important}.pr-tera3{padding-right:var(--tera3)!important}.pis-tera3{padding-inline-start:var(--tera3)!important}.pie-tera3{padding-inline-end:var(--tera3)!important}}@layer helpers{.font-text{font-family:var(--text)!important}.font-display{font-family:var(--display)!important}.font-mono{font-family:var(--mono)!important}.font-italic{font-style:italic!important}.font-normal{font-style:normal!important}.font-extra-light{font-weight:var(--extra-light)!important}.font-light{font-weight:var(--light)!important}.font-book{font-weight:var(--book)!important}.font-semi-bold{font-weight:var(--semi-bold)!important}.font-bold{font-weight:var(--bold)!important}.font-black{font-weight:var(--black)!important}.text-xs{font-size:var(--text-xs)!important}.text-sm{font-size:var(--text-sm)!important}.text-md{font-size:var(--text-md)!important}.text-lg{font-size:var(--text-lg)!important}.text-xl{font-size:var(--text-xl)!important}.display-sm{font-size:var(--display-sm)!important}.display-md{font-size:var(--display-md)!important}.display-lg{font-size:var(--display-lg)!important}.display-xl{font-size:var(--display-xl)!important}.display-mega{font-size:var(--display-mega)!important}.display-giga{font-size:var(--display-giga)!important}.tracking-sm{letter-spacing:var(--tracking-sm)!important}.tracking-md{letter-spacing:var(--tracking-md)!important}.tracking-lg{letter-spacing:var(--tracking-lg)!important}.tracking-xl{letter-spacing:var(--tracking-xl)!important}.tracking-xxl{letter-spacing:var(--tracking-xxl)!important}.leading-xs{line-height:var(--leading-xs)!important}.leading-sm{line-height:var(--leading-sm)!important}.leading-md{line-height:var(--leading-md)!important}.leading-lg{line-height:var(--leading-lg)!important}.leading-xl{line-height:var(--leading-xl)!important}.leading-xxl{line-height:var(--leading-xxl)!important}.text-left{text-align:left!important}.text-center{text-align:center!important}.text-right{text-align:right!important}.text-justify{text-align:justify!important}.text-start{text-align:start!important}.text-end{text-align:end!important}.text-uppercase{text-transform:uppercase!important}.text-lowercase{text-transform:lowercase!important}.text-capitalize{text-transform:capitalize!important}}@layer theme.default{:root{--xs1: 4px;--xs2: 8px;--xs3: 12px;--sm1: 16px;--sm2: 20px;--sm3: 24px;--md1: 28px;--md2: 32px;--md3: 36px;--lg1: 40px;--lg2: 44px;--lg3: 48px;--xl1: 56px;--xl2: 64px;--xl3: 80px;--xxl1: 96px;--xxl2: 112px;--xxl3: 128px;--mega1: 160px;--mega2: 192px;--mega3: 224px;--giga1: 256px;--giga2: 288px;--giga3: 320px;--tera1: 384px;--tera2: 480px;--tera3: 520px;--ar-square: 1;--ar-landscape: 4/3;--ar-portrait: 3/4;--ar-widescreen: 16/9;--ar-golden: 1.618/1;--display: Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, ui-sans-serif, sans-serif;--text: ui-sans-serif, system-ui, sans-serif;--mono: Dank Mono, Inconsolata, Fira Mono, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, ui-monospace, monospace;--text-xs: .694rem;--text-sm: .833rem;--text-md: 1rem;--text-lg: 1.2rem;--text-xl: 1.44rem;--display-sm: 1.728rem;--display-md: 2.074rem;--display-lg: 2.488rem;--display-xl: 2.986rem;--display-mega: 3.583rem;--display-giga: 4.299rem;--extra-light: 200;--light: 300;--book: 400;--semi-bold: 600;--bold: 700;--black: 900;--tracking-sm: -.05em;--tracking-md: .025em;--tracking-lg: .05em;--tracking-xl: .075em;--tracking-xxl: .15em;--leading-xs: 1;--leading-sm: 1.15;--leading-md: 1.375;--leading-lg: 1.5;--leading-xl: 1.75;--leading-xxl: 2;--base-0: #fff;--base-50: #f6f7f9;--base-100: #edeef1;--base-200: #d6dbe1;--base-300: #b2bbc7;--base-400: #8897a8;--base-500: #697a8e;--base-600: #546375;--base-700: #4a5666;--base-800: #3c4550;--base-900: #353c45;--base-950: #23282e;--primary-50: #f0f9ff;--primary-100: #e0f2fe;--primary-200: #bae6fd;--primary-300: #7dd3fc;--primary-400: #38bdf8;--primary-500: #0ea5e9;--primary-600: #0284c7;--primary-700: #0369a1;--primary-800: #075985;--primary-900: #0c4a6e;--primary-950: #082f49;--yes-100: #d5f6e8;--yes-200: #afebd4;--yes-300: #7adbbd;--yes-400: #46c4a0;--yes-500: #13886d;--no-100: #ffe4e6;--no-200: #fecdd3;--no-300: #fda4af;--no-400: #fb7185;--no-500: #e11d48;--maybe-100: #fff7d6;--maybe-200: #fff0b3;--maybe-300: #ffd64a;--maybe-400: #ffc220;--maybe-500: #f9a007;--highlight-500: #ffee00;--border-sm: 1px;--border-md: 2px;--border-lg: 4px;--border-xl: 8px;--border-xxl: 12px;--radius-sm: 3px;--radius-md: 5px;--radius-lg: 8px;--radius-xl: 12px;--radius-xxl: 16px;--radius-round: 1e5px;--shadow-sm: 0 1px 3px 0 var(--ui-shadow-color), 0 1px 2px -1px var(--ui-shadow-color);--shadow-md: 0 4px 6px -1px var(--ui-shadow-color), 0 2px 4px -2px var(--ui-shadow-color);--shadow-lg: 0 8px 13px -3px var(--ui-shadow-color), 0 4px 6px -4px var(--ui-shadow-color);--shadow-xl: 0 20px 20px -5px var(--ui-shadow-color), 0 8px 10px -6px var(--ui-shadow-color);--shadow-xxl: 0px 11px 8px -6px var(--ui-shadow-color), 0 10px 15px 2px var(--ui-shadow-color);--o-0: 0;--o-1: .2;--o-2: .4;--o-3: .6;--o-4: .8;--o-5: 1;--z-bottom: -1000000000;--z-0: 0;--z-1: 10;--z-2: 20;--z-3: 30;--z-4: 40;--z-5: 50;--z-top: 1000000000;--transition: .22s ease-in-out;--transition-fast: .1s ease-in-out}}@layer theme.default{:root{color-scheme:light dark;--ui-border-color: light-dark(var(--base-200), var(--base-500));--ui-shadow-color: light-dark(rgb(0 0 0 / .1), rgb(0 0 0 / .6));--focus-ring-color: light-dark(var(--primary-500), var(--primary-400));--focus-ring-width: 2px;--focus-ring-offset: 2px;--success-100: var(--yes-100);--success-200: var(--yes-200);--success-300: var(--yes-300);--success-400: var(--yes-400);--success-500: var(--yes-500);--danger-100: var(--no-100);--danger-200: var(--no-200);--danger-300: var(--no-300);--danger-400: var(--no-400);--danger-500: var(--no-500);--warning-100: var(--maybe-100);--warning-200: var(--maybe-200);--warning-300: var(--maybe-300);--warning-400: var(--maybe-400);--warning-500: var(--maybe-500)}:root.theme-light{color-scheme:light}:root.theme-dark{color-scheme:dark}:root{accent-color:var(--primary-500);--body-background-color: light-dark(var(--base-0), var(--base-950));--body-line-height: var(--leading-lg);--input-height: var(--md3);--input-padding: var(--xs3);--input-border-width: var(--border-sm);--input-border-color: var(--ui-border-color);--input-border-radius: var(--radius-md);--input-border-color-invalid: light-dark( var(--danger-500), var(--danger-400) );--label-spacing: var(--xs1);--fieldset-padding: var(--sm3);--fieldset-border-width: var(--border-sm);--fieldset-border-color: var(--ui-border-color);--fieldset-border-radius: var(--radius-lg);--meter-height: var(--sm1);--meter-border-radius: var(--radius-md);--meter-track-color: var(--primary-100);--meter-low-color: var(--danger-400);--meter-medium-color: var(--warning-400);--meter-high-color: var(--success-400);--progress-height: var(--sm1);--progress-color: var(--primary-500);--progress-track-color: var(--primary-100);--progress-border-radius: var(--radius-md);--select-icon-size: var(--sm3);--select-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");--dialog-min-width: var(--tera1);--dialog-max-width: var(--tera3);--dialog-padding: var(--lg1) var(--md1);--dialog-border-width: var(--border-sm);--dialog-border-color: light-dark(var(--base-200), var(--base-800));--dialog-background-color: light-dark(var(--base-50), var(--base-900));--dialog-border-radius: var(--radius-lg);--dialog-backdrop-color: var(--base-950);--dialog-backdrop-opacity: var(--o-4);--details-padding: var(--sm1);--details-spacing: var(--xs3);--details-border-width: var(--border-sm);--details-border-color: light-dark(var(--base-200), var(--base-800));--details-background-color: light-dark(var(--base-50), var(--base-900));--details-border-radius: var(--radius-lg);--details-icon-size: var(--sm3);--details-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");--table-padding: var(--xs2) var(--sm1);--table-border-width: var(--border-sm);--table-border-color: light-dark(var(--base-100), var(--base-700));--table-border-radius: var(--radius-md);--table-background-color: none;--table-caption-spacing: var(--xs3);--figcaption-spacing: var(--xs2);--heading-font: var(--display);--heading-weight: var(--black);--heading-letter-spacing: normal;--heading-font-size-h1: clamp( var(--display-md), 1.269rem + 2.682vw, var(--display-xl) );--heading-font-size-h2: clamp( var(--display-sm), 1.057rem + 2.235vw, var(--display-lg) );--heading-font-size-h3: clamp( var(--text-xl), .881rem + 1.865vw, var(--display-md) );--heading-font-size-h4: clamp( var(--text-lg), .734rem + 1.553vw, var(--display-sm) );--heading-font-size-h5: clamp( var(--text-lg), .988rem + .706vw, var(--text-xl) );--heading-font-size-h6: clamp( var(--text-md), .824rem + .588vw, var(--text-lg) );--heading-line-height: var(--leading-sm);--heading-line-height-h1: var(--heading-line-height);--heading-line-height-h2: var(--heading-line-height);--heading-line-height-h3: var(--heading-line-height);--heading-line-height-h4: var(--leading-md);--heading-line-height-h5: var(--leading-md);--heading-line-height-h6: var(--leading-md);--heading-spacing-h1: .4em;--heading-spacing-h2: .4em;--heading-spacing-h3: .4em;--heading-spacing-h4: .4em;--heading-spacing-h5: .4em;--heading-spacing-h6: .4em;--heading-spacing-consecutive: .3em;--text-color: light-dark(var(--base-950), var(--base-200));--link-font-weight: var(--semi-bold);--link-color: light-dark(var(--primary-600), var(--primary-400));--link-color-hover: var(--primary-500);--text-code-color: light-dark(var(--primary-600), var(--primary-400));--text-code-background-color: light-dark( var(--primary-100), var(--primary-900) );--text-code-muted-color: light-dark(var(--base-500), var(--base-300));--pre-border-radius: var(--radius-md);--pre-font-size: .9rem;--blockquote-padding-block: var(--sm1);--blockquote-padding-inline: var(--md1) var(--sm3);--blockquote-background-color: light-dark( var(--primary-50), var(--primary-900) );--blockquote-border-radius: var(--radius-md);--blockquote-accent-width: var(--xs2);--blockquote-accent-color: linear-gradient( var(--primary-800), var(--primary-500) );--hr-content: "";--ins-color: var(--base-950);--ins-background-color: var(--success-200);--marker-color: var(--highlight-500);--selection-color: light-dark(var(--base-950), var(--base-0));--selection-background-color: light-dark( var(--primary-200), var(--primary-700) )}:root{--grid-column-gap: var(--sm1);--grid-row-gap: var(--sm1);@media(width>=768px){--grid-column-gap: var(--sm3);--grid-row-gap: var(--sm3)}--wrap-spacing: var(--sm1);--wrap-md-spacing: var(--sm3);--wrap-lg-spacing: 0;--wrap-width-sm: minmax(0, 55ch);--wrap-width-md: minmax(0, 70ch);--wrap-width-lg: minmax(0, 900px);--wrap-width: var(--wrap-width-md);--layout-content-width: 70ch;--layout-aside-width: 245px;--layout-toc-width: 1fr;--prose-spacing: var(--sm1)}:root{--badge-font-size: var(--text-sm);--badge-border-radius: var(--radius-md);--badge-color: var(--base-0);--badge-background-color: light-dark(var(--base-700), var(--base-600));--badge-primary-color: var(--base-0);--badge-primary-background-color: light-dark( var(--primary-600), var(--primary-500) );--badge-success-color: light-dark(var(--success-500), var(--base-0));--badge-success-background-color: light-dark( var(--success-100), var(--success-500) );--badge-danger-color: light-dark(var(--danger-500), var(--base-0));--badge-danger-background-color: light-dark( var(--danger-100), var(--danger-500) );--badge-warning-color: light-dark(var(--warning-500), var(--base-950));--badge-warning-background-color: light-dark( var(--warning-100), var(--warning-500) )}:root{--bt-min-width: 101px;--bt-min-width-md: 123px;--bt-min-width-lg: 133px;--bt-font-size: var(--text-sm);--bt-font-size-lg: var(--text-md);--bt-font-weight: var(--semi-bold);--bt-color: var(--text-color);--bt-color-hover: light-dark(var(--text-color), var(--base-0));--bt-background-color: light-dark(var(--base-0), var(--base-800));--bt-background-color-hover: light-dark(var(--base-50), var(--base-900));--bt-border-color: var(--ui-border-color);--bt-border-width: var(--border-sm);--bt-border-radius: var(--radius-lg);--bt-border-radius-lg: var(--radius-xl);--bt-outline-color-hover: light-dark(var(--base-950), var(--base-0));--bt-outline-background-color-hover: light-dark( rgb(0 0 0 / .1), rgb(255 255 255 / .1) );--bt-outline-border-color: light-dark(var(--base-950), var(--base-0));--bt-outline-border-color-hover: light-dark(var(--base-950), var(--base-0));--bt-primary-color: var(--base-0);--bt-primary-color-hover: var(--base-0);--bt-primary-background-color: var(--primary-600);--bt-primary-background-color-hover: var(--primary-500);--bt-primary-border-color: var(--primary-600);--bt-primary-border-color-hover: var(--primary-600)}:root{--avatar-color: var(--base-0);--avatar-background-color: var(--base-400);--avatar-border-color: light-dark(var(--base-0), var(--base-500));--avatar-border-width: var(--border-sm);--avatar-radius: var(--radius-round);--avatar-status-dot-color-offline: var(--base-300);--avatar-status-dot-color-online: var(--yes-400)}:root{--banner-color: var(--base-0);--banner-background-color: light-dark(var(--primary-600), var(--primary-800))}:root{--breadcrumbs-separator: "/";--breadcrumbs-separator-color: light-dark(var(--base-300), var(--base-600));--breadcrumbs-color: light-dark(var(--base-500), var(--base-400));--breadcrumbs-color-current: var(--text-color)}:root{--card-spacing: var(--sm3);--card-color: var(--text-color);--card-secondary-text-color: light-dark(var(--base-400), var(--base-500));--card-bg-color: light-dark(var(--base-100), var(--base-900));--card-border-radius: var(--radius-lg);--card-border-color: var(--ui-border-color);--card-border-width: var(--border-sm);--card-shadow: var(--shadow-md);--card-shadow-hover: var(--shadow-xl);--card-loading-bg: light-dark(var(--base-200), var(--base-900));--card-aspect-ratio: var(--ar-golden)}:root{--toggle-width: 50px;--toggle-height: 28px;--toggle-border-width: 2px;--toggle-track-color: light-dark(var(--base-300), var(--base-700));--toggle-track-color-checked: var(--yes-400);--toggle-thumb-color: var(--body-background-color)}:root{--faq-spacing: var(--xs3)}:root{--field-spacing: var(--xs1);--field-hint-color: light-dark(var(--base-400), var(--base-500));--field-error-color: light-dark(var(--danger-500), var(--danger-300));--field-message-position: static}:root{--featureItem-icon-box-size: var(--lg3);--featureItem-icon-size: var(--sm3);--featureItem-icon-color: light-dark(var(--primary-600), var(--primary-300));--featureItem-icon-background-color: light-dark( var(--primary-100), var(--primary-900) );--featureItem-icon-border-radius: var(--radius-lg)}:root{--footer-background-color: light-dark(var(--primary-950), var(--base-950));--footer-text-color: light-dark(var(--base-0), var(--base-200));--footer-border-width: var(--border-md);--footer-border-color: light-dark(transparent, var(--base-700));--footer-link-color: light-dark(var(--base-0), var(--base-200));--footer-link-color-hover: light-dark(var(--primary-200), var(--base-0))}:root{--header-height: var(--xl1);--header-padding: var(--sm1);@media(width>=768px){--header-height: var(--xl2);--header-padding: var(--sm3)}--header-background-color: light-dark(var(--base-0), var(--base-950));--header-menu-background-color: var(--base-950);--header-menu-color: var(--base-0);--header-menu-color-current: var(--primary-400);--header-menu-secondary-color: var(--base-300);--header-menu-border-color: var(--base-500)}:root{--hero-radius: var(--radius-xl);--hero-content-padding: var(--md3);--hero-actions-spacing: var(--lg3);--hero-pagination-dot: var(--sm1);--hero-pagination-dot-color: var(--base-0);--hero-pagination-dot-active-color: var(--primary-600);--hero-pagination-opacity: var(--o-4)}:root{--pagination-size: var(--md3);--pagination-border-radius: var(--radius-md);--pagination-color: var(--text-color);--pagination-color-current: var(--base-0);--pagination-background-color-current: light-dark( var(--primary-600), var(--primary-500) );--pagination-background-color-hover: light-dark( var(--base-100), var(--base-800) )}:root{--prevNext-border-color: var(--ui-border-color);--prevNext-border-radius: var(--radius-lg);--prevNext-border-color-hover: var(--link-color);--prevNext-label-color: light-dark(var(--base-400), var(--base-500))}:root{--notice-spacing: var(--sm1);--notice-text-color: light-dark(var(--base-950), var(--base-0));--notice-background-color: light-dark(var(--base-50), var(--base-800));--notice-border-color: light-dark(var(--base-200), var(--base-500));--notice-border-width: var(--border-sm);--notice-border-radius: var(--radius-lg)}:root{--pricingCard-highlight-border-color: light-dark( var(--primary-600), var(--primary-400) );--pricingCard-check-color: light-dark(var(--success-500), var(--success-400))}:root{--readProgressBar-height: var(--xs1);--readProgressBar-color: linear-gradient( 90deg, var(--primary-600) 0%, var(--primary-400) 100% )}:root{--section-spacing: var(--xl3);--section-header-spacing: var(--lg3);--section-eyebrow-color: light-dark(var(--primary-600), var(--primary-400));--section-lede-color: light-dark(var(--base-500), var(--base-400));--section-filled-background-color: light-dark( var(--base-50), var(--base-900) );--section-primary-background-color: light-dark( var(--primary-600), var(--primary-900) );--section-primary-text-color: var(--base-0);--section-primary-link-color: var(--primary-100);--section-primary-link-color-hover: var(--base-0);--section-primary-eyebrow-color: var(--primary-200);--section-primary-lede-color: var(--primary-100)}:root{--testimonial-role-color: light-dark(var(--base-400), var(--base-500))}:root{--tags-padding: var(--xs2);--tags-font-size: var(--text-sm);--tags-color: light-dark(var(--base-500), var(--base-400));--tags-background-color: light-dark(var(--base-100), var(--base-800));--tags-background-color-hover: light-dark(var(--base-200), var(--base-950));--tags-radius: var(--radius-md)}:root{--toc-color: var(--link-color);--toc-color-hover: var(--link-color-hover);--toc-spacing: var(--xs1);--toc-indentation: var(--xs3);--toc-icon-size: var(--sm1)}} diff --git a/src/content/blog/mcss-structure.md b/src/content/blog/mcss-structure.md index 723f9f28..6548e99f 100644 --- a/src/content/blog/mcss-structure.md +++ b/src/content/blog/mcss-structure.md @@ -16,8 +16,8 @@ If you look at the imports in `mcss.css` [on Github][1], you'll get the basic id - Elements: HTML elements defaults, without any classes. - Global: layouts like `.wrap` and `.grid` and global styling like `.prose`. - Components: component specific styling, from single-class pieces like `.bt` buttons to full structures. -- Theme defaults: the default theme, where every global variable is set (scale tokens and ui tokens). -- Theme overrides: your own theme, a file of token overrides that restyles the whole site. +- Theme default: the default theme, where every global variable is set (scale tokens and ui tokens). +- Theme user: your own theme, a file of token overrides that restyles the whole site. - Helpers: local overrides (last layer, so they beat everything above). - Your own CSS imports unlayered, after the framework, and wins over all of it. diff --git a/src/content/docs/ai.mdx b/src/content/docs/ai.mdx index dce622d6..9c6c1b36 100644 --- a/src/content/docs/ai.mdx +++ b/src/content/docs/ai.mdx @@ -40,11 +40,11 @@ Per-page docs: append `.md` to any mcss.dev docs or components URL (e.g. https:/ ### Mental model: layers from default to deliberate -All framework CSS lives in native cascade layers, declared in `mcss.css` in priority order (later wins): `base, elements, global, components, theme.defaults, theme.overrides, helpers`. `mcss.css` only declares the `components` and theme slots; the component library fills `components` from a second entry, `mcss.components.css`, imported alongside (skip it in projects that build their own components), and the default theme (`theme.default.css`) fills `theme.defaults` from YOUR entry, imported right after `mcss.css`: nothing paints without it. +All framework CSS lives in native cascade layers, declared in `mcss.css` in priority order (later wins): `base, elements, global, components, theme.default, theme.user, helpers`. `mcss.css` only declares the `components` and theme slots; the component library fills `components` from a second entry, `mcss.components.css`, imported alongside (skip it in projects that build their own components), and the default theme (`theme.default.css`) fills `theme.default` from YOUR entry, imported right after `mcss.css`: nothing paints without it. - `base` through `components` are the framework's structure. Never edit these files to restyle; override them from further up the order. -- `theme.defaults` holds the default theme: every design value (scale tokens + ui tokens). Never edit it either; it is what your overrides fall back to. -- `theme.overrides` holds at most one theme of your own: a deliberate opinion about the defaults (copy `theme.starter.css`). A full skin like `theme.wireframe.css` is an entry that composes the default theme and overrides on top; either way, activate exactly one theme entry. +- `theme.default` holds the default theme: every design value (scale tokens + ui tokens). Never edit it either; it is what your overrides fall back to. +- `theme.user` holds at most one theme of your own: a deliberate opinion about the defaults (copy `theme.starter.css`). A full skin like `theme.wireframe.css` is an entry that composes the default theme and overrides on top; either way, activate exactly one theme entry. - Your own unlayered CSS is more deliberate still: it beats every layer, by design. Never use `!important` to win against the framework. - `helpers` (`help.*` files: spacing, color, typography utilities) are the one exception: every declaration carries `!important`, which inverts the cascade, so they beat even unlayered CSS. Use sparingly. `!important` is banned everywhere else. @@ -56,7 +56,7 @@ Inline `style` attributes don't participate in the order at all: they beat every ### Restyling, in order of preference -1. **Theme token overrides.** A theme is one file that restyles the whole site: `@layer theme.overrides { :root { ... } }` (self-layered, so it slots correctly however it's loaded). Copy `theme.starter.css` to start one; import it from your CSS entry point after `theme.default.css`, the default theme that carries every design value and that your entry must activate right after `mcss.css` (which never imports themes itself; nothing paints without the default theme). Your theme lands in `theme.overrides` and beats the default's `theme.defaults` regardless of import order; anything it doesn't mention falls back to the default theme. Pick the blast radius per override: scale tokens (`--base-*`, `--text`) shift the whole palette or type scale, ui tokens (`--ui-border-color`, `--heading-font`) change every surface that shares the meaning, component tokens (`--bt-border-radius`, `--card-*`) turn one knob. +1. **Theme token overrides.** A theme is one file that restyles the whole site: `@layer theme.user { :root { ... } }` (self-layered, so it slots correctly however it's loaded). Copy `theme.starter.css` to start one; import it from your CSS entry point after `theme.default.css`, the default theme that carries every design value and that your entry must activate right after `mcss.css` (which never imports themes itself; nothing paints without the default theme). Your theme lands in `theme.user` and beats the default's `theme.default` regardless of import order; anything it doesn't mention falls back to the default theme. Pick the blast radius per override: scale tokens (`--base-*`, `--text`) shift the whole palette or type scale, ui tokens (`--ui-border-color`, `--heading-font`) change every surface that shares the meaning, component tokens (`--bt-border-radius`, `--card-*`) turn one knob. 2. **Theme style rules**, only if a token doesn't exist for that value, or for what tokens can't express (pseudo-elements, `nth-child` rhythm, etc.). It's ok to override elements like `body` if there is no other way to reliably set it globally. Theme files are the ONE place allowed to select framework classes from outside: component classes, framework globals like `.a11y-skipLink`, and bare element selectors. **A `body` rule belongs here, not in project CSS**. Make sure you keep the ordering general to specific (same as ITCSS). No `!important` in themes. 3. **Unlayered project CSS** for what belongs to your project rather than to the design: page layouts, one-off blocks. diff --git a/src/content/docs/start.mdx b/src/content/docs/start.mdx index fd61fa95..26805740 100644 --- a/src/content/docs/start.mdx +++ b/src/content/docs/start.mdx @@ -65,16 +65,16 @@ Each layer only ever loses to the ones after it. The sections below detail each
-| Layer | Files | What lives there | -| ----------------- | ----------------- | --------------------------------------------------------- | -| `base` | `base.*` | Reset/normalize | -| `elements` | `elements.*` | Default styling of bare HTML elements | -| `global` | `global.*` | Grid, wrap, layout scaffolds, prose, a11y | -| `components` | `component.*` | One self-contained block per file | -| `theme.defaults` | `theme.default.*` | The default theme: every design value (scale + ui tokens) | -| `theme.overrides` | `theme.*` | Your theme or a swappable skin (overrides + style rules) | -| `helpers` | `help.*` | `!important` one-off overrides, last resort | -| _(unlayered)_ | your own CSS | Beats every layer above, except helpers | +| Layer | Files | What lives there | +| --------------- | ----------------- | --------------------------------------------------------- | +| `base` | `base.*` | Reset/normalize | +| `elements` | `elements.*` | Default styling of bare HTML elements | +| `global` | `global.*` | Grid, wrap, layout scaffolds, prose, a11y | +| `components` | `component.*` | One self-contained block per file | +| `theme.default` | `theme.default.*` | The default theme: every design value (scale + ui tokens) | +| `theme.user` | `theme.*` | Your theme or a swappable skin (overrides + style rules) | +| `helpers` | `help.*` | `!important` one-off overrides, last resort | +| _(unlayered)_ | your own CSS | Beats every layer above, except helpers |
@@ -84,7 +84,7 @@ The framework's own entry, [`framework/mcss.css`][mcss-entry], makes the split c ```css /* framework/mcss.css (abridged) */ -@layer base, elements, global, components, theme.defaults, theme.overrides, helpers; +@layer base, elements, global, components, theme.default, theme.user, helpers; /* Build-time only (media queries + mixins definitions) */ @import url(./settings.media-queries.css); @@ -97,7 +97,7 @@ The framework's own entry, [`framework/mcss.css`][mcss-entry], makes the split c /* etc. — note: no component.* and no theme.* imports here */ ``` -Three slots are declared but never filled by this entry. The two theme slots are filled from YOUR entry: `theme.defaults` by the default theme (`theme.default.css`, which the framework needs to paint at all) and `theme.overrides` by a theme of your own, if any (see below). The `components` slot belongs to the component library, which lives in its own entry, [`framework/mcss.components.css`][mcss-components-entry]. Import it alongside `mcss.css` for the full library, or skip it and build your own components; the layer order declared in `mcss.css` decides priority either way, so import order between the entries doesn't matter. +Three slots are declared but never filled by this entry. The two theme slots are filled from YOUR entry: `theme.default` by the default theme (`theme.default.css`, which the framework needs to paint at all) and `theme.user` by a theme of your own, if any (see below). The `components` slot belongs to the component library, which lives in its own entry, [`framework/mcss.components.css`][mcss-components-entry]. Import it alongside `mcss.css` for the full library, or skip it and build your own components; the layer order declared in `mcss.css` decides priority either way, so import order between the entries doesn't matter. Your site's entry (this site's is [`_global.css`][4]) pulls in the framework, activates the default theme (plus optionally one of your own), then imports your own CSS unlayered: @@ -116,7 +116,7 @@ Your site's entry (this site's is [`_global.css`][4]) pulls in the framework, ac @import url(./framework/theme.default.css); /* Optional: your own theme (copy theme.starter.css). It lands in - theme.overrides, so it beats the default no matter the order. */ + theme.user, so it beats the default no matter the order. */ /* @import url(./theme.acme.css); */ /* Your own CSS: UNLAYERED, after the framework. Its normal @@ -183,7 +183,7 @@ Some components are **CSS-only**: a single class on a single element, with no As Every design value in mCSS lives in a theme; the layers before this one are pure structure. The framework ships a **default theme** (`theme.default.css`) in two halves: [tokens][5], the scales where sizes, font stacks, colors, and transitions get their values, and [ui tokens][interfaceTokens], which map those scales onto elements and components (components use `--ui-border-color` instead of the lower level `--base-200`, so one override restyles every bordered surface). Your entry activates it right after `mcss.css`; without it, nothing paints. -Your own theme is one `theme.*.css` file of token overrides plus optional style rules that imports after the default (copy `theme.starter.css`). It lands in the `theme.overrides` layer, so it beats the default theme no matter the import order, and everything it doesn't mention falls back. **Never edit the default theme files**; your design lives in your theme, which is what keeps framework updates painless. A shipped skin like `theme.wireframe.css` replaces the default import instead: it's an entry that composes the default and overrides on top. +Your own theme is one `theme.*.css` file of token overrides plus optional style rules that imports after the default (copy `theme.starter.css`). It lands in the `theme.user` layer, so it beats the default theme no matter the import order, and everything it doesn't mention falls back. **Never edit the default theme files**; your design lives in your theme, which is what keeps framework updates painless. A shipped skin like `theme.wireframe.css` replaces the default import instead: it's an entry that composes the default and overrides on top. The theme's remit is wider than component classes. Theme files are the ONE place allowed to select framework classes from outside: component classes, framework globals like `.a11y-skipLink`, and bare element selectors. **A `body` rule belongs in the theme, not in your project CSS.** Before adding a declaration to `body`, check whether a ui token already delivers it: the elements layer paints the page from `--body-background-color`, `--text-color`, and `--text`, so a theme that sets those does not also need to set `background-color`, `color`, and `font-family`. See [the theme docs][themes] for how themes work and how to build one. diff --git a/src/content/docs/template.mdx b/src/content/docs/template.mdx index 87865e04..1cac5e50 100644 --- a/src/content/docs/template.mdx +++ b/src/content/docs/template.mdx @@ -37,14 +37,14 @@ Two blocks in the file exist for the docs demo and are safe to touch:
-| What | Files | -| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| The page | `src/pages/templates/marketing.astro` ([source][srcTemplate]) | +| What | Files | +| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| The page | `src/pages/templates/marketing.astro` ([source][srcTemplate]) | | Astro components | `Banner`, `Header`, `Hero`, `Section`, `Tiles`, `FeatureItem`, `Testimonial`, `Avatar` (used by Testimonial), `PricingCard`, `Faq`, `FaqItem`, `Footer` ([source][srcComponents]) | -| Framework CSS | The framework entries `mcss.css` and `mcss.components.css` cover every component and layout style used ([source][srcFramework]) | -| Theme (optional) | `theme.wireframe.css`, only if you keep the switcher ([source][srcWireframe]) | -| Icons | `menu`, `x`, `check`, `circle-check`, `moon-star`, `external-link`, `rotate-ccw`, `mail`, `heart` ([source][srcIcons]) | -| Scripts | `src/scripts/utilities.js` (the Header's scroll throttle) ([source][srcScripts]) | +| Framework CSS | The framework entries `mcss.css` and `mcss.components.css` cover every component and layout style used ([source][srcFramework]) | +| Theme (optional) | `theme.wireframe.css`, only if you keep the switcher ([source][srcWireframe]) | +| Icons | `menu`, `x`, `check`, `circle-check`, `moon-star`, `external-link`, `rotate-ccw`, `mail`, `heart` ([source][srcIcons]) | +| Scripts | `src/scripts/utilities.js` (the Header's scroll throttle) ([source][srcScripts]) |
diff --git a/src/content/docs/themes.mdx b/src/content/docs/themes.mdx index 7d9244f8..54a4c840 100644 --- a/src/content/docs/themes.mdx +++ b/src/content/docs/themes.mdx @@ -40,7 +40,7 @@ Activate the default theme right after the framework, then (optionally) your own A full swappable skin like the wireframe replaces the default import instead: `theme.wireframe.css` is an entry that composes `theme.default.css` itself and overrides on top, so you import it INSTEAD of the default. Either way you activate exactly one theme entry. -Theme files are **self-layered**, so they land in the right cascade slot no matter how you load them (plain `@import`, a `` tag on a `dist/css` file, or a bundler); no `layer()` annotation needed. The default theme's parts layer into `theme.defaults`, and your theme layers into `theme.overrides`, which comes after it: **your theme beats the default no matter the import order.** Both sit after `components` and before `helpers`, so any theme beats the framework's structure but still loses to your own unlayered CSS and to [helpers](/docs/helpers). The layer order runs from default to deliberate: the framework's layers and the default theme are what things look like when nobody has an opinion, your theme is a deliberate opinion about those defaults, and your unlayered CSS is more deliberate still. +Theme files are **self-layered**, so they land in the right cascade slot no matter how you load them (plain `@import`, a `` tag on a `dist/css` file, or a bundler); no `layer()` annotation needed. The default theme's parts layer into `theme.default`, and your theme layers into `theme.user`, which comes after it: **your theme beats the default no matter the import order.** Both sit after `components` and before `helpers`, so any theme beats the framework's structure but still loses to your own unlayered CSS and to [helpers](/docs/helpers). The layer order runs from default to deliberate: the framework's layers and the default theme are what things look like when nobody has an opinion, your theme is a deliberate opinion about those defaults, and your unlayered CSS is more deliberate still. @@ -56,7 +56,7 @@ Themes work because the default theme is built in two halves your overrides can Because components read `var(--ui-border-color)` instead of a raw hex, a theme gets three levels of blast radius from a single override: ```css -@layer theme.overrides { +@layer theme.user { :root { /* Whole palette shifts */ --base-950: #1a1208; diff --git a/src/pages/templates/marketing.astro b/src/pages/templates/marketing.astro index 462934da..21be10e0 100644 --- a/src/pages/templates/marketing.astro +++ b/src/pages/templates/marketing.astro @@ -41,7 +41,7 @@ const navItems = [ /* Pin the cascade-layer order before any stylesheet loads: layer priority is set by first occurrence, and the theme below may be parsed before the framework's own @layer statement. */ - @layer base, elements, global, components, theme.defaults, theme.overrides, helpers; + @layer base, elements, global, components, theme.default, theme.user, helpers; diff --git a/src/styles/_global.css b/src/styles/_global.css index 21eeff51..ffd3e406 100644 --- a/src/styles/_global.css +++ b/src/styles/_global.css @@ -10,7 +10,7 @@ one theme entry: theme.default.css for the stock look, or a skin like theme.wireframe.css that composes the default and overrides on top. A theme of this site's own would import after the default and land in - `theme.overrides` (copy theme.starter.css). No layer() annotation: + `theme.user` (copy theme.starter.css). No layer() annotation: theme files self-layer. Unlayered site styles below beat any theme no matter where these lines sit. */ diff --git a/src/styles/framework/mcss.css b/src/styles/framework/mcss.css index 64abbf23..663f4afb 100644 --- a/src/styles/framework/mcss.css +++ b/src/styles/framework/mcss.css @@ -8,7 +8,7 @@ declarations beat unlayered CSS. Helpers are element-level overrides that win everywhere, like inline styling. */ -@layer base, elements, global, components, theme.defaults, theme.overrides, helpers; +@layer base, elements, global, components, theme.default, theme.user, helpers; /* Build-time only (@custom-media + mixin definitions, no runtime output) */ @import url(./settings.media-queries.css); @@ -24,7 +24,7 @@ Without it, every token is unset and the page renders half-styled. Your own theme (copy theme.starter.css) imports after that and lands in - `theme.overrides`, so it beats the default's `theme.defaults` no matter + `theme.user`, so it beats the default's `theme.default` no matter the import order. Theme files self-layer, so no layer() annotation is needed on their imports. See _global.css for this site's entry. */ diff --git a/src/styles/framework/theme.default.css b/src/styles/framework/theme.default.css index f54a4edd..97f84e65 100644 --- a/src/styles/framework/theme.default.css +++ b/src/styles/framework/theme.default.css @@ -13,8 +13,8 @@ Never edit the default theme. Your palette, type, and overrides go in a theme of your own, imported after this one (copy theme.starter.css). The - parts here land in the `theme.defaults` layer and your theme lands in - `theme.overrides`, so yours wins no matter the import order. A full + parts here land in the `theme.default` layer and your theme lands in + `theme.user`, so yours wins no matter the import order. A full replacement skin works the same way: theme.wireframe.css composes this entry and overrides on top. */ @@ -22,11 +22,11 @@ /* Pin the layer order before anything else in this file: priority is set by first declaration, so a theme loaded before mcss.css still slots correctly. */ -@layer base, elements, global, components, theme.defaults, theme.overrides, helpers; +@layer base, elements, global, components, theme.default, theme.user, helpers; /* The parts are plain CSS; this entry assigns their layer, the same way mcss.css layers the structural files. (Only standalone theme files self-layer; in dist/css the parts are pre-wrapped so a lone still works.) */ -@import url(./theme.default.tokens.css) layer(theme.defaults); -@import url(./theme.default.ui.css) layer(theme.defaults); +@import url(./theme.default.tokens.css) layer(theme.default); +@import url(./theme.default.ui.css) layer(theme.default); diff --git a/src/styles/framework/theme.starter.css b/src/styles/framework/theme.starter.css index 127cd248..a4a412a8 100644 --- a/src/styles/framework/theme.starter.css +++ b/src/styles/framework/theme.starter.css @@ -10,8 +10,8 @@ @import url(./theme.acme.css); Everything this file doesn't mention falls back to the default theme. - It self-layers into `theme.overrides`, which beats the default theme's - `theme.defaults` no matter the import order. Never edit the default + It self-layers into `theme.user`, which beats the default theme's + `theme.default` no matter the import order. Never edit the default theme files: your palette, type, and overrides all live here, which is what keeps framework updates painless. @@ -32,9 +32,9 @@ /* Pin the layer order before declaring into it: priority is set by first declaration, so this file slots correctly even if it loads before mcss.css. */ -@layer base, elements, global, components, theme.defaults, theme.overrides, helpers; +@layer base, elements, global, components, theme.default, theme.user, helpers; -@layer theme.overrides { +@layer theme.user { :root { /* A new palette usually gets you 80% of the way: */ /* --base-0: #fff; */ diff --git a/src/styles/framework/theme.wireframe.css b/src/styles/framework/theme.wireframe.css index 986d98f9..d66acd4e 100644 --- a/src/styles/framework/theme.wireframe.css +++ b/src/styles/framework/theme.wireframe.css @@ -8,15 +8,15 @@ A full skin is an entry that composes the default theme and overrides on top: the import below brings in every default, and this file's own - rules land in `theme.overrides`, which wins over the default's - `theme.defaults`. Activate exactly one theme entry from your own entry + rules land in `theme.user`, which wins over the default's + `theme.default`. Activate exactly one theme entry from your own entry point (see theme.default.css). */ /* Pin the layer order before anything else in this file: priority is set by first declaration, so this skin slots correctly even if it loads before mcss.css. */ -@layer base, elements, global, components, theme.defaults, theme.overrides, helpers; +@layer base, elements, global, components, theme.default, theme.user, helpers; @import url(./theme.default.css); @@ -30,7 +30,7 @@ initial-value: 1; } -@layer theme.overrides { +@layer theme.user { :root { /* COLORS: everything goes grayscale, including the primary scale */ diff --git a/src/tools/build-css.mjs b/src/tools/build-css.mjs index 6e515197..024a4bcf 100644 --- a/src/tools/build-css.mjs +++ b/src/tools/build-css.mjs @@ -79,7 +79,7 @@ function layerOf(file) { } const LAYER_STATEMENT = - "@layer base, elements, global, components, theme.defaults, theme.overrides, helpers;\n"; + "@layer base, elements, global, components, theme.default, theme.user, helpers;\n"; // Rebuild dist/css from scratch so renamed or deleted source files can't // leave stale outputs behind. @@ -145,7 +145,7 @@ for (const file of files) { const importsOnly = file === "theme.default.css"; const isDefaultPart = file.startsWith("theme.default.") && !importsOnly; const selfLayered = layer === "theme" && !isDefaultPart; - const wrapLayer = isDefaultPart ? "theme.defaults" : layer; + const wrapLayer = isDefaultPart ? "theme.default" : layer; const wrapped = importsOnly ? css : selfLayered From d249c68e59071c2dffc7eeb834e0396cdf8575bc Mon Sep 17 00:00:00 2001 From: Yann Date: Fri, 14 Aug 2026 19:24:54 -0700 Subject: [PATCH 09/37] Collapse the feedback alias tier The --success/danger/warning-* aliases over --yes/no/maybe-* were a synonym layer: the raw palettes are already semantically named, and adoption was split (notices and button variants consumed the raw scales), so overriding an alias silently missed half the feedback surfaces. Everything now consumes the palettes directly, the fifteen alias declarations are gone, and the docs plus AI block and skill mirror state the single-vocabulary rule. Component token names like --badge-success-color keep their variant names; only their values changed. Computed values are identical. Co-Authored-By: Claude Fable 5 --- agents/css.md | 2 +- dist/css/elements.text.css | 2 +- dist/css/help.devtools.css | 6 +- dist/css/theme.default.css | 29 +-- dist/css/theme.default.tokens.css | 54 +++-- dist/css/theme.default.ui.css | 97 +++----- dist/css/theme.starter.css | 34 ++- dist/mcss.css | 227 +++++++----------- dist/mcss.min.css | 2 +- src/content/docs/ai.mdx | 2 +- src/content/docs/tokens.mdx | 2 +- src/styles/_global.css | 21 +- src/styles/framework/elements.text.css | 2 +- src/styles/framework/help.devtools.css | 6 +- src/styles/framework/mcss.css | 36 +-- src/styles/framework/theme.default.css | 29 +-- src/styles/framework/theme.default.tokens.css | 54 +++-- src/styles/framework/theme.default.ui.css | 97 +++----- src/styles/framework/theme.starter.css | 34 ++- 19 files changed, 279 insertions(+), 457 deletions(-) diff --git a/agents/css.md b/agents/css.md index 4892f8d3..548525f0 100644 --- a/agents/css.md +++ b/agents/css.md @@ -68,7 +68,7 @@ UI tokens (`theme.default.ui.css`) are the public API of every component; they f - `--bt-background-color-hover`, `--notice-border-width`, `--avatar-status-dot-color-online` - No abbreviations (`--card-bg-color` is legacy; new tokens spell out `background-color`), no camelCase, no underscores. -- Feedback colors: prefer the semantic aliases `--success-*` / `--danger-*` / `--warning-*` over the raw `--yes/no/maybe-*` scales. +- Feedback colors come straight from the `--yes-*` / `--no-*` / `--maybe-*` palettes; there is no separate success/danger/warning alias tier. ### Logical vs physical direction diff --git a/dist/css/elements.text.css b/dist/css/elements.text.css index a52c3159..49632efa 100644 --- a/dist/css/elements.text.css +++ b/dist/css/elements.text.css @@ -173,7 +173,7 @@ dd + dt { } del { - text-decoration-color: var(--danger-500); + text-decoration-color: var(--no-500); text-decoration-style: wavy; } diff --git a/dist/css/help.devtools.css b/dist/css/help.devtools.css index 1cfc5882..75df3daa 100644 --- a/dist/css/help.devtools.css +++ b/dist/css/help.devtools.css @@ -49,9 +49,9 @@ body.dev { z-index: var(--z-top) !important; padding: var(--sm1) !important; font-size: 1rem !important; - color: var(--danger-500) !important; - background: var(--danger-100) !important; - border: 1px solid var(--danger-500) !important; + color: var(--no-500) !important; + background: var(--no-100) !important; + border: 1px solid var(--no-500) !important; border-radius: var(--radius-md) !important; } diff --git a/dist/css/theme.default.css b/dist/css/theme.default.css index 8f82a982..2f91764b 100644 --- a/dist/css/theme.default.css +++ b/dist/css/theme.default.css @@ -1,33 +1,26 @@ /*! mCSS v1.3.0 | MIT | https://mcss.dev */ -/* DEFAULT THEME (entry) */ +/* DEFAULT THEME */ /* - The framework's design values: the scales (theme.default.tokens.css) and - the defaults every element and component consumes (theme.default.ui.css). - Activate it from your own entry point, right after mcss.css: + Basic design tokens and UI abstractions + Import it next to mcss.css @import url(./framework/mcss.css); @import url(./framework/theme.default.css); mcss.css imports no theme itself; without this file every token is unset - and the page renders half-styled. + and the page will look broken.. - Never edit the default theme. Your palette, type, and overrides go in a - theme of your own, imported after this one (copy theme.starter.css). The - parts here land in the `theme.default` layer and your theme lands in - `theme.user`, so yours wins no matter the import order. A full - replacement skin works the same way: theme.wireframe.css composes this - entry and overrides on top. + Don't edit the default theme. + + To make your own theme, either duplicate/rename the 2 files below and + import theme instead of the default, or just override the bits you want + to change and imported that AFTER the defaults. There is `theme.starter.css` + to get you started if you want to go that road (recommended)). */ -/* Pin the layer order before anything else in this file: priority is - set by first declaration, so a theme loaded before mcss.css still - slots correctly. */ +/* Defensive redundancy - Same layers as in mcss.css */ @layer base, elements, global, components, theme.default, theme.user, helpers; -/* The parts are plain CSS; this entry assigns their layer, the same way - mcss.css layers the structural files. (Only standalone theme files - self-layer; in dist/css the parts are pre-wrapped so a lone - still works.) */ @import url(./theme.default.tokens.css) layer(theme.default); @import url(./theme.default.ui.css) layer(theme.default); diff --git a/dist/css/theme.default.tokens.css b/dist/css/theme.default.tokens.css index 930cfde6..eb9c5c1e 100644 --- a/dist/css/theme.default.tokens.css +++ b/dist/css/theme.default.tokens.css @@ -28,12 +28,12 @@ xxl: 1920px /* DEFAULT THEME: TOKENS */ /* - The scales: every token here is named for what it IS (a step on a scale), - never for what it's for. Part of the default theme (see theme.default.css); - don't edit it, override from your own theme (see theme.starter.css). + Raw design tokens. Part of the default theme (see theme.default.css); + Don't edit this file directly. Thee best way is to Override it with your + own theme (see theme.starter.css). Can't use var() inside media queries, so breakpoints are hard coded in - settings.media-queries.css: + settings.media-queries.css instead of custom properties xxs: 240px xs: 360px sm: 480px md: 768px lg: 1024px xl: 1440px xxl: 1920px */ @@ -51,19 +51,23 @@ xxl: 1920px • Colors -• Box shadows -• Border radius • Border width +• Border radius + +• Box shadows + • Opacity + +• Z-index + +• Transitions + */ :root { - /* GLOBALS */ /* DIMENSIONS */ - /* Sizes */ - --xs1: 4px; --xs2: 8px; --xs3: 12px; @@ -100,18 +104,20 @@ xxl: 1920px --tera2: 480px; --tera3: 520px; - /* Aspect Ratios */ + /* ASPECT RATIOS */ + --ar-square: 1; --ar-landscape: 4/3; --ar-portrait: 3/4; --ar-widescreen: 16/9; --ar-golden: 1.618/1; - /* TYPOGRAPHY */ - /* See also elements.text & help.text */ + /* */ + + /* (More typography in elements.text & help.text) */ + + /* FONT FAMILIES (https://modernfontstacks.com) */ - /* Font Families */ - /* Local font stacks - More options @ https://modernfontstacks.com */ --display: Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, ui-sans-serif, sans-serif; @@ -121,8 +127,8 @@ xxl: 1920px Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, ui-monospace, monospace; - /* Font Sizes */ - /* Create your own sizes @ https://typescale.com */ + /* FONT SIZES (https://typescale.com) */ + --text-xs: 0.694rem; --text-sm: 0.833rem; --text-md: 1rem; @@ -135,11 +141,8 @@ xxl: 1920px --display-mega: 3.583rem; --display-giga: 4.299rem; - /* Heading font sizes are decisions, not scale steps: they map each - heading level onto this scale. See --heading-font-size-* in - theme.default.ui.css. */ + /* FONT WEIGHTS */ - /* Font Weights */ --extra-light: 200; --light: 300; --book: 400; @@ -147,14 +150,16 @@ xxl: 1920px --bold: 700; --black: 900; - /* Letter Spacing */ + /* LETTER SPACING */ + --tracking-sm: -0.05em; --tracking-md: 0.025em; --tracking-lg: 0.05em; --tracking-xl: 0.075em; --tracking-xxl: 0.15em; - /* Line Height */ + /* LINE HEIGHT */ + --leading-xs: 1; --leading-sm: 1.15; --leading-md: 1.375; @@ -162,8 +167,7 @@ xxl: 1920px --leading-xl: 1.75; --leading-xxl: 2; - /* COLORS */ - /* Make your own palettes programmatically: https://www.tints.dev */ + /* COLORS (https://www.tints.dev) */ /* Base */ @@ -194,8 +198,6 @@ xxl: 1920px --primary-900: #0c4a6e; --primary-950: #082f49; - /* Secondary and/or Highlight goes here */ - /* Feedback */ --yes-100: #d5f6e8; diff --git a/dist/css/theme.default.ui.css b/dist/css/theme.default.ui.css index 09bf7ae4..41ca16ae 100644 --- a/dist/css/theme.default.ui.css +++ b/dist/css/theme.default.ui.css @@ -28,23 +28,15 @@ xxl: 1920px /* DEFAULT THEME: UI */ /* - The decisions. Every token here is named for what it's FOR (an - element, a component, or a shared meaning) and answers "what does this - thing use by default". Tokens named for what they ARE (--sm1, --base-500, - --bold) are scale tokens and live in theme.default.tokens.css. That's the - whole split: a name that mentions a UI thing belongs here; a name that - labels a step on a scale belongs there. + Tokens here are one abstraction level above raw tokens + They define styling for elements, components, or a shared style. Values, in order of preference: 1. Another ui token, when the meaning is shared - (--input-border-color: var(--ui-border-color)). - 2. A scale token, when the value should follow the system scales - (--fieldset-padding: var(--sm3)). - 3. A raw value, only where following the scales would be wrong: - content (separator strings, icon URLs), geometry tuned to one - control (--toggle-width), or element-relative measures that track - the element's own type instead of the page (em heading spacing). - The test: "if a theme retuned the scales, should this follow?" + `--input-border-color: var(--ui-border-color)` + 2. A raw token: `--fieldset-padding: var(--sm3)` + 3. A raw value, only when it's not supposed to match a raw token + or when it's relative to the the element's own value (em heading spacing). Part of the default theme (see theme.default.css); don't edit it, override from your own theme (see theme.starter.css). @@ -52,41 +44,20 @@ xxl: 1920px :root { /* Color scheme (light/dark), toggled by the .theme-light / .theme-dark - classes below. Unrelated to theme files, which are full themes. */ + classes below. */ color-scheme: light dark; --ui-border-color: light-dark(var(--base-200), var(--base-500)); - /* Also consumed by the --shadow-* scale in theme.default.tokens.css: - the one reference between the files that runs upward, so shadows can - switch with the color scheme. Raw alpha colors: the palettes have no - alpha steps. */ + /* Also used by the --shadow-* in theme.default.tokens.css, The one reference + between the files that runs upward, so shadows can switch with the color + scheme. Raw alpha colors: the palettes have no alpha steps. */ --ui-shadow-color: light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.6)); - /* Keyboard focus ring (consumed by :focus-visible in global.a11y.css). - Raw 2px on purpose: an accessibility affordance that shouldn't move - when a theme retunes the decorative border scale. */ + /* Keyboard focus ring (used by :focus-visible in global.a11y.css). + Raw 2px on purpose: an accessibility shouldn't change with the theme. */ --focus-ring-color: light-dark(var(--primary-500), var(--primary-400)); --focus-ring-width: 2px; --focus-ring-offset: 2px; - - /* Semantic feedback aliases over the raw feedback palettes. - Prefer these in components and themes; a theme can restyle feedback by - overriding the aliases without touching the raw scales. */ - --success-100: var(--yes-100); - --success-200: var(--yes-200); - --success-300: var(--yes-300); - --success-400: var(--yes-400); - --success-500: var(--yes-500); - --danger-100: var(--no-100); - --danger-200: var(--no-200); - --danger-300: var(--no-300); - --danger-400: var(--no-400); - --danger-500: var(--no-500); - --warning-100: var(--maybe-100); - --warning-200: var(--maybe-200); - --warning-300: var(--maybe-300); - --warning-400: var(--maybe-400); - --warning-500: var(--maybe-500); } :root.theme-light { @@ -110,10 +81,7 @@ xxl: 1920px --input-border-width: var(--border-sm); --input-border-color: var(--ui-border-color); --input-border-radius: var(--radius-md); - --input-border-color-invalid: light-dark( - var(--danger-500), - var(--danger-400) - ); + --input-border-color-invalid: light-dark(var(--no-500), var(--no-400)); /* Gap under a label that precedes its control */ --label-spacing: var(--xs1); @@ -128,16 +96,16 @@ xxl: 1920px --meter-height: var(--sm1); --meter-border-radius: var(--radius-md); --meter-track-color: var(--primary-100); - --meter-low-color: var(--danger-400); - --meter-medium-color: var(--warning-400); - --meter-high-color: var(--success-400); + --meter-low-color: var(--no-400); + --meter-medium-color: var(--maybe-400); + --meter-high-color: var(--yes-400); --progress-height: var(--sm1); --progress-color: var(--primary-500); --progress-track-color: var(--primary-100); --progress-border-radius: var(--radius-md); - /* select's chevron, applied as a mask painted with the text color; + /* select's chevron, applied as a mask using text color; any url() works here, data URL or file */ --select-icon-size: var(--sm3); --select-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E"); @@ -152,9 +120,8 @@ xxl: 1920px --dialog-backdrop-color: var(--base-950); --dialog-backdrop-opacity: var(--o-4); - /* details: same surface as dialog by default, on purpose but - independently overridable. Spacing is the gap between an open - summary and its content. */ + /* details: same as dialog by default, on purpose, to be independently + overridable. Spacing is the gap between an open summary and its content. */ --details-padding: var(--sm1); --details-spacing: var(--xs3); --details-border-width: var(--border-sm); @@ -268,7 +235,7 @@ xxl: 1920px /* ins: background stays light in both light/dark modes */ --ins-color: var(--base-950); - --ins-background-color: var(--success-200); + --ins-background-color: var(--yes-200); --marker-color: var(--highlight-500); @@ -321,20 +288,14 @@ xxl: 1920px var(--primary-600), var(--primary-500) ); - --badge-success-color: light-dark(var(--success-500), var(--base-0)); - --badge-success-background-color: light-dark( - var(--success-100), - var(--success-500) - ); - --badge-danger-color: light-dark(var(--danger-500), var(--base-0)); - --badge-danger-background-color: light-dark( - var(--danger-100), - var(--danger-500) - ); - --badge-warning-color: light-dark(var(--warning-500), var(--base-950)); + --badge-success-color: light-dark(var(--yes-500), var(--base-0)); + --badge-success-background-color: light-dark(var(--yes-100), var(--yes-500)); + --badge-danger-color: light-dark(var(--no-500), var(--base-0)); + --badge-danger-background-color: light-dark(var(--no-100), var(--no-500)); + --badge-warning-color: light-dark(var(--maybe-500), var(--base-950)); --badge-warning-background-color: light-dark( - var(--warning-100), - var(--warning-500) + var(--maybe-100), + var(--maybe-500) ); } @@ -447,7 +408,7 @@ xxl: 1920px :root { --field-spacing: var(--xs1); --field-hint-color: light-dark(var(--base-400), var(--base-500)); - --field-error-color: light-dark(var(--danger-500), var(--danger-300)); + --field-error-color: light-dark(var(--no-500), var(--no-300)); /*Field's hint/error position. Use `static` to reflow under, use `absolute` (and leave enough space below) if you don't want any shift on errors */ --field-message-position: static; @@ -552,7 +513,7 @@ xxl: 1920px var(--primary-600), var(--primary-400) ); - --pricingCard-check-color: light-dark(var(--success-500), var(--success-400)); + --pricingCard-check-color: light-dark(var(--yes-500), var(--yes-400)); } /* Read Progress Bar */ diff --git a/dist/css/theme.starter.css b/dist/css/theme.starter.css index 9ab84606..f32d3214 100644 --- a/dist/css/theme.starter.css +++ b/dist/css/theme.starter.css @@ -24,7 +24,7 @@ xxl: 1920px /* truncate single line of text and adds … */ -/* YOUR THEME (starter) */ +/* STARTER USER THEME */ /* A theme is a file of token overrides, plus optional style rules for what @@ -33,26 +33,22 @@ xxl: 1920px @import url(./framework/mcss.css); @import url(./framework/theme.default.css); - @import url(./theme.acme.css); + @import url(./theme.my-project.css); - Everything this file doesn't mention falls back to the default theme. - It self-layers into `theme.user`, which beats the default theme's - `theme.default` no matter the import order. Never edit the default - theme files: your palette, type, and overrides all live here, which is - what keeps framework updates painless. + MAKE SURE you put all your overrides inside `@layer theme.user` Guidelines: - - Prefer token overrides. Override scale tokens (--base-*, --text) to - shift the whole palette or type, ui tokens (--ui-border-color, - --heading-font) for cross-cutting changes, or component tokens - (--bt-border-radius) for surgical ones. - - Rules are for what tokens can't express (pseudo-elements, nth-child - rhythm, text-decoration). Theme files are the one place allowed to - style framework classes from outside; they still lose to your - unlayered CSS and to helpers, by design. - - No !important: that privilege is reserved for the helpers layer. - - For a full swappable skin, write an entry that composes the default - theme and overrides on top instead: see theme.wireframe.css. + + - Override values in `theme.default.tokens.css` for low level stuff + like colors, sizes, fonts, etc. + - For UI related stuff like button radius or component specific styles, + override values in `theme.default.ui.css` + - Add your own rules if a token can't do what you need (pseudo-elements, + nth-child,, text-decoration, etc.) + - Don't use !important. If you need to, you're doing something wrong. + Email me and I'll help you out. + - For a full swappable skin, look at ` theme.wireframe.css` to see + how it's done. */ /* Pin the layer order before declaring into it: priority is set by @@ -68,7 +64,7 @@ xxl: 1920px /* Then reach for ui and component tokens as needed: */ /* --heading-font: Georgia, serif; */ /* --card-border-radius: 0; */ - /* A theme may also add scales the framework doesn't ship, */ + /* A theme may also add tokens the framework doesn't ship, */ /* e.g. a second accent, and use them in its own style rules: */ /* --secondary-500: teal; */ } diff --git a/dist/mcss.css b/dist/mcss.css index 0a88423f..56a81fd5 100644 --- a/dist/mcss.css +++ b/dist/mcss.css @@ -5,15 +5,11 @@ /* mCSS framework entry point. - The framework lives in named cascade layers, declared here in priority - order (later wins). The layer name, not import order, decides priority. - Anything a consumer writes OUTSIDE these layers beats the framework by - default, with one exception: helpers use !important, and important layered - declarations beat unlayered CSS. Helpers are element-level overrides that - win everywhere, like inline styling. + mCSS recreates the ITCSS specificity strategy using modern CSS layers. + Anything outside these layers has higher specificity, except helpers which use + `!important` to override everything, by design. */ -/* Build-time only (@custom-media + mixin definitions, no runtime output) */ /* SETTINGS MEDIA QUERIES @@ -39,18 +35,12 @@ xxl: 1920px /* truncate single line of text and adds … */ /* - No theme is imported here, ever: the framework only declares the two - theme slots above. Every design value (scales and defaults) lives in the - default theme, which YOUR entry point activates right after this file: + Your theme is not imported here, but at the same level as mCSS: @import url(./framework/mcss.css); @import url(./framework/theme.default.css); - Without it, every token is unset and the page renders half-styled. Your - own theme (copy theme.starter.css) imports after that and lands in - `theme.user`, so it beats the default's `theme.default` no matter - the import order. Theme files self-layer, so no layer() annotation is - needed on their imports. See _global.css for this site's entry. + See the default theme for how to create your own. */ /* Reset & Normalize */ @@ -305,7 +295,7 @@ dd + dt { } del { - text-decoration-color: var(--danger-500); + text-decoration-color: var(--no-500); text-decoration-style: wavy; } @@ -1877,16 +1867,16 @@ details { } /* - No component is imported here either: this entry only declares the empty - `components` slot above. The component library lives in its own entry, - mcss.components.css, so consumers who build their own components can skip - it entirely. Import it alongside this file (any order: the slot declared - here decides priority) to get the full library. + Components are optional and not imported here + You import them at the same level as mCSS: + + @import url(./framework/mcss.css); + @import url(./framework/mcss.components.css); + + See the default theme for how to create your own. */ -/* Helpers for local overrides. Every declaration is !important on purpose: */ -/* important layered declarations beat unlayered CSS, so helpers win over */ -/* everything, including consumer CSS. */ +/* Helpers for local overrides. Every declaration is !important */ /* (Use VERY sparingly, or you might as well use Tailwind…) */ @layer helpers{ /* HELPER COLORS */ @@ -2375,9 +2365,9 @@ body.dev { z-index: var(--z-top) !important; padding: var(--sm1) !important; font-size: 1rem !important; - color: var(--danger-500) !important; - background: var(--danger-100) !important; - border: 1px solid var(--danger-500) !important; + color: var(--no-500) !important; + background: var(--no-100) !important; + border: 1px solid var(--no-500) !important; border-radius: var(--radius-md) !important; } } @@ -4573,47 +4563,39 @@ body.dev { text-transform: capitalize !important; } } -/* DEFAULT THEME (entry) */ +/* DEFAULT THEME */ /* - The framework's design values: the scales (theme.default.tokens.css) and - the defaults every element and component consumes (theme.default.ui.css). - Activate it from your own entry point, right after mcss.css: + Basic design tokens and UI abstractions + Import it next to mcss.css @import url(./framework/mcss.css); @import url(./framework/theme.default.css); mcss.css imports no theme itself; without this file every token is unset - and the page renders half-styled. - - Never edit the default theme. Your palette, type, and overrides go in a - theme of your own, imported after this one (copy theme.starter.css). The - parts here land in the `theme.default` layer and your theme lands in - `theme.user`, so yours wins no matter the import order. A full - replacement skin works the same way: theme.wireframe.css composes this - entry and overrides on top. -*/ + and the page will look broken.. + + Don't edit the default theme. -/* Pin the layer order before anything else in this file: priority is - set by first declaration, so a theme loaded before mcss.css still - slots correctly. */ + To make your own theme, either duplicate/rename the 2 files below and + import theme instead of the default, or just override the bits you want + to change and imported that AFTER the defaults. There is `theme.starter.css` + to get you started if you want to go that road (recommended)). +*/ -/* The parts are plain CSS; this entry assigns their layer, the same way - mcss.css layers the structural files. (Only standalone theme files - self-layer; in dist/css the parts are pre-wrapped so a lone - still works.) */ +/* Defensive redundancy - Same layers as in mcss.css */ @layer theme.default{ /* DEFAULT THEME: TOKENS */ /* - The scales: every token here is named for what it IS (a step on a scale), - never for what it's for. Part of the default theme (see theme.default.css); - don't edit it, override from your own theme (see theme.starter.css). + Raw design tokens. Part of the default theme (see theme.default.css); + Don't edit this file directly. Thee best way is to Override it with your + own theme (see theme.starter.css). Can't use var() inside media queries, so breakpoints are hard coded in - settings.media-queries.css: + settings.media-queries.css instead of custom properties xxs: 240px xs: 360px sm: 480px md: 768px lg: 1024px xl: 1440px xxl: 1920px */ @@ -4631,19 +4613,23 @@ body.dev { • Colors -• Box shadows -• Border radius • Border width +• Border radius + +• Box shadows + • Opacity + +• Z-index + +• Transitions + */ :root { - /* GLOBALS */ /* DIMENSIONS */ - /* Sizes */ - --xs1: 4px; --xs2: 8px; --xs3: 12px; @@ -4680,18 +4666,20 @@ body.dev { --tera2: 480px; --tera3: 520px; - /* Aspect Ratios */ + /* ASPECT RATIOS */ + --ar-square: 1; --ar-landscape: 4/3; --ar-portrait: 3/4; --ar-widescreen: 16/9; --ar-golden: 1.618/1; - /* TYPOGRAPHY */ - /* See also elements.text & help.text */ + /* */ + + /* (More typography in elements.text & help.text) */ + + /* FONT FAMILIES (https://modernfontstacks.com) */ - /* Font Families */ - /* Local font stacks - More options @ https://modernfontstacks.com */ --display: Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, ui-sans-serif, sans-serif; @@ -4701,8 +4689,8 @@ body.dev { Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, ui-monospace, monospace; - /* Font Sizes */ - /* Create your own sizes @ https://typescale.com */ + /* FONT SIZES (https://typescale.com) */ + --text-xs: 0.694rem; --text-sm: 0.833rem; --text-md: 1rem; @@ -4715,11 +4703,8 @@ body.dev { --display-mega: 3.583rem; --display-giga: 4.299rem; - /* Heading font sizes are decisions, not scale steps: they map each - heading level onto this scale. See --heading-font-size-* in - theme.default.ui.css. */ + /* FONT WEIGHTS */ - /* Font Weights */ --extra-light: 200; --light: 300; --book: 400; @@ -4727,14 +4712,16 @@ body.dev { --bold: 700; --black: 900; - /* Letter Spacing */ + /* LETTER SPACING */ + --tracking-sm: -0.05em; --tracking-md: 0.025em; --tracking-lg: 0.05em; --tracking-xl: 0.075em; --tracking-xxl: 0.15em; - /* Line Height */ + /* LINE HEIGHT */ + --leading-xs: 1; --leading-sm: 1.15; --leading-md: 1.375; @@ -4742,8 +4729,7 @@ body.dev { --leading-xl: 1.75; --leading-xxl: 2; - /* COLORS */ - /* Make your own palettes programmatically: https://www.tints.dev */ + /* COLORS (https://www.tints.dev) */ /* Base */ @@ -4774,8 +4760,6 @@ body.dev { --primary-900: #0c4a6e; --primary-950: #082f49; - /* Secondary and/or Highlight goes here */ - /* Feedback */ --yes-100: #d5f6e8; @@ -4863,23 +4847,15 @@ body.dev { /* DEFAULT THEME: UI */ /* - The decisions. Every token here is named for what it's FOR (an - element, a component, or a shared meaning) and answers "what does this - thing use by default". Tokens named for what they ARE (--sm1, --base-500, - --bold) are scale tokens and live in theme.default.tokens.css. That's the - whole split: a name that mentions a UI thing belongs here; a name that - labels a step on a scale belongs there. + Tokens here are one abstraction level above raw tokens + They define styling for elements, components, or a shared style. Values, in order of preference: 1. Another ui token, when the meaning is shared - (--input-border-color: var(--ui-border-color)). - 2. A scale token, when the value should follow the system scales - (--fieldset-padding: var(--sm3)). - 3. A raw value, only where following the scales would be wrong: - content (separator strings, icon URLs), geometry tuned to one - control (--toggle-width), or element-relative measures that track - the element's own type instead of the page (em heading spacing). - The test: "if a theme retuned the scales, should this follow?" + `--input-border-color: var(--ui-border-color)` + 2. A raw token: `--fieldset-padding: var(--sm3)` + 3. A raw value, only when it's not supposed to match a raw token + or when it's relative to the the element's own value (em heading spacing). Part of the default theme (see theme.default.css); don't edit it, override from your own theme (see theme.starter.css). @@ -4887,41 +4863,20 @@ body.dev { :root { /* Color scheme (light/dark), toggled by the .theme-light / .theme-dark - classes below. Unrelated to theme files, which are full themes. */ + classes below. */ color-scheme: light dark; --ui-border-color: light-dark(var(--base-200), var(--base-500)); - /* Also consumed by the --shadow-* scale in theme.default.tokens.css: - the one reference between the files that runs upward, so shadows can - switch with the color scheme. Raw alpha colors: the palettes have no - alpha steps. */ + /* Also used by the --shadow-* in theme.default.tokens.css, The one reference + between the files that runs upward, so shadows can switch with the color + scheme. Raw alpha colors: the palettes have no alpha steps. */ --ui-shadow-color: light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.6)); - /* Keyboard focus ring (consumed by :focus-visible in global.a11y.css). - Raw 2px on purpose: an accessibility affordance that shouldn't move - when a theme retunes the decorative border scale. */ + /* Keyboard focus ring (used by :focus-visible in global.a11y.css). + Raw 2px on purpose: an accessibility shouldn't change with the theme. */ --focus-ring-color: light-dark(var(--primary-500), var(--primary-400)); --focus-ring-width: 2px; --focus-ring-offset: 2px; - - /* Semantic feedback aliases over the raw feedback palettes. - Prefer these in components and themes; a theme can restyle feedback by - overriding the aliases without touching the raw scales. */ - --success-100: var(--yes-100); - --success-200: var(--yes-200); - --success-300: var(--yes-300); - --success-400: var(--yes-400); - --success-500: var(--yes-500); - --danger-100: var(--no-100); - --danger-200: var(--no-200); - --danger-300: var(--no-300); - --danger-400: var(--no-400); - --danger-500: var(--no-500); - --warning-100: var(--maybe-100); - --warning-200: var(--maybe-200); - --warning-300: var(--maybe-300); - --warning-400: var(--maybe-400); - --warning-500: var(--maybe-500); } :root.theme-light { @@ -4945,10 +4900,7 @@ body.dev { --input-border-width: var(--border-sm); --input-border-color: var(--ui-border-color); --input-border-radius: var(--radius-md); - --input-border-color-invalid: light-dark( - var(--danger-500), - var(--danger-400) - ); + --input-border-color-invalid: light-dark(var(--no-500), var(--no-400)); /* Gap under a label that precedes its control */ --label-spacing: var(--xs1); @@ -4963,16 +4915,16 @@ body.dev { --meter-height: var(--sm1); --meter-border-radius: var(--radius-md); --meter-track-color: var(--primary-100); - --meter-low-color: var(--danger-400); - --meter-medium-color: var(--warning-400); - --meter-high-color: var(--success-400); + --meter-low-color: var(--no-400); + --meter-medium-color: var(--maybe-400); + --meter-high-color: var(--yes-400); --progress-height: var(--sm1); --progress-color: var(--primary-500); --progress-track-color: var(--primary-100); --progress-border-radius: var(--radius-md); - /* select's chevron, applied as a mask painted with the text color; + /* select's chevron, applied as a mask using text color; any url() works here, data URL or file */ --select-icon-size: var(--sm3); --select-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E"); @@ -4987,9 +4939,8 @@ body.dev { --dialog-backdrop-color: var(--base-950); --dialog-backdrop-opacity: var(--o-4); - /* details: same surface as dialog by default, on purpose but - independently overridable. Spacing is the gap between an open - summary and its content. */ + /* details: same as dialog by default, on purpose, to be independently + overridable. Spacing is the gap between an open summary and its content. */ --details-padding: var(--sm1); --details-spacing: var(--xs3); --details-border-width: var(--border-sm); @@ -5103,7 +5054,7 @@ body.dev { /* ins: background stays light in both light/dark modes */ --ins-color: var(--base-950); - --ins-background-color: var(--success-200); + --ins-background-color: var(--yes-200); --marker-color: var(--highlight-500); @@ -5156,20 +5107,14 @@ body.dev { var(--primary-600), var(--primary-500) ); - --badge-success-color: light-dark(var(--success-500), var(--base-0)); - --badge-success-background-color: light-dark( - var(--success-100), - var(--success-500) - ); - --badge-danger-color: light-dark(var(--danger-500), var(--base-0)); - --badge-danger-background-color: light-dark( - var(--danger-100), - var(--danger-500) - ); - --badge-warning-color: light-dark(var(--warning-500), var(--base-950)); + --badge-success-color: light-dark(var(--yes-500), var(--base-0)); + --badge-success-background-color: light-dark(var(--yes-100), var(--yes-500)); + --badge-danger-color: light-dark(var(--no-500), var(--base-0)); + --badge-danger-background-color: light-dark(var(--no-100), var(--no-500)); + --badge-warning-color: light-dark(var(--maybe-500), var(--base-950)); --badge-warning-background-color: light-dark( - var(--warning-100), - var(--warning-500) + var(--maybe-100), + var(--maybe-500) ); } @@ -5282,7 +5227,7 @@ body.dev { :root { --field-spacing: var(--xs1); --field-hint-color: light-dark(var(--base-400), var(--base-500)); - --field-error-color: light-dark(var(--danger-500), var(--danger-300)); + --field-error-color: light-dark(var(--no-500), var(--no-300)); /*Field's hint/error position. Use `static` to reflow under, use `absolute` (and leave enough space below) if you don't want any shift on errors */ --field-message-position: static; @@ -5387,7 +5332,7 @@ body.dev { var(--primary-600), var(--primary-400) ); - --pricingCard-check-color: light-dark(var(--success-500), var(--success-400)); + --pricingCard-check-color: light-dark(var(--yes-500), var(--yes-400)); } /* Read Progress Bar */ diff --git a/dist/mcss.min.css b/dist/mcss.min.css index 924a6f57..6f2184c1 100644 --- a/dist/mcss.min.css +++ b/dist/mcss.min.css @@ -1,2 +1,2 @@ /*! mCSS v1.3.0 | MIT | https://mcss.dev */ -@layer base,elements,global,components,theme.default,theme.user,helpers;@layer base,elements,global,components,theme.default,theme.user,helpers;@layer base{*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion:reduce){*,:before,:after{animation-delay:-1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}}:where(:not(dialog)){margin:0}html,body{min-height:100%}}@layer elements{body{line-sizing:normal;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;background-color:var(--body-background-color);color:var(--text-color);font-family:var(--text);line-height:var(--body-line-height);&:has(.body-is-locked){overflow:hidden}}}@layer elements{::selection{color:var(--selection-color);background-color:var(--selection-background-color)}:where(a,u,ins,abbr){text-underline-offset:2px}a{font-weight:var(--link-font-weight);color:var(--link-color);&:where(:hover){color:var(--link-color-hover);-webkit-text-decoration:none;text-decoration:none}}address{width:max-content;max-width:100%;padding:var(--sm1) var(--sm3);font-style:normal;background-color:light-dark(var(--base-50),var(--base-900));border:var(--xs2) solid transparent;border-image:8 repeating-linear-gradient(-45deg,var(--no-500) 0,var(--no-500) var(--xs2),transparent 0,transparent calc(var(--xs2) * 2),var(--primary-500) 0,var(--primary-500) calc(var(--xs2) * 3),transparent 0,transparent calc(var(--xs2) * 4))}abbr{position:relative;cursor:help;&:after{position:relative;top:calc(var(--xs1) * -1);width:var(--sm1);height:var(--sm1);display:inline-block;content:"";background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='circle-help'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M9.09%209a3%203%200%200%201%205.83%201c0%202-3%203-3%203'/%3E%3Cpath%20d='M12%2017h.01'/%3E%3C/svg%3E");background-size:contain}&:hover:before{width:max-content;max-width:400px;position:absolute;left:50%;padding:var(--xs1) var(--xs3);content:attr(title);color:var(--base-0);background-color:var(--base-900);opacity:var(--o-4);border-radius:var(--radius-sm);transform:translate(-50%,-2em)}}blockquote{position:relative;margin-bottom:var(--prose-spacing);padding-block:var(--blockquote-padding-block);padding-inline:var(--blockquote-padding-inline);font-style:italic;background-color:var(--blockquote-background-color);border-radius:var(--blockquote-border-radius);&:before{content:"";position:absolute;top:0;inset-inline-start:0;width:var(--blockquote-accent-width);height:100%;border-start-start-radius:var(--blockquote-border-radius);border-end-start-radius:var(--blockquote-border-radius);background:var(--blockquote-accent-color)}p{&:first-child:before{content:open-quote}&:last-child{margin-bottom:0;&:after{content:close-quote}}}}cite{font-style:italic}code,var,kbd{font-family:var(--mono);font-size:.9em;font-style:normal;color:var(--text-code-muted-color)}:is(code,var,kbd):not(h1 *,h2 *,h3 *,h4 *,h5 *,h6 *,pre *){padding:.15em .3em;color:var(--text-code-color);background-color:var(--text-code-background-color);border-radius:var(--radius-sm)}dt{font-weight:var(--bold)}dd+dt{margin-top:.5em}del{text-decoration-color:var(--danger-500);text-decoration-style:wavy}h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{overflow-wrap:break-word;text-wrap:balance}h1,.h1,h2,.h2,h3,.h3,h4,.h4{font-family:var(--heading-font);font-weight:var(--heading-weight);letter-spacing:var(--heading-letter-spacing)}h1,.h1{margin-bottom:var(--heading-spacing-h1);font-size:var(--heading-font-size-h1);line-height:var(--heading-line-height-h1)}h2,.h2{margin-bottom:var(--heading-spacing-h2);font-size:var(--heading-font-size-h2);line-height:var(--heading-line-height-h2)}h3,.h3{margin-bottom:var(--heading-spacing-h3);font-size:var(--heading-font-size-h3);line-height:var(--heading-line-height-h3)}h4,.h4{margin-bottom:var(--heading-spacing-h4);font-size:var(--heading-font-size-h4);line-height:var(--heading-line-height-h4)}h5,.h5{margin-bottom:var(--heading-spacing-h5);font-size:var(--heading-font-size-h5);line-height:var(--heading-line-height-h5)}h6,.h6{margin-bottom:var(--heading-spacing-h6);font-size:var(--heading-font-size-h6);line-height:var(--heading-line-height-h6)}:where(h1,h2,h3):has(+:is(h2,h3,h4)){margin-bottom:var(--heading-spacing-consecutive)}hr{display:flex;justify-content:center;align-items:center;height:0;border-style:solid;border-width:var(--border-sm) 0 0;color:var(--ui-border-color);overflow:visible;&:after{content:var(--hr-content);padding:0 var(--xs1);line-height:1;letter-spacing:var(--tracking-sm);background-color:var(--body-background-color)}}:where(hr):has(+:is(p)){margin-bottom:var(--prose-spacing)}ins{padding:.15em .3em;color:var(--ins-color);background-color:var(--ins-background-color);border-radius:var(--radius-sm);-webkit-text-decoration:none;text-decoration:none;&:before{content:"+ "}}mark{padding:.15em .5em;background:var(--marker-color);border-radius:1em 0}:where(ol,ul){list-style-type:none;padding:0}pre{font-family:var(--mono);font-size:var(--pre-font-size);white-space:pre-wrap;border-radius:var(--pre-border-radius)}q{font-style:italic}s{text-decoration-color:light-dark(var(--base-950),var(--base-50));text-decoration-style:wavy}sub,sup{line-height:1}}@layer elements{:root{quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(af),:not(:lang(af))>:lang(af){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ak),:not(:lang(ak))>:lang(ak){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(asa),:not(:lang(asa))>:lang(asa){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(az),:not(:lang(az))>:lang(az){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(bem),:not(:lang(bem))>:lang(bem){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(bez),:not(:lang(bez))>:lang(bez){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(bn),:not(:lang(bn))>:lang(bn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(brx),:not(:lang(brx))>:lang(brx){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(cgg),:not(:lang(cgg))>:lang(cgg){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(chr),:not(:lang(chr))>:lang(chr){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(cy),:not(:lang(cy))>:lang(cy){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(da),:not(:lang(da))>:lang(da){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(dav),:not(:lang(dav))>:lang(dav){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(dje),:not(:lang(dje))>:lang(dje){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(dz),:not(:lang(dz))>:lang(dz){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ebu),:not(:lang(ebu))>:lang(ebu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ee),:not(:lang(ee))>:lang(ee){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(en),:not(:lang(en))>:lang(en){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(fil),:not(:lang(fil))>:lang(fil){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(fo),:not(:lang(fo))>:lang(fo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ga),:not(:lang(ga))>:lang(ga){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(gd),:not(:lang(gd))>:lang(gd){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(gl),:not(:lang(gl))>:lang(gl){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(gu),:not(:lang(gu))>:lang(gu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(guz),:not(:lang(guz))>:lang(guz){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ha),:not(:lang(ha))>:lang(ha){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(hi),:not(:lang(hi))>:lang(hi){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(id),:not(:lang(id))>:lang(id){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ig),:not(:lang(ig))>:lang(ig){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(jmc),:not(:lang(jmc))>:lang(jmc){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kam),:not(:lang(kam))>:lang(kam){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kde),:not(:lang(kde))>:lang(kde){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kea),:not(:lang(kea))>:lang(kea){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(khq),:not(:lang(khq))>:lang(khq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ki),:not(:lang(ki))>:lang(ki){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kln),:not(:lang(kln))>:lang(kln){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(km),:not(:lang(km))>:lang(km){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kn),:not(:lang(kn))>:lang(kn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ko),:not(:lang(ko))>:lang(ko){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ksb),:not(:lang(ksb))>:lang(ksb){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lg),:not(:lang(lg))>:lang(lg){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ln),:not(:lang(ln))>:lang(ln){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lo),:not(:lang(lo))>:lang(lo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lrc),:not(:lang(lrc))>:lang(lrc){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lu),:not(:lang(lu))>:lang(lu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(luo),:not(:lang(luo))>:lang(luo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lv),:not(:lang(lv))>:lang(lv){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mas),:not(:lang(mas))>:lang(mas){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mer),:not(:lang(mer))>:lang(mer){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mfe),:not(:lang(mfe))>:lang(mfe){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mgo),:not(:lang(mgo))>:lang(mgo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ml),:not(:lang(ml))>:lang(ml){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mn),:not(:lang(mn))>:lang(mn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mr),:not(:lang(mr))>:lang(mr){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ms),:not(:lang(ms))>:lang(ms){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mt),:not(:lang(mt))>:lang(mt){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(my),:not(:lang(my))>:lang(my){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(naq),:not(:lang(naq))>:lang(naq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(nd),:not(:lang(nd))>:lang(nd){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ne),:not(:lang(ne))>:lang(ne){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(nus),:not(:lang(nus))>:lang(nus){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(nyn),:not(:lang(nyn))>:lang(nyn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(pa),:not(:lang(pa))>:lang(pa){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(pt),:not(:lang(pt))>:lang(pt){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(rof),:not(:lang(rof))>:lang(rof){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(rwk),:not(:lang(rwk))>:lang(rwk){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(saq),:not(:lang(saq))>:lang(saq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(sbp),:not(:lang(sbp))>:lang(sbp){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(seh),:not(:lang(seh))>:lang(seh){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ses),:not(:lang(ses))>:lang(ses){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(si),:not(:lang(si))>:lang(si){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(so),:not(:lang(so))>:lang(so){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(sw),:not(:lang(sw))>:lang(sw){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ta),:not(:lang(ta))>:lang(ta){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(te),:not(:lang(te))>:lang(te){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(teo),:not(:lang(teo))>:lang(teo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(th),:not(:lang(th))>:lang(th){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(to),:not(:lang(to))>:lang(to){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(tr),:not(:lang(tr))>:lang(tr){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(twq),:not(:lang(twq))>:lang(twq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(tzm),:not(:lang(tzm))>:lang(tzm){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(uz-Cyrl),:not(:lang(uz-Cyrl))>:lang(uz-Cyrl){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vai),:not(:lang(vai))>:lang(vai){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vai-Latn),:not(:lang(vai-Latn))>:lang(vai-Latn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vi),:not(:lang(vi))>:lang(vi){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vun),:not(:lang(vun))>:lang(vun){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(xog),:not(:lang(xog))>:lang(xog){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(yo),:not(:lang(yo))>:lang(yo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(yue-Hans),:not(:lang(yue-Hans))>:lang(yue-Hans){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(zh),:not(:lang(zh))>:lang(zh){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(zu),:not(:lang(zu))>:lang(zu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(uz),:not(:lang(uz))>:lang(uz){quotes:"\201c" "\201d" "\2019" "\2018"}:root:lang(eu),:not(:lang(eu))>:lang(eu){quotes:"\201c" "\201d" "\201c" "\201d"}:root:lang(tk),:not(:lang(tk))>:lang(tk){quotes:"\201c" "\201d" "\201c" "\201d"}:root:lang(ar),:not(:lang(ar))>:lang(ar){quotes:"\201d" "\201c" "\2019" "\2018"}:root:lang(ur),:not(:lang(ur))>:lang(ur){quotes:"\201d" "\201c" "\2019" "\2018"}:root:lang(fi),:not(:lang(fi))>:lang(fi){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(he),:not(:lang(he))>:lang(he){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(lag),:not(:lang(lag))>:lang(lag){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(rn),:not(:lang(rn))>:lang(rn){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(sn),:not(:lang(sn))>:lang(sn){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(sv),:not(:lang(sv))>:lang(sv){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(sr),:not(:lang(sr))>:lang(sr){quotes:"\201e" "\201c" "\2018" "\2018"}:root:lang(sr-Latn),:not(:lang(sr-Latn))>:lang(sr-Latn){quotes:"\201e" "\201c" "\2018" "\2018"}:root:lang(bg),:not(:lang(bg))>:lang(bg){quotes:"\201e" "\201c" "\201e" "\201c"}:root:lang(lt),:not(:lang(lt))>:lang(lt){quotes:"\201e" "\201c" "\201e" "\201c"}:root:lang(bs-Cyrl),:not(:lang(bs-Cyrl))>:lang(bs-Cyrl){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(cs),:not(:lang(cs))>:lang(cs){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(de),:not(:lang(de))>:lang(de){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(dsb),:not(:lang(dsb))>:lang(dsb){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(et),:not(:lang(et))>:lang(et){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(hr),:not(:lang(hr))>:lang(hr){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(hsb),:not(:lang(hsb))>:lang(hsb){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(is),:not(:lang(is))>:lang(is){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(lb),:not(:lang(lb))>:lang(lb){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(luy),:not(:lang(luy))>:lang(luy){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(mk),:not(:lang(mk))>:lang(mk){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(sk),:not(:lang(sk))>:lang(sk){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(sl),:not(:lang(sl))>:lang(sl){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(ka),:not(:lang(ka))>:lang(ka){quotes:"\201e" "\201c" "\ab" "\bb"}:root:lang(bs),:not(:lang(bs))>:lang(bs){quotes:"\201e" "\201d" "\2018" "\2019"}:root:lang(agq),:not(:lang(agq))>:lang(agq){quotes:"\201e" "\201d" "\201a" "\2019"}:root:lang(ff),:not(:lang(ff))>:lang(ff){quotes:"\201e" "\201d" "\201a" "\2019"}:root:lang(nmg),:not(:lang(nmg))>:lang(nmg){quotes:"\201e" "\201d" "\ab" "\bb"}:root:lang(ro),:not(:lang(ro))>:lang(ro){quotes:"\201e" "\201d" "\ab" "\bb"}:root:lang(pl),:not(:lang(pl))>:lang(pl){quotes:"\201e" "\201d" "\ab" "\bb"}:root:lang(hu),:not(:lang(hu))>:lang(hu){quotes:"\201e" "\201d" "\bb" "\ab"}:root:lang(nl),:not(:lang(nl))>:lang(nl){quotes:"\2018" "\2019" "\201c" "\201d"}:root:lang(ti-ER),:not(:lang(ti-ER))>:lang(ti-ER){quotes:"\2018" "\2019" "\201c" "\201d"}:root:lang(dua),:not(:lang(dua))>:lang(dua){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(ksf),:not(:lang(ksf))>:lang(ksf){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(rw),:not(:lang(rw))>:lang(rw){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(nn),:not(:lang(nn))>:lang(nn){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(nb),:not(:lang(nb))>:lang(nb){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(ast),:not(:lang(ast))>:lang(ast){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(bm),:not(:lang(bm))>:lang(bm){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(br),:not(:lang(br))>:lang(br){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(ca),:not(:lang(ca))>:lang(ca){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(dyo),:not(:lang(dyo))>:lang(dyo){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(el),:not(:lang(el))>:lang(el){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(es),:not(:lang(es))>:lang(es){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(ewo),:not(:lang(ewo))>:lang(ewo){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(mg),:not(:lang(mg))>:lang(mg){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(mua),:not(:lang(mua))>:lang(mua){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(sg),:not(:lang(sg))>:lang(sg){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(it),:not(:lang(it))>:lang(it){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(kab),:not(:lang(kab))>:lang(kab){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(kk),:not(:lang(kk))>:lang(kk){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(pt-PT),:not(:lang(pt-PT))>:lang(pt-PT){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(nnh),:not(:lang(nnh))>:lang(nnh){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(sq),:not(:lang(sq))>:lang(sq){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(bas),:not(:lang(bas))>:lang(bas){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(be),:not(:lang(be))>:lang(be){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(ky),:not(:lang(ky))>:lang(ky){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(sah),:not(:lang(sah))>:lang(sah){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(ru),:not(:lang(ru))>:lang(ru){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(uk),:not(:lang(uk))>:lang(uk){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(zgh),:not(:lang(zgh))>:lang(zgh){quotes:"\ab" "\bb" "\201e" "\201d"}:root:lang(shi),:not(:lang(shi))>:lang(shi){quotes:"\ab" "\bb" "\201e" "\201d"}:root:lang(shi-Latn),:not(:lang(shi-Latn))>:lang(shi-Latn){quotes:"\ab" "\bb" "\201e" "\201d"}:root:lang(am),:not(:lang(am))>:lang(am){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(az-Cyrl),:not(:lang(az-Cyrl))>:lang(az-Cyrl){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(fa),:not(:lang(fa))>:lang(fa){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(fr-CH),:not(:lang(fr-CH))>:lang(fr-CH){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(gsw),:not(:lang(gsw))>:lang(gsw){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(jgo),:not(:lang(jgo))>:lang(jgo){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(kkj),:not(:lang(kkj))>:lang(kkj){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(mzn),:not(:lang(mzn))>:lang(mzn){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(fr),:not(:lang(fr))>:lang(fr){quotes:"\ab" "\bb" "\ab" "\bb"}:root:lang(hy),:not(:lang(hy))>:lang(hy){quotes:"\ab" "\bb" "\ab" "\bb"}:root:lang(yav),:not(:lang(yav))>:lang(yav){quotes:"\ab" "\bb" "\ab" "\bb"}:root:lang(ja),:not(:lang(ja))>:lang(ja){quotes:"\300c" "\300d" "\300e" "\300f"}:root:lang(yue),:not(:lang(yue))>:lang(yue){quotes:"\300c" "\300d" "\300e" "\300f"}:root:lang(zh-Hant),:not(:lang(zh-Hant))>:lang(zh-Hant){quotes:"\300c" "\300d" "\300e" "\300f"}}@layer elements{audio,canvas,embed,iframe,img,object,picture,svg,video{display:block;vertical-align:middle;max-width:100%}img,svg,video,canvas{height:auto}audio{width:100%;max-width:var(--tera1)}audio:not([controls]){display:none}figcaption{font-style:italic;font-size:var(--text-sm)}figure{&:has(*+figcaption){figcaption{margin-top:var(--figcaption-spacing)}}&:has(figcaption+*){figcaption{margin-bottom:var(--figcaption-spacing)}}}iframe{border:var(--border-sm) solid var(--ui-border-color)}}@layer elements{caption{caption-side:bottom;margin-top:var(--table-caption-spacing);font-size:var(--text-sm)}table{border-spacing:0;border:var(--table-border-width) solid var(--table-border-color);border-radius:var(--table-border-radius);background-color:var(--table-background-color)}th,td{text-align:start;padding:var(--table-padding);border-bottom:var(--table-border-width) solid var(--table-border-color);border-inline-start:var(--table-border-width) solid var(--table-border-color)}tr{th:first-child,td:first-child{border-inline-start-width:0}}tbody{tr:last-child{th,td{border-bottom-width:0}}}tfoot{th,td{border-top:var(--table-border-width) solid var(--table-border-color);border-bottom-width:0}}}@layer elements{::placeholder{opacity:var(--o-4)}input,button,textarea,select{font:inherit;color:var(--text-color)}button{color:var(--text-color)}fieldset{border:var(--fieldset-border-width) solid var(--fieldset-border-color);border-radius:var(--fieldset-border-radius);padding:var(--fieldset-padding);ul:has([type=checkbox],[type=radio]){padding-inline-start:0}>[aria-hidden]{margin-bottom:var(--sm3);font-size:var(--text-lg);grid-column:1 / -1}}:is(input,select,textarea):user-invalid{border-color:var(--input-border-color-invalid)}input{&:where(:not([type=checkbox],[type=radio])){height:var(--input-height)}&:where(:not([type=color],[type=file],[type=reset],[type=submit])){padding:var(--input-padding)}&:where(:not([type=color])){border-radius:var(--input-border-radius)}&:where(:not([type=file])){border:var(--input-border-width) solid var(--input-border-color)}&[type=file]{width:100%;accent-color:var(--text-color)}&[type=number]{padding-inline-end:var(--xs1)}}label{display:block;&:has(+:is(input,select,textarea)){margin-bottom:var(--label-spacing)}}legend{position:absolute;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);width:1px;height:1px;white-space:nowrap}meter{width:100%;background:var(--meter-track-color);border-radius:var(--meter-border-radius);height:var(--meter-height);&::-webkit-meter-bar{background:var(--meter-track-color)}&::-webkit-meter-bar,&::-webkit-meter-optimum-value,&::-webkit-meter-suboptimum-value,&::-webkit-meter-even-less-good-value{height:var(--meter-height);border:none;border-radius:var(--meter-border-radius)}&::-webkit-meter-even-less-good-value{background:var(--meter-low-color)}&::-webkit-meter-suboptimum-value{background:var(--meter-medium-color)}&::-webkit-meter-optimum-value{background:var(--meter-high-color)}&:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:var(--meter-low-color)}&:-moz-meter-sub-optimum::-moz-meter-bar{background:var(--meter-medium-color)}&:-moz-meter-optimum::-moz-meter-bar{background:var(--meter-high-color)}}progress{appearance:none;width:100%;height:var(--progress-height);background:var(--progress-track-color);border-radius:var(--progress-border-radius);border:none;&::-moz-progress-bar{background:var(--progress-color);border-radius:var(--progress-border-radius)}&::-webkit-progress-bar{width:100%;background:var(--progress-track-color);border-radius:var(--progress-border-radius);height:var(--progress-height)}&::-webkit-progress-value{background:var(--progress-color);border-radius:var(--progress-border-radius)}}select{--split: calc(100% - var(--select-icon-size));display:flex;appearance:none;height:var(--input-height);padding:var(--xs1) calc(var(--input-padding) + var(--md1)) var(--xs1) var(--input-padding);border:var(--input-border-width) solid var(--input-border-color);border-radius:var(--input-border-radius);background:linear-gradient(to right,var(--body-background-color) 0 var(--split),var(--text-color) var(--split) 100%);mask-image:var(--select-icon),linear-gradient(to right,transparent calc(var(--split) - 1px),red 0),linear-gradient(red 0 0);mask-size:var(--select-icon-size),auto,auto;mask-position:calc(100% - var(--xs1)) center,0 0,0 0;mask-repeat:no-repeat;mask-clip:padding-box,padding-box,border-box;mask-origin:padding-box,padding-box,border-box;mask-composite:add,exclude;&:disabled{--disabled-color: light-dark( hsl(from var(--text-color) h s 70%), hsl(from var(--text-color) h s 40%) );cursor:not-allowed;color:var(--disabled-color);background:linear-gradient(to right,var(--body-background-color) 0 var(--split),var(--disabled-color) var(--split) 100%)}&[multiple]{height:auto;padding:var(--input-padding);background:var(--body-background-color);mask-image:none}}textarea{width:100%;padding:var(--input-padding);border-radius:var(--input-border-radius);border:var(--input-border-width) solid var(--input-border-color);resize:vertical;&:not([rows]){min-height:6em}}}@layer elements{dialog{min-width:var(--dialog-min-width);max-width:var(--dialog-max-width);padding:var(--dialog-padding);border:var(--dialog-border-width) solid var(--dialog-border-color);background-color:var(--dialog-background-color);border-radius:var(--dialog-border-radius);&::backdrop{background:var(--dialog-backdrop-color);opacity:var(--dialog-backdrop-opacity)}[aria-label="close pop-up"]{position:absolute;top:var(--xs3);right:var( --xs3 );background:transparent;border:none;outline:none;cursor:pointer}p:last-of-type{margin-bottom:0}}details{padding:var(--details-padding);border:var(--details-border-width) solid var(--details-border-color);background-color:var(--details-background-color);border-radius:var(--details-border-radius);cursor:pointer;summary{display:flex;justify-content:space-between;font-weight:var(--bold);&::-webkit-details-marker{display:none}&:after{content:"";width:var(--details-icon-size);height:var(--details-icon-size);background-color:currentColor;mask-image:var(--details-icon);mask-size:contain;mask-repeat:no-repeat;transition:transform var(--transition)}}&[open]>summary{margin-bottom:var(--details-spacing);&:after{transform:rotate(180deg)}}p:last-of-type{margin-bottom:0}}}@layer global{:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.a11y-skipLink{position:fixed;z-index:var(--z-top);inset-block-start:-100vb;inset-inline-start:0;padding:.75em 1.25em;background-color:var(--body-background-color);color:var(--text-color)}.a11y-skipLink:focus{inset-block-start:0}.a11y-srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}}@layer global{@keyframes fadeFromOpaque{0%{opacity:1}}@keyframes fadeToOpaque{to{opacity:1}}@keyframes fadeFromTransparent{0%{opacity:0}}@keyframes fadeToTransparent{to{opacity:0}}}@layer global{.grid{display:grid;--grid-tc: repeat(4, 1fr);--grid-cs: 1;--grid-ce: -1;grid-template-columns:var(--grid-tc);grid-column-gap:var(--grid-column-gap);grid-row-gap:var(--grid-row-gap)}.grid-flush{grid-column-gap:0;grid-row-gap:0}.grid>.grid_item{display:block;appearance:none;-webkit-appearance:none}.grid[col="1"]{--grid-tc: repeat(1, 1fr) }.grid[col="2"]{--grid-tc: repeat(2, 1fr) }.grid[col="3"]{--grid-tc: repeat(3, 1fr) }.grid[col="4"]{--grid-tc: repeat(4, 1fr) }.grid[col="5"]{--grid-tc: repeat(5, 1fr) }.grid[col="6"]{--grid-tc: repeat(6, 1fr) }.grid[col="7"]{--grid-tc: repeat(7, 1fr) }.grid[col="8"]{--grid-tc: repeat(8, 1fr) }.grid[col="9"]{--grid-tc: repeat(9, 1fr) }.grid[col="10"]{--grid-tc: repeat(10, 1fr) }.grid[col="11"]{--grid-tc: repeat(11, 1fr) }.grid[col="12"]{--grid-tc: repeat(12, 1fr) }.grid[col="13"]{--grid-tc: repeat(13, 1fr) }.grid[col="14"]{--grid-tc: repeat(14, 1fr) }.grid[col="15"]{--grid-tc: repeat(15, 1fr) }.grid[col="16"]{--grid-tc: repeat(16, 1fr) }.grid[col="17"]{--grid-tc: repeat(17, 1fr) }.grid[col="18"]{--grid-tc: repeat(18, 1fr) }.grid[col="19"]{--grid-tc: repeat(19, 1fr) }.grid[col="20"]{--grid-tc: repeat(20, 1fr) }.grid[col="21"]{--grid-tc: repeat(21, 1fr) }.grid[col="22"]{--grid-tc: repeat(22, 1fr) }.grid[col="23"]{--grid-tc: repeat(23, 1fr) }.grid[col="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span^="1"]{--grid-cs: 1 }.grid>.grid_item[span^="2"]{--grid-cs: 2 }.grid>.grid_item[span^="3"]{--grid-cs: 3 }.grid>.grid_item[span^="4"]{--grid-cs: 4 }.grid>.grid_item[span^="5"]{--grid-cs: 5 }.grid>.grid_item[span^="6"]{--grid-cs: 6 }.grid>.grid_item[span^="7"]{--grid-cs: 7 }.grid>.grid_item[span^="8"]{--grid-cs: 8 }.grid>.grid_item[span^="9"]{--grid-cs: 9 }.grid>.grid_item[span^="10"]{--grid-cs: 10 }.grid>.grid_item[span^="11"]{--grid-cs: 11 }.grid>.grid_item[span^="12"]{--grid-cs: 12 }.grid>.grid_item[span^="13"]{--grid-cs: 13 }.grid>.grid_item[span^="14"]{--grid-cs: 14 }.grid>.grid_item[span^="15"]{--grid-cs: 15 }.grid>.grid_item[span^="16"]{--grid-cs: 16 }.grid>.grid_item[span^="17"]{--grid-cs: 17 }.grid>.grid_item[span^="18"]{--grid-cs: 18 }.grid>.grid_item[span^="19"]{--grid-cs: 19 }.grid>.grid_item[span^="20"]{--grid-cs: 20 }.grid>.grid_item[span^="21"]{--grid-cs: 21 }.grid>.grid_item[span^="22"]{--grid-cs: 22 }.grid>.grid_item[span^="23"]{--grid-cs: 23 }.grid>.grid_item[span^="24"]{--grid-cs: 24 }.grid>.grid_item[span$="+1"],.grid>.grid_item[span="1"]{--grid-ce: 1 }.grid>.grid_item[span$="+2"],.grid>.grid_item[span$="-1"],.grid>.grid_item[span="2"]{--grid-ce: 2 }.grid>.grid_item[span$="+3"],.grid>.grid_item[span$="-2"],.grid>.grid_item[span="3"]{--grid-ce: 3 }.grid>.grid_item[span$="+4"],.grid>.grid_item[span$="-3"],.grid>.grid_item[span="4"]{--grid-ce: 4 }.grid>.grid_item[span$="+5"],.grid>.grid_item[span$="-4"],.grid>.grid_item[span="5"]{--grid-ce: 5 }.grid>.grid_item[span$="+6"],.grid>.grid_item[span$="-5"],.grid>.grid_item[span="6"]{--grid-ce: 6 }.grid>.grid_item[span$="+7"],.grid>.grid_item[span$="-6"],.grid>.grid_item[span="7"]{--grid-ce: 7 }.grid>.grid_item[span$="+8"],.grid>.grid_item[span$="-7"],.grid>.grid_item[span="8"]{--grid-ce: 8 }.grid>.grid_item[span$="+9"],.grid>.grid_item[span$="-8"],.grid>.grid_item[span="9"]{--grid-ce: 9 }.grid>.grid_item[span$="+10"],.grid>.grid_item[span$="-9"],.grid>.grid_item[span="10"]{--grid-ce: 10 }.grid>.grid_item[span$="+11"],.grid>.grid_item[span$="-10"],.grid>.grid_item[span="11"]{--grid-ce: 11 }.grid>.grid_item[span$="+12"],.grid>.grid_item[span$="-11"],.grid>.grid_item[span="12"]{--grid-ce: 12 }.grid>.grid_item[span$="+13"],.grid>.grid_item[span$="-12"],.grid>.grid_item[span="13"]{--grid-ce: 13 }.grid>.grid_item[span$="+14"],.grid>.grid_item[span$="-13"],.grid>.grid_item[span="14"]{--grid-ce: 14 }.grid>.grid_item[span$="+15"],.grid>.grid_item[span$="-14"],.grid>.grid_item[span="15"]{--grid-ce: 15 }.grid>.grid_item[span$="+16"],.grid>.grid_item[span$="-15"],.grid>.grid_item[span="16"]{--grid-ce: 16 }.grid>.grid_item[span$="+17"],.grid>.grid_item[span$="-16"],.grid>.grid_item[span="17"]{--grid-ce: 17 }.grid>.grid_item[span$="+18"],.grid>.grid_item[span$="-17"],.grid>.grid_item[span="18"]{--grid-ce: 18 }.grid>.grid_item[span$="+19"],.grid>.grid_item[span$="-18"],.grid>.grid_item[span="19"]{--grid-ce: 19 }.grid>.grid_item[span$="+20"],.grid>.grid_item[span$="-19"],.grid>.grid_item[span="20"]{--grid-ce: 20 }.grid>.grid_item[span$="+21"],.grid>.grid_item[span$="-20"],.grid>.grid_item[span="21"]{--grid-ce: 21 }.grid>.grid_item[span$="+22"],.grid>.grid_item[span$="-21"],.grid>.grid_item[span="22"]{--grid-ce: 22 }.grid>.grid_item[span$="+23"],.grid>.grid_item[span$="-22"],.grid>.grid_item[span="23"]{--grid-ce: 23 }.grid>.grid_item[span$="+24"],.grid>.grid_item[span$="-23"],.grid>.grid_item[span="24"]{--grid-ce: 24 }.grid>.grid_item[span$="-24"]{--grid-ce: 25 }.grid>.grid_item[span]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span*="+"],.grid>.grid_item[span*="-"],.grid>.grid_item[span*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span*="-"],.grid>.grid_item[span*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span=row]{grid-column:1 / -1}@media only screen and (width>=768px){.grid[col-md="1"]{--grid-tc: repeat(1, 1fr) }.grid[col-md="2"]{--grid-tc: repeat(2, 1fr) }.grid[col-md="3"]{--grid-tc: repeat(3, 1fr) }.grid[col-md="4"]{--grid-tc: repeat(4, 1fr) }.grid[col-md="5"]{--grid-tc: repeat(5, 1fr) }.grid[col-md="6"]{--grid-tc: repeat(6, 1fr) }.grid[col-md="7"]{--grid-tc: repeat(7, 1fr) }.grid[col-md="8"]{--grid-tc: repeat(8, 1fr) }.grid[col-md="9"]{--grid-tc: repeat(9, 1fr) }.grid[col-md="10"]{--grid-tc: repeat(10, 1fr) }.grid[col-md="11"]{--grid-tc: repeat(11, 1fr) }.grid[col-md="12"]{--grid-tc: repeat(12, 1fr) }.grid[col-md="13"]{--grid-tc: repeat(13, 1fr) }.grid[col-md="14"]{--grid-tc: repeat(14, 1fr) }.grid[col-md="15"]{--grid-tc: repeat(15, 1fr) }.grid[col-md="16"]{--grid-tc: repeat(16, 1fr) }.grid[col-md="17"]{--grid-tc: repeat(17, 1fr) }.grid[col-md="18"]{--grid-tc: repeat(18, 1fr) }.grid[col-md="19"]{--grid-tc: repeat(19, 1fr) }.grid[col-md="20"]{--grid-tc: repeat(20, 1fr) }.grid[col-md="21"]{--grid-tc: repeat(21, 1fr) }.grid[col-md="22"]{--grid-tc: repeat(22, 1fr) }.grid[col-md="23"]{--grid-tc: repeat(23, 1fr) }.grid[col-md="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span-md^="1"]{--grid-cs: 1 }.grid>.grid_item[span-md^="2"]{--grid-cs: 2 }.grid>.grid_item[span-md^="3"]{--grid-cs: 3 }.grid>.grid_item[span-md^="4"]{--grid-cs: 4 }.grid>.grid_item[span-md^="5"]{--grid-cs: 5 }.grid>.grid_item[span-md^="6"]{--grid-cs: 6 }.grid>.grid_item[span-md^="7"]{--grid-cs: 7 }.grid>.grid_item[span-md^="8"]{--grid-cs: 8 }.grid>.grid_item[span-md^="9"]{--grid-cs: 9 }.grid>.grid_item[span-md^="10"]{--grid-cs: 10 }.grid>.grid_item[span-md^="11"]{--grid-cs: 11 }.grid>.grid_item[span-md^="12"]{--grid-cs: 12 }.grid>.grid_item[span-md^="13"]{--grid-cs: 13 }.grid>.grid_item[span-md^="14"]{--grid-cs: 14 }.grid>.grid_item[span-md^="15"]{--grid-cs: 15 }.grid>.grid_item[span-md^="16"]{--grid-cs: 16 }.grid>.grid_item[span-md^="17"]{--grid-cs: 17 }.grid>.grid_item[span-md^="18"]{--grid-cs: 18 }.grid>.grid_item[span-md^="19"]{--grid-cs: 19 }.grid>.grid_item[span-md^="20"]{--grid-cs: 20 }.grid>.grid_item[span-md^="21"]{--grid-cs: 21 }.grid>.grid_item[span-md^="22"]{--grid-cs: 22 }.grid>.grid_item[span-md^="23"]{--grid-cs: 23 }.grid>.grid_item[span-md^="24"]{--grid-cs: 24 }.grid>.grid_item[span-md$="+1"],.grid>.grid_item[span-md="1"]{--grid-ce: 1 }.grid>.grid_item[span-md$="+2"],.grid>.grid_item[span-md$="-1"],.grid>.grid_item[span-md="2"]{--grid-ce: 2 }.grid>.grid_item[span-md$="+3"],.grid>.grid_item[span-md$="-2"],.grid>.grid_item[span-md="3"]{--grid-ce: 3 }.grid>.grid_item[span-md$="+4"],.grid>.grid_item[span-md$="-3"],.grid>.grid_item[span-md="4"]{--grid-ce: 4 }.grid>.grid_item[span-md$="+5"],.grid>.grid_item[span-md$="-4"],.grid>.grid_item[span-md="5"]{--grid-ce: 5 }.grid>.grid_item[span-md$="+6"],.grid>.grid_item[span-md$="-5"],.grid>.grid_item[span-md="6"]{--grid-ce: 6 }.grid>.grid_item[span-md$="+7"],.grid>.grid_item[span-md$="-6"],.grid>.grid_item[span-md="7"]{--grid-ce: 7 }.grid>.grid_item[span-md$="+8"],.grid>.grid_item[span-md$="-7"],.grid>.grid_item[span-md="8"]{--grid-ce: 8 }.grid>.grid_item[span-md$="+9"],.grid>.grid_item[span-md$="-8"],.grid>.grid_item[span-md="9"]{--grid-ce: 9 }.grid>.grid_item[span-md$="+10"],.grid>.grid_item[span-md$="-9"],.grid>.grid_item[span-md="10"]{--grid-ce: 10 }.grid>.grid_item[span-md$="+11"],.grid>.grid_item[span-md$="-10"],.grid>.grid_item[span-md="11"]{--grid-ce: 11 }.grid>.grid_item[span-md$="+12"],.grid>.grid_item[span-md$="-11"],.grid>.grid_item[span-md="12"]{--grid-ce: 12 }.grid>.grid_item[span-md$="+13"],.grid>.grid_item[span-md$="-12"],.grid>.grid_item[span-md="13"]{--grid-ce: 13 }.grid>.grid_item[span-md$="+14"],.grid>.grid_item[span-md$="-13"],.grid>.grid_item[span-md="14"]{--grid-ce: 14 }.grid>.grid_item[span-md$="+15"],.grid>.grid_item[span-md$="-14"],.grid>.grid_item[span-md="15"]{--grid-ce: 15 }.grid>.grid_item[span-md$="+16"],.grid>.grid_item[span-md$="-15"],.grid>.grid_item[span-md="16"]{--grid-ce: 16 }.grid>.grid_item[span-md$="+17"],.grid>.grid_item[span-md$="-16"],.grid>.grid_item[span-md="17"]{--grid-ce: 17 }.grid>.grid_item[span-md$="+18"],.grid>.grid_item[span-md$="-17"],.grid>.grid_item[span-md="18"]{--grid-ce: 18 }.grid>.grid_item[span-md$="+19"],.grid>.grid_item[span-md$="-18"],.grid>.grid_item[span-md="19"]{--grid-ce: 19 }.grid>.grid_item[span-md$="+20"],.grid>.grid_item[span-md$="-19"],.grid>.grid_item[span-md="20"]{--grid-ce: 20 }.grid>.grid_item[span-md$="+21"],.grid>.grid_item[span-md$="-20"],.grid>.grid_item[span-md="21"]{--grid-ce: 21 }.grid>.grid_item[span-md$="+22"],.grid>.grid_item[span-md$="-21"],.grid>.grid_item[span-md="22"]{--grid-ce: 22 }.grid>.grid_item[span-md$="+23"],.grid>.grid_item[span-md$="-22"],.grid>.grid_item[span-md="23"]{--grid-ce: 23 }.grid>.grid_item[span-md$="+24"],.grid>.grid_item[span-md$="-23"],.grid>.grid_item[span-md="24"]{--grid-ce: 24 }.grid>.grid_item[span-md$="-24"]{--grid-ce: 25 }.grid>.grid_item[span-md]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span-md*="+"],.grid>.grid_item[span-md*="-"],.grid>.grid_item[span-md*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span-md*="-"],.grid>.grid_item[span-md*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span-md=row]{grid-column:1 / -1}}@media only screen and (width>=1024px){.grid[col-lg="1"]{--grid-tc: repeat(1, 1fr) }.grid[col-lg="2"]{--grid-tc: repeat(2, 1fr) }.grid[col-lg="3"]{--grid-tc: repeat(3, 1fr) }.grid[col-lg="4"]{--grid-tc: repeat(4, 1fr) }.grid[col-lg="5"]{--grid-tc: repeat(5, 1fr) }.grid[col-lg="6"]{--grid-tc: repeat(6, 1fr) }.grid[col-lg="7"]{--grid-tc: repeat(7, 1fr) }.grid[col-lg="8"]{--grid-tc: repeat(8, 1fr) }.grid[col-lg="9"]{--grid-tc: repeat(9, 1fr) }.grid[col-lg="10"]{--grid-tc: repeat(10, 1fr) }.grid[col-lg="11"]{--grid-tc: repeat(11, 1fr) }.grid[col-lg="12"]{--grid-tc: repeat(12, 1fr) }.grid[col-lg="13"]{--grid-tc: repeat(13, 1fr) }.grid[col-lg="14"]{--grid-tc: repeat(14, 1fr) }.grid[col-lg="15"]{--grid-tc: repeat(15, 1fr) }.grid[col-lg="16"]{--grid-tc: repeat(16, 1fr) }.grid[col-lg="17"]{--grid-tc: repeat(17, 1fr) }.grid[col-lg="18"]{--grid-tc: repeat(18, 1fr) }.grid[col-lg="19"]{--grid-tc: repeat(19, 1fr) }.grid[col-lg="20"]{--grid-tc: repeat(20, 1fr) }.grid[col-lg="21"]{--grid-tc: repeat(21, 1fr) }.grid[col-lg="22"]{--grid-tc: repeat(22, 1fr) }.grid[col-lg="23"]{--grid-tc: repeat(23, 1fr) }.grid[col-lg="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span-lg^="1"]{--grid-cs: 1 }.grid>.grid_item[span-lg^="2"]{--grid-cs: 2 }.grid>.grid_item[span-lg^="3"]{--grid-cs: 3 }.grid>.grid_item[span-lg^="4"]{--grid-cs: 4 }.grid>.grid_item[span-lg^="5"]{--grid-cs: 5 }.grid>.grid_item[span-lg^="6"]{--grid-cs: 6 }.grid>.grid_item[span-lg^="7"]{--grid-cs: 7 }.grid>.grid_item[span-lg^="8"]{--grid-cs: 8 }.grid>.grid_item[span-lg^="9"]{--grid-cs: 9 }.grid>.grid_item[span-lg^="10"]{--grid-cs: 10 }.grid>.grid_item[span-lg^="11"]{--grid-cs: 11 }.grid>.grid_item[span-lg^="12"]{--grid-cs: 12 }.grid>.grid_item[span-lg^="13"]{--grid-cs: 13 }.grid>.grid_item[span-lg^="14"]{--grid-cs: 14 }.grid>.grid_item[span-lg^="15"]{--grid-cs: 15 }.grid>.grid_item[span-lg^="16"]{--grid-cs: 16 }.grid>.grid_item[span-lg^="17"]{--grid-cs: 17 }.grid>.grid_item[span-lg^="18"]{--grid-cs: 18 }.grid>.grid_item[span-lg^="19"]{--grid-cs: 19 }.grid>.grid_item[span-lg^="20"]{--grid-cs: 20 }.grid>.grid_item[span-lg^="21"]{--grid-cs: 21 }.grid>.grid_item[span-lg^="22"]{--grid-cs: 22 }.grid>.grid_item[span-lg^="23"]{--grid-cs: 23 }.grid>.grid_item[span-lg^="24"]{--grid-cs: 24 }.grid>.grid_item[span-lg$="+1"],.grid>.grid_item[span-lg="1"]{--grid-ce: 1 }.grid>.grid_item[span-lg$="+2"],.grid>.grid_item[span-lg$="-1"],.grid>.grid_item[span-lg="2"]{--grid-ce: 2 }.grid>.grid_item[span-lg$="+3"],.grid>.grid_item[span-lg$="-2"],.grid>.grid_item[span-lg="3"]{--grid-ce: 3 }.grid>.grid_item[span-lg$="+4"],.grid>.grid_item[span-lg$="-3"],.grid>.grid_item[span-lg="4"]{--grid-ce: 4 }.grid>.grid_item[span-lg$="+5"],.grid>.grid_item[span-lg$="-4"],.grid>.grid_item[span-lg="5"]{--grid-ce: 5 }.grid>.grid_item[span-lg$="+6"],.grid>.grid_item[span-lg$="-5"],.grid>.grid_item[span-lg="6"]{--grid-ce: 6 }.grid>.grid_item[span-lg$="+7"],.grid>.grid_item[span-lg$="-6"],.grid>.grid_item[span-lg="7"]{--grid-ce: 7 }.grid>.grid_item[span-lg$="+8"],.grid>.grid_item[span-lg$="-7"],.grid>.grid_item[span-lg="8"]{--grid-ce: 8 }.grid>.grid_item[span-lg$="+9"],.grid>.grid_item[span-lg$="-8"],.grid>.grid_item[span-lg="9"]{--grid-ce: 9 }.grid>.grid_item[span-lg$="+10"],.grid>.grid_item[span-lg$="-9"],.grid>.grid_item[span-lg="10"]{--grid-ce: 10 }.grid>.grid_item[span-lg$="+11"],.grid>.grid_item[span-lg$="-10"],.grid>.grid_item[span-lg="11"]{--grid-ce: 11 }.grid>.grid_item[span-lg$="+12"],.grid>.grid_item[span-lg$="-11"],.grid>.grid_item[span-lg="12"]{--grid-ce: 12 }.grid>.grid_item[span-lg$="+13"],.grid>.grid_item[span-lg$="-12"],.grid>.grid_item[span-lg="13"]{--grid-ce: 13 }.grid>.grid_item[span-lg$="+14"],.grid>.grid_item[span-lg$="-13"],.grid>.grid_item[span-lg="14"]{--grid-ce: 14 }.grid>.grid_item[span-lg$="+15"],.grid>.grid_item[span-lg$="-14"],.grid>.grid_item[span-lg="15"]{--grid-ce: 15 }.grid>.grid_item[span-lg$="+16"],.grid>.grid_item[span-lg$="-15"],.grid>.grid_item[span-lg="16"]{--grid-ce: 16 }.grid>.grid_item[span-lg$="+17"],.grid>.grid_item[span-lg$="-16"],.grid>.grid_item[span-lg="17"]{--grid-ce: 17 }.grid>.grid_item[span-lg$="+18"],.grid>.grid_item[span-lg$="-17"],.grid>.grid_item[span-lg="18"]{--grid-ce: 18 }.grid>.grid_item[span-lg$="+19"],.grid>.grid_item[span-lg$="-18"],.grid>.grid_item[span-lg="19"]{--grid-ce: 19 }.grid>.grid_item[span-lg$="+20"],.grid>.grid_item[span-lg$="-19"],.grid>.grid_item[span-lg="20"]{--grid-ce: 20 }.grid>.grid_item[span-lg$="+21"],.grid>.grid_item[span-lg$="-20"],.grid>.grid_item[span-lg="21"]{--grid-ce: 21 }.grid>.grid_item[span-lg$="+22"],.grid>.grid_item[span-lg$="-21"],.grid>.grid_item[span-lg="22"]{--grid-ce: 22 }.grid>.grid_item[span-lg$="+23"],.grid>.grid_item[span-lg$="-22"],.grid>.grid_item[span-lg="23"]{--grid-ce: 23 }.grid>.grid_item[span-lg$="+24"],.grid>.grid_item[span-lg$="-23"],.grid>.grid_item[span-lg="24"]{--grid-ce: 24 }.grid>.grid_item[span-lg$="-24"]{--grid-ce: 25 }.grid>.grid_item[span-lg]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span-lg*="+"],.grid>.grid_item[span-lg*="-"],.grid>.grid_item[span-lg*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span-lg*="-"],.grid>.grid_item[span-lg*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span-lg=row]{grid-column:1 / -1}}@media only screen and (width>=1440px){.grid[col-xl="1"]{--grid-tc: repeat(1, 1fr) }.grid[col-xl="2"]{--grid-tc: repeat(2, 1fr) }.grid[col-xl="3"]{--grid-tc: repeat(3, 1fr) }.grid[col-xl="4"]{--grid-tc: repeat(4, 1fr) }.grid[col-xl="5"]{--grid-tc: repeat(5, 1fr) }.grid[col-xl="6"]{--grid-tc: repeat(6, 1fr) }.grid[col-xl="7"]{--grid-tc: repeat(7, 1fr) }.grid[col-xl="8"]{--grid-tc: repeat(8, 1fr) }.grid[col-xl="9"]{--grid-tc: repeat(9, 1fr) }.grid[col-xl="10"]{--grid-tc: repeat(10, 1fr) }.grid[col-xl="11"]{--grid-tc: repeat(11, 1fr) }.grid[col-xl="12"]{--grid-tc: repeat(12, 1fr) }.grid[col-xl="13"]{--grid-tc: repeat(13, 1fr) }.grid[col-xl="14"]{--grid-tc: repeat(14, 1fr) }.grid[col-xl="15"]{--grid-tc: repeat(15, 1fr) }.grid[col-xl="16"]{--grid-tc: repeat(16, 1fr) }.grid[col-xl="17"]{--grid-tc: repeat(17, 1fr) }.grid[col-xl="18"]{--grid-tc: repeat(18, 1fr) }.grid[col-xl="19"]{--grid-tc: repeat(19, 1fr) }.grid[col-xl="20"]{--grid-tc: repeat(20, 1fr) }.grid[col-xl="21"]{--grid-tc: repeat(21, 1fr) }.grid[col-xl="22"]{--grid-tc: repeat(22, 1fr) }.grid[col-xl="23"]{--grid-tc: repeat(23, 1fr) }.grid[col-xl="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span-xl^="1"]{--grid-cs: 1 }.grid>.grid_item[span-xl^="2"]{--grid-cs: 2 }.grid>.grid_item[span-xl^="3"]{--grid-cs: 3 }.grid>.grid_item[span-xl^="4"]{--grid-cs: 4 }.grid>.grid_item[span-xl^="5"]{--grid-cs: 5 }.grid>.grid_item[span-xl^="6"]{--grid-cs: 6 }.grid>.grid_item[span-xl^="7"]{--grid-cs: 7 }.grid>.grid_item[span-xl^="8"]{--grid-cs: 8 }.grid>.grid_item[span-xl^="9"]{--grid-cs: 9 }.grid>.grid_item[span-xl^="10"]{--grid-cs: 10 }.grid>.grid_item[span-xl^="11"]{--grid-cs: 11 }.grid>.grid_item[span-xl^="12"]{--grid-cs: 12 }.grid>.grid_item[span-xl^="13"]{--grid-cs: 13 }.grid>.grid_item[span-xl^="14"]{--grid-cs: 14 }.grid>.grid_item[span-xl^="15"]{--grid-cs: 15 }.grid>.grid_item[span-xl^="16"]{--grid-cs: 16 }.grid>.grid_item[span-xl^="17"]{--grid-cs: 17 }.grid>.grid_item[span-xl^="18"]{--grid-cs: 18 }.grid>.grid_item[span-xl^="19"]{--grid-cs: 19 }.grid>.grid_item[span-xl^="20"]{--grid-cs: 20 }.grid>.grid_item[span-xl^="21"]{--grid-cs: 21 }.grid>.grid_item[span-xl^="22"]{--grid-cs: 22 }.grid>.grid_item[span-xl^="23"]{--grid-cs: 23 }.grid>.grid_item[span-xl^="24"]{--grid-cs: 24 }.grid>.grid_item[span-xl$="+1"],.grid>.grid_item[span-xl="1"]{--grid-ce: 1 }.grid>.grid_item[span-xl$="+2"],.grid>.grid_item[span-xl$="-1"],.grid>.grid_item[span-xl="2"]{--grid-ce: 2 }.grid>.grid_item[span-xl$="+3"],.grid>.grid_item[span-xl$="-2"],.grid>.grid_item[span-xl="3"]{--grid-ce: 3 }.grid>.grid_item[span-xl$="+4"],.grid>.grid_item[span-xl$="-3"],.grid>.grid_item[span-xl="4"]{--grid-ce: 4 }.grid>.grid_item[span-xl$="+5"],.grid>.grid_item[span-xl$="-4"],.grid>.grid_item[span-xl="5"]{--grid-ce: 5 }.grid>.grid_item[span-xl$="+6"],.grid>.grid_item[span-xl$="-5"],.grid>.grid_item[span-xl="6"]{--grid-ce: 6 }.grid>.grid_item[span-xl$="+7"],.grid>.grid_item[span-xl$="-6"],.grid>.grid_item[span-xl="7"]{--grid-ce: 7 }.grid>.grid_item[span-xl$="+8"],.grid>.grid_item[span-xl$="-7"],.grid>.grid_item[span-xl="8"]{--grid-ce: 8 }.grid>.grid_item[span-xl$="+9"],.grid>.grid_item[span-xl$="-8"],.grid>.grid_item[span-xl="9"]{--grid-ce: 9 }.grid>.grid_item[span-xl$="+10"],.grid>.grid_item[span-xl$="-9"],.grid>.grid_item[span-xl="10"]{--grid-ce: 10 }.grid>.grid_item[span-xl$="+11"],.grid>.grid_item[span-xl$="-10"],.grid>.grid_item[span-xl="11"]{--grid-ce: 11 }.grid>.grid_item[span-xl$="+12"],.grid>.grid_item[span-xl$="-11"],.grid>.grid_item[span-xl="12"]{--grid-ce: 12 }.grid>.grid_item[span-xl$="+13"],.grid>.grid_item[span-xl$="-12"],.grid>.grid_item[span-xl="13"]{--grid-ce: 13 }.grid>.grid_item[span-xl$="+14"],.grid>.grid_item[span-xl$="-13"],.grid>.grid_item[span-xl="14"]{--grid-ce: 14 }.grid>.grid_item[span-xl$="+15"],.grid>.grid_item[span-xl$="-14"],.grid>.grid_item[span-xl="15"]{--grid-ce: 15 }.grid>.grid_item[span-xl$="+16"],.grid>.grid_item[span-xl$="-15"],.grid>.grid_item[span-xl="16"]{--grid-ce: 16 }.grid>.grid_item[span-xl$="+17"],.grid>.grid_item[span-xl$="-16"],.grid>.grid_item[span-xl="17"]{--grid-ce: 17 }.grid>.grid_item[span-xl$="+18"],.grid>.grid_item[span-xl$="-17"],.grid>.grid_item[span-xl="18"]{--grid-ce: 18 }.grid>.grid_item[span-xl$="+19"],.grid>.grid_item[span-xl$="-18"],.grid>.grid_item[span-xl="19"]{--grid-ce: 19 }.grid>.grid_item[span-xl$="+20"],.grid>.grid_item[span-xl$="-19"],.grid>.grid_item[span-xl="20"]{--grid-ce: 20 }.grid>.grid_item[span-xl$="+21"],.grid>.grid_item[span-xl$="-20"],.grid>.grid_item[span-xl="21"]{--grid-ce: 21 }.grid>.grid_item[span-xl$="+22"],.grid>.grid_item[span-xl$="-21"],.grid>.grid_item[span-xl="22"]{--grid-ce: 22 }.grid>.grid_item[span-xl$="+23"],.grid>.grid_item[span-xl$="-22"],.grid>.grid_item[span-xl="23"]{--grid-ce: 23 }.grid>.grid_item[span-xl$="+24"],.grid>.grid_item[span-xl$="-23"],.grid>.grid_item[span-xl="24"]{--grid-ce: 24 }.grid>.grid_item[span-xl$="-24"]{--grid-ce: 25 }.grid>.grid_item[span-xl]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span-xl*="+"],.grid>.grid_item[span-xl*="-"],.grid>.grid_item[span-xl*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span-xl*="-"],.grid>.grid_item[span-xl*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span-xl=row]{grid-column:1 / -1}}}@layer global{.layout{display:flex;flex-direction:column;width:100vw;min-height:100vh;.layout_content{flex:1}}.layout_content_main{container:main / inline-size}.layout-centered{.layout_content{display:grid;gap:var(--sm3);grid-template-columns:1fr minmax(0,var(--layout-content-width)) 1fr;margin-top:var(--lg1);margin-bottom:var(--sm1);@media(width>=768px){margin-top:var(--xl3);margin-bottom:var(--md3);gap:var(--md3)}}.layout_content_main{grid-column:2}}.layout-sidebar{.layout_content{@media(width>=768px){display:grid;grid-template-columns:var(--layout-aside-width) minmax(0,1fr)}}.layout_content_main{padding:var(--sm2);@media(width>=768px){grid-row:1;grid-column:2;padding:var(--lg1) var(--md2)}}.layout_content_aside{@media(width>=768px){grid-row:1;grid-column:1;padding:var(--lg1) var(--md3)}}}.layout-sidebar-end{.layout_content{@media(width>=768px){grid-template-columns:minmax(0,1fr) var(--layout-aside-width)}}.layout_content_main{@media(width>=768px){grid-column:1}}.layout_content_aside{@media(width>=768px){grid-column:2}}}.layout-docs{.layout_content{@media(width>=768px){display:grid;grid-template-columns:var(--layout-aside-width) minmax(0,1fr)}@media(width>=1024px){grid-template-columns:var(--layout-aside-width) minmax(0,var(--layout-content-width)) var(--layout-toc-width)}}.layout_content_main{padding:var(--sm2);@media(width>=768px){grid-row:1;grid-column:2;padding:var(--lg1) var(--md2)}}.layout_content_aside{display:none;@media(width>=768px){display:block;grid-row:1;grid-column:1;padding:var(--lg1) var(--md3)}}.layout_content_aside-toc{@media(width>=768px){display:none}@media(width>=1024px){display:block;grid-row:1;grid-column:3;padding:var(--lg1) var(--md3)}}}.layout-split{.layout_content{display:grid;@media(width>=768px){grid-template-columns:1fr 1fr}}}.layout-cover{min-height:100dvh;.layout_content{display:grid;place-items:center}}}@layer global{@scope(.prose)to (.not-prose){:is(p,ul,ol,blockquote,table):has(+:is(h1,h2,h3,h4)){margin-bottom:calc(var(--prose-spacing) * 2)}p,ul,ol,dl{margin-bottom:var(--prose-spacing);p,ul,ol,dl{margin-bottom:0}}ul,ol{ul,ol{margin-inline-start:0;padding-inline-start:var(--sm2)}li{margin-bottom:.5em;&::marker{color:light-dark(var(--base-300),var(--base-600))}}}ul{margin-inline-start:var(--sm2);list-style-type:"\2192 "}ol{margin-inline-start:var(--md2);list-style-type:decimal-leading-zero;li::marker{font-size:var(--text-sm)}}table{margin-top:var(--md1);margin-bottom:var(--md1)}}}@layer global{.wrap{display:grid;grid-template-columns:1fr var(--wrap-width) 1fr;>*,>astro-island>*,>astro-slot>*,>astro-static-slot>*{grid-column:2;padding-inline:var(--wrap-spacing);@media(width>=768px){padding-inline:var(--wrap-md-spacing)}@media(width>=1024px){padding-inline:var(--wrap-lg-spacing)}}}.wrap-sm{--wrap-width: var(--wrap-width-sm)}.wrap-md{--wrap-width: var(--wrap-width-md)}.wrap-lg{--wrap-width: var(--wrap-width-lg)}.wrap_content-fullBleed{grid-column:1 / -1;width:100%;object-fit:cover}}@layer helpers{.c-base-0{color:var(--base-0)!important}.bdc-base-0{border-color:var(--base-0)!important}.bgc-base-0{background-color:var(--base-0)!important}.c-base-50{color:var(--base-50)!important}.bdc-base-50{border-color:var(--base-50)!important}.bgc-base-50{background-color:var(--base-50)!important}.c-base-100{color:var(--base-100)!important}.bdc-base-100{border-color:var(--base-100)!important}.bgc-base-100{background-color:var(--base-100)!important}.c-base-200{color:var(--base-200)!important}.bdc-base-200{border-color:var(--base-200)!important}.bgc-base-200{background-color:var(--base-200)!important}.c-base-300{color:var(--base-300)!important}.bdc-base-300{border-color:var(--base-300)!important}.bgc-base-300{background-color:var(--base-300)!important}.c-base-400{color:var(--base-400)!important}.bdc-base-400{border-color:var(--base-400)!important}.bgc-base-400{background-color:var(--base-400)!important}.c-base-500{color:var(--base-500)!important}.bdc-base-500{border-color:var(--base-500)!important}.bgc-base-500{background-color:var(--base-500)!important}.c-base-600{color:var(--base-600)!important}.bdc-base-600{border-color:var(--base-600)!important}.bgc-base-600{background-color:var(--base-600)!important}.c-base-700{color:var(--base-700)!important}.bdc-base-700{border-color:var(--base-700)!important}.bgc-base-700{background-color:var(--base-700)!important}.c-base-800{color:var(--base-800)!important}.bdc-base-800{border-color:var(--base-800)!important}.bgc-base-800{background-color:var(--base-800)!important}.c-base-900{color:var(--base-900)!important}.bdc-base-900{border-color:var(--base-900)!important}.bgc-base-900{background-color:var(--base-900)!important}.c-base-950{color:var(--base-950)!important}.bdc-base-950{border-color:var(--base-950)!important}.bgc-base-950{background-color:var(--base-950)!important}.c-primary-50{color:var(--primary-50)!important}.bdc-primary-50{border-color:var(--primary-50)!important}.bgc-primary-50{background-color:var(--primary-50)!important}.c-primary-100{color:var(--primary-100)!important}.bdc-primary-100{border-color:var(--primary-100)!important}.bgc-primary-100{background-color:var(--primary-100)!important}.c-primary-200{color:var(--primary-200)!important}.bdc-primary-200{border-color:var(--primary-200)!important}.bgc-primary-200{background-color:var(--primary-200)!important}.c-primary-300{color:var(--primary-300)!important}.bdc-primary-300{border-color:var(--primary-300)!important}.bgc-primary-300{background-color:var(--primary-300)!important}.c-primary-400{color:var(--primary-400)!important}.bdc-primary-400{border-color:var(--primary-400)!important}.bgc-primary-400{background-color:var(--primary-400)!important}.c-primary-500{color:var(--primary-500)!important}.bdc-primary-500{border-color:var(--primary-500)!important}.bgc-primary-500{background-color:var(--primary-500)!important}.c-primary-600{color:var(--primary-600)!important}.bdc-primary-600{border-color:var(--primary-600)!important}.bgc-primary-600{background-color:var(--primary-600)!important}.c-primary-700{color:var(--primary-700)!important}.bdc-primary-700{border-color:var(--primary-700)!important}.bgc-primary-700{background-color:var(--primary-700)!important}.c-primary-800{color:var(--primary-800)!important}.bdc-primary-800{border-color:var(--primary-800)!important}.bgc-primary-800{background-color:var(--primary-800)!important}.c-primary-900{color:var(--primary-900)!important}.bdc-primary-900{border-color:var(--primary-900)!important}.bgc-primary-900{background-color:var(--primary-900)!important}.c-primary-950{color:var(--primary-950)!important}.bdc-primary-950{border-color:var(--primary-950)!important}.bgc-primary-950{background-color:var(--primary-950)!important}.c-yes-100{color:var(--yes-100)!important}.bdc-yes-100{border-color:var(--yes-100)!important}.bgc-yes-100{background-color:var(--yes-100)!important}.c-yes-200{color:var(--yes-200)!important}.bdc-yes-200{border-color:var(--yes-200)!important}.bgc-yes-200{background-color:var(--yes-200)!important}.c-yes-300{color:var(--yes-300)!important}.bdc-yes-300{border-color:var(--yes-300)!important}.bgc-yes-300{background-color:var(--yes-300)!important}.c-yes-400{color:var(--yes-400)!important}.bdc-yes-400{border-color:var(--yes-400)!important}.bgc-yes-400{background-color:var(--yes-400)!important}.c-yes-500{color:var(--yes-500)!important}.bdc-yes-500{border-color:var(--yes-500)!important}.bgc-yes-500{background-color:var(--yes-500)!important}.c-no-100{color:var(--no-100)!important}.bdc-no-100{border-color:var(--no-100)!important}.bgc-no-100{background-color:var(--no-100)!important}.c-no-200{color:var(--no-200)!important}.bdc-no-200{border-color:var(--no-200)!important}.bgc-no-200{background-color:var(--no-200)!important}.c-no-300{color:var(--no-300)!important}.bdc-no-300{border-color:var(--no-300)!important}.bgc-no-300{background-color:var(--no-300)!important}.c-no-400{color:var(--no-400)!important}.bdc-no-400{border-color:var(--no-400)!important}.bgc-no-400{background-color:var(--no-400)!important}.c-no-500{color:var(--no-500)!important}.bdc-no-500{border-color:var(--no-500)!important}.bgc-no-500{background-color:var(--no-500)!important}.c-maybe-100{color:var(--maybe-100)!important}.bdc-maybe-100{border-color:var(--maybe-100)!important}.bgc-maybe-100{background-color:var(--maybe-100)!important}.c-maybe-200{color:var(--maybe-200)!important}.bdc-maybe-200{border-color:var(--maybe-200)!important}.bgc-maybe-200{background-color:var(--maybe-200)!important}.c-maybe-300{color:var(--maybe-300)!important}.bdc-maybe-300{border-color:var(--maybe-300)!important}.bgc-maybe-300{background-color:var(--maybe-300)!important}.c-maybe-400{color:var(--maybe-400)!important}.bdc-maybe-400{border-color:var(--maybe-400)!important}.bgc-maybe-400{background-color:var(--maybe-400)!important}.c-maybe-500{color:var(--maybe-500)!important}.bdc-maybe-500{border-color:var(--maybe-500)!important}.bgc-maybe-500{background-color:var(--maybe-500)!important}}@layer helpers{body.dev{--baseline: 8;background-size:100% calc(var(--baseline) * 1px)!important;background-image:linear-gradient(to bottom,#0000 calc((var(--baseline) - 1) * 1px),#ff69b4 calc(var(--baseline) * 1px))!important}.dev-error{position:fixed!important;top:var(--md1)!important;left:var(--md1)!important;z-index:var(--z-top)!important;padding:var(--sm1)!important;font-size:1rem!important;color:var(--danger-500)!important;background:var(--danger-100)!important;border:1px solid var(--danger-500)!important;border-radius:var(--radius-md)!important}}@layer helpers{.of-auto,.overflow-auto{overflow:auto!important}.of-hidden,.overflow-hidden{overflow:hidden!important}.of-clip,.overflow-clip{overflow:clip!important}.of-visible,.overflow-visible{overflow:visible!important}.of-scroll,.overflow-scroll{overflow:scroll!important}.of-x-auto,.overflow-x-auto{overflow-x:auto!important}.of-y-auto,.overflow-y-auto{overflow-y:auto!important}.of-x-hidden,.overflow-x-hidden{overflow-x:hidden!important}.of-y-hidden,.overflow-y-hidden{overflow-y:hidden!important}.of-x-clip,.overflow-x-clip{overflow-x:clip!important}.of-y-clip,.overflow-y-clip{overflow-y:clip!important}.of-x-visible,.overflow-x-visible{overflow-x:visible!important}.of-y-visible,.overflow-y-visible{overflow-y:visible!important}.of-x-scroll,.overflow-x-scroll{overflow-x:scroll!important}.of-y-scroll,.overflow-y-scroll{overflow-y:scroll!important}.position-static{position:static!important}.position-fixed{position:fixed!important}.position-absolute{position:absolute!important}.position-relative{position:relative!important}.position-sticky{position:sticky!important}.visibility-visible{visibility:visible!important}.visibility-hidden{visibility:hidden!important}.visibility-collapse{visibility:collapse!important}.z-auto{z-index:auto!important}.z-bottom{z-index:var(--z-bottom)!important}.z-0{z-index:var(--z-0)!important}.z-1{z-index:var(--z-1)!important}.z-2{z-index:var(--z-2)!important}.z-3{z-index:var(--z-3)!important}.z-4{z-index:var(--z-4)!important}.z-5{z-index:var(--z-5)!important}.z-top{z-index:var(--z-top)!important}}@layer helpers{.o-0{opacity:var(--o-0)!important}.o-1{opacity:var(--o-1)!important}.o-2{opacity:var(--o-2)!important}.o-3{opacity:var(--o-3)!important}.o-4{opacity:var(--o-4)!important}.o-5{opacity:var(--o-5)!important}}@layer helpers{.ar-square{aspect-ratio:var(--ar-square)!important}.ar-landscape{aspect-ratio:var(--ar-landscape)!important}.ar-portrait{aspect-ratio:var(--ar-portrait)!important}.ar-widescreen{aspect-ratio:var(--ar-widescreen)!important}.ar-golden{aspect-ratio:var(--ar-golden)!important}}@layer helpers{.w-0{width:0!important}.h-0{height:0!important}.m-0{margin:0!important}.mt-0{margin-top:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mr-0{margin-right:0!important}.mis-0{margin-inline-start:0!important}.mie-0{margin-inline-end:0!important}.p-0{padding:0!important}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.pis-0{padding-inline-start:0!important}.pie-0{padding-inline-end:0!important}.w-xs1{width:var(--xs1)!important}.h-xs1{height:var(--xs1)!important}.m-xs1{margin:var(--xs1)!important}.mt-xs1{margin-top:var(--xs1)!important}.mb-xs1{margin-bottom:var(--xs1)!important}.ml-xs1{margin-left:var(--xs1)!important}.mr-xs1{margin-right:var(--xs1)!important}.mis-xs1{margin-inline-start:var(--xs1)!important}.mie-xs1{margin-inline-end:var(--xs1)!important}.p-xs1{padding:var(--xs1)!important}.pt-xs1{padding-top:var(--xs1)!important}.pb-xs1{padding-bottom:var(--xs1)!important}.pl-xs1{padding-left:var(--xs1)!important}.pr-xs1{padding-right:var(--xs1)!important}.pis-xs1{padding-inline-start:var(--xs1)!important}.pie-xs1{padding-inline-end:var(--xs1)!important}.w-xs2{width:var(--xs2)!important}.h-xs2{height:var(--xs2)!important}.m-xs2{margin:var(--xs2)!important}.mt-xs2{margin-top:var(--xs2)!important}.mb-xs2{margin-bottom:var(--xs2)!important}.ml-xs2{margin-left:var(--xs2)!important}.mr-xs2{margin-right:var(--xs2)!important}.mis-xs2{margin-inline-start:var(--xs2)!important}.mie-xs2{margin-inline-end:var(--xs2)!important}.p-xs2{padding:var(--xs2)!important}.pt-xs2{padding-top:var(--xs2)!important}.pb-xs2{padding-bottom:var(--xs2)!important}.pl-xs2{padding-left:var(--xs2)!important}.pr-xs2{padding-right:var(--xs2)!important}.pis-xs2{padding-inline-start:var(--xs2)!important}.pie-xs2{padding-inline-end:var(--xs2)!important}.w-xs3{width:var(--xs3)!important}.h-xs3{height:var(--xs3)!important}.m-xs3{margin:var(--xs3)!important}.mt-xs3{margin-top:var(--xs3)!important}.mb-xs3{margin-bottom:var(--xs3)!important}.ml-xs3{margin-left:var(--xs3)!important}.mr-xs3{margin-right:var(--xs3)!important}.mis-xs3{margin-inline-start:var(--xs3)!important}.mie-xs3{margin-inline-end:var(--xs3)!important}.p-xs3{padding:var(--xs3)!important}.pt-xs3{padding-top:var(--xs3)!important}.pb-xs3{padding-bottom:var(--xs3)!important}.pl-xs3{padding-left:var(--xs3)!important}.pr-xs3{padding-right:var(--xs3)!important}.pis-xs3{padding-inline-start:var(--xs3)!important}.pie-xs3{padding-inline-end:var(--xs3)!important}.w-sm1{width:var(--sm1)!important}.h-sm1{height:var(--sm1)!important}.m-sm1{margin:var(--sm1)!important}.mt-sm1{margin-top:var(--sm1)!important}.mb-sm1{margin-bottom:var(--sm1)!important}.ml-sm1{margin-left:var(--sm1)!important}.mr-sm1{margin-right:var(--sm1)!important}.mis-sm1{margin-inline-start:var(--sm1)!important}.mie-sm1{margin-inline-end:var(--sm1)!important}.p-sm1{padding:var(--sm1)!important}.pt-sm1{padding-top:var(--sm1)!important}.pb-sm1{padding-bottom:var(--sm1)!important}.pl-sm1{padding-left:var(--sm1)!important}.pr-sm1{padding-right:var(--sm1)!important}.pis-sm1{padding-inline-start:var(--sm1)!important}.pie-sm1{padding-inline-end:var(--sm1)!important}.w-sm2{width:var(--sm2)!important}.h-sm2{height:var(--sm2)!important}.m-sm2{margin:var(--sm2)!important}.mt-sm2{margin-top:var(--sm2)!important}.mb-sm2{margin-bottom:var(--sm2)!important}.ml-sm2{margin-left:var(--sm2)!important}.mr-sm2{margin-right:var(--sm2)!important}.mis-sm2{margin-inline-start:var(--sm2)!important}.mie-sm2{margin-inline-end:var(--sm2)!important}.p-sm2{padding:var(--sm2)!important}.pt-sm2{padding-top:var(--sm2)!important}.pb-sm2{padding-bottom:var(--sm2)!important}.pl-sm2{padding-left:var(--sm2)!important}.pr-sm2{padding-right:var(--sm2)!important}.pis-sm2{padding-inline-start:var(--sm2)!important}.pie-sm2{padding-inline-end:var(--sm2)!important}.w-sm3{width:var(--sm3)!important}.h-sm3{height:var(--sm3)!important}.m-sm3{margin:var(--sm3)!important}.mt-sm3{margin-top:var(--sm3)!important}.mb-sm3{margin-bottom:var(--sm3)!important}.ml-sm3{margin-left:var(--sm3)!important}.mr-sm3{margin-right:var(--sm3)!important}.mis-sm3{margin-inline-start:var(--sm3)!important}.mie-sm3{margin-inline-end:var(--sm3)!important}.p-sm3{padding:var(--sm3)!important}.pt-sm3{padding-top:var(--sm3)!important}.pb-sm3{padding-bottom:var(--sm3)!important}.pl-sm3{padding-left:var(--sm3)!important}.pr-sm3{padding-right:var(--sm3)!important}.pis-sm3{padding-inline-start:var(--sm3)!important}.pie-sm3{padding-inline-end:var(--sm3)!important}.w-md1{width:var(--md1)!important}.h-md1{height:var(--md1)!important}.m-md1{margin:var(--md1)!important}.mt-md1{margin-top:var(--md1)!important}.mb-md1{margin-bottom:var(--md1)!important}.ml-md1{margin-left:var(--md1)!important}.mr-md1{margin-right:var(--md1)!important}.mis-md1{margin-inline-start:var(--md1)!important}.mie-md1{margin-inline-end:var(--md1)!important}.p-md1{padding:var(--md1)!important}.pt-md1{padding-top:var(--md1)!important}.pb-md1{padding-bottom:var(--md1)!important}.pl-md1{padding-left:var(--md1)!important}.pr-md1{padding-right:var(--md1)!important}.pis-md1{padding-inline-start:var(--md1)!important}.pie-md1{padding-inline-end:var(--md1)!important}.w-md2{width:var(--md2)!important}.h-md2{height:var(--md2)!important}.m-md2{margin:var(--md2)!important}.mt-md2{margin-top:var(--md2)!important}.mb-md2{margin-bottom:var(--md2)!important}.ml-md2{margin-left:var(--md2)!important}.mr-md2{margin-right:var(--md2)!important}.mis-md2{margin-inline-start:var(--md2)!important}.mie-md2{margin-inline-end:var(--md2)!important}.p-md2{padding:var(--md2)!important}.pt-md2{padding-top:var(--md2)!important}.pb-md2{padding-bottom:var(--md2)!important}.pl-md2{padding-left:var(--md2)!important}.pr-md2{padding-right:var(--md2)!important}.pis-md2{padding-inline-start:var(--md2)!important}.pie-md2{padding-inline-end:var(--md2)!important}.w-md3{width:var(--md3)!important}.h-md3{height:var(--md3)!important}.m-md3{margin:var(--md3)!important}.mt-md3{margin-top:var(--md3)!important}.mb-md3{margin-bottom:var(--md3)!important}.ml-md3{margin-left:var(--md3)!important}.mr-md3{margin-right:var(--md3)!important}.mis-md3{margin-inline-start:var(--md3)!important}.mie-md3{margin-inline-end:var(--md3)!important}.p-md3{padding:var(--md3)!important}.pt-md3{padding-top:var(--md3)!important}.pb-md3{padding-bottom:var(--md3)!important}.pl-md3{padding-left:var(--md3)!important}.pr-md3{padding-right:var(--md3)!important}.pis-md3{padding-inline-start:var(--md3)!important}.pie-md3{padding-inline-end:var(--md3)!important}.w-lg1{width:var(--lg1)!important}.h-lg1{height:var(--lg1)!important}.m-lg1{margin:var(--lg1)!important}.mt-lg1{margin-top:var(--lg1)!important}.mb-lg1{margin-bottom:var(--lg1)!important}.ml-lg1{margin-left:var(--lg1)!important}.mr-lg1{margin-right:var(--lg1)!important}.mis-lg1{margin-inline-start:var(--lg1)!important}.mie-lg1{margin-inline-end:var(--lg1)!important}.p-lg1{padding:var(--lg1)!important}.pt-lg1{padding-top:var(--lg1)!important}.pb-lg1{padding-bottom:var(--lg1)!important}.pl-lg1{padding-left:var(--lg1)!important}.pr-lg1{padding-right:var(--lg1)!important}.pis-lg1{padding-inline-start:var(--lg1)!important}.pie-lg1{padding-inline-end:var(--lg1)!important}.w-lg2{width:var(--lg2)!important}.h-lg2{height:var(--lg2)!important}.m-lg2{margin:var(--lg2)!important}.mt-lg2{margin-top:var(--lg2)!important}.mb-lg2{margin-bottom:var(--lg2)!important}.ml-lg2{margin-left:var(--lg2)!important}.mr-lg2{margin-right:var(--lg2)!important}.mis-lg2{margin-inline-start:var(--lg2)!important}.mie-lg2{margin-inline-end:var(--lg2)!important}.p-lg2{padding:var(--lg2)!important}.pt-lg2{padding-top:var(--lg2)!important}.pb-lg2{padding-bottom:var(--lg2)!important}.pl-lg2{padding-left:var(--lg2)!important}.pr-lg2{padding-right:var(--lg2)!important}.pis-lg2{padding-inline-start:var(--lg2)!important}.pie-lg2{padding-inline-end:var(--lg2)!important}.w-lg3{width:var(--lg3)!important}.h-lg3{height:var(--lg3)!important}.m-lg3{margin:var(--lg3)!important}.mt-lg3{margin-top:var(--lg3)!important}.mb-lg3{margin-bottom:var(--lg3)!important}.ml-lg3{margin-left:var(--lg3)!important}.mr-lg3{margin-right:var(--lg3)!important}.mis-lg3{margin-inline-start:var(--lg3)!important}.mie-lg3{margin-inline-end:var(--lg3)!important}.p-lg3{padding:var(--lg3)!important}.pt-lg3{padding-top:var(--lg3)!important}.pb-lg3{padding-bottom:var(--lg3)!important}.pl-lg3{padding-left:var(--lg3)!important}.pr-lg3{padding-right:var(--lg3)!important}.pis-lg3{padding-inline-start:var(--lg3)!important}.pie-lg3{padding-inline-end:var(--lg3)!important}.w-xl1{width:var(--xl1)!important}.h-xl1{height:var(--xl1)!important}.m-xl1{margin:var(--xl1)!important}.mt-xl1{margin-top:var(--xl1)!important}.mb-xl1{margin-bottom:var(--xl1)!important}.ml-xl1{margin-left:var(--xl1)!important}.mr-xl1{margin-right:var(--xl1)!important}.mis-xl1{margin-inline-start:var(--xl1)!important}.mie-xl1{margin-inline-end:var(--xl1)!important}.p-xl1{padding:var(--xl1)!important}.pt-xl1{padding-top:var(--xl1)!important}.pb-xl1{padding-bottom:var(--xl1)!important}.pl-xl1{padding-left:var(--xl1)!important}.pr-xl1{padding-right:var(--xl1)!important}.pis-xl1{padding-inline-start:var(--xl1)!important}.pie-xl1{padding-inline-end:var(--xl1)!important}.w-xl2{width:var(--xl2)!important}.h-xl2{height:var(--xl2)!important}.m-xl2{margin:var(--xl2)!important}.mt-xl2{margin-top:var(--xl2)!important}.mb-xl2{margin-bottom:var(--xl2)!important}.ml-xl2{margin-left:var(--xl2)!important}.mr-xl2{margin-right:var(--xl2)!important}.mis-xl2{margin-inline-start:var(--xl2)!important}.mie-xl2{margin-inline-end:var(--xl2)!important}.p-xl2{padding:var(--xl2)!important}.pt-xl2{padding-top:var(--xl2)!important}.pb-xl2{padding-bottom:var(--xl2)!important}.pl-xl2{padding-left:var(--xl2)!important}.pr-xl2{padding-right:var(--xl2)!important}.pis-xl2{padding-inline-start:var(--xl2)!important}.pie-xl2{padding-inline-end:var(--xl2)!important}.w-xl3{width:var(--xl3)!important}.h-xl3{height:var(--xl3)!important}.m-xl3{margin:var(--xl3)!important}.mt-xl3{margin-top:var(--xl3)!important}.mb-xl3{margin-bottom:var(--xl3)!important}.ml-xl3{margin-left:var(--xl3)!important}.mr-xl3{margin-right:var(--xl3)!important}.mis-xl3{margin-inline-start:var(--xl3)!important}.mie-xl3{margin-inline-end:var(--xl3)!important}.p-xl3{padding:var(--xl3)!important}.pt-xl3{padding-top:var(--xl3)!important}.pb-xl3{padding-bottom:var(--xl3)!important}.pl-xl3{padding-left:var(--xl3)!important}.pr-xl3{padding-right:var(--xl3)!important}.pis-xl3{padding-inline-start:var(--xl3)!important}.pie-xl3{padding-inline-end:var(--xl3)!important}.w-xxl1{width:var(--xxl1)!important}.h-xxl1{height:var(--xxl1)!important}.m-xxl1{margin:var(--xxl1)!important}.mt-xxl1{margin-top:var(--xxl1)!important}.mb-xxl1{margin-bottom:var(--xxl1)!important}.ml-xxl1{margin-left:var(--xxl1)!important}.mr-xxl1{margin-right:var(--xxl1)!important}.mis-xxl1{margin-inline-start:var(--xxl1)!important}.mie-xxl1{margin-inline-end:var(--xxl1)!important}.p-xxl1{padding:var(--xxl1)!important}.pt-xxl1{padding-top:var(--xxl1)!important}.pb-xxl1{padding-bottom:var(--xxl1)!important}.pl-xxl1{padding-left:var(--xxl1)!important}.pr-xxl1{padding-right:var(--xxl1)!important}.pis-xxl1{padding-inline-start:var(--xxl1)!important}.pie-xxl1{padding-inline-end:var(--xxl1)!important}.w-xxl2{width:var(--xxl2)!important}.h-xxl2{height:var(--xxl2)!important}.m-xxl2{margin:var(--xxl2)!important}.mt-xxl2{margin-top:var(--xxl2)!important}.mb-xxl2{margin-bottom:var(--xxl2)!important}.ml-xxl2{margin-left:var(--xxl2)!important}.mr-xxl2{margin-right:var(--xxl2)!important}.mis-xxl2{margin-inline-start:var(--xxl2)!important}.mie-xxl2{margin-inline-end:var(--xxl2)!important}.p-xxl2{padding:var(--xxl2)!important}.pt-xxl2{padding-top:var(--xxl2)!important}.pb-xxl2{padding-bottom:var(--xxl2)!important}.pl-xxl2{padding-left:var(--xxl2)!important}.pr-xxl2{padding-right:var(--xxl2)!important}.pis-xxl2{padding-inline-start:var(--xxl2)!important}.pie-xxl2{padding-inline-end:var(--xxl2)!important}.w-xxl3{width:var(--xxl3)!important}.h-xxl3{height:var(--xxl3)!important}.m-xxl3{margin:var(--xxl3)!important}.mt-xxl3{margin-top:var(--xxl3)!important}.mb-xxl3{margin-bottom:var(--xxl3)!important}.ml-xxl3{margin-left:var(--xxl3)!important}.mr-xxl3{margin-right:var(--xxl3)!important}.mis-xxl3{margin-inline-start:var(--xxl3)!important}.mie-xxl3{margin-inline-end:var(--xxl3)!important}.p-xxl3{padding:var(--xxl3)!important}.pt-xxl3{padding-top:var(--xxl3)!important}.pb-xxl3{padding-bottom:var(--xxl3)!important}.pl-xxl3{padding-left:var(--xxl3)!important}.pr-xxl3{padding-right:var(--xxl3)!important}.pis-xxl3{padding-inline-start:var(--xxl3)!important}.pie-xxl3{padding-inline-end:var(--xxl3)!important}.w-mega1{width:var(--mega1)!important}.h-mega1{height:var(--mega1)!important}.m-mega1{margin:var(--mega1)!important}.mt-mega1{margin-top:var(--mega1)!important}.mb-mega1{margin-bottom:var(--mega1)!important}.ml-mega1{margin-left:var(--mega1)!important}.mr-mega1{margin-right:var(--mega1)!important}.mis-mega1{margin-inline-start:var(--mega1)!important}.mie-mega1{margin-inline-end:var(--mega1)!important}.p-mega1{padding:var(--mega1)!important}.pt-mega1{padding-top:var(--mega1)!important}.pb-mega1{padding-bottom:var(--mega1)!important}.pl-mega1{padding-left:var(--mega1)!important}.pr-mega1{padding-right:var(--mega1)!important}.pis-mega1{padding-inline-start:var(--mega1)!important}.pie-mega1{padding-inline-end:var(--mega1)!important}.w-mega2{width:var(--mega2)!important}.h-mega2{height:var(--mega2)!important}.m-mega2{margin:var(--mega2)!important}.mt-mega2{margin-top:var(--mega2)!important}.mb-mega2{margin-bottom:var(--mega2)!important}.ml-mega2{margin-left:var(--mega2)!important}.mr-mega2{margin-right:var(--mega2)!important}.mis-mega2{margin-inline-start:var(--mega2)!important}.mie-mega2{margin-inline-end:var(--mega2)!important}.p-mega2{padding:var(--mega2)!important}.pt-mega2{padding-top:var(--mega2)!important}.pb-mega2{padding-bottom:var(--mega2)!important}.pl-mega2{padding-left:var(--mega2)!important}.pr-mega2{padding-right:var(--mega2)!important}.pis-mega2{padding-inline-start:var(--mega2)!important}.pie-mega2{padding-inline-end:var(--mega2)!important}.w-mega3{width:var(--mega3)!important}.h-mega3{height:var(--mega3)!important}.m-mega3{margin:var(--mega3)!important}.mt-mega3{margin-top:var(--mega3)!important}.mb-mega3{margin-bottom:var(--mega3)!important}.ml-mega3{margin-left:var(--mega3)!important}.mr-mega3{margin-right:var(--mega3)!important}.mis-mega3{margin-inline-start:var(--mega3)!important}.mie-mega3{margin-inline-end:var(--mega3)!important}.p-mega3{padding:var(--mega3)!important}.pt-mega3{padding-top:var(--mega3)!important}.pb-mega3{padding-bottom:var(--mega3)!important}.pl-mega3{padding-left:var(--mega3)!important}.pr-mega3{padding-right:var(--mega3)!important}.pis-mega3{padding-inline-start:var(--mega3)!important}.pie-mega3{padding-inline-end:var(--mega3)!important}.w-giga1{width:var(--giga1)!important}.h-giga1{height:var(--giga1)!important}.m-giga1{margin:var(--giga1)!important}.mt-giga1{margin-top:var(--giga1)!important}.mb-giga1{margin-bottom:var(--giga1)!important}.ml-giga1{margin-left:var(--giga1)!important}.mr-giga1{margin-right:var(--giga1)!important}.mis-giga1{margin-inline-start:var(--giga1)!important}.mie-giga1{margin-inline-end:var(--giga1)!important}.p-giga1{padding:var(--giga1)!important}.pt-giga1{padding-top:var(--giga1)!important}.pb-giga1{padding-bottom:var(--giga1)!important}.pl-giga1{padding-left:var(--giga1)!important}.pr-giga1{padding-right:var(--giga1)!important}.pis-giga1{padding-inline-start:var(--giga1)!important}.pie-giga1{padding-inline-end:var(--giga1)!important}.w-giga2{width:var(--giga2)!important}.h-giga2{height:var(--giga2)!important}.m-giga2{margin:var(--giga2)!important}.mt-giga2{margin-top:var(--giga2)!important}.mb-giga2{margin-bottom:var(--giga2)!important}.ml-giga2{margin-left:var(--giga2)!important}.mr-giga2{margin-right:var(--giga2)!important}.mis-giga2{margin-inline-start:var(--giga2)!important}.mie-giga2{margin-inline-end:var(--giga2)!important}.p-giga2{padding:var(--giga2)!important}.pt-giga2{padding-top:var(--giga2)!important}.pb-giga2{padding-bottom:var(--giga2)!important}.pl-giga2{padding-left:var(--giga2)!important}.pr-giga2{padding-right:var(--giga2)!important}.pis-giga2{padding-inline-start:var(--giga2)!important}.pie-giga2{padding-inline-end:var(--giga2)!important}.w-giga3{width:var(--giga3)!important}.h-giga3{height:var(--giga3)!important}.m-giga3{margin:var(--giga3)!important}.mt-giga3{margin-top:var(--giga3)!important}.mb-giga3{margin-bottom:var(--giga3)!important}.ml-giga3{margin-left:var(--giga3)!important}.mr-giga3{margin-right:var(--giga3)!important}.mis-giga3{margin-inline-start:var(--giga3)!important}.mie-giga3{margin-inline-end:var(--giga3)!important}.p-giga3{padding:var(--giga3)!important}.pt-giga3{padding-top:var(--giga3)!important}.pb-giga3{padding-bottom:var(--giga3)!important}.pl-giga3{padding-left:var(--giga3)!important}.pr-giga3{padding-right:var(--giga3)!important}.pis-giga3{padding-inline-start:var(--giga3)!important}.pie-giga3{padding-inline-end:var(--giga3)!important}.w-tera1{width:var(--tera1)!important}.h-tera1{height:var(--tera1)!important}.m-tera1{margin:var(--tera1)!important}.mt-tera1{margin-top:var(--tera1)!important}.mb-tera1{margin-bottom:var(--tera1)!important}.ml-tera1{margin-left:var(--tera1)!important}.mr-tera1{margin-right:var(--tera1)!important}.mis-tera1{margin-inline-start:var(--tera1)!important}.mie-tera1{margin-inline-end:var(--tera1)!important}.p-tera1{padding:var(--tera1)!important}.pt-tera1{padding-top:var(--tera1)!important}.pb-tera1{padding-bottom:var(--tera1)!important}.pl-tera1{padding-left:var(--tera1)!important}.pr-tera1{padding-right:var(--tera1)!important}.pis-tera1{padding-inline-start:var(--tera1)!important}.pie-tera1{padding-inline-end:var(--tera1)!important}.w-tera2{width:var(--tera2)!important}.h-tera2{height:var(--tera2)!important}.m-tera2{margin:var(--tera2)!important}.mt-tera2{margin-top:var(--tera2)!important}.mb-tera2{margin-bottom:var(--tera2)!important}.ml-tera2{margin-left:var(--tera2)!important}.mr-tera2{margin-right:var(--tera2)!important}.mis-tera2{margin-inline-start:var(--tera2)!important}.mie-tera2{margin-inline-end:var(--tera2)!important}.p-tera2{padding:var(--tera2)!important}.pt-tera2{padding-top:var(--tera2)!important}.pb-tera2{padding-bottom:var(--tera2)!important}.pl-tera2{padding-left:var(--tera2)!important}.pr-tera2{padding-right:var(--tera2)!important}.pis-tera2{padding-inline-start:var(--tera2)!important}.pie-tera2{padding-inline-end:var(--tera2)!important}.w-tera3{width:var(--tera3)!important}.h-tera3{height:var(--tera3)!important}.m-tera3{margin:var(--tera3)!important}.mt-tera3{margin-top:var(--tera3)!important}.mb-tera3{margin-bottom:var(--tera3)!important}.ml-tera3{margin-left:var(--tera3)!important}.mr-tera3{margin-right:var(--tera3)!important}.mis-tera3{margin-inline-start:var(--tera3)!important}.mie-tera3{margin-inline-end:var(--tera3)!important}.p-tera3{padding:var(--tera3)!important}.pt-tera3{padding-top:var(--tera3)!important}.pb-tera3{padding-bottom:var(--tera3)!important}.pl-tera3{padding-left:var(--tera3)!important}.pr-tera3{padding-right:var(--tera3)!important}.pis-tera3{padding-inline-start:var(--tera3)!important}.pie-tera3{padding-inline-end:var(--tera3)!important}}@layer helpers{.font-text{font-family:var(--text)!important}.font-display{font-family:var(--display)!important}.font-mono{font-family:var(--mono)!important}.font-italic{font-style:italic!important}.font-normal{font-style:normal!important}.font-extra-light{font-weight:var(--extra-light)!important}.font-light{font-weight:var(--light)!important}.font-book{font-weight:var(--book)!important}.font-semi-bold{font-weight:var(--semi-bold)!important}.font-bold{font-weight:var(--bold)!important}.font-black{font-weight:var(--black)!important}.text-xs{font-size:var(--text-xs)!important}.text-sm{font-size:var(--text-sm)!important}.text-md{font-size:var(--text-md)!important}.text-lg{font-size:var(--text-lg)!important}.text-xl{font-size:var(--text-xl)!important}.display-sm{font-size:var(--display-sm)!important}.display-md{font-size:var(--display-md)!important}.display-lg{font-size:var(--display-lg)!important}.display-xl{font-size:var(--display-xl)!important}.display-mega{font-size:var(--display-mega)!important}.display-giga{font-size:var(--display-giga)!important}.tracking-sm{letter-spacing:var(--tracking-sm)!important}.tracking-md{letter-spacing:var(--tracking-md)!important}.tracking-lg{letter-spacing:var(--tracking-lg)!important}.tracking-xl{letter-spacing:var(--tracking-xl)!important}.tracking-xxl{letter-spacing:var(--tracking-xxl)!important}.leading-xs{line-height:var(--leading-xs)!important}.leading-sm{line-height:var(--leading-sm)!important}.leading-md{line-height:var(--leading-md)!important}.leading-lg{line-height:var(--leading-lg)!important}.leading-xl{line-height:var(--leading-xl)!important}.leading-xxl{line-height:var(--leading-xxl)!important}.text-left{text-align:left!important}.text-center{text-align:center!important}.text-right{text-align:right!important}.text-justify{text-align:justify!important}.text-start{text-align:start!important}.text-end{text-align:end!important}.text-uppercase{text-transform:uppercase!important}.text-lowercase{text-transform:lowercase!important}.text-capitalize{text-transform:capitalize!important}}@layer theme.default{:root{--xs1: 4px;--xs2: 8px;--xs3: 12px;--sm1: 16px;--sm2: 20px;--sm3: 24px;--md1: 28px;--md2: 32px;--md3: 36px;--lg1: 40px;--lg2: 44px;--lg3: 48px;--xl1: 56px;--xl2: 64px;--xl3: 80px;--xxl1: 96px;--xxl2: 112px;--xxl3: 128px;--mega1: 160px;--mega2: 192px;--mega3: 224px;--giga1: 256px;--giga2: 288px;--giga3: 320px;--tera1: 384px;--tera2: 480px;--tera3: 520px;--ar-square: 1;--ar-landscape: 4/3;--ar-portrait: 3/4;--ar-widescreen: 16/9;--ar-golden: 1.618/1;--display: Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, ui-sans-serif, sans-serif;--text: ui-sans-serif, system-ui, sans-serif;--mono: Dank Mono, Inconsolata, Fira Mono, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, ui-monospace, monospace;--text-xs: .694rem;--text-sm: .833rem;--text-md: 1rem;--text-lg: 1.2rem;--text-xl: 1.44rem;--display-sm: 1.728rem;--display-md: 2.074rem;--display-lg: 2.488rem;--display-xl: 2.986rem;--display-mega: 3.583rem;--display-giga: 4.299rem;--extra-light: 200;--light: 300;--book: 400;--semi-bold: 600;--bold: 700;--black: 900;--tracking-sm: -.05em;--tracking-md: .025em;--tracking-lg: .05em;--tracking-xl: .075em;--tracking-xxl: .15em;--leading-xs: 1;--leading-sm: 1.15;--leading-md: 1.375;--leading-lg: 1.5;--leading-xl: 1.75;--leading-xxl: 2;--base-0: #fff;--base-50: #f6f7f9;--base-100: #edeef1;--base-200: #d6dbe1;--base-300: #b2bbc7;--base-400: #8897a8;--base-500: #697a8e;--base-600: #546375;--base-700: #4a5666;--base-800: #3c4550;--base-900: #353c45;--base-950: #23282e;--primary-50: #f0f9ff;--primary-100: #e0f2fe;--primary-200: #bae6fd;--primary-300: #7dd3fc;--primary-400: #38bdf8;--primary-500: #0ea5e9;--primary-600: #0284c7;--primary-700: #0369a1;--primary-800: #075985;--primary-900: #0c4a6e;--primary-950: #082f49;--yes-100: #d5f6e8;--yes-200: #afebd4;--yes-300: #7adbbd;--yes-400: #46c4a0;--yes-500: #13886d;--no-100: #ffe4e6;--no-200: #fecdd3;--no-300: #fda4af;--no-400: #fb7185;--no-500: #e11d48;--maybe-100: #fff7d6;--maybe-200: #fff0b3;--maybe-300: #ffd64a;--maybe-400: #ffc220;--maybe-500: #f9a007;--highlight-500: #ffee00;--border-sm: 1px;--border-md: 2px;--border-lg: 4px;--border-xl: 8px;--border-xxl: 12px;--radius-sm: 3px;--radius-md: 5px;--radius-lg: 8px;--radius-xl: 12px;--radius-xxl: 16px;--radius-round: 1e5px;--shadow-sm: 0 1px 3px 0 var(--ui-shadow-color), 0 1px 2px -1px var(--ui-shadow-color);--shadow-md: 0 4px 6px -1px var(--ui-shadow-color), 0 2px 4px -2px var(--ui-shadow-color);--shadow-lg: 0 8px 13px -3px var(--ui-shadow-color), 0 4px 6px -4px var(--ui-shadow-color);--shadow-xl: 0 20px 20px -5px var(--ui-shadow-color), 0 8px 10px -6px var(--ui-shadow-color);--shadow-xxl: 0px 11px 8px -6px var(--ui-shadow-color), 0 10px 15px 2px var(--ui-shadow-color);--o-0: 0;--o-1: .2;--o-2: .4;--o-3: .6;--o-4: .8;--o-5: 1;--z-bottom: -1000000000;--z-0: 0;--z-1: 10;--z-2: 20;--z-3: 30;--z-4: 40;--z-5: 50;--z-top: 1000000000;--transition: .22s ease-in-out;--transition-fast: .1s ease-in-out}}@layer theme.default{:root{color-scheme:light dark;--ui-border-color: light-dark(var(--base-200), var(--base-500));--ui-shadow-color: light-dark(rgb(0 0 0 / .1), rgb(0 0 0 / .6));--focus-ring-color: light-dark(var(--primary-500), var(--primary-400));--focus-ring-width: 2px;--focus-ring-offset: 2px;--success-100: var(--yes-100);--success-200: var(--yes-200);--success-300: var(--yes-300);--success-400: var(--yes-400);--success-500: var(--yes-500);--danger-100: var(--no-100);--danger-200: var(--no-200);--danger-300: var(--no-300);--danger-400: var(--no-400);--danger-500: var(--no-500);--warning-100: var(--maybe-100);--warning-200: var(--maybe-200);--warning-300: var(--maybe-300);--warning-400: var(--maybe-400);--warning-500: var(--maybe-500)}:root.theme-light{color-scheme:light}:root.theme-dark{color-scheme:dark}:root{accent-color:var(--primary-500);--body-background-color: light-dark(var(--base-0), var(--base-950));--body-line-height: var(--leading-lg);--input-height: var(--md3);--input-padding: var(--xs3);--input-border-width: var(--border-sm);--input-border-color: var(--ui-border-color);--input-border-radius: var(--radius-md);--input-border-color-invalid: light-dark( var(--danger-500), var(--danger-400) );--label-spacing: var(--xs1);--fieldset-padding: var(--sm3);--fieldset-border-width: var(--border-sm);--fieldset-border-color: var(--ui-border-color);--fieldset-border-radius: var(--radius-lg);--meter-height: var(--sm1);--meter-border-radius: var(--radius-md);--meter-track-color: var(--primary-100);--meter-low-color: var(--danger-400);--meter-medium-color: var(--warning-400);--meter-high-color: var(--success-400);--progress-height: var(--sm1);--progress-color: var(--primary-500);--progress-track-color: var(--primary-100);--progress-border-radius: var(--radius-md);--select-icon-size: var(--sm3);--select-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");--dialog-min-width: var(--tera1);--dialog-max-width: var(--tera3);--dialog-padding: var(--lg1) var(--md1);--dialog-border-width: var(--border-sm);--dialog-border-color: light-dark(var(--base-200), var(--base-800));--dialog-background-color: light-dark(var(--base-50), var(--base-900));--dialog-border-radius: var(--radius-lg);--dialog-backdrop-color: var(--base-950);--dialog-backdrop-opacity: var(--o-4);--details-padding: var(--sm1);--details-spacing: var(--xs3);--details-border-width: var(--border-sm);--details-border-color: light-dark(var(--base-200), var(--base-800));--details-background-color: light-dark(var(--base-50), var(--base-900));--details-border-radius: var(--radius-lg);--details-icon-size: var(--sm3);--details-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");--table-padding: var(--xs2) var(--sm1);--table-border-width: var(--border-sm);--table-border-color: light-dark(var(--base-100), var(--base-700));--table-border-radius: var(--radius-md);--table-background-color: none;--table-caption-spacing: var(--xs3);--figcaption-spacing: var(--xs2);--heading-font: var(--display);--heading-weight: var(--black);--heading-letter-spacing: normal;--heading-font-size-h1: clamp( var(--display-md), 1.269rem + 2.682vw, var(--display-xl) );--heading-font-size-h2: clamp( var(--display-sm), 1.057rem + 2.235vw, var(--display-lg) );--heading-font-size-h3: clamp( var(--text-xl), .881rem + 1.865vw, var(--display-md) );--heading-font-size-h4: clamp( var(--text-lg), .734rem + 1.553vw, var(--display-sm) );--heading-font-size-h5: clamp( var(--text-lg), .988rem + .706vw, var(--text-xl) );--heading-font-size-h6: clamp( var(--text-md), .824rem + .588vw, var(--text-lg) );--heading-line-height: var(--leading-sm);--heading-line-height-h1: var(--heading-line-height);--heading-line-height-h2: var(--heading-line-height);--heading-line-height-h3: var(--heading-line-height);--heading-line-height-h4: var(--leading-md);--heading-line-height-h5: var(--leading-md);--heading-line-height-h6: var(--leading-md);--heading-spacing-h1: .4em;--heading-spacing-h2: .4em;--heading-spacing-h3: .4em;--heading-spacing-h4: .4em;--heading-spacing-h5: .4em;--heading-spacing-h6: .4em;--heading-spacing-consecutive: .3em;--text-color: light-dark(var(--base-950), var(--base-200));--link-font-weight: var(--semi-bold);--link-color: light-dark(var(--primary-600), var(--primary-400));--link-color-hover: var(--primary-500);--text-code-color: light-dark(var(--primary-600), var(--primary-400));--text-code-background-color: light-dark( var(--primary-100), var(--primary-900) );--text-code-muted-color: light-dark(var(--base-500), var(--base-300));--pre-border-radius: var(--radius-md);--pre-font-size: .9rem;--blockquote-padding-block: var(--sm1);--blockquote-padding-inline: var(--md1) var(--sm3);--blockquote-background-color: light-dark( var(--primary-50), var(--primary-900) );--blockquote-border-radius: var(--radius-md);--blockquote-accent-width: var(--xs2);--blockquote-accent-color: linear-gradient( var(--primary-800), var(--primary-500) );--hr-content: "";--ins-color: var(--base-950);--ins-background-color: var(--success-200);--marker-color: var(--highlight-500);--selection-color: light-dark(var(--base-950), var(--base-0));--selection-background-color: light-dark( var(--primary-200), var(--primary-700) )}:root{--grid-column-gap: var(--sm1);--grid-row-gap: var(--sm1);@media(width>=768px){--grid-column-gap: var(--sm3);--grid-row-gap: var(--sm3)}--wrap-spacing: var(--sm1);--wrap-md-spacing: var(--sm3);--wrap-lg-spacing: 0;--wrap-width-sm: minmax(0, 55ch);--wrap-width-md: minmax(0, 70ch);--wrap-width-lg: minmax(0, 900px);--wrap-width: var(--wrap-width-md);--layout-content-width: 70ch;--layout-aside-width: 245px;--layout-toc-width: 1fr;--prose-spacing: var(--sm1)}:root{--badge-font-size: var(--text-sm);--badge-border-radius: var(--radius-md);--badge-color: var(--base-0);--badge-background-color: light-dark(var(--base-700), var(--base-600));--badge-primary-color: var(--base-0);--badge-primary-background-color: light-dark( var(--primary-600), var(--primary-500) );--badge-success-color: light-dark(var(--success-500), var(--base-0));--badge-success-background-color: light-dark( var(--success-100), var(--success-500) );--badge-danger-color: light-dark(var(--danger-500), var(--base-0));--badge-danger-background-color: light-dark( var(--danger-100), var(--danger-500) );--badge-warning-color: light-dark(var(--warning-500), var(--base-950));--badge-warning-background-color: light-dark( var(--warning-100), var(--warning-500) )}:root{--bt-min-width: 101px;--bt-min-width-md: 123px;--bt-min-width-lg: 133px;--bt-font-size: var(--text-sm);--bt-font-size-lg: var(--text-md);--bt-font-weight: var(--semi-bold);--bt-color: var(--text-color);--bt-color-hover: light-dark(var(--text-color), var(--base-0));--bt-background-color: light-dark(var(--base-0), var(--base-800));--bt-background-color-hover: light-dark(var(--base-50), var(--base-900));--bt-border-color: var(--ui-border-color);--bt-border-width: var(--border-sm);--bt-border-radius: var(--radius-lg);--bt-border-radius-lg: var(--radius-xl);--bt-outline-color-hover: light-dark(var(--base-950), var(--base-0));--bt-outline-background-color-hover: light-dark( rgb(0 0 0 / .1), rgb(255 255 255 / .1) );--bt-outline-border-color: light-dark(var(--base-950), var(--base-0));--bt-outline-border-color-hover: light-dark(var(--base-950), var(--base-0));--bt-primary-color: var(--base-0);--bt-primary-color-hover: var(--base-0);--bt-primary-background-color: var(--primary-600);--bt-primary-background-color-hover: var(--primary-500);--bt-primary-border-color: var(--primary-600);--bt-primary-border-color-hover: var(--primary-600)}:root{--avatar-color: var(--base-0);--avatar-background-color: var(--base-400);--avatar-border-color: light-dark(var(--base-0), var(--base-500));--avatar-border-width: var(--border-sm);--avatar-radius: var(--radius-round);--avatar-status-dot-color-offline: var(--base-300);--avatar-status-dot-color-online: var(--yes-400)}:root{--banner-color: var(--base-0);--banner-background-color: light-dark(var(--primary-600), var(--primary-800))}:root{--breadcrumbs-separator: "/";--breadcrumbs-separator-color: light-dark(var(--base-300), var(--base-600));--breadcrumbs-color: light-dark(var(--base-500), var(--base-400));--breadcrumbs-color-current: var(--text-color)}:root{--card-spacing: var(--sm3);--card-color: var(--text-color);--card-secondary-text-color: light-dark(var(--base-400), var(--base-500));--card-bg-color: light-dark(var(--base-100), var(--base-900));--card-border-radius: var(--radius-lg);--card-border-color: var(--ui-border-color);--card-border-width: var(--border-sm);--card-shadow: var(--shadow-md);--card-shadow-hover: var(--shadow-xl);--card-loading-bg: light-dark(var(--base-200), var(--base-900));--card-aspect-ratio: var(--ar-golden)}:root{--toggle-width: 50px;--toggle-height: 28px;--toggle-border-width: 2px;--toggle-track-color: light-dark(var(--base-300), var(--base-700));--toggle-track-color-checked: var(--yes-400);--toggle-thumb-color: var(--body-background-color)}:root{--faq-spacing: var(--xs3)}:root{--field-spacing: var(--xs1);--field-hint-color: light-dark(var(--base-400), var(--base-500));--field-error-color: light-dark(var(--danger-500), var(--danger-300));--field-message-position: static}:root{--featureItem-icon-box-size: var(--lg3);--featureItem-icon-size: var(--sm3);--featureItem-icon-color: light-dark(var(--primary-600), var(--primary-300));--featureItem-icon-background-color: light-dark( var(--primary-100), var(--primary-900) );--featureItem-icon-border-radius: var(--radius-lg)}:root{--footer-background-color: light-dark(var(--primary-950), var(--base-950));--footer-text-color: light-dark(var(--base-0), var(--base-200));--footer-border-width: var(--border-md);--footer-border-color: light-dark(transparent, var(--base-700));--footer-link-color: light-dark(var(--base-0), var(--base-200));--footer-link-color-hover: light-dark(var(--primary-200), var(--base-0))}:root{--header-height: var(--xl1);--header-padding: var(--sm1);@media(width>=768px){--header-height: var(--xl2);--header-padding: var(--sm3)}--header-background-color: light-dark(var(--base-0), var(--base-950));--header-menu-background-color: var(--base-950);--header-menu-color: var(--base-0);--header-menu-color-current: var(--primary-400);--header-menu-secondary-color: var(--base-300);--header-menu-border-color: var(--base-500)}:root{--hero-radius: var(--radius-xl);--hero-content-padding: var(--md3);--hero-actions-spacing: var(--lg3);--hero-pagination-dot: var(--sm1);--hero-pagination-dot-color: var(--base-0);--hero-pagination-dot-active-color: var(--primary-600);--hero-pagination-opacity: var(--o-4)}:root{--pagination-size: var(--md3);--pagination-border-radius: var(--radius-md);--pagination-color: var(--text-color);--pagination-color-current: var(--base-0);--pagination-background-color-current: light-dark( var(--primary-600), var(--primary-500) );--pagination-background-color-hover: light-dark( var(--base-100), var(--base-800) )}:root{--prevNext-border-color: var(--ui-border-color);--prevNext-border-radius: var(--radius-lg);--prevNext-border-color-hover: var(--link-color);--prevNext-label-color: light-dark(var(--base-400), var(--base-500))}:root{--notice-spacing: var(--sm1);--notice-text-color: light-dark(var(--base-950), var(--base-0));--notice-background-color: light-dark(var(--base-50), var(--base-800));--notice-border-color: light-dark(var(--base-200), var(--base-500));--notice-border-width: var(--border-sm);--notice-border-radius: var(--radius-lg)}:root{--pricingCard-highlight-border-color: light-dark( var(--primary-600), var(--primary-400) );--pricingCard-check-color: light-dark(var(--success-500), var(--success-400))}:root{--readProgressBar-height: var(--xs1);--readProgressBar-color: linear-gradient( 90deg, var(--primary-600) 0%, var(--primary-400) 100% )}:root{--section-spacing: var(--xl3);--section-header-spacing: var(--lg3);--section-eyebrow-color: light-dark(var(--primary-600), var(--primary-400));--section-lede-color: light-dark(var(--base-500), var(--base-400));--section-filled-background-color: light-dark( var(--base-50), var(--base-900) );--section-primary-background-color: light-dark( var(--primary-600), var(--primary-900) );--section-primary-text-color: var(--base-0);--section-primary-link-color: var(--primary-100);--section-primary-link-color-hover: var(--base-0);--section-primary-eyebrow-color: var(--primary-200);--section-primary-lede-color: var(--primary-100)}:root{--testimonial-role-color: light-dark(var(--base-400), var(--base-500))}:root{--tags-padding: var(--xs2);--tags-font-size: var(--text-sm);--tags-color: light-dark(var(--base-500), var(--base-400));--tags-background-color: light-dark(var(--base-100), var(--base-800));--tags-background-color-hover: light-dark(var(--base-200), var(--base-950));--tags-radius: var(--radius-md)}:root{--toc-color: var(--link-color);--toc-color-hover: var(--link-color-hover);--toc-spacing: var(--xs1);--toc-indentation: var(--xs3);--toc-icon-size: var(--sm1)}} +@layer base,elements,global,components,theme.default,theme.user,helpers;@layer base,elements,global,components,theme.default,theme.user,helpers;@layer base{*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion:reduce){*,:before,:after{animation-delay:-1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}}:where(:not(dialog)){margin:0}html,body{min-height:100%}}@layer elements{body{line-sizing:normal;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;background-color:var(--body-background-color);color:var(--text-color);font-family:var(--text);line-height:var(--body-line-height);&:has(.body-is-locked){overflow:hidden}}}@layer elements{::selection{color:var(--selection-color);background-color:var(--selection-background-color)}:where(a,u,ins,abbr){text-underline-offset:2px}a{font-weight:var(--link-font-weight);color:var(--link-color);&:where(:hover){color:var(--link-color-hover);-webkit-text-decoration:none;text-decoration:none}}address{width:max-content;max-width:100%;padding:var(--sm1) var(--sm3);font-style:normal;background-color:light-dark(var(--base-50),var(--base-900));border:var(--xs2) solid transparent;border-image:8 repeating-linear-gradient(-45deg,var(--no-500) 0,var(--no-500) var(--xs2),transparent 0,transparent calc(var(--xs2) * 2),var(--primary-500) 0,var(--primary-500) calc(var(--xs2) * 3),transparent 0,transparent calc(var(--xs2) * 4))}abbr{position:relative;cursor:help;&:after{position:relative;top:calc(var(--xs1) * -1);width:var(--sm1);height:var(--sm1);display:inline-block;content:"";background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='circle-help'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M9.09%209a3%203%200%200%201%205.83%201c0%202-3%203-3%203'/%3E%3Cpath%20d='M12%2017h.01'/%3E%3C/svg%3E");background-size:contain}&:hover:before{width:max-content;max-width:400px;position:absolute;left:50%;padding:var(--xs1) var(--xs3);content:attr(title);color:var(--base-0);background-color:var(--base-900);opacity:var(--o-4);border-radius:var(--radius-sm);transform:translate(-50%,-2em)}}blockquote{position:relative;margin-bottom:var(--prose-spacing);padding-block:var(--blockquote-padding-block);padding-inline:var(--blockquote-padding-inline);font-style:italic;background-color:var(--blockquote-background-color);border-radius:var(--blockquote-border-radius);&:before{content:"";position:absolute;top:0;inset-inline-start:0;width:var(--blockquote-accent-width);height:100%;border-start-start-radius:var(--blockquote-border-radius);border-end-start-radius:var(--blockquote-border-radius);background:var(--blockquote-accent-color)}p{&:first-child:before{content:open-quote}&:last-child{margin-bottom:0;&:after{content:close-quote}}}}cite{font-style:italic}code,var,kbd{font-family:var(--mono);font-size:.9em;font-style:normal;color:var(--text-code-muted-color)}:is(code,var,kbd):not(h1 *,h2 *,h3 *,h4 *,h5 *,h6 *,pre *){padding:.15em .3em;color:var(--text-code-color);background-color:var(--text-code-background-color);border-radius:var(--radius-sm)}dt{font-weight:var(--bold)}dd+dt{margin-top:.5em}del{text-decoration-color:var(--no-500);text-decoration-style:wavy}h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{overflow-wrap:break-word;text-wrap:balance}h1,.h1,h2,.h2,h3,.h3,h4,.h4{font-family:var(--heading-font);font-weight:var(--heading-weight);letter-spacing:var(--heading-letter-spacing)}h1,.h1{margin-bottom:var(--heading-spacing-h1);font-size:var(--heading-font-size-h1);line-height:var(--heading-line-height-h1)}h2,.h2{margin-bottom:var(--heading-spacing-h2);font-size:var(--heading-font-size-h2);line-height:var(--heading-line-height-h2)}h3,.h3{margin-bottom:var(--heading-spacing-h3);font-size:var(--heading-font-size-h3);line-height:var(--heading-line-height-h3)}h4,.h4{margin-bottom:var(--heading-spacing-h4);font-size:var(--heading-font-size-h4);line-height:var(--heading-line-height-h4)}h5,.h5{margin-bottom:var(--heading-spacing-h5);font-size:var(--heading-font-size-h5);line-height:var(--heading-line-height-h5)}h6,.h6{margin-bottom:var(--heading-spacing-h6);font-size:var(--heading-font-size-h6);line-height:var(--heading-line-height-h6)}:where(h1,h2,h3):has(+:is(h2,h3,h4)){margin-bottom:var(--heading-spacing-consecutive)}hr{display:flex;justify-content:center;align-items:center;height:0;border-style:solid;border-width:var(--border-sm) 0 0;color:var(--ui-border-color);overflow:visible;&:after{content:var(--hr-content);padding:0 var(--xs1);line-height:1;letter-spacing:var(--tracking-sm);background-color:var(--body-background-color)}}:where(hr):has(+:is(p)){margin-bottom:var(--prose-spacing)}ins{padding:.15em .3em;color:var(--ins-color);background-color:var(--ins-background-color);border-radius:var(--radius-sm);-webkit-text-decoration:none;text-decoration:none;&:before{content:"+ "}}mark{padding:.15em .5em;background:var(--marker-color);border-radius:1em 0}:where(ol,ul){list-style-type:none;padding:0}pre{font-family:var(--mono);font-size:var(--pre-font-size);white-space:pre-wrap;border-radius:var(--pre-border-radius)}q{font-style:italic}s{text-decoration-color:light-dark(var(--base-950),var(--base-50));text-decoration-style:wavy}sub,sup{line-height:1}}@layer elements{:root{quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(af),:not(:lang(af))>:lang(af){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ak),:not(:lang(ak))>:lang(ak){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(asa),:not(:lang(asa))>:lang(asa){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(az),:not(:lang(az))>:lang(az){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(bem),:not(:lang(bem))>:lang(bem){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(bez),:not(:lang(bez))>:lang(bez){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(bn),:not(:lang(bn))>:lang(bn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(brx),:not(:lang(brx))>:lang(brx){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(cgg),:not(:lang(cgg))>:lang(cgg){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(chr),:not(:lang(chr))>:lang(chr){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(cy),:not(:lang(cy))>:lang(cy){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(da),:not(:lang(da))>:lang(da){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(dav),:not(:lang(dav))>:lang(dav){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(dje),:not(:lang(dje))>:lang(dje){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(dz),:not(:lang(dz))>:lang(dz){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ebu),:not(:lang(ebu))>:lang(ebu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ee),:not(:lang(ee))>:lang(ee){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(en),:not(:lang(en))>:lang(en){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(fil),:not(:lang(fil))>:lang(fil){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(fo),:not(:lang(fo))>:lang(fo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ga),:not(:lang(ga))>:lang(ga){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(gd),:not(:lang(gd))>:lang(gd){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(gl),:not(:lang(gl))>:lang(gl){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(gu),:not(:lang(gu))>:lang(gu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(guz),:not(:lang(guz))>:lang(guz){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ha),:not(:lang(ha))>:lang(ha){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(hi),:not(:lang(hi))>:lang(hi){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(id),:not(:lang(id))>:lang(id){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ig),:not(:lang(ig))>:lang(ig){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(jmc),:not(:lang(jmc))>:lang(jmc){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kam),:not(:lang(kam))>:lang(kam){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kde),:not(:lang(kde))>:lang(kde){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kea),:not(:lang(kea))>:lang(kea){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(khq),:not(:lang(khq))>:lang(khq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ki),:not(:lang(ki))>:lang(ki){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kln),:not(:lang(kln))>:lang(kln){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(km),:not(:lang(km))>:lang(km){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kn),:not(:lang(kn))>:lang(kn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ko),:not(:lang(ko))>:lang(ko){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ksb),:not(:lang(ksb))>:lang(ksb){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lg),:not(:lang(lg))>:lang(lg){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ln),:not(:lang(ln))>:lang(ln){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lo),:not(:lang(lo))>:lang(lo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lrc),:not(:lang(lrc))>:lang(lrc){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lu),:not(:lang(lu))>:lang(lu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(luo),:not(:lang(luo))>:lang(luo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lv),:not(:lang(lv))>:lang(lv){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mas),:not(:lang(mas))>:lang(mas){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mer),:not(:lang(mer))>:lang(mer){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mfe),:not(:lang(mfe))>:lang(mfe){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mgo),:not(:lang(mgo))>:lang(mgo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ml),:not(:lang(ml))>:lang(ml){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mn),:not(:lang(mn))>:lang(mn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mr),:not(:lang(mr))>:lang(mr){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ms),:not(:lang(ms))>:lang(ms){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mt),:not(:lang(mt))>:lang(mt){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(my),:not(:lang(my))>:lang(my){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(naq),:not(:lang(naq))>:lang(naq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(nd),:not(:lang(nd))>:lang(nd){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ne),:not(:lang(ne))>:lang(ne){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(nus),:not(:lang(nus))>:lang(nus){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(nyn),:not(:lang(nyn))>:lang(nyn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(pa),:not(:lang(pa))>:lang(pa){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(pt),:not(:lang(pt))>:lang(pt){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(rof),:not(:lang(rof))>:lang(rof){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(rwk),:not(:lang(rwk))>:lang(rwk){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(saq),:not(:lang(saq))>:lang(saq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(sbp),:not(:lang(sbp))>:lang(sbp){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(seh),:not(:lang(seh))>:lang(seh){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ses),:not(:lang(ses))>:lang(ses){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(si),:not(:lang(si))>:lang(si){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(so),:not(:lang(so))>:lang(so){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(sw),:not(:lang(sw))>:lang(sw){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ta),:not(:lang(ta))>:lang(ta){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(te),:not(:lang(te))>:lang(te){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(teo),:not(:lang(teo))>:lang(teo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(th),:not(:lang(th))>:lang(th){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(to),:not(:lang(to))>:lang(to){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(tr),:not(:lang(tr))>:lang(tr){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(twq),:not(:lang(twq))>:lang(twq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(tzm),:not(:lang(tzm))>:lang(tzm){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(uz-Cyrl),:not(:lang(uz-Cyrl))>:lang(uz-Cyrl){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vai),:not(:lang(vai))>:lang(vai){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vai-Latn),:not(:lang(vai-Latn))>:lang(vai-Latn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vi),:not(:lang(vi))>:lang(vi){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vun),:not(:lang(vun))>:lang(vun){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(xog),:not(:lang(xog))>:lang(xog){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(yo),:not(:lang(yo))>:lang(yo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(yue-Hans),:not(:lang(yue-Hans))>:lang(yue-Hans){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(zh),:not(:lang(zh))>:lang(zh){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(zu),:not(:lang(zu))>:lang(zu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(uz),:not(:lang(uz))>:lang(uz){quotes:"\201c" "\201d" "\2019" "\2018"}:root:lang(eu),:not(:lang(eu))>:lang(eu){quotes:"\201c" "\201d" "\201c" "\201d"}:root:lang(tk),:not(:lang(tk))>:lang(tk){quotes:"\201c" "\201d" "\201c" "\201d"}:root:lang(ar),:not(:lang(ar))>:lang(ar){quotes:"\201d" "\201c" "\2019" "\2018"}:root:lang(ur),:not(:lang(ur))>:lang(ur){quotes:"\201d" "\201c" "\2019" "\2018"}:root:lang(fi),:not(:lang(fi))>:lang(fi){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(he),:not(:lang(he))>:lang(he){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(lag),:not(:lang(lag))>:lang(lag){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(rn),:not(:lang(rn))>:lang(rn){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(sn),:not(:lang(sn))>:lang(sn){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(sv),:not(:lang(sv))>:lang(sv){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(sr),:not(:lang(sr))>:lang(sr){quotes:"\201e" "\201c" "\2018" "\2018"}:root:lang(sr-Latn),:not(:lang(sr-Latn))>:lang(sr-Latn){quotes:"\201e" "\201c" "\2018" "\2018"}:root:lang(bg),:not(:lang(bg))>:lang(bg){quotes:"\201e" "\201c" "\201e" "\201c"}:root:lang(lt),:not(:lang(lt))>:lang(lt){quotes:"\201e" "\201c" "\201e" "\201c"}:root:lang(bs-Cyrl),:not(:lang(bs-Cyrl))>:lang(bs-Cyrl){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(cs),:not(:lang(cs))>:lang(cs){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(de),:not(:lang(de))>:lang(de){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(dsb),:not(:lang(dsb))>:lang(dsb){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(et),:not(:lang(et))>:lang(et){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(hr),:not(:lang(hr))>:lang(hr){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(hsb),:not(:lang(hsb))>:lang(hsb){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(is),:not(:lang(is))>:lang(is){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(lb),:not(:lang(lb))>:lang(lb){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(luy),:not(:lang(luy))>:lang(luy){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(mk),:not(:lang(mk))>:lang(mk){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(sk),:not(:lang(sk))>:lang(sk){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(sl),:not(:lang(sl))>:lang(sl){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(ka),:not(:lang(ka))>:lang(ka){quotes:"\201e" "\201c" "\ab" "\bb"}:root:lang(bs),:not(:lang(bs))>:lang(bs){quotes:"\201e" "\201d" "\2018" "\2019"}:root:lang(agq),:not(:lang(agq))>:lang(agq){quotes:"\201e" "\201d" "\201a" "\2019"}:root:lang(ff),:not(:lang(ff))>:lang(ff){quotes:"\201e" "\201d" "\201a" "\2019"}:root:lang(nmg),:not(:lang(nmg))>:lang(nmg){quotes:"\201e" "\201d" "\ab" "\bb"}:root:lang(ro),:not(:lang(ro))>:lang(ro){quotes:"\201e" "\201d" "\ab" "\bb"}:root:lang(pl),:not(:lang(pl))>:lang(pl){quotes:"\201e" "\201d" "\ab" "\bb"}:root:lang(hu),:not(:lang(hu))>:lang(hu){quotes:"\201e" "\201d" "\bb" "\ab"}:root:lang(nl),:not(:lang(nl))>:lang(nl){quotes:"\2018" "\2019" "\201c" "\201d"}:root:lang(ti-ER),:not(:lang(ti-ER))>:lang(ti-ER){quotes:"\2018" "\2019" "\201c" "\201d"}:root:lang(dua),:not(:lang(dua))>:lang(dua){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(ksf),:not(:lang(ksf))>:lang(ksf){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(rw),:not(:lang(rw))>:lang(rw){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(nn),:not(:lang(nn))>:lang(nn){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(nb),:not(:lang(nb))>:lang(nb){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(ast),:not(:lang(ast))>:lang(ast){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(bm),:not(:lang(bm))>:lang(bm){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(br),:not(:lang(br))>:lang(br){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(ca),:not(:lang(ca))>:lang(ca){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(dyo),:not(:lang(dyo))>:lang(dyo){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(el),:not(:lang(el))>:lang(el){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(es),:not(:lang(es))>:lang(es){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(ewo),:not(:lang(ewo))>:lang(ewo){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(mg),:not(:lang(mg))>:lang(mg){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(mua),:not(:lang(mua))>:lang(mua){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(sg),:not(:lang(sg))>:lang(sg){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(it),:not(:lang(it))>:lang(it){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(kab),:not(:lang(kab))>:lang(kab){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(kk),:not(:lang(kk))>:lang(kk){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(pt-PT),:not(:lang(pt-PT))>:lang(pt-PT){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(nnh),:not(:lang(nnh))>:lang(nnh){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(sq),:not(:lang(sq))>:lang(sq){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(bas),:not(:lang(bas))>:lang(bas){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(be),:not(:lang(be))>:lang(be){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(ky),:not(:lang(ky))>:lang(ky){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(sah),:not(:lang(sah))>:lang(sah){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(ru),:not(:lang(ru))>:lang(ru){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(uk),:not(:lang(uk))>:lang(uk){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(zgh),:not(:lang(zgh))>:lang(zgh){quotes:"\ab" "\bb" "\201e" "\201d"}:root:lang(shi),:not(:lang(shi))>:lang(shi){quotes:"\ab" "\bb" "\201e" "\201d"}:root:lang(shi-Latn),:not(:lang(shi-Latn))>:lang(shi-Latn){quotes:"\ab" "\bb" "\201e" "\201d"}:root:lang(am),:not(:lang(am))>:lang(am){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(az-Cyrl),:not(:lang(az-Cyrl))>:lang(az-Cyrl){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(fa),:not(:lang(fa))>:lang(fa){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(fr-CH),:not(:lang(fr-CH))>:lang(fr-CH){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(gsw),:not(:lang(gsw))>:lang(gsw){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(jgo),:not(:lang(jgo))>:lang(jgo){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(kkj),:not(:lang(kkj))>:lang(kkj){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(mzn),:not(:lang(mzn))>:lang(mzn){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(fr),:not(:lang(fr))>:lang(fr){quotes:"\ab" "\bb" "\ab" "\bb"}:root:lang(hy),:not(:lang(hy))>:lang(hy){quotes:"\ab" "\bb" "\ab" "\bb"}:root:lang(yav),:not(:lang(yav))>:lang(yav){quotes:"\ab" "\bb" "\ab" "\bb"}:root:lang(ja),:not(:lang(ja))>:lang(ja){quotes:"\300c" "\300d" "\300e" "\300f"}:root:lang(yue),:not(:lang(yue))>:lang(yue){quotes:"\300c" "\300d" "\300e" "\300f"}:root:lang(zh-Hant),:not(:lang(zh-Hant))>:lang(zh-Hant){quotes:"\300c" "\300d" "\300e" "\300f"}}@layer elements{audio,canvas,embed,iframe,img,object,picture,svg,video{display:block;vertical-align:middle;max-width:100%}img,svg,video,canvas{height:auto}audio{width:100%;max-width:var(--tera1)}audio:not([controls]){display:none}figcaption{font-style:italic;font-size:var(--text-sm)}figure{&:has(*+figcaption){figcaption{margin-top:var(--figcaption-spacing)}}&:has(figcaption+*){figcaption{margin-bottom:var(--figcaption-spacing)}}}iframe{border:var(--border-sm) solid var(--ui-border-color)}}@layer elements{caption{caption-side:bottom;margin-top:var(--table-caption-spacing);font-size:var(--text-sm)}table{border-spacing:0;border:var(--table-border-width) solid var(--table-border-color);border-radius:var(--table-border-radius);background-color:var(--table-background-color)}th,td{text-align:start;padding:var(--table-padding);border-bottom:var(--table-border-width) solid var(--table-border-color);border-inline-start:var(--table-border-width) solid var(--table-border-color)}tr{th:first-child,td:first-child{border-inline-start-width:0}}tbody{tr:last-child{th,td{border-bottom-width:0}}}tfoot{th,td{border-top:var(--table-border-width) solid var(--table-border-color);border-bottom-width:0}}}@layer elements{::placeholder{opacity:var(--o-4)}input,button,textarea,select{font:inherit;color:var(--text-color)}button{color:var(--text-color)}fieldset{border:var(--fieldset-border-width) solid var(--fieldset-border-color);border-radius:var(--fieldset-border-radius);padding:var(--fieldset-padding);ul:has([type=checkbox],[type=radio]){padding-inline-start:0}>[aria-hidden]{margin-bottom:var(--sm3);font-size:var(--text-lg);grid-column:1 / -1}}:is(input,select,textarea):user-invalid{border-color:var(--input-border-color-invalid)}input{&:where(:not([type=checkbox],[type=radio])){height:var(--input-height)}&:where(:not([type=color],[type=file],[type=reset],[type=submit])){padding:var(--input-padding)}&:where(:not([type=color])){border-radius:var(--input-border-radius)}&:where(:not([type=file])){border:var(--input-border-width) solid var(--input-border-color)}&[type=file]{width:100%;accent-color:var(--text-color)}&[type=number]{padding-inline-end:var(--xs1)}}label{display:block;&:has(+:is(input,select,textarea)){margin-bottom:var(--label-spacing)}}legend{position:absolute;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);width:1px;height:1px;white-space:nowrap}meter{width:100%;background:var(--meter-track-color);border-radius:var(--meter-border-radius);height:var(--meter-height);&::-webkit-meter-bar{background:var(--meter-track-color)}&::-webkit-meter-bar,&::-webkit-meter-optimum-value,&::-webkit-meter-suboptimum-value,&::-webkit-meter-even-less-good-value{height:var(--meter-height);border:none;border-radius:var(--meter-border-radius)}&::-webkit-meter-even-less-good-value{background:var(--meter-low-color)}&::-webkit-meter-suboptimum-value{background:var(--meter-medium-color)}&::-webkit-meter-optimum-value{background:var(--meter-high-color)}&:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:var(--meter-low-color)}&:-moz-meter-sub-optimum::-moz-meter-bar{background:var(--meter-medium-color)}&:-moz-meter-optimum::-moz-meter-bar{background:var(--meter-high-color)}}progress{appearance:none;width:100%;height:var(--progress-height);background:var(--progress-track-color);border-radius:var(--progress-border-radius);border:none;&::-moz-progress-bar{background:var(--progress-color);border-radius:var(--progress-border-radius)}&::-webkit-progress-bar{width:100%;background:var(--progress-track-color);border-radius:var(--progress-border-radius);height:var(--progress-height)}&::-webkit-progress-value{background:var(--progress-color);border-radius:var(--progress-border-radius)}}select{--split: calc(100% - var(--select-icon-size));display:flex;appearance:none;height:var(--input-height);padding:var(--xs1) calc(var(--input-padding) + var(--md1)) var(--xs1) var(--input-padding);border:var(--input-border-width) solid var(--input-border-color);border-radius:var(--input-border-radius);background:linear-gradient(to right,var(--body-background-color) 0 var(--split),var(--text-color) var(--split) 100%);mask-image:var(--select-icon),linear-gradient(to right,transparent calc(var(--split) - 1px),red 0),linear-gradient(red 0 0);mask-size:var(--select-icon-size),auto,auto;mask-position:calc(100% - var(--xs1)) center,0 0,0 0;mask-repeat:no-repeat;mask-clip:padding-box,padding-box,border-box;mask-origin:padding-box,padding-box,border-box;mask-composite:add,exclude;&:disabled{--disabled-color: light-dark( hsl(from var(--text-color) h s 70%), hsl(from var(--text-color) h s 40%) );cursor:not-allowed;color:var(--disabled-color);background:linear-gradient(to right,var(--body-background-color) 0 var(--split),var(--disabled-color) var(--split) 100%)}&[multiple]{height:auto;padding:var(--input-padding);background:var(--body-background-color);mask-image:none}}textarea{width:100%;padding:var(--input-padding);border-radius:var(--input-border-radius);border:var(--input-border-width) solid var(--input-border-color);resize:vertical;&:not([rows]){min-height:6em}}}@layer elements{dialog{min-width:var(--dialog-min-width);max-width:var(--dialog-max-width);padding:var(--dialog-padding);border:var(--dialog-border-width) solid var(--dialog-border-color);background-color:var(--dialog-background-color);border-radius:var(--dialog-border-radius);&::backdrop{background:var(--dialog-backdrop-color);opacity:var(--dialog-backdrop-opacity)}[aria-label="close pop-up"]{position:absolute;top:var(--xs3);right:var( --xs3 );background:transparent;border:none;outline:none;cursor:pointer}p:last-of-type{margin-bottom:0}}details{padding:var(--details-padding);border:var(--details-border-width) solid var(--details-border-color);background-color:var(--details-background-color);border-radius:var(--details-border-radius);cursor:pointer;summary{display:flex;justify-content:space-between;font-weight:var(--bold);&::-webkit-details-marker{display:none}&:after{content:"";width:var(--details-icon-size);height:var(--details-icon-size);background-color:currentColor;mask-image:var(--details-icon);mask-size:contain;mask-repeat:no-repeat;transition:transform var(--transition)}}&[open]>summary{margin-bottom:var(--details-spacing);&:after{transform:rotate(180deg)}}p:last-of-type{margin-bottom:0}}}@layer global{:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.a11y-skipLink{position:fixed;z-index:var(--z-top);inset-block-start:-100vb;inset-inline-start:0;padding:.75em 1.25em;background-color:var(--body-background-color);color:var(--text-color)}.a11y-skipLink:focus{inset-block-start:0}.a11y-srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}}@layer global{@keyframes fadeFromOpaque{0%{opacity:1}}@keyframes fadeToOpaque{to{opacity:1}}@keyframes fadeFromTransparent{0%{opacity:0}}@keyframes fadeToTransparent{to{opacity:0}}}@layer global{.grid{display:grid;--grid-tc: repeat(4, 1fr);--grid-cs: 1;--grid-ce: -1;grid-template-columns:var(--grid-tc);grid-column-gap:var(--grid-column-gap);grid-row-gap:var(--grid-row-gap)}.grid-flush{grid-column-gap:0;grid-row-gap:0}.grid>.grid_item{display:block;appearance:none;-webkit-appearance:none}.grid[col="1"]{--grid-tc: repeat(1, 1fr) }.grid[col="2"]{--grid-tc: repeat(2, 1fr) }.grid[col="3"]{--grid-tc: repeat(3, 1fr) }.grid[col="4"]{--grid-tc: repeat(4, 1fr) }.grid[col="5"]{--grid-tc: repeat(5, 1fr) }.grid[col="6"]{--grid-tc: repeat(6, 1fr) }.grid[col="7"]{--grid-tc: repeat(7, 1fr) }.grid[col="8"]{--grid-tc: repeat(8, 1fr) }.grid[col="9"]{--grid-tc: repeat(9, 1fr) }.grid[col="10"]{--grid-tc: repeat(10, 1fr) }.grid[col="11"]{--grid-tc: repeat(11, 1fr) }.grid[col="12"]{--grid-tc: repeat(12, 1fr) }.grid[col="13"]{--grid-tc: repeat(13, 1fr) }.grid[col="14"]{--grid-tc: repeat(14, 1fr) }.grid[col="15"]{--grid-tc: repeat(15, 1fr) }.grid[col="16"]{--grid-tc: repeat(16, 1fr) }.grid[col="17"]{--grid-tc: repeat(17, 1fr) }.grid[col="18"]{--grid-tc: repeat(18, 1fr) }.grid[col="19"]{--grid-tc: repeat(19, 1fr) }.grid[col="20"]{--grid-tc: repeat(20, 1fr) }.grid[col="21"]{--grid-tc: repeat(21, 1fr) }.grid[col="22"]{--grid-tc: repeat(22, 1fr) }.grid[col="23"]{--grid-tc: repeat(23, 1fr) }.grid[col="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span^="1"]{--grid-cs: 1 }.grid>.grid_item[span^="2"]{--grid-cs: 2 }.grid>.grid_item[span^="3"]{--grid-cs: 3 }.grid>.grid_item[span^="4"]{--grid-cs: 4 }.grid>.grid_item[span^="5"]{--grid-cs: 5 }.grid>.grid_item[span^="6"]{--grid-cs: 6 }.grid>.grid_item[span^="7"]{--grid-cs: 7 }.grid>.grid_item[span^="8"]{--grid-cs: 8 }.grid>.grid_item[span^="9"]{--grid-cs: 9 }.grid>.grid_item[span^="10"]{--grid-cs: 10 }.grid>.grid_item[span^="11"]{--grid-cs: 11 }.grid>.grid_item[span^="12"]{--grid-cs: 12 }.grid>.grid_item[span^="13"]{--grid-cs: 13 }.grid>.grid_item[span^="14"]{--grid-cs: 14 }.grid>.grid_item[span^="15"]{--grid-cs: 15 }.grid>.grid_item[span^="16"]{--grid-cs: 16 }.grid>.grid_item[span^="17"]{--grid-cs: 17 }.grid>.grid_item[span^="18"]{--grid-cs: 18 }.grid>.grid_item[span^="19"]{--grid-cs: 19 }.grid>.grid_item[span^="20"]{--grid-cs: 20 }.grid>.grid_item[span^="21"]{--grid-cs: 21 }.grid>.grid_item[span^="22"]{--grid-cs: 22 }.grid>.grid_item[span^="23"]{--grid-cs: 23 }.grid>.grid_item[span^="24"]{--grid-cs: 24 }.grid>.grid_item[span$="+1"],.grid>.grid_item[span="1"]{--grid-ce: 1 }.grid>.grid_item[span$="+2"],.grid>.grid_item[span$="-1"],.grid>.grid_item[span="2"]{--grid-ce: 2 }.grid>.grid_item[span$="+3"],.grid>.grid_item[span$="-2"],.grid>.grid_item[span="3"]{--grid-ce: 3 }.grid>.grid_item[span$="+4"],.grid>.grid_item[span$="-3"],.grid>.grid_item[span="4"]{--grid-ce: 4 }.grid>.grid_item[span$="+5"],.grid>.grid_item[span$="-4"],.grid>.grid_item[span="5"]{--grid-ce: 5 }.grid>.grid_item[span$="+6"],.grid>.grid_item[span$="-5"],.grid>.grid_item[span="6"]{--grid-ce: 6 }.grid>.grid_item[span$="+7"],.grid>.grid_item[span$="-6"],.grid>.grid_item[span="7"]{--grid-ce: 7 }.grid>.grid_item[span$="+8"],.grid>.grid_item[span$="-7"],.grid>.grid_item[span="8"]{--grid-ce: 8 }.grid>.grid_item[span$="+9"],.grid>.grid_item[span$="-8"],.grid>.grid_item[span="9"]{--grid-ce: 9 }.grid>.grid_item[span$="+10"],.grid>.grid_item[span$="-9"],.grid>.grid_item[span="10"]{--grid-ce: 10 }.grid>.grid_item[span$="+11"],.grid>.grid_item[span$="-10"],.grid>.grid_item[span="11"]{--grid-ce: 11 }.grid>.grid_item[span$="+12"],.grid>.grid_item[span$="-11"],.grid>.grid_item[span="12"]{--grid-ce: 12 }.grid>.grid_item[span$="+13"],.grid>.grid_item[span$="-12"],.grid>.grid_item[span="13"]{--grid-ce: 13 }.grid>.grid_item[span$="+14"],.grid>.grid_item[span$="-13"],.grid>.grid_item[span="14"]{--grid-ce: 14 }.grid>.grid_item[span$="+15"],.grid>.grid_item[span$="-14"],.grid>.grid_item[span="15"]{--grid-ce: 15 }.grid>.grid_item[span$="+16"],.grid>.grid_item[span$="-15"],.grid>.grid_item[span="16"]{--grid-ce: 16 }.grid>.grid_item[span$="+17"],.grid>.grid_item[span$="-16"],.grid>.grid_item[span="17"]{--grid-ce: 17 }.grid>.grid_item[span$="+18"],.grid>.grid_item[span$="-17"],.grid>.grid_item[span="18"]{--grid-ce: 18 }.grid>.grid_item[span$="+19"],.grid>.grid_item[span$="-18"],.grid>.grid_item[span="19"]{--grid-ce: 19 }.grid>.grid_item[span$="+20"],.grid>.grid_item[span$="-19"],.grid>.grid_item[span="20"]{--grid-ce: 20 }.grid>.grid_item[span$="+21"],.grid>.grid_item[span$="-20"],.grid>.grid_item[span="21"]{--grid-ce: 21 }.grid>.grid_item[span$="+22"],.grid>.grid_item[span$="-21"],.grid>.grid_item[span="22"]{--grid-ce: 22 }.grid>.grid_item[span$="+23"],.grid>.grid_item[span$="-22"],.grid>.grid_item[span="23"]{--grid-ce: 23 }.grid>.grid_item[span$="+24"],.grid>.grid_item[span$="-23"],.grid>.grid_item[span="24"]{--grid-ce: 24 }.grid>.grid_item[span$="-24"]{--grid-ce: 25 }.grid>.grid_item[span]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span*="+"],.grid>.grid_item[span*="-"],.grid>.grid_item[span*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span*="-"],.grid>.grid_item[span*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span=row]{grid-column:1 / -1}@media only screen and (width>=768px){.grid[col-md="1"]{--grid-tc: repeat(1, 1fr) }.grid[col-md="2"]{--grid-tc: repeat(2, 1fr) }.grid[col-md="3"]{--grid-tc: repeat(3, 1fr) }.grid[col-md="4"]{--grid-tc: repeat(4, 1fr) }.grid[col-md="5"]{--grid-tc: repeat(5, 1fr) }.grid[col-md="6"]{--grid-tc: repeat(6, 1fr) }.grid[col-md="7"]{--grid-tc: repeat(7, 1fr) }.grid[col-md="8"]{--grid-tc: repeat(8, 1fr) }.grid[col-md="9"]{--grid-tc: repeat(9, 1fr) }.grid[col-md="10"]{--grid-tc: repeat(10, 1fr) }.grid[col-md="11"]{--grid-tc: repeat(11, 1fr) }.grid[col-md="12"]{--grid-tc: repeat(12, 1fr) }.grid[col-md="13"]{--grid-tc: repeat(13, 1fr) }.grid[col-md="14"]{--grid-tc: repeat(14, 1fr) }.grid[col-md="15"]{--grid-tc: repeat(15, 1fr) }.grid[col-md="16"]{--grid-tc: repeat(16, 1fr) }.grid[col-md="17"]{--grid-tc: repeat(17, 1fr) }.grid[col-md="18"]{--grid-tc: repeat(18, 1fr) }.grid[col-md="19"]{--grid-tc: repeat(19, 1fr) }.grid[col-md="20"]{--grid-tc: repeat(20, 1fr) }.grid[col-md="21"]{--grid-tc: repeat(21, 1fr) }.grid[col-md="22"]{--grid-tc: repeat(22, 1fr) }.grid[col-md="23"]{--grid-tc: repeat(23, 1fr) }.grid[col-md="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span-md^="1"]{--grid-cs: 1 }.grid>.grid_item[span-md^="2"]{--grid-cs: 2 }.grid>.grid_item[span-md^="3"]{--grid-cs: 3 }.grid>.grid_item[span-md^="4"]{--grid-cs: 4 }.grid>.grid_item[span-md^="5"]{--grid-cs: 5 }.grid>.grid_item[span-md^="6"]{--grid-cs: 6 }.grid>.grid_item[span-md^="7"]{--grid-cs: 7 }.grid>.grid_item[span-md^="8"]{--grid-cs: 8 }.grid>.grid_item[span-md^="9"]{--grid-cs: 9 }.grid>.grid_item[span-md^="10"]{--grid-cs: 10 }.grid>.grid_item[span-md^="11"]{--grid-cs: 11 }.grid>.grid_item[span-md^="12"]{--grid-cs: 12 }.grid>.grid_item[span-md^="13"]{--grid-cs: 13 }.grid>.grid_item[span-md^="14"]{--grid-cs: 14 }.grid>.grid_item[span-md^="15"]{--grid-cs: 15 }.grid>.grid_item[span-md^="16"]{--grid-cs: 16 }.grid>.grid_item[span-md^="17"]{--grid-cs: 17 }.grid>.grid_item[span-md^="18"]{--grid-cs: 18 }.grid>.grid_item[span-md^="19"]{--grid-cs: 19 }.grid>.grid_item[span-md^="20"]{--grid-cs: 20 }.grid>.grid_item[span-md^="21"]{--grid-cs: 21 }.grid>.grid_item[span-md^="22"]{--grid-cs: 22 }.grid>.grid_item[span-md^="23"]{--grid-cs: 23 }.grid>.grid_item[span-md^="24"]{--grid-cs: 24 }.grid>.grid_item[span-md$="+1"],.grid>.grid_item[span-md="1"]{--grid-ce: 1 }.grid>.grid_item[span-md$="+2"],.grid>.grid_item[span-md$="-1"],.grid>.grid_item[span-md="2"]{--grid-ce: 2 }.grid>.grid_item[span-md$="+3"],.grid>.grid_item[span-md$="-2"],.grid>.grid_item[span-md="3"]{--grid-ce: 3 }.grid>.grid_item[span-md$="+4"],.grid>.grid_item[span-md$="-3"],.grid>.grid_item[span-md="4"]{--grid-ce: 4 }.grid>.grid_item[span-md$="+5"],.grid>.grid_item[span-md$="-4"],.grid>.grid_item[span-md="5"]{--grid-ce: 5 }.grid>.grid_item[span-md$="+6"],.grid>.grid_item[span-md$="-5"],.grid>.grid_item[span-md="6"]{--grid-ce: 6 }.grid>.grid_item[span-md$="+7"],.grid>.grid_item[span-md$="-6"],.grid>.grid_item[span-md="7"]{--grid-ce: 7 }.grid>.grid_item[span-md$="+8"],.grid>.grid_item[span-md$="-7"],.grid>.grid_item[span-md="8"]{--grid-ce: 8 }.grid>.grid_item[span-md$="+9"],.grid>.grid_item[span-md$="-8"],.grid>.grid_item[span-md="9"]{--grid-ce: 9 }.grid>.grid_item[span-md$="+10"],.grid>.grid_item[span-md$="-9"],.grid>.grid_item[span-md="10"]{--grid-ce: 10 }.grid>.grid_item[span-md$="+11"],.grid>.grid_item[span-md$="-10"],.grid>.grid_item[span-md="11"]{--grid-ce: 11 }.grid>.grid_item[span-md$="+12"],.grid>.grid_item[span-md$="-11"],.grid>.grid_item[span-md="12"]{--grid-ce: 12 }.grid>.grid_item[span-md$="+13"],.grid>.grid_item[span-md$="-12"],.grid>.grid_item[span-md="13"]{--grid-ce: 13 }.grid>.grid_item[span-md$="+14"],.grid>.grid_item[span-md$="-13"],.grid>.grid_item[span-md="14"]{--grid-ce: 14 }.grid>.grid_item[span-md$="+15"],.grid>.grid_item[span-md$="-14"],.grid>.grid_item[span-md="15"]{--grid-ce: 15 }.grid>.grid_item[span-md$="+16"],.grid>.grid_item[span-md$="-15"],.grid>.grid_item[span-md="16"]{--grid-ce: 16 }.grid>.grid_item[span-md$="+17"],.grid>.grid_item[span-md$="-16"],.grid>.grid_item[span-md="17"]{--grid-ce: 17 }.grid>.grid_item[span-md$="+18"],.grid>.grid_item[span-md$="-17"],.grid>.grid_item[span-md="18"]{--grid-ce: 18 }.grid>.grid_item[span-md$="+19"],.grid>.grid_item[span-md$="-18"],.grid>.grid_item[span-md="19"]{--grid-ce: 19 }.grid>.grid_item[span-md$="+20"],.grid>.grid_item[span-md$="-19"],.grid>.grid_item[span-md="20"]{--grid-ce: 20 }.grid>.grid_item[span-md$="+21"],.grid>.grid_item[span-md$="-20"],.grid>.grid_item[span-md="21"]{--grid-ce: 21 }.grid>.grid_item[span-md$="+22"],.grid>.grid_item[span-md$="-21"],.grid>.grid_item[span-md="22"]{--grid-ce: 22 }.grid>.grid_item[span-md$="+23"],.grid>.grid_item[span-md$="-22"],.grid>.grid_item[span-md="23"]{--grid-ce: 23 }.grid>.grid_item[span-md$="+24"],.grid>.grid_item[span-md$="-23"],.grid>.grid_item[span-md="24"]{--grid-ce: 24 }.grid>.grid_item[span-md$="-24"]{--grid-ce: 25 }.grid>.grid_item[span-md]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span-md*="+"],.grid>.grid_item[span-md*="-"],.grid>.grid_item[span-md*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span-md*="-"],.grid>.grid_item[span-md*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span-md=row]{grid-column:1 / -1}}@media only screen and (width>=1024px){.grid[col-lg="1"]{--grid-tc: repeat(1, 1fr) }.grid[col-lg="2"]{--grid-tc: repeat(2, 1fr) }.grid[col-lg="3"]{--grid-tc: repeat(3, 1fr) }.grid[col-lg="4"]{--grid-tc: repeat(4, 1fr) }.grid[col-lg="5"]{--grid-tc: repeat(5, 1fr) }.grid[col-lg="6"]{--grid-tc: repeat(6, 1fr) }.grid[col-lg="7"]{--grid-tc: repeat(7, 1fr) }.grid[col-lg="8"]{--grid-tc: repeat(8, 1fr) }.grid[col-lg="9"]{--grid-tc: repeat(9, 1fr) }.grid[col-lg="10"]{--grid-tc: repeat(10, 1fr) }.grid[col-lg="11"]{--grid-tc: repeat(11, 1fr) }.grid[col-lg="12"]{--grid-tc: repeat(12, 1fr) }.grid[col-lg="13"]{--grid-tc: repeat(13, 1fr) }.grid[col-lg="14"]{--grid-tc: repeat(14, 1fr) }.grid[col-lg="15"]{--grid-tc: repeat(15, 1fr) }.grid[col-lg="16"]{--grid-tc: repeat(16, 1fr) }.grid[col-lg="17"]{--grid-tc: repeat(17, 1fr) }.grid[col-lg="18"]{--grid-tc: repeat(18, 1fr) }.grid[col-lg="19"]{--grid-tc: repeat(19, 1fr) }.grid[col-lg="20"]{--grid-tc: repeat(20, 1fr) }.grid[col-lg="21"]{--grid-tc: repeat(21, 1fr) }.grid[col-lg="22"]{--grid-tc: repeat(22, 1fr) }.grid[col-lg="23"]{--grid-tc: repeat(23, 1fr) }.grid[col-lg="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span-lg^="1"]{--grid-cs: 1 }.grid>.grid_item[span-lg^="2"]{--grid-cs: 2 }.grid>.grid_item[span-lg^="3"]{--grid-cs: 3 }.grid>.grid_item[span-lg^="4"]{--grid-cs: 4 }.grid>.grid_item[span-lg^="5"]{--grid-cs: 5 }.grid>.grid_item[span-lg^="6"]{--grid-cs: 6 }.grid>.grid_item[span-lg^="7"]{--grid-cs: 7 }.grid>.grid_item[span-lg^="8"]{--grid-cs: 8 }.grid>.grid_item[span-lg^="9"]{--grid-cs: 9 }.grid>.grid_item[span-lg^="10"]{--grid-cs: 10 }.grid>.grid_item[span-lg^="11"]{--grid-cs: 11 }.grid>.grid_item[span-lg^="12"]{--grid-cs: 12 }.grid>.grid_item[span-lg^="13"]{--grid-cs: 13 }.grid>.grid_item[span-lg^="14"]{--grid-cs: 14 }.grid>.grid_item[span-lg^="15"]{--grid-cs: 15 }.grid>.grid_item[span-lg^="16"]{--grid-cs: 16 }.grid>.grid_item[span-lg^="17"]{--grid-cs: 17 }.grid>.grid_item[span-lg^="18"]{--grid-cs: 18 }.grid>.grid_item[span-lg^="19"]{--grid-cs: 19 }.grid>.grid_item[span-lg^="20"]{--grid-cs: 20 }.grid>.grid_item[span-lg^="21"]{--grid-cs: 21 }.grid>.grid_item[span-lg^="22"]{--grid-cs: 22 }.grid>.grid_item[span-lg^="23"]{--grid-cs: 23 }.grid>.grid_item[span-lg^="24"]{--grid-cs: 24 }.grid>.grid_item[span-lg$="+1"],.grid>.grid_item[span-lg="1"]{--grid-ce: 1 }.grid>.grid_item[span-lg$="+2"],.grid>.grid_item[span-lg$="-1"],.grid>.grid_item[span-lg="2"]{--grid-ce: 2 }.grid>.grid_item[span-lg$="+3"],.grid>.grid_item[span-lg$="-2"],.grid>.grid_item[span-lg="3"]{--grid-ce: 3 }.grid>.grid_item[span-lg$="+4"],.grid>.grid_item[span-lg$="-3"],.grid>.grid_item[span-lg="4"]{--grid-ce: 4 }.grid>.grid_item[span-lg$="+5"],.grid>.grid_item[span-lg$="-4"],.grid>.grid_item[span-lg="5"]{--grid-ce: 5 }.grid>.grid_item[span-lg$="+6"],.grid>.grid_item[span-lg$="-5"],.grid>.grid_item[span-lg="6"]{--grid-ce: 6 }.grid>.grid_item[span-lg$="+7"],.grid>.grid_item[span-lg$="-6"],.grid>.grid_item[span-lg="7"]{--grid-ce: 7 }.grid>.grid_item[span-lg$="+8"],.grid>.grid_item[span-lg$="-7"],.grid>.grid_item[span-lg="8"]{--grid-ce: 8 }.grid>.grid_item[span-lg$="+9"],.grid>.grid_item[span-lg$="-8"],.grid>.grid_item[span-lg="9"]{--grid-ce: 9 }.grid>.grid_item[span-lg$="+10"],.grid>.grid_item[span-lg$="-9"],.grid>.grid_item[span-lg="10"]{--grid-ce: 10 }.grid>.grid_item[span-lg$="+11"],.grid>.grid_item[span-lg$="-10"],.grid>.grid_item[span-lg="11"]{--grid-ce: 11 }.grid>.grid_item[span-lg$="+12"],.grid>.grid_item[span-lg$="-11"],.grid>.grid_item[span-lg="12"]{--grid-ce: 12 }.grid>.grid_item[span-lg$="+13"],.grid>.grid_item[span-lg$="-12"],.grid>.grid_item[span-lg="13"]{--grid-ce: 13 }.grid>.grid_item[span-lg$="+14"],.grid>.grid_item[span-lg$="-13"],.grid>.grid_item[span-lg="14"]{--grid-ce: 14 }.grid>.grid_item[span-lg$="+15"],.grid>.grid_item[span-lg$="-14"],.grid>.grid_item[span-lg="15"]{--grid-ce: 15 }.grid>.grid_item[span-lg$="+16"],.grid>.grid_item[span-lg$="-15"],.grid>.grid_item[span-lg="16"]{--grid-ce: 16 }.grid>.grid_item[span-lg$="+17"],.grid>.grid_item[span-lg$="-16"],.grid>.grid_item[span-lg="17"]{--grid-ce: 17 }.grid>.grid_item[span-lg$="+18"],.grid>.grid_item[span-lg$="-17"],.grid>.grid_item[span-lg="18"]{--grid-ce: 18 }.grid>.grid_item[span-lg$="+19"],.grid>.grid_item[span-lg$="-18"],.grid>.grid_item[span-lg="19"]{--grid-ce: 19 }.grid>.grid_item[span-lg$="+20"],.grid>.grid_item[span-lg$="-19"],.grid>.grid_item[span-lg="20"]{--grid-ce: 20 }.grid>.grid_item[span-lg$="+21"],.grid>.grid_item[span-lg$="-20"],.grid>.grid_item[span-lg="21"]{--grid-ce: 21 }.grid>.grid_item[span-lg$="+22"],.grid>.grid_item[span-lg$="-21"],.grid>.grid_item[span-lg="22"]{--grid-ce: 22 }.grid>.grid_item[span-lg$="+23"],.grid>.grid_item[span-lg$="-22"],.grid>.grid_item[span-lg="23"]{--grid-ce: 23 }.grid>.grid_item[span-lg$="+24"],.grid>.grid_item[span-lg$="-23"],.grid>.grid_item[span-lg="24"]{--grid-ce: 24 }.grid>.grid_item[span-lg$="-24"]{--grid-ce: 25 }.grid>.grid_item[span-lg]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span-lg*="+"],.grid>.grid_item[span-lg*="-"],.grid>.grid_item[span-lg*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span-lg*="-"],.grid>.grid_item[span-lg*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span-lg=row]{grid-column:1 / -1}}@media only screen and (width>=1440px){.grid[col-xl="1"]{--grid-tc: repeat(1, 1fr) }.grid[col-xl="2"]{--grid-tc: repeat(2, 1fr) }.grid[col-xl="3"]{--grid-tc: repeat(3, 1fr) }.grid[col-xl="4"]{--grid-tc: repeat(4, 1fr) }.grid[col-xl="5"]{--grid-tc: repeat(5, 1fr) }.grid[col-xl="6"]{--grid-tc: repeat(6, 1fr) }.grid[col-xl="7"]{--grid-tc: repeat(7, 1fr) }.grid[col-xl="8"]{--grid-tc: repeat(8, 1fr) }.grid[col-xl="9"]{--grid-tc: repeat(9, 1fr) }.grid[col-xl="10"]{--grid-tc: repeat(10, 1fr) }.grid[col-xl="11"]{--grid-tc: repeat(11, 1fr) }.grid[col-xl="12"]{--grid-tc: repeat(12, 1fr) }.grid[col-xl="13"]{--grid-tc: repeat(13, 1fr) }.grid[col-xl="14"]{--grid-tc: repeat(14, 1fr) }.grid[col-xl="15"]{--grid-tc: repeat(15, 1fr) }.grid[col-xl="16"]{--grid-tc: repeat(16, 1fr) }.grid[col-xl="17"]{--grid-tc: repeat(17, 1fr) }.grid[col-xl="18"]{--grid-tc: repeat(18, 1fr) }.grid[col-xl="19"]{--grid-tc: repeat(19, 1fr) }.grid[col-xl="20"]{--grid-tc: repeat(20, 1fr) }.grid[col-xl="21"]{--grid-tc: repeat(21, 1fr) }.grid[col-xl="22"]{--grid-tc: repeat(22, 1fr) }.grid[col-xl="23"]{--grid-tc: repeat(23, 1fr) }.grid[col-xl="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span-xl^="1"]{--grid-cs: 1 }.grid>.grid_item[span-xl^="2"]{--grid-cs: 2 }.grid>.grid_item[span-xl^="3"]{--grid-cs: 3 }.grid>.grid_item[span-xl^="4"]{--grid-cs: 4 }.grid>.grid_item[span-xl^="5"]{--grid-cs: 5 }.grid>.grid_item[span-xl^="6"]{--grid-cs: 6 }.grid>.grid_item[span-xl^="7"]{--grid-cs: 7 }.grid>.grid_item[span-xl^="8"]{--grid-cs: 8 }.grid>.grid_item[span-xl^="9"]{--grid-cs: 9 }.grid>.grid_item[span-xl^="10"]{--grid-cs: 10 }.grid>.grid_item[span-xl^="11"]{--grid-cs: 11 }.grid>.grid_item[span-xl^="12"]{--grid-cs: 12 }.grid>.grid_item[span-xl^="13"]{--grid-cs: 13 }.grid>.grid_item[span-xl^="14"]{--grid-cs: 14 }.grid>.grid_item[span-xl^="15"]{--grid-cs: 15 }.grid>.grid_item[span-xl^="16"]{--grid-cs: 16 }.grid>.grid_item[span-xl^="17"]{--grid-cs: 17 }.grid>.grid_item[span-xl^="18"]{--grid-cs: 18 }.grid>.grid_item[span-xl^="19"]{--grid-cs: 19 }.grid>.grid_item[span-xl^="20"]{--grid-cs: 20 }.grid>.grid_item[span-xl^="21"]{--grid-cs: 21 }.grid>.grid_item[span-xl^="22"]{--grid-cs: 22 }.grid>.grid_item[span-xl^="23"]{--grid-cs: 23 }.grid>.grid_item[span-xl^="24"]{--grid-cs: 24 }.grid>.grid_item[span-xl$="+1"],.grid>.grid_item[span-xl="1"]{--grid-ce: 1 }.grid>.grid_item[span-xl$="+2"],.grid>.grid_item[span-xl$="-1"],.grid>.grid_item[span-xl="2"]{--grid-ce: 2 }.grid>.grid_item[span-xl$="+3"],.grid>.grid_item[span-xl$="-2"],.grid>.grid_item[span-xl="3"]{--grid-ce: 3 }.grid>.grid_item[span-xl$="+4"],.grid>.grid_item[span-xl$="-3"],.grid>.grid_item[span-xl="4"]{--grid-ce: 4 }.grid>.grid_item[span-xl$="+5"],.grid>.grid_item[span-xl$="-4"],.grid>.grid_item[span-xl="5"]{--grid-ce: 5 }.grid>.grid_item[span-xl$="+6"],.grid>.grid_item[span-xl$="-5"],.grid>.grid_item[span-xl="6"]{--grid-ce: 6 }.grid>.grid_item[span-xl$="+7"],.grid>.grid_item[span-xl$="-6"],.grid>.grid_item[span-xl="7"]{--grid-ce: 7 }.grid>.grid_item[span-xl$="+8"],.grid>.grid_item[span-xl$="-7"],.grid>.grid_item[span-xl="8"]{--grid-ce: 8 }.grid>.grid_item[span-xl$="+9"],.grid>.grid_item[span-xl$="-8"],.grid>.grid_item[span-xl="9"]{--grid-ce: 9 }.grid>.grid_item[span-xl$="+10"],.grid>.grid_item[span-xl$="-9"],.grid>.grid_item[span-xl="10"]{--grid-ce: 10 }.grid>.grid_item[span-xl$="+11"],.grid>.grid_item[span-xl$="-10"],.grid>.grid_item[span-xl="11"]{--grid-ce: 11 }.grid>.grid_item[span-xl$="+12"],.grid>.grid_item[span-xl$="-11"],.grid>.grid_item[span-xl="12"]{--grid-ce: 12 }.grid>.grid_item[span-xl$="+13"],.grid>.grid_item[span-xl$="-12"],.grid>.grid_item[span-xl="13"]{--grid-ce: 13 }.grid>.grid_item[span-xl$="+14"],.grid>.grid_item[span-xl$="-13"],.grid>.grid_item[span-xl="14"]{--grid-ce: 14 }.grid>.grid_item[span-xl$="+15"],.grid>.grid_item[span-xl$="-14"],.grid>.grid_item[span-xl="15"]{--grid-ce: 15 }.grid>.grid_item[span-xl$="+16"],.grid>.grid_item[span-xl$="-15"],.grid>.grid_item[span-xl="16"]{--grid-ce: 16 }.grid>.grid_item[span-xl$="+17"],.grid>.grid_item[span-xl$="-16"],.grid>.grid_item[span-xl="17"]{--grid-ce: 17 }.grid>.grid_item[span-xl$="+18"],.grid>.grid_item[span-xl$="-17"],.grid>.grid_item[span-xl="18"]{--grid-ce: 18 }.grid>.grid_item[span-xl$="+19"],.grid>.grid_item[span-xl$="-18"],.grid>.grid_item[span-xl="19"]{--grid-ce: 19 }.grid>.grid_item[span-xl$="+20"],.grid>.grid_item[span-xl$="-19"],.grid>.grid_item[span-xl="20"]{--grid-ce: 20 }.grid>.grid_item[span-xl$="+21"],.grid>.grid_item[span-xl$="-20"],.grid>.grid_item[span-xl="21"]{--grid-ce: 21 }.grid>.grid_item[span-xl$="+22"],.grid>.grid_item[span-xl$="-21"],.grid>.grid_item[span-xl="22"]{--grid-ce: 22 }.grid>.grid_item[span-xl$="+23"],.grid>.grid_item[span-xl$="-22"],.grid>.grid_item[span-xl="23"]{--grid-ce: 23 }.grid>.grid_item[span-xl$="+24"],.grid>.grid_item[span-xl$="-23"],.grid>.grid_item[span-xl="24"]{--grid-ce: 24 }.grid>.grid_item[span-xl$="-24"]{--grid-ce: 25 }.grid>.grid_item[span-xl]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span-xl*="+"],.grid>.grid_item[span-xl*="-"],.grid>.grid_item[span-xl*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span-xl*="-"],.grid>.grid_item[span-xl*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span-xl=row]{grid-column:1 / -1}}}@layer global{.layout{display:flex;flex-direction:column;width:100vw;min-height:100vh;.layout_content{flex:1}}.layout_content_main{container:main / inline-size}.layout-centered{.layout_content{display:grid;gap:var(--sm3);grid-template-columns:1fr minmax(0,var(--layout-content-width)) 1fr;margin-top:var(--lg1);margin-bottom:var(--sm1);@media(width>=768px){margin-top:var(--xl3);margin-bottom:var(--md3);gap:var(--md3)}}.layout_content_main{grid-column:2}}.layout-sidebar{.layout_content{@media(width>=768px){display:grid;grid-template-columns:var(--layout-aside-width) minmax(0,1fr)}}.layout_content_main{padding:var(--sm2);@media(width>=768px){grid-row:1;grid-column:2;padding:var(--lg1) var(--md2)}}.layout_content_aside{@media(width>=768px){grid-row:1;grid-column:1;padding:var(--lg1) var(--md3)}}}.layout-sidebar-end{.layout_content{@media(width>=768px){grid-template-columns:minmax(0,1fr) var(--layout-aside-width)}}.layout_content_main{@media(width>=768px){grid-column:1}}.layout_content_aside{@media(width>=768px){grid-column:2}}}.layout-docs{.layout_content{@media(width>=768px){display:grid;grid-template-columns:var(--layout-aside-width) minmax(0,1fr)}@media(width>=1024px){grid-template-columns:var(--layout-aside-width) minmax(0,var(--layout-content-width)) var(--layout-toc-width)}}.layout_content_main{padding:var(--sm2);@media(width>=768px){grid-row:1;grid-column:2;padding:var(--lg1) var(--md2)}}.layout_content_aside{display:none;@media(width>=768px){display:block;grid-row:1;grid-column:1;padding:var(--lg1) var(--md3)}}.layout_content_aside-toc{@media(width>=768px){display:none}@media(width>=1024px){display:block;grid-row:1;grid-column:3;padding:var(--lg1) var(--md3)}}}.layout-split{.layout_content{display:grid;@media(width>=768px){grid-template-columns:1fr 1fr}}}.layout-cover{min-height:100dvh;.layout_content{display:grid;place-items:center}}}@layer global{@scope(.prose)to (.not-prose){:is(p,ul,ol,blockquote,table):has(+:is(h1,h2,h3,h4)){margin-bottom:calc(var(--prose-spacing) * 2)}p,ul,ol,dl{margin-bottom:var(--prose-spacing);p,ul,ol,dl{margin-bottom:0}}ul,ol{ul,ol{margin-inline-start:0;padding-inline-start:var(--sm2)}li{margin-bottom:.5em;&::marker{color:light-dark(var(--base-300),var(--base-600))}}}ul{margin-inline-start:var(--sm2);list-style-type:"\2192 "}ol{margin-inline-start:var(--md2);list-style-type:decimal-leading-zero;li::marker{font-size:var(--text-sm)}}table{margin-top:var(--md1);margin-bottom:var(--md1)}}}@layer global{.wrap{display:grid;grid-template-columns:1fr var(--wrap-width) 1fr;>*,>astro-island>*,>astro-slot>*,>astro-static-slot>*{grid-column:2;padding-inline:var(--wrap-spacing);@media(width>=768px){padding-inline:var(--wrap-md-spacing)}@media(width>=1024px){padding-inline:var(--wrap-lg-spacing)}}}.wrap-sm{--wrap-width: var(--wrap-width-sm)}.wrap-md{--wrap-width: var(--wrap-width-md)}.wrap-lg{--wrap-width: var(--wrap-width-lg)}.wrap_content-fullBleed{grid-column:1 / -1;width:100%;object-fit:cover}}@layer helpers{.c-base-0{color:var(--base-0)!important}.bdc-base-0{border-color:var(--base-0)!important}.bgc-base-0{background-color:var(--base-0)!important}.c-base-50{color:var(--base-50)!important}.bdc-base-50{border-color:var(--base-50)!important}.bgc-base-50{background-color:var(--base-50)!important}.c-base-100{color:var(--base-100)!important}.bdc-base-100{border-color:var(--base-100)!important}.bgc-base-100{background-color:var(--base-100)!important}.c-base-200{color:var(--base-200)!important}.bdc-base-200{border-color:var(--base-200)!important}.bgc-base-200{background-color:var(--base-200)!important}.c-base-300{color:var(--base-300)!important}.bdc-base-300{border-color:var(--base-300)!important}.bgc-base-300{background-color:var(--base-300)!important}.c-base-400{color:var(--base-400)!important}.bdc-base-400{border-color:var(--base-400)!important}.bgc-base-400{background-color:var(--base-400)!important}.c-base-500{color:var(--base-500)!important}.bdc-base-500{border-color:var(--base-500)!important}.bgc-base-500{background-color:var(--base-500)!important}.c-base-600{color:var(--base-600)!important}.bdc-base-600{border-color:var(--base-600)!important}.bgc-base-600{background-color:var(--base-600)!important}.c-base-700{color:var(--base-700)!important}.bdc-base-700{border-color:var(--base-700)!important}.bgc-base-700{background-color:var(--base-700)!important}.c-base-800{color:var(--base-800)!important}.bdc-base-800{border-color:var(--base-800)!important}.bgc-base-800{background-color:var(--base-800)!important}.c-base-900{color:var(--base-900)!important}.bdc-base-900{border-color:var(--base-900)!important}.bgc-base-900{background-color:var(--base-900)!important}.c-base-950{color:var(--base-950)!important}.bdc-base-950{border-color:var(--base-950)!important}.bgc-base-950{background-color:var(--base-950)!important}.c-primary-50{color:var(--primary-50)!important}.bdc-primary-50{border-color:var(--primary-50)!important}.bgc-primary-50{background-color:var(--primary-50)!important}.c-primary-100{color:var(--primary-100)!important}.bdc-primary-100{border-color:var(--primary-100)!important}.bgc-primary-100{background-color:var(--primary-100)!important}.c-primary-200{color:var(--primary-200)!important}.bdc-primary-200{border-color:var(--primary-200)!important}.bgc-primary-200{background-color:var(--primary-200)!important}.c-primary-300{color:var(--primary-300)!important}.bdc-primary-300{border-color:var(--primary-300)!important}.bgc-primary-300{background-color:var(--primary-300)!important}.c-primary-400{color:var(--primary-400)!important}.bdc-primary-400{border-color:var(--primary-400)!important}.bgc-primary-400{background-color:var(--primary-400)!important}.c-primary-500{color:var(--primary-500)!important}.bdc-primary-500{border-color:var(--primary-500)!important}.bgc-primary-500{background-color:var(--primary-500)!important}.c-primary-600{color:var(--primary-600)!important}.bdc-primary-600{border-color:var(--primary-600)!important}.bgc-primary-600{background-color:var(--primary-600)!important}.c-primary-700{color:var(--primary-700)!important}.bdc-primary-700{border-color:var(--primary-700)!important}.bgc-primary-700{background-color:var(--primary-700)!important}.c-primary-800{color:var(--primary-800)!important}.bdc-primary-800{border-color:var(--primary-800)!important}.bgc-primary-800{background-color:var(--primary-800)!important}.c-primary-900{color:var(--primary-900)!important}.bdc-primary-900{border-color:var(--primary-900)!important}.bgc-primary-900{background-color:var(--primary-900)!important}.c-primary-950{color:var(--primary-950)!important}.bdc-primary-950{border-color:var(--primary-950)!important}.bgc-primary-950{background-color:var(--primary-950)!important}.c-yes-100{color:var(--yes-100)!important}.bdc-yes-100{border-color:var(--yes-100)!important}.bgc-yes-100{background-color:var(--yes-100)!important}.c-yes-200{color:var(--yes-200)!important}.bdc-yes-200{border-color:var(--yes-200)!important}.bgc-yes-200{background-color:var(--yes-200)!important}.c-yes-300{color:var(--yes-300)!important}.bdc-yes-300{border-color:var(--yes-300)!important}.bgc-yes-300{background-color:var(--yes-300)!important}.c-yes-400{color:var(--yes-400)!important}.bdc-yes-400{border-color:var(--yes-400)!important}.bgc-yes-400{background-color:var(--yes-400)!important}.c-yes-500{color:var(--yes-500)!important}.bdc-yes-500{border-color:var(--yes-500)!important}.bgc-yes-500{background-color:var(--yes-500)!important}.c-no-100{color:var(--no-100)!important}.bdc-no-100{border-color:var(--no-100)!important}.bgc-no-100{background-color:var(--no-100)!important}.c-no-200{color:var(--no-200)!important}.bdc-no-200{border-color:var(--no-200)!important}.bgc-no-200{background-color:var(--no-200)!important}.c-no-300{color:var(--no-300)!important}.bdc-no-300{border-color:var(--no-300)!important}.bgc-no-300{background-color:var(--no-300)!important}.c-no-400{color:var(--no-400)!important}.bdc-no-400{border-color:var(--no-400)!important}.bgc-no-400{background-color:var(--no-400)!important}.c-no-500{color:var(--no-500)!important}.bdc-no-500{border-color:var(--no-500)!important}.bgc-no-500{background-color:var(--no-500)!important}.c-maybe-100{color:var(--maybe-100)!important}.bdc-maybe-100{border-color:var(--maybe-100)!important}.bgc-maybe-100{background-color:var(--maybe-100)!important}.c-maybe-200{color:var(--maybe-200)!important}.bdc-maybe-200{border-color:var(--maybe-200)!important}.bgc-maybe-200{background-color:var(--maybe-200)!important}.c-maybe-300{color:var(--maybe-300)!important}.bdc-maybe-300{border-color:var(--maybe-300)!important}.bgc-maybe-300{background-color:var(--maybe-300)!important}.c-maybe-400{color:var(--maybe-400)!important}.bdc-maybe-400{border-color:var(--maybe-400)!important}.bgc-maybe-400{background-color:var(--maybe-400)!important}.c-maybe-500{color:var(--maybe-500)!important}.bdc-maybe-500{border-color:var(--maybe-500)!important}.bgc-maybe-500{background-color:var(--maybe-500)!important}}@layer helpers{body.dev{--baseline: 8;background-size:100% calc(var(--baseline) * 1px)!important;background-image:linear-gradient(to bottom,#0000 calc((var(--baseline) - 1) * 1px),#ff69b4 calc(var(--baseline) * 1px))!important}.dev-error{position:fixed!important;top:var(--md1)!important;left:var(--md1)!important;z-index:var(--z-top)!important;padding:var(--sm1)!important;font-size:1rem!important;color:var(--no-500)!important;background:var(--no-100)!important;border:1px solid var(--no-500)!important;border-radius:var(--radius-md)!important}}@layer helpers{.of-auto,.overflow-auto{overflow:auto!important}.of-hidden,.overflow-hidden{overflow:hidden!important}.of-clip,.overflow-clip{overflow:clip!important}.of-visible,.overflow-visible{overflow:visible!important}.of-scroll,.overflow-scroll{overflow:scroll!important}.of-x-auto,.overflow-x-auto{overflow-x:auto!important}.of-y-auto,.overflow-y-auto{overflow-y:auto!important}.of-x-hidden,.overflow-x-hidden{overflow-x:hidden!important}.of-y-hidden,.overflow-y-hidden{overflow-y:hidden!important}.of-x-clip,.overflow-x-clip{overflow-x:clip!important}.of-y-clip,.overflow-y-clip{overflow-y:clip!important}.of-x-visible,.overflow-x-visible{overflow-x:visible!important}.of-y-visible,.overflow-y-visible{overflow-y:visible!important}.of-x-scroll,.overflow-x-scroll{overflow-x:scroll!important}.of-y-scroll,.overflow-y-scroll{overflow-y:scroll!important}.position-static{position:static!important}.position-fixed{position:fixed!important}.position-absolute{position:absolute!important}.position-relative{position:relative!important}.position-sticky{position:sticky!important}.visibility-visible{visibility:visible!important}.visibility-hidden{visibility:hidden!important}.visibility-collapse{visibility:collapse!important}.z-auto{z-index:auto!important}.z-bottom{z-index:var(--z-bottom)!important}.z-0{z-index:var(--z-0)!important}.z-1{z-index:var(--z-1)!important}.z-2{z-index:var(--z-2)!important}.z-3{z-index:var(--z-3)!important}.z-4{z-index:var(--z-4)!important}.z-5{z-index:var(--z-5)!important}.z-top{z-index:var(--z-top)!important}}@layer helpers{.o-0{opacity:var(--o-0)!important}.o-1{opacity:var(--o-1)!important}.o-2{opacity:var(--o-2)!important}.o-3{opacity:var(--o-3)!important}.o-4{opacity:var(--o-4)!important}.o-5{opacity:var(--o-5)!important}}@layer helpers{.ar-square{aspect-ratio:var(--ar-square)!important}.ar-landscape{aspect-ratio:var(--ar-landscape)!important}.ar-portrait{aspect-ratio:var(--ar-portrait)!important}.ar-widescreen{aspect-ratio:var(--ar-widescreen)!important}.ar-golden{aspect-ratio:var(--ar-golden)!important}}@layer helpers{.w-0{width:0!important}.h-0{height:0!important}.m-0{margin:0!important}.mt-0{margin-top:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mr-0{margin-right:0!important}.mis-0{margin-inline-start:0!important}.mie-0{margin-inline-end:0!important}.p-0{padding:0!important}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.pis-0{padding-inline-start:0!important}.pie-0{padding-inline-end:0!important}.w-xs1{width:var(--xs1)!important}.h-xs1{height:var(--xs1)!important}.m-xs1{margin:var(--xs1)!important}.mt-xs1{margin-top:var(--xs1)!important}.mb-xs1{margin-bottom:var(--xs1)!important}.ml-xs1{margin-left:var(--xs1)!important}.mr-xs1{margin-right:var(--xs1)!important}.mis-xs1{margin-inline-start:var(--xs1)!important}.mie-xs1{margin-inline-end:var(--xs1)!important}.p-xs1{padding:var(--xs1)!important}.pt-xs1{padding-top:var(--xs1)!important}.pb-xs1{padding-bottom:var(--xs1)!important}.pl-xs1{padding-left:var(--xs1)!important}.pr-xs1{padding-right:var(--xs1)!important}.pis-xs1{padding-inline-start:var(--xs1)!important}.pie-xs1{padding-inline-end:var(--xs1)!important}.w-xs2{width:var(--xs2)!important}.h-xs2{height:var(--xs2)!important}.m-xs2{margin:var(--xs2)!important}.mt-xs2{margin-top:var(--xs2)!important}.mb-xs2{margin-bottom:var(--xs2)!important}.ml-xs2{margin-left:var(--xs2)!important}.mr-xs2{margin-right:var(--xs2)!important}.mis-xs2{margin-inline-start:var(--xs2)!important}.mie-xs2{margin-inline-end:var(--xs2)!important}.p-xs2{padding:var(--xs2)!important}.pt-xs2{padding-top:var(--xs2)!important}.pb-xs2{padding-bottom:var(--xs2)!important}.pl-xs2{padding-left:var(--xs2)!important}.pr-xs2{padding-right:var(--xs2)!important}.pis-xs2{padding-inline-start:var(--xs2)!important}.pie-xs2{padding-inline-end:var(--xs2)!important}.w-xs3{width:var(--xs3)!important}.h-xs3{height:var(--xs3)!important}.m-xs3{margin:var(--xs3)!important}.mt-xs3{margin-top:var(--xs3)!important}.mb-xs3{margin-bottom:var(--xs3)!important}.ml-xs3{margin-left:var(--xs3)!important}.mr-xs3{margin-right:var(--xs3)!important}.mis-xs3{margin-inline-start:var(--xs3)!important}.mie-xs3{margin-inline-end:var(--xs3)!important}.p-xs3{padding:var(--xs3)!important}.pt-xs3{padding-top:var(--xs3)!important}.pb-xs3{padding-bottom:var(--xs3)!important}.pl-xs3{padding-left:var(--xs3)!important}.pr-xs3{padding-right:var(--xs3)!important}.pis-xs3{padding-inline-start:var(--xs3)!important}.pie-xs3{padding-inline-end:var(--xs3)!important}.w-sm1{width:var(--sm1)!important}.h-sm1{height:var(--sm1)!important}.m-sm1{margin:var(--sm1)!important}.mt-sm1{margin-top:var(--sm1)!important}.mb-sm1{margin-bottom:var(--sm1)!important}.ml-sm1{margin-left:var(--sm1)!important}.mr-sm1{margin-right:var(--sm1)!important}.mis-sm1{margin-inline-start:var(--sm1)!important}.mie-sm1{margin-inline-end:var(--sm1)!important}.p-sm1{padding:var(--sm1)!important}.pt-sm1{padding-top:var(--sm1)!important}.pb-sm1{padding-bottom:var(--sm1)!important}.pl-sm1{padding-left:var(--sm1)!important}.pr-sm1{padding-right:var(--sm1)!important}.pis-sm1{padding-inline-start:var(--sm1)!important}.pie-sm1{padding-inline-end:var(--sm1)!important}.w-sm2{width:var(--sm2)!important}.h-sm2{height:var(--sm2)!important}.m-sm2{margin:var(--sm2)!important}.mt-sm2{margin-top:var(--sm2)!important}.mb-sm2{margin-bottom:var(--sm2)!important}.ml-sm2{margin-left:var(--sm2)!important}.mr-sm2{margin-right:var(--sm2)!important}.mis-sm2{margin-inline-start:var(--sm2)!important}.mie-sm2{margin-inline-end:var(--sm2)!important}.p-sm2{padding:var(--sm2)!important}.pt-sm2{padding-top:var(--sm2)!important}.pb-sm2{padding-bottom:var(--sm2)!important}.pl-sm2{padding-left:var(--sm2)!important}.pr-sm2{padding-right:var(--sm2)!important}.pis-sm2{padding-inline-start:var(--sm2)!important}.pie-sm2{padding-inline-end:var(--sm2)!important}.w-sm3{width:var(--sm3)!important}.h-sm3{height:var(--sm3)!important}.m-sm3{margin:var(--sm3)!important}.mt-sm3{margin-top:var(--sm3)!important}.mb-sm3{margin-bottom:var(--sm3)!important}.ml-sm3{margin-left:var(--sm3)!important}.mr-sm3{margin-right:var(--sm3)!important}.mis-sm3{margin-inline-start:var(--sm3)!important}.mie-sm3{margin-inline-end:var(--sm3)!important}.p-sm3{padding:var(--sm3)!important}.pt-sm3{padding-top:var(--sm3)!important}.pb-sm3{padding-bottom:var(--sm3)!important}.pl-sm3{padding-left:var(--sm3)!important}.pr-sm3{padding-right:var(--sm3)!important}.pis-sm3{padding-inline-start:var(--sm3)!important}.pie-sm3{padding-inline-end:var(--sm3)!important}.w-md1{width:var(--md1)!important}.h-md1{height:var(--md1)!important}.m-md1{margin:var(--md1)!important}.mt-md1{margin-top:var(--md1)!important}.mb-md1{margin-bottom:var(--md1)!important}.ml-md1{margin-left:var(--md1)!important}.mr-md1{margin-right:var(--md1)!important}.mis-md1{margin-inline-start:var(--md1)!important}.mie-md1{margin-inline-end:var(--md1)!important}.p-md1{padding:var(--md1)!important}.pt-md1{padding-top:var(--md1)!important}.pb-md1{padding-bottom:var(--md1)!important}.pl-md1{padding-left:var(--md1)!important}.pr-md1{padding-right:var(--md1)!important}.pis-md1{padding-inline-start:var(--md1)!important}.pie-md1{padding-inline-end:var(--md1)!important}.w-md2{width:var(--md2)!important}.h-md2{height:var(--md2)!important}.m-md2{margin:var(--md2)!important}.mt-md2{margin-top:var(--md2)!important}.mb-md2{margin-bottom:var(--md2)!important}.ml-md2{margin-left:var(--md2)!important}.mr-md2{margin-right:var(--md2)!important}.mis-md2{margin-inline-start:var(--md2)!important}.mie-md2{margin-inline-end:var(--md2)!important}.p-md2{padding:var(--md2)!important}.pt-md2{padding-top:var(--md2)!important}.pb-md2{padding-bottom:var(--md2)!important}.pl-md2{padding-left:var(--md2)!important}.pr-md2{padding-right:var(--md2)!important}.pis-md2{padding-inline-start:var(--md2)!important}.pie-md2{padding-inline-end:var(--md2)!important}.w-md3{width:var(--md3)!important}.h-md3{height:var(--md3)!important}.m-md3{margin:var(--md3)!important}.mt-md3{margin-top:var(--md3)!important}.mb-md3{margin-bottom:var(--md3)!important}.ml-md3{margin-left:var(--md3)!important}.mr-md3{margin-right:var(--md3)!important}.mis-md3{margin-inline-start:var(--md3)!important}.mie-md3{margin-inline-end:var(--md3)!important}.p-md3{padding:var(--md3)!important}.pt-md3{padding-top:var(--md3)!important}.pb-md3{padding-bottom:var(--md3)!important}.pl-md3{padding-left:var(--md3)!important}.pr-md3{padding-right:var(--md3)!important}.pis-md3{padding-inline-start:var(--md3)!important}.pie-md3{padding-inline-end:var(--md3)!important}.w-lg1{width:var(--lg1)!important}.h-lg1{height:var(--lg1)!important}.m-lg1{margin:var(--lg1)!important}.mt-lg1{margin-top:var(--lg1)!important}.mb-lg1{margin-bottom:var(--lg1)!important}.ml-lg1{margin-left:var(--lg1)!important}.mr-lg1{margin-right:var(--lg1)!important}.mis-lg1{margin-inline-start:var(--lg1)!important}.mie-lg1{margin-inline-end:var(--lg1)!important}.p-lg1{padding:var(--lg1)!important}.pt-lg1{padding-top:var(--lg1)!important}.pb-lg1{padding-bottom:var(--lg1)!important}.pl-lg1{padding-left:var(--lg1)!important}.pr-lg1{padding-right:var(--lg1)!important}.pis-lg1{padding-inline-start:var(--lg1)!important}.pie-lg1{padding-inline-end:var(--lg1)!important}.w-lg2{width:var(--lg2)!important}.h-lg2{height:var(--lg2)!important}.m-lg2{margin:var(--lg2)!important}.mt-lg2{margin-top:var(--lg2)!important}.mb-lg2{margin-bottom:var(--lg2)!important}.ml-lg2{margin-left:var(--lg2)!important}.mr-lg2{margin-right:var(--lg2)!important}.mis-lg2{margin-inline-start:var(--lg2)!important}.mie-lg2{margin-inline-end:var(--lg2)!important}.p-lg2{padding:var(--lg2)!important}.pt-lg2{padding-top:var(--lg2)!important}.pb-lg2{padding-bottom:var(--lg2)!important}.pl-lg2{padding-left:var(--lg2)!important}.pr-lg2{padding-right:var(--lg2)!important}.pis-lg2{padding-inline-start:var(--lg2)!important}.pie-lg2{padding-inline-end:var(--lg2)!important}.w-lg3{width:var(--lg3)!important}.h-lg3{height:var(--lg3)!important}.m-lg3{margin:var(--lg3)!important}.mt-lg3{margin-top:var(--lg3)!important}.mb-lg3{margin-bottom:var(--lg3)!important}.ml-lg3{margin-left:var(--lg3)!important}.mr-lg3{margin-right:var(--lg3)!important}.mis-lg3{margin-inline-start:var(--lg3)!important}.mie-lg3{margin-inline-end:var(--lg3)!important}.p-lg3{padding:var(--lg3)!important}.pt-lg3{padding-top:var(--lg3)!important}.pb-lg3{padding-bottom:var(--lg3)!important}.pl-lg3{padding-left:var(--lg3)!important}.pr-lg3{padding-right:var(--lg3)!important}.pis-lg3{padding-inline-start:var(--lg3)!important}.pie-lg3{padding-inline-end:var(--lg3)!important}.w-xl1{width:var(--xl1)!important}.h-xl1{height:var(--xl1)!important}.m-xl1{margin:var(--xl1)!important}.mt-xl1{margin-top:var(--xl1)!important}.mb-xl1{margin-bottom:var(--xl1)!important}.ml-xl1{margin-left:var(--xl1)!important}.mr-xl1{margin-right:var(--xl1)!important}.mis-xl1{margin-inline-start:var(--xl1)!important}.mie-xl1{margin-inline-end:var(--xl1)!important}.p-xl1{padding:var(--xl1)!important}.pt-xl1{padding-top:var(--xl1)!important}.pb-xl1{padding-bottom:var(--xl1)!important}.pl-xl1{padding-left:var(--xl1)!important}.pr-xl1{padding-right:var(--xl1)!important}.pis-xl1{padding-inline-start:var(--xl1)!important}.pie-xl1{padding-inline-end:var(--xl1)!important}.w-xl2{width:var(--xl2)!important}.h-xl2{height:var(--xl2)!important}.m-xl2{margin:var(--xl2)!important}.mt-xl2{margin-top:var(--xl2)!important}.mb-xl2{margin-bottom:var(--xl2)!important}.ml-xl2{margin-left:var(--xl2)!important}.mr-xl2{margin-right:var(--xl2)!important}.mis-xl2{margin-inline-start:var(--xl2)!important}.mie-xl2{margin-inline-end:var(--xl2)!important}.p-xl2{padding:var(--xl2)!important}.pt-xl2{padding-top:var(--xl2)!important}.pb-xl2{padding-bottom:var(--xl2)!important}.pl-xl2{padding-left:var(--xl2)!important}.pr-xl2{padding-right:var(--xl2)!important}.pis-xl2{padding-inline-start:var(--xl2)!important}.pie-xl2{padding-inline-end:var(--xl2)!important}.w-xl3{width:var(--xl3)!important}.h-xl3{height:var(--xl3)!important}.m-xl3{margin:var(--xl3)!important}.mt-xl3{margin-top:var(--xl3)!important}.mb-xl3{margin-bottom:var(--xl3)!important}.ml-xl3{margin-left:var(--xl3)!important}.mr-xl3{margin-right:var(--xl3)!important}.mis-xl3{margin-inline-start:var(--xl3)!important}.mie-xl3{margin-inline-end:var(--xl3)!important}.p-xl3{padding:var(--xl3)!important}.pt-xl3{padding-top:var(--xl3)!important}.pb-xl3{padding-bottom:var(--xl3)!important}.pl-xl3{padding-left:var(--xl3)!important}.pr-xl3{padding-right:var(--xl3)!important}.pis-xl3{padding-inline-start:var(--xl3)!important}.pie-xl3{padding-inline-end:var(--xl3)!important}.w-xxl1{width:var(--xxl1)!important}.h-xxl1{height:var(--xxl1)!important}.m-xxl1{margin:var(--xxl1)!important}.mt-xxl1{margin-top:var(--xxl1)!important}.mb-xxl1{margin-bottom:var(--xxl1)!important}.ml-xxl1{margin-left:var(--xxl1)!important}.mr-xxl1{margin-right:var(--xxl1)!important}.mis-xxl1{margin-inline-start:var(--xxl1)!important}.mie-xxl1{margin-inline-end:var(--xxl1)!important}.p-xxl1{padding:var(--xxl1)!important}.pt-xxl1{padding-top:var(--xxl1)!important}.pb-xxl1{padding-bottom:var(--xxl1)!important}.pl-xxl1{padding-left:var(--xxl1)!important}.pr-xxl1{padding-right:var(--xxl1)!important}.pis-xxl1{padding-inline-start:var(--xxl1)!important}.pie-xxl1{padding-inline-end:var(--xxl1)!important}.w-xxl2{width:var(--xxl2)!important}.h-xxl2{height:var(--xxl2)!important}.m-xxl2{margin:var(--xxl2)!important}.mt-xxl2{margin-top:var(--xxl2)!important}.mb-xxl2{margin-bottom:var(--xxl2)!important}.ml-xxl2{margin-left:var(--xxl2)!important}.mr-xxl2{margin-right:var(--xxl2)!important}.mis-xxl2{margin-inline-start:var(--xxl2)!important}.mie-xxl2{margin-inline-end:var(--xxl2)!important}.p-xxl2{padding:var(--xxl2)!important}.pt-xxl2{padding-top:var(--xxl2)!important}.pb-xxl2{padding-bottom:var(--xxl2)!important}.pl-xxl2{padding-left:var(--xxl2)!important}.pr-xxl2{padding-right:var(--xxl2)!important}.pis-xxl2{padding-inline-start:var(--xxl2)!important}.pie-xxl2{padding-inline-end:var(--xxl2)!important}.w-xxl3{width:var(--xxl3)!important}.h-xxl3{height:var(--xxl3)!important}.m-xxl3{margin:var(--xxl3)!important}.mt-xxl3{margin-top:var(--xxl3)!important}.mb-xxl3{margin-bottom:var(--xxl3)!important}.ml-xxl3{margin-left:var(--xxl3)!important}.mr-xxl3{margin-right:var(--xxl3)!important}.mis-xxl3{margin-inline-start:var(--xxl3)!important}.mie-xxl3{margin-inline-end:var(--xxl3)!important}.p-xxl3{padding:var(--xxl3)!important}.pt-xxl3{padding-top:var(--xxl3)!important}.pb-xxl3{padding-bottom:var(--xxl3)!important}.pl-xxl3{padding-left:var(--xxl3)!important}.pr-xxl3{padding-right:var(--xxl3)!important}.pis-xxl3{padding-inline-start:var(--xxl3)!important}.pie-xxl3{padding-inline-end:var(--xxl3)!important}.w-mega1{width:var(--mega1)!important}.h-mega1{height:var(--mega1)!important}.m-mega1{margin:var(--mega1)!important}.mt-mega1{margin-top:var(--mega1)!important}.mb-mega1{margin-bottom:var(--mega1)!important}.ml-mega1{margin-left:var(--mega1)!important}.mr-mega1{margin-right:var(--mega1)!important}.mis-mega1{margin-inline-start:var(--mega1)!important}.mie-mega1{margin-inline-end:var(--mega1)!important}.p-mega1{padding:var(--mega1)!important}.pt-mega1{padding-top:var(--mega1)!important}.pb-mega1{padding-bottom:var(--mega1)!important}.pl-mega1{padding-left:var(--mega1)!important}.pr-mega1{padding-right:var(--mega1)!important}.pis-mega1{padding-inline-start:var(--mega1)!important}.pie-mega1{padding-inline-end:var(--mega1)!important}.w-mega2{width:var(--mega2)!important}.h-mega2{height:var(--mega2)!important}.m-mega2{margin:var(--mega2)!important}.mt-mega2{margin-top:var(--mega2)!important}.mb-mega2{margin-bottom:var(--mega2)!important}.ml-mega2{margin-left:var(--mega2)!important}.mr-mega2{margin-right:var(--mega2)!important}.mis-mega2{margin-inline-start:var(--mega2)!important}.mie-mega2{margin-inline-end:var(--mega2)!important}.p-mega2{padding:var(--mega2)!important}.pt-mega2{padding-top:var(--mega2)!important}.pb-mega2{padding-bottom:var(--mega2)!important}.pl-mega2{padding-left:var(--mega2)!important}.pr-mega2{padding-right:var(--mega2)!important}.pis-mega2{padding-inline-start:var(--mega2)!important}.pie-mega2{padding-inline-end:var(--mega2)!important}.w-mega3{width:var(--mega3)!important}.h-mega3{height:var(--mega3)!important}.m-mega3{margin:var(--mega3)!important}.mt-mega3{margin-top:var(--mega3)!important}.mb-mega3{margin-bottom:var(--mega3)!important}.ml-mega3{margin-left:var(--mega3)!important}.mr-mega3{margin-right:var(--mega3)!important}.mis-mega3{margin-inline-start:var(--mega3)!important}.mie-mega3{margin-inline-end:var(--mega3)!important}.p-mega3{padding:var(--mega3)!important}.pt-mega3{padding-top:var(--mega3)!important}.pb-mega3{padding-bottom:var(--mega3)!important}.pl-mega3{padding-left:var(--mega3)!important}.pr-mega3{padding-right:var(--mega3)!important}.pis-mega3{padding-inline-start:var(--mega3)!important}.pie-mega3{padding-inline-end:var(--mega3)!important}.w-giga1{width:var(--giga1)!important}.h-giga1{height:var(--giga1)!important}.m-giga1{margin:var(--giga1)!important}.mt-giga1{margin-top:var(--giga1)!important}.mb-giga1{margin-bottom:var(--giga1)!important}.ml-giga1{margin-left:var(--giga1)!important}.mr-giga1{margin-right:var(--giga1)!important}.mis-giga1{margin-inline-start:var(--giga1)!important}.mie-giga1{margin-inline-end:var(--giga1)!important}.p-giga1{padding:var(--giga1)!important}.pt-giga1{padding-top:var(--giga1)!important}.pb-giga1{padding-bottom:var(--giga1)!important}.pl-giga1{padding-left:var(--giga1)!important}.pr-giga1{padding-right:var(--giga1)!important}.pis-giga1{padding-inline-start:var(--giga1)!important}.pie-giga1{padding-inline-end:var(--giga1)!important}.w-giga2{width:var(--giga2)!important}.h-giga2{height:var(--giga2)!important}.m-giga2{margin:var(--giga2)!important}.mt-giga2{margin-top:var(--giga2)!important}.mb-giga2{margin-bottom:var(--giga2)!important}.ml-giga2{margin-left:var(--giga2)!important}.mr-giga2{margin-right:var(--giga2)!important}.mis-giga2{margin-inline-start:var(--giga2)!important}.mie-giga2{margin-inline-end:var(--giga2)!important}.p-giga2{padding:var(--giga2)!important}.pt-giga2{padding-top:var(--giga2)!important}.pb-giga2{padding-bottom:var(--giga2)!important}.pl-giga2{padding-left:var(--giga2)!important}.pr-giga2{padding-right:var(--giga2)!important}.pis-giga2{padding-inline-start:var(--giga2)!important}.pie-giga2{padding-inline-end:var(--giga2)!important}.w-giga3{width:var(--giga3)!important}.h-giga3{height:var(--giga3)!important}.m-giga3{margin:var(--giga3)!important}.mt-giga3{margin-top:var(--giga3)!important}.mb-giga3{margin-bottom:var(--giga3)!important}.ml-giga3{margin-left:var(--giga3)!important}.mr-giga3{margin-right:var(--giga3)!important}.mis-giga3{margin-inline-start:var(--giga3)!important}.mie-giga3{margin-inline-end:var(--giga3)!important}.p-giga3{padding:var(--giga3)!important}.pt-giga3{padding-top:var(--giga3)!important}.pb-giga3{padding-bottom:var(--giga3)!important}.pl-giga3{padding-left:var(--giga3)!important}.pr-giga3{padding-right:var(--giga3)!important}.pis-giga3{padding-inline-start:var(--giga3)!important}.pie-giga3{padding-inline-end:var(--giga3)!important}.w-tera1{width:var(--tera1)!important}.h-tera1{height:var(--tera1)!important}.m-tera1{margin:var(--tera1)!important}.mt-tera1{margin-top:var(--tera1)!important}.mb-tera1{margin-bottom:var(--tera1)!important}.ml-tera1{margin-left:var(--tera1)!important}.mr-tera1{margin-right:var(--tera1)!important}.mis-tera1{margin-inline-start:var(--tera1)!important}.mie-tera1{margin-inline-end:var(--tera1)!important}.p-tera1{padding:var(--tera1)!important}.pt-tera1{padding-top:var(--tera1)!important}.pb-tera1{padding-bottom:var(--tera1)!important}.pl-tera1{padding-left:var(--tera1)!important}.pr-tera1{padding-right:var(--tera1)!important}.pis-tera1{padding-inline-start:var(--tera1)!important}.pie-tera1{padding-inline-end:var(--tera1)!important}.w-tera2{width:var(--tera2)!important}.h-tera2{height:var(--tera2)!important}.m-tera2{margin:var(--tera2)!important}.mt-tera2{margin-top:var(--tera2)!important}.mb-tera2{margin-bottom:var(--tera2)!important}.ml-tera2{margin-left:var(--tera2)!important}.mr-tera2{margin-right:var(--tera2)!important}.mis-tera2{margin-inline-start:var(--tera2)!important}.mie-tera2{margin-inline-end:var(--tera2)!important}.p-tera2{padding:var(--tera2)!important}.pt-tera2{padding-top:var(--tera2)!important}.pb-tera2{padding-bottom:var(--tera2)!important}.pl-tera2{padding-left:var(--tera2)!important}.pr-tera2{padding-right:var(--tera2)!important}.pis-tera2{padding-inline-start:var(--tera2)!important}.pie-tera2{padding-inline-end:var(--tera2)!important}.w-tera3{width:var(--tera3)!important}.h-tera3{height:var(--tera3)!important}.m-tera3{margin:var(--tera3)!important}.mt-tera3{margin-top:var(--tera3)!important}.mb-tera3{margin-bottom:var(--tera3)!important}.ml-tera3{margin-left:var(--tera3)!important}.mr-tera3{margin-right:var(--tera3)!important}.mis-tera3{margin-inline-start:var(--tera3)!important}.mie-tera3{margin-inline-end:var(--tera3)!important}.p-tera3{padding:var(--tera3)!important}.pt-tera3{padding-top:var(--tera3)!important}.pb-tera3{padding-bottom:var(--tera3)!important}.pl-tera3{padding-left:var(--tera3)!important}.pr-tera3{padding-right:var(--tera3)!important}.pis-tera3{padding-inline-start:var(--tera3)!important}.pie-tera3{padding-inline-end:var(--tera3)!important}}@layer helpers{.font-text{font-family:var(--text)!important}.font-display{font-family:var(--display)!important}.font-mono{font-family:var(--mono)!important}.font-italic{font-style:italic!important}.font-normal{font-style:normal!important}.font-extra-light{font-weight:var(--extra-light)!important}.font-light{font-weight:var(--light)!important}.font-book{font-weight:var(--book)!important}.font-semi-bold{font-weight:var(--semi-bold)!important}.font-bold{font-weight:var(--bold)!important}.font-black{font-weight:var(--black)!important}.text-xs{font-size:var(--text-xs)!important}.text-sm{font-size:var(--text-sm)!important}.text-md{font-size:var(--text-md)!important}.text-lg{font-size:var(--text-lg)!important}.text-xl{font-size:var(--text-xl)!important}.display-sm{font-size:var(--display-sm)!important}.display-md{font-size:var(--display-md)!important}.display-lg{font-size:var(--display-lg)!important}.display-xl{font-size:var(--display-xl)!important}.display-mega{font-size:var(--display-mega)!important}.display-giga{font-size:var(--display-giga)!important}.tracking-sm{letter-spacing:var(--tracking-sm)!important}.tracking-md{letter-spacing:var(--tracking-md)!important}.tracking-lg{letter-spacing:var(--tracking-lg)!important}.tracking-xl{letter-spacing:var(--tracking-xl)!important}.tracking-xxl{letter-spacing:var(--tracking-xxl)!important}.leading-xs{line-height:var(--leading-xs)!important}.leading-sm{line-height:var(--leading-sm)!important}.leading-md{line-height:var(--leading-md)!important}.leading-lg{line-height:var(--leading-lg)!important}.leading-xl{line-height:var(--leading-xl)!important}.leading-xxl{line-height:var(--leading-xxl)!important}.text-left{text-align:left!important}.text-center{text-align:center!important}.text-right{text-align:right!important}.text-justify{text-align:justify!important}.text-start{text-align:start!important}.text-end{text-align:end!important}.text-uppercase{text-transform:uppercase!important}.text-lowercase{text-transform:lowercase!important}.text-capitalize{text-transform:capitalize!important}}@layer theme.default{:root{--xs1: 4px;--xs2: 8px;--xs3: 12px;--sm1: 16px;--sm2: 20px;--sm3: 24px;--md1: 28px;--md2: 32px;--md3: 36px;--lg1: 40px;--lg2: 44px;--lg3: 48px;--xl1: 56px;--xl2: 64px;--xl3: 80px;--xxl1: 96px;--xxl2: 112px;--xxl3: 128px;--mega1: 160px;--mega2: 192px;--mega3: 224px;--giga1: 256px;--giga2: 288px;--giga3: 320px;--tera1: 384px;--tera2: 480px;--tera3: 520px;--ar-square: 1;--ar-landscape: 4/3;--ar-portrait: 3/4;--ar-widescreen: 16/9;--ar-golden: 1.618/1;--display: Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, ui-sans-serif, sans-serif;--text: ui-sans-serif, system-ui, sans-serif;--mono: Dank Mono, Inconsolata, Fira Mono, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, ui-monospace, monospace;--text-xs: .694rem;--text-sm: .833rem;--text-md: 1rem;--text-lg: 1.2rem;--text-xl: 1.44rem;--display-sm: 1.728rem;--display-md: 2.074rem;--display-lg: 2.488rem;--display-xl: 2.986rem;--display-mega: 3.583rem;--display-giga: 4.299rem;--extra-light: 200;--light: 300;--book: 400;--semi-bold: 600;--bold: 700;--black: 900;--tracking-sm: -.05em;--tracking-md: .025em;--tracking-lg: .05em;--tracking-xl: .075em;--tracking-xxl: .15em;--leading-xs: 1;--leading-sm: 1.15;--leading-md: 1.375;--leading-lg: 1.5;--leading-xl: 1.75;--leading-xxl: 2;--base-0: #fff;--base-50: #f6f7f9;--base-100: #edeef1;--base-200: #d6dbe1;--base-300: #b2bbc7;--base-400: #8897a8;--base-500: #697a8e;--base-600: #546375;--base-700: #4a5666;--base-800: #3c4550;--base-900: #353c45;--base-950: #23282e;--primary-50: #f0f9ff;--primary-100: #e0f2fe;--primary-200: #bae6fd;--primary-300: #7dd3fc;--primary-400: #38bdf8;--primary-500: #0ea5e9;--primary-600: #0284c7;--primary-700: #0369a1;--primary-800: #075985;--primary-900: #0c4a6e;--primary-950: #082f49;--yes-100: #d5f6e8;--yes-200: #afebd4;--yes-300: #7adbbd;--yes-400: #46c4a0;--yes-500: #13886d;--no-100: #ffe4e6;--no-200: #fecdd3;--no-300: #fda4af;--no-400: #fb7185;--no-500: #e11d48;--maybe-100: #fff7d6;--maybe-200: #fff0b3;--maybe-300: #ffd64a;--maybe-400: #ffc220;--maybe-500: #f9a007;--highlight-500: #ffee00;--border-sm: 1px;--border-md: 2px;--border-lg: 4px;--border-xl: 8px;--border-xxl: 12px;--radius-sm: 3px;--radius-md: 5px;--radius-lg: 8px;--radius-xl: 12px;--radius-xxl: 16px;--radius-round: 1e5px;--shadow-sm: 0 1px 3px 0 var(--ui-shadow-color), 0 1px 2px -1px var(--ui-shadow-color);--shadow-md: 0 4px 6px -1px var(--ui-shadow-color), 0 2px 4px -2px var(--ui-shadow-color);--shadow-lg: 0 8px 13px -3px var(--ui-shadow-color), 0 4px 6px -4px var(--ui-shadow-color);--shadow-xl: 0 20px 20px -5px var(--ui-shadow-color), 0 8px 10px -6px var(--ui-shadow-color);--shadow-xxl: 0px 11px 8px -6px var(--ui-shadow-color), 0 10px 15px 2px var(--ui-shadow-color);--o-0: 0;--o-1: .2;--o-2: .4;--o-3: .6;--o-4: .8;--o-5: 1;--z-bottom: -1000000000;--z-0: 0;--z-1: 10;--z-2: 20;--z-3: 30;--z-4: 40;--z-5: 50;--z-top: 1000000000;--transition: .22s ease-in-out;--transition-fast: .1s ease-in-out}}@layer theme.default{:root{color-scheme:light dark;--ui-border-color: light-dark(var(--base-200), var(--base-500));--ui-shadow-color: light-dark(rgb(0 0 0 / .1), rgb(0 0 0 / .6));--focus-ring-color: light-dark(var(--primary-500), var(--primary-400));--focus-ring-width: 2px;--focus-ring-offset: 2px}:root.theme-light{color-scheme:light}:root.theme-dark{color-scheme:dark}:root{accent-color:var(--primary-500);--body-background-color: light-dark(var(--base-0), var(--base-950));--body-line-height: var(--leading-lg);--input-height: var(--md3);--input-padding: var(--xs3);--input-border-width: var(--border-sm);--input-border-color: var(--ui-border-color);--input-border-radius: var(--radius-md);--input-border-color-invalid: light-dark(var(--no-500), var(--no-400));--label-spacing: var(--xs1);--fieldset-padding: var(--sm3);--fieldset-border-width: var(--border-sm);--fieldset-border-color: var(--ui-border-color);--fieldset-border-radius: var(--radius-lg);--meter-height: var(--sm1);--meter-border-radius: var(--radius-md);--meter-track-color: var(--primary-100);--meter-low-color: var(--no-400);--meter-medium-color: var(--maybe-400);--meter-high-color: var(--yes-400);--progress-height: var(--sm1);--progress-color: var(--primary-500);--progress-track-color: var(--primary-100);--progress-border-radius: var(--radius-md);--select-icon-size: var(--sm3);--select-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");--dialog-min-width: var(--tera1);--dialog-max-width: var(--tera3);--dialog-padding: var(--lg1) var(--md1);--dialog-border-width: var(--border-sm);--dialog-border-color: light-dark(var(--base-200), var(--base-800));--dialog-background-color: light-dark(var(--base-50), var(--base-900));--dialog-border-radius: var(--radius-lg);--dialog-backdrop-color: var(--base-950);--dialog-backdrop-opacity: var(--o-4);--details-padding: var(--sm1);--details-spacing: var(--xs3);--details-border-width: var(--border-sm);--details-border-color: light-dark(var(--base-200), var(--base-800));--details-background-color: light-dark(var(--base-50), var(--base-900));--details-border-radius: var(--radius-lg);--details-icon-size: var(--sm3);--details-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");--table-padding: var(--xs2) var(--sm1);--table-border-width: var(--border-sm);--table-border-color: light-dark(var(--base-100), var(--base-700));--table-border-radius: var(--radius-md);--table-background-color: none;--table-caption-spacing: var(--xs3);--figcaption-spacing: var(--xs2);--heading-font: var(--display);--heading-weight: var(--black);--heading-letter-spacing: normal;--heading-font-size-h1: clamp( var(--display-md), 1.269rem + 2.682vw, var(--display-xl) );--heading-font-size-h2: clamp( var(--display-sm), 1.057rem + 2.235vw, var(--display-lg) );--heading-font-size-h3: clamp( var(--text-xl), .881rem + 1.865vw, var(--display-md) );--heading-font-size-h4: clamp( var(--text-lg), .734rem + 1.553vw, var(--display-sm) );--heading-font-size-h5: clamp( var(--text-lg), .988rem + .706vw, var(--text-xl) );--heading-font-size-h6: clamp( var(--text-md), .824rem + .588vw, var(--text-lg) );--heading-line-height: var(--leading-sm);--heading-line-height-h1: var(--heading-line-height);--heading-line-height-h2: var(--heading-line-height);--heading-line-height-h3: var(--heading-line-height);--heading-line-height-h4: var(--leading-md);--heading-line-height-h5: var(--leading-md);--heading-line-height-h6: var(--leading-md);--heading-spacing-h1: .4em;--heading-spacing-h2: .4em;--heading-spacing-h3: .4em;--heading-spacing-h4: .4em;--heading-spacing-h5: .4em;--heading-spacing-h6: .4em;--heading-spacing-consecutive: .3em;--text-color: light-dark(var(--base-950), var(--base-200));--link-font-weight: var(--semi-bold);--link-color: light-dark(var(--primary-600), var(--primary-400));--link-color-hover: var(--primary-500);--text-code-color: light-dark(var(--primary-600), var(--primary-400));--text-code-background-color: light-dark( var(--primary-100), var(--primary-900) );--text-code-muted-color: light-dark(var(--base-500), var(--base-300));--pre-border-radius: var(--radius-md);--pre-font-size: .9rem;--blockquote-padding-block: var(--sm1);--blockquote-padding-inline: var(--md1) var(--sm3);--blockquote-background-color: light-dark( var(--primary-50), var(--primary-900) );--blockquote-border-radius: var(--radius-md);--blockquote-accent-width: var(--xs2);--blockquote-accent-color: linear-gradient( var(--primary-800), var(--primary-500) );--hr-content: "";--ins-color: var(--base-950);--ins-background-color: var(--yes-200);--marker-color: var(--highlight-500);--selection-color: light-dark(var(--base-950), var(--base-0));--selection-background-color: light-dark( var(--primary-200), var(--primary-700) )}:root{--grid-column-gap: var(--sm1);--grid-row-gap: var(--sm1);@media(width>=768px){--grid-column-gap: var(--sm3);--grid-row-gap: var(--sm3)}--wrap-spacing: var(--sm1);--wrap-md-spacing: var(--sm3);--wrap-lg-spacing: 0;--wrap-width-sm: minmax(0, 55ch);--wrap-width-md: minmax(0, 70ch);--wrap-width-lg: minmax(0, 900px);--wrap-width: var(--wrap-width-md);--layout-content-width: 70ch;--layout-aside-width: 245px;--layout-toc-width: 1fr;--prose-spacing: var(--sm1)}:root{--badge-font-size: var(--text-sm);--badge-border-radius: var(--radius-md);--badge-color: var(--base-0);--badge-background-color: light-dark(var(--base-700), var(--base-600));--badge-primary-color: var(--base-0);--badge-primary-background-color: light-dark( var(--primary-600), var(--primary-500) );--badge-success-color: light-dark(var(--yes-500), var(--base-0));--badge-success-background-color: light-dark(var(--yes-100), var(--yes-500));--badge-danger-color: light-dark(var(--no-500), var(--base-0));--badge-danger-background-color: light-dark(var(--no-100), var(--no-500));--badge-warning-color: light-dark(var(--maybe-500), var(--base-950));--badge-warning-background-color: light-dark( var(--maybe-100), var(--maybe-500) )}:root{--bt-min-width: 101px;--bt-min-width-md: 123px;--bt-min-width-lg: 133px;--bt-font-size: var(--text-sm);--bt-font-size-lg: var(--text-md);--bt-font-weight: var(--semi-bold);--bt-color: var(--text-color);--bt-color-hover: light-dark(var(--text-color), var(--base-0));--bt-background-color: light-dark(var(--base-0), var(--base-800));--bt-background-color-hover: light-dark(var(--base-50), var(--base-900));--bt-border-color: var(--ui-border-color);--bt-border-width: var(--border-sm);--bt-border-radius: var(--radius-lg);--bt-border-radius-lg: var(--radius-xl);--bt-outline-color-hover: light-dark(var(--base-950), var(--base-0));--bt-outline-background-color-hover: light-dark( rgb(0 0 0 / .1), rgb(255 255 255 / .1) );--bt-outline-border-color: light-dark(var(--base-950), var(--base-0));--bt-outline-border-color-hover: light-dark(var(--base-950), var(--base-0));--bt-primary-color: var(--base-0);--bt-primary-color-hover: var(--base-0);--bt-primary-background-color: var(--primary-600);--bt-primary-background-color-hover: var(--primary-500);--bt-primary-border-color: var(--primary-600);--bt-primary-border-color-hover: var(--primary-600)}:root{--avatar-color: var(--base-0);--avatar-background-color: var(--base-400);--avatar-border-color: light-dark(var(--base-0), var(--base-500));--avatar-border-width: var(--border-sm);--avatar-radius: var(--radius-round);--avatar-status-dot-color-offline: var(--base-300);--avatar-status-dot-color-online: var(--yes-400)}:root{--banner-color: var(--base-0);--banner-background-color: light-dark(var(--primary-600), var(--primary-800))}:root{--breadcrumbs-separator: "/";--breadcrumbs-separator-color: light-dark(var(--base-300), var(--base-600));--breadcrumbs-color: light-dark(var(--base-500), var(--base-400));--breadcrumbs-color-current: var(--text-color)}:root{--card-spacing: var(--sm3);--card-color: var(--text-color);--card-secondary-text-color: light-dark(var(--base-400), var(--base-500));--card-bg-color: light-dark(var(--base-100), var(--base-900));--card-border-radius: var(--radius-lg);--card-border-color: var(--ui-border-color);--card-border-width: var(--border-sm);--card-shadow: var(--shadow-md);--card-shadow-hover: var(--shadow-xl);--card-loading-bg: light-dark(var(--base-200), var(--base-900));--card-aspect-ratio: var(--ar-golden)}:root{--toggle-width: 50px;--toggle-height: 28px;--toggle-border-width: 2px;--toggle-track-color: light-dark(var(--base-300), var(--base-700));--toggle-track-color-checked: var(--yes-400);--toggle-thumb-color: var(--body-background-color)}:root{--faq-spacing: var(--xs3)}:root{--field-spacing: var(--xs1);--field-hint-color: light-dark(var(--base-400), var(--base-500));--field-error-color: light-dark(var(--no-500), var(--no-300));--field-message-position: static}:root{--featureItem-icon-box-size: var(--lg3);--featureItem-icon-size: var(--sm3);--featureItem-icon-color: light-dark(var(--primary-600), var(--primary-300));--featureItem-icon-background-color: light-dark( var(--primary-100), var(--primary-900) );--featureItem-icon-border-radius: var(--radius-lg)}:root{--footer-background-color: light-dark(var(--primary-950), var(--base-950));--footer-text-color: light-dark(var(--base-0), var(--base-200));--footer-border-width: var(--border-md);--footer-border-color: light-dark(transparent, var(--base-700));--footer-link-color: light-dark(var(--base-0), var(--base-200));--footer-link-color-hover: light-dark(var(--primary-200), var(--base-0))}:root{--header-height: var(--xl1);--header-padding: var(--sm1);@media(width>=768px){--header-height: var(--xl2);--header-padding: var(--sm3)}--header-background-color: light-dark(var(--base-0), var(--base-950));--header-menu-background-color: var(--base-950);--header-menu-color: var(--base-0);--header-menu-color-current: var(--primary-400);--header-menu-secondary-color: var(--base-300);--header-menu-border-color: var(--base-500)}:root{--hero-radius: var(--radius-xl);--hero-content-padding: var(--md3);--hero-actions-spacing: var(--lg3);--hero-pagination-dot: var(--sm1);--hero-pagination-dot-color: var(--base-0);--hero-pagination-dot-active-color: var(--primary-600);--hero-pagination-opacity: var(--o-4)}:root{--pagination-size: var(--md3);--pagination-border-radius: var(--radius-md);--pagination-color: var(--text-color);--pagination-color-current: var(--base-0);--pagination-background-color-current: light-dark( var(--primary-600), var(--primary-500) );--pagination-background-color-hover: light-dark( var(--base-100), var(--base-800) )}:root{--prevNext-border-color: var(--ui-border-color);--prevNext-border-radius: var(--radius-lg);--prevNext-border-color-hover: var(--link-color);--prevNext-label-color: light-dark(var(--base-400), var(--base-500))}:root{--notice-spacing: var(--sm1);--notice-text-color: light-dark(var(--base-950), var(--base-0));--notice-background-color: light-dark(var(--base-50), var(--base-800));--notice-border-color: light-dark(var(--base-200), var(--base-500));--notice-border-width: var(--border-sm);--notice-border-radius: var(--radius-lg)}:root{--pricingCard-highlight-border-color: light-dark( var(--primary-600), var(--primary-400) );--pricingCard-check-color: light-dark(var(--yes-500), var(--yes-400))}:root{--readProgressBar-height: var(--xs1);--readProgressBar-color: linear-gradient( 90deg, var(--primary-600) 0%, var(--primary-400) 100% )}:root{--section-spacing: var(--xl3);--section-header-spacing: var(--lg3);--section-eyebrow-color: light-dark(var(--primary-600), var(--primary-400));--section-lede-color: light-dark(var(--base-500), var(--base-400));--section-filled-background-color: light-dark( var(--base-50), var(--base-900) );--section-primary-background-color: light-dark( var(--primary-600), var(--primary-900) );--section-primary-text-color: var(--base-0);--section-primary-link-color: var(--primary-100);--section-primary-link-color-hover: var(--base-0);--section-primary-eyebrow-color: var(--primary-200);--section-primary-lede-color: var(--primary-100)}:root{--testimonial-role-color: light-dark(var(--base-400), var(--base-500))}:root{--tags-padding: var(--xs2);--tags-font-size: var(--text-sm);--tags-color: light-dark(var(--base-500), var(--base-400));--tags-background-color: light-dark(var(--base-100), var(--base-800));--tags-background-color-hover: light-dark(var(--base-200), var(--base-950));--tags-radius: var(--radius-md)}:root{--toc-color: var(--link-color);--toc-color-hover: var(--link-color-hover);--toc-spacing: var(--xs1);--toc-indentation: var(--xs3);--toc-icon-size: var(--sm1)}} diff --git a/src/content/docs/ai.mdx b/src/content/docs/ai.mdx index 9c6c1b36..59615921 100644 --- a/src/content/docs/ai.mdx +++ b/src/content/docs/ai.mdx @@ -66,7 +66,7 @@ Do not edit framework files. - Every token lives in the default theme, split in two: `theme.default.tokens.css` holds the scales (palettes, type scale, spacing, radii), `theme.default.ui.css` holds the ui tokens, the public API of every element and component (semantic aliases plus all defaults). Placement is by name: a token named for what it's for (`--heading-*`, `--bt-*`, `--ui-border-color`) is a ui token; a token named for what it is (`--sm1`, `--base-500`) is a scale token. Values prefer another token (a shared-meaning ui token first, else a scale token); raw values only for content (strings, icon URLs), one-off control geometry, or element-relative `em`/`ch` measures. - Grammar: `--component-part-property`, longhand, kebab-case, no abbreviations: `--bt-background-color-hover`, `--notice-border-width`. -- Feedback colors: use the semantic aliases `--success-*`, `--danger-*`, `--warning-*`, not the raw scales they point at. +- Feedback colors come straight from the `--yes-*` / `--no-*` / `--maybe-*` palettes; there is no separate success/danger/warning alias tier. - The same discipline applies to your own CSS: **no raw color and no raw type size in a `component.*.css` file.** If the theme doesn't name the value you need, add a token to the theme and use that. A `#8a5500` or a `1.0625rem` sitting in a component is a design decision nobody can find, and the second use of it will be a slightly different number. ### Organizing project CSS: one block per file diff --git a/src/content/docs/tokens.mdx b/src/content/docs/tokens.mdx index 806fbf64..d68da47c 100644 --- a/src/content/docs/tokens.mdx +++ b/src/content/docs/tokens.mdx @@ -45,7 +45,7 @@ The same discipline applies to the CSS you write on top of the framework: **no r [srcUi]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/theme.default.ui.css -UI tokens are the decisions half of the default theme. Every one is named for what it's _for_ (an element, a component, or a shared meaning) and answers "what does this thing use by default": semantic aliases like `--ui-border-color` or `--success-*`, element defaults (`--heading-*`, `--input-*`, ...), plus every component's token defaults (`--bt-*`, `--card-*`, ...). That naming is the whole split between the two files: a token named for what it _is_ (a step on a scale, like `--sm1` or `--base-500`) lives in `theme.default.tokens.css`; a token named for what it's _for_ lives in `theme.default.ui.css`. This gives tokens meaning and context, and it's what makes [themes](/docs/themes) powerful: override one ui token and every rule that consumes it follows. +UI tokens are the decisions half of the default theme. Every one is named for what it's _for_ (an element, a component, or a shared meaning) and answers "what does this thing use by default": semantic aliases like `--ui-border-color`, element defaults (`--heading-*`, `--input-*`, ...), plus every component's token defaults (`--bt-*`, `--card-*`, ...). That naming is the whole split between the two files: a token named for what it _is_ (a step on a scale, like `--sm1` or `--base-500`) lives in `theme.default.tokens.css`; a token named for what it's _for_ lives in `theme.default.ui.css`. This gives tokens meaning and context, and it's what makes [themes](/docs/themes) powerful: override one ui token and every rule that consumes it follows. A ui token usually takes another token for value: another ui token when the meaning is shared (`--input-border-color` is `--ui-border-color`), or a scale token when the value should follow the system scales (`--fieldset-padding` is `--sm3`). A raw value is correct only where following the scales would be wrong: content like separator strings and icon URLs, geometry tuned to one control (`--toggle-width`), and element-relative measures like the `em` heading spacing, which tracks each heading's own size instead of the page scale. The test: if a theme retuned the scales, should this value follow? diff --git a/src/styles/_global.css b/src/styles/_global.css index ffd3e406..97301357 100644 --- a/src/styles/_global.css +++ b/src/styles/_global.css @@ -3,27 +3,10 @@ /* mCSS component library (fills the `components` layer slot) */ @import url(./framework/mcss.components.css); -/* - Theme activation. Themes are part of this site's CSS, not the - framework's: mcss.css declares the theme layer slots but never fills - them. The default theme carries every design value, so activate exactly - one theme entry: theme.default.css for the stock look, or a skin like - theme.wireframe.css that composes the default and overrides on top. A - theme of this site's own would import after the default and land in - `theme.user` (copy theme.starter.css). No layer() annotation: - theme files self-layer. Unlayered site styles below beat any theme - no matter where these lines sit. -*/ @import url(./framework/theme.default.css); /* @import url(./framework/theme.wireframe.css); */ -/* - Site-only styles (docs site chrome, internal components, pages). - UNLAYERED: their normal declarations beat the framework layers and match - the cascade of other unlayered site CSS (expressive-code, Astro scoped - styles). Helpers still win everywhere: their !important declarations beat - unlayered CSS too. -*/ +/* Site-only styles (mCSS specific) */ @import url(./site/global.layout.css); @import url(./site/component.header.css); @@ -45,7 +28,7 @@ @import url(./site/component.selectMask.css); /* Page specific styles */ -/* (Use sparingly. Component is probably the way to go) */ +/* (Use sparingly. Components are usually the way to go) */ @import url(./site/page.blog.css); @import url(./site/page.docs.css); @import url(./site/page.home.css); diff --git a/src/styles/framework/elements.text.css b/src/styles/framework/elements.text.css index f4308d3e..a1a93f06 100644 --- a/src/styles/framework/elements.text.css +++ b/src/styles/framework/elements.text.css @@ -145,7 +145,7 @@ dd + dt { } del { - text-decoration-color: var(--danger-500); + text-decoration-color: var(--no-500); text-decoration-style: wavy; } diff --git a/src/styles/framework/help.devtools.css b/src/styles/framework/help.devtools.css index 93915580..b376ea1d 100644 --- a/src/styles/framework/help.devtools.css +++ b/src/styles/framework/help.devtools.css @@ -22,8 +22,8 @@ body.dev { z-index: var(--z-top) !important; padding: var(--sm1) !important; font-size: 1rem !important; - color: var(--danger-500) !important; - background: var(--danger-100) !important; - border: 1px solid var(--danger-500) !important; + color: var(--no-500) !important; + background: var(--no-100) !important; + border: 1px solid var(--no-500) !important; border-radius: var(--radius-md) !important; } diff --git a/src/styles/framework/mcss.css b/src/styles/framework/mcss.css index 663f4afb..09bfc1f0 100644 --- a/src/styles/framework/mcss.css +++ b/src/styles/framework/mcss.css @@ -1,32 +1,22 @@ /* mCSS framework entry point. - The framework lives in named cascade layers, declared here in priority - order (later wins). The layer name, not import order, decides priority. - Anything a consumer writes OUTSIDE these layers beats the framework by - default, with one exception: helpers use !important, and important layered - declarations beat unlayered CSS. Helpers are element-level overrides that - win everywhere, like inline styling. + mCSS recreates the ITCSS specificity strategy using modern CSS layers. + Anything outside these layers has higher specificity, except helpers which use + `!important` to override everything, by design. */ @layer base, elements, global, components, theme.default, theme.user, helpers; -/* Build-time only (@custom-media + mixin definitions, no runtime output) */ @import url(./settings.media-queries.css); @import url(./settings.mixins.css); /* - No theme is imported here, ever: the framework only declares the two - theme slots above. Every design value (scales and defaults) lives in the - default theme, which YOUR entry point activates right after this file: + Your theme is not imported here, but at the same level as mCSS: @import url(./framework/mcss.css); @import url(./framework/theme.default.css); - Without it, every token is unset and the page renders half-styled. Your - own theme (copy theme.starter.css) imports after that and lands in - `theme.user`, so it beats the default's `theme.default` no matter - the import order. Theme files self-layer, so no layer() annotation is - needed on their imports. See _global.css for this site's entry. + See the default theme for how to create your own. */ /* Reset & Normalize */ @@ -51,16 +41,16 @@ @import url(./global.wrap.css) layer(global); /* - No component is imported here either: this entry only declares the empty - `components` slot above. The component library lives in its own entry, - mcss.components.css, so consumers who build their own components can skip - it entirely. Import it alongside this file (any order: the slot declared - here decides priority) to get the full library. + Components are optional and not imported here + You import them at the same level as mCSS: + + @import url(./framework/mcss.css); + @import url(./framework/mcss.components.css); + + See the default theme for how to create your own. */ -/* Helpers for local overrides. Every declaration is !important on purpose: */ -/* important layered declarations beat unlayered CSS, so helpers win over */ -/* everything, including consumer CSS. */ +/* Helpers for local overrides. Every declaration is !important */ /* (Use VERY sparingly, or you might as well use Tailwind…) */ @import url(./help.colors.css) layer(helpers); @import url(./help.devtools.css) layer(helpers); diff --git a/src/styles/framework/theme.default.css b/src/styles/framework/theme.default.css index 97f84e65..37342342 100644 --- a/src/styles/framework/theme.default.css +++ b/src/styles/framework/theme.default.css @@ -1,32 +1,25 @@ -/* DEFAULT THEME (entry) */ +/* DEFAULT THEME */ /* - The framework's design values: the scales (theme.default.tokens.css) and - the defaults every element and component consumes (theme.default.ui.css). - Activate it from your own entry point, right after mcss.css: + Basic design tokens and UI abstractions + Import it next to mcss.css @import url(./framework/mcss.css); @import url(./framework/theme.default.css); mcss.css imports no theme itself; without this file every token is unset - and the page renders half-styled. + and the page will look broken.. - Never edit the default theme. Your palette, type, and overrides go in a - theme of your own, imported after this one (copy theme.starter.css). The - parts here land in the `theme.default` layer and your theme lands in - `theme.user`, so yours wins no matter the import order. A full - replacement skin works the same way: theme.wireframe.css composes this - entry and overrides on top. + Don't edit the default theme. + + To make your own theme, either duplicate/rename the 2 files below and + import theme instead of the default, or just override the bits you want + to change and imported that AFTER the defaults. There is `theme.starter.css` + to get you started if you want to go that road (recommended)). */ -/* Pin the layer order before anything else in this file: priority is - set by first declaration, so a theme loaded before mcss.css still - slots correctly. */ +/* Defensive redundancy - Same layers as in mcss.css */ @layer base, elements, global, components, theme.default, theme.user, helpers; -/* The parts are plain CSS; this entry assigns their layer, the same way - mcss.css layers the structural files. (Only standalone theme files - self-layer; in dist/css the parts are pre-wrapped so a lone - still works.) */ @import url(./theme.default.tokens.css) layer(theme.default); @import url(./theme.default.ui.css) layer(theme.default); diff --git a/src/styles/framework/theme.default.tokens.css b/src/styles/framework/theme.default.tokens.css index 1de91ed6..af8afdf0 100644 --- a/src/styles/framework/theme.default.tokens.css +++ b/src/styles/framework/theme.default.tokens.css @@ -1,12 +1,12 @@ /* DEFAULT THEME: TOKENS */ /* - The scales: every token here is named for what it IS (a step on a scale), - never for what it's for. Part of the default theme (see theme.default.css); - don't edit it, override from your own theme (see theme.starter.css). + Raw design tokens. Part of the default theme (see theme.default.css); + Don't edit this file directly. Thee best way is to Override it with your + own theme (see theme.starter.css). Can't use var() inside media queries, so breakpoints are hard coded in - settings.media-queries.css: + settings.media-queries.css instead of custom properties xxs: 240px xs: 360px sm: 480px md: 768px lg: 1024px xl: 1440px xxl: 1920px */ @@ -24,19 +24,23 @@ • Colors -• Box shadows -• Border radius • Border width +• Border radius + +• Box shadows + • Opacity + +• Z-index + +• Transitions + */ :root { - /* GLOBALS */ /* DIMENSIONS */ - /* Sizes */ - --xs1: 4px; --xs2: 8px; --xs3: 12px; @@ -73,18 +77,20 @@ --tera2: 480px; --tera3: 520px; - /* Aspect Ratios */ + /* ASPECT RATIOS */ + --ar-square: 1; --ar-landscape: 4/3; --ar-portrait: 3/4; --ar-widescreen: 16/9; --ar-golden: 1.618/1; - /* TYPOGRAPHY */ - /* See also elements.text & help.text */ + /* */ + + /* (More typography in elements.text & help.text) */ + + /* FONT FAMILIES (https://modernfontstacks.com) */ - /* Font Families */ - /* Local font stacks - More options @ https://modernfontstacks.com */ --display: Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, ui-sans-serif, sans-serif; @@ -94,8 +100,8 @@ Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, ui-monospace, monospace; - /* Font Sizes */ - /* Create your own sizes @ https://typescale.com */ + /* FONT SIZES (https://typescale.com) */ + --text-xs: 0.694rem; --text-sm: 0.833rem; --text-md: 1rem; @@ -108,11 +114,8 @@ --display-mega: 3.583rem; --display-giga: 4.299rem; - /* Heading font sizes are decisions, not scale steps: they map each - heading level onto this scale. See --heading-font-size-* in - theme.default.ui.css. */ + /* FONT WEIGHTS */ - /* Font Weights */ --extra-light: 200; --light: 300; --book: 400; @@ -120,14 +123,16 @@ --bold: 700; --black: 900; - /* Letter Spacing */ + /* LETTER SPACING */ + --tracking-sm: -0.05em; --tracking-md: 0.025em; --tracking-lg: 0.05em; --tracking-xl: 0.075em; --tracking-xxl: 0.15em; - /* Line Height */ + /* LINE HEIGHT */ + --leading-xs: 1; --leading-sm: 1.15; --leading-md: 1.375; @@ -135,8 +140,7 @@ --leading-xl: 1.75; --leading-xxl: 2; - /* COLORS */ - /* Make your own palettes programmatically: https://www.tints.dev */ + /* COLORS (https://www.tints.dev) */ /* Base */ @@ -167,8 +171,6 @@ --primary-900: #0c4a6e; --primary-950: #082f49; - /* Secondary and/or Highlight goes here */ - /* Feedback */ --yes-100: #d5f6e8; diff --git a/src/styles/framework/theme.default.ui.css b/src/styles/framework/theme.default.ui.css index 25aefb67..3aca19a2 100644 --- a/src/styles/framework/theme.default.ui.css +++ b/src/styles/framework/theme.default.ui.css @@ -1,23 +1,15 @@ /* DEFAULT THEME: UI */ /* - The decisions. Every token here is named for what it's FOR (an - element, a component, or a shared meaning) and answers "what does this - thing use by default". Tokens named for what they ARE (--sm1, --base-500, - --bold) are scale tokens and live in theme.default.tokens.css. That's the - whole split: a name that mentions a UI thing belongs here; a name that - labels a step on a scale belongs there. + Tokens here are one abstraction level above raw tokens + They define styling for elements, components, or a shared style. Values, in order of preference: 1. Another ui token, when the meaning is shared - (--input-border-color: var(--ui-border-color)). - 2. A scale token, when the value should follow the system scales - (--fieldset-padding: var(--sm3)). - 3. A raw value, only where following the scales would be wrong: - content (separator strings, icon URLs), geometry tuned to one - control (--toggle-width), or element-relative measures that track - the element's own type instead of the page (em heading spacing). - The test: "if a theme retuned the scales, should this follow?" + `--input-border-color: var(--ui-border-color)` + 2. A raw token: `--fieldset-padding: var(--sm3)` + 3. A raw value, only when it's not supposed to match a raw token + or when it's relative to the the element's own value (em heading spacing). Part of the default theme (see theme.default.css); don't edit it, override from your own theme (see theme.starter.css). @@ -25,41 +17,20 @@ :root { /* Color scheme (light/dark), toggled by the .theme-light / .theme-dark - classes below. Unrelated to theme files, which are full themes. */ + classes below. */ color-scheme: light dark; --ui-border-color: light-dark(var(--base-200), var(--base-500)); - /* Also consumed by the --shadow-* scale in theme.default.tokens.css: - the one reference between the files that runs upward, so shadows can - switch with the color scheme. Raw alpha colors: the palettes have no - alpha steps. */ + /* Also used by the --shadow-* in theme.default.tokens.css, The one reference + between the files that runs upward, so shadows can switch with the color + scheme. Raw alpha colors: the palettes have no alpha steps. */ --ui-shadow-color: light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.6)); - /* Keyboard focus ring (consumed by :focus-visible in global.a11y.css). - Raw 2px on purpose: an accessibility affordance that shouldn't move - when a theme retunes the decorative border scale. */ + /* Keyboard focus ring (used by :focus-visible in global.a11y.css). + Raw 2px on purpose: an accessibility shouldn't change with the theme. */ --focus-ring-color: light-dark(var(--primary-500), var(--primary-400)); --focus-ring-width: 2px; --focus-ring-offset: 2px; - - /* Semantic feedback aliases over the raw feedback palettes. - Prefer these in components and themes; a theme can restyle feedback by - overriding the aliases without touching the raw scales. */ - --success-100: var(--yes-100); - --success-200: var(--yes-200); - --success-300: var(--yes-300); - --success-400: var(--yes-400); - --success-500: var(--yes-500); - --danger-100: var(--no-100); - --danger-200: var(--no-200); - --danger-300: var(--no-300); - --danger-400: var(--no-400); - --danger-500: var(--no-500); - --warning-100: var(--maybe-100); - --warning-200: var(--maybe-200); - --warning-300: var(--maybe-300); - --warning-400: var(--maybe-400); - --warning-500: var(--maybe-500); } :root.theme-light { @@ -83,10 +54,7 @@ --input-border-width: var(--border-sm); --input-border-color: var(--ui-border-color); --input-border-radius: var(--radius-md); - --input-border-color-invalid: light-dark( - var(--danger-500), - var(--danger-400) - ); + --input-border-color-invalid: light-dark(var(--no-500), var(--no-400)); /* Gap under a label that precedes its control */ --label-spacing: var(--xs1); @@ -101,16 +69,16 @@ --meter-height: var(--sm1); --meter-border-radius: var(--radius-md); --meter-track-color: var(--primary-100); - --meter-low-color: var(--danger-400); - --meter-medium-color: var(--warning-400); - --meter-high-color: var(--success-400); + --meter-low-color: var(--no-400); + --meter-medium-color: var(--maybe-400); + --meter-high-color: var(--yes-400); --progress-height: var(--sm1); --progress-color: var(--primary-500); --progress-track-color: var(--primary-100); --progress-border-radius: var(--radius-md); - /* select's chevron, applied as a mask painted with the text color; + /* select's chevron, applied as a mask using text color; any url() works here, data URL or file */ --select-icon-size: var(--sm3); --select-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E"); @@ -125,9 +93,8 @@ --dialog-backdrop-color: var(--base-950); --dialog-backdrop-opacity: var(--o-4); - /* details: same surface as dialog by default, on purpose but - independently overridable. Spacing is the gap between an open - summary and its content. */ + /* details: same as dialog by default, on purpose, to be independently + overridable. Spacing is the gap between an open summary and its content. */ --details-padding: var(--sm1); --details-spacing: var(--xs3); --details-border-width: var(--border-sm); @@ -241,7 +208,7 @@ /* ins: background stays light in both light/dark modes */ --ins-color: var(--base-950); - --ins-background-color: var(--success-200); + --ins-background-color: var(--yes-200); --marker-color: var(--highlight-500); @@ -294,20 +261,14 @@ var(--primary-600), var(--primary-500) ); - --badge-success-color: light-dark(var(--success-500), var(--base-0)); - --badge-success-background-color: light-dark( - var(--success-100), - var(--success-500) - ); - --badge-danger-color: light-dark(var(--danger-500), var(--base-0)); - --badge-danger-background-color: light-dark( - var(--danger-100), - var(--danger-500) - ); - --badge-warning-color: light-dark(var(--warning-500), var(--base-950)); + --badge-success-color: light-dark(var(--yes-500), var(--base-0)); + --badge-success-background-color: light-dark(var(--yes-100), var(--yes-500)); + --badge-danger-color: light-dark(var(--no-500), var(--base-0)); + --badge-danger-background-color: light-dark(var(--no-100), var(--no-500)); + --badge-warning-color: light-dark(var(--maybe-500), var(--base-950)); --badge-warning-background-color: light-dark( - var(--warning-100), - var(--warning-500) + var(--maybe-100), + var(--maybe-500) ); } @@ -420,7 +381,7 @@ :root { --field-spacing: var(--xs1); --field-hint-color: light-dark(var(--base-400), var(--base-500)); - --field-error-color: light-dark(var(--danger-500), var(--danger-300)); + --field-error-color: light-dark(var(--no-500), var(--no-300)); /*Field's hint/error position. Use `static` to reflow under, use `absolute` (and leave enough space below) if you don't want any shift on errors */ --field-message-position: static; @@ -525,7 +486,7 @@ var(--primary-600), var(--primary-400) ); - --pricingCard-check-color: light-dark(var(--success-500), var(--success-400)); + --pricingCard-check-color: light-dark(var(--yes-500), var(--yes-400)); } /* Read Progress Bar */ diff --git a/src/styles/framework/theme.starter.css b/src/styles/framework/theme.starter.css index a4a412a8..4ab435a6 100644 --- a/src/styles/framework/theme.starter.css +++ b/src/styles/framework/theme.starter.css @@ -1,4 +1,4 @@ -/* YOUR THEME (starter) */ +/* STARTER USER THEME */ /* A theme is a file of token overrides, plus optional style rules for what @@ -7,26 +7,22 @@ @import url(./framework/mcss.css); @import url(./framework/theme.default.css); - @import url(./theme.acme.css); + @import url(./theme.my-project.css); - Everything this file doesn't mention falls back to the default theme. - It self-layers into `theme.user`, which beats the default theme's - `theme.default` no matter the import order. Never edit the default - theme files: your palette, type, and overrides all live here, which is - what keeps framework updates painless. + MAKE SURE you put all your overrides inside `@layer theme.user` Guidelines: - - Prefer token overrides. Override scale tokens (--base-*, --text) to - shift the whole palette or type, ui tokens (--ui-border-color, - --heading-font) for cross-cutting changes, or component tokens - (--bt-border-radius) for surgical ones. - - Rules are for what tokens can't express (pseudo-elements, nth-child - rhythm, text-decoration). Theme files are the one place allowed to - style framework classes from outside; they still lose to your - unlayered CSS and to helpers, by design. - - No !important: that privilege is reserved for the helpers layer. - - For a full swappable skin, write an entry that composes the default - theme and overrides on top instead: see theme.wireframe.css. + + - Override values in `theme.default.tokens.css` for low level stuff + like colors, sizes, fonts, etc. + - For UI related stuff like button radius or component specific styles, + override values in `theme.default.ui.css` + - Add your own rules if a token can't do what you need (pseudo-elements, + nth-child,, text-decoration, etc.) + - Don't use !important. If you need to, you're doing something wrong. + Email me and I'll help you out. + - For a full swappable skin, look at ` theme.wireframe.css` to see + how it's done. */ /* Pin the layer order before declaring into it: priority is set by @@ -42,7 +38,7 @@ /* Then reach for ui and component tokens as needed: */ /* --heading-font: Georgia, serif; */ /* --card-border-radius: 0; */ - /* A theme may also add scales the framework doesn't ship, */ + /* A theme may also add tokens the framework doesn't ship, */ /* e.g. a second accent, and use them in its own style rules: */ /* --secondary-500: teal; */ } From 82434cec4c3c421c7c16c47f84632ff489b3b8f8 Mon Sep 17 00:00:00 2001 From: Yann Date: Fri, 14 Aug 2026 19:33:11 -0700 Subject: [PATCH 10/37] Wireframe: clarify that the file holds only deviations "The import below brings in every default" read as if the defaults were in this file; say instead that the file contains only the skin's deviations and the @import makes the browser load theme.default.css alongside it. Co-Authored-By: Claude Fable 5 --- dist/css/theme.wireframe.css | 10 ++++++---- src/styles/framework/theme.wireframe.css | 10 ++++++---- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/dist/css/theme.wireframe.css b/dist/css/theme.wireframe.css index 0fba29a3..f06c9b30 100644 --- a/dist/css/theme.wireframe.css +++ b/dist/css/theme.wireframe.css @@ -33,10 +33,12 @@ xxl: 1920px bottom cover what tokens can't express. A full skin is an entry that composes the default theme and overrides - on top: the import below brings in every default, and this file's own - rules land in `theme.user`, which wins over the default's - `theme.default`. Activate exactly one theme entry from your own entry - point (see theme.default.css). + on top. This file contains ONLY the skin's deviations; everything it + doesn't mention comes from theme.default.css, which the @import below + makes the browser load alongside this file. The rules here land in + `theme.user`, which wins over the default theme's `theme.default` + layer. Activate exactly one theme entry from your own entry point + (see theme.default.css). */ /* Pin the layer order before anything else in this file: priority is diff --git a/src/styles/framework/theme.wireframe.css b/src/styles/framework/theme.wireframe.css index d66acd4e..9fce55ea 100644 --- a/src/styles/framework/theme.wireframe.css +++ b/src/styles/framework/theme.wireframe.css @@ -7,10 +7,12 @@ bottom cover what tokens can't express. A full skin is an entry that composes the default theme and overrides - on top: the import below brings in every default, and this file's own - rules land in `theme.user`, which wins over the default's - `theme.default`. Activate exactly one theme entry from your own entry - point (see theme.default.css). + on top. This file contains ONLY the skin's deviations; everything it + doesn't mention comes from theme.default.css, which the @import below + makes the browser load alongside this file. The rules here land in + `theme.user`, which wins over the default theme's `theme.default` + layer. Activate exactly one theme entry from your own entry point + (see theme.default.css). */ /* Pin the layer order before anything else in this file: priority is From d9ff2a96e3bd79c8ece58474f9b01ab8bc40a54b Mon Sep 17 00:00:00 2001 From: Yann Date: Sat, 15 Aug 2026 19:17:22 -0700 Subject: [PATCH 11/37] Major "Getting started" doc rewrite + small tweaks --- dist/css/global.grid.css | 2 +- dist/css/mcss.css | 36 +++---- dist/css/theme.starter.css | 6 +- dist/mcss.css | 2 +- dist/mcss.min.css | 2 +- src/content/docs/start.mdx | 140 ++++++++++++++++++++++--- src/styles/framework/global.grid.css | 2 +- src/styles/framework/theme.starter.css | 6 +- src/tools/build-css.mjs | 31 +++++- 9 files changed, 178 insertions(+), 49 deletions(-) diff --git a/dist/css/global.grid.css b/dist/css/global.grid.css index f929634a..654523bc 100644 --- a/dist/css/global.grid.css +++ b/dist/css/global.grid.css @@ -43,7 +43,7 @@ xxl: 1920px } /* DEFAULT */ -.grid > .grid_item { display: block; appearance: none; -webkit-appearance: none } +.grid > .grid_item { display: block; appearance: none; } .grid[col="1"] { --grid-tc: repeat(1, 1fr) } .grid[col="2"] { --grid-tc: repeat(2, 1fr) } .grid[col="3"] { --grid-tc: repeat(3, 1fr) } diff --git a/dist/css/mcss.css b/dist/css/mcss.css index 8a287a01..0dd2d0d6 100644 --- a/dist/css/mcss.css +++ b/dist/css/mcss.css @@ -1,6 +1,19 @@ /*! mCSS v1.3.0 | MIT | https://mcss.dev */ @layer base, elements, global, components, theme.default, theme.user, helpers; @import url(./base.reset.css) layer(base); +@import url(./elements.form.css) layer(elements); +@import url(./elements.interactive.css) layer(elements); +@import url(./elements.media.css) layer(elements); +@import url(./elements.sectioning.css) layer(elements); +@import url(./elements.table.css) layer(elements); +@import url(./elements.text.css) layer(elements); +@import url(./elements.text.quotes.css) layer(elements); +@import url(./global.a11y.css) layer(global); +@import url(./global.animation.css) layer(global); +@import url(./global.grid.css) layer(global); +@import url(./global.layout.css) layer(global); +@import url(./global.prose.css) layer(global); +@import url(./global.wrap.css) layer(global); @import url(./component.avatar.css) layer(components); @import url(./component.badge.css) layer(components); @import url(./component.banner.css) layer(components); @@ -26,19 +39,11 @@ @import url(./component.tiles.css) layer(components); @import url(./component.toc.css) layer(components); @import url(./component.toggle.css) layer(components); -@import url(./elements.form.css) layer(elements); -@import url(./elements.interactive.css) layer(elements); -@import url(./elements.media.css) layer(elements); -@import url(./elements.sectioning.css) layer(elements); -@import url(./elements.table.css) layer(elements); -@import url(./elements.text.css) layer(elements); -@import url(./elements.text.quotes.css) layer(elements); -@import url(./global.a11y.css) layer(global); -@import url(./global.animation.css) layer(global); -@import url(./global.grid.css) layer(global); -@import url(./global.layout.css) layer(global); -@import url(./global.prose.css) layer(global); -@import url(./global.wrap.css) layer(global); +@import url(./theme.default.css); /* the default theme */ +/* @import url(./theme.default.tokens.css); */ /* imported by theme.default.css */ +/* @import url(./theme.default.ui.css); */ /* imported by theme.default.css */ +/* @import url(./theme.starter.css); */ /* your theme's starting point: keep the default active */ +/* @import url(./theme.wireframe.css); */ /* full skin: use instead of the default (it imports it itself) */ @import url(./help.colors.css) layer(helpers); @import url(./help.devtools.css) layer(helpers); @import url(./help.layout.css) layer(helpers); @@ -46,8 +51,3 @@ @import url(./help.ratios.css) layer(helpers); @import url(./help.spacing.css) layer(helpers); @import url(./help.typography.css) layer(helpers); -@import url(./theme.default.css); /* the default theme */ -/* @import url(./theme.default.tokens.css); */ /* imported by theme.default.css */ -/* @import url(./theme.default.ui.css); */ /* imported by theme.default.css */ -/* @import url(./theme.starter.css); */ /* theme: swap for the default */ -/* @import url(./theme.wireframe.css); */ /* theme: swap for the default */ diff --git a/dist/css/theme.starter.css b/dist/css/theme.starter.css index f32d3214..1b9557c0 100644 --- a/dist/css/theme.starter.css +++ b/dist/css/theme.starter.css @@ -28,12 +28,12 @@ xxl: 1920px /* A theme is a file of token overrides, plus optional style rules for what - tokens can't express. Copy this file, name it after your project, and - import it from your own entry point after the default theme: + tokens can't express. This file is where your theme starts: import it + from your own entry point after the default theme: @import url(./framework/mcss.css); @import url(./framework/theme.default.css); - @import url(./theme.my-project.css); + @import url(./theme.starter.css); MAKE SURE you put all your overrides inside `@layer theme.user` diff --git a/dist/mcss.css b/dist/mcss.css index 56a81fd5..725a0276 100644 --- a/dist/mcss.css +++ b/dist/mcss.css @@ -1225,7 +1225,7 @@ details { } /* DEFAULT */ -.grid > .grid_item { display: block; appearance: none; -webkit-appearance: none } +.grid > .grid_item { display: block; appearance: none; } .grid[col="1"] { --grid-tc: repeat(1, 1fr) } .grid[col="2"] { --grid-tc: repeat(2, 1fr) } .grid[col="3"] { --grid-tc: repeat(3, 1fr) } diff --git a/dist/mcss.min.css b/dist/mcss.min.css index 6f2184c1..468bc3be 100644 --- a/dist/mcss.min.css +++ b/dist/mcss.min.css @@ -1,2 +1,2 @@ /*! mCSS v1.3.0 | MIT | https://mcss.dev */ -@layer base,elements,global,components,theme.default,theme.user,helpers;@layer base,elements,global,components,theme.default,theme.user,helpers;@layer base{*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion:reduce){*,:before,:after{animation-delay:-1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}}:where(:not(dialog)){margin:0}html,body{min-height:100%}}@layer elements{body{line-sizing:normal;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;background-color:var(--body-background-color);color:var(--text-color);font-family:var(--text);line-height:var(--body-line-height);&:has(.body-is-locked){overflow:hidden}}}@layer elements{::selection{color:var(--selection-color);background-color:var(--selection-background-color)}:where(a,u,ins,abbr){text-underline-offset:2px}a{font-weight:var(--link-font-weight);color:var(--link-color);&:where(:hover){color:var(--link-color-hover);-webkit-text-decoration:none;text-decoration:none}}address{width:max-content;max-width:100%;padding:var(--sm1) var(--sm3);font-style:normal;background-color:light-dark(var(--base-50),var(--base-900));border:var(--xs2) solid transparent;border-image:8 repeating-linear-gradient(-45deg,var(--no-500) 0,var(--no-500) var(--xs2),transparent 0,transparent calc(var(--xs2) * 2),var(--primary-500) 0,var(--primary-500) calc(var(--xs2) * 3),transparent 0,transparent calc(var(--xs2) * 4))}abbr{position:relative;cursor:help;&:after{position:relative;top:calc(var(--xs1) * -1);width:var(--sm1);height:var(--sm1);display:inline-block;content:"";background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='circle-help'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M9.09%209a3%203%200%200%201%205.83%201c0%202-3%203-3%203'/%3E%3Cpath%20d='M12%2017h.01'/%3E%3C/svg%3E");background-size:contain}&:hover:before{width:max-content;max-width:400px;position:absolute;left:50%;padding:var(--xs1) var(--xs3);content:attr(title);color:var(--base-0);background-color:var(--base-900);opacity:var(--o-4);border-radius:var(--radius-sm);transform:translate(-50%,-2em)}}blockquote{position:relative;margin-bottom:var(--prose-spacing);padding-block:var(--blockquote-padding-block);padding-inline:var(--blockquote-padding-inline);font-style:italic;background-color:var(--blockquote-background-color);border-radius:var(--blockquote-border-radius);&:before{content:"";position:absolute;top:0;inset-inline-start:0;width:var(--blockquote-accent-width);height:100%;border-start-start-radius:var(--blockquote-border-radius);border-end-start-radius:var(--blockquote-border-radius);background:var(--blockquote-accent-color)}p{&:first-child:before{content:open-quote}&:last-child{margin-bottom:0;&:after{content:close-quote}}}}cite{font-style:italic}code,var,kbd{font-family:var(--mono);font-size:.9em;font-style:normal;color:var(--text-code-muted-color)}:is(code,var,kbd):not(h1 *,h2 *,h3 *,h4 *,h5 *,h6 *,pre *){padding:.15em .3em;color:var(--text-code-color);background-color:var(--text-code-background-color);border-radius:var(--radius-sm)}dt{font-weight:var(--bold)}dd+dt{margin-top:.5em}del{text-decoration-color:var(--no-500);text-decoration-style:wavy}h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{overflow-wrap:break-word;text-wrap:balance}h1,.h1,h2,.h2,h3,.h3,h4,.h4{font-family:var(--heading-font);font-weight:var(--heading-weight);letter-spacing:var(--heading-letter-spacing)}h1,.h1{margin-bottom:var(--heading-spacing-h1);font-size:var(--heading-font-size-h1);line-height:var(--heading-line-height-h1)}h2,.h2{margin-bottom:var(--heading-spacing-h2);font-size:var(--heading-font-size-h2);line-height:var(--heading-line-height-h2)}h3,.h3{margin-bottom:var(--heading-spacing-h3);font-size:var(--heading-font-size-h3);line-height:var(--heading-line-height-h3)}h4,.h4{margin-bottom:var(--heading-spacing-h4);font-size:var(--heading-font-size-h4);line-height:var(--heading-line-height-h4)}h5,.h5{margin-bottom:var(--heading-spacing-h5);font-size:var(--heading-font-size-h5);line-height:var(--heading-line-height-h5)}h6,.h6{margin-bottom:var(--heading-spacing-h6);font-size:var(--heading-font-size-h6);line-height:var(--heading-line-height-h6)}:where(h1,h2,h3):has(+:is(h2,h3,h4)){margin-bottom:var(--heading-spacing-consecutive)}hr{display:flex;justify-content:center;align-items:center;height:0;border-style:solid;border-width:var(--border-sm) 0 0;color:var(--ui-border-color);overflow:visible;&:after{content:var(--hr-content);padding:0 var(--xs1);line-height:1;letter-spacing:var(--tracking-sm);background-color:var(--body-background-color)}}:where(hr):has(+:is(p)){margin-bottom:var(--prose-spacing)}ins{padding:.15em .3em;color:var(--ins-color);background-color:var(--ins-background-color);border-radius:var(--radius-sm);-webkit-text-decoration:none;text-decoration:none;&:before{content:"+ "}}mark{padding:.15em .5em;background:var(--marker-color);border-radius:1em 0}:where(ol,ul){list-style-type:none;padding:0}pre{font-family:var(--mono);font-size:var(--pre-font-size);white-space:pre-wrap;border-radius:var(--pre-border-radius)}q{font-style:italic}s{text-decoration-color:light-dark(var(--base-950),var(--base-50));text-decoration-style:wavy}sub,sup{line-height:1}}@layer elements{:root{quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(af),:not(:lang(af))>:lang(af){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ak),:not(:lang(ak))>:lang(ak){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(asa),:not(:lang(asa))>:lang(asa){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(az),:not(:lang(az))>:lang(az){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(bem),:not(:lang(bem))>:lang(bem){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(bez),:not(:lang(bez))>:lang(bez){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(bn),:not(:lang(bn))>:lang(bn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(brx),:not(:lang(brx))>:lang(brx){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(cgg),:not(:lang(cgg))>:lang(cgg){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(chr),:not(:lang(chr))>:lang(chr){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(cy),:not(:lang(cy))>:lang(cy){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(da),:not(:lang(da))>:lang(da){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(dav),:not(:lang(dav))>:lang(dav){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(dje),:not(:lang(dje))>:lang(dje){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(dz),:not(:lang(dz))>:lang(dz){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ebu),:not(:lang(ebu))>:lang(ebu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ee),:not(:lang(ee))>:lang(ee){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(en),:not(:lang(en))>:lang(en){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(fil),:not(:lang(fil))>:lang(fil){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(fo),:not(:lang(fo))>:lang(fo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ga),:not(:lang(ga))>:lang(ga){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(gd),:not(:lang(gd))>:lang(gd){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(gl),:not(:lang(gl))>:lang(gl){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(gu),:not(:lang(gu))>:lang(gu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(guz),:not(:lang(guz))>:lang(guz){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ha),:not(:lang(ha))>:lang(ha){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(hi),:not(:lang(hi))>:lang(hi){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(id),:not(:lang(id))>:lang(id){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ig),:not(:lang(ig))>:lang(ig){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(jmc),:not(:lang(jmc))>:lang(jmc){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kam),:not(:lang(kam))>:lang(kam){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kde),:not(:lang(kde))>:lang(kde){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kea),:not(:lang(kea))>:lang(kea){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(khq),:not(:lang(khq))>:lang(khq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ki),:not(:lang(ki))>:lang(ki){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kln),:not(:lang(kln))>:lang(kln){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(km),:not(:lang(km))>:lang(km){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kn),:not(:lang(kn))>:lang(kn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ko),:not(:lang(ko))>:lang(ko){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ksb),:not(:lang(ksb))>:lang(ksb){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lg),:not(:lang(lg))>:lang(lg){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ln),:not(:lang(ln))>:lang(ln){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lo),:not(:lang(lo))>:lang(lo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lrc),:not(:lang(lrc))>:lang(lrc){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lu),:not(:lang(lu))>:lang(lu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(luo),:not(:lang(luo))>:lang(luo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lv),:not(:lang(lv))>:lang(lv){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mas),:not(:lang(mas))>:lang(mas){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mer),:not(:lang(mer))>:lang(mer){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mfe),:not(:lang(mfe))>:lang(mfe){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mgo),:not(:lang(mgo))>:lang(mgo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ml),:not(:lang(ml))>:lang(ml){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mn),:not(:lang(mn))>:lang(mn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mr),:not(:lang(mr))>:lang(mr){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ms),:not(:lang(ms))>:lang(ms){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mt),:not(:lang(mt))>:lang(mt){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(my),:not(:lang(my))>:lang(my){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(naq),:not(:lang(naq))>:lang(naq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(nd),:not(:lang(nd))>:lang(nd){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ne),:not(:lang(ne))>:lang(ne){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(nus),:not(:lang(nus))>:lang(nus){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(nyn),:not(:lang(nyn))>:lang(nyn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(pa),:not(:lang(pa))>:lang(pa){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(pt),:not(:lang(pt))>:lang(pt){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(rof),:not(:lang(rof))>:lang(rof){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(rwk),:not(:lang(rwk))>:lang(rwk){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(saq),:not(:lang(saq))>:lang(saq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(sbp),:not(:lang(sbp))>:lang(sbp){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(seh),:not(:lang(seh))>:lang(seh){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ses),:not(:lang(ses))>:lang(ses){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(si),:not(:lang(si))>:lang(si){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(so),:not(:lang(so))>:lang(so){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(sw),:not(:lang(sw))>:lang(sw){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ta),:not(:lang(ta))>:lang(ta){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(te),:not(:lang(te))>:lang(te){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(teo),:not(:lang(teo))>:lang(teo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(th),:not(:lang(th))>:lang(th){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(to),:not(:lang(to))>:lang(to){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(tr),:not(:lang(tr))>:lang(tr){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(twq),:not(:lang(twq))>:lang(twq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(tzm),:not(:lang(tzm))>:lang(tzm){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(uz-Cyrl),:not(:lang(uz-Cyrl))>:lang(uz-Cyrl){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vai),:not(:lang(vai))>:lang(vai){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vai-Latn),:not(:lang(vai-Latn))>:lang(vai-Latn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vi),:not(:lang(vi))>:lang(vi){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vun),:not(:lang(vun))>:lang(vun){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(xog),:not(:lang(xog))>:lang(xog){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(yo),:not(:lang(yo))>:lang(yo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(yue-Hans),:not(:lang(yue-Hans))>:lang(yue-Hans){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(zh),:not(:lang(zh))>:lang(zh){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(zu),:not(:lang(zu))>:lang(zu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(uz),:not(:lang(uz))>:lang(uz){quotes:"\201c" "\201d" "\2019" "\2018"}:root:lang(eu),:not(:lang(eu))>:lang(eu){quotes:"\201c" "\201d" "\201c" "\201d"}:root:lang(tk),:not(:lang(tk))>:lang(tk){quotes:"\201c" "\201d" "\201c" "\201d"}:root:lang(ar),:not(:lang(ar))>:lang(ar){quotes:"\201d" "\201c" "\2019" "\2018"}:root:lang(ur),:not(:lang(ur))>:lang(ur){quotes:"\201d" "\201c" "\2019" "\2018"}:root:lang(fi),:not(:lang(fi))>:lang(fi){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(he),:not(:lang(he))>:lang(he){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(lag),:not(:lang(lag))>:lang(lag){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(rn),:not(:lang(rn))>:lang(rn){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(sn),:not(:lang(sn))>:lang(sn){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(sv),:not(:lang(sv))>:lang(sv){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(sr),:not(:lang(sr))>:lang(sr){quotes:"\201e" "\201c" "\2018" "\2018"}:root:lang(sr-Latn),:not(:lang(sr-Latn))>:lang(sr-Latn){quotes:"\201e" "\201c" "\2018" "\2018"}:root:lang(bg),:not(:lang(bg))>:lang(bg){quotes:"\201e" "\201c" "\201e" "\201c"}:root:lang(lt),:not(:lang(lt))>:lang(lt){quotes:"\201e" "\201c" "\201e" "\201c"}:root:lang(bs-Cyrl),:not(:lang(bs-Cyrl))>:lang(bs-Cyrl){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(cs),:not(:lang(cs))>:lang(cs){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(de),:not(:lang(de))>:lang(de){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(dsb),:not(:lang(dsb))>:lang(dsb){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(et),:not(:lang(et))>:lang(et){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(hr),:not(:lang(hr))>:lang(hr){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(hsb),:not(:lang(hsb))>:lang(hsb){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(is),:not(:lang(is))>:lang(is){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(lb),:not(:lang(lb))>:lang(lb){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(luy),:not(:lang(luy))>:lang(luy){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(mk),:not(:lang(mk))>:lang(mk){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(sk),:not(:lang(sk))>:lang(sk){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(sl),:not(:lang(sl))>:lang(sl){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(ka),:not(:lang(ka))>:lang(ka){quotes:"\201e" "\201c" "\ab" "\bb"}:root:lang(bs),:not(:lang(bs))>:lang(bs){quotes:"\201e" "\201d" "\2018" "\2019"}:root:lang(agq),:not(:lang(agq))>:lang(agq){quotes:"\201e" "\201d" "\201a" "\2019"}:root:lang(ff),:not(:lang(ff))>:lang(ff){quotes:"\201e" "\201d" "\201a" "\2019"}:root:lang(nmg),:not(:lang(nmg))>:lang(nmg){quotes:"\201e" "\201d" "\ab" "\bb"}:root:lang(ro),:not(:lang(ro))>:lang(ro){quotes:"\201e" "\201d" "\ab" "\bb"}:root:lang(pl),:not(:lang(pl))>:lang(pl){quotes:"\201e" "\201d" "\ab" "\bb"}:root:lang(hu),:not(:lang(hu))>:lang(hu){quotes:"\201e" "\201d" "\bb" "\ab"}:root:lang(nl),:not(:lang(nl))>:lang(nl){quotes:"\2018" "\2019" "\201c" "\201d"}:root:lang(ti-ER),:not(:lang(ti-ER))>:lang(ti-ER){quotes:"\2018" "\2019" "\201c" "\201d"}:root:lang(dua),:not(:lang(dua))>:lang(dua){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(ksf),:not(:lang(ksf))>:lang(ksf){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(rw),:not(:lang(rw))>:lang(rw){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(nn),:not(:lang(nn))>:lang(nn){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(nb),:not(:lang(nb))>:lang(nb){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(ast),:not(:lang(ast))>:lang(ast){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(bm),:not(:lang(bm))>:lang(bm){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(br),:not(:lang(br))>:lang(br){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(ca),:not(:lang(ca))>:lang(ca){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(dyo),:not(:lang(dyo))>:lang(dyo){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(el),:not(:lang(el))>:lang(el){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(es),:not(:lang(es))>:lang(es){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(ewo),:not(:lang(ewo))>:lang(ewo){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(mg),:not(:lang(mg))>:lang(mg){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(mua),:not(:lang(mua))>:lang(mua){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(sg),:not(:lang(sg))>:lang(sg){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(it),:not(:lang(it))>:lang(it){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(kab),:not(:lang(kab))>:lang(kab){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(kk),:not(:lang(kk))>:lang(kk){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(pt-PT),:not(:lang(pt-PT))>:lang(pt-PT){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(nnh),:not(:lang(nnh))>:lang(nnh){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(sq),:not(:lang(sq))>:lang(sq){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(bas),:not(:lang(bas))>:lang(bas){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(be),:not(:lang(be))>:lang(be){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(ky),:not(:lang(ky))>:lang(ky){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(sah),:not(:lang(sah))>:lang(sah){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(ru),:not(:lang(ru))>:lang(ru){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(uk),:not(:lang(uk))>:lang(uk){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(zgh),:not(:lang(zgh))>:lang(zgh){quotes:"\ab" "\bb" "\201e" "\201d"}:root:lang(shi),:not(:lang(shi))>:lang(shi){quotes:"\ab" "\bb" "\201e" "\201d"}:root:lang(shi-Latn),:not(:lang(shi-Latn))>:lang(shi-Latn){quotes:"\ab" "\bb" "\201e" "\201d"}:root:lang(am),:not(:lang(am))>:lang(am){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(az-Cyrl),:not(:lang(az-Cyrl))>:lang(az-Cyrl){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(fa),:not(:lang(fa))>:lang(fa){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(fr-CH),:not(:lang(fr-CH))>:lang(fr-CH){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(gsw),:not(:lang(gsw))>:lang(gsw){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(jgo),:not(:lang(jgo))>:lang(jgo){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(kkj),:not(:lang(kkj))>:lang(kkj){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(mzn),:not(:lang(mzn))>:lang(mzn){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(fr),:not(:lang(fr))>:lang(fr){quotes:"\ab" "\bb" "\ab" "\bb"}:root:lang(hy),:not(:lang(hy))>:lang(hy){quotes:"\ab" "\bb" "\ab" "\bb"}:root:lang(yav),:not(:lang(yav))>:lang(yav){quotes:"\ab" "\bb" "\ab" "\bb"}:root:lang(ja),:not(:lang(ja))>:lang(ja){quotes:"\300c" "\300d" "\300e" "\300f"}:root:lang(yue),:not(:lang(yue))>:lang(yue){quotes:"\300c" "\300d" "\300e" "\300f"}:root:lang(zh-Hant),:not(:lang(zh-Hant))>:lang(zh-Hant){quotes:"\300c" "\300d" "\300e" "\300f"}}@layer elements{audio,canvas,embed,iframe,img,object,picture,svg,video{display:block;vertical-align:middle;max-width:100%}img,svg,video,canvas{height:auto}audio{width:100%;max-width:var(--tera1)}audio:not([controls]){display:none}figcaption{font-style:italic;font-size:var(--text-sm)}figure{&:has(*+figcaption){figcaption{margin-top:var(--figcaption-spacing)}}&:has(figcaption+*){figcaption{margin-bottom:var(--figcaption-spacing)}}}iframe{border:var(--border-sm) solid var(--ui-border-color)}}@layer elements{caption{caption-side:bottom;margin-top:var(--table-caption-spacing);font-size:var(--text-sm)}table{border-spacing:0;border:var(--table-border-width) solid var(--table-border-color);border-radius:var(--table-border-radius);background-color:var(--table-background-color)}th,td{text-align:start;padding:var(--table-padding);border-bottom:var(--table-border-width) solid var(--table-border-color);border-inline-start:var(--table-border-width) solid var(--table-border-color)}tr{th:first-child,td:first-child{border-inline-start-width:0}}tbody{tr:last-child{th,td{border-bottom-width:0}}}tfoot{th,td{border-top:var(--table-border-width) solid var(--table-border-color);border-bottom-width:0}}}@layer elements{::placeholder{opacity:var(--o-4)}input,button,textarea,select{font:inherit;color:var(--text-color)}button{color:var(--text-color)}fieldset{border:var(--fieldset-border-width) solid var(--fieldset-border-color);border-radius:var(--fieldset-border-radius);padding:var(--fieldset-padding);ul:has([type=checkbox],[type=radio]){padding-inline-start:0}>[aria-hidden]{margin-bottom:var(--sm3);font-size:var(--text-lg);grid-column:1 / -1}}:is(input,select,textarea):user-invalid{border-color:var(--input-border-color-invalid)}input{&:where(:not([type=checkbox],[type=radio])){height:var(--input-height)}&:where(:not([type=color],[type=file],[type=reset],[type=submit])){padding:var(--input-padding)}&:where(:not([type=color])){border-radius:var(--input-border-radius)}&:where(:not([type=file])){border:var(--input-border-width) solid var(--input-border-color)}&[type=file]{width:100%;accent-color:var(--text-color)}&[type=number]{padding-inline-end:var(--xs1)}}label{display:block;&:has(+:is(input,select,textarea)){margin-bottom:var(--label-spacing)}}legend{position:absolute;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);width:1px;height:1px;white-space:nowrap}meter{width:100%;background:var(--meter-track-color);border-radius:var(--meter-border-radius);height:var(--meter-height);&::-webkit-meter-bar{background:var(--meter-track-color)}&::-webkit-meter-bar,&::-webkit-meter-optimum-value,&::-webkit-meter-suboptimum-value,&::-webkit-meter-even-less-good-value{height:var(--meter-height);border:none;border-radius:var(--meter-border-radius)}&::-webkit-meter-even-less-good-value{background:var(--meter-low-color)}&::-webkit-meter-suboptimum-value{background:var(--meter-medium-color)}&::-webkit-meter-optimum-value{background:var(--meter-high-color)}&:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:var(--meter-low-color)}&:-moz-meter-sub-optimum::-moz-meter-bar{background:var(--meter-medium-color)}&:-moz-meter-optimum::-moz-meter-bar{background:var(--meter-high-color)}}progress{appearance:none;width:100%;height:var(--progress-height);background:var(--progress-track-color);border-radius:var(--progress-border-radius);border:none;&::-moz-progress-bar{background:var(--progress-color);border-radius:var(--progress-border-radius)}&::-webkit-progress-bar{width:100%;background:var(--progress-track-color);border-radius:var(--progress-border-radius);height:var(--progress-height)}&::-webkit-progress-value{background:var(--progress-color);border-radius:var(--progress-border-radius)}}select{--split: calc(100% - var(--select-icon-size));display:flex;appearance:none;height:var(--input-height);padding:var(--xs1) calc(var(--input-padding) + var(--md1)) var(--xs1) var(--input-padding);border:var(--input-border-width) solid var(--input-border-color);border-radius:var(--input-border-radius);background:linear-gradient(to right,var(--body-background-color) 0 var(--split),var(--text-color) var(--split) 100%);mask-image:var(--select-icon),linear-gradient(to right,transparent calc(var(--split) - 1px),red 0),linear-gradient(red 0 0);mask-size:var(--select-icon-size),auto,auto;mask-position:calc(100% - var(--xs1)) center,0 0,0 0;mask-repeat:no-repeat;mask-clip:padding-box,padding-box,border-box;mask-origin:padding-box,padding-box,border-box;mask-composite:add,exclude;&:disabled{--disabled-color: light-dark( hsl(from var(--text-color) h s 70%), hsl(from var(--text-color) h s 40%) );cursor:not-allowed;color:var(--disabled-color);background:linear-gradient(to right,var(--body-background-color) 0 var(--split),var(--disabled-color) var(--split) 100%)}&[multiple]{height:auto;padding:var(--input-padding);background:var(--body-background-color);mask-image:none}}textarea{width:100%;padding:var(--input-padding);border-radius:var(--input-border-radius);border:var(--input-border-width) solid var(--input-border-color);resize:vertical;&:not([rows]){min-height:6em}}}@layer elements{dialog{min-width:var(--dialog-min-width);max-width:var(--dialog-max-width);padding:var(--dialog-padding);border:var(--dialog-border-width) solid var(--dialog-border-color);background-color:var(--dialog-background-color);border-radius:var(--dialog-border-radius);&::backdrop{background:var(--dialog-backdrop-color);opacity:var(--dialog-backdrop-opacity)}[aria-label="close pop-up"]{position:absolute;top:var(--xs3);right:var( --xs3 );background:transparent;border:none;outline:none;cursor:pointer}p:last-of-type{margin-bottom:0}}details{padding:var(--details-padding);border:var(--details-border-width) solid var(--details-border-color);background-color:var(--details-background-color);border-radius:var(--details-border-radius);cursor:pointer;summary{display:flex;justify-content:space-between;font-weight:var(--bold);&::-webkit-details-marker{display:none}&:after{content:"";width:var(--details-icon-size);height:var(--details-icon-size);background-color:currentColor;mask-image:var(--details-icon);mask-size:contain;mask-repeat:no-repeat;transition:transform var(--transition)}}&[open]>summary{margin-bottom:var(--details-spacing);&:after{transform:rotate(180deg)}}p:last-of-type{margin-bottom:0}}}@layer global{:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.a11y-skipLink{position:fixed;z-index:var(--z-top);inset-block-start:-100vb;inset-inline-start:0;padding:.75em 1.25em;background-color:var(--body-background-color);color:var(--text-color)}.a11y-skipLink:focus{inset-block-start:0}.a11y-srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}}@layer global{@keyframes fadeFromOpaque{0%{opacity:1}}@keyframes fadeToOpaque{to{opacity:1}}@keyframes fadeFromTransparent{0%{opacity:0}}@keyframes fadeToTransparent{to{opacity:0}}}@layer global{.grid{display:grid;--grid-tc: repeat(4, 1fr);--grid-cs: 1;--grid-ce: -1;grid-template-columns:var(--grid-tc);grid-column-gap:var(--grid-column-gap);grid-row-gap:var(--grid-row-gap)}.grid-flush{grid-column-gap:0;grid-row-gap:0}.grid>.grid_item{display:block;appearance:none;-webkit-appearance:none}.grid[col="1"]{--grid-tc: repeat(1, 1fr) }.grid[col="2"]{--grid-tc: repeat(2, 1fr) }.grid[col="3"]{--grid-tc: repeat(3, 1fr) }.grid[col="4"]{--grid-tc: repeat(4, 1fr) }.grid[col="5"]{--grid-tc: repeat(5, 1fr) }.grid[col="6"]{--grid-tc: repeat(6, 1fr) }.grid[col="7"]{--grid-tc: repeat(7, 1fr) }.grid[col="8"]{--grid-tc: repeat(8, 1fr) }.grid[col="9"]{--grid-tc: repeat(9, 1fr) }.grid[col="10"]{--grid-tc: repeat(10, 1fr) }.grid[col="11"]{--grid-tc: repeat(11, 1fr) }.grid[col="12"]{--grid-tc: repeat(12, 1fr) }.grid[col="13"]{--grid-tc: repeat(13, 1fr) }.grid[col="14"]{--grid-tc: repeat(14, 1fr) }.grid[col="15"]{--grid-tc: repeat(15, 1fr) }.grid[col="16"]{--grid-tc: repeat(16, 1fr) }.grid[col="17"]{--grid-tc: repeat(17, 1fr) }.grid[col="18"]{--grid-tc: repeat(18, 1fr) }.grid[col="19"]{--grid-tc: repeat(19, 1fr) }.grid[col="20"]{--grid-tc: repeat(20, 1fr) }.grid[col="21"]{--grid-tc: repeat(21, 1fr) }.grid[col="22"]{--grid-tc: repeat(22, 1fr) }.grid[col="23"]{--grid-tc: repeat(23, 1fr) }.grid[col="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span^="1"]{--grid-cs: 1 }.grid>.grid_item[span^="2"]{--grid-cs: 2 }.grid>.grid_item[span^="3"]{--grid-cs: 3 }.grid>.grid_item[span^="4"]{--grid-cs: 4 }.grid>.grid_item[span^="5"]{--grid-cs: 5 }.grid>.grid_item[span^="6"]{--grid-cs: 6 }.grid>.grid_item[span^="7"]{--grid-cs: 7 }.grid>.grid_item[span^="8"]{--grid-cs: 8 }.grid>.grid_item[span^="9"]{--grid-cs: 9 }.grid>.grid_item[span^="10"]{--grid-cs: 10 }.grid>.grid_item[span^="11"]{--grid-cs: 11 }.grid>.grid_item[span^="12"]{--grid-cs: 12 }.grid>.grid_item[span^="13"]{--grid-cs: 13 }.grid>.grid_item[span^="14"]{--grid-cs: 14 }.grid>.grid_item[span^="15"]{--grid-cs: 15 }.grid>.grid_item[span^="16"]{--grid-cs: 16 }.grid>.grid_item[span^="17"]{--grid-cs: 17 }.grid>.grid_item[span^="18"]{--grid-cs: 18 }.grid>.grid_item[span^="19"]{--grid-cs: 19 }.grid>.grid_item[span^="20"]{--grid-cs: 20 }.grid>.grid_item[span^="21"]{--grid-cs: 21 }.grid>.grid_item[span^="22"]{--grid-cs: 22 }.grid>.grid_item[span^="23"]{--grid-cs: 23 }.grid>.grid_item[span^="24"]{--grid-cs: 24 }.grid>.grid_item[span$="+1"],.grid>.grid_item[span="1"]{--grid-ce: 1 }.grid>.grid_item[span$="+2"],.grid>.grid_item[span$="-1"],.grid>.grid_item[span="2"]{--grid-ce: 2 }.grid>.grid_item[span$="+3"],.grid>.grid_item[span$="-2"],.grid>.grid_item[span="3"]{--grid-ce: 3 }.grid>.grid_item[span$="+4"],.grid>.grid_item[span$="-3"],.grid>.grid_item[span="4"]{--grid-ce: 4 }.grid>.grid_item[span$="+5"],.grid>.grid_item[span$="-4"],.grid>.grid_item[span="5"]{--grid-ce: 5 }.grid>.grid_item[span$="+6"],.grid>.grid_item[span$="-5"],.grid>.grid_item[span="6"]{--grid-ce: 6 }.grid>.grid_item[span$="+7"],.grid>.grid_item[span$="-6"],.grid>.grid_item[span="7"]{--grid-ce: 7 }.grid>.grid_item[span$="+8"],.grid>.grid_item[span$="-7"],.grid>.grid_item[span="8"]{--grid-ce: 8 }.grid>.grid_item[span$="+9"],.grid>.grid_item[span$="-8"],.grid>.grid_item[span="9"]{--grid-ce: 9 }.grid>.grid_item[span$="+10"],.grid>.grid_item[span$="-9"],.grid>.grid_item[span="10"]{--grid-ce: 10 }.grid>.grid_item[span$="+11"],.grid>.grid_item[span$="-10"],.grid>.grid_item[span="11"]{--grid-ce: 11 }.grid>.grid_item[span$="+12"],.grid>.grid_item[span$="-11"],.grid>.grid_item[span="12"]{--grid-ce: 12 }.grid>.grid_item[span$="+13"],.grid>.grid_item[span$="-12"],.grid>.grid_item[span="13"]{--grid-ce: 13 }.grid>.grid_item[span$="+14"],.grid>.grid_item[span$="-13"],.grid>.grid_item[span="14"]{--grid-ce: 14 }.grid>.grid_item[span$="+15"],.grid>.grid_item[span$="-14"],.grid>.grid_item[span="15"]{--grid-ce: 15 }.grid>.grid_item[span$="+16"],.grid>.grid_item[span$="-15"],.grid>.grid_item[span="16"]{--grid-ce: 16 }.grid>.grid_item[span$="+17"],.grid>.grid_item[span$="-16"],.grid>.grid_item[span="17"]{--grid-ce: 17 }.grid>.grid_item[span$="+18"],.grid>.grid_item[span$="-17"],.grid>.grid_item[span="18"]{--grid-ce: 18 }.grid>.grid_item[span$="+19"],.grid>.grid_item[span$="-18"],.grid>.grid_item[span="19"]{--grid-ce: 19 }.grid>.grid_item[span$="+20"],.grid>.grid_item[span$="-19"],.grid>.grid_item[span="20"]{--grid-ce: 20 }.grid>.grid_item[span$="+21"],.grid>.grid_item[span$="-20"],.grid>.grid_item[span="21"]{--grid-ce: 21 }.grid>.grid_item[span$="+22"],.grid>.grid_item[span$="-21"],.grid>.grid_item[span="22"]{--grid-ce: 22 }.grid>.grid_item[span$="+23"],.grid>.grid_item[span$="-22"],.grid>.grid_item[span="23"]{--grid-ce: 23 }.grid>.grid_item[span$="+24"],.grid>.grid_item[span$="-23"],.grid>.grid_item[span="24"]{--grid-ce: 24 }.grid>.grid_item[span$="-24"]{--grid-ce: 25 }.grid>.grid_item[span]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span*="+"],.grid>.grid_item[span*="-"],.grid>.grid_item[span*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span*="-"],.grid>.grid_item[span*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span=row]{grid-column:1 / -1}@media only screen and (width>=768px){.grid[col-md="1"]{--grid-tc: repeat(1, 1fr) }.grid[col-md="2"]{--grid-tc: repeat(2, 1fr) }.grid[col-md="3"]{--grid-tc: repeat(3, 1fr) }.grid[col-md="4"]{--grid-tc: repeat(4, 1fr) }.grid[col-md="5"]{--grid-tc: repeat(5, 1fr) }.grid[col-md="6"]{--grid-tc: repeat(6, 1fr) }.grid[col-md="7"]{--grid-tc: repeat(7, 1fr) }.grid[col-md="8"]{--grid-tc: repeat(8, 1fr) }.grid[col-md="9"]{--grid-tc: repeat(9, 1fr) }.grid[col-md="10"]{--grid-tc: repeat(10, 1fr) }.grid[col-md="11"]{--grid-tc: repeat(11, 1fr) }.grid[col-md="12"]{--grid-tc: repeat(12, 1fr) }.grid[col-md="13"]{--grid-tc: repeat(13, 1fr) }.grid[col-md="14"]{--grid-tc: repeat(14, 1fr) }.grid[col-md="15"]{--grid-tc: repeat(15, 1fr) }.grid[col-md="16"]{--grid-tc: repeat(16, 1fr) }.grid[col-md="17"]{--grid-tc: repeat(17, 1fr) }.grid[col-md="18"]{--grid-tc: repeat(18, 1fr) }.grid[col-md="19"]{--grid-tc: repeat(19, 1fr) }.grid[col-md="20"]{--grid-tc: repeat(20, 1fr) }.grid[col-md="21"]{--grid-tc: repeat(21, 1fr) }.grid[col-md="22"]{--grid-tc: repeat(22, 1fr) }.grid[col-md="23"]{--grid-tc: repeat(23, 1fr) }.grid[col-md="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span-md^="1"]{--grid-cs: 1 }.grid>.grid_item[span-md^="2"]{--grid-cs: 2 }.grid>.grid_item[span-md^="3"]{--grid-cs: 3 }.grid>.grid_item[span-md^="4"]{--grid-cs: 4 }.grid>.grid_item[span-md^="5"]{--grid-cs: 5 }.grid>.grid_item[span-md^="6"]{--grid-cs: 6 }.grid>.grid_item[span-md^="7"]{--grid-cs: 7 }.grid>.grid_item[span-md^="8"]{--grid-cs: 8 }.grid>.grid_item[span-md^="9"]{--grid-cs: 9 }.grid>.grid_item[span-md^="10"]{--grid-cs: 10 }.grid>.grid_item[span-md^="11"]{--grid-cs: 11 }.grid>.grid_item[span-md^="12"]{--grid-cs: 12 }.grid>.grid_item[span-md^="13"]{--grid-cs: 13 }.grid>.grid_item[span-md^="14"]{--grid-cs: 14 }.grid>.grid_item[span-md^="15"]{--grid-cs: 15 }.grid>.grid_item[span-md^="16"]{--grid-cs: 16 }.grid>.grid_item[span-md^="17"]{--grid-cs: 17 }.grid>.grid_item[span-md^="18"]{--grid-cs: 18 }.grid>.grid_item[span-md^="19"]{--grid-cs: 19 }.grid>.grid_item[span-md^="20"]{--grid-cs: 20 }.grid>.grid_item[span-md^="21"]{--grid-cs: 21 }.grid>.grid_item[span-md^="22"]{--grid-cs: 22 }.grid>.grid_item[span-md^="23"]{--grid-cs: 23 }.grid>.grid_item[span-md^="24"]{--grid-cs: 24 }.grid>.grid_item[span-md$="+1"],.grid>.grid_item[span-md="1"]{--grid-ce: 1 }.grid>.grid_item[span-md$="+2"],.grid>.grid_item[span-md$="-1"],.grid>.grid_item[span-md="2"]{--grid-ce: 2 }.grid>.grid_item[span-md$="+3"],.grid>.grid_item[span-md$="-2"],.grid>.grid_item[span-md="3"]{--grid-ce: 3 }.grid>.grid_item[span-md$="+4"],.grid>.grid_item[span-md$="-3"],.grid>.grid_item[span-md="4"]{--grid-ce: 4 }.grid>.grid_item[span-md$="+5"],.grid>.grid_item[span-md$="-4"],.grid>.grid_item[span-md="5"]{--grid-ce: 5 }.grid>.grid_item[span-md$="+6"],.grid>.grid_item[span-md$="-5"],.grid>.grid_item[span-md="6"]{--grid-ce: 6 }.grid>.grid_item[span-md$="+7"],.grid>.grid_item[span-md$="-6"],.grid>.grid_item[span-md="7"]{--grid-ce: 7 }.grid>.grid_item[span-md$="+8"],.grid>.grid_item[span-md$="-7"],.grid>.grid_item[span-md="8"]{--grid-ce: 8 }.grid>.grid_item[span-md$="+9"],.grid>.grid_item[span-md$="-8"],.grid>.grid_item[span-md="9"]{--grid-ce: 9 }.grid>.grid_item[span-md$="+10"],.grid>.grid_item[span-md$="-9"],.grid>.grid_item[span-md="10"]{--grid-ce: 10 }.grid>.grid_item[span-md$="+11"],.grid>.grid_item[span-md$="-10"],.grid>.grid_item[span-md="11"]{--grid-ce: 11 }.grid>.grid_item[span-md$="+12"],.grid>.grid_item[span-md$="-11"],.grid>.grid_item[span-md="12"]{--grid-ce: 12 }.grid>.grid_item[span-md$="+13"],.grid>.grid_item[span-md$="-12"],.grid>.grid_item[span-md="13"]{--grid-ce: 13 }.grid>.grid_item[span-md$="+14"],.grid>.grid_item[span-md$="-13"],.grid>.grid_item[span-md="14"]{--grid-ce: 14 }.grid>.grid_item[span-md$="+15"],.grid>.grid_item[span-md$="-14"],.grid>.grid_item[span-md="15"]{--grid-ce: 15 }.grid>.grid_item[span-md$="+16"],.grid>.grid_item[span-md$="-15"],.grid>.grid_item[span-md="16"]{--grid-ce: 16 }.grid>.grid_item[span-md$="+17"],.grid>.grid_item[span-md$="-16"],.grid>.grid_item[span-md="17"]{--grid-ce: 17 }.grid>.grid_item[span-md$="+18"],.grid>.grid_item[span-md$="-17"],.grid>.grid_item[span-md="18"]{--grid-ce: 18 }.grid>.grid_item[span-md$="+19"],.grid>.grid_item[span-md$="-18"],.grid>.grid_item[span-md="19"]{--grid-ce: 19 }.grid>.grid_item[span-md$="+20"],.grid>.grid_item[span-md$="-19"],.grid>.grid_item[span-md="20"]{--grid-ce: 20 }.grid>.grid_item[span-md$="+21"],.grid>.grid_item[span-md$="-20"],.grid>.grid_item[span-md="21"]{--grid-ce: 21 }.grid>.grid_item[span-md$="+22"],.grid>.grid_item[span-md$="-21"],.grid>.grid_item[span-md="22"]{--grid-ce: 22 }.grid>.grid_item[span-md$="+23"],.grid>.grid_item[span-md$="-22"],.grid>.grid_item[span-md="23"]{--grid-ce: 23 }.grid>.grid_item[span-md$="+24"],.grid>.grid_item[span-md$="-23"],.grid>.grid_item[span-md="24"]{--grid-ce: 24 }.grid>.grid_item[span-md$="-24"]{--grid-ce: 25 }.grid>.grid_item[span-md]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span-md*="+"],.grid>.grid_item[span-md*="-"],.grid>.grid_item[span-md*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span-md*="-"],.grid>.grid_item[span-md*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span-md=row]{grid-column:1 / -1}}@media only screen and (width>=1024px){.grid[col-lg="1"]{--grid-tc: repeat(1, 1fr) }.grid[col-lg="2"]{--grid-tc: repeat(2, 1fr) }.grid[col-lg="3"]{--grid-tc: repeat(3, 1fr) }.grid[col-lg="4"]{--grid-tc: repeat(4, 1fr) }.grid[col-lg="5"]{--grid-tc: repeat(5, 1fr) }.grid[col-lg="6"]{--grid-tc: repeat(6, 1fr) }.grid[col-lg="7"]{--grid-tc: repeat(7, 1fr) }.grid[col-lg="8"]{--grid-tc: repeat(8, 1fr) }.grid[col-lg="9"]{--grid-tc: repeat(9, 1fr) }.grid[col-lg="10"]{--grid-tc: repeat(10, 1fr) }.grid[col-lg="11"]{--grid-tc: repeat(11, 1fr) }.grid[col-lg="12"]{--grid-tc: repeat(12, 1fr) }.grid[col-lg="13"]{--grid-tc: repeat(13, 1fr) }.grid[col-lg="14"]{--grid-tc: repeat(14, 1fr) }.grid[col-lg="15"]{--grid-tc: repeat(15, 1fr) }.grid[col-lg="16"]{--grid-tc: repeat(16, 1fr) }.grid[col-lg="17"]{--grid-tc: repeat(17, 1fr) }.grid[col-lg="18"]{--grid-tc: repeat(18, 1fr) }.grid[col-lg="19"]{--grid-tc: repeat(19, 1fr) }.grid[col-lg="20"]{--grid-tc: repeat(20, 1fr) }.grid[col-lg="21"]{--grid-tc: repeat(21, 1fr) }.grid[col-lg="22"]{--grid-tc: repeat(22, 1fr) }.grid[col-lg="23"]{--grid-tc: repeat(23, 1fr) }.grid[col-lg="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span-lg^="1"]{--grid-cs: 1 }.grid>.grid_item[span-lg^="2"]{--grid-cs: 2 }.grid>.grid_item[span-lg^="3"]{--grid-cs: 3 }.grid>.grid_item[span-lg^="4"]{--grid-cs: 4 }.grid>.grid_item[span-lg^="5"]{--grid-cs: 5 }.grid>.grid_item[span-lg^="6"]{--grid-cs: 6 }.grid>.grid_item[span-lg^="7"]{--grid-cs: 7 }.grid>.grid_item[span-lg^="8"]{--grid-cs: 8 }.grid>.grid_item[span-lg^="9"]{--grid-cs: 9 }.grid>.grid_item[span-lg^="10"]{--grid-cs: 10 }.grid>.grid_item[span-lg^="11"]{--grid-cs: 11 }.grid>.grid_item[span-lg^="12"]{--grid-cs: 12 }.grid>.grid_item[span-lg^="13"]{--grid-cs: 13 }.grid>.grid_item[span-lg^="14"]{--grid-cs: 14 }.grid>.grid_item[span-lg^="15"]{--grid-cs: 15 }.grid>.grid_item[span-lg^="16"]{--grid-cs: 16 }.grid>.grid_item[span-lg^="17"]{--grid-cs: 17 }.grid>.grid_item[span-lg^="18"]{--grid-cs: 18 }.grid>.grid_item[span-lg^="19"]{--grid-cs: 19 }.grid>.grid_item[span-lg^="20"]{--grid-cs: 20 }.grid>.grid_item[span-lg^="21"]{--grid-cs: 21 }.grid>.grid_item[span-lg^="22"]{--grid-cs: 22 }.grid>.grid_item[span-lg^="23"]{--grid-cs: 23 }.grid>.grid_item[span-lg^="24"]{--grid-cs: 24 }.grid>.grid_item[span-lg$="+1"],.grid>.grid_item[span-lg="1"]{--grid-ce: 1 }.grid>.grid_item[span-lg$="+2"],.grid>.grid_item[span-lg$="-1"],.grid>.grid_item[span-lg="2"]{--grid-ce: 2 }.grid>.grid_item[span-lg$="+3"],.grid>.grid_item[span-lg$="-2"],.grid>.grid_item[span-lg="3"]{--grid-ce: 3 }.grid>.grid_item[span-lg$="+4"],.grid>.grid_item[span-lg$="-3"],.grid>.grid_item[span-lg="4"]{--grid-ce: 4 }.grid>.grid_item[span-lg$="+5"],.grid>.grid_item[span-lg$="-4"],.grid>.grid_item[span-lg="5"]{--grid-ce: 5 }.grid>.grid_item[span-lg$="+6"],.grid>.grid_item[span-lg$="-5"],.grid>.grid_item[span-lg="6"]{--grid-ce: 6 }.grid>.grid_item[span-lg$="+7"],.grid>.grid_item[span-lg$="-6"],.grid>.grid_item[span-lg="7"]{--grid-ce: 7 }.grid>.grid_item[span-lg$="+8"],.grid>.grid_item[span-lg$="-7"],.grid>.grid_item[span-lg="8"]{--grid-ce: 8 }.grid>.grid_item[span-lg$="+9"],.grid>.grid_item[span-lg$="-8"],.grid>.grid_item[span-lg="9"]{--grid-ce: 9 }.grid>.grid_item[span-lg$="+10"],.grid>.grid_item[span-lg$="-9"],.grid>.grid_item[span-lg="10"]{--grid-ce: 10 }.grid>.grid_item[span-lg$="+11"],.grid>.grid_item[span-lg$="-10"],.grid>.grid_item[span-lg="11"]{--grid-ce: 11 }.grid>.grid_item[span-lg$="+12"],.grid>.grid_item[span-lg$="-11"],.grid>.grid_item[span-lg="12"]{--grid-ce: 12 }.grid>.grid_item[span-lg$="+13"],.grid>.grid_item[span-lg$="-12"],.grid>.grid_item[span-lg="13"]{--grid-ce: 13 }.grid>.grid_item[span-lg$="+14"],.grid>.grid_item[span-lg$="-13"],.grid>.grid_item[span-lg="14"]{--grid-ce: 14 }.grid>.grid_item[span-lg$="+15"],.grid>.grid_item[span-lg$="-14"],.grid>.grid_item[span-lg="15"]{--grid-ce: 15 }.grid>.grid_item[span-lg$="+16"],.grid>.grid_item[span-lg$="-15"],.grid>.grid_item[span-lg="16"]{--grid-ce: 16 }.grid>.grid_item[span-lg$="+17"],.grid>.grid_item[span-lg$="-16"],.grid>.grid_item[span-lg="17"]{--grid-ce: 17 }.grid>.grid_item[span-lg$="+18"],.grid>.grid_item[span-lg$="-17"],.grid>.grid_item[span-lg="18"]{--grid-ce: 18 }.grid>.grid_item[span-lg$="+19"],.grid>.grid_item[span-lg$="-18"],.grid>.grid_item[span-lg="19"]{--grid-ce: 19 }.grid>.grid_item[span-lg$="+20"],.grid>.grid_item[span-lg$="-19"],.grid>.grid_item[span-lg="20"]{--grid-ce: 20 }.grid>.grid_item[span-lg$="+21"],.grid>.grid_item[span-lg$="-20"],.grid>.grid_item[span-lg="21"]{--grid-ce: 21 }.grid>.grid_item[span-lg$="+22"],.grid>.grid_item[span-lg$="-21"],.grid>.grid_item[span-lg="22"]{--grid-ce: 22 }.grid>.grid_item[span-lg$="+23"],.grid>.grid_item[span-lg$="-22"],.grid>.grid_item[span-lg="23"]{--grid-ce: 23 }.grid>.grid_item[span-lg$="+24"],.grid>.grid_item[span-lg$="-23"],.grid>.grid_item[span-lg="24"]{--grid-ce: 24 }.grid>.grid_item[span-lg$="-24"]{--grid-ce: 25 }.grid>.grid_item[span-lg]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span-lg*="+"],.grid>.grid_item[span-lg*="-"],.grid>.grid_item[span-lg*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span-lg*="-"],.grid>.grid_item[span-lg*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span-lg=row]{grid-column:1 / -1}}@media only screen and (width>=1440px){.grid[col-xl="1"]{--grid-tc: repeat(1, 1fr) }.grid[col-xl="2"]{--grid-tc: repeat(2, 1fr) }.grid[col-xl="3"]{--grid-tc: repeat(3, 1fr) }.grid[col-xl="4"]{--grid-tc: repeat(4, 1fr) }.grid[col-xl="5"]{--grid-tc: repeat(5, 1fr) }.grid[col-xl="6"]{--grid-tc: repeat(6, 1fr) }.grid[col-xl="7"]{--grid-tc: repeat(7, 1fr) }.grid[col-xl="8"]{--grid-tc: repeat(8, 1fr) }.grid[col-xl="9"]{--grid-tc: repeat(9, 1fr) }.grid[col-xl="10"]{--grid-tc: repeat(10, 1fr) }.grid[col-xl="11"]{--grid-tc: repeat(11, 1fr) }.grid[col-xl="12"]{--grid-tc: repeat(12, 1fr) }.grid[col-xl="13"]{--grid-tc: repeat(13, 1fr) }.grid[col-xl="14"]{--grid-tc: repeat(14, 1fr) }.grid[col-xl="15"]{--grid-tc: repeat(15, 1fr) }.grid[col-xl="16"]{--grid-tc: repeat(16, 1fr) }.grid[col-xl="17"]{--grid-tc: repeat(17, 1fr) }.grid[col-xl="18"]{--grid-tc: repeat(18, 1fr) }.grid[col-xl="19"]{--grid-tc: repeat(19, 1fr) }.grid[col-xl="20"]{--grid-tc: repeat(20, 1fr) }.grid[col-xl="21"]{--grid-tc: repeat(21, 1fr) }.grid[col-xl="22"]{--grid-tc: repeat(22, 1fr) }.grid[col-xl="23"]{--grid-tc: repeat(23, 1fr) }.grid[col-xl="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span-xl^="1"]{--grid-cs: 1 }.grid>.grid_item[span-xl^="2"]{--grid-cs: 2 }.grid>.grid_item[span-xl^="3"]{--grid-cs: 3 }.grid>.grid_item[span-xl^="4"]{--grid-cs: 4 }.grid>.grid_item[span-xl^="5"]{--grid-cs: 5 }.grid>.grid_item[span-xl^="6"]{--grid-cs: 6 }.grid>.grid_item[span-xl^="7"]{--grid-cs: 7 }.grid>.grid_item[span-xl^="8"]{--grid-cs: 8 }.grid>.grid_item[span-xl^="9"]{--grid-cs: 9 }.grid>.grid_item[span-xl^="10"]{--grid-cs: 10 }.grid>.grid_item[span-xl^="11"]{--grid-cs: 11 }.grid>.grid_item[span-xl^="12"]{--grid-cs: 12 }.grid>.grid_item[span-xl^="13"]{--grid-cs: 13 }.grid>.grid_item[span-xl^="14"]{--grid-cs: 14 }.grid>.grid_item[span-xl^="15"]{--grid-cs: 15 }.grid>.grid_item[span-xl^="16"]{--grid-cs: 16 }.grid>.grid_item[span-xl^="17"]{--grid-cs: 17 }.grid>.grid_item[span-xl^="18"]{--grid-cs: 18 }.grid>.grid_item[span-xl^="19"]{--grid-cs: 19 }.grid>.grid_item[span-xl^="20"]{--grid-cs: 20 }.grid>.grid_item[span-xl^="21"]{--grid-cs: 21 }.grid>.grid_item[span-xl^="22"]{--grid-cs: 22 }.grid>.grid_item[span-xl^="23"]{--grid-cs: 23 }.grid>.grid_item[span-xl^="24"]{--grid-cs: 24 }.grid>.grid_item[span-xl$="+1"],.grid>.grid_item[span-xl="1"]{--grid-ce: 1 }.grid>.grid_item[span-xl$="+2"],.grid>.grid_item[span-xl$="-1"],.grid>.grid_item[span-xl="2"]{--grid-ce: 2 }.grid>.grid_item[span-xl$="+3"],.grid>.grid_item[span-xl$="-2"],.grid>.grid_item[span-xl="3"]{--grid-ce: 3 }.grid>.grid_item[span-xl$="+4"],.grid>.grid_item[span-xl$="-3"],.grid>.grid_item[span-xl="4"]{--grid-ce: 4 }.grid>.grid_item[span-xl$="+5"],.grid>.grid_item[span-xl$="-4"],.grid>.grid_item[span-xl="5"]{--grid-ce: 5 }.grid>.grid_item[span-xl$="+6"],.grid>.grid_item[span-xl$="-5"],.grid>.grid_item[span-xl="6"]{--grid-ce: 6 }.grid>.grid_item[span-xl$="+7"],.grid>.grid_item[span-xl$="-6"],.grid>.grid_item[span-xl="7"]{--grid-ce: 7 }.grid>.grid_item[span-xl$="+8"],.grid>.grid_item[span-xl$="-7"],.grid>.grid_item[span-xl="8"]{--grid-ce: 8 }.grid>.grid_item[span-xl$="+9"],.grid>.grid_item[span-xl$="-8"],.grid>.grid_item[span-xl="9"]{--grid-ce: 9 }.grid>.grid_item[span-xl$="+10"],.grid>.grid_item[span-xl$="-9"],.grid>.grid_item[span-xl="10"]{--grid-ce: 10 }.grid>.grid_item[span-xl$="+11"],.grid>.grid_item[span-xl$="-10"],.grid>.grid_item[span-xl="11"]{--grid-ce: 11 }.grid>.grid_item[span-xl$="+12"],.grid>.grid_item[span-xl$="-11"],.grid>.grid_item[span-xl="12"]{--grid-ce: 12 }.grid>.grid_item[span-xl$="+13"],.grid>.grid_item[span-xl$="-12"],.grid>.grid_item[span-xl="13"]{--grid-ce: 13 }.grid>.grid_item[span-xl$="+14"],.grid>.grid_item[span-xl$="-13"],.grid>.grid_item[span-xl="14"]{--grid-ce: 14 }.grid>.grid_item[span-xl$="+15"],.grid>.grid_item[span-xl$="-14"],.grid>.grid_item[span-xl="15"]{--grid-ce: 15 }.grid>.grid_item[span-xl$="+16"],.grid>.grid_item[span-xl$="-15"],.grid>.grid_item[span-xl="16"]{--grid-ce: 16 }.grid>.grid_item[span-xl$="+17"],.grid>.grid_item[span-xl$="-16"],.grid>.grid_item[span-xl="17"]{--grid-ce: 17 }.grid>.grid_item[span-xl$="+18"],.grid>.grid_item[span-xl$="-17"],.grid>.grid_item[span-xl="18"]{--grid-ce: 18 }.grid>.grid_item[span-xl$="+19"],.grid>.grid_item[span-xl$="-18"],.grid>.grid_item[span-xl="19"]{--grid-ce: 19 }.grid>.grid_item[span-xl$="+20"],.grid>.grid_item[span-xl$="-19"],.grid>.grid_item[span-xl="20"]{--grid-ce: 20 }.grid>.grid_item[span-xl$="+21"],.grid>.grid_item[span-xl$="-20"],.grid>.grid_item[span-xl="21"]{--grid-ce: 21 }.grid>.grid_item[span-xl$="+22"],.grid>.grid_item[span-xl$="-21"],.grid>.grid_item[span-xl="22"]{--grid-ce: 22 }.grid>.grid_item[span-xl$="+23"],.grid>.grid_item[span-xl$="-22"],.grid>.grid_item[span-xl="23"]{--grid-ce: 23 }.grid>.grid_item[span-xl$="+24"],.grid>.grid_item[span-xl$="-23"],.grid>.grid_item[span-xl="24"]{--grid-ce: 24 }.grid>.grid_item[span-xl$="-24"]{--grid-ce: 25 }.grid>.grid_item[span-xl]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span-xl*="+"],.grid>.grid_item[span-xl*="-"],.grid>.grid_item[span-xl*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span-xl*="-"],.grid>.grid_item[span-xl*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span-xl=row]{grid-column:1 / -1}}}@layer global{.layout{display:flex;flex-direction:column;width:100vw;min-height:100vh;.layout_content{flex:1}}.layout_content_main{container:main / inline-size}.layout-centered{.layout_content{display:grid;gap:var(--sm3);grid-template-columns:1fr minmax(0,var(--layout-content-width)) 1fr;margin-top:var(--lg1);margin-bottom:var(--sm1);@media(width>=768px){margin-top:var(--xl3);margin-bottom:var(--md3);gap:var(--md3)}}.layout_content_main{grid-column:2}}.layout-sidebar{.layout_content{@media(width>=768px){display:grid;grid-template-columns:var(--layout-aside-width) minmax(0,1fr)}}.layout_content_main{padding:var(--sm2);@media(width>=768px){grid-row:1;grid-column:2;padding:var(--lg1) var(--md2)}}.layout_content_aside{@media(width>=768px){grid-row:1;grid-column:1;padding:var(--lg1) var(--md3)}}}.layout-sidebar-end{.layout_content{@media(width>=768px){grid-template-columns:minmax(0,1fr) var(--layout-aside-width)}}.layout_content_main{@media(width>=768px){grid-column:1}}.layout_content_aside{@media(width>=768px){grid-column:2}}}.layout-docs{.layout_content{@media(width>=768px){display:grid;grid-template-columns:var(--layout-aside-width) minmax(0,1fr)}@media(width>=1024px){grid-template-columns:var(--layout-aside-width) minmax(0,var(--layout-content-width)) var(--layout-toc-width)}}.layout_content_main{padding:var(--sm2);@media(width>=768px){grid-row:1;grid-column:2;padding:var(--lg1) var(--md2)}}.layout_content_aside{display:none;@media(width>=768px){display:block;grid-row:1;grid-column:1;padding:var(--lg1) var(--md3)}}.layout_content_aside-toc{@media(width>=768px){display:none}@media(width>=1024px){display:block;grid-row:1;grid-column:3;padding:var(--lg1) var(--md3)}}}.layout-split{.layout_content{display:grid;@media(width>=768px){grid-template-columns:1fr 1fr}}}.layout-cover{min-height:100dvh;.layout_content{display:grid;place-items:center}}}@layer global{@scope(.prose)to (.not-prose){:is(p,ul,ol,blockquote,table):has(+:is(h1,h2,h3,h4)){margin-bottom:calc(var(--prose-spacing) * 2)}p,ul,ol,dl{margin-bottom:var(--prose-spacing);p,ul,ol,dl{margin-bottom:0}}ul,ol{ul,ol{margin-inline-start:0;padding-inline-start:var(--sm2)}li{margin-bottom:.5em;&::marker{color:light-dark(var(--base-300),var(--base-600))}}}ul{margin-inline-start:var(--sm2);list-style-type:"\2192 "}ol{margin-inline-start:var(--md2);list-style-type:decimal-leading-zero;li::marker{font-size:var(--text-sm)}}table{margin-top:var(--md1);margin-bottom:var(--md1)}}}@layer global{.wrap{display:grid;grid-template-columns:1fr var(--wrap-width) 1fr;>*,>astro-island>*,>astro-slot>*,>astro-static-slot>*{grid-column:2;padding-inline:var(--wrap-spacing);@media(width>=768px){padding-inline:var(--wrap-md-spacing)}@media(width>=1024px){padding-inline:var(--wrap-lg-spacing)}}}.wrap-sm{--wrap-width: var(--wrap-width-sm)}.wrap-md{--wrap-width: var(--wrap-width-md)}.wrap-lg{--wrap-width: var(--wrap-width-lg)}.wrap_content-fullBleed{grid-column:1 / -1;width:100%;object-fit:cover}}@layer helpers{.c-base-0{color:var(--base-0)!important}.bdc-base-0{border-color:var(--base-0)!important}.bgc-base-0{background-color:var(--base-0)!important}.c-base-50{color:var(--base-50)!important}.bdc-base-50{border-color:var(--base-50)!important}.bgc-base-50{background-color:var(--base-50)!important}.c-base-100{color:var(--base-100)!important}.bdc-base-100{border-color:var(--base-100)!important}.bgc-base-100{background-color:var(--base-100)!important}.c-base-200{color:var(--base-200)!important}.bdc-base-200{border-color:var(--base-200)!important}.bgc-base-200{background-color:var(--base-200)!important}.c-base-300{color:var(--base-300)!important}.bdc-base-300{border-color:var(--base-300)!important}.bgc-base-300{background-color:var(--base-300)!important}.c-base-400{color:var(--base-400)!important}.bdc-base-400{border-color:var(--base-400)!important}.bgc-base-400{background-color:var(--base-400)!important}.c-base-500{color:var(--base-500)!important}.bdc-base-500{border-color:var(--base-500)!important}.bgc-base-500{background-color:var(--base-500)!important}.c-base-600{color:var(--base-600)!important}.bdc-base-600{border-color:var(--base-600)!important}.bgc-base-600{background-color:var(--base-600)!important}.c-base-700{color:var(--base-700)!important}.bdc-base-700{border-color:var(--base-700)!important}.bgc-base-700{background-color:var(--base-700)!important}.c-base-800{color:var(--base-800)!important}.bdc-base-800{border-color:var(--base-800)!important}.bgc-base-800{background-color:var(--base-800)!important}.c-base-900{color:var(--base-900)!important}.bdc-base-900{border-color:var(--base-900)!important}.bgc-base-900{background-color:var(--base-900)!important}.c-base-950{color:var(--base-950)!important}.bdc-base-950{border-color:var(--base-950)!important}.bgc-base-950{background-color:var(--base-950)!important}.c-primary-50{color:var(--primary-50)!important}.bdc-primary-50{border-color:var(--primary-50)!important}.bgc-primary-50{background-color:var(--primary-50)!important}.c-primary-100{color:var(--primary-100)!important}.bdc-primary-100{border-color:var(--primary-100)!important}.bgc-primary-100{background-color:var(--primary-100)!important}.c-primary-200{color:var(--primary-200)!important}.bdc-primary-200{border-color:var(--primary-200)!important}.bgc-primary-200{background-color:var(--primary-200)!important}.c-primary-300{color:var(--primary-300)!important}.bdc-primary-300{border-color:var(--primary-300)!important}.bgc-primary-300{background-color:var(--primary-300)!important}.c-primary-400{color:var(--primary-400)!important}.bdc-primary-400{border-color:var(--primary-400)!important}.bgc-primary-400{background-color:var(--primary-400)!important}.c-primary-500{color:var(--primary-500)!important}.bdc-primary-500{border-color:var(--primary-500)!important}.bgc-primary-500{background-color:var(--primary-500)!important}.c-primary-600{color:var(--primary-600)!important}.bdc-primary-600{border-color:var(--primary-600)!important}.bgc-primary-600{background-color:var(--primary-600)!important}.c-primary-700{color:var(--primary-700)!important}.bdc-primary-700{border-color:var(--primary-700)!important}.bgc-primary-700{background-color:var(--primary-700)!important}.c-primary-800{color:var(--primary-800)!important}.bdc-primary-800{border-color:var(--primary-800)!important}.bgc-primary-800{background-color:var(--primary-800)!important}.c-primary-900{color:var(--primary-900)!important}.bdc-primary-900{border-color:var(--primary-900)!important}.bgc-primary-900{background-color:var(--primary-900)!important}.c-primary-950{color:var(--primary-950)!important}.bdc-primary-950{border-color:var(--primary-950)!important}.bgc-primary-950{background-color:var(--primary-950)!important}.c-yes-100{color:var(--yes-100)!important}.bdc-yes-100{border-color:var(--yes-100)!important}.bgc-yes-100{background-color:var(--yes-100)!important}.c-yes-200{color:var(--yes-200)!important}.bdc-yes-200{border-color:var(--yes-200)!important}.bgc-yes-200{background-color:var(--yes-200)!important}.c-yes-300{color:var(--yes-300)!important}.bdc-yes-300{border-color:var(--yes-300)!important}.bgc-yes-300{background-color:var(--yes-300)!important}.c-yes-400{color:var(--yes-400)!important}.bdc-yes-400{border-color:var(--yes-400)!important}.bgc-yes-400{background-color:var(--yes-400)!important}.c-yes-500{color:var(--yes-500)!important}.bdc-yes-500{border-color:var(--yes-500)!important}.bgc-yes-500{background-color:var(--yes-500)!important}.c-no-100{color:var(--no-100)!important}.bdc-no-100{border-color:var(--no-100)!important}.bgc-no-100{background-color:var(--no-100)!important}.c-no-200{color:var(--no-200)!important}.bdc-no-200{border-color:var(--no-200)!important}.bgc-no-200{background-color:var(--no-200)!important}.c-no-300{color:var(--no-300)!important}.bdc-no-300{border-color:var(--no-300)!important}.bgc-no-300{background-color:var(--no-300)!important}.c-no-400{color:var(--no-400)!important}.bdc-no-400{border-color:var(--no-400)!important}.bgc-no-400{background-color:var(--no-400)!important}.c-no-500{color:var(--no-500)!important}.bdc-no-500{border-color:var(--no-500)!important}.bgc-no-500{background-color:var(--no-500)!important}.c-maybe-100{color:var(--maybe-100)!important}.bdc-maybe-100{border-color:var(--maybe-100)!important}.bgc-maybe-100{background-color:var(--maybe-100)!important}.c-maybe-200{color:var(--maybe-200)!important}.bdc-maybe-200{border-color:var(--maybe-200)!important}.bgc-maybe-200{background-color:var(--maybe-200)!important}.c-maybe-300{color:var(--maybe-300)!important}.bdc-maybe-300{border-color:var(--maybe-300)!important}.bgc-maybe-300{background-color:var(--maybe-300)!important}.c-maybe-400{color:var(--maybe-400)!important}.bdc-maybe-400{border-color:var(--maybe-400)!important}.bgc-maybe-400{background-color:var(--maybe-400)!important}.c-maybe-500{color:var(--maybe-500)!important}.bdc-maybe-500{border-color:var(--maybe-500)!important}.bgc-maybe-500{background-color:var(--maybe-500)!important}}@layer helpers{body.dev{--baseline: 8;background-size:100% calc(var(--baseline) * 1px)!important;background-image:linear-gradient(to bottom,#0000 calc((var(--baseline) - 1) * 1px),#ff69b4 calc(var(--baseline) * 1px))!important}.dev-error{position:fixed!important;top:var(--md1)!important;left:var(--md1)!important;z-index:var(--z-top)!important;padding:var(--sm1)!important;font-size:1rem!important;color:var(--no-500)!important;background:var(--no-100)!important;border:1px solid var(--no-500)!important;border-radius:var(--radius-md)!important}}@layer helpers{.of-auto,.overflow-auto{overflow:auto!important}.of-hidden,.overflow-hidden{overflow:hidden!important}.of-clip,.overflow-clip{overflow:clip!important}.of-visible,.overflow-visible{overflow:visible!important}.of-scroll,.overflow-scroll{overflow:scroll!important}.of-x-auto,.overflow-x-auto{overflow-x:auto!important}.of-y-auto,.overflow-y-auto{overflow-y:auto!important}.of-x-hidden,.overflow-x-hidden{overflow-x:hidden!important}.of-y-hidden,.overflow-y-hidden{overflow-y:hidden!important}.of-x-clip,.overflow-x-clip{overflow-x:clip!important}.of-y-clip,.overflow-y-clip{overflow-y:clip!important}.of-x-visible,.overflow-x-visible{overflow-x:visible!important}.of-y-visible,.overflow-y-visible{overflow-y:visible!important}.of-x-scroll,.overflow-x-scroll{overflow-x:scroll!important}.of-y-scroll,.overflow-y-scroll{overflow-y:scroll!important}.position-static{position:static!important}.position-fixed{position:fixed!important}.position-absolute{position:absolute!important}.position-relative{position:relative!important}.position-sticky{position:sticky!important}.visibility-visible{visibility:visible!important}.visibility-hidden{visibility:hidden!important}.visibility-collapse{visibility:collapse!important}.z-auto{z-index:auto!important}.z-bottom{z-index:var(--z-bottom)!important}.z-0{z-index:var(--z-0)!important}.z-1{z-index:var(--z-1)!important}.z-2{z-index:var(--z-2)!important}.z-3{z-index:var(--z-3)!important}.z-4{z-index:var(--z-4)!important}.z-5{z-index:var(--z-5)!important}.z-top{z-index:var(--z-top)!important}}@layer helpers{.o-0{opacity:var(--o-0)!important}.o-1{opacity:var(--o-1)!important}.o-2{opacity:var(--o-2)!important}.o-3{opacity:var(--o-3)!important}.o-4{opacity:var(--o-4)!important}.o-5{opacity:var(--o-5)!important}}@layer helpers{.ar-square{aspect-ratio:var(--ar-square)!important}.ar-landscape{aspect-ratio:var(--ar-landscape)!important}.ar-portrait{aspect-ratio:var(--ar-portrait)!important}.ar-widescreen{aspect-ratio:var(--ar-widescreen)!important}.ar-golden{aspect-ratio:var(--ar-golden)!important}}@layer helpers{.w-0{width:0!important}.h-0{height:0!important}.m-0{margin:0!important}.mt-0{margin-top:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mr-0{margin-right:0!important}.mis-0{margin-inline-start:0!important}.mie-0{margin-inline-end:0!important}.p-0{padding:0!important}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.pis-0{padding-inline-start:0!important}.pie-0{padding-inline-end:0!important}.w-xs1{width:var(--xs1)!important}.h-xs1{height:var(--xs1)!important}.m-xs1{margin:var(--xs1)!important}.mt-xs1{margin-top:var(--xs1)!important}.mb-xs1{margin-bottom:var(--xs1)!important}.ml-xs1{margin-left:var(--xs1)!important}.mr-xs1{margin-right:var(--xs1)!important}.mis-xs1{margin-inline-start:var(--xs1)!important}.mie-xs1{margin-inline-end:var(--xs1)!important}.p-xs1{padding:var(--xs1)!important}.pt-xs1{padding-top:var(--xs1)!important}.pb-xs1{padding-bottom:var(--xs1)!important}.pl-xs1{padding-left:var(--xs1)!important}.pr-xs1{padding-right:var(--xs1)!important}.pis-xs1{padding-inline-start:var(--xs1)!important}.pie-xs1{padding-inline-end:var(--xs1)!important}.w-xs2{width:var(--xs2)!important}.h-xs2{height:var(--xs2)!important}.m-xs2{margin:var(--xs2)!important}.mt-xs2{margin-top:var(--xs2)!important}.mb-xs2{margin-bottom:var(--xs2)!important}.ml-xs2{margin-left:var(--xs2)!important}.mr-xs2{margin-right:var(--xs2)!important}.mis-xs2{margin-inline-start:var(--xs2)!important}.mie-xs2{margin-inline-end:var(--xs2)!important}.p-xs2{padding:var(--xs2)!important}.pt-xs2{padding-top:var(--xs2)!important}.pb-xs2{padding-bottom:var(--xs2)!important}.pl-xs2{padding-left:var(--xs2)!important}.pr-xs2{padding-right:var(--xs2)!important}.pis-xs2{padding-inline-start:var(--xs2)!important}.pie-xs2{padding-inline-end:var(--xs2)!important}.w-xs3{width:var(--xs3)!important}.h-xs3{height:var(--xs3)!important}.m-xs3{margin:var(--xs3)!important}.mt-xs3{margin-top:var(--xs3)!important}.mb-xs3{margin-bottom:var(--xs3)!important}.ml-xs3{margin-left:var(--xs3)!important}.mr-xs3{margin-right:var(--xs3)!important}.mis-xs3{margin-inline-start:var(--xs3)!important}.mie-xs3{margin-inline-end:var(--xs3)!important}.p-xs3{padding:var(--xs3)!important}.pt-xs3{padding-top:var(--xs3)!important}.pb-xs3{padding-bottom:var(--xs3)!important}.pl-xs3{padding-left:var(--xs3)!important}.pr-xs3{padding-right:var(--xs3)!important}.pis-xs3{padding-inline-start:var(--xs3)!important}.pie-xs3{padding-inline-end:var(--xs3)!important}.w-sm1{width:var(--sm1)!important}.h-sm1{height:var(--sm1)!important}.m-sm1{margin:var(--sm1)!important}.mt-sm1{margin-top:var(--sm1)!important}.mb-sm1{margin-bottom:var(--sm1)!important}.ml-sm1{margin-left:var(--sm1)!important}.mr-sm1{margin-right:var(--sm1)!important}.mis-sm1{margin-inline-start:var(--sm1)!important}.mie-sm1{margin-inline-end:var(--sm1)!important}.p-sm1{padding:var(--sm1)!important}.pt-sm1{padding-top:var(--sm1)!important}.pb-sm1{padding-bottom:var(--sm1)!important}.pl-sm1{padding-left:var(--sm1)!important}.pr-sm1{padding-right:var(--sm1)!important}.pis-sm1{padding-inline-start:var(--sm1)!important}.pie-sm1{padding-inline-end:var(--sm1)!important}.w-sm2{width:var(--sm2)!important}.h-sm2{height:var(--sm2)!important}.m-sm2{margin:var(--sm2)!important}.mt-sm2{margin-top:var(--sm2)!important}.mb-sm2{margin-bottom:var(--sm2)!important}.ml-sm2{margin-left:var(--sm2)!important}.mr-sm2{margin-right:var(--sm2)!important}.mis-sm2{margin-inline-start:var(--sm2)!important}.mie-sm2{margin-inline-end:var(--sm2)!important}.p-sm2{padding:var(--sm2)!important}.pt-sm2{padding-top:var(--sm2)!important}.pb-sm2{padding-bottom:var(--sm2)!important}.pl-sm2{padding-left:var(--sm2)!important}.pr-sm2{padding-right:var(--sm2)!important}.pis-sm2{padding-inline-start:var(--sm2)!important}.pie-sm2{padding-inline-end:var(--sm2)!important}.w-sm3{width:var(--sm3)!important}.h-sm3{height:var(--sm3)!important}.m-sm3{margin:var(--sm3)!important}.mt-sm3{margin-top:var(--sm3)!important}.mb-sm3{margin-bottom:var(--sm3)!important}.ml-sm3{margin-left:var(--sm3)!important}.mr-sm3{margin-right:var(--sm3)!important}.mis-sm3{margin-inline-start:var(--sm3)!important}.mie-sm3{margin-inline-end:var(--sm3)!important}.p-sm3{padding:var(--sm3)!important}.pt-sm3{padding-top:var(--sm3)!important}.pb-sm3{padding-bottom:var(--sm3)!important}.pl-sm3{padding-left:var(--sm3)!important}.pr-sm3{padding-right:var(--sm3)!important}.pis-sm3{padding-inline-start:var(--sm3)!important}.pie-sm3{padding-inline-end:var(--sm3)!important}.w-md1{width:var(--md1)!important}.h-md1{height:var(--md1)!important}.m-md1{margin:var(--md1)!important}.mt-md1{margin-top:var(--md1)!important}.mb-md1{margin-bottom:var(--md1)!important}.ml-md1{margin-left:var(--md1)!important}.mr-md1{margin-right:var(--md1)!important}.mis-md1{margin-inline-start:var(--md1)!important}.mie-md1{margin-inline-end:var(--md1)!important}.p-md1{padding:var(--md1)!important}.pt-md1{padding-top:var(--md1)!important}.pb-md1{padding-bottom:var(--md1)!important}.pl-md1{padding-left:var(--md1)!important}.pr-md1{padding-right:var(--md1)!important}.pis-md1{padding-inline-start:var(--md1)!important}.pie-md1{padding-inline-end:var(--md1)!important}.w-md2{width:var(--md2)!important}.h-md2{height:var(--md2)!important}.m-md2{margin:var(--md2)!important}.mt-md2{margin-top:var(--md2)!important}.mb-md2{margin-bottom:var(--md2)!important}.ml-md2{margin-left:var(--md2)!important}.mr-md2{margin-right:var(--md2)!important}.mis-md2{margin-inline-start:var(--md2)!important}.mie-md2{margin-inline-end:var(--md2)!important}.p-md2{padding:var(--md2)!important}.pt-md2{padding-top:var(--md2)!important}.pb-md2{padding-bottom:var(--md2)!important}.pl-md2{padding-left:var(--md2)!important}.pr-md2{padding-right:var(--md2)!important}.pis-md2{padding-inline-start:var(--md2)!important}.pie-md2{padding-inline-end:var(--md2)!important}.w-md3{width:var(--md3)!important}.h-md3{height:var(--md3)!important}.m-md3{margin:var(--md3)!important}.mt-md3{margin-top:var(--md3)!important}.mb-md3{margin-bottom:var(--md3)!important}.ml-md3{margin-left:var(--md3)!important}.mr-md3{margin-right:var(--md3)!important}.mis-md3{margin-inline-start:var(--md3)!important}.mie-md3{margin-inline-end:var(--md3)!important}.p-md3{padding:var(--md3)!important}.pt-md3{padding-top:var(--md3)!important}.pb-md3{padding-bottom:var(--md3)!important}.pl-md3{padding-left:var(--md3)!important}.pr-md3{padding-right:var(--md3)!important}.pis-md3{padding-inline-start:var(--md3)!important}.pie-md3{padding-inline-end:var(--md3)!important}.w-lg1{width:var(--lg1)!important}.h-lg1{height:var(--lg1)!important}.m-lg1{margin:var(--lg1)!important}.mt-lg1{margin-top:var(--lg1)!important}.mb-lg1{margin-bottom:var(--lg1)!important}.ml-lg1{margin-left:var(--lg1)!important}.mr-lg1{margin-right:var(--lg1)!important}.mis-lg1{margin-inline-start:var(--lg1)!important}.mie-lg1{margin-inline-end:var(--lg1)!important}.p-lg1{padding:var(--lg1)!important}.pt-lg1{padding-top:var(--lg1)!important}.pb-lg1{padding-bottom:var(--lg1)!important}.pl-lg1{padding-left:var(--lg1)!important}.pr-lg1{padding-right:var(--lg1)!important}.pis-lg1{padding-inline-start:var(--lg1)!important}.pie-lg1{padding-inline-end:var(--lg1)!important}.w-lg2{width:var(--lg2)!important}.h-lg2{height:var(--lg2)!important}.m-lg2{margin:var(--lg2)!important}.mt-lg2{margin-top:var(--lg2)!important}.mb-lg2{margin-bottom:var(--lg2)!important}.ml-lg2{margin-left:var(--lg2)!important}.mr-lg2{margin-right:var(--lg2)!important}.mis-lg2{margin-inline-start:var(--lg2)!important}.mie-lg2{margin-inline-end:var(--lg2)!important}.p-lg2{padding:var(--lg2)!important}.pt-lg2{padding-top:var(--lg2)!important}.pb-lg2{padding-bottom:var(--lg2)!important}.pl-lg2{padding-left:var(--lg2)!important}.pr-lg2{padding-right:var(--lg2)!important}.pis-lg2{padding-inline-start:var(--lg2)!important}.pie-lg2{padding-inline-end:var(--lg2)!important}.w-lg3{width:var(--lg3)!important}.h-lg3{height:var(--lg3)!important}.m-lg3{margin:var(--lg3)!important}.mt-lg3{margin-top:var(--lg3)!important}.mb-lg3{margin-bottom:var(--lg3)!important}.ml-lg3{margin-left:var(--lg3)!important}.mr-lg3{margin-right:var(--lg3)!important}.mis-lg3{margin-inline-start:var(--lg3)!important}.mie-lg3{margin-inline-end:var(--lg3)!important}.p-lg3{padding:var(--lg3)!important}.pt-lg3{padding-top:var(--lg3)!important}.pb-lg3{padding-bottom:var(--lg3)!important}.pl-lg3{padding-left:var(--lg3)!important}.pr-lg3{padding-right:var(--lg3)!important}.pis-lg3{padding-inline-start:var(--lg3)!important}.pie-lg3{padding-inline-end:var(--lg3)!important}.w-xl1{width:var(--xl1)!important}.h-xl1{height:var(--xl1)!important}.m-xl1{margin:var(--xl1)!important}.mt-xl1{margin-top:var(--xl1)!important}.mb-xl1{margin-bottom:var(--xl1)!important}.ml-xl1{margin-left:var(--xl1)!important}.mr-xl1{margin-right:var(--xl1)!important}.mis-xl1{margin-inline-start:var(--xl1)!important}.mie-xl1{margin-inline-end:var(--xl1)!important}.p-xl1{padding:var(--xl1)!important}.pt-xl1{padding-top:var(--xl1)!important}.pb-xl1{padding-bottom:var(--xl1)!important}.pl-xl1{padding-left:var(--xl1)!important}.pr-xl1{padding-right:var(--xl1)!important}.pis-xl1{padding-inline-start:var(--xl1)!important}.pie-xl1{padding-inline-end:var(--xl1)!important}.w-xl2{width:var(--xl2)!important}.h-xl2{height:var(--xl2)!important}.m-xl2{margin:var(--xl2)!important}.mt-xl2{margin-top:var(--xl2)!important}.mb-xl2{margin-bottom:var(--xl2)!important}.ml-xl2{margin-left:var(--xl2)!important}.mr-xl2{margin-right:var(--xl2)!important}.mis-xl2{margin-inline-start:var(--xl2)!important}.mie-xl2{margin-inline-end:var(--xl2)!important}.p-xl2{padding:var(--xl2)!important}.pt-xl2{padding-top:var(--xl2)!important}.pb-xl2{padding-bottom:var(--xl2)!important}.pl-xl2{padding-left:var(--xl2)!important}.pr-xl2{padding-right:var(--xl2)!important}.pis-xl2{padding-inline-start:var(--xl2)!important}.pie-xl2{padding-inline-end:var(--xl2)!important}.w-xl3{width:var(--xl3)!important}.h-xl3{height:var(--xl3)!important}.m-xl3{margin:var(--xl3)!important}.mt-xl3{margin-top:var(--xl3)!important}.mb-xl3{margin-bottom:var(--xl3)!important}.ml-xl3{margin-left:var(--xl3)!important}.mr-xl3{margin-right:var(--xl3)!important}.mis-xl3{margin-inline-start:var(--xl3)!important}.mie-xl3{margin-inline-end:var(--xl3)!important}.p-xl3{padding:var(--xl3)!important}.pt-xl3{padding-top:var(--xl3)!important}.pb-xl3{padding-bottom:var(--xl3)!important}.pl-xl3{padding-left:var(--xl3)!important}.pr-xl3{padding-right:var(--xl3)!important}.pis-xl3{padding-inline-start:var(--xl3)!important}.pie-xl3{padding-inline-end:var(--xl3)!important}.w-xxl1{width:var(--xxl1)!important}.h-xxl1{height:var(--xxl1)!important}.m-xxl1{margin:var(--xxl1)!important}.mt-xxl1{margin-top:var(--xxl1)!important}.mb-xxl1{margin-bottom:var(--xxl1)!important}.ml-xxl1{margin-left:var(--xxl1)!important}.mr-xxl1{margin-right:var(--xxl1)!important}.mis-xxl1{margin-inline-start:var(--xxl1)!important}.mie-xxl1{margin-inline-end:var(--xxl1)!important}.p-xxl1{padding:var(--xxl1)!important}.pt-xxl1{padding-top:var(--xxl1)!important}.pb-xxl1{padding-bottom:var(--xxl1)!important}.pl-xxl1{padding-left:var(--xxl1)!important}.pr-xxl1{padding-right:var(--xxl1)!important}.pis-xxl1{padding-inline-start:var(--xxl1)!important}.pie-xxl1{padding-inline-end:var(--xxl1)!important}.w-xxl2{width:var(--xxl2)!important}.h-xxl2{height:var(--xxl2)!important}.m-xxl2{margin:var(--xxl2)!important}.mt-xxl2{margin-top:var(--xxl2)!important}.mb-xxl2{margin-bottom:var(--xxl2)!important}.ml-xxl2{margin-left:var(--xxl2)!important}.mr-xxl2{margin-right:var(--xxl2)!important}.mis-xxl2{margin-inline-start:var(--xxl2)!important}.mie-xxl2{margin-inline-end:var(--xxl2)!important}.p-xxl2{padding:var(--xxl2)!important}.pt-xxl2{padding-top:var(--xxl2)!important}.pb-xxl2{padding-bottom:var(--xxl2)!important}.pl-xxl2{padding-left:var(--xxl2)!important}.pr-xxl2{padding-right:var(--xxl2)!important}.pis-xxl2{padding-inline-start:var(--xxl2)!important}.pie-xxl2{padding-inline-end:var(--xxl2)!important}.w-xxl3{width:var(--xxl3)!important}.h-xxl3{height:var(--xxl3)!important}.m-xxl3{margin:var(--xxl3)!important}.mt-xxl3{margin-top:var(--xxl3)!important}.mb-xxl3{margin-bottom:var(--xxl3)!important}.ml-xxl3{margin-left:var(--xxl3)!important}.mr-xxl3{margin-right:var(--xxl3)!important}.mis-xxl3{margin-inline-start:var(--xxl3)!important}.mie-xxl3{margin-inline-end:var(--xxl3)!important}.p-xxl3{padding:var(--xxl3)!important}.pt-xxl3{padding-top:var(--xxl3)!important}.pb-xxl3{padding-bottom:var(--xxl3)!important}.pl-xxl3{padding-left:var(--xxl3)!important}.pr-xxl3{padding-right:var(--xxl3)!important}.pis-xxl3{padding-inline-start:var(--xxl3)!important}.pie-xxl3{padding-inline-end:var(--xxl3)!important}.w-mega1{width:var(--mega1)!important}.h-mega1{height:var(--mega1)!important}.m-mega1{margin:var(--mega1)!important}.mt-mega1{margin-top:var(--mega1)!important}.mb-mega1{margin-bottom:var(--mega1)!important}.ml-mega1{margin-left:var(--mega1)!important}.mr-mega1{margin-right:var(--mega1)!important}.mis-mega1{margin-inline-start:var(--mega1)!important}.mie-mega1{margin-inline-end:var(--mega1)!important}.p-mega1{padding:var(--mega1)!important}.pt-mega1{padding-top:var(--mega1)!important}.pb-mega1{padding-bottom:var(--mega1)!important}.pl-mega1{padding-left:var(--mega1)!important}.pr-mega1{padding-right:var(--mega1)!important}.pis-mega1{padding-inline-start:var(--mega1)!important}.pie-mega1{padding-inline-end:var(--mega1)!important}.w-mega2{width:var(--mega2)!important}.h-mega2{height:var(--mega2)!important}.m-mega2{margin:var(--mega2)!important}.mt-mega2{margin-top:var(--mega2)!important}.mb-mega2{margin-bottom:var(--mega2)!important}.ml-mega2{margin-left:var(--mega2)!important}.mr-mega2{margin-right:var(--mega2)!important}.mis-mega2{margin-inline-start:var(--mega2)!important}.mie-mega2{margin-inline-end:var(--mega2)!important}.p-mega2{padding:var(--mega2)!important}.pt-mega2{padding-top:var(--mega2)!important}.pb-mega2{padding-bottom:var(--mega2)!important}.pl-mega2{padding-left:var(--mega2)!important}.pr-mega2{padding-right:var(--mega2)!important}.pis-mega2{padding-inline-start:var(--mega2)!important}.pie-mega2{padding-inline-end:var(--mega2)!important}.w-mega3{width:var(--mega3)!important}.h-mega3{height:var(--mega3)!important}.m-mega3{margin:var(--mega3)!important}.mt-mega3{margin-top:var(--mega3)!important}.mb-mega3{margin-bottom:var(--mega3)!important}.ml-mega3{margin-left:var(--mega3)!important}.mr-mega3{margin-right:var(--mega3)!important}.mis-mega3{margin-inline-start:var(--mega3)!important}.mie-mega3{margin-inline-end:var(--mega3)!important}.p-mega3{padding:var(--mega3)!important}.pt-mega3{padding-top:var(--mega3)!important}.pb-mega3{padding-bottom:var(--mega3)!important}.pl-mega3{padding-left:var(--mega3)!important}.pr-mega3{padding-right:var(--mega3)!important}.pis-mega3{padding-inline-start:var(--mega3)!important}.pie-mega3{padding-inline-end:var(--mega3)!important}.w-giga1{width:var(--giga1)!important}.h-giga1{height:var(--giga1)!important}.m-giga1{margin:var(--giga1)!important}.mt-giga1{margin-top:var(--giga1)!important}.mb-giga1{margin-bottom:var(--giga1)!important}.ml-giga1{margin-left:var(--giga1)!important}.mr-giga1{margin-right:var(--giga1)!important}.mis-giga1{margin-inline-start:var(--giga1)!important}.mie-giga1{margin-inline-end:var(--giga1)!important}.p-giga1{padding:var(--giga1)!important}.pt-giga1{padding-top:var(--giga1)!important}.pb-giga1{padding-bottom:var(--giga1)!important}.pl-giga1{padding-left:var(--giga1)!important}.pr-giga1{padding-right:var(--giga1)!important}.pis-giga1{padding-inline-start:var(--giga1)!important}.pie-giga1{padding-inline-end:var(--giga1)!important}.w-giga2{width:var(--giga2)!important}.h-giga2{height:var(--giga2)!important}.m-giga2{margin:var(--giga2)!important}.mt-giga2{margin-top:var(--giga2)!important}.mb-giga2{margin-bottom:var(--giga2)!important}.ml-giga2{margin-left:var(--giga2)!important}.mr-giga2{margin-right:var(--giga2)!important}.mis-giga2{margin-inline-start:var(--giga2)!important}.mie-giga2{margin-inline-end:var(--giga2)!important}.p-giga2{padding:var(--giga2)!important}.pt-giga2{padding-top:var(--giga2)!important}.pb-giga2{padding-bottom:var(--giga2)!important}.pl-giga2{padding-left:var(--giga2)!important}.pr-giga2{padding-right:var(--giga2)!important}.pis-giga2{padding-inline-start:var(--giga2)!important}.pie-giga2{padding-inline-end:var(--giga2)!important}.w-giga3{width:var(--giga3)!important}.h-giga3{height:var(--giga3)!important}.m-giga3{margin:var(--giga3)!important}.mt-giga3{margin-top:var(--giga3)!important}.mb-giga3{margin-bottom:var(--giga3)!important}.ml-giga3{margin-left:var(--giga3)!important}.mr-giga3{margin-right:var(--giga3)!important}.mis-giga3{margin-inline-start:var(--giga3)!important}.mie-giga3{margin-inline-end:var(--giga3)!important}.p-giga3{padding:var(--giga3)!important}.pt-giga3{padding-top:var(--giga3)!important}.pb-giga3{padding-bottom:var(--giga3)!important}.pl-giga3{padding-left:var(--giga3)!important}.pr-giga3{padding-right:var(--giga3)!important}.pis-giga3{padding-inline-start:var(--giga3)!important}.pie-giga3{padding-inline-end:var(--giga3)!important}.w-tera1{width:var(--tera1)!important}.h-tera1{height:var(--tera1)!important}.m-tera1{margin:var(--tera1)!important}.mt-tera1{margin-top:var(--tera1)!important}.mb-tera1{margin-bottom:var(--tera1)!important}.ml-tera1{margin-left:var(--tera1)!important}.mr-tera1{margin-right:var(--tera1)!important}.mis-tera1{margin-inline-start:var(--tera1)!important}.mie-tera1{margin-inline-end:var(--tera1)!important}.p-tera1{padding:var(--tera1)!important}.pt-tera1{padding-top:var(--tera1)!important}.pb-tera1{padding-bottom:var(--tera1)!important}.pl-tera1{padding-left:var(--tera1)!important}.pr-tera1{padding-right:var(--tera1)!important}.pis-tera1{padding-inline-start:var(--tera1)!important}.pie-tera1{padding-inline-end:var(--tera1)!important}.w-tera2{width:var(--tera2)!important}.h-tera2{height:var(--tera2)!important}.m-tera2{margin:var(--tera2)!important}.mt-tera2{margin-top:var(--tera2)!important}.mb-tera2{margin-bottom:var(--tera2)!important}.ml-tera2{margin-left:var(--tera2)!important}.mr-tera2{margin-right:var(--tera2)!important}.mis-tera2{margin-inline-start:var(--tera2)!important}.mie-tera2{margin-inline-end:var(--tera2)!important}.p-tera2{padding:var(--tera2)!important}.pt-tera2{padding-top:var(--tera2)!important}.pb-tera2{padding-bottom:var(--tera2)!important}.pl-tera2{padding-left:var(--tera2)!important}.pr-tera2{padding-right:var(--tera2)!important}.pis-tera2{padding-inline-start:var(--tera2)!important}.pie-tera2{padding-inline-end:var(--tera2)!important}.w-tera3{width:var(--tera3)!important}.h-tera3{height:var(--tera3)!important}.m-tera3{margin:var(--tera3)!important}.mt-tera3{margin-top:var(--tera3)!important}.mb-tera3{margin-bottom:var(--tera3)!important}.ml-tera3{margin-left:var(--tera3)!important}.mr-tera3{margin-right:var(--tera3)!important}.mis-tera3{margin-inline-start:var(--tera3)!important}.mie-tera3{margin-inline-end:var(--tera3)!important}.p-tera3{padding:var(--tera3)!important}.pt-tera3{padding-top:var(--tera3)!important}.pb-tera3{padding-bottom:var(--tera3)!important}.pl-tera3{padding-left:var(--tera3)!important}.pr-tera3{padding-right:var(--tera3)!important}.pis-tera3{padding-inline-start:var(--tera3)!important}.pie-tera3{padding-inline-end:var(--tera3)!important}}@layer helpers{.font-text{font-family:var(--text)!important}.font-display{font-family:var(--display)!important}.font-mono{font-family:var(--mono)!important}.font-italic{font-style:italic!important}.font-normal{font-style:normal!important}.font-extra-light{font-weight:var(--extra-light)!important}.font-light{font-weight:var(--light)!important}.font-book{font-weight:var(--book)!important}.font-semi-bold{font-weight:var(--semi-bold)!important}.font-bold{font-weight:var(--bold)!important}.font-black{font-weight:var(--black)!important}.text-xs{font-size:var(--text-xs)!important}.text-sm{font-size:var(--text-sm)!important}.text-md{font-size:var(--text-md)!important}.text-lg{font-size:var(--text-lg)!important}.text-xl{font-size:var(--text-xl)!important}.display-sm{font-size:var(--display-sm)!important}.display-md{font-size:var(--display-md)!important}.display-lg{font-size:var(--display-lg)!important}.display-xl{font-size:var(--display-xl)!important}.display-mega{font-size:var(--display-mega)!important}.display-giga{font-size:var(--display-giga)!important}.tracking-sm{letter-spacing:var(--tracking-sm)!important}.tracking-md{letter-spacing:var(--tracking-md)!important}.tracking-lg{letter-spacing:var(--tracking-lg)!important}.tracking-xl{letter-spacing:var(--tracking-xl)!important}.tracking-xxl{letter-spacing:var(--tracking-xxl)!important}.leading-xs{line-height:var(--leading-xs)!important}.leading-sm{line-height:var(--leading-sm)!important}.leading-md{line-height:var(--leading-md)!important}.leading-lg{line-height:var(--leading-lg)!important}.leading-xl{line-height:var(--leading-xl)!important}.leading-xxl{line-height:var(--leading-xxl)!important}.text-left{text-align:left!important}.text-center{text-align:center!important}.text-right{text-align:right!important}.text-justify{text-align:justify!important}.text-start{text-align:start!important}.text-end{text-align:end!important}.text-uppercase{text-transform:uppercase!important}.text-lowercase{text-transform:lowercase!important}.text-capitalize{text-transform:capitalize!important}}@layer theme.default{:root{--xs1: 4px;--xs2: 8px;--xs3: 12px;--sm1: 16px;--sm2: 20px;--sm3: 24px;--md1: 28px;--md2: 32px;--md3: 36px;--lg1: 40px;--lg2: 44px;--lg3: 48px;--xl1: 56px;--xl2: 64px;--xl3: 80px;--xxl1: 96px;--xxl2: 112px;--xxl3: 128px;--mega1: 160px;--mega2: 192px;--mega3: 224px;--giga1: 256px;--giga2: 288px;--giga3: 320px;--tera1: 384px;--tera2: 480px;--tera3: 520px;--ar-square: 1;--ar-landscape: 4/3;--ar-portrait: 3/4;--ar-widescreen: 16/9;--ar-golden: 1.618/1;--display: Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, ui-sans-serif, sans-serif;--text: ui-sans-serif, system-ui, sans-serif;--mono: Dank Mono, Inconsolata, Fira Mono, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, ui-monospace, monospace;--text-xs: .694rem;--text-sm: .833rem;--text-md: 1rem;--text-lg: 1.2rem;--text-xl: 1.44rem;--display-sm: 1.728rem;--display-md: 2.074rem;--display-lg: 2.488rem;--display-xl: 2.986rem;--display-mega: 3.583rem;--display-giga: 4.299rem;--extra-light: 200;--light: 300;--book: 400;--semi-bold: 600;--bold: 700;--black: 900;--tracking-sm: -.05em;--tracking-md: .025em;--tracking-lg: .05em;--tracking-xl: .075em;--tracking-xxl: .15em;--leading-xs: 1;--leading-sm: 1.15;--leading-md: 1.375;--leading-lg: 1.5;--leading-xl: 1.75;--leading-xxl: 2;--base-0: #fff;--base-50: #f6f7f9;--base-100: #edeef1;--base-200: #d6dbe1;--base-300: #b2bbc7;--base-400: #8897a8;--base-500: #697a8e;--base-600: #546375;--base-700: #4a5666;--base-800: #3c4550;--base-900: #353c45;--base-950: #23282e;--primary-50: #f0f9ff;--primary-100: #e0f2fe;--primary-200: #bae6fd;--primary-300: #7dd3fc;--primary-400: #38bdf8;--primary-500: #0ea5e9;--primary-600: #0284c7;--primary-700: #0369a1;--primary-800: #075985;--primary-900: #0c4a6e;--primary-950: #082f49;--yes-100: #d5f6e8;--yes-200: #afebd4;--yes-300: #7adbbd;--yes-400: #46c4a0;--yes-500: #13886d;--no-100: #ffe4e6;--no-200: #fecdd3;--no-300: #fda4af;--no-400: #fb7185;--no-500: #e11d48;--maybe-100: #fff7d6;--maybe-200: #fff0b3;--maybe-300: #ffd64a;--maybe-400: #ffc220;--maybe-500: #f9a007;--highlight-500: #ffee00;--border-sm: 1px;--border-md: 2px;--border-lg: 4px;--border-xl: 8px;--border-xxl: 12px;--radius-sm: 3px;--radius-md: 5px;--radius-lg: 8px;--radius-xl: 12px;--radius-xxl: 16px;--radius-round: 1e5px;--shadow-sm: 0 1px 3px 0 var(--ui-shadow-color), 0 1px 2px -1px var(--ui-shadow-color);--shadow-md: 0 4px 6px -1px var(--ui-shadow-color), 0 2px 4px -2px var(--ui-shadow-color);--shadow-lg: 0 8px 13px -3px var(--ui-shadow-color), 0 4px 6px -4px var(--ui-shadow-color);--shadow-xl: 0 20px 20px -5px var(--ui-shadow-color), 0 8px 10px -6px var(--ui-shadow-color);--shadow-xxl: 0px 11px 8px -6px var(--ui-shadow-color), 0 10px 15px 2px var(--ui-shadow-color);--o-0: 0;--o-1: .2;--o-2: .4;--o-3: .6;--o-4: .8;--o-5: 1;--z-bottom: -1000000000;--z-0: 0;--z-1: 10;--z-2: 20;--z-3: 30;--z-4: 40;--z-5: 50;--z-top: 1000000000;--transition: .22s ease-in-out;--transition-fast: .1s ease-in-out}}@layer theme.default{:root{color-scheme:light dark;--ui-border-color: light-dark(var(--base-200), var(--base-500));--ui-shadow-color: light-dark(rgb(0 0 0 / .1), rgb(0 0 0 / .6));--focus-ring-color: light-dark(var(--primary-500), var(--primary-400));--focus-ring-width: 2px;--focus-ring-offset: 2px}:root.theme-light{color-scheme:light}:root.theme-dark{color-scheme:dark}:root{accent-color:var(--primary-500);--body-background-color: light-dark(var(--base-0), var(--base-950));--body-line-height: var(--leading-lg);--input-height: var(--md3);--input-padding: var(--xs3);--input-border-width: var(--border-sm);--input-border-color: var(--ui-border-color);--input-border-radius: var(--radius-md);--input-border-color-invalid: light-dark(var(--no-500), var(--no-400));--label-spacing: var(--xs1);--fieldset-padding: var(--sm3);--fieldset-border-width: var(--border-sm);--fieldset-border-color: var(--ui-border-color);--fieldset-border-radius: var(--radius-lg);--meter-height: var(--sm1);--meter-border-radius: var(--radius-md);--meter-track-color: var(--primary-100);--meter-low-color: var(--no-400);--meter-medium-color: var(--maybe-400);--meter-high-color: var(--yes-400);--progress-height: var(--sm1);--progress-color: var(--primary-500);--progress-track-color: var(--primary-100);--progress-border-radius: var(--radius-md);--select-icon-size: var(--sm3);--select-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");--dialog-min-width: var(--tera1);--dialog-max-width: var(--tera3);--dialog-padding: var(--lg1) var(--md1);--dialog-border-width: var(--border-sm);--dialog-border-color: light-dark(var(--base-200), var(--base-800));--dialog-background-color: light-dark(var(--base-50), var(--base-900));--dialog-border-radius: var(--radius-lg);--dialog-backdrop-color: var(--base-950);--dialog-backdrop-opacity: var(--o-4);--details-padding: var(--sm1);--details-spacing: var(--xs3);--details-border-width: var(--border-sm);--details-border-color: light-dark(var(--base-200), var(--base-800));--details-background-color: light-dark(var(--base-50), var(--base-900));--details-border-radius: var(--radius-lg);--details-icon-size: var(--sm3);--details-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");--table-padding: var(--xs2) var(--sm1);--table-border-width: var(--border-sm);--table-border-color: light-dark(var(--base-100), var(--base-700));--table-border-radius: var(--radius-md);--table-background-color: none;--table-caption-spacing: var(--xs3);--figcaption-spacing: var(--xs2);--heading-font: var(--display);--heading-weight: var(--black);--heading-letter-spacing: normal;--heading-font-size-h1: clamp( var(--display-md), 1.269rem + 2.682vw, var(--display-xl) );--heading-font-size-h2: clamp( var(--display-sm), 1.057rem + 2.235vw, var(--display-lg) );--heading-font-size-h3: clamp( var(--text-xl), .881rem + 1.865vw, var(--display-md) );--heading-font-size-h4: clamp( var(--text-lg), .734rem + 1.553vw, var(--display-sm) );--heading-font-size-h5: clamp( var(--text-lg), .988rem + .706vw, var(--text-xl) );--heading-font-size-h6: clamp( var(--text-md), .824rem + .588vw, var(--text-lg) );--heading-line-height: var(--leading-sm);--heading-line-height-h1: var(--heading-line-height);--heading-line-height-h2: var(--heading-line-height);--heading-line-height-h3: var(--heading-line-height);--heading-line-height-h4: var(--leading-md);--heading-line-height-h5: var(--leading-md);--heading-line-height-h6: var(--leading-md);--heading-spacing-h1: .4em;--heading-spacing-h2: .4em;--heading-spacing-h3: .4em;--heading-spacing-h4: .4em;--heading-spacing-h5: .4em;--heading-spacing-h6: .4em;--heading-spacing-consecutive: .3em;--text-color: light-dark(var(--base-950), var(--base-200));--link-font-weight: var(--semi-bold);--link-color: light-dark(var(--primary-600), var(--primary-400));--link-color-hover: var(--primary-500);--text-code-color: light-dark(var(--primary-600), var(--primary-400));--text-code-background-color: light-dark( var(--primary-100), var(--primary-900) );--text-code-muted-color: light-dark(var(--base-500), var(--base-300));--pre-border-radius: var(--radius-md);--pre-font-size: .9rem;--blockquote-padding-block: var(--sm1);--blockquote-padding-inline: var(--md1) var(--sm3);--blockquote-background-color: light-dark( var(--primary-50), var(--primary-900) );--blockquote-border-radius: var(--radius-md);--blockquote-accent-width: var(--xs2);--blockquote-accent-color: linear-gradient( var(--primary-800), var(--primary-500) );--hr-content: "";--ins-color: var(--base-950);--ins-background-color: var(--yes-200);--marker-color: var(--highlight-500);--selection-color: light-dark(var(--base-950), var(--base-0));--selection-background-color: light-dark( var(--primary-200), var(--primary-700) )}:root{--grid-column-gap: var(--sm1);--grid-row-gap: var(--sm1);@media(width>=768px){--grid-column-gap: var(--sm3);--grid-row-gap: var(--sm3)}--wrap-spacing: var(--sm1);--wrap-md-spacing: var(--sm3);--wrap-lg-spacing: 0;--wrap-width-sm: minmax(0, 55ch);--wrap-width-md: minmax(0, 70ch);--wrap-width-lg: minmax(0, 900px);--wrap-width: var(--wrap-width-md);--layout-content-width: 70ch;--layout-aside-width: 245px;--layout-toc-width: 1fr;--prose-spacing: var(--sm1)}:root{--badge-font-size: var(--text-sm);--badge-border-radius: var(--radius-md);--badge-color: var(--base-0);--badge-background-color: light-dark(var(--base-700), var(--base-600));--badge-primary-color: var(--base-0);--badge-primary-background-color: light-dark( var(--primary-600), var(--primary-500) );--badge-success-color: light-dark(var(--yes-500), var(--base-0));--badge-success-background-color: light-dark(var(--yes-100), var(--yes-500));--badge-danger-color: light-dark(var(--no-500), var(--base-0));--badge-danger-background-color: light-dark(var(--no-100), var(--no-500));--badge-warning-color: light-dark(var(--maybe-500), var(--base-950));--badge-warning-background-color: light-dark( var(--maybe-100), var(--maybe-500) )}:root{--bt-min-width: 101px;--bt-min-width-md: 123px;--bt-min-width-lg: 133px;--bt-font-size: var(--text-sm);--bt-font-size-lg: var(--text-md);--bt-font-weight: var(--semi-bold);--bt-color: var(--text-color);--bt-color-hover: light-dark(var(--text-color), var(--base-0));--bt-background-color: light-dark(var(--base-0), var(--base-800));--bt-background-color-hover: light-dark(var(--base-50), var(--base-900));--bt-border-color: var(--ui-border-color);--bt-border-width: var(--border-sm);--bt-border-radius: var(--radius-lg);--bt-border-radius-lg: var(--radius-xl);--bt-outline-color-hover: light-dark(var(--base-950), var(--base-0));--bt-outline-background-color-hover: light-dark( rgb(0 0 0 / .1), rgb(255 255 255 / .1) );--bt-outline-border-color: light-dark(var(--base-950), var(--base-0));--bt-outline-border-color-hover: light-dark(var(--base-950), var(--base-0));--bt-primary-color: var(--base-0);--bt-primary-color-hover: var(--base-0);--bt-primary-background-color: var(--primary-600);--bt-primary-background-color-hover: var(--primary-500);--bt-primary-border-color: var(--primary-600);--bt-primary-border-color-hover: var(--primary-600)}:root{--avatar-color: var(--base-0);--avatar-background-color: var(--base-400);--avatar-border-color: light-dark(var(--base-0), var(--base-500));--avatar-border-width: var(--border-sm);--avatar-radius: var(--radius-round);--avatar-status-dot-color-offline: var(--base-300);--avatar-status-dot-color-online: var(--yes-400)}:root{--banner-color: var(--base-0);--banner-background-color: light-dark(var(--primary-600), var(--primary-800))}:root{--breadcrumbs-separator: "/";--breadcrumbs-separator-color: light-dark(var(--base-300), var(--base-600));--breadcrumbs-color: light-dark(var(--base-500), var(--base-400));--breadcrumbs-color-current: var(--text-color)}:root{--card-spacing: var(--sm3);--card-color: var(--text-color);--card-secondary-text-color: light-dark(var(--base-400), var(--base-500));--card-bg-color: light-dark(var(--base-100), var(--base-900));--card-border-radius: var(--radius-lg);--card-border-color: var(--ui-border-color);--card-border-width: var(--border-sm);--card-shadow: var(--shadow-md);--card-shadow-hover: var(--shadow-xl);--card-loading-bg: light-dark(var(--base-200), var(--base-900));--card-aspect-ratio: var(--ar-golden)}:root{--toggle-width: 50px;--toggle-height: 28px;--toggle-border-width: 2px;--toggle-track-color: light-dark(var(--base-300), var(--base-700));--toggle-track-color-checked: var(--yes-400);--toggle-thumb-color: var(--body-background-color)}:root{--faq-spacing: var(--xs3)}:root{--field-spacing: var(--xs1);--field-hint-color: light-dark(var(--base-400), var(--base-500));--field-error-color: light-dark(var(--no-500), var(--no-300));--field-message-position: static}:root{--featureItem-icon-box-size: var(--lg3);--featureItem-icon-size: var(--sm3);--featureItem-icon-color: light-dark(var(--primary-600), var(--primary-300));--featureItem-icon-background-color: light-dark( var(--primary-100), var(--primary-900) );--featureItem-icon-border-radius: var(--radius-lg)}:root{--footer-background-color: light-dark(var(--primary-950), var(--base-950));--footer-text-color: light-dark(var(--base-0), var(--base-200));--footer-border-width: var(--border-md);--footer-border-color: light-dark(transparent, var(--base-700));--footer-link-color: light-dark(var(--base-0), var(--base-200));--footer-link-color-hover: light-dark(var(--primary-200), var(--base-0))}:root{--header-height: var(--xl1);--header-padding: var(--sm1);@media(width>=768px){--header-height: var(--xl2);--header-padding: var(--sm3)}--header-background-color: light-dark(var(--base-0), var(--base-950));--header-menu-background-color: var(--base-950);--header-menu-color: var(--base-0);--header-menu-color-current: var(--primary-400);--header-menu-secondary-color: var(--base-300);--header-menu-border-color: var(--base-500)}:root{--hero-radius: var(--radius-xl);--hero-content-padding: var(--md3);--hero-actions-spacing: var(--lg3);--hero-pagination-dot: var(--sm1);--hero-pagination-dot-color: var(--base-0);--hero-pagination-dot-active-color: var(--primary-600);--hero-pagination-opacity: var(--o-4)}:root{--pagination-size: var(--md3);--pagination-border-radius: var(--radius-md);--pagination-color: var(--text-color);--pagination-color-current: var(--base-0);--pagination-background-color-current: light-dark( var(--primary-600), var(--primary-500) );--pagination-background-color-hover: light-dark( var(--base-100), var(--base-800) )}:root{--prevNext-border-color: var(--ui-border-color);--prevNext-border-radius: var(--radius-lg);--prevNext-border-color-hover: var(--link-color);--prevNext-label-color: light-dark(var(--base-400), var(--base-500))}:root{--notice-spacing: var(--sm1);--notice-text-color: light-dark(var(--base-950), var(--base-0));--notice-background-color: light-dark(var(--base-50), var(--base-800));--notice-border-color: light-dark(var(--base-200), var(--base-500));--notice-border-width: var(--border-sm);--notice-border-radius: var(--radius-lg)}:root{--pricingCard-highlight-border-color: light-dark( var(--primary-600), var(--primary-400) );--pricingCard-check-color: light-dark(var(--yes-500), var(--yes-400))}:root{--readProgressBar-height: var(--xs1);--readProgressBar-color: linear-gradient( 90deg, var(--primary-600) 0%, var(--primary-400) 100% )}:root{--section-spacing: var(--xl3);--section-header-spacing: var(--lg3);--section-eyebrow-color: light-dark(var(--primary-600), var(--primary-400));--section-lede-color: light-dark(var(--base-500), var(--base-400));--section-filled-background-color: light-dark( var(--base-50), var(--base-900) );--section-primary-background-color: light-dark( var(--primary-600), var(--primary-900) );--section-primary-text-color: var(--base-0);--section-primary-link-color: var(--primary-100);--section-primary-link-color-hover: var(--base-0);--section-primary-eyebrow-color: var(--primary-200);--section-primary-lede-color: var(--primary-100)}:root{--testimonial-role-color: light-dark(var(--base-400), var(--base-500))}:root{--tags-padding: var(--xs2);--tags-font-size: var(--text-sm);--tags-color: light-dark(var(--base-500), var(--base-400));--tags-background-color: light-dark(var(--base-100), var(--base-800));--tags-background-color-hover: light-dark(var(--base-200), var(--base-950));--tags-radius: var(--radius-md)}:root{--toc-color: var(--link-color);--toc-color-hover: var(--link-color-hover);--toc-spacing: var(--xs1);--toc-indentation: var(--xs3);--toc-icon-size: var(--sm1)}} +@layer base,elements,global,components,theme.default,theme.user,helpers;@layer base,elements,global,components,theme.default,theme.user,helpers;@layer base{*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion:reduce){*,:before,:after{animation-delay:-1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}}:where(:not(dialog)){margin:0}html,body{min-height:100%}}@layer elements{body{line-sizing:normal;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;background-color:var(--body-background-color);color:var(--text-color);font-family:var(--text);line-height:var(--body-line-height);&:has(.body-is-locked){overflow:hidden}}}@layer elements{::selection{color:var(--selection-color);background-color:var(--selection-background-color)}:where(a,u,ins,abbr){text-underline-offset:2px}a{font-weight:var(--link-font-weight);color:var(--link-color);&:where(:hover){color:var(--link-color-hover);-webkit-text-decoration:none;text-decoration:none}}address{width:max-content;max-width:100%;padding:var(--sm1) var(--sm3);font-style:normal;background-color:light-dark(var(--base-50),var(--base-900));border:var(--xs2) solid transparent;border-image:8 repeating-linear-gradient(-45deg,var(--no-500) 0,var(--no-500) var(--xs2),transparent 0,transparent calc(var(--xs2) * 2),var(--primary-500) 0,var(--primary-500) calc(var(--xs2) * 3),transparent 0,transparent calc(var(--xs2) * 4))}abbr{position:relative;cursor:help;&:after{position:relative;top:calc(var(--xs1) * -1);width:var(--sm1);height:var(--sm1);display:inline-block;content:"";background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='circle-help'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M9.09%209a3%203%200%200%201%205.83%201c0%202-3%203-3%203'/%3E%3Cpath%20d='M12%2017h.01'/%3E%3C/svg%3E");background-size:contain}&:hover:before{width:max-content;max-width:400px;position:absolute;left:50%;padding:var(--xs1) var(--xs3);content:attr(title);color:var(--base-0);background-color:var(--base-900);opacity:var(--o-4);border-radius:var(--radius-sm);transform:translate(-50%,-2em)}}blockquote{position:relative;margin-bottom:var(--prose-spacing);padding-block:var(--blockquote-padding-block);padding-inline:var(--blockquote-padding-inline);font-style:italic;background-color:var(--blockquote-background-color);border-radius:var(--blockquote-border-radius);&:before{content:"";position:absolute;top:0;inset-inline-start:0;width:var(--blockquote-accent-width);height:100%;border-start-start-radius:var(--blockquote-border-radius);border-end-start-radius:var(--blockquote-border-radius);background:var(--blockquote-accent-color)}p{&:first-child:before{content:open-quote}&:last-child{margin-bottom:0;&:after{content:close-quote}}}}cite{font-style:italic}code,var,kbd{font-family:var(--mono);font-size:.9em;font-style:normal;color:var(--text-code-muted-color)}:is(code,var,kbd):not(h1 *,h2 *,h3 *,h4 *,h5 *,h6 *,pre *){padding:.15em .3em;color:var(--text-code-color);background-color:var(--text-code-background-color);border-radius:var(--radius-sm)}dt{font-weight:var(--bold)}dd+dt{margin-top:.5em}del{text-decoration-color:var(--no-500);text-decoration-style:wavy}h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{overflow-wrap:break-word;text-wrap:balance}h1,.h1,h2,.h2,h3,.h3,h4,.h4{font-family:var(--heading-font);font-weight:var(--heading-weight);letter-spacing:var(--heading-letter-spacing)}h1,.h1{margin-bottom:var(--heading-spacing-h1);font-size:var(--heading-font-size-h1);line-height:var(--heading-line-height-h1)}h2,.h2{margin-bottom:var(--heading-spacing-h2);font-size:var(--heading-font-size-h2);line-height:var(--heading-line-height-h2)}h3,.h3{margin-bottom:var(--heading-spacing-h3);font-size:var(--heading-font-size-h3);line-height:var(--heading-line-height-h3)}h4,.h4{margin-bottom:var(--heading-spacing-h4);font-size:var(--heading-font-size-h4);line-height:var(--heading-line-height-h4)}h5,.h5{margin-bottom:var(--heading-spacing-h5);font-size:var(--heading-font-size-h5);line-height:var(--heading-line-height-h5)}h6,.h6{margin-bottom:var(--heading-spacing-h6);font-size:var(--heading-font-size-h6);line-height:var(--heading-line-height-h6)}:where(h1,h2,h3):has(+:is(h2,h3,h4)){margin-bottom:var(--heading-spacing-consecutive)}hr{display:flex;justify-content:center;align-items:center;height:0;border-style:solid;border-width:var(--border-sm) 0 0;color:var(--ui-border-color);overflow:visible;&:after{content:var(--hr-content);padding:0 var(--xs1);line-height:1;letter-spacing:var(--tracking-sm);background-color:var(--body-background-color)}}:where(hr):has(+:is(p)){margin-bottom:var(--prose-spacing)}ins{padding:.15em .3em;color:var(--ins-color);background-color:var(--ins-background-color);border-radius:var(--radius-sm);-webkit-text-decoration:none;text-decoration:none;&:before{content:"+ "}}mark{padding:.15em .5em;background:var(--marker-color);border-radius:1em 0}:where(ol,ul){list-style-type:none;padding:0}pre{font-family:var(--mono);font-size:var(--pre-font-size);white-space:pre-wrap;border-radius:var(--pre-border-radius)}q{font-style:italic}s{text-decoration-color:light-dark(var(--base-950),var(--base-50));text-decoration-style:wavy}sub,sup{line-height:1}}@layer elements{:root{quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(af),:not(:lang(af))>:lang(af){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ak),:not(:lang(ak))>:lang(ak){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(asa),:not(:lang(asa))>:lang(asa){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(az),:not(:lang(az))>:lang(az){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(bem),:not(:lang(bem))>:lang(bem){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(bez),:not(:lang(bez))>:lang(bez){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(bn),:not(:lang(bn))>:lang(bn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(brx),:not(:lang(brx))>:lang(brx){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(cgg),:not(:lang(cgg))>:lang(cgg){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(chr),:not(:lang(chr))>:lang(chr){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(cy),:not(:lang(cy))>:lang(cy){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(da),:not(:lang(da))>:lang(da){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(dav),:not(:lang(dav))>:lang(dav){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(dje),:not(:lang(dje))>:lang(dje){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(dz),:not(:lang(dz))>:lang(dz){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ebu),:not(:lang(ebu))>:lang(ebu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ee),:not(:lang(ee))>:lang(ee){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(en),:not(:lang(en))>:lang(en){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(fil),:not(:lang(fil))>:lang(fil){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(fo),:not(:lang(fo))>:lang(fo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ga),:not(:lang(ga))>:lang(ga){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(gd),:not(:lang(gd))>:lang(gd){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(gl),:not(:lang(gl))>:lang(gl){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(gu),:not(:lang(gu))>:lang(gu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(guz),:not(:lang(guz))>:lang(guz){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ha),:not(:lang(ha))>:lang(ha){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(hi),:not(:lang(hi))>:lang(hi){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(id),:not(:lang(id))>:lang(id){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ig),:not(:lang(ig))>:lang(ig){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(jmc),:not(:lang(jmc))>:lang(jmc){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kam),:not(:lang(kam))>:lang(kam){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kde),:not(:lang(kde))>:lang(kde){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kea),:not(:lang(kea))>:lang(kea){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(khq),:not(:lang(khq))>:lang(khq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ki),:not(:lang(ki))>:lang(ki){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kln),:not(:lang(kln))>:lang(kln){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(km),:not(:lang(km))>:lang(km){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kn),:not(:lang(kn))>:lang(kn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ko),:not(:lang(ko))>:lang(ko){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ksb),:not(:lang(ksb))>:lang(ksb){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lg),:not(:lang(lg))>:lang(lg){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ln),:not(:lang(ln))>:lang(ln){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lo),:not(:lang(lo))>:lang(lo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lrc),:not(:lang(lrc))>:lang(lrc){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lu),:not(:lang(lu))>:lang(lu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(luo),:not(:lang(luo))>:lang(luo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lv),:not(:lang(lv))>:lang(lv){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mas),:not(:lang(mas))>:lang(mas){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mer),:not(:lang(mer))>:lang(mer){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mfe),:not(:lang(mfe))>:lang(mfe){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mgo),:not(:lang(mgo))>:lang(mgo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ml),:not(:lang(ml))>:lang(ml){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mn),:not(:lang(mn))>:lang(mn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mr),:not(:lang(mr))>:lang(mr){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ms),:not(:lang(ms))>:lang(ms){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mt),:not(:lang(mt))>:lang(mt){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(my),:not(:lang(my))>:lang(my){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(naq),:not(:lang(naq))>:lang(naq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(nd),:not(:lang(nd))>:lang(nd){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ne),:not(:lang(ne))>:lang(ne){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(nus),:not(:lang(nus))>:lang(nus){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(nyn),:not(:lang(nyn))>:lang(nyn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(pa),:not(:lang(pa))>:lang(pa){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(pt),:not(:lang(pt))>:lang(pt){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(rof),:not(:lang(rof))>:lang(rof){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(rwk),:not(:lang(rwk))>:lang(rwk){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(saq),:not(:lang(saq))>:lang(saq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(sbp),:not(:lang(sbp))>:lang(sbp){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(seh),:not(:lang(seh))>:lang(seh){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ses),:not(:lang(ses))>:lang(ses){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(si),:not(:lang(si))>:lang(si){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(so),:not(:lang(so))>:lang(so){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(sw),:not(:lang(sw))>:lang(sw){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ta),:not(:lang(ta))>:lang(ta){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(te),:not(:lang(te))>:lang(te){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(teo),:not(:lang(teo))>:lang(teo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(th),:not(:lang(th))>:lang(th){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(to),:not(:lang(to))>:lang(to){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(tr),:not(:lang(tr))>:lang(tr){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(twq),:not(:lang(twq))>:lang(twq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(tzm),:not(:lang(tzm))>:lang(tzm){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(uz-Cyrl),:not(:lang(uz-Cyrl))>:lang(uz-Cyrl){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vai),:not(:lang(vai))>:lang(vai){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vai-Latn),:not(:lang(vai-Latn))>:lang(vai-Latn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vi),:not(:lang(vi))>:lang(vi){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vun),:not(:lang(vun))>:lang(vun){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(xog),:not(:lang(xog))>:lang(xog){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(yo),:not(:lang(yo))>:lang(yo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(yue-Hans),:not(:lang(yue-Hans))>:lang(yue-Hans){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(zh),:not(:lang(zh))>:lang(zh){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(zu),:not(:lang(zu))>:lang(zu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(uz),:not(:lang(uz))>:lang(uz){quotes:"\201c" "\201d" "\2019" "\2018"}:root:lang(eu),:not(:lang(eu))>:lang(eu){quotes:"\201c" "\201d" "\201c" "\201d"}:root:lang(tk),:not(:lang(tk))>:lang(tk){quotes:"\201c" "\201d" "\201c" "\201d"}:root:lang(ar),:not(:lang(ar))>:lang(ar){quotes:"\201d" "\201c" "\2019" "\2018"}:root:lang(ur),:not(:lang(ur))>:lang(ur){quotes:"\201d" "\201c" "\2019" "\2018"}:root:lang(fi),:not(:lang(fi))>:lang(fi){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(he),:not(:lang(he))>:lang(he){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(lag),:not(:lang(lag))>:lang(lag){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(rn),:not(:lang(rn))>:lang(rn){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(sn),:not(:lang(sn))>:lang(sn){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(sv),:not(:lang(sv))>:lang(sv){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(sr),:not(:lang(sr))>:lang(sr){quotes:"\201e" "\201c" "\2018" "\2018"}:root:lang(sr-Latn),:not(:lang(sr-Latn))>:lang(sr-Latn){quotes:"\201e" "\201c" "\2018" "\2018"}:root:lang(bg),:not(:lang(bg))>:lang(bg){quotes:"\201e" "\201c" "\201e" "\201c"}:root:lang(lt),:not(:lang(lt))>:lang(lt){quotes:"\201e" "\201c" "\201e" "\201c"}:root:lang(bs-Cyrl),:not(:lang(bs-Cyrl))>:lang(bs-Cyrl){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(cs),:not(:lang(cs))>:lang(cs){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(de),:not(:lang(de))>:lang(de){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(dsb),:not(:lang(dsb))>:lang(dsb){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(et),:not(:lang(et))>:lang(et){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(hr),:not(:lang(hr))>:lang(hr){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(hsb),:not(:lang(hsb))>:lang(hsb){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(is),:not(:lang(is))>:lang(is){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(lb),:not(:lang(lb))>:lang(lb){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(luy),:not(:lang(luy))>:lang(luy){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(mk),:not(:lang(mk))>:lang(mk){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(sk),:not(:lang(sk))>:lang(sk){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(sl),:not(:lang(sl))>:lang(sl){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(ka),:not(:lang(ka))>:lang(ka){quotes:"\201e" "\201c" "\ab" "\bb"}:root:lang(bs),:not(:lang(bs))>:lang(bs){quotes:"\201e" "\201d" "\2018" "\2019"}:root:lang(agq),:not(:lang(agq))>:lang(agq){quotes:"\201e" "\201d" "\201a" "\2019"}:root:lang(ff),:not(:lang(ff))>:lang(ff){quotes:"\201e" "\201d" "\201a" "\2019"}:root:lang(nmg),:not(:lang(nmg))>:lang(nmg){quotes:"\201e" "\201d" "\ab" "\bb"}:root:lang(ro),:not(:lang(ro))>:lang(ro){quotes:"\201e" "\201d" "\ab" "\bb"}:root:lang(pl),:not(:lang(pl))>:lang(pl){quotes:"\201e" "\201d" "\ab" "\bb"}:root:lang(hu),:not(:lang(hu))>:lang(hu){quotes:"\201e" "\201d" "\bb" "\ab"}:root:lang(nl),:not(:lang(nl))>:lang(nl){quotes:"\2018" "\2019" "\201c" "\201d"}:root:lang(ti-ER),:not(:lang(ti-ER))>:lang(ti-ER){quotes:"\2018" "\2019" "\201c" "\201d"}:root:lang(dua),:not(:lang(dua))>:lang(dua){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(ksf),:not(:lang(ksf))>:lang(ksf){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(rw),:not(:lang(rw))>:lang(rw){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(nn),:not(:lang(nn))>:lang(nn){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(nb),:not(:lang(nb))>:lang(nb){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(ast),:not(:lang(ast))>:lang(ast){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(bm),:not(:lang(bm))>:lang(bm){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(br),:not(:lang(br))>:lang(br){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(ca),:not(:lang(ca))>:lang(ca){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(dyo),:not(:lang(dyo))>:lang(dyo){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(el),:not(:lang(el))>:lang(el){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(es),:not(:lang(es))>:lang(es){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(ewo),:not(:lang(ewo))>:lang(ewo){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(mg),:not(:lang(mg))>:lang(mg){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(mua),:not(:lang(mua))>:lang(mua){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(sg),:not(:lang(sg))>:lang(sg){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(it),:not(:lang(it))>:lang(it){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(kab),:not(:lang(kab))>:lang(kab){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(kk),:not(:lang(kk))>:lang(kk){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(pt-PT),:not(:lang(pt-PT))>:lang(pt-PT){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(nnh),:not(:lang(nnh))>:lang(nnh){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(sq),:not(:lang(sq))>:lang(sq){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(bas),:not(:lang(bas))>:lang(bas){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(be),:not(:lang(be))>:lang(be){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(ky),:not(:lang(ky))>:lang(ky){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(sah),:not(:lang(sah))>:lang(sah){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(ru),:not(:lang(ru))>:lang(ru){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(uk),:not(:lang(uk))>:lang(uk){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(zgh),:not(:lang(zgh))>:lang(zgh){quotes:"\ab" "\bb" "\201e" "\201d"}:root:lang(shi),:not(:lang(shi))>:lang(shi){quotes:"\ab" "\bb" "\201e" "\201d"}:root:lang(shi-Latn),:not(:lang(shi-Latn))>:lang(shi-Latn){quotes:"\ab" "\bb" "\201e" "\201d"}:root:lang(am),:not(:lang(am))>:lang(am){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(az-Cyrl),:not(:lang(az-Cyrl))>:lang(az-Cyrl){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(fa),:not(:lang(fa))>:lang(fa){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(fr-CH),:not(:lang(fr-CH))>:lang(fr-CH){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(gsw),:not(:lang(gsw))>:lang(gsw){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(jgo),:not(:lang(jgo))>:lang(jgo){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(kkj),:not(:lang(kkj))>:lang(kkj){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(mzn),:not(:lang(mzn))>:lang(mzn){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(fr),:not(:lang(fr))>:lang(fr){quotes:"\ab" "\bb" "\ab" "\bb"}:root:lang(hy),:not(:lang(hy))>:lang(hy){quotes:"\ab" "\bb" "\ab" "\bb"}:root:lang(yav),:not(:lang(yav))>:lang(yav){quotes:"\ab" "\bb" "\ab" "\bb"}:root:lang(ja),:not(:lang(ja))>:lang(ja){quotes:"\300c" "\300d" "\300e" "\300f"}:root:lang(yue),:not(:lang(yue))>:lang(yue){quotes:"\300c" "\300d" "\300e" "\300f"}:root:lang(zh-Hant),:not(:lang(zh-Hant))>:lang(zh-Hant){quotes:"\300c" "\300d" "\300e" "\300f"}}@layer elements{audio,canvas,embed,iframe,img,object,picture,svg,video{display:block;vertical-align:middle;max-width:100%}img,svg,video,canvas{height:auto}audio{width:100%;max-width:var(--tera1)}audio:not([controls]){display:none}figcaption{font-style:italic;font-size:var(--text-sm)}figure{&:has(*+figcaption){figcaption{margin-top:var(--figcaption-spacing)}}&:has(figcaption+*){figcaption{margin-bottom:var(--figcaption-spacing)}}}iframe{border:var(--border-sm) solid var(--ui-border-color)}}@layer elements{caption{caption-side:bottom;margin-top:var(--table-caption-spacing);font-size:var(--text-sm)}table{border-spacing:0;border:var(--table-border-width) solid var(--table-border-color);border-radius:var(--table-border-radius);background-color:var(--table-background-color)}th,td{text-align:start;padding:var(--table-padding);border-bottom:var(--table-border-width) solid var(--table-border-color);border-inline-start:var(--table-border-width) solid var(--table-border-color)}tr{th:first-child,td:first-child{border-inline-start-width:0}}tbody{tr:last-child{th,td{border-bottom-width:0}}}tfoot{th,td{border-top:var(--table-border-width) solid var(--table-border-color);border-bottom-width:0}}}@layer elements{::placeholder{opacity:var(--o-4)}input,button,textarea,select{font:inherit;color:var(--text-color)}button{color:var(--text-color)}fieldset{border:var(--fieldset-border-width) solid var(--fieldset-border-color);border-radius:var(--fieldset-border-radius);padding:var(--fieldset-padding);ul:has([type=checkbox],[type=radio]){padding-inline-start:0}>[aria-hidden]{margin-bottom:var(--sm3);font-size:var(--text-lg);grid-column:1 / -1}}:is(input,select,textarea):user-invalid{border-color:var(--input-border-color-invalid)}input{&:where(:not([type=checkbox],[type=radio])){height:var(--input-height)}&:where(:not([type=color],[type=file],[type=reset],[type=submit])){padding:var(--input-padding)}&:where(:not([type=color])){border-radius:var(--input-border-radius)}&:where(:not([type=file])){border:var(--input-border-width) solid var(--input-border-color)}&[type=file]{width:100%;accent-color:var(--text-color)}&[type=number]{padding-inline-end:var(--xs1)}}label{display:block;&:has(+:is(input,select,textarea)){margin-bottom:var(--label-spacing)}}legend{position:absolute;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);width:1px;height:1px;white-space:nowrap}meter{width:100%;background:var(--meter-track-color);border-radius:var(--meter-border-radius);height:var(--meter-height);&::-webkit-meter-bar{background:var(--meter-track-color)}&::-webkit-meter-bar,&::-webkit-meter-optimum-value,&::-webkit-meter-suboptimum-value,&::-webkit-meter-even-less-good-value{height:var(--meter-height);border:none;border-radius:var(--meter-border-radius)}&::-webkit-meter-even-less-good-value{background:var(--meter-low-color)}&::-webkit-meter-suboptimum-value{background:var(--meter-medium-color)}&::-webkit-meter-optimum-value{background:var(--meter-high-color)}&:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:var(--meter-low-color)}&:-moz-meter-sub-optimum::-moz-meter-bar{background:var(--meter-medium-color)}&:-moz-meter-optimum::-moz-meter-bar{background:var(--meter-high-color)}}progress{appearance:none;width:100%;height:var(--progress-height);background:var(--progress-track-color);border-radius:var(--progress-border-radius);border:none;&::-moz-progress-bar{background:var(--progress-color);border-radius:var(--progress-border-radius)}&::-webkit-progress-bar{width:100%;background:var(--progress-track-color);border-radius:var(--progress-border-radius);height:var(--progress-height)}&::-webkit-progress-value{background:var(--progress-color);border-radius:var(--progress-border-radius)}}select{--split: calc(100% - var(--select-icon-size));display:flex;appearance:none;height:var(--input-height);padding:var(--xs1) calc(var(--input-padding) + var(--md1)) var(--xs1) var(--input-padding);border:var(--input-border-width) solid var(--input-border-color);border-radius:var(--input-border-radius);background:linear-gradient(to right,var(--body-background-color) 0 var(--split),var(--text-color) var(--split) 100%);mask-image:var(--select-icon),linear-gradient(to right,transparent calc(var(--split) - 1px),red 0),linear-gradient(red 0 0);mask-size:var(--select-icon-size),auto,auto;mask-position:calc(100% - var(--xs1)) center,0 0,0 0;mask-repeat:no-repeat;mask-clip:padding-box,padding-box,border-box;mask-origin:padding-box,padding-box,border-box;mask-composite:add,exclude;&:disabled{--disabled-color: light-dark( hsl(from var(--text-color) h s 70%), hsl(from var(--text-color) h s 40%) );cursor:not-allowed;color:var(--disabled-color);background:linear-gradient(to right,var(--body-background-color) 0 var(--split),var(--disabled-color) var(--split) 100%)}&[multiple]{height:auto;padding:var(--input-padding);background:var(--body-background-color);mask-image:none}}textarea{width:100%;padding:var(--input-padding);border-radius:var(--input-border-radius);border:var(--input-border-width) solid var(--input-border-color);resize:vertical;&:not([rows]){min-height:6em}}}@layer elements{dialog{min-width:var(--dialog-min-width);max-width:var(--dialog-max-width);padding:var(--dialog-padding);border:var(--dialog-border-width) solid var(--dialog-border-color);background-color:var(--dialog-background-color);border-radius:var(--dialog-border-radius);&::backdrop{background:var(--dialog-backdrop-color);opacity:var(--dialog-backdrop-opacity)}[aria-label="close pop-up"]{position:absolute;top:var(--xs3);right:var( --xs3 );background:transparent;border:none;outline:none;cursor:pointer}p:last-of-type{margin-bottom:0}}details{padding:var(--details-padding);border:var(--details-border-width) solid var(--details-border-color);background-color:var(--details-background-color);border-radius:var(--details-border-radius);cursor:pointer;summary{display:flex;justify-content:space-between;font-weight:var(--bold);&::-webkit-details-marker{display:none}&:after{content:"";width:var(--details-icon-size);height:var(--details-icon-size);background-color:currentColor;mask-image:var(--details-icon);mask-size:contain;mask-repeat:no-repeat;transition:transform var(--transition)}}&[open]>summary{margin-bottom:var(--details-spacing);&:after{transform:rotate(180deg)}}p:last-of-type{margin-bottom:0}}}@layer global{:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.a11y-skipLink{position:fixed;z-index:var(--z-top);inset-block-start:-100vb;inset-inline-start:0;padding:.75em 1.25em;background-color:var(--body-background-color);color:var(--text-color)}.a11y-skipLink:focus{inset-block-start:0}.a11y-srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}}@layer global{@keyframes fadeFromOpaque{0%{opacity:1}}@keyframes fadeToOpaque{to{opacity:1}}@keyframes fadeFromTransparent{0%{opacity:0}}@keyframes fadeToTransparent{to{opacity:0}}}@layer global{.grid{display:grid;--grid-tc: repeat(4, 1fr);--grid-cs: 1;--grid-ce: -1;grid-template-columns:var(--grid-tc);grid-column-gap:var(--grid-column-gap);grid-row-gap:var(--grid-row-gap)}.grid-flush{grid-column-gap:0;grid-row-gap:0}.grid>.grid_item{display:block;appearance:none}.grid[col="1"]{--grid-tc: repeat(1, 1fr) }.grid[col="2"]{--grid-tc: repeat(2, 1fr) }.grid[col="3"]{--grid-tc: repeat(3, 1fr) }.grid[col="4"]{--grid-tc: repeat(4, 1fr) }.grid[col="5"]{--grid-tc: repeat(5, 1fr) }.grid[col="6"]{--grid-tc: repeat(6, 1fr) }.grid[col="7"]{--grid-tc: repeat(7, 1fr) }.grid[col="8"]{--grid-tc: repeat(8, 1fr) }.grid[col="9"]{--grid-tc: repeat(9, 1fr) }.grid[col="10"]{--grid-tc: repeat(10, 1fr) }.grid[col="11"]{--grid-tc: repeat(11, 1fr) }.grid[col="12"]{--grid-tc: repeat(12, 1fr) }.grid[col="13"]{--grid-tc: repeat(13, 1fr) }.grid[col="14"]{--grid-tc: repeat(14, 1fr) }.grid[col="15"]{--grid-tc: repeat(15, 1fr) }.grid[col="16"]{--grid-tc: repeat(16, 1fr) }.grid[col="17"]{--grid-tc: repeat(17, 1fr) }.grid[col="18"]{--grid-tc: repeat(18, 1fr) }.grid[col="19"]{--grid-tc: repeat(19, 1fr) }.grid[col="20"]{--grid-tc: repeat(20, 1fr) }.grid[col="21"]{--grid-tc: repeat(21, 1fr) }.grid[col="22"]{--grid-tc: repeat(22, 1fr) }.grid[col="23"]{--grid-tc: repeat(23, 1fr) }.grid[col="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span^="1"]{--grid-cs: 1 }.grid>.grid_item[span^="2"]{--grid-cs: 2 }.grid>.grid_item[span^="3"]{--grid-cs: 3 }.grid>.grid_item[span^="4"]{--grid-cs: 4 }.grid>.grid_item[span^="5"]{--grid-cs: 5 }.grid>.grid_item[span^="6"]{--grid-cs: 6 }.grid>.grid_item[span^="7"]{--grid-cs: 7 }.grid>.grid_item[span^="8"]{--grid-cs: 8 }.grid>.grid_item[span^="9"]{--grid-cs: 9 }.grid>.grid_item[span^="10"]{--grid-cs: 10 }.grid>.grid_item[span^="11"]{--grid-cs: 11 }.grid>.grid_item[span^="12"]{--grid-cs: 12 }.grid>.grid_item[span^="13"]{--grid-cs: 13 }.grid>.grid_item[span^="14"]{--grid-cs: 14 }.grid>.grid_item[span^="15"]{--grid-cs: 15 }.grid>.grid_item[span^="16"]{--grid-cs: 16 }.grid>.grid_item[span^="17"]{--grid-cs: 17 }.grid>.grid_item[span^="18"]{--grid-cs: 18 }.grid>.grid_item[span^="19"]{--grid-cs: 19 }.grid>.grid_item[span^="20"]{--grid-cs: 20 }.grid>.grid_item[span^="21"]{--grid-cs: 21 }.grid>.grid_item[span^="22"]{--grid-cs: 22 }.grid>.grid_item[span^="23"]{--grid-cs: 23 }.grid>.grid_item[span^="24"]{--grid-cs: 24 }.grid>.grid_item[span$="+1"],.grid>.grid_item[span="1"]{--grid-ce: 1 }.grid>.grid_item[span$="+2"],.grid>.grid_item[span$="-1"],.grid>.grid_item[span="2"]{--grid-ce: 2 }.grid>.grid_item[span$="+3"],.grid>.grid_item[span$="-2"],.grid>.grid_item[span="3"]{--grid-ce: 3 }.grid>.grid_item[span$="+4"],.grid>.grid_item[span$="-3"],.grid>.grid_item[span="4"]{--grid-ce: 4 }.grid>.grid_item[span$="+5"],.grid>.grid_item[span$="-4"],.grid>.grid_item[span="5"]{--grid-ce: 5 }.grid>.grid_item[span$="+6"],.grid>.grid_item[span$="-5"],.grid>.grid_item[span="6"]{--grid-ce: 6 }.grid>.grid_item[span$="+7"],.grid>.grid_item[span$="-6"],.grid>.grid_item[span="7"]{--grid-ce: 7 }.grid>.grid_item[span$="+8"],.grid>.grid_item[span$="-7"],.grid>.grid_item[span="8"]{--grid-ce: 8 }.grid>.grid_item[span$="+9"],.grid>.grid_item[span$="-8"],.grid>.grid_item[span="9"]{--grid-ce: 9 }.grid>.grid_item[span$="+10"],.grid>.grid_item[span$="-9"],.grid>.grid_item[span="10"]{--grid-ce: 10 }.grid>.grid_item[span$="+11"],.grid>.grid_item[span$="-10"],.grid>.grid_item[span="11"]{--grid-ce: 11 }.grid>.grid_item[span$="+12"],.grid>.grid_item[span$="-11"],.grid>.grid_item[span="12"]{--grid-ce: 12 }.grid>.grid_item[span$="+13"],.grid>.grid_item[span$="-12"],.grid>.grid_item[span="13"]{--grid-ce: 13 }.grid>.grid_item[span$="+14"],.grid>.grid_item[span$="-13"],.grid>.grid_item[span="14"]{--grid-ce: 14 }.grid>.grid_item[span$="+15"],.grid>.grid_item[span$="-14"],.grid>.grid_item[span="15"]{--grid-ce: 15 }.grid>.grid_item[span$="+16"],.grid>.grid_item[span$="-15"],.grid>.grid_item[span="16"]{--grid-ce: 16 }.grid>.grid_item[span$="+17"],.grid>.grid_item[span$="-16"],.grid>.grid_item[span="17"]{--grid-ce: 17 }.grid>.grid_item[span$="+18"],.grid>.grid_item[span$="-17"],.grid>.grid_item[span="18"]{--grid-ce: 18 }.grid>.grid_item[span$="+19"],.grid>.grid_item[span$="-18"],.grid>.grid_item[span="19"]{--grid-ce: 19 }.grid>.grid_item[span$="+20"],.grid>.grid_item[span$="-19"],.grid>.grid_item[span="20"]{--grid-ce: 20 }.grid>.grid_item[span$="+21"],.grid>.grid_item[span$="-20"],.grid>.grid_item[span="21"]{--grid-ce: 21 }.grid>.grid_item[span$="+22"],.grid>.grid_item[span$="-21"],.grid>.grid_item[span="22"]{--grid-ce: 22 }.grid>.grid_item[span$="+23"],.grid>.grid_item[span$="-22"],.grid>.grid_item[span="23"]{--grid-ce: 23 }.grid>.grid_item[span$="+24"],.grid>.grid_item[span$="-23"],.grid>.grid_item[span="24"]{--grid-ce: 24 }.grid>.grid_item[span$="-24"]{--grid-ce: 25 }.grid>.grid_item[span]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span*="+"],.grid>.grid_item[span*="-"],.grid>.grid_item[span*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span*="-"],.grid>.grid_item[span*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span=row]{grid-column:1 / -1}@media only screen and (width>=768px){.grid[col-md="1"]{--grid-tc: repeat(1, 1fr) }.grid[col-md="2"]{--grid-tc: repeat(2, 1fr) }.grid[col-md="3"]{--grid-tc: repeat(3, 1fr) }.grid[col-md="4"]{--grid-tc: repeat(4, 1fr) }.grid[col-md="5"]{--grid-tc: repeat(5, 1fr) }.grid[col-md="6"]{--grid-tc: repeat(6, 1fr) }.grid[col-md="7"]{--grid-tc: repeat(7, 1fr) }.grid[col-md="8"]{--grid-tc: repeat(8, 1fr) }.grid[col-md="9"]{--grid-tc: repeat(9, 1fr) }.grid[col-md="10"]{--grid-tc: repeat(10, 1fr) }.grid[col-md="11"]{--grid-tc: repeat(11, 1fr) }.grid[col-md="12"]{--grid-tc: repeat(12, 1fr) }.grid[col-md="13"]{--grid-tc: repeat(13, 1fr) }.grid[col-md="14"]{--grid-tc: repeat(14, 1fr) }.grid[col-md="15"]{--grid-tc: repeat(15, 1fr) }.grid[col-md="16"]{--grid-tc: repeat(16, 1fr) }.grid[col-md="17"]{--grid-tc: repeat(17, 1fr) }.grid[col-md="18"]{--grid-tc: repeat(18, 1fr) }.grid[col-md="19"]{--grid-tc: repeat(19, 1fr) }.grid[col-md="20"]{--grid-tc: repeat(20, 1fr) }.grid[col-md="21"]{--grid-tc: repeat(21, 1fr) }.grid[col-md="22"]{--grid-tc: repeat(22, 1fr) }.grid[col-md="23"]{--grid-tc: repeat(23, 1fr) }.grid[col-md="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span-md^="1"]{--grid-cs: 1 }.grid>.grid_item[span-md^="2"]{--grid-cs: 2 }.grid>.grid_item[span-md^="3"]{--grid-cs: 3 }.grid>.grid_item[span-md^="4"]{--grid-cs: 4 }.grid>.grid_item[span-md^="5"]{--grid-cs: 5 }.grid>.grid_item[span-md^="6"]{--grid-cs: 6 }.grid>.grid_item[span-md^="7"]{--grid-cs: 7 }.grid>.grid_item[span-md^="8"]{--grid-cs: 8 }.grid>.grid_item[span-md^="9"]{--grid-cs: 9 }.grid>.grid_item[span-md^="10"]{--grid-cs: 10 }.grid>.grid_item[span-md^="11"]{--grid-cs: 11 }.grid>.grid_item[span-md^="12"]{--grid-cs: 12 }.grid>.grid_item[span-md^="13"]{--grid-cs: 13 }.grid>.grid_item[span-md^="14"]{--grid-cs: 14 }.grid>.grid_item[span-md^="15"]{--grid-cs: 15 }.grid>.grid_item[span-md^="16"]{--grid-cs: 16 }.grid>.grid_item[span-md^="17"]{--grid-cs: 17 }.grid>.grid_item[span-md^="18"]{--grid-cs: 18 }.grid>.grid_item[span-md^="19"]{--grid-cs: 19 }.grid>.grid_item[span-md^="20"]{--grid-cs: 20 }.grid>.grid_item[span-md^="21"]{--grid-cs: 21 }.grid>.grid_item[span-md^="22"]{--grid-cs: 22 }.grid>.grid_item[span-md^="23"]{--grid-cs: 23 }.grid>.grid_item[span-md^="24"]{--grid-cs: 24 }.grid>.grid_item[span-md$="+1"],.grid>.grid_item[span-md="1"]{--grid-ce: 1 }.grid>.grid_item[span-md$="+2"],.grid>.grid_item[span-md$="-1"],.grid>.grid_item[span-md="2"]{--grid-ce: 2 }.grid>.grid_item[span-md$="+3"],.grid>.grid_item[span-md$="-2"],.grid>.grid_item[span-md="3"]{--grid-ce: 3 }.grid>.grid_item[span-md$="+4"],.grid>.grid_item[span-md$="-3"],.grid>.grid_item[span-md="4"]{--grid-ce: 4 }.grid>.grid_item[span-md$="+5"],.grid>.grid_item[span-md$="-4"],.grid>.grid_item[span-md="5"]{--grid-ce: 5 }.grid>.grid_item[span-md$="+6"],.grid>.grid_item[span-md$="-5"],.grid>.grid_item[span-md="6"]{--grid-ce: 6 }.grid>.grid_item[span-md$="+7"],.grid>.grid_item[span-md$="-6"],.grid>.grid_item[span-md="7"]{--grid-ce: 7 }.grid>.grid_item[span-md$="+8"],.grid>.grid_item[span-md$="-7"],.grid>.grid_item[span-md="8"]{--grid-ce: 8 }.grid>.grid_item[span-md$="+9"],.grid>.grid_item[span-md$="-8"],.grid>.grid_item[span-md="9"]{--grid-ce: 9 }.grid>.grid_item[span-md$="+10"],.grid>.grid_item[span-md$="-9"],.grid>.grid_item[span-md="10"]{--grid-ce: 10 }.grid>.grid_item[span-md$="+11"],.grid>.grid_item[span-md$="-10"],.grid>.grid_item[span-md="11"]{--grid-ce: 11 }.grid>.grid_item[span-md$="+12"],.grid>.grid_item[span-md$="-11"],.grid>.grid_item[span-md="12"]{--grid-ce: 12 }.grid>.grid_item[span-md$="+13"],.grid>.grid_item[span-md$="-12"],.grid>.grid_item[span-md="13"]{--grid-ce: 13 }.grid>.grid_item[span-md$="+14"],.grid>.grid_item[span-md$="-13"],.grid>.grid_item[span-md="14"]{--grid-ce: 14 }.grid>.grid_item[span-md$="+15"],.grid>.grid_item[span-md$="-14"],.grid>.grid_item[span-md="15"]{--grid-ce: 15 }.grid>.grid_item[span-md$="+16"],.grid>.grid_item[span-md$="-15"],.grid>.grid_item[span-md="16"]{--grid-ce: 16 }.grid>.grid_item[span-md$="+17"],.grid>.grid_item[span-md$="-16"],.grid>.grid_item[span-md="17"]{--grid-ce: 17 }.grid>.grid_item[span-md$="+18"],.grid>.grid_item[span-md$="-17"],.grid>.grid_item[span-md="18"]{--grid-ce: 18 }.grid>.grid_item[span-md$="+19"],.grid>.grid_item[span-md$="-18"],.grid>.grid_item[span-md="19"]{--grid-ce: 19 }.grid>.grid_item[span-md$="+20"],.grid>.grid_item[span-md$="-19"],.grid>.grid_item[span-md="20"]{--grid-ce: 20 }.grid>.grid_item[span-md$="+21"],.grid>.grid_item[span-md$="-20"],.grid>.grid_item[span-md="21"]{--grid-ce: 21 }.grid>.grid_item[span-md$="+22"],.grid>.grid_item[span-md$="-21"],.grid>.grid_item[span-md="22"]{--grid-ce: 22 }.grid>.grid_item[span-md$="+23"],.grid>.grid_item[span-md$="-22"],.grid>.grid_item[span-md="23"]{--grid-ce: 23 }.grid>.grid_item[span-md$="+24"],.grid>.grid_item[span-md$="-23"],.grid>.grid_item[span-md="24"]{--grid-ce: 24 }.grid>.grid_item[span-md$="-24"]{--grid-ce: 25 }.grid>.grid_item[span-md]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span-md*="+"],.grid>.grid_item[span-md*="-"],.grid>.grid_item[span-md*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span-md*="-"],.grid>.grid_item[span-md*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span-md=row]{grid-column:1 / -1}}@media only screen and (width>=1024px){.grid[col-lg="1"]{--grid-tc: repeat(1, 1fr) }.grid[col-lg="2"]{--grid-tc: repeat(2, 1fr) }.grid[col-lg="3"]{--grid-tc: repeat(3, 1fr) }.grid[col-lg="4"]{--grid-tc: repeat(4, 1fr) }.grid[col-lg="5"]{--grid-tc: repeat(5, 1fr) }.grid[col-lg="6"]{--grid-tc: repeat(6, 1fr) }.grid[col-lg="7"]{--grid-tc: repeat(7, 1fr) }.grid[col-lg="8"]{--grid-tc: repeat(8, 1fr) }.grid[col-lg="9"]{--grid-tc: repeat(9, 1fr) }.grid[col-lg="10"]{--grid-tc: repeat(10, 1fr) }.grid[col-lg="11"]{--grid-tc: repeat(11, 1fr) }.grid[col-lg="12"]{--grid-tc: repeat(12, 1fr) }.grid[col-lg="13"]{--grid-tc: repeat(13, 1fr) }.grid[col-lg="14"]{--grid-tc: repeat(14, 1fr) }.grid[col-lg="15"]{--grid-tc: repeat(15, 1fr) }.grid[col-lg="16"]{--grid-tc: repeat(16, 1fr) }.grid[col-lg="17"]{--grid-tc: repeat(17, 1fr) }.grid[col-lg="18"]{--grid-tc: repeat(18, 1fr) }.grid[col-lg="19"]{--grid-tc: repeat(19, 1fr) }.grid[col-lg="20"]{--grid-tc: repeat(20, 1fr) }.grid[col-lg="21"]{--grid-tc: repeat(21, 1fr) }.grid[col-lg="22"]{--grid-tc: repeat(22, 1fr) }.grid[col-lg="23"]{--grid-tc: repeat(23, 1fr) }.grid[col-lg="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span-lg^="1"]{--grid-cs: 1 }.grid>.grid_item[span-lg^="2"]{--grid-cs: 2 }.grid>.grid_item[span-lg^="3"]{--grid-cs: 3 }.grid>.grid_item[span-lg^="4"]{--grid-cs: 4 }.grid>.grid_item[span-lg^="5"]{--grid-cs: 5 }.grid>.grid_item[span-lg^="6"]{--grid-cs: 6 }.grid>.grid_item[span-lg^="7"]{--grid-cs: 7 }.grid>.grid_item[span-lg^="8"]{--grid-cs: 8 }.grid>.grid_item[span-lg^="9"]{--grid-cs: 9 }.grid>.grid_item[span-lg^="10"]{--grid-cs: 10 }.grid>.grid_item[span-lg^="11"]{--grid-cs: 11 }.grid>.grid_item[span-lg^="12"]{--grid-cs: 12 }.grid>.grid_item[span-lg^="13"]{--grid-cs: 13 }.grid>.grid_item[span-lg^="14"]{--grid-cs: 14 }.grid>.grid_item[span-lg^="15"]{--grid-cs: 15 }.grid>.grid_item[span-lg^="16"]{--grid-cs: 16 }.grid>.grid_item[span-lg^="17"]{--grid-cs: 17 }.grid>.grid_item[span-lg^="18"]{--grid-cs: 18 }.grid>.grid_item[span-lg^="19"]{--grid-cs: 19 }.grid>.grid_item[span-lg^="20"]{--grid-cs: 20 }.grid>.grid_item[span-lg^="21"]{--grid-cs: 21 }.grid>.grid_item[span-lg^="22"]{--grid-cs: 22 }.grid>.grid_item[span-lg^="23"]{--grid-cs: 23 }.grid>.grid_item[span-lg^="24"]{--grid-cs: 24 }.grid>.grid_item[span-lg$="+1"],.grid>.grid_item[span-lg="1"]{--grid-ce: 1 }.grid>.grid_item[span-lg$="+2"],.grid>.grid_item[span-lg$="-1"],.grid>.grid_item[span-lg="2"]{--grid-ce: 2 }.grid>.grid_item[span-lg$="+3"],.grid>.grid_item[span-lg$="-2"],.grid>.grid_item[span-lg="3"]{--grid-ce: 3 }.grid>.grid_item[span-lg$="+4"],.grid>.grid_item[span-lg$="-3"],.grid>.grid_item[span-lg="4"]{--grid-ce: 4 }.grid>.grid_item[span-lg$="+5"],.grid>.grid_item[span-lg$="-4"],.grid>.grid_item[span-lg="5"]{--grid-ce: 5 }.grid>.grid_item[span-lg$="+6"],.grid>.grid_item[span-lg$="-5"],.grid>.grid_item[span-lg="6"]{--grid-ce: 6 }.grid>.grid_item[span-lg$="+7"],.grid>.grid_item[span-lg$="-6"],.grid>.grid_item[span-lg="7"]{--grid-ce: 7 }.grid>.grid_item[span-lg$="+8"],.grid>.grid_item[span-lg$="-7"],.grid>.grid_item[span-lg="8"]{--grid-ce: 8 }.grid>.grid_item[span-lg$="+9"],.grid>.grid_item[span-lg$="-8"],.grid>.grid_item[span-lg="9"]{--grid-ce: 9 }.grid>.grid_item[span-lg$="+10"],.grid>.grid_item[span-lg$="-9"],.grid>.grid_item[span-lg="10"]{--grid-ce: 10 }.grid>.grid_item[span-lg$="+11"],.grid>.grid_item[span-lg$="-10"],.grid>.grid_item[span-lg="11"]{--grid-ce: 11 }.grid>.grid_item[span-lg$="+12"],.grid>.grid_item[span-lg$="-11"],.grid>.grid_item[span-lg="12"]{--grid-ce: 12 }.grid>.grid_item[span-lg$="+13"],.grid>.grid_item[span-lg$="-12"],.grid>.grid_item[span-lg="13"]{--grid-ce: 13 }.grid>.grid_item[span-lg$="+14"],.grid>.grid_item[span-lg$="-13"],.grid>.grid_item[span-lg="14"]{--grid-ce: 14 }.grid>.grid_item[span-lg$="+15"],.grid>.grid_item[span-lg$="-14"],.grid>.grid_item[span-lg="15"]{--grid-ce: 15 }.grid>.grid_item[span-lg$="+16"],.grid>.grid_item[span-lg$="-15"],.grid>.grid_item[span-lg="16"]{--grid-ce: 16 }.grid>.grid_item[span-lg$="+17"],.grid>.grid_item[span-lg$="-16"],.grid>.grid_item[span-lg="17"]{--grid-ce: 17 }.grid>.grid_item[span-lg$="+18"],.grid>.grid_item[span-lg$="-17"],.grid>.grid_item[span-lg="18"]{--grid-ce: 18 }.grid>.grid_item[span-lg$="+19"],.grid>.grid_item[span-lg$="-18"],.grid>.grid_item[span-lg="19"]{--grid-ce: 19 }.grid>.grid_item[span-lg$="+20"],.grid>.grid_item[span-lg$="-19"],.grid>.grid_item[span-lg="20"]{--grid-ce: 20 }.grid>.grid_item[span-lg$="+21"],.grid>.grid_item[span-lg$="-20"],.grid>.grid_item[span-lg="21"]{--grid-ce: 21 }.grid>.grid_item[span-lg$="+22"],.grid>.grid_item[span-lg$="-21"],.grid>.grid_item[span-lg="22"]{--grid-ce: 22 }.grid>.grid_item[span-lg$="+23"],.grid>.grid_item[span-lg$="-22"],.grid>.grid_item[span-lg="23"]{--grid-ce: 23 }.grid>.grid_item[span-lg$="+24"],.grid>.grid_item[span-lg$="-23"],.grid>.grid_item[span-lg="24"]{--grid-ce: 24 }.grid>.grid_item[span-lg$="-24"]{--grid-ce: 25 }.grid>.grid_item[span-lg]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span-lg*="+"],.grid>.grid_item[span-lg*="-"],.grid>.grid_item[span-lg*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span-lg*="-"],.grid>.grid_item[span-lg*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span-lg=row]{grid-column:1 / -1}}@media only screen and (width>=1440px){.grid[col-xl="1"]{--grid-tc: repeat(1, 1fr) }.grid[col-xl="2"]{--grid-tc: repeat(2, 1fr) }.grid[col-xl="3"]{--grid-tc: repeat(3, 1fr) }.grid[col-xl="4"]{--grid-tc: repeat(4, 1fr) }.grid[col-xl="5"]{--grid-tc: repeat(5, 1fr) }.grid[col-xl="6"]{--grid-tc: repeat(6, 1fr) }.grid[col-xl="7"]{--grid-tc: repeat(7, 1fr) }.grid[col-xl="8"]{--grid-tc: repeat(8, 1fr) }.grid[col-xl="9"]{--grid-tc: repeat(9, 1fr) }.grid[col-xl="10"]{--grid-tc: repeat(10, 1fr) }.grid[col-xl="11"]{--grid-tc: repeat(11, 1fr) }.grid[col-xl="12"]{--grid-tc: repeat(12, 1fr) }.grid[col-xl="13"]{--grid-tc: repeat(13, 1fr) }.grid[col-xl="14"]{--grid-tc: repeat(14, 1fr) }.grid[col-xl="15"]{--grid-tc: repeat(15, 1fr) }.grid[col-xl="16"]{--grid-tc: repeat(16, 1fr) }.grid[col-xl="17"]{--grid-tc: repeat(17, 1fr) }.grid[col-xl="18"]{--grid-tc: repeat(18, 1fr) }.grid[col-xl="19"]{--grid-tc: repeat(19, 1fr) }.grid[col-xl="20"]{--grid-tc: repeat(20, 1fr) }.grid[col-xl="21"]{--grid-tc: repeat(21, 1fr) }.grid[col-xl="22"]{--grid-tc: repeat(22, 1fr) }.grid[col-xl="23"]{--grid-tc: repeat(23, 1fr) }.grid[col-xl="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span-xl^="1"]{--grid-cs: 1 }.grid>.grid_item[span-xl^="2"]{--grid-cs: 2 }.grid>.grid_item[span-xl^="3"]{--grid-cs: 3 }.grid>.grid_item[span-xl^="4"]{--grid-cs: 4 }.grid>.grid_item[span-xl^="5"]{--grid-cs: 5 }.grid>.grid_item[span-xl^="6"]{--grid-cs: 6 }.grid>.grid_item[span-xl^="7"]{--grid-cs: 7 }.grid>.grid_item[span-xl^="8"]{--grid-cs: 8 }.grid>.grid_item[span-xl^="9"]{--grid-cs: 9 }.grid>.grid_item[span-xl^="10"]{--grid-cs: 10 }.grid>.grid_item[span-xl^="11"]{--grid-cs: 11 }.grid>.grid_item[span-xl^="12"]{--grid-cs: 12 }.grid>.grid_item[span-xl^="13"]{--grid-cs: 13 }.grid>.grid_item[span-xl^="14"]{--grid-cs: 14 }.grid>.grid_item[span-xl^="15"]{--grid-cs: 15 }.grid>.grid_item[span-xl^="16"]{--grid-cs: 16 }.grid>.grid_item[span-xl^="17"]{--grid-cs: 17 }.grid>.grid_item[span-xl^="18"]{--grid-cs: 18 }.grid>.grid_item[span-xl^="19"]{--grid-cs: 19 }.grid>.grid_item[span-xl^="20"]{--grid-cs: 20 }.grid>.grid_item[span-xl^="21"]{--grid-cs: 21 }.grid>.grid_item[span-xl^="22"]{--grid-cs: 22 }.grid>.grid_item[span-xl^="23"]{--grid-cs: 23 }.grid>.grid_item[span-xl^="24"]{--grid-cs: 24 }.grid>.grid_item[span-xl$="+1"],.grid>.grid_item[span-xl="1"]{--grid-ce: 1 }.grid>.grid_item[span-xl$="+2"],.grid>.grid_item[span-xl$="-1"],.grid>.grid_item[span-xl="2"]{--grid-ce: 2 }.grid>.grid_item[span-xl$="+3"],.grid>.grid_item[span-xl$="-2"],.grid>.grid_item[span-xl="3"]{--grid-ce: 3 }.grid>.grid_item[span-xl$="+4"],.grid>.grid_item[span-xl$="-3"],.grid>.grid_item[span-xl="4"]{--grid-ce: 4 }.grid>.grid_item[span-xl$="+5"],.grid>.grid_item[span-xl$="-4"],.grid>.grid_item[span-xl="5"]{--grid-ce: 5 }.grid>.grid_item[span-xl$="+6"],.grid>.grid_item[span-xl$="-5"],.grid>.grid_item[span-xl="6"]{--grid-ce: 6 }.grid>.grid_item[span-xl$="+7"],.grid>.grid_item[span-xl$="-6"],.grid>.grid_item[span-xl="7"]{--grid-ce: 7 }.grid>.grid_item[span-xl$="+8"],.grid>.grid_item[span-xl$="-7"],.grid>.grid_item[span-xl="8"]{--grid-ce: 8 }.grid>.grid_item[span-xl$="+9"],.grid>.grid_item[span-xl$="-8"],.grid>.grid_item[span-xl="9"]{--grid-ce: 9 }.grid>.grid_item[span-xl$="+10"],.grid>.grid_item[span-xl$="-9"],.grid>.grid_item[span-xl="10"]{--grid-ce: 10 }.grid>.grid_item[span-xl$="+11"],.grid>.grid_item[span-xl$="-10"],.grid>.grid_item[span-xl="11"]{--grid-ce: 11 }.grid>.grid_item[span-xl$="+12"],.grid>.grid_item[span-xl$="-11"],.grid>.grid_item[span-xl="12"]{--grid-ce: 12 }.grid>.grid_item[span-xl$="+13"],.grid>.grid_item[span-xl$="-12"],.grid>.grid_item[span-xl="13"]{--grid-ce: 13 }.grid>.grid_item[span-xl$="+14"],.grid>.grid_item[span-xl$="-13"],.grid>.grid_item[span-xl="14"]{--grid-ce: 14 }.grid>.grid_item[span-xl$="+15"],.grid>.grid_item[span-xl$="-14"],.grid>.grid_item[span-xl="15"]{--grid-ce: 15 }.grid>.grid_item[span-xl$="+16"],.grid>.grid_item[span-xl$="-15"],.grid>.grid_item[span-xl="16"]{--grid-ce: 16 }.grid>.grid_item[span-xl$="+17"],.grid>.grid_item[span-xl$="-16"],.grid>.grid_item[span-xl="17"]{--grid-ce: 17 }.grid>.grid_item[span-xl$="+18"],.grid>.grid_item[span-xl$="-17"],.grid>.grid_item[span-xl="18"]{--grid-ce: 18 }.grid>.grid_item[span-xl$="+19"],.grid>.grid_item[span-xl$="-18"],.grid>.grid_item[span-xl="19"]{--grid-ce: 19 }.grid>.grid_item[span-xl$="+20"],.grid>.grid_item[span-xl$="-19"],.grid>.grid_item[span-xl="20"]{--grid-ce: 20 }.grid>.grid_item[span-xl$="+21"],.grid>.grid_item[span-xl$="-20"],.grid>.grid_item[span-xl="21"]{--grid-ce: 21 }.grid>.grid_item[span-xl$="+22"],.grid>.grid_item[span-xl$="-21"],.grid>.grid_item[span-xl="22"]{--grid-ce: 22 }.grid>.grid_item[span-xl$="+23"],.grid>.grid_item[span-xl$="-22"],.grid>.grid_item[span-xl="23"]{--grid-ce: 23 }.grid>.grid_item[span-xl$="+24"],.grid>.grid_item[span-xl$="-23"],.grid>.grid_item[span-xl="24"]{--grid-ce: 24 }.grid>.grid_item[span-xl$="-24"]{--grid-ce: 25 }.grid>.grid_item[span-xl]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span-xl*="+"],.grid>.grid_item[span-xl*="-"],.grid>.grid_item[span-xl*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span-xl*="-"],.grid>.grid_item[span-xl*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span-xl=row]{grid-column:1 / -1}}}@layer global{.layout{display:flex;flex-direction:column;width:100vw;min-height:100vh;.layout_content{flex:1}}.layout_content_main{container:main / inline-size}.layout-centered{.layout_content{display:grid;gap:var(--sm3);grid-template-columns:1fr minmax(0,var(--layout-content-width)) 1fr;margin-top:var(--lg1);margin-bottom:var(--sm1);@media(width>=768px){margin-top:var(--xl3);margin-bottom:var(--md3);gap:var(--md3)}}.layout_content_main{grid-column:2}}.layout-sidebar{.layout_content{@media(width>=768px){display:grid;grid-template-columns:var(--layout-aside-width) minmax(0,1fr)}}.layout_content_main{padding:var(--sm2);@media(width>=768px){grid-row:1;grid-column:2;padding:var(--lg1) var(--md2)}}.layout_content_aside{@media(width>=768px){grid-row:1;grid-column:1;padding:var(--lg1) var(--md3)}}}.layout-sidebar-end{.layout_content{@media(width>=768px){grid-template-columns:minmax(0,1fr) var(--layout-aside-width)}}.layout_content_main{@media(width>=768px){grid-column:1}}.layout_content_aside{@media(width>=768px){grid-column:2}}}.layout-docs{.layout_content{@media(width>=768px){display:grid;grid-template-columns:var(--layout-aside-width) minmax(0,1fr)}@media(width>=1024px){grid-template-columns:var(--layout-aside-width) minmax(0,var(--layout-content-width)) var(--layout-toc-width)}}.layout_content_main{padding:var(--sm2);@media(width>=768px){grid-row:1;grid-column:2;padding:var(--lg1) var(--md2)}}.layout_content_aside{display:none;@media(width>=768px){display:block;grid-row:1;grid-column:1;padding:var(--lg1) var(--md3)}}.layout_content_aside-toc{@media(width>=768px){display:none}@media(width>=1024px){display:block;grid-row:1;grid-column:3;padding:var(--lg1) var(--md3)}}}.layout-split{.layout_content{display:grid;@media(width>=768px){grid-template-columns:1fr 1fr}}}.layout-cover{min-height:100dvh;.layout_content{display:grid;place-items:center}}}@layer global{@scope(.prose)to (.not-prose){:is(p,ul,ol,blockquote,table):has(+:is(h1,h2,h3,h4)){margin-bottom:calc(var(--prose-spacing) * 2)}p,ul,ol,dl{margin-bottom:var(--prose-spacing);p,ul,ol,dl{margin-bottom:0}}ul,ol{ul,ol{margin-inline-start:0;padding-inline-start:var(--sm2)}li{margin-bottom:.5em;&::marker{color:light-dark(var(--base-300),var(--base-600))}}}ul{margin-inline-start:var(--sm2);list-style-type:"\2192 "}ol{margin-inline-start:var(--md2);list-style-type:decimal-leading-zero;li::marker{font-size:var(--text-sm)}}table{margin-top:var(--md1);margin-bottom:var(--md1)}}}@layer global{.wrap{display:grid;grid-template-columns:1fr var(--wrap-width) 1fr;>*,>astro-island>*,>astro-slot>*,>astro-static-slot>*{grid-column:2;padding-inline:var(--wrap-spacing);@media(width>=768px){padding-inline:var(--wrap-md-spacing)}@media(width>=1024px){padding-inline:var(--wrap-lg-spacing)}}}.wrap-sm{--wrap-width: var(--wrap-width-sm)}.wrap-md{--wrap-width: var(--wrap-width-md)}.wrap-lg{--wrap-width: var(--wrap-width-lg)}.wrap_content-fullBleed{grid-column:1 / -1;width:100%;object-fit:cover}}@layer helpers{.c-base-0{color:var(--base-0)!important}.bdc-base-0{border-color:var(--base-0)!important}.bgc-base-0{background-color:var(--base-0)!important}.c-base-50{color:var(--base-50)!important}.bdc-base-50{border-color:var(--base-50)!important}.bgc-base-50{background-color:var(--base-50)!important}.c-base-100{color:var(--base-100)!important}.bdc-base-100{border-color:var(--base-100)!important}.bgc-base-100{background-color:var(--base-100)!important}.c-base-200{color:var(--base-200)!important}.bdc-base-200{border-color:var(--base-200)!important}.bgc-base-200{background-color:var(--base-200)!important}.c-base-300{color:var(--base-300)!important}.bdc-base-300{border-color:var(--base-300)!important}.bgc-base-300{background-color:var(--base-300)!important}.c-base-400{color:var(--base-400)!important}.bdc-base-400{border-color:var(--base-400)!important}.bgc-base-400{background-color:var(--base-400)!important}.c-base-500{color:var(--base-500)!important}.bdc-base-500{border-color:var(--base-500)!important}.bgc-base-500{background-color:var(--base-500)!important}.c-base-600{color:var(--base-600)!important}.bdc-base-600{border-color:var(--base-600)!important}.bgc-base-600{background-color:var(--base-600)!important}.c-base-700{color:var(--base-700)!important}.bdc-base-700{border-color:var(--base-700)!important}.bgc-base-700{background-color:var(--base-700)!important}.c-base-800{color:var(--base-800)!important}.bdc-base-800{border-color:var(--base-800)!important}.bgc-base-800{background-color:var(--base-800)!important}.c-base-900{color:var(--base-900)!important}.bdc-base-900{border-color:var(--base-900)!important}.bgc-base-900{background-color:var(--base-900)!important}.c-base-950{color:var(--base-950)!important}.bdc-base-950{border-color:var(--base-950)!important}.bgc-base-950{background-color:var(--base-950)!important}.c-primary-50{color:var(--primary-50)!important}.bdc-primary-50{border-color:var(--primary-50)!important}.bgc-primary-50{background-color:var(--primary-50)!important}.c-primary-100{color:var(--primary-100)!important}.bdc-primary-100{border-color:var(--primary-100)!important}.bgc-primary-100{background-color:var(--primary-100)!important}.c-primary-200{color:var(--primary-200)!important}.bdc-primary-200{border-color:var(--primary-200)!important}.bgc-primary-200{background-color:var(--primary-200)!important}.c-primary-300{color:var(--primary-300)!important}.bdc-primary-300{border-color:var(--primary-300)!important}.bgc-primary-300{background-color:var(--primary-300)!important}.c-primary-400{color:var(--primary-400)!important}.bdc-primary-400{border-color:var(--primary-400)!important}.bgc-primary-400{background-color:var(--primary-400)!important}.c-primary-500{color:var(--primary-500)!important}.bdc-primary-500{border-color:var(--primary-500)!important}.bgc-primary-500{background-color:var(--primary-500)!important}.c-primary-600{color:var(--primary-600)!important}.bdc-primary-600{border-color:var(--primary-600)!important}.bgc-primary-600{background-color:var(--primary-600)!important}.c-primary-700{color:var(--primary-700)!important}.bdc-primary-700{border-color:var(--primary-700)!important}.bgc-primary-700{background-color:var(--primary-700)!important}.c-primary-800{color:var(--primary-800)!important}.bdc-primary-800{border-color:var(--primary-800)!important}.bgc-primary-800{background-color:var(--primary-800)!important}.c-primary-900{color:var(--primary-900)!important}.bdc-primary-900{border-color:var(--primary-900)!important}.bgc-primary-900{background-color:var(--primary-900)!important}.c-primary-950{color:var(--primary-950)!important}.bdc-primary-950{border-color:var(--primary-950)!important}.bgc-primary-950{background-color:var(--primary-950)!important}.c-yes-100{color:var(--yes-100)!important}.bdc-yes-100{border-color:var(--yes-100)!important}.bgc-yes-100{background-color:var(--yes-100)!important}.c-yes-200{color:var(--yes-200)!important}.bdc-yes-200{border-color:var(--yes-200)!important}.bgc-yes-200{background-color:var(--yes-200)!important}.c-yes-300{color:var(--yes-300)!important}.bdc-yes-300{border-color:var(--yes-300)!important}.bgc-yes-300{background-color:var(--yes-300)!important}.c-yes-400{color:var(--yes-400)!important}.bdc-yes-400{border-color:var(--yes-400)!important}.bgc-yes-400{background-color:var(--yes-400)!important}.c-yes-500{color:var(--yes-500)!important}.bdc-yes-500{border-color:var(--yes-500)!important}.bgc-yes-500{background-color:var(--yes-500)!important}.c-no-100{color:var(--no-100)!important}.bdc-no-100{border-color:var(--no-100)!important}.bgc-no-100{background-color:var(--no-100)!important}.c-no-200{color:var(--no-200)!important}.bdc-no-200{border-color:var(--no-200)!important}.bgc-no-200{background-color:var(--no-200)!important}.c-no-300{color:var(--no-300)!important}.bdc-no-300{border-color:var(--no-300)!important}.bgc-no-300{background-color:var(--no-300)!important}.c-no-400{color:var(--no-400)!important}.bdc-no-400{border-color:var(--no-400)!important}.bgc-no-400{background-color:var(--no-400)!important}.c-no-500{color:var(--no-500)!important}.bdc-no-500{border-color:var(--no-500)!important}.bgc-no-500{background-color:var(--no-500)!important}.c-maybe-100{color:var(--maybe-100)!important}.bdc-maybe-100{border-color:var(--maybe-100)!important}.bgc-maybe-100{background-color:var(--maybe-100)!important}.c-maybe-200{color:var(--maybe-200)!important}.bdc-maybe-200{border-color:var(--maybe-200)!important}.bgc-maybe-200{background-color:var(--maybe-200)!important}.c-maybe-300{color:var(--maybe-300)!important}.bdc-maybe-300{border-color:var(--maybe-300)!important}.bgc-maybe-300{background-color:var(--maybe-300)!important}.c-maybe-400{color:var(--maybe-400)!important}.bdc-maybe-400{border-color:var(--maybe-400)!important}.bgc-maybe-400{background-color:var(--maybe-400)!important}.c-maybe-500{color:var(--maybe-500)!important}.bdc-maybe-500{border-color:var(--maybe-500)!important}.bgc-maybe-500{background-color:var(--maybe-500)!important}}@layer helpers{body.dev{--baseline: 8;background-size:100% calc(var(--baseline) * 1px)!important;background-image:linear-gradient(to bottom,#0000 calc((var(--baseline) - 1) * 1px),#ff69b4 calc(var(--baseline) * 1px))!important}.dev-error{position:fixed!important;top:var(--md1)!important;left:var(--md1)!important;z-index:var(--z-top)!important;padding:var(--sm1)!important;font-size:1rem!important;color:var(--no-500)!important;background:var(--no-100)!important;border:1px solid var(--no-500)!important;border-radius:var(--radius-md)!important}}@layer helpers{.of-auto,.overflow-auto{overflow:auto!important}.of-hidden,.overflow-hidden{overflow:hidden!important}.of-clip,.overflow-clip{overflow:clip!important}.of-visible,.overflow-visible{overflow:visible!important}.of-scroll,.overflow-scroll{overflow:scroll!important}.of-x-auto,.overflow-x-auto{overflow-x:auto!important}.of-y-auto,.overflow-y-auto{overflow-y:auto!important}.of-x-hidden,.overflow-x-hidden{overflow-x:hidden!important}.of-y-hidden,.overflow-y-hidden{overflow-y:hidden!important}.of-x-clip,.overflow-x-clip{overflow-x:clip!important}.of-y-clip,.overflow-y-clip{overflow-y:clip!important}.of-x-visible,.overflow-x-visible{overflow-x:visible!important}.of-y-visible,.overflow-y-visible{overflow-y:visible!important}.of-x-scroll,.overflow-x-scroll{overflow-x:scroll!important}.of-y-scroll,.overflow-y-scroll{overflow-y:scroll!important}.position-static{position:static!important}.position-fixed{position:fixed!important}.position-absolute{position:absolute!important}.position-relative{position:relative!important}.position-sticky{position:sticky!important}.visibility-visible{visibility:visible!important}.visibility-hidden{visibility:hidden!important}.visibility-collapse{visibility:collapse!important}.z-auto{z-index:auto!important}.z-bottom{z-index:var(--z-bottom)!important}.z-0{z-index:var(--z-0)!important}.z-1{z-index:var(--z-1)!important}.z-2{z-index:var(--z-2)!important}.z-3{z-index:var(--z-3)!important}.z-4{z-index:var(--z-4)!important}.z-5{z-index:var(--z-5)!important}.z-top{z-index:var(--z-top)!important}}@layer helpers{.o-0{opacity:var(--o-0)!important}.o-1{opacity:var(--o-1)!important}.o-2{opacity:var(--o-2)!important}.o-3{opacity:var(--o-3)!important}.o-4{opacity:var(--o-4)!important}.o-5{opacity:var(--o-5)!important}}@layer helpers{.ar-square{aspect-ratio:var(--ar-square)!important}.ar-landscape{aspect-ratio:var(--ar-landscape)!important}.ar-portrait{aspect-ratio:var(--ar-portrait)!important}.ar-widescreen{aspect-ratio:var(--ar-widescreen)!important}.ar-golden{aspect-ratio:var(--ar-golden)!important}}@layer helpers{.w-0{width:0!important}.h-0{height:0!important}.m-0{margin:0!important}.mt-0{margin-top:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mr-0{margin-right:0!important}.mis-0{margin-inline-start:0!important}.mie-0{margin-inline-end:0!important}.p-0{padding:0!important}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.pis-0{padding-inline-start:0!important}.pie-0{padding-inline-end:0!important}.w-xs1{width:var(--xs1)!important}.h-xs1{height:var(--xs1)!important}.m-xs1{margin:var(--xs1)!important}.mt-xs1{margin-top:var(--xs1)!important}.mb-xs1{margin-bottom:var(--xs1)!important}.ml-xs1{margin-left:var(--xs1)!important}.mr-xs1{margin-right:var(--xs1)!important}.mis-xs1{margin-inline-start:var(--xs1)!important}.mie-xs1{margin-inline-end:var(--xs1)!important}.p-xs1{padding:var(--xs1)!important}.pt-xs1{padding-top:var(--xs1)!important}.pb-xs1{padding-bottom:var(--xs1)!important}.pl-xs1{padding-left:var(--xs1)!important}.pr-xs1{padding-right:var(--xs1)!important}.pis-xs1{padding-inline-start:var(--xs1)!important}.pie-xs1{padding-inline-end:var(--xs1)!important}.w-xs2{width:var(--xs2)!important}.h-xs2{height:var(--xs2)!important}.m-xs2{margin:var(--xs2)!important}.mt-xs2{margin-top:var(--xs2)!important}.mb-xs2{margin-bottom:var(--xs2)!important}.ml-xs2{margin-left:var(--xs2)!important}.mr-xs2{margin-right:var(--xs2)!important}.mis-xs2{margin-inline-start:var(--xs2)!important}.mie-xs2{margin-inline-end:var(--xs2)!important}.p-xs2{padding:var(--xs2)!important}.pt-xs2{padding-top:var(--xs2)!important}.pb-xs2{padding-bottom:var(--xs2)!important}.pl-xs2{padding-left:var(--xs2)!important}.pr-xs2{padding-right:var(--xs2)!important}.pis-xs2{padding-inline-start:var(--xs2)!important}.pie-xs2{padding-inline-end:var(--xs2)!important}.w-xs3{width:var(--xs3)!important}.h-xs3{height:var(--xs3)!important}.m-xs3{margin:var(--xs3)!important}.mt-xs3{margin-top:var(--xs3)!important}.mb-xs3{margin-bottom:var(--xs3)!important}.ml-xs3{margin-left:var(--xs3)!important}.mr-xs3{margin-right:var(--xs3)!important}.mis-xs3{margin-inline-start:var(--xs3)!important}.mie-xs3{margin-inline-end:var(--xs3)!important}.p-xs3{padding:var(--xs3)!important}.pt-xs3{padding-top:var(--xs3)!important}.pb-xs3{padding-bottom:var(--xs3)!important}.pl-xs3{padding-left:var(--xs3)!important}.pr-xs3{padding-right:var(--xs3)!important}.pis-xs3{padding-inline-start:var(--xs3)!important}.pie-xs3{padding-inline-end:var(--xs3)!important}.w-sm1{width:var(--sm1)!important}.h-sm1{height:var(--sm1)!important}.m-sm1{margin:var(--sm1)!important}.mt-sm1{margin-top:var(--sm1)!important}.mb-sm1{margin-bottom:var(--sm1)!important}.ml-sm1{margin-left:var(--sm1)!important}.mr-sm1{margin-right:var(--sm1)!important}.mis-sm1{margin-inline-start:var(--sm1)!important}.mie-sm1{margin-inline-end:var(--sm1)!important}.p-sm1{padding:var(--sm1)!important}.pt-sm1{padding-top:var(--sm1)!important}.pb-sm1{padding-bottom:var(--sm1)!important}.pl-sm1{padding-left:var(--sm1)!important}.pr-sm1{padding-right:var(--sm1)!important}.pis-sm1{padding-inline-start:var(--sm1)!important}.pie-sm1{padding-inline-end:var(--sm1)!important}.w-sm2{width:var(--sm2)!important}.h-sm2{height:var(--sm2)!important}.m-sm2{margin:var(--sm2)!important}.mt-sm2{margin-top:var(--sm2)!important}.mb-sm2{margin-bottom:var(--sm2)!important}.ml-sm2{margin-left:var(--sm2)!important}.mr-sm2{margin-right:var(--sm2)!important}.mis-sm2{margin-inline-start:var(--sm2)!important}.mie-sm2{margin-inline-end:var(--sm2)!important}.p-sm2{padding:var(--sm2)!important}.pt-sm2{padding-top:var(--sm2)!important}.pb-sm2{padding-bottom:var(--sm2)!important}.pl-sm2{padding-left:var(--sm2)!important}.pr-sm2{padding-right:var(--sm2)!important}.pis-sm2{padding-inline-start:var(--sm2)!important}.pie-sm2{padding-inline-end:var(--sm2)!important}.w-sm3{width:var(--sm3)!important}.h-sm3{height:var(--sm3)!important}.m-sm3{margin:var(--sm3)!important}.mt-sm3{margin-top:var(--sm3)!important}.mb-sm3{margin-bottom:var(--sm3)!important}.ml-sm3{margin-left:var(--sm3)!important}.mr-sm3{margin-right:var(--sm3)!important}.mis-sm3{margin-inline-start:var(--sm3)!important}.mie-sm3{margin-inline-end:var(--sm3)!important}.p-sm3{padding:var(--sm3)!important}.pt-sm3{padding-top:var(--sm3)!important}.pb-sm3{padding-bottom:var(--sm3)!important}.pl-sm3{padding-left:var(--sm3)!important}.pr-sm3{padding-right:var(--sm3)!important}.pis-sm3{padding-inline-start:var(--sm3)!important}.pie-sm3{padding-inline-end:var(--sm3)!important}.w-md1{width:var(--md1)!important}.h-md1{height:var(--md1)!important}.m-md1{margin:var(--md1)!important}.mt-md1{margin-top:var(--md1)!important}.mb-md1{margin-bottom:var(--md1)!important}.ml-md1{margin-left:var(--md1)!important}.mr-md1{margin-right:var(--md1)!important}.mis-md1{margin-inline-start:var(--md1)!important}.mie-md1{margin-inline-end:var(--md1)!important}.p-md1{padding:var(--md1)!important}.pt-md1{padding-top:var(--md1)!important}.pb-md1{padding-bottom:var(--md1)!important}.pl-md1{padding-left:var(--md1)!important}.pr-md1{padding-right:var(--md1)!important}.pis-md1{padding-inline-start:var(--md1)!important}.pie-md1{padding-inline-end:var(--md1)!important}.w-md2{width:var(--md2)!important}.h-md2{height:var(--md2)!important}.m-md2{margin:var(--md2)!important}.mt-md2{margin-top:var(--md2)!important}.mb-md2{margin-bottom:var(--md2)!important}.ml-md2{margin-left:var(--md2)!important}.mr-md2{margin-right:var(--md2)!important}.mis-md2{margin-inline-start:var(--md2)!important}.mie-md2{margin-inline-end:var(--md2)!important}.p-md2{padding:var(--md2)!important}.pt-md2{padding-top:var(--md2)!important}.pb-md2{padding-bottom:var(--md2)!important}.pl-md2{padding-left:var(--md2)!important}.pr-md2{padding-right:var(--md2)!important}.pis-md2{padding-inline-start:var(--md2)!important}.pie-md2{padding-inline-end:var(--md2)!important}.w-md3{width:var(--md3)!important}.h-md3{height:var(--md3)!important}.m-md3{margin:var(--md3)!important}.mt-md3{margin-top:var(--md3)!important}.mb-md3{margin-bottom:var(--md3)!important}.ml-md3{margin-left:var(--md3)!important}.mr-md3{margin-right:var(--md3)!important}.mis-md3{margin-inline-start:var(--md3)!important}.mie-md3{margin-inline-end:var(--md3)!important}.p-md3{padding:var(--md3)!important}.pt-md3{padding-top:var(--md3)!important}.pb-md3{padding-bottom:var(--md3)!important}.pl-md3{padding-left:var(--md3)!important}.pr-md3{padding-right:var(--md3)!important}.pis-md3{padding-inline-start:var(--md3)!important}.pie-md3{padding-inline-end:var(--md3)!important}.w-lg1{width:var(--lg1)!important}.h-lg1{height:var(--lg1)!important}.m-lg1{margin:var(--lg1)!important}.mt-lg1{margin-top:var(--lg1)!important}.mb-lg1{margin-bottom:var(--lg1)!important}.ml-lg1{margin-left:var(--lg1)!important}.mr-lg1{margin-right:var(--lg1)!important}.mis-lg1{margin-inline-start:var(--lg1)!important}.mie-lg1{margin-inline-end:var(--lg1)!important}.p-lg1{padding:var(--lg1)!important}.pt-lg1{padding-top:var(--lg1)!important}.pb-lg1{padding-bottom:var(--lg1)!important}.pl-lg1{padding-left:var(--lg1)!important}.pr-lg1{padding-right:var(--lg1)!important}.pis-lg1{padding-inline-start:var(--lg1)!important}.pie-lg1{padding-inline-end:var(--lg1)!important}.w-lg2{width:var(--lg2)!important}.h-lg2{height:var(--lg2)!important}.m-lg2{margin:var(--lg2)!important}.mt-lg2{margin-top:var(--lg2)!important}.mb-lg2{margin-bottom:var(--lg2)!important}.ml-lg2{margin-left:var(--lg2)!important}.mr-lg2{margin-right:var(--lg2)!important}.mis-lg2{margin-inline-start:var(--lg2)!important}.mie-lg2{margin-inline-end:var(--lg2)!important}.p-lg2{padding:var(--lg2)!important}.pt-lg2{padding-top:var(--lg2)!important}.pb-lg2{padding-bottom:var(--lg2)!important}.pl-lg2{padding-left:var(--lg2)!important}.pr-lg2{padding-right:var(--lg2)!important}.pis-lg2{padding-inline-start:var(--lg2)!important}.pie-lg2{padding-inline-end:var(--lg2)!important}.w-lg3{width:var(--lg3)!important}.h-lg3{height:var(--lg3)!important}.m-lg3{margin:var(--lg3)!important}.mt-lg3{margin-top:var(--lg3)!important}.mb-lg3{margin-bottom:var(--lg3)!important}.ml-lg3{margin-left:var(--lg3)!important}.mr-lg3{margin-right:var(--lg3)!important}.mis-lg3{margin-inline-start:var(--lg3)!important}.mie-lg3{margin-inline-end:var(--lg3)!important}.p-lg3{padding:var(--lg3)!important}.pt-lg3{padding-top:var(--lg3)!important}.pb-lg3{padding-bottom:var(--lg3)!important}.pl-lg3{padding-left:var(--lg3)!important}.pr-lg3{padding-right:var(--lg3)!important}.pis-lg3{padding-inline-start:var(--lg3)!important}.pie-lg3{padding-inline-end:var(--lg3)!important}.w-xl1{width:var(--xl1)!important}.h-xl1{height:var(--xl1)!important}.m-xl1{margin:var(--xl1)!important}.mt-xl1{margin-top:var(--xl1)!important}.mb-xl1{margin-bottom:var(--xl1)!important}.ml-xl1{margin-left:var(--xl1)!important}.mr-xl1{margin-right:var(--xl1)!important}.mis-xl1{margin-inline-start:var(--xl1)!important}.mie-xl1{margin-inline-end:var(--xl1)!important}.p-xl1{padding:var(--xl1)!important}.pt-xl1{padding-top:var(--xl1)!important}.pb-xl1{padding-bottom:var(--xl1)!important}.pl-xl1{padding-left:var(--xl1)!important}.pr-xl1{padding-right:var(--xl1)!important}.pis-xl1{padding-inline-start:var(--xl1)!important}.pie-xl1{padding-inline-end:var(--xl1)!important}.w-xl2{width:var(--xl2)!important}.h-xl2{height:var(--xl2)!important}.m-xl2{margin:var(--xl2)!important}.mt-xl2{margin-top:var(--xl2)!important}.mb-xl2{margin-bottom:var(--xl2)!important}.ml-xl2{margin-left:var(--xl2)!important}.mr-xl2{margin-right:var(--xl2)!important}.mis-xl2{margin-inline-start:var(--xl2)!important}.mie-xl2{margin-inline-end:var(--xl2)!important}.p-xl2{padding:var(--xl2)!important}.pt-xl2{padding-top:var(--xl2)!important}.pb-xl2{padding-bottom:var(--xl2)!important}.pl-xl2{padding-left:var(--xl2)!important}.pr-xl2{padding-right:var(--xl2)!important}.pis-xl2{padding-inline-start:var(--xl2)!important}.pie-xl2{padding-inline-end:var(--xl2)!important}.w-xl3{width:var(--xl3)!important}.h-xl3{height:var(--xl3)!important}.m-xl3{margin:var(--xl3)!important}.mt-xl3{margin-top:var(--xl3)!important}.mb-xl3{margin-bottom:var(--xl3)!important}.ml-xl3{margin-left:var(--xl3)!important}.mr-xl3{margin-right:var(--xl3)!important}.mis-xl3{margin-inline-start:var(--xl3)!important}.mie-xl3{margin-inline-end:var(--xl3)!important}.p-xl3{padding:var(--xl3)!important}.pt-xl3{padding-top:var(--xl3)!important}.pb-xl3{padding-bottom:var(--xl3)!important}.pl-xl3{padding-left:var(--xl3)!important}.pr-xl3{padding-right:var(--xl3)!important}.pis-xl3{padding-inline-start:var(--xl3)!important}.pie-xl3{padding-inline-end:var(--xl3)!important}.w-xxl1{width:var(--xxl1)!important}.h-xxl1{height:var(--xxl1)!important}.m-xxl1{margin:var(--xxl1)!important}.mt-xxl1{margin-top:var(--xxl1)!important}.mb-xxl1{margin-bottom:var(--xxl1)!important}.ml-xxl1{margin-left:var(--xxl1)!important}.mr-xxl1{margin-right:var(--xxl1)!important}.mis-xxl1{margin-inline-start:var(--xxl1)!important}.mie-xxl1{margin-inline-end:var(--xxl1)!important}.p-xxl1{padding:var(--xxl1)!important}.pt-xxl1{padding-top:var(--xxl1)!important}.pb-xxl1{padding-bottom:var(--xxl1)!important}.pl-xxl1{padding-left:var(--xxl1)!important}.pr-xxl1{padding-right:var(--xxl1)!important}.pis-xxl1{padding-inline-start:var(--xxl1)!important}.pie-xxl1{padding-inline-end:var(--xxl1)!important}.w-xxl2{width:var(--xxl2)!important}.h-xxl2{height:var(--xxl2)!important}.m-xxl2{margin:var(--xxl2)!important}.mt-xxl2{margin-top:var(--xxl2)!important}.mb-xxl2{margin-bottom:var(--xxl2)!important}.ml-xxl2{margin-left:var(--xxl2)!important}.mr-xxl2{margin-right:var(--xxl2)!important}.mis-xxl2{margin-inline-start:var(--xxl2)!important}.mie-xxl2{margin-inline-end:var(--xxl2)!important}.p-xxl2{padding:var(--xxl2)!important}.pt-xxl2{padding-top:var(--xxl2)!important}.pb-xxl2{padding-bottom:var(--xxl2)!important}.pl-xxl2{padding-left:var(--xxl2)!important}.pr-xxl2{padding-right:var(--xxl2)!important}.pis-xxl2{padding-inline-start:var(--xxl2)!important}.pie-xxl2{padding-inline-end:var(--xxl2)!important}.w-xxl3{width:var(--xxl3)!important}.h-xxl3{height:var(--xxl3)!important}.m-xxl3{margin:var(--xxl3)!important}.mt-xxl3{margin-top:var(--xxl3)!important}.mb-xxl3{margin-bottom:var(--xxl3)!important}.ml-xxl3{margin-left:var(--xxl3)!important}.mr-xxl3{margin-right:var(--xxl3)!important}.mis-xxl3{margin-inline-start:var(--xxl3)!important}.mie-xxl3{margin-inline-end:var(--xxl3)!important}.p-xxl3{padding:var(--xxl3)!important}.pt-xxl3{padding-top:var(--xxl3)!important}.pb-xxl3{padding-bottom:var(--xxl3)!important}.pl-xxl3{padding-left:var(--xxl3)!important}.pr-xxl3{padding-right:var(--xxl3)!important}.pis-xxl3{padding-inline-start:var(--xxl3)!important}.pie-xxl3{padding-inline-end:var(--xxl3)!important}.w-mega1{width:var(--mega1)!important}.h-mega1{height:var(--mega1)!important}.m-mega1{margin:var(--mega1)!important}.mt-mega1{margin-top:var(--mega1)!important}.mb-mega1{margin-bottom:var(--mega1)!important}.ml-mega1{margin-left:var(--mega1)!important}.mr-mega1{margin-right:var(--mega1)!important}.mis-mega1{margin-inline-start:var(--mega1)!important}.mie-mega1{margin-inline-end:var(--mega1)!important}.p-mega1{padding:var(--mega1)!important}.pt-mega1{padding-top:var(--mega1)!important}.pb-mega1{padding-bottom:var(--mega1)!important}.pl-mega1{padding-left:var(--mega1)!important}.pr-mega1{padding-right:var(--mega1)!important}.pis-mega1{padding-inline-start:var(--mega1)!important}.pie-mega1{padding-inline-end:var(--mega1)!important}.w-mega2{width:var(--mega2)!important}.h-mega2{height:var(--mega2)!important}.m-mega2{margin:var(--mega2)!important}.mt-mega2{margin-top:var(--mega2)!important}.mb-mega2{margin-bottom:var(--mega2)!important}.ml-mega2{margin-left:var(--mega2)!important}.mr-mega2{margin-right:var(--mega2)!important}.mis-mega2{margin-inline-start:var(--mega2)!important}.mie-mega2{margin-inline-end:var(--mega2)!important}.p-mega2{padding:var(--mega2)!important}.pt-mega2{padding-top:var(--mega2)!important}.pb-mega2{padding-bottom:var(--mega2)!important}.pl-mega2{padding-left:var(--mega2)!important}.pr-mega2{padding-right:var(--mega2)!important}.pis-mega2{padding-inline-start:var(--mega2)!important}.pie-mega2{padding-inline-end:var(--mega2)!important}.w-mega3{width:var(--mega3)!important}.h-mega3{height:var(--mega3)!important}.m-mega3{margin:var(--mega3)!important}.mt-mega3{margin-top:var(--mega3)!important}.mb-mega3{margin-bottom:var(--mega3)!important}.ml-mega3{margin-left:var(--mega3)!important}.mr-mega3{margin-right:var(--mega3)!important}.mis-mega3{margin-inline-start:var(--mega3)!important}.mie-mega3{margin-inline-end:var(--mega3)!important}.p-mega3{padding:var(--mega3)!important}.pt-mega3{padding-top:var(--mega3)!important}.pb-mega3{padding-bottom:var(--mega3)!important}.pl-mega3{padding-left:var(--mega3)!important}.pr-mega3{padding-right:var(--mega3)!important}.pis-mega3{padding-inline-start:var(--mega3)!important}.pie-mega3{padding-inline-end:var(--mega3)!important}.w-giga1{width:var(--giga1)!important}.h-giga1{height:var(--giga1)!important}.m-giga1{margin:var(--giga1)!important}.mt-giga1{margin-top:var(--giga1)!important}.mb-giga1{margin-bottom:var(--giga1)!important}.ml-giga1{margin-left:var(--giga1)!important}.mr-giga1{margin-right:var(--giga1)!important}.mis-giga1{margin-inline-start:var(--giga1)!important}.mie-giga1{margin-inline-end:var(--giga1)!important}.p-giga1{padding:var(--giga1)!important}.pt-giga1{padding-top:var(--giga1)!important}.pb-giga1{padding-bottom:var(--giga1)!important}.pl-giga1{padding-left:var(--giga1)!important}.pr-giga1{padding-right:var(--giga1)!important}.pis-giga1{padding-inline-start:var(--giga1)!important}.pie-giga1{padding-inline-end:var(--giga1)!important}.w-giga2{width:var(--giga2)!important}.h-giga2{height:var(--giga2)!important}.m-giga2{margin:var(--giga2)!important}.mt-giga2{margin-top:var(--giga2)!important}.mb-giga2{margin-bottom:var(--giga2)!important}.ml-giga2{margin-left:var(--giga2)!important}.mr-giga2{margin-right:var(--giga2)!important}.mis-giga2{margin-inline-start:var(--giga2)!important}.mie-giga2{margin-inline-end:var(--giga2)!important}.p-giga2{padding:var(--giga2)!important}.pt-giga2{padding-top:var(--giga2)!important}.pb-giga2{padding-bottom:var(--giga2)!important}.pl-giga2{padding-left:var(--giga2)!important}.pr-giga2{padding-right:var(--giga2)!important}.pis-giga2{padding-inline-start:var(--giga2)!important}.pie-giga2{padding-inline-end:var(--giga2)!important}.w-giga3{width:var(--giga3)!important}.h-giga3{height:var(--giga3)!important}.m-giga3{margin:var(--giga3)!important}.mt-giga3{margin-top:var(--giga3)!important}.mb-giga3{margin-bottom:var(--giga3)!important}.ml-giga3{margin-left:var(--giga3)!important}.mr-giga3{margin-right:var(--giga3)!important}.mis-giga3{margin-inline-start:var(--giga3)!important}.mie-giga3{margin-inline-end:var(--giga3)!important}.p-giga3{padding:var(--giga3)!important}.pt-giga3{padding-top:var(--giga3)!important}.pb-giga3{padding-bottom:var(--giga3)!important}.pl-giga3{padding-left:var(--giga3)!important}.pr-giga3{padding-right:var(--giga3)!important}.pis-giga3{padding-inline-start:var(--giga3)!important}.pie-giga3{padding-inline-end:var(--giga3)!important}.w-tera1{width:var(--tera1)!important}.h-tera1{height:var(--tera1)!important}.m-tera1{margin:var(--tera1)!important}.mt-tera1{margin-top:var(--tera1)!important}.mb-tera1{margin-bottom:var(--tera1)!important}.ml-tera1{margin-left:var(--tera1)!important}.mr-tera1{margin-right:var(--tera1)!important}.mis-tera1{margin-inline-start:var(--tera1)!important}.mie-tera1{margin-inline-end:var(--tera1)!important}.p-tera1{padding:var(--tera1)!important}.pt-tera1{padding-top:var(--tera1)!important}.pb-tera1{padding-bottom:var(--tera1)!important}.pl-tera1{padding-left:var(--tera1)!important}.pr-tera1{padding-right:var(--tera1)!important}.pis-tera1{padding-inline-start:var(--tera1)!important}.pie-tera1{padding-inline-end:var(--tera1)!important}.w-tera2{width:var(--tera2)!important}.h-tera2{height:var(--tera2)!important}.m-tera2{margin:var(--tera2)!important}.mt-tera2{margin-top:var(--tera2)!important}.mb-tera2{margin-bottom:var(--tera2)!important}.ml-tera2{margin-left:var(--tera2)!important}.mr-tera2{margin-right:var(--tera2)!important}.mis-tera2{margin-inline-start:var(--tera2)!important}.mie-tera2{margin-inline-end:var(--tera2)!important}.p-tera2{padding:var(--tera2)!important}.pt-tera2{padding-top:var(--tera2)!important}.pb-tera2{padding-bottom:var(--tera2)!important}.pl-tera2{padding-left:var(--tera2)!important}.pr-tera2{padding-right:var(--tera2)!important}.pis-tera2{padding-inline-start:var(--tera2)!important}.pie-tera2{padding-inline-end:var(--tera2)!important}.w-tera3{width:var(--tera3)!important}.h-tera3{height:var(--tera3)!important}.m-tera3{margin:var(--tera3)!important}.mt-tera3{margin-top:var(--tera3)!important}.mb-tera3{margin-bottom:var(--tera3)!important}.ml-tera3{margin-left:var(--tera3)!important}.mr-tera3{margin-right:var(--tera3)!important}.mis-tera3{margin-inline-start:var(--tera3)!important}.mie-tera3{margin-inline-end:var(--tera3)!important}.p-tera3{padding:var(--tera3)!important}.pt-tera3{padding-top:var(--tera3)!important}.pb-tera3{padding-bottom:var(--tera3)!important}.pl-tera3{padding-left:var(--tera3)!important}.pr-tera3{padding-right:var(--tera3)!important}.pis-tera3{padding-inline-start:var(--tera3)!important}.pie-tera3{padding-inline-end:var(--tera3)!important}}@layer helpers{.font-text{font-family:var(--text)!important}.font-display{font-family:var(--display)!important}.font-mono{font-family:var(--mono)!important}.font-italic{font-style:italic!important}.font-normal{font-style:normal!important}.font-extra-light{font-weight:var(--extra-light)!important}.font-light{font-weight:var(--light)!important}.font-book{font-weight:var(--book)!important}.font-semi-bold{font-weight:var(--semi-bold)!important}.font-bold{font-weight:var(--bold)!important}.font-black{font-weight:var(--black)!important}.text-xs{font-size:var(--text-xs)!important}.text-sm{font-size:var(--text-sm)!important}.text-md{font-size:var(--text-md)!important}.text-lg{font-size:var(--text-lg)!important}.text-xl{font-size:var(--text-xl)!important}.display-sm{font-size:var(--display-sm)!important}.display-md{font-size:var(--display-md)!important}.display-lg{font-size:var(--display-lg)!important}.display-xl{font-size:var(--display-xl)!important}.display-mega{font-size:var(--display-mega)!important}.display-giga{font-size:var(--display-giga)!important}.tracking-sm{letter-spacing:var(--tracking-sm)!important}.tracking-md{letter-spacing:var(--tracking-md)!important}.tracking-lg{letter-spacing:var(--tracking-lg)!important}.tracking-xl{letter-spacing:var(--tracking-xl)!important}.tracking-xxl{letter-spacing:var(--tracking-xxl)!important}.leading-xs{line-height:var(--leading-xs)!important}.leading-sm{line-height:var(--leading-sm)!important}.leading-md{line-height:var(--leading-md)!important}.leading-lg{line-height:var(--leading-lg)!important}.leading-xl{line-height:var(--leading-xl)!important}.leading-xxl{line-height:var(--leading-xxl)!important}.text-left{text-align:left!important}.text-center{text-align:center!important}.text-right{text-align:right!important}.text-justify{text-align:justify!important}.text-start{text-align:start!important}.text-end{text-align:end!important}.text-uppercase{text-transform:uppercase!important}.text-lowercase{text-transform:lowercase!important}.text-capitalize{text-transform:capitalize!important}}@layer theme.default{:root{--xs1: 4px;--xs2: 8px;--xs3: 12px;--sm1: 16px;--sm2: 20px;--sm3: 24px;--md1: 28px;--md2: 32px;--md3: 36px;--lg1: 40px;--lg2: 44px;--lg3: 48px;--xl1: 56px;--xl2: 64px;--xl3: 80px;--xxl1: 96px;--xxl2: 112px;--xxl3: 128px;--mega1: 160px;--mega2: 192px;--mega3: 224px;--giga1: 256px;--giga2: 288px;--giga3: 320px;--tera1: 384px;--tera2: 480px;--tera3: 520px;--ar-square: 1;--ar-landscape: 4/3;--ar-portrait: 3/4;--ar-widescreen: 16/9;--ar-golden: 1.618/1;--display: Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, ui-sans-serif, sans-serif;--text: ui-sans-serif, system-ui, sans-serif;--mono: Dank Mono, Inconsolata, Fira Mono, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, ui-monospace, monospace;--text-xs: .694rem;--text-sm: .833rem;--text-md: 1rem;--text-lg: 1.2rem;--text-xl: 1.44rem;--display-sm: 1.728rem;--display-md: 2.074rem;--display-lg: 2.488rem;--display-xl: 2.986rem;--display-mega: 3.583rem;--display-giga: 4.299rem;--extra-light: 200;--light: 300;--book: 400;--semi-bold: 600;--bold: 700;--black: 900;--tracking-sm: -.05em;--tracking-md: .025em;--tracking-lg: .05em;--tracking-xl: .075em;--tracking-xxl: .15em;--leading-xs: 1;--leading-sm: 1.15;--leading-md: 1.375;--leading-lg: 1.5;--leading-xl: 1.75;--leading-xxl: 2;--base-0: #fff;--base-50: #f6f7f9;--base-100: #edeef1;--base-200: #d6dbe1;--base-300: #b2bbc7;--base-400: #8897a8;--base-500: #697a8e;--base-600: #546375;--base-700: #4a5666;--base-800: #3c4550;--base-900: #353c45;--base-950: #23282e;--primary-50: #f0f9ff;--primary-100: #e0f2fe;--primary-200: #bae6fd;--primary-300: #7dd3fc;--primary-400: #38bdf8;--primary-500: #0ea5e9;--primary-600: #0284c7;--primary-700: #0369a1;--primary-800: #075985;--primary-900: #0c4a6e;--primary-950: #082f49;--yes-100: #d5f6e8;--yes-200: #afebd4;--yes-300: #7adbbd;--yes-400: #46c4a0;--yes-500: #13886d;--no-100: #ffe4e6;--no-200: #fecdd3;--no-300: #fda4af;--no-400: #fb7185;--no-500: #e11d48;--maybe-100: #fff7d6;--maybe-200: #fff0b3;--maybe-300: #ffd64a;--maybe-400: #ffc220;--maybe-500: #f9a007;--highlight-500: #ffee00;--border-sm: 1px;--border-md: 2px;--border-lg: 4px;--border-xl: 8px;--border-xxl: 12px;--radius-sm: 3px;--radius-md: 5px;--radius-lg: 8px;--radius-xl: 12px;--radius-xxl: 16px;--radius-round: 1e5px;--shadow-sm: 0 1px 3px 0 var(--ui-shadow-color), 0 1px 2px -1px var(--ui-shadow-color);--shadow-md: 0 4px 6px -1px var(--ui-shadow-color), 0 2px 4px -2px var(--ui-shadow-color);--shadow-lg: 0 8px 13px -3px var(--ui-shadow-color), 0 4px 6px -4px var(--ui-shadow-color);--shadow-xl: 0 20px 20px -5px var(--ui-shadow-color), 0 8px 10px -6px var(--ui-shadow-color);--shadow-xxl: 0px 11px 8px -6px var(--ui-shadow-color), 0 10px 15px 2px var(--ui-shadow-color);--o-0: 0;--o-1: .2;--o-2: .4;--o-3: .6;--o-4: .8;--o-5: 1;--z-bottom: -1000000000;--z-0: 0;--z-1: 10;--z-2: 20;--z-3: 30;--z-4: 40;--z-5: 50;--z-top: 1000000000;--transition: .22s ease-in-out;--transition-fast: .1s ease-in-out}}@layer theme.default{:root{color-scheme:light dark;--ui-border-color: light-dark(var(--base-200), var(--base-500));--ui-shadow-color: light-dark(rgb(0 0 0 / .1), rgb(0 0 0 / .6));--focus-ring-color: light-dark(var(--primary-500), var(--primary-400));--focus-ring-width: 2px;--focus-ring-offset: 2px}:root.theme-light{color-scheme:light}:root.theme-dark{color-scheme:dark}:root{accent-color:var(--primary-500);--body-background-color: light-dark(var(--base-0), var(--base-950));--body-line-height: var(--leading-lg);--input-height: var(--md3);--input-padding: var(--xs3);--input-border-width: var(--border-sm);--input-border-color: var(--ui-border-color);--input-border-radius: var(--radius-md);--input-border-color-invalid: light-dark(var(--no-500), var(--no-400));--label-spacing: var(--xs1);--fieldset-padding: var(--sm3);--fieldset-border-width: var(--border-sm);--fieldset-border-color: var(--ui-border-color);--fieldset-border-radius: var(--radius-lg);--meter-height: var(--sm1);--meter-border-radius: var(--radius-md);--meter-track-color: var(--primary-100);--meter-low-color: var(--no-400);--meter-medium-color: var(--maybe-400);--meter-high-color: var(--yes-400);--progress-height: var(--sm1);--progress-color: var(--primary-500);--progress-track-color: var(--primary-100);--progress-border-radius: var(--radius-md);--select-icon-size: var(--sm3);--select-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");--dialog-min-width: var(--tera1);--dialog-max-width: var(--tera3);--dialog-padding: var(--lg1) var(--md1);--dialog-border-width: var(--border-sm);--dialog-border-color: light-dark(var(--base-200), var(--base-800));--dialog-background-color: light-dark(var(--base-50), var(--base-900));--dialog-border-radius: var(--radius-lg);--dialog-backdrop-color: var(--base-950);--dialog-backdrop-opacity: var(--o-4);--details-padding: var(--sm1);--details-spacing: var(--xs3);--details-border-width: var(--border-sm);--details-border-color: light-dark(var(--base-200), var(--base-800));--details-background-color: light-dark(var(--base-50), var(--base-900));--details-border-radius: var(--radius-lg);--details-icon-size: var(--sm3);--details-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");--table-padding: var(--xs2) var(--sm1);--table-border-width: var(--border-sm);--table-border-color: light-dark(var(--base-100), var(--base-700));--table-border-radius: var(--radius-md);--table-background-color: none;--table-caption-spacing: var(--xs3);--figcaption-spacing: var(--xs2);--heading-font: var(--display);--heading-weight: var(--black);--heading-letter-spacing: normal;--heading-font-size-h1: clamp( var(--display-md), 1.269rem + 2.682vw, var(--display-xl) );--heading-font-size-h2: clamp( var(--display-sm), 1.057rem + 2.235vw, var(--display-lg) );--heading-font-size-h3: clamp( var(--text-xl), .881rem + 1.865vw, var(--display-md) );--heading-font-size-h4: clamp( var(--text-lg), .734rem + 1.553vw, var(--display-sm) );--heading-font-size-h5: clamp( var(--text-lg), .988rem + .706vw, var(--text-xl) );--heading-font-size-h6: clamp( var(--text-md), .824rem + .588vw, var(--text-lg) );--heading-line-height: var(--leading-sm);--heading-line-height-h1: var(--heading-line-height);--heading-line-height-h2: var(--heading-line-height);--heading-line-height-h3: var(--heading-line-height);--heading-line-height-h4: var(--leading-md);--heading-line-height-h5: var(--leading-md);--heading-line-height-h6: var(--leading-md);--heading-spacing-h1: .4em;--heading-spacing-h2: .4em;--heading-spacing-h3: .4em;--heading-spacing-h4: .4em;--heading-spacing-h5: .4em;--heading-spacing-h6: .4em;--heading-spacing-consecutive: .3em;--text-color: light-dark(var(--base-950), var(--base-200));--link-font-weight: var(--semi-bold);--link-color: light-dark(var(--primary-600), var(--primary-400));--link-color-hover: var(--primary-500);--text-code-color: light-dark(var(--primary-600), var(--primary-400));--text-code-background-color: light-dark( var(--primary-100), var(--primary-900) );--text-code-muted-color: light-dark(var(--base-500), var(--base-300));--pre-border-radius: var(--radius-md);--pre-font-size: .9rem;--blockquote-padding-block: var(--sm1);--blockquote-padding-inline: var(--md1) var(--sm3);--blockquote-background-color: light-dark( var(--primary-50), var(--primary-900) );--blockquote-border-radius: var(--radius-md);--blockquote-accent-width: var(--xs2);--blockquote-accent-color: linear-gradient( var(--primary-800), var(--primary-500) );--hr-content: "";--ins-color: var(--base-950);--ins-background-color: var(--yes-200);--marker-color: var(--highlight-500);--selection-color: light-dark(var(--base-950), var(--base-0));--selection-background-color: light-dark( var(--primary-200), var(--primary-700) )}:root{--grid-column-gap: var(--sm1);--grid-row-gap: var(--sm1);@media(width>=768px){--grid-column-gap: var(--sm3);--grid-row-gap: var(--sm3)}--wrap-spacing: var(--sm1);--wrap-md-spacing: var(--sm3);--wrap-lg-spacing: 0;--wrap-width-sm: minmax(0, 55ch);--wrap-width-md: minmax(0, 70ch);--wrap-width-lg: minmax(0, 900px);--wrap-width: var(--wrap-width-md);--layout-content-width: 70ch;--layout-aside-width: 245px;--layout-toc-width: 1fr;--prose-spacing: var(--sm1)}:root{--badge-font-size: var(--text-sm);--badge-border-radius: var(--radius-md);--badge-color: var(--base-0);--badge-background-color: light-dark(var(--base-700), var(--base-600));--badge-primary-color: var(--base-0);--badge-primary-background-color: light-dark( var(--primary-600), var(--primary-500) );--badge-success-color: light-dark(var(--yes-500), var(--base-0));--badge-success-background-color: light-dark(var(--yes-100), var(--yes-500));--badge-danger-color: light-dark(var(--no-500), var(--base-0));--badge-danger-background-color: light-dark(var(--no-100), var(--no-500));--badge-warning-color: light-dark(var(--maybe-500), var(--base-950));--badge-warning-background-color: light-dark( var(--maybe-100), var(--maybe-500) )}:root{--bt-min-width: 101px;--bt-min-width-md: 123px;--bt-min-width-lg: 133px;--bt-font-size: var(--text-sm);--bt-font-size-lg: var(--text-md);--bt-font-weight: var(--semi-bold);--bt-color: var(--text-color);--bt-color-hover: light-dark(var(--text-color), var(--base-0));--bt-background-color: light-dark(var(--base-0), var(--base-800));--bt-background-color-hover: light-dark(var(--base-50), var(--base-900));--bt-border-color: var(--ui-border-color);--bt-border-width: var(--border-sm);--bt-border-radius: var(--radius-lg);--bt-border-radius-lg: var(--radius-xl);--bt-outline-color-hover: light-dark(var(--base-950), var(--base-0));--bt-outline-background-color-hover: light-dark( rgb(0 0 0 / .1), rgb(255 255 255 / .1) );--bt-outline-border-color: light-dark(var(--base-950), var(--base-0));--bt-outline-border-color-hover: light-dark(var(--base-950), var(--base-0));--bt-primary-color: var(--base-0);--bt-primary-color-hover: var(--base-0);--bt-primary-background-color: var(--primary-600);--bt-primary-background-color-hover: var(--primary-500);--bt-primary-border-color: var(--primary-600);--bt-primary-border-color-hover: var(--primary-600)}:root{--avatar-color: var(--base-0);--avatar-background-color: var(--base-400);--avatar-border-color: light-dark(var(--base-0), var(--base-500));--avatar-border-width: var(--border-sm);--avatar-radius: var(--radius-round);--avatar-status-dot-color-offline: var(--base-300);--avatar-status-dot-color-online: var(--yes-400)}:root{--banner-color: var(--base-0);--banner-background-color: light-dark(var(--primary-600), var(--primary-800))}:root{--breadcrumbs-separator: "/";--breadcrumbs-separator-color: light-dark(var(--base-300), var(--base-600));--breadcrumbs-color: light-dark(var(--base-500), var(--base-400));--breadcrumbs-color-current: var(--text-color)}:root{--card-spacing: var(--sm3);--card-color: var(--text-color);--card-secondary-text-color: light-dark(var(--base-400), var(--base-500));--card-bg-color: light-dark(var(--base-100), var(--base-900));--card-border-radius: var(--radius-lg);--card-border-color: var(--ui-border-color);--card-border-width: var(--border-sm);--card-shadow: var(--shadow-md);--card-shadow-hover: var(--shadow-xl);--card-loading-bg: light-dark(var(--base-200), var(--base-900));--card-aspect-ratio: var(--ar-golden)}:root{--toggle-width: 50px;--toggle-height: 28px;--toggle-border-width: 2px;--toggle-track-color: light-dark(var(--base-300), var(--base-700));--toggle-track-color-checked: var(--yes-400);--toggle-thumb-color: var(--body-background-color)}:root{--faq-spacing: var(--xs3)}:root{--field-spacing: var(--xs1);--field-hint-color: light-dark(var(--base-400), var(--base-500));--field-error-color: light-dark(var(--no-500), var(--no-300));--field-message-position: static}:root{--featureItem-icon-box-size: var(--lg3);--featureItem-icon-size: var(--sm3);--featureItem-icon-color: light-dark(var(--primary-600), var(--primary-300));--featureItem-icon-background-color: light-dark( var(--primary-100), var(--primary-900) );--featureItem-icon-border-radius: var(--radius-lg)}:root{--footer-background-color: light-dark(var(--primary-950), var(--base-950));--footer-text-color: light-dark(var(--base-0), var(--base-200));--footer-border-width: var(--border-md);--footer-border-color: light-dark(transparent, var(--base-700));--footer-link-color: light-dark(var(--base-0), var(--base-200));--footer-link-color-hover: light-dark(var(--primary-200), var(--base-0))}:root{--header-height: var(--xl1);--header-padding: var(--sm1);@media(width>=768px){--header-height: var(--xl2);--header-padding: var(--sm3)}--header-background-color: light-dark(var(--base-0), var(--base-950));--header-menu-background-color: var(--base-950);--header-menu-color: var(--base-0);--header-menu-color-current: var(--primary-400);--header-menu-secondary-color: var(--base-300);--header-menu-border-color: var(--base-500)}:root{--hero-radius: var(--radius-xl);--hero-content-padding: var(--md3);--hero-actions-spacing: var(--lg3);--hero-pagination-dot: var(--sm1);--hero-pagination-dot-color: var(--base-0);--hero-pagination-dot-active-color: var(--primary-600);--hero-pagination-opacity: var(--o-4)}:root{--pagination-size: var(--md3);--pagination-border-radius: var(--radius-md);--pagination-color: var(--text-color);--pagination-color-current: var(--base-0);--pagination-background-color-current: light-dark( var(--primary-600), var(--primary-500) );--pagination-background-color-hover: light-dark( var(--base-100), var(--base-800) )}:root{--prevNext-border-color: var(--ui-border-color);--prevNext-border-radius: var(--radius-lg);--prevNext-border-color-hover: var(--link-color);--prevNext-label-color: light-dark(var(--base-400), var(--base-500))}:root{--notice-spacing: var(--sm1);--notice-text-color: light-dark(var(--base-950), var(--base-0));--notice-background-color: light-dark(var(--base-50), var(--base-800));--notice-border-color: light-dark(var(--base-200), var(--base-500));--notice-border-width: var(--border-sm);--notice-border-radius: var(--radius-lg)}:root{--pricingCard-highlight-border-color: light-dark( var(--primary-600), var(--primary-400) );--pricingCard-check-color: light-dark(var(--yes-500), var(--yes-400))}:root{--readProgressBar-height: var(--xs1);--readProgressBar-color: linear-gradient( 90deg, var(--primary-600) 0%, var(--primary-400) 100% )}:root{--section-spacing: var(--xl3);--section-header-spacing: var(--lg3);--section-eyebrow-color: light-dark(var(--primary-600), var(--primary-400));--section-lede-color: light-dark(var(--base-500), var(--base-400));--section-filled-background-color: light-dark( var(--base-50), var(--base-900) );--section-primary-background-color: light-dark( var(--primary-600), var(--primary-900) );--section-primary-text-color: var(--base-0);--section-primary-link-color: var(--primary-100);--section-primary-link-color-hover: var(--base-0);--section-primary-eyebrow-color: var(--primary-200);--section-primary-lede-color: var(--primary-100)}:root{--testimonial-role-color: light-dark(var(--base-400), var(--base-500))}:root{--tags-padding: var(--xs2);--tags-font-size: var(--text-sm);--tags-color: light-dark(var(--base-500), var(--base-400));--tags-background-color: light-dark(var(--base-100), var(--base-800));--tags-background-color-hover: light-dark(var(--base-200), var(--base-950));--tags-radius: var(--radius-md)}:root{--toc-color: var(--link-color);--toc-color-hover: var(--link-color-hover);--toc-spacing: var(--xs1);--toc-indentation: var(--xs3);--toc-icon-size: var(--sm1)}} diff --git a/src/content/docs/start.mdx b/src/content/docs/start.mdx index 26805740..b8f5befe 100644 --- a/src/content/docs/start.mdx +++ b/src/content/docs/start.mdx @@ -12,35 +12,139 @@ mCSS is both a CSS framework and a methodology. You need to first understand the 1. The CSS syntax 1. The component architecture -Once you've read through the basics below, the best way to understand how it all comes together is to have a look at the [source code][src]. (Video tutorial coming soon!) +Once you've read through the basics below, the best way to understand how it all comes together is to have a look at the [source code][src]. (Video tutorial coming soon-ish!) -## How to install mCSS +## Installation
-There is nothing to install from a registry: you copy mCSS into your project and own the copy. What you copy is the choice, the source files or the compiled ones. +By design, mCSS is not an npm package. You just copy the [latest mCSS release][release] into your project. Three ways to do that, from most convenient to most customizable: -### Install with PostCSS +1. Add the self contained pre-compiled, minified bundle version to your project +1. Add the individual precompiled files +1. Add the source files and use PostCSS to compile them. -Copy [`src/styles/framework/`][framework-src] to wherever your CSS lives, then start your own folder next to it for your unlayered CSS. This site's [`site/`][site-src] is the worked example of that folder, and [`_global.css`][4] is the entry file tying the two together (see [the layers](#mcss-file-structure) below). Copy [`.browserslistrc`][browserslistrc] from the repo root as well: it sets the [compile floor](#browser-support) that keeps postcss-preset-env from polyfilling the features mCSS uses natively. +### Option 1: easy install -You own the source this way: tokens, components, and themes are all editable, and you only ship the files you actually import. The cost is a build step, because the source uses `@custom-media`, which no browser understands yet. One plugin ([postcss-preset-env][presetEnv]) and a five-line config resolve it, and if you already use Astro, Vite, Next, or any other bundler, that config is the only thing you add. If you need more details on how to set up PostCSS, see [this blog post][postcss-post]. +Link the [framework file][dist-min] in your `` and optionally the [components styles][dist-components-min] if you want to use mCSS components: -### The easy install +```html + + + + + + +``` + +(Unminified versions ([framework][dist-css], [components][dist-components]) are available if you want to read the code.) -Grab [`dist/mcss.min.css`][dist-min], the framework core in one file, and link it. Add [`dist/mcss.components.min.css`][dist-components-min] next to it for the component library, or leave it out if you're building your own components: +### Option 2: individual files + +The sweet spot between ease of use and customization options: everything is pre-processed, so there is no build step and no PostCSS. But you can pick and choose which file to include depending on what you need. + +Every framework and component file is available pre-processed in [`dist/css/`][dist-dir] with the `@import` index at [`dist/css/mcss.css`][dist-index]. The files are not minified so you can read and understand them. (For the smallest size possible, see the third install option.) ```html - - - + + + + + +``` + +Add/remove/comment out files in `mcss.css` according to what you need ([more info][mcss-layers]) and override the default styles with your own [theme][themes]. **Don't delete the `@layer` statement.** + +```css +/* css/mcss.css */ +@layer base, elements, global, components, theme.default, theme.user, helpers; +@import url(./base.reset.css) layer(base); +/* […] */ +@import url(./theme.default.css); +@import url(./theme.starter.css); /* your theme */ +/* […] */ +@import url(./help.typography.css) layer(helpers); ``` -Everything is pre-processed, so there is no build step and no PostCSS. The unminified [`dist/mcss.css`][dist-css] and [`dist/mcss.components.css`][dist-components] are there if you need them. +### Option 3: compiled via PostCSS -If you'd rather copy just what you need, every framework/component file is also available pre-processed and uncompressed in [`dist/css/`][dist-dir] (with [`dist/css/mcss.css`][dist-index] as an `@import` index). +#### PostCSS setup + +If you want the most flexibility and full customization, this is the option for you. You'll need three things to get PostCSS working (more details in [this blog article][postcss-post]): + +##### `postcss-preset-env` + +Install [postcss-preset-env][presetEnv] as a dev dependency. + +```shell +npm install -D postcss postcss-preset-env +``` + +##### `postcss.config.cjs` + +This `postcss.config.cjs` at the root of your project. + +```cjs +// postcss.config.cjs +const postcssPresetEnv = require("postcss-preset-env"); +const config = { + plugins: [ + // Uncomment if you use mixins (needs `npm install -D postcss-mixins`) + // require("postcss-mixins"), + postcssPresetEnv({ + stage: 2, + features: { + "cascade-layers": false, + "random-function": false, + }, + }), + ], +}; +module.exports = config; +``` + +##### `.browserslistrc` + +A [`.browserslistrc`][browserslistrc], copied from the mCSS repo root. It sets the [compile floor](#browser-support) so preset-env resolves `@custom-media` and leaves everything else alone. + +```ini +# .browserslistrc +baseline 2024 +``` + +If you already use Astro, Vite, Next, or any other bundler, that's it! No bundler? You'll also need `postcss-cli` and `postcss-import` to run the build yourself (see the same [blog article][postcss-post]). + +#### mCSS setup + +Once PostCSS is set up, copy [`src/styles/framework/`][framework-src] in your CSS folder. Next to it, add a folder where you'll write your own CSS. Finally, add a global CSS file from where you'll import everything. + +A bare minimum setup will look like this: + +```css +/* global.css */ +@import url(./framework/mcss.css); +@import url(./framework/theme.default.css); + +@import url(./site/theme.user.css); +``` + +A full featured (more common) setup: + +```css +/* global.css */ +@import url(./framework/mcss.css); +@import url(./framework/mcss.components.css); +@import url(./framework/theme.default.css); + +@import url(./site/global.layout.css); +@import url(./site/component.customComponent.css); +/* etc. */ +@import url(./site/page.home.css); +/* etc. */ +@import url(./site/theme.user.css); +```
@@ -181,7 +285,7 @@ Some components are **CSS-only**: a single class on a single element, with no As ### Theme -Every design value in mCSS lives in a theme; the layers before this one are pure structure. The framework ships a **default theme** (`theme.default.css`) in two halves: [tokens][5], the scales where sizes, font stacks, colors, and transitions get their values, and [ui tokens][interfaceTokens], which map those scales onto elements and components (components use `--ui-border-color` instead of the lower level `--base-200`, so one override restyles every bordered surface). Your entry activates it right after `mcss.css`; without it, nothing paints. +Every design value in mCSS lives in a theme; the layers before this one are pure structure. The framework ships a **default theme** (`theme.default.css`) in two halves: [tokens][5], the scales where sizes, font stacks, colors, and transitions get their values, and [ui tokens][uiTokens], which map those scales onto elements and components (components use `--ui-border-color` instead of the lower level `--base-200`, so one override restyles every bordered surface). Your entry activates it right after `mcss.css`; without it, nothing paints. Your own theme is one `theme.*.css` file of token overrides plus optional style rules that imports after the default (copy `theme.starter.css`). It lands in the `theme.user` layer, so it beats the default theme no matter the import order, and everything it doesn't mention falls back. **Never edit the default theme files**; your design lives in your theme, which is what keeps framework updates painless. A shipped skin like `theme.wireframe.css` replaces the default import instead: it's an entry that composes the default and overrides on top. @@ -388,7 +492,7 @@ When using modifiers to create different variations of a component, it's recomme } ``` -See the [implementation][github] of the [notice component](/components/notice) for a real life example. +See the [implementation][notice] of the [notice component](/components/notice) for a real life example. ### One block per file @@ -442,16 +546,18 @@ The exact compile floor lives in `.browserslistrc` (`baseline 2024`). Keep it: w [dist-index]: https://github.com/minimaldesign/mCSS/blob/main/dist/css/mcss.css [dist-min]: https://github.com/minimaldesign/mCSS/blob/main/dist/mcss.min.css [framework-src]: https://github.com/minimaldesign/mCSS/tree/main/src/styles/framework -[github]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.notice.css +[notice]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.notice.css [grid]: /docs/global#grid [helpers]: /docs/helpers -[interfaceTokens]: /docs/tokens#ui-tokens +[uiTokens]: /docs/tokens#ui-tokens [layers]: /blog/what-is-itcss#the-layers-of-itcss +[mcss-layers]: /docs/start#the-layers-in-order [layout]: /docs/global#layouts [postcss-post]: /blog/postcss-setup-for-mcss [presetEnv]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-preset-env [prose]: /docs/global#prose [site-src]: https://github.com/minimaldesign/mCSS/tree/main/src/styles/site [src]: https://github.com/minimaldesign/mCSS/tree/main/src/styles +[release]: https://github.com/minimaldesign/mCSS/releases/latest [themes]: /docs/themes [wrap]: /docs/global#wrap diff --git a/src/styles/framework/global.grid.css b/src/styles/framework/global.grid.css index c50ad4eb..4f5393a0 100644 --- a/src/styles/framework/global.grid.css +++ b/src/styles/framework/global.grid.css @@ -16,7 +16,7 @@ } /* DEFAULT */ -.grid > .grid_item { display: block; -moz-appearance: none; appearance: none; -webkit-appearance: none } +.grid > .grid_item { display: block; appearance: none; } .grid[col="1"] { --grid-tc: repeat(1, 1fr) } .grid[col="2"] { --grid-tc: repeat(2, 1fr) } .grid[col="3"] { --grid-tc: repeat(3, 1fr) } diff --git a/src/styles/framework/theme.starter.css b/src/styles/framework/theme.starter.css index 4ab435a6..9ff5e65b 100644 --- a/src/styles/framework/theme.starter.css +++ b/src/styles/framework/theme.starter.css @@ -2,12 +2,12 @@ /* A theme is a file of token overrides, plus optional style rules for what - tokens can't express. Copy this file, name it after your project, and - import it from your own entry point after the default theme: + tokens can't express. This file is where your theme starts: import it + from your own entry point after the default theme: @import url(./framework/mcss.css); @import url(./framework/theme.default.css); - @import url(./theme.my-project.css); + @import url(./theme.starter.css); MAKE SURE you put all your overrides inside `@layer theme.user` diff --git a/src/tools/build-css.mjs b/src/tools/build-css.mjs index 024a4bcf..ba3ed3dc 100644 --- a/src/tools/build-css.mjs +++ b/src/tools/build-css.mjs @@ -119,6 +119,25 @@ const settingsPrelude = [ await readFile(join(SRC, "settings.mixins.css"), "utf8"), ].join("\n"); +// The index reads best in cascade-layer order (matching the layer +// statement), alphabetical within each layer. Theme files split in two: +// the default theme and its parts (theme.default slot), then the starter +// and skins (theme.user slot). theme.default.css sorts before its parts +// alphabetically, keeping the active import first. +const LAYER_RANK = { + base: 0, + elements: 1, + global: 2, + components: 3, + helpers: 6, +}; +const rankOf = (f) => + layerOf(f) === "theme" + ? f.startsWith("theme.default") + ? 4 + : 5 + : LAYER_RANK[layerOf(f)]; + const files = (await readdir(SRC)) .filter( (f) => @@ -127,7 +146,7 @@ const files = (await readdir(SRC)) f !== "mcss.components.css" && !buildTimeOnly.has(f), ) - .sort(); + .sort((a, b) => rankOf(a) - rankOf(b) || a.localeCompare(b)); const indexImports = []; for (const file of files) { @@ -140,8 +159,10 @@ for (const file of files) { // theme's parts are plain CSS layered by their entry in source, so the // dist copies get wrapped here so a lone still slots correctly. // In the index the default theme import is active (the framework - // doesn't paint without a theme); other theme entries are commented: - // swap which one is active to change skins. + // doesn't paint without a theme); other theme entries are commented. + // Skins genuinely replace the default import (they compose the default + // themselves); the starter doesn't: it's imported after the default, + // which stays active. const importsOnly = file === "theme.default.css"; const isDefaultPart = file.startsWith("theme.default.") && !importsOnly; const selfLayered = layer === "theme" && !isDefaultPart; @@ -159,7 +180,9 @@ for (const file of files) { : isDefaultPart ? `/* @import url(./${file}); */ /* imported by theme.default.css */` : selfLayered - ? `/* @import url(./${file}); */ /* theme: swap for the default */` + ? file === "theme.starter.css" + ? `/* @import url(./${file}); */ /* your theme's starting point: keep the default active */` + : `/* @import url(./${file}); */ /* full skin: use instead of the default (it imports it itself) */` : `@import url(./${file}) layer(${layer});`, ); } From 159a80232d17be0183322993091b415efdcfa5b1 Mon Sep 17 00:00:00 2001 From: Yann Date: Sat, 15 Aug 2026 23:32:32 -0700 Subject: [PATCH 12/37] more copy editing for the Getting Started page --- src/content/docs/start.mdx | 112 +++++++++++++++++-------------------- 1 file changed, 50 insertions(+), 62 deletions(-) diff --git a/src/content/docs/start.mdx b/src/content/docs/start.mdx index b8f5befe..ca4c8a06 100644 --- a/src/content/docs/start.mdx +++ b/src/content/docs/start.mdx @@ -152,81 +152,60 @@ A full featured (more common) setup:
-The file structure is a simplified [ITCSS][1]: files are organized in [layers][layers] going from broad and generic (tokens, element defaults) to specific and local (components, one-off helpers). When done right, it takes care of all the common "shortcomings" of CSS such as [specificity][3] wars and cascading conflicts. +### Two folders -mCSS implements this with native [CSS cascade layers][cascade-layers]: every framework file is imported into a named `@layer`, and the layer order (not the import order or specificity) decides who wins. Anything you write _outside_ the layers beats the framework by default, so mCSS always gets out of your way. The only exception is [helper classes][helpers], which use `!important` so they can override anything, including your own CSS. +mCSS is split two folders: -### Two folders +**[`framework/`][framework-src]**: the core files you should not edit yourself. -The styles live in two folders, and the split is the methodology in miniature: +**[`site/`][site-src]**: your own CSS. This files do not use CSS [layers][layers] so the order you import them in is important. Make sure you have a clear mental model of [ITCSS][1] principles before delving in. You can also refer to [mCSS own][4] `/site` folder as a reference. -- **[`framework/`][framework-src]**: mCSS itself, every file in a named layer, including the default theme that holds all its design values. You copy it and leave it alone: customization goes through [a theme of your own](/docs/themes) or your own CSS, never through edits to framework files. -- **[`site/`][site-src]**: this site's own CSS, imported **unlayered, after the framework**, so it wins without specificity games. Because those files are unlayered, the order you import them in is important so make sure you have a clear mental model of [ITCSS][1] principles before delving in. You can also refer to mCSS [own `/site`'s setup][4] as a reference. +### The layers -### The layers, in order +mCSS is a modern take on [ITCSS][1]. Files are organized in [layers][layers] going from broad and generic (settings → reset → HTML elements) to specific and local (components → helpers). Done right, this technic takes care of all "shortcomings" of CSS such as [specificity][3] wars and cascading conflicts. + +mCSS implements the ITCSS technic with native [CSS cascade layers][cascade-layers]. Every framework file is imported into a named `@layer`, and the layer order (not the import order) dictates the specificity. Anything you write _outside_ the layers (in the `/site` folder) has higher specificity by default. The only exception is [helper classes][helpers], which use `!important` and override everything by design. Each layer only ever loses to the ones after it. The sections below detail each one; most have full docs in the sidebar.
-| Layer | Files | What lives there | -| --------------- | ----------------- | --------------------------------------------------------- | -| `base` | `base.*` | Reset/normalize | -| `elements` | `elements.*` | Default styling of bare HTML elements | -| `global` | `global.*` | Grid, wrap, layout scaffolds, prose, a11y | -| `components` | `component.*` | One self-contained block per file | -| `theme.default` | `theme.default.*` | The default theme: every design value (scale + ui tokens) | -| `theme.user` | `theme.*` | Your theme or a swappable skin (overrides + style rules) | -| `helpers` | `help.*` | `!important` one-off overrides, last resort | -| _(unlayered)_ | your own CSS | Beats every layer above, except helpers | +| Layer | Files | What lives there | +| --------------- | ----------------- | ----------------------------------------------- | +| `base` | `base.*` | Reset/normalize. | +| `elements` | `elements.*` | Default styling of bare HTML elements. | +| `global` | `global.*` | Grid, wrap, layout scaffolds, prose, a11y. | +| `components` | `component.*` | Self-contained component styles. | +| `theme.default` | `theme.default.*` | Default [theme][themes] files. | +| `theme.user` | `theme.*` | Custom theme override. | +| `helpers` | `help.*` | Tailwind style utility classes, but done right. | +| _(unlayered)_ | your own CSS | Beats every layer above, except helpers. |
-(Two `settings.*` files remain outside the layers: `settings.media-queries.css` and `settings.mixins.css` are build-time material with no runtime output.) - -The framework's own entry, [`framework/mcss.css`][mcss-entry], makes the split concrete: it declares the layer order and puts every core framework file in its layer. You never edit it: - -```css -/* framework/mcss.css (abridged) */ -@layer base, elements, global, components, theme.default, theme.user, helpers; - -/* Build-time only (media queries + mixins definitions) */ -@import url(./settings.media-queries.css); -@import url(./settings.mixins.css); +**Note:** `settings.*` files (`settings.media-queries.css` and `settings.mixins.css`) conceptually occupy the top position of the ITCSS pyramid, but in mCSS implementation, they're only used at build-time so they don't need their own `@layer`. -@import url(./base.reset.css) layer(base); -@import url(./elements.text.css) layer(elements); -@import url(./global.grid.css) layer(global); -@import url(./help.spacing.css) layer(helpers); -/* etc. — note: no component.* and no theme.* imports here */ -``` +Have a look at [`framework/mcss.css`][mcss-entry] to see how it all comes together. All layers are defined in this file, but some are imported in your [global import][4] instead of directly there: -Three slots are declared but never filled by this entry. The two theme slots are filled from YOUR entry: `theme.default` by the default theme (`theme.default.css`, which the framework needs to paint at all) and `theme.user` by a theme of your own, if any (see below). The `components` slot belongs to the component library, which lives in its own entry, [`framework/mcss.components.css`][mcss-components-entry]. Import it alongside `mcss.css` for the full library, or skip it and build your own components; the layer order declared in `mcss.css` decides priority either way, so import order between the entries doesn't matter. +- Theme files +- Component files -Your site's entry (this site's is [`_global.css`][4]) pulls in the framework, activates the default theme (plus optionally one of your own), then imports your own CSS unlayered: +Your site's global import file (this site's is [`_global.css`][4]) pulls in the framework, activates the default theme (plus optionally your own override), then imports your own CSS: ```css -/* your entry file */ +/* global.css */ + @import url(./framework/mcss.css); -/* Optional: the mCSS component library. Skip it if you build - your own components. */ +/* Optional: the mCSS component library. */ @import url(./framework/mcss.components.css); -/* The default theme: every design value the framework uses. - Theme files are self-layered, so no layer() annotation. For a - full swappable skin (e.g. theme.wireframe.css), import that - entry INSTEAD: it composes the default itself. */ +/* The default theme. */ @import url(./framework/theme.default.css); +/* Optional: your own theme, overriding the default */ +@import url(./site/theme.starter.css); -/* Optional: your own theme (copy theme.starter.css). It lands in - theme.user, so it beats the default no matter the order. */ -/* @import url(./theme.acme.css); */ - -/* Your own CSS: UNLAYERED, after the framework. Its normal - declarations win over every mCSS layer without fighting - specificity. One exception: helpers are !important and beat - unlayered CSS too. */ +/* Your own CSS: it wins over every mCSS layer (except helpers) */ @import url(./site/global.layout.css); @import url(./site/component.header.css); @import url(./site/page.blog.css); @@ -243,12 +222,12 @@ Your site's entry (this site's is [`_global.css`][4]) pulls in the framework, ac
-### Build-time settings +### Settings -Two `settings.*` files sit outside the layers entirely: they're build-time material with no runtime output. +Two `settings.*` files sit outside the `@layer` stack: they're only use at build time. - [Media queries][6] include responsive sizes, as well as user preferences like color schemes, reduced motion, etc. See [media queries docs][6]. -- **Mixins** is optional. It is not used in other parts of mCSS by default but can be useful to streamline your own components' code. It requires a [PostCSS plugin][7] to work. +- **Mixins** (optional). It is not used in other parts of mCSS by default but can be useful to streamline your own components' code. It requires a [PostCSS plugin][7] to work. ### Base @@ -279,25 +258,33 @@ Global styles included out of the box: ### Components -Self-contained styles for single components, one block per file. The mCSS framework is designed to be used on its own, allowing you to create your own components, but a [collection of components][components] built on top of mCSS is included. It ships in its own entry file (`mcss.components.css`, or `dist/mcss.components.css` as a drop-in): `mcss.css` only declares the `components` layer slot, so the library is opt-in. +Self-contained styles for single components. mCSS is designed to let you to create your own components, but a [collection of components][components] built on top of mCSS is included. It ships separately to keep mCSS nimble as the component library grows. -Some components are **CSS-only**: a single class on a single element, with no Astro component because there is no markup structure to encapsulate. For example, the `.badge` class on a `` is the whole badge, and the `.bt` class can style a `
@@ -502,16 +488,11 @@ Any questions or feedback? Head over to the [Github discussions][discussions]!
-mCSS targets **[Baseline](https://web.dev/baseline) 2024**: it freely uses cascade layers (`@layer`), nesting, `:has()`, `light-dark()`, `@scope`, `text-wrap: balance`, and relative color syntax, all natively, with no polyfills. In practice that means Chrome and Edge 130, Firefox 132, and Safari 18.2 or newer, the versions that shipped by late 2024. - -How things degrade in older browsers: +**mCSS targets [Baseline](https://web.dev/baseline) 2024**. -- **Cascade layers, nesting, `:has()`, `light-dark()`**: load-bearing. Browsers without them are not supported. `light-dark()` deserves a specific warning: every color token stores it in a custom property, and a custom property holding an unsupported function does not fall back, it makes the properties that consume it invalid at computed-value time. Browsers older than mid-2024 get unset colors (`currentColor` borders, transparent backgrounds), not the light palette. -- **`@scope`** (mid-2024): only affects `.prose` internals; spacing between prose blocks and headings loses one refinement. -- **Scroll-driven animations**: the [ReadProgressBar](/components/readprogressbar) component detects support and falls back to JavaScript automatically. -- **`sibling-index()`, CSS `random()`, SVG displacement filters**: used only by the [wireframe theme](/docs/themes) for per-element sketch variation; without them the theme keeps its fixed hand-drawn look. +It uses cascade layers (`@layer`), nesting, `:has()`, and other modern CSS features natively, with no polyfills. In practice that means the versions of Chrome, Edge 130, Firefox, and Safari that shipped late 2024 and after. -The exact compile floor lives in `.browserslistrc` (`baseline 2024`). Keep it: with a broader target, postcss-preset-env starts polyfilling the features above, which costs real weight (a `light-dark()` polyfill alone added 23% to a measured build) and quietly rewrites CSS the framework's layer model depends on. +If you install mCSS via the [third option above](#option-3-compiled-via-postcss), it is possible to modify mCSS browser support via the `.browserslistrc` file. Using a different target, `postcss-preset-env` will start polyfilling the newer features. But it's not recommend: it will create file bloat and it's not full proof. Some features can break in the process.
@@ -549,6 +530,8 @@ The exact compile floor lives in `.browserslistrc` (`baseline 2024`). Keep it: w [prose]: /docs/global#prose [site-src]: https://github.com/minimaldesign/mCSS/tree/main/src/styles/site [src]: https://github.com/minimaldesign/mCSS/tree/main/src/styles +[system-that-scales]: /blog/component-system-that-scales [release]: https://github.com/minimaldesign/mCSS/releases/latest +[tags]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.tags.css [themes]: /docs/themes [wrap]: /docs/global#wrap diff --git a/src/styles/_global.css b/src/styles/_global.css index 5085ec83..ba259654 100644 --- a/src/styles/_global.css +++ b/src/styles/_global.css @@ -4,7 +4,7 @@ @import url(./framework/mcss.components.css); @import url(./framework/theme.default.css); -/* @import url(./framework/theme.wireframe.css); */ +/* Your custom theme would go here */ /* Site-only styles (mCSS specific) */ @import url(./site/global.layout.css); From d3cb4fc0a8ae1d6a7ac6ea3ffae64dc6218c1be2 Mon Sep 17 00:00:00 2001 From: Yann Date: Sun, 16 Aug 2026 12:47:32 -0700 Subject: [PATCH 18/37] Getting started fixes --- src/content/docs/start.mdx | 69 ++++++++++++++++++++------------------ 1 file changed, 37 insertions(+), 32 deletions(-) diff --git a/src/content/docs/start.mdx b/src/content/docs/start.mdx index c170ae6b..c7e3c32a 100644 --- a/src/content/docs/start.mdx +++ b/src/content/docs/start.mdx @@ -5,7 +5,7 @@ lastUpdate: 2026-07-31 version: 1 --- -import Notice from '../../components/Notice.astro'; +import Notice from "../../components/Notice.astro";
mCSS is both a CSS framework and a methodology. You need to first understand the methodology to use the framework correctly. There are 3 main parts to the methodology. @@ -24,7 +24,7 @@ Once you've read through the basics below, the best way to understand how it all By design, mCSS is not an npm package. You just copy the [latest mCSS release][release] into your project. Three ways to do that, from most convenient to most customizable: -1. Add the self contained pre-compiled, minified bundle version to your project +1. Add the self-contained pre-compiled, minified bundle version to your project 1. Add the individual precompiled files 1. Add the source files and use PostCSS to compile them. @@ -88,7 +88,7 @@ npm install -D postcss postcss-preset-env ##### `postcss.config.cjs` -This `postcss.config.cjs` at the root of your project. +Add this `postcss.config.cjs` at the root of your project. ```cjs // postcss.config.cjs @@ -131,7 +131,7 @@ A bare minimum setup will look like this: @import url(./framework/mcss.css); @import url(./framework/theme.default.css); -@import url(./site/theme.user.css); +@import url(./site/theme.starter.css); ``` A more common full featured setup: @@ -147,7 +147,7 @@ A more common full featured setup: /* etc. */ @import url(./site/page.home.css); /* etc. */ -@import url(./site/theme.user.css); +@import url(./site/theme.starter.css); ```
@@ -158,16 +158,17 @@ A more common full featured setup: ### Two folders -The **[`framework/`][framework-src]**: core files you should not edit yourself: +**[`framework/`][framework-src]**: the core files you should not edit yourself: - Settings - Base - HTML elements - Global styles - Components (optional) +- Themes (the default theme, and optional skins) - Helpers -**[`site/`][site-src]**: your own CSS. These files do not use CSS [layers][layers] so **understanding and using [ITCSS][1] methodology there is key**. (The [mCSS own][4] `/site` folder is a good reference.) +**[`site/`][site-src]**: your own CSS. These files do not use CSS [layers][layers] so **understanding and using [ITCSS][1] methodology there is key**. (The [mCSS own][site-src] `/site` folder is a good reference.) - Custom theme - Custom layouts @@ -179,9 +180,11 @@ The **[`framework/`][framework-src]**: core files you should not edit yourself: mCSS is a modern take on [ITCSS][1]. Files are organized in [layers][layers] going from broad and generic (settings → reset → HTML elements) to specific and local (components → helpers). This methodology addresses all the supposed "shortcomings" of CSS such as [specificity][3] wars and cascading conflicts. -ITCSS is upgraded in mCSS with native [CSS cascade layers][cascade-layers]. Every framework file is imported into a named `@layer`, and the layer order (not the import order) dictates the specificity. By default, anything you write _outside_ the layers (in the `/site` folder) has higher specificity. The only exception is [helpers][helpers] which use `!important` to override everything, by design. +While ITCSS used specificity for its layers, mCSS upgrades that with native [CSS cascade layers][cascade-layers] priority. Every framework file is imported into a named `@layer`, and the layer order (not the import order, and not specificity) dictates the priority. By default, anything you write _outside_ the layers (in the `/site` folder) has higher priority. + +The only exception is [helpers][helpers] which use `!important` to override everything, by design. -Here are all the mCSS layers in order of specificity: +Here are all the mCSS layers, from lowest to highest priority:
@@ -191,7 +194,7 @@ Here are all the mCSS layers in order of specificity: | `elements` | `elements.*` | Default styling of bare HTML elements. | | `global` | `global.*` | Grid, wrap, layout scaffolds, prose, a11y. | | `components` | `component.*` | Self-contained component styles. | -| `theme.default` | `theme.default.*` | Default [theme][themes] files. | +| `theme.default` | `theme.default.*` | Default [theme][themes] files. | | `theme.user` | `theme.*` | Custom theme override. | | `external` | _(your imports)_ | Code from plugins, npm packages, etc. | | `helpers` | `help.*` | Tailwind style utility classes, but done right. | @@ -199,22 +202,22 @@ Here are all the mCSS layers in order of specificity:
-Have a look at [`framework/mcss.css`][mcss-entry] to see how it's organized. All layers are *defined* in this file. +Have a look at [`framework/mcss.css`][mcss-entry] to see how it's organized. All layers are _defined_ in this file. **Notes:** - `settings.*` files conceptually occupy the top position of the ITCSS "inverted pyramid" with lowest specificity, but since they're only used at build-time, they don't need their own `@layer`. -- The `external` layer ships empty. This layer is reserve for third-party CSS (npm packages, plugins, etc.). That way you can use `@import url(…) layer(external);` to import vendor styles and it becomes trivial to override with your own CSS in a `patch.*` file (like this site's `patch.astro.css`). +- The `external` layer ships empty. This layer is reserved for third-party CSS (npm packages, plugins, etc.). That way you can use `@import url(…) layer(external);` to import vendor styles and it becomes trivial to override with your own CSS in a `patch.*` file (like this site's `patch.astro.css`). ### The global import -The global import ([`_global.css`][4] for this site) is where is all comes together. You import everything used on your site there: +The global import ([`_global.css`][4] for this site) is where it all comes together. You import everything used on your site there: - The mCSS framework - The mCSS components (optional) - The default theme - Your theme (optional override) -- You custom layouts, component, and page overrides +- Your custom layouts, components, and page overrides - Vendor style patches ```css @@ -239,7 +242,6 @@ The global import ([`_global.css`][4] for this site) is where is all comes toget [cascade-layers]: https://developer.mozilla.org/en-US/docs/Web/CSS/@layer [mcss-entry]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/mcss.css -[mcss-components-entry]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/mcss.components.css
@@ -249,7 +251,7 @@ The global import ([`_global.css`][4] for this site) is where is all comes toget ### Settings -Two `settings.*` files sit outside the `@layer` stack: they're only use at build time. +Two `settings.*` files sit outside the `@layer` stack: they're only used at build time. - [Media queries][6] include responsive sizes, as well as user preferences like color schemes, reduced motion, etc. See [media queries docs][6]. - **Mixins** (optional). It is not used in other parts of mCSS by default but can be useful to streamline your own components' code. It requires a [PostCSS plugin][7] to work. @@ -289,35 +291,35 @@ Self-contained styles for single components. mCSS is designed to let you to crea ### Theme -Every design value in mCSS lives in the **default theme** (`theme.default.css`)composed of 2 parts: +Every design value in mCSS lives in the **default theme** (`theme.default.css`) composed of 2 parts: - [tokens][5]: Raw design tokens such as dimensions, fonts, colors, etc. - [ui tokens][uiTokens]: abstraction layer that maps raw tokens to semantic tokens, e.g. `--ui-border-color`, `--input-padding`, etc. -Use the [starter template][srcStarter] to make your own theme (feel free to rename it to anything you'd like but it's recommended to follow the `theme.*.css` convention). Anything you add to this file will automatically overrides what's in the default theme. +Use the [starter template][srcStarter] to make your own theme (feel free to rename it to anything you'd like but it's recommended to follow the `theme.*.css` convention). Anything you add to this file will automatically override what's in the default theme. **Don't edit the default theme files:** keeping your design in your theme makes framework updates easy. -If you want to make a self contained mCSS theme you can distribute, see how `theme.wireframe.css` is setup. It basically imports the default theme itself, so you can swap the `@import` in your [global import][4]. More details on that in the [theme][themes]. +If you want to make a self contained mCSS theme you can distribute, see how `theme.wireframe.css` is set up. It basically imports the default theme itself, so you can swap the `@import` in your [global import][4]. More details on that in the [theme docs][themes]. ### Helpers -[Helpers][helpers] provide classes for “one-off” local overrides. They're similar to utility classes from other frameworks, with a critical difference: they're meant to be used as a last resort and as sparingly as possible. Helper declarations use `!important` and overrides everything on that element, including your own CSS. Read [the docs][helpers] for more info on this. +[Helpers][helpers] provide classes for “one-off” local overrides. They're similar to utility classes from other frameworks, with a critical difference: they're meant to be used as a last resort and as sparingly as possible. Helper declarations use `!important` and override everything on that element, including your own CSS. Read [the docs][helpers] for more info on this. ### Your CSS Your own CSS is unlayered, which means: -- Your CSS has higher specificity than mCSS' (except helpers) +- Your CSS has higher priority than mCSS' (except helpers) - Using the [ITCSS][1] methodology is **critical**. -Your `site/` CSS is required to be imported in that order: +Your `site/` CSS is required to be imported in this order: -- `theme.starter.css` override the default mCSS theme. +- `theme.starter.css` overrides the default mCSS theme. - `global.*.css` for site-wide additions to the framework's globals. - `component.*.css` for your own components (most of your CSS should end up here) - `page.*.css` for the rare page-specific styles -- `external.*.css` for CSS you don't control, i.e. plugins +- `patch.*.css` for patching CSS you don't control, i.e. plugins **Note:** You can also refer to [mCSS own][4] `/site`'s setup as a reference. @@ -396,7 +398,7 @@ CSS: } ``` -**Note:** State selectors have higher specificity than modifier classes (`.avatar.is-online` =`020` vs. `.avatar-xl` = `010`), so always declare custom properties default values inside the main class and _use_ the properties inside the state. +**Note:** State selectors have higher specificity than modifier classes (`.avatar.is-online` = `020` vs. `.avatar-xl` = `010`), so always declare custom properties default values inside the main class and _use_ the properties inside the state. ```css .avatar { @@ -470,8 +472,13 @@ When using modifiers to create different variations of a component, it's recomme ### One class per file - -CSS files must only contain one CSS class, its modifiers, and its elements. **Nothing else.** + + CSS files must only contain one CSS class, its modifiers, and its elements. + **Nothing else.** For example, the `component.card.css` should only contain: @@ -490,14 +497,13 @@ For example, the `component.card.css` should only contain: **mCSS targets [Baseline](https://web.dev/baseline) 2024**. -It uses cascade layers (`@layer`), nesting, `:has()`, and other modern CSS features natively, with no polyfills. In practice that means the versions of Chrome, Edge 130, Firefox, and Safari that shipped late 2024 and after. +It uses cascade layers (`@layer`), nesting, `:has()`, and other modern CSS features natively, with no polyfills. In practice that means the versions of Chrome, Edge, Firefox, and Safari that shipped late 2024 and after. -If you install mCSS via the [third option above](#option-3-compiled-via-postcss), it is possible to modify mCSS browser support via the `.browserslistrc` file. Using a different target, `postcss-preset-env` will start polyfilling the newer features. But it's not recommend: it will create file bloat and it's not full proof. Some features can break in the process. +If you install mCSS via the [third option above](#option-3-compiled-via-postcss), it is possible to modify mCSS browser support via the `.browserslistrc` file. Using a different target, `postcss-preset-env` will start polyfilling the newer features. But it's not recommended: it will create file bloat and it's not foolproof. Some features can break in the process. [1]: /blog/what-is-itcss -[2]: https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax#css_rulesets [3]: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity [4]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/_global.css [5]: /docs/tokens @@ -509,7 +515,6 @@ If you install mCSS via the [third option above](#option-3-compiled-via-postcss) [browserslistrc]: https://github.com/minimaldesign/mCSS/blob/main/.browserslistrc [components]: /components/start [coupling]: /blog/component-system-that-scales -[discussions]: https://github.com/minimaldesign/mCSS/discussions [dist-components-min]: https://github.com/minimaldesign/mCSS/blob/main/dist/mcss.components.min.css [dist-components]: https://github.com/minimaldesign/mCSS/blob/main/dist/mcss.components.css [dist-css]: https://github.com/minimaldesign/mCSS/blob/main/dist/mcss.css @@ -523,7 +528,7 @@ If you install mCSS via the [third option above](#option-3-compiled-via-postcss) [helpers]: /docs/helpers [uiTokens]: /docs/tokens#ui-tokens [layers]: /blog/what-is-itcss#the-layers-of-itcss -[mcss-layers]: /docs/start#the-layers-in-order +[mcss-layers]: /docs/start#the-layers [layout]: /docs/global#layouts [postcss-post]: /blog/postcss-setup-for-mcss [presetEnv]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-preset-env From 341d52d64ef8e7d8daf69b4cf68939506ac16f1b Mon Sep 17 00:00:00 2001 From: Yann Date: Sun, 16 Aug 2026 14:01:00 -0700 Subject: [PATCH 19/37] =?UTF-8?q?skin=20=E2=86=92=20theme?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dist/css/mcss.css | 2 +- dist/css/theme.starter.css | 2 +- dist/css/theme.wireframe.css | 6 +++--- src/content/docs/ai.mdx | 2 +- src/content/docs/start.mdx | 2 +- src/content/docs/themes.mdx | 4 ++-- src/styles/framework/theme.starter.css | 2 +- src/styles/framework/theme.wireframe.css | 6 +++--- src/tools/build-css.mjs | 8 ++++---- 9 files changed, 17 insertions(+), 17 deletions(-) diff --git a/dist/css/mcss.css b/dist/css/mcss.css index d63ebca0..55bc0f55 100644 --- a/dist/css/mcss.css +++ b/dist/css/mcss.css @@ -43,7 +43,7 @@ /* @import url(./theme.default.tokens.css); */ /* imported by theme.default.css */ /* @import url(./theme.default.ui.css); */ /* imported by theme.default.css */ /* @import url(./theme.starter.css); */ /* your theme's starting point: keep the default active */ -/* @import url(./theme.wireframe.css); */ /* full skin: use instead of the default (it imports it itself) */ +/* @import url(./theme.wireframe.css); */ /* full theme: use instead of the default (it imports it itself) */ @import url(./help.colors.css) layer(helpers); @import url(./help.devtools.css) layer(helpers); @import url(./help.layout.css) layer(helpers); diff --git a/dist/css/theme.starter.css b/dist/css/theme.starter.css index 908f2afd..2a75fd9b 100644 --- a/dist/css/theme.starter.css +++ b/dist/css/theme.starter.css @@ -47,7 +47,7 @@ xxl: 1920px nth-child,, text-decoration, etc.) - Don't use !important. If you need to, you're doing something wrong. Email me and I'll help you out. - - For a full swappable skin, look at ` theme.wireframe.css` to see + - For a full swappable theme, look at `theme.wireframe.css` to see how it's done. */ diff --git a/dist/css/theme.wireframe.css b/dist/css/theme.wireframe.css index 8b154f21..102a4660 100644 --- a/dist/css/theme.wireframe.css +++ b/dist/css/theme.wireframe.css @@ -32,8 +32,8 @@ xxl: 1920px cards and buttons. Mostly token overrides; the style rules at the bottom cover what tokens can't express. - A full skin is an entry that composes the default theme and overrides - on top. This file contains ONLY the skin's deviations; everything it + A full theme is an entry that composes the default theme and overrides + on top. This file contains ONLY this theme's deviations; everything it doesn't mention comes from theme.default.css, which the @import below makes the browser load alongside this file. The rules here land in `theme.user`, which wins over the default theme's `theme.default` @@ -42,7 +42,7 @@ xxl: 1920px */ /* Pin the layer order before anything else in this file: priority is - set by first declaration, so this skin slots correctly even if it + set by first declaration, so this theme slots correctly even if it loads before mcss.css. */ @layer base, elements, global, components, theme.default, theme.user, external, helpers; diff --git a/src/content/docs/ai.mdx b/src/content/docs/ai.mdx index b181c0a3..74097675 100644 --- a/src/content/docs/ai.mdx +++ b/src/content/docs/ai.mdx @@ -44,7 +44,7 @@ All framework CSS lives in native cascade layers, declared in `mcss.css` in prio - `base` through `components` are the framework's structure. Never edit these files to restyle; override them from further up the order. - `theme.default` holds the default theme: every design value (scale tokens + ui tokens). Never edit it either; it is what your overrides fall back to. -- `theme.user` holds at most one theme of your own: a deliberate opinion about the defaults (copy `theme.starter.css`). A full skin like `theme.wireframe.css` is an entry that composes the default theme and overrides on top; either way, activate exactly one theme entry. +- `theme.user` holds at most one theme of your own: a deliberate opinion about the defaults (copy `theme.starter.css`). A full theme like `theme.wireframe.css` is an entry that composes the default theme and overrides on top; either way, activate exactly one theme entry. - `external` ships empty: a slot to demote third-party CSS you import yourself (`@import url(vendor.css) layer(external);`). It beats the framework but loses to all unlayered project CSS at any specificity, so vendor styles stay easy to override. Fixes to vendor CSS go in unlayered `patch.*` files (the one place allowed to select third-party classes). Vendor styles injected from JS cannot be captured this way; they stay unlayered. - Your own unlayered CSS is more deliberate still: it beats every layer, by design. Never use `!important` to win against the framework. - `helpers` (`help.*` files: spacing, color, typography utilities) are the one exception: every declaration carries `!important`, which inverts the cascade, so they beat even unlayered CSS. Use sparingly. `!important` is banned everywhere else. diff --git a/src/content/docs/start.mdx b/src/content/docs/start.mdx index c7e3c32a..3aab7925 100644 --- a/src/content/docs/start.mdx +++ b/src/content/docs/start.mdx @@ -165,7 +165,7 @@ A more common full featured setup: - HTML elements - Global styles - Components (optional) -- Themes (the default theme, and optional skins) +- Themes (the default theme, plus optional swappable themes) - Helpers **[`site/`][site-src]**: your own CSS. These files do not use CSS [layers][layers] so **understanding and using [ITCSS][1] methodology there is key**. (The [mCSS own][site-src] `/site` folder is a good reference.) diff --git a/src/content/docs/themes.mdx b/src/content/docs/themes.mdx index 54a4c840..8c841944 100644 --- a/src/content/docs/themes.mdx +++ b/src/content/docs/themes.mdx @@ -13,7 +13,7 @@ version: 1 | --------------------- | -------------------------------------------------------- | ---------------------- | | `theme.default.css` | The default theme: every design value the framework uses | [Github][srcDefault] | | `theme.starter.css` | Starter template: copy it to write your own theme | [Github][srcStarter] | -| `theme.wireframe.css` | Full swappable skin with a hand-drawn wireframe look | [Github][srcWireframe] | +| `theme.wireframe.css` | Full swappable theme with a hand-drawn wireframe look | [Github][srcWireframe] |
@@ -38,7 +38,7 @@ Activate the default theme right after the framework, then (optionally) your own @import url(./theme.acme.css); /* your theme */ ``` -A full swappable skin like the wireframe replaces the default import instead: `theme.wireframe.css` is an entry that composes `theme.default.css` itself and overrides on top, so you import it INSTEAD of the default. Either way you activate exactly one theme entry. +A full swappable theme like the wireframe replaces the default import instead: `theme.wireframe.css` is an entry that composes `theme.default.css` itself and overrides on top, so you import it INSTEAD of the default. Either way you activate exactly one theme entry. Theme files are **self-layered**, so they land in the right cascade slot no matter how you load them (plain `@import`, a `` tag on a `dist/css` file, or a bundler); no `layer()` annotation needed. The default theme's parts layer into `theme.default`, and your theme layers into `theme.user`, which comes after it: **your theme beats the default no matter the import order.** Both sit after `components` and before `helpers`, so any theme beats the framework's structure but still loses to your own unlayered CSS and to [helpers](/docs/helpers). The layer order runs from default to deliberate: the framework's layers and the default theme are what things look like when nobody has an opinion, your theme is a deliberate opinion about those defaults, and your unlayered CSS is more deliberate still. diff --git a/src/styles/framework/theme.starter.css b/src/styles/framework/theme.starter.css index 13150811..8fdac0eb 100644 --- a/src/styles/framework/theme.starter.css +++ b/src/styles/framework/theme.starter.css @@ -21,7 +21,7 @@ nth-child,, text-decoration, etc.) - Don't use !important. If you need to, you're doing something wrong. Email me and I'll help you out. - - For a full swappable skin, look at ` theme.wireframe.css` to see + - For a full swappable theme, look at `theme.wireframe.css` to see how it's done. */ diff --git a/src/styles/framework/theme.wireframe.css b/src/styles/framework/theme.wireframe.css index d204b18d..f4dff00b 100644 --- a/src/styles/framework/theme.wireframe.css +++ b/src/styles/framework/theme.wireframe.css @@ -6,8 +6,8 @@ cards and buttons. Mostly token overrides; the style rules at the bottom cover what tokens can't express. - A full skin is an entry that composes the default theme and overrides - on top. This file contains ONLY the skin's deviations; everything it + A full theme is an entry that composes the default theme and overrides + on top. This file contains ONLY this theme's deviations; everything it doesn't mention comes from theme.default.css, which the @import below makes the browser load alongside this file. The rules here land in `theme.user`, which wins over the default theme's `theme.default` @@ -16,7 +16,7 @@ */ /* Pin the layer order before anything else in this file: priority is - set by first declaration, so this skin slots correctly even if it + set by first declaration, so this theme slots correctly even if it loads before mcss.css. */ @layer base, elements, global, components, theme.default, theme.user, external, helpers; diff --git a/src/tools/build-css.mjs b/src/tools/build-css.mjs index 0dc72a2e..93f7c3cc 100644 --- a/src/tools/build-css.mjs +++ b/src/tools/build-css.mjs @@ -129,7 +129,7 @@ const settingsPrelude = [ // The index reads best in cascade-layer order (matching the layer // statement), alphabetical within each layer. Theme files split in two: // the default theme and its parts (theme.default slot), then the starter -// and skins (theme.user slot). theme.default.css sorts before its parts +// and full themes (theme.user slot). theme.default.css sorts before its parts // alphabetically, keeping the active import first. const LAYER_RANK = { base: 0, @@ -162,12 +162,12 @@ for (const file of files) { // Prepend the build-time settings so @custom-media/@mixin resolve, then // wrap the file's own rules in its layer. preset-env removes the // @custom-media definitions from the output. Standalone theme files - // (starter, skins) self-layer, so they're not re-wrapped; the default + // (starter, full themes) self-layer, so they're not re-wrapped; the default // theme's parts are plain CSS layered by their entry in source, so the // dist copies get wrapped here so a lone still slots correctly. // In the index the default theme import is active (the framework // doesn't paint without a theme); other theme entries are commented. - // Skins genuinely replace the default import (they compose the default + // Full themes genuinely replace the default import (they compose the default // themselves); the starter doesn't: it's imported after the default, // which stays active. const importsOnly = file === "theme.default.css"; @@ -189,7 +189,7 @@ for (const file of files) { : selfLayered ? file === "theme.starter.css" ? `/* @import url(./${file}); */ /* your theme's starting point: keep the default active */` - : `/* @import url(./${file}); */ /* full skin: use instead of the default (it imports it itself) */` + : `/* @import url(./${file}); */ /* full theme: use instead of the default (it imports it itself) */` : `@import url(./${file}) layer(${layer});`, ); } From 7f9021c821e0b0ba93ac9b12424515811cb3ce3d Mon Sep 17 00:00:00 2001 From: Yann Date: Sun, 16 Aug 2026 16:45:15 -0700 Subject: [PATCH 20/37] restructuring of the docs --- astro.config.mjs | 19 +- public/_redirects | 33 +++ src/components/NavDocs.astro | 2 +- src/components/SiteFooter.astro | 6 +- src/components/SiteHeader.astro | 2 +- .../blog/component-system-that-scales.md | 4 +- src/content/blog/css-select-mask-styling.mdx | 4 +- src/content/blog/mcss-v.1.0.md | 2 +- src/content/blog/postcss-setup-for-mcss.mdx | 6 +- src/content/components/avatar.mdx | 2 +- src/content/components/badge.mdx | 2 +- src/content/components/banner.mdx | 2 +- src/content/components/breadcrumbs.mdx | 4 +- src/content/components/button.mdx | 2 +- src/content/components/card.mdx | 4 +- src/content/components/featuregrid.mdx | 2 +- src/content/components/field.mdx | 4 +- src/content/components/footer.mdx | 4 +- src/content/components/header.mdx | 2 +- src/content/components/hero.mdx | 2 +- src/content/components/notice.mdx | 2 +- src/content/components/pricing.mdx | 2 +- src/content/components/readprogressbar.mdx | 2 +- src/content/components/section.mdx | 6 +- src/content/components/start.mdx | 68 +++++- src/content/components/tags.mdx | 2 +- src/content/components/testimonial.mdx | 2 +- src/content/components/tiles.mdx | 6 +- src/content/components/toc.mdx | 2 +- src/content/docs/browser-support.mdx | 17 ++ .../docs/{elements.mdx => default-html.mdx} | 35 +++- .../docs/{tokens.mdx => default-theme.mdx} | 106 +++++++++- src/content/docs/helpers.mdx | 12 +- src/content/docs/installation.mdx | 154 ++++++++++++++ src/content/docs/{global.mdx => layout.mdx} | 198 +++++++++++++++++- src/content/docs/media-queries.mdx | 183 ---------------- src/content/docs/reset.mdx | 31 --- src/content/docs/start.mdx | 164 +-------------- src/content/docs/template.mdx | 70 ------- src/content/docs/themes.mdx | 100 --------- src/data/docsNav.js | 20 +- src/pages/llms.txt.js | 2 +- src/tools/check-layers.mjs | 2 +- 43 files changed, 665 insertions(+), 629 deletions(-) create mode 100644 public/_redirects create mode 100644 src/content/docs/browser-support.mdx rename src/content/docs/{elements.mdx => default-html.mdx} (94%) rename src/content/docs/{tokens.mdx => default-theme.mdx} (67%) create mode 100644 src/content/docs/installation.mdx rename src/content/docs/{global.mdx => layout.mdx} (67%) delete mode 100644 src/content/docs/media-queries.mdx delete mode 100644 src/content/docs/reset.mdx delete mode 100644 src/content/docs/template.mdx delete mode 100644 src/content/docs/themes.mdx diff --git a/astro.config.mjs b/astro.config.mjs index 8223deb3..7c457e8e 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -8,7 +8,8 @@ import tunnel from "astro-tunnel"; import expressiveCode from "astro-expressive-code"; // astro-tunnel is a dev-only tool; keep it out of production builds -const isDev = process.env.NODE_ENV !== "production" && process.argv.includes("dev"); +const isDev = + process.env.NODE_ENV !== "production" && process.argv.includes("dev"); // https://astro.build/config export default defineConfig({ @@ -16,20 +17,14 @@ export default defineConfig({ // dist/ is reserved for the framework CSS artifact (npm run build:css); // the hosting platform's publish directory must point at _site/ outDir: "./_site", - redirects: { - // slug lowercased for consistency with the other component docs - "/components/ReadProgressBar": "/components/readprogressbar", - // the template docs page moved from the components collection to docs - "/components/template": "/docs/template", - // tags pages moved under /blog so the Blog nav item highlights on them - "/tags": "/blog/tags", - "/tags/[tag]": "/blog/tags/[tag]", - }, + // Redirects live in public/_redirects (Netlify edge, real 301s), not + // here: Astro config redirects emit meta-refresh HTML stubs that shadow + // the Netlify rules and that non-browser clients don't follow. integrations: [ preact(), sitemap({ - // keep the meta-refresh stubs at /tags/* and the bare demo pages out - filter: (page) => !page.startsWith("https://mcss.dev/tags/") && !page.startsWith("https://mcss.dev/demos/"), + // keep the bare demo pages out + filter: (page) => !page.startsWith("https://mcss.dev/demos/"), }), expressiveCode({ themes: ["github-dark"], // Theme also needs to be imported in shikiHighlighter.js diff --git a/public/_redirects b/public/_redirects new file mode 100644 index 00000000..6a945f41 --- /dev/null +++ b/public/_redirects @@ -0,0 +1,33 @@ +# Netlify edge redirects: real HTTP 301s, so they work for every client +# (browsers, curl, AI agents fetching the .md twins), not just HTML pages. +# Do NOT also add a rule's source path to astro.config.mjs `redirects`: +# Astro would emit a stub file at that path, and Netlify serves an existing +# file instead of applying the redirect. + +# Slug lowercased for consistency with the other component docs +/components/ReadProgressBar /components/readprogressbar 301 + +# The template docs page moved twice: components collection -> docs -> +# a section of the component library's start page (docs restructure) +/components/template /components/start#marketing-template 301 + +# Tags pages moved under /blog so the Blog nav item highlights on them +/tags /blog/tags 301 +/tags/* /blog/tags/:splat 301 + +# Docs restructure (2026-08-16): pages merged or split. The .md twins are +# separate routes fetched cold by AI agents, so each gets its own rule. +/docs/tokens /docs/default-theme 301 +/docs/tokens.md /docs/default-theme.md 301 +/docs/themes /docs/default-theme 301 +/docs/themes.md /docs/default-theme.md 301 +/docs/reset /docs/default-html 301 +/docs/reset.md /docs/default-html.md 301 +/docs/elements /docs/default-html 301 +/docs/elements.md /docs/default-html.md 301 +/docs/global /docs/layout 301 +/docs/global.md /docs/layout.md 301 +/docs/media-queries /docs/layout 301 +/docs/media-queries.md /docs/layout.md 301 +/docs/template /components/start#marketing-template 301 +/docs/template.md /components/start.md 301 diff --git a/src/components/NavDocs.astro b/src/components/NavDocs.astro index 4b92c2b2..f2b7a591 100644 --- a/src/components/NavDocs.astro +++ b/src/components/NavDocs.astro @@ -11,7 +11,7 @@ const currentPath = pathname.split('/')[2]; // pathname starts with '/' { docsNavItems.map((page) => (
  • - + {page.title} diff --git a/src/components/SiteFooter.astro b/src/components/SiteFooter.astro index c6cb8251..22ca070e 100644 --- a/src/components/SiteFooter.astro +++ b/src/components/SiteFooter.astro @@ -13,9 +13,9 @@ import { VERSION } from '../scripts/globals';

    Documentation

    diff --git a/src/components/SiteHeader.astro b/src/components/SiteHeader.astro index d80e3dcb..34d570c3 100644 --- a/src/components/SiteHeader.astro +++ b/src/components/SiteHeader.astro @@ -15,7 +15,7 @@ const navItems: NavItem[] = [ { label: 'Docs', href: '/docs/start', - children: docsNavItems.map((page) => ({ label: page.title, href: `/docs/${page.id}` })), + children: docsNavItems.map((page) => ({ label: page.title, href: page.href ?? `/docs/${page.id}` })), }, { label: 'Components', diff --git a/src/content/blog/component-system-that-scales.md b/src/content/blog/component-system-that-scales.md index 81cc4090..203cbb27 100644 --- a/src/content/blog/component-system-that-scales.md +++ b/src/content/blog/component-system-that-scales.md @@ -88,7 +88,7 @@ Same result, radically different dependency graph. `component.card.css` is once ### Tokens -mCSS components expose their look through [tokens](/docs/tokens). So if the token exists, you can set the component's styling without targeting any element at all: +mCSS components expose their look through [tokens](/docs/default-theme). So if the token exists, you can set the component's styling without targeting any element at all: ```css /* component.pricing.css */ @@ -118,7 +118,7 @@ Same pattern, delivered by prop instead of typed by hand. Sometimes the component has no token and no `Class` prop for what you're after. The answer is still not a descendant selector, nor editing the framework files. You own your copy of mCSS, so you _can_ edit the framework files if you really want to, but I'd recommend these options instead: -1. Override it from your [theme](/docs/themes). The recommended way to override framework classes. +1. Override it from your [theme](/docs/default-theme). The recommended way to override framework classes. 2. Override it through classes you mix on from your own `site/` CSS, as above. 3. If the component genuinely fights what you need, stop bending it: build your own site component and use that instead. A `component.planCard.css` you fully own beats a framework card held together with exceptions. diff --git a/src/content/blog/css-select-mask-styling.mdx b/src/content/blog/css-select-mask-styling.mdx index 900225dd..e3f72c63 100644 --- a/src/content/blog/css-select-mask-styling.mdx +++ b/src/content/blog/css-select-mask-styling.mdx @@ -27,7 +27,7 @@ Custom `` elements the old way, which _should_ be simple but never is… The common workarounds are clunky and usually require an extra wrapper. I really wanted [mCSS HTML elements](/docs/elements#form) to be customizable out of the box, without extra markup. Here were my requirements: +In the meantime, we're stuck with styling ``. 2. Custom "chevron" icon that matches the text color in light/dark themes. @@ -60,7 +60,7 @@ The two values used here: ### The result -Here's how it looks like (more [examples in mCSS docs](/docs/elements#form)): +Here's how it looks like (more [examples in mCSS docs](/docs/default-html#form)):