From 6d9aa4c45c8ffe83a3616def6e2f992806f64de4 Mon Sep 17 00:00:00 2001 From: Yann Date: Fri, 24 Jul 2026 17:31:04 -0700 Subject: [PATCH 1/6] remove useless animations --- src/styles/site/page.home.css | 78 ++++++++--------------------------- 1 file changed, 18 insertions(+), 60 deletions(-) diff --git a/src/styles/site/page.home.css b/src/styles/site/page.home.css index 3b6e197..24e64f0 100644 --- a/src/styles/site/page.home.css +++ b/src/styles/site/page.home.css @@ -1,13 +1,5 @@ /* HOMEPAGE */ -/* - The homepage is the first template demo: every section is built from the v1 - library (Section, Tiles, Card, Field, badges) plus the page styles - below. Section numbers (§1 to §9) reference mcss-homepage-content-map.md. -*/ - -/* Poster-grade vertical rhythm (denser than the docs pages). - Mixed onto every Section instance in index.astro. */ .home_section { --section-spacing: var(--xl1); /* Mobile gutters match the footer's (24px) so every section aligns */ @@ -17,7 +9,7 @@ } } -/* §3 to §6: narrow header, wide content. These blocks escape the wrap +/* 3 to 6: narrow header, wide content. These blocks escape the wrap column and center at up to 1150px. */ .home_pillars, .home_showcase_grid, @@ -27,32 +19,12 @@ width: 100%; max-width: 1150px; margin-inline: auto; - /* Same gutters as the footer at every width */ + /* Same gutters as the footer */ padding-left: var(--sm3); padding-right: var(--sm3); } -/* Scroll reveal: one effect, used consistently (section headers get it via - Section's headerClass prop). Decoration only; browsers without - scroll-driven animations simply show the content. */ -@media (--motionOK) { - @supports (animation-timeline: view()) { - .home_reveal { - animation: home_reveal linear both; - animation-timeline: view(); - animation-range: entry 10% entry 40%; - } - } -} - -@keyframes home_reveal { - from { - opacity: 0; - transform: translateY(12px); - } -} - -/* §1 HERO */ +/* 1 HERO */ .home_hero { display: grid; @@ -173,7 +145,7 @@ } } -/* §1 THE CODE MORPH */ +/* 1 THE CODE MORPH */ /* Animated character counter (219 to 54). The unregistered fallback below keeps the number correct in engines without @property (it just steps @@ -199,8 +171,7 @@ } } -/* The editor fakes Shiki's github-dark (colors below match the theme the §5 - panes get from the real Shiki), in both site themes */ +/* The editor fakes Shiki's github-dark in both site themes */ .home_morph_editor { margin: 0; padding: var(--sm3); @@ -208,7 +179,6 @@ border: var(--border-sm) solid rgb(255 255 255 / 0.12); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); - animation: morphFade var(--morph-duration) linear infinite; } .home_morph_chrome { @@ -227,10 +197,9 @@ } } -/* Both morph states share one grid cell; the hidden sizer (full "before" - text) reserves that state's height at every width, so CLS is ~0 */ .home_morph_frame { display: grid; + animation: morphFade var(--morph-duration) linear infinite; > pre { grid-area: 1 / 1; @@ -313,6 +282,7 @@ font-variant-numeric: tabular-nums; text-align: right; color: #8b949e; + animation: morphFade var(--morph-duration) linear infinite; } .home_morph_count { @@ -376,20 +346,18 @@ color: light-dark(var(--base-500), var(--base-400)); } -/* Hovering the editor pauses the loop (no focusables inside; keyboard users - get the replay button) */ -.home_morph_editor:hover, -.home_morph_editor:hover :is(.home_morph_g, .home_morph_after, .home_morph_count) { +.home_morph_editor:hover :is(.home_morph_frame, .home_morph_counter, .home_morph_g, .home_morph_after, .home_morph_count) { animation-play-state: paused; } /* Replay: the page script toggles this class to restart every animation */ -.home_morph.is-resetting :is(.home_morph_editor, .home_morph_g, .home_morph_after, .home_morph_count) { +.home_morph.is-resetting :is(.home_morph_frame, .home_morph_counter, .home_morph_g, .home_morph_after, .home_morph_count) { animation-name: none; } @media (--motionNotOK) { - .home_morph_editor, + .home_morph_frame, + .home_morph_counter, .home_morph_g, .home_morph_after, .home_morph_count { @@ -549,7 +517,7 @@ 96.5%, 100% { --morph-n: 219; } } -/* §2 PROOF STRIP */ +/* 2 PROOF STRIP */ .home_proof { --section-spacing: var(--xl1); @@ -599,13 +567,10 @@ } } -/* §3 PHILOSOPHY */ +/* 3 PHILOSOPHY */ /* prettier-ignore */ .home_pillars { - /* Three pillars: 1-up then exactly 3-up, skipping the Tiles 2-up step - (3 items in 2 columns leaves an orphan). Viewport query on purpose: - the homepage has no container ancestor for the Tiles thresholds. */ --tiles-columns: 1; @media (--md) { --tiles-columns: 3; @@ -627,10 +592,6 @@ font-size: var(--text-xl); } -/* Large flat illustrations instead of the 48px icon box. Every SVG draws - on a 140-unit-tall viewBox with matching margins, so all three render - at the same height and the box hugs the artwork (the brackets one is - wider by design), which keeps them easy to align anywhere */ .home_pillar_icon { width: fit-content; height: 90px; @@ -644,11 +605,9 @@ } } -/* §4 MODERN CSS SHOWCASE */ +/* 4 MODERN CSS SHOWCASE */ .home_showcase_grid { - /* margin-block and padding-block only: the shared wide rule above owns - margin-inline: auto and the inline padding */ margin-block: 0; padding-block: 0; list-style: none; @@ -706,7 +665,7 @@ color: light-dark(var(--base-500), var(--base-400)); } -/* §5 THEMING DEMO */ +/* 5 THEMING DEMO */ .home_themer_switcher { display: flex; @@ -844,7 +803,6 @@ display: block; } -/* Desktop: diff always visible. Mobile: collapsed details (same panes). */ .home_themer_diff { display: none; @media (--lg) { @@ -874,7 +832,7 @@ color: light-dark(var(--base-500), var(--base-400)); } -/* §6 COMPONENT GALLERY */ +/* 6 COMPONENT GALLERY */ .home_gallery_grid { display: grid; @@ -964,7 +922,7 @@ } } -/* §7 OWNERSHIP: the exhale before the CTA */ +/* 7 OWNERSHIP: the exhale before the CTA */ .home_own { --section-spacing: var(--xl1); @@ -1007,7 +965,7 @@ } } -/* §8 FINAL CTA: full-bleed #2, the second and last gradient */ +/* 8 FINAL CTA */ .home_cta { --section-spacing: var(--xl2); From 1431e91ef2aef08d9da93a77e1aa1f03fbe791b2 Mon Sep 17 00:00:00 2001 From: Yann Date: Fri, 24 Jul 2026 17:31:42 -0700 Subject: [PATCH 2/6] put the actual gzip size instead of hard coding it --- src/pages/index.astro | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/src/pages/index.astro b/src/pages/index.astro index b4e04ea..f65b806 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -15,6 +15,10 @@ import Pagination from '../components/Pagination.astro'; import CopyButton from '../components/_CopyButton.jsx'; import BaselineBadge from '../components/_BaselineBadge.astro'; +import { gzipSync } from 'node:zlib'; + +import mcssMinCss from '../../dist/mcss.min.css?raw'; + import githubIcon from '../assets/icons/social-github.svg?raw'; import replayIcon from '../assets/icons/rotate-ccw.svg?raw'; import arrowIcon from '../assets/icons/arrow-right.svg?raw'; @@ -24,6 +28,12 @@ const description = 'mCSS is a modern CSS framework and Astro component library const installSnippet = ''; +// The size claim in §2 is measured, not remembered: gzip the file people +// actually download, at build time, so it can never drift from the framework. +// Rounded to whole KB, and kept behind a "~" since a host's own gzip level +// (and brotli, which does better) moves the last few hundred bytes. +const mcssMinGzipKb = Math.round(gzipSync(mcssMinCss).length / 1024); + // §5 diff panes, rendered with Shiki (github-dark) at build time. // Each list matches the overrides in page.home.css line for line. const themeDiffs = { @@ -151,7 +161,7 @@ const themeDiffs = { That’s the install. Download dist/mcss.min.css or copy the source files. Every modern browser understands them as-is: no compiler, no config, no node_modules.

@@ -217,9 +227,9 @@ const themeDiffs = {
  • -

    Scroll-driven animations

    -

    The reading progress bar on this very site: pure CSS in modern browsers, a graceful fallback elsewhere.

    - +

    @container

    +

    The tiles further up this page count their columns from the space they’re given, not from your window. Same list in a sidebar, fewer columns, no media query.

    +

  • Three-tier tokens

    From 5881899096d4049cc3d8b8b7f6bfae9caece43a8 Mon Sep 17 00:00:00 2001 From: Yann Date: Sun, 26 Jul 2026 23:02:25 -0700 Subject: [PATCH 3/6] Split core and component library into separate bundles --- .github/workflows/ci.yml | 12 +- CHANGELOG.md | 12 + README.md | 2 +- agents/css.md | 8 +- agents/structure.md | 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 | 2 +- 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 | 2 +- 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 | 2 +- dist/css/settings.tokens.css | 2 +- dist/css/settings.ui.css | 2 +- dist/css/theme.default.css | 2 +- dist/css/theme.wireframe.css | 2 +- dist/mcss.components.css | 1908 ++++++++++++++++++++++ dist/mcss.components.min.css | 2 + dist/mcss.css | 1875 +-------------------- dist/mcss.min.css | 4 +- package.json | 2 +- src/content/components/start.mdx | 4 +- src/content/docs/ai.mdx | 4 +- src/content/docs/start.mdx | 22 +- src/content/docs/template.mdx | 2 +- src/content/docs/themes.mdx | 1 + src/pages/index.astro | 89 +- src/pages/llms.txt.js | 2 +- src/styles/_global.css | 2 + src/styles/framework/mcss.components.css | 42 + src/styles/framework/mcss.css | 33 +- src/styles/site/page.home.css | 9 +- src/tools/build-css.mjs | 56 +- 73 files changed, 2162 insertions(+), 2036 deletions(-) create mode 100644 dist/mcss.components.css create mode 100644 dist/mcss.components.min.css create mode 100644 src/styles/framework/mcss.components.css diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 42b049e..3e8497c 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -42,9 +42,14 @@ jobs: # layers survived the build (the preset-env polyfill must stay off) grep -q '@layer settings, base, elements, global, components, theme, helpers;' dist/mcss.css ! grep -q ':not(#' dist/mcss.css - # the bundle ships zero-opinion: no theme content in mcss.css - # ('@layer theme' appears in a comment; check real block syntax) + # the bundle ships zero-opinion: no theme or component content in + # mcss.css ('@layer theme'/'@layer components' appear in comments; + # check real block syntax) ! grep -q '@layer theme {' dist/mcss.css + ! grep -q '@layer components {' dist/mcss.css + # the component library lives in its own bundle + grep -q '@layer components {' dist/mcss.components.css + ! grep -q '@layer theme {' dist/mcss.components.css # per-file themes self-layer so any import method lands them right grep -q '@layer theme {' dist/css/theme.wireframe.css grep -q '@layer theme {' dist/css/theme.default.css @@ -52,5 +57,8 @@ jobs: # (plain '@custom-media' appears in a comment; check real syntax) ! grep -qE '@custom-media --|media \(--' dist/mcss.css ! grep -q '@define-mixin' dist/mcss.css + ! grep -qE '@custom-media --|media \(--' dist/mcss.components.css + ! grep -q '@define-mixin' dist/mcss.components.css # no asset-path coupling ! grep -q 'assets/icons' dist/mcss.css + ! grep -q 'assets/icons' dist/mcss.components.css diff --git a/CHANGELOG.md b/CHANGELOG.md index a99826f..065283b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,18 @@ All notable changes to mCSS. The framework follows the copy-it-you-own-it model: there is no package to update, so version numbers mark states of the repository you can copy from (each release is also a git tag). +## 1.2.0 (2026-07-26) + +Core and components split: the drop-in framework file no longer bundles the component library, so sites that build their own components stop paying for it. + +### Added + +- **`mcss.components.css`**: the component library now has its own entry file. All 25 `component.*.css` files import there (wrapped in `@layer components`), and `dist/` gains the matching drop-ins `mcss.components.css` / `mcss.components.min.css` (~5 KB min+gzip). Import it alongside `mcss.css`, in either order: the layer statement in `mcss.css` decides priority, exactly like the existing `theme` slot. + +### Breaking + +- **`dist/mcss.css` / `dist/mcss.min.css` are now the framework core only** (~17 KB min+gzip): settings, base, elements, global, and helpers, plus the empty `components` and `theme` layer slots. If you use the component library, add `dist/mcss.components.min.css` next to it. Source consumers: `framework/mcss.css` no longer imports `component.*.css`; import `framework/mcss.components.css` from your entry too (see `_global.css`). + ## 1.1.0 (2026-07-24) Tiles: one container-responsive list component replacing CardList and FeatureGrid. diff --git a/README.md b/README.md index 51e736a..b60407e 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ The library for CSS lovers. -Current version: **1.0.0** ([changelog](CHANGELOG.md)). Copy it, own it: grab [`dist/mcss.css`](dist/mcss.css) or the [source files](src/styles/framework), no package manager involved. +Current version: **1.2.0** ([changelog](CHANGELOG.md)). Copy it, own it: grab [`dist/mcss.css`](dist/mcss.css) (plus [`dist/mcss.components.css`](dist/mcss.components.css) if you want the component library) or the [source files](src/styles/framework), no package manager involved. ## Learn diff --git a/agents/css.md b/agents/css.md index f9e833f..69fa6e4 100644 --- a/agents/css.md +++ b/agents/css.md @@ -2,9 +2,9 @@ mCSS uses **native CSS cascade layers** (`@layer`) on top of an ITCSS-inspired file structure. The framework and the docs site are split: -- **`src/styles/framework/`** — the mCSS framework. Entry point `framework/mcss.css` declares the layer order and imports every framework file into its named layer. **The layer name, not import order, decides cascade priority.** +- **`src/styles/framework/`** — the mCSS framework. Entry point `framework/mcss.css` declares the layer order and imports every core framework file into its named layer; the component library imports via its own entry, `framework/mcss.components.css` (the `components` slot is declared by `mcss.css` but filled only when the consumer imports the second entry, mirroring the `theme` slot). **The layer name, not import order, decides cascade priority.** - **`src/styles/site/`** — docs-site-only CSS (site chrome, internal components, page styles, third-party overrides). Imported **unlayered** by `src/styles/_global.css`, after the framework. -- **`src/styles/_global.css`** — the site entry point (imported by `BaseLayout`/`DemoLayout`): framework first, then unlayered site files. +- **`src/styles/_global.css`** — the site entry point (imported by `BaseLayout`/`DemoLayout`): framework first (both entries: `mcss.css`, then `mcss.components.css`), then unlayered site files. ## Cascade rules (load-bearing) @@ -25,7 +25,7 @@ mCSS uses **native CSS cascade layers** (`@layer`) on top of an ITCSS-inspired f | 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) | +| 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 | @@ -84,7 +84,7 @@ Never `transition: all` — it also transitions layout properties, so any late-a ## Adding Styles - **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`. +- 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). - 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/agents/structure.md b/agents/structure.md index 49f4884..d47688a 100644 --- a/agents/structure.md +++ b/agents/structure.md @@ -14,7 +14,8 @@ src/ layouts/ Page wrappers (BaseLayout, BlogPostLayout, DocsPostLayout, DocsComponentsLayout, DemoLayout) styles/ All CSS (see agents/css.md) - framework/ The mCSS framework (cascade layers, entry: mcss.css) + framework/ The mCSS framework (cascade layers, entries: mcss.css for + the core, mcss.components.css for the component library) site/ Docs-site-only CSS (unlayered) assets/ Images, icons (assets/icons/), component assets (assets/ui/) data/ Shared static config/data arrays (e.g. docsNav.js) @@ -28,7 +29,7 @@ src/ | --------------------- | --------------------------------- | ----------------------------------------------------------------------- | | New page route | `src/pages/` | — | | New reusable UI | `src/components/` | If it needs CSS: add `component..css` (see rows below) | -| New library component style | `src/styles/framework/component..css` | Import with `layer(components)` in `framework/mcss.css` | +| New library component style | `src/styles/framework/component..css` | Import with `layer(components)` in `framework/mcss.components.css` (never in `mcss.css`) | | New site-only style | `src/styles/site/..css` | Import (unlayered) in `_global.css` | | New blog post | `src/content/blog/` | Match schema (see agents/content.md) | | New doc page | `src/content/docs/` | Match schema (see agents/content.md) | diff --git a/dist/css/base.reset.css b/dist/css/base.reset.css index b99069a..6dbc6a9 100644 --- a/dist/css/base.reset.css +++ b/dist/css/base.reset.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/component.avatar.css b/dist/css/component.avatar.css index 44b8fe5..fc6132c 100644 --- a/dist/css/component.avatar.css +++ b/dist/css/component.avatar.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/component.badge.css b/dist/css/component.badge.css index 8133633..69861cc 100644 --- a/dist/css/component.badge.css +++ b/dist/css/component.badge.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/component.banner.css b/dist/css/component.banner.css index 3c72fae..299c8d2 100644 --- a/dist/css/component.banner.css +++ b/dist/css/component.banner.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/component.breadcrumbs.css b/dist/css/component.breadcrumbs.css index 64bc89b..42c5ffe 100644 --- a/dist/css/component.breadcrumbs.css +++ b/dist/css/component.breadcrumbs.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/component.button.css b/dist/css/component.button.css index 2f6424d..fc03dbc 100644 --- a/dist/css/component.button.css +++ b/dist/css/component.button.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/component.card.css b/dist/css/component.card.css index abd7cc8..c1e9960 100644 --- a/dist/css/component.card.css +++ b/dist/css/component.card.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/component.faq.css b/dist/css/component.faq.css index ff81b97..08b1f9f 100644 --- a/dist/css/component.faq.css +++ b/dist/css/component.faq.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/component.featureItem.css b/dist/css/component.featureItem.css index 3842c5d..02701a0 100644 --- a/dist/css/component.featureItem.css +++ b/dist/css/component.featureItem.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/component.field.css b/dist/css/component.field.css index 401e387..bfd5781 100644 --- a/dist/css/component.field.css +++ b/dist/css/component.field.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/component.fieldRow.css b/dist/css/component.fieldRow.css index 427cab1..b868e88 100644 --- a/dist/css/component.fieldRow.css +++ b/dist/css/component.fieldRow.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/component.footer.css b/dist/css/component.footer.css index eeb8b5d..0645ae5 100644 --- a/dist/css/component.footer.css +++ b/dist/css/component.footer.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/component.header.css b/dist/css/component.header.css index 4d2b6ae..5523653 100644 --- a/dist/css/component.header.css +++ b/dist/css/component.header.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/component.hero.css b/dist/css/component.hero.css index 1d75b8f..4861a6c 100644 --- a/dist/css/component.hero.css +++ b/dist/css/component.hero.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/component.notice.css b/dist/css/component.notice.css index c3e47cd..a999f91 100644 --- a/dist/css/component.notice.css +++ b/dist/css/component.notice.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/component.pagination.css b/dist/css/component.pagination.css index 387165c..a17216c 100644 --- a/dist/css/component.pagination.css +++ b/dist/css/component.pagination.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/component.prevNext.css b/dist/css/component.prevNext.css index af3a996..c1d080c 100644 --- a/dist/css/component.prevNext.css +++ b/dist/css/component.prevNext.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/component.pricing.css b/dist/css/component.pricing.css index caedc81..7821924 100644 --- a/dist/css/component.pricing.css +++ b/dist/css/component.pricing.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/component.readProgressBar.css b/dist/css/component.readProgressBar.css index fc793a5..ab90813 100644 --- a/dist/css/component.readProgressBar.css +++ b/dist/css/component.readProgressBar.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/component.section.css b/dist/css/component.section.css index 00e13ed..c4459e4 100644 --- a/dist/css/component.section.css +++ b/dist/css/component.section.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/component.socialMedia.css b/dist/css/component.socialMedia.css index 3b65f8e..23a2236 100644 --- a/dist/css/component.socialMedia.css +++ b/dist/css/component.socialMedia.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/component.tags.css b/dist/css/component.tags.css index 3d99574..6843a11 100644 --- a/dist/css/component.tags.css +++ b/dist/css/component.tags.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/component.testimonial.css b/dist/css/component.testimonial.css index 22cd8fa..4274929 100644 --- a/dist/css/component.testimonial.css +++ b/dist/css/component.testimonial.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/component.tiles.css b/dist/css/component.tiles.css index c34cc58..a0b23dc 100644 --- a/dist/css/component.tiles.css +++ b/dist/css/component.tiles.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/component.toc.css b/dist/css/component.toc.css index 16b8dee..19ca06e 100644 --- a/dist/css/component.toc.css +++ b/dist/css/component.toc.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/component.toggle.css b/dist/css/component.toggle.css index b9f848f..3cc64f4 100644 --- a/dist/css/component.toggle.css +++ b/dist/css/component.toggle.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/elements.form.css b/dist/css/elements.form.css index 1ba9e0c..0a05e7d 100644 --- a/dist/css/elements.form.css +++ b/dist/css/elements.form.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/elements.interactive.css b/dist/css/elements.interactive.css index 3bb314d..05d07ac 100644 --- a/dist/css/elements.interactive.css +++ b/dist/css/elements.interactive.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/elements.media.css b/dist/css/elements.media.css index f91cb4a..fda7498 100644 --- a/dist/css/elements.media.css +++ b/dist/css/elements.media.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/elements.sectioning.css b/dist/css/elements.sectioning.css index 86d335d..2b0ee92 100644 --- a/dist/css/elements.sectioning.css +++ b/dist/css/elements.sectioning.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/elements.table.css b/dist/css/elements.table.css index a086df1..06a0516 100644 --- a/dist/css/elements.table.css +++ b/dist/css/elements.table.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/elements.text.css b/dist/css/elements.text.css index 8e9a29d..7429e65 100644 --- a/dist/css/elements.text.css +++ b/dist/css/elements.text.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/elements.text.quotes.css b/dist/css/elements.text.quotes.css index b129c9f..814c944 100644 --- a/dist/css/elements.text.quotes.css +++ b/dist/css/elements.text.quotes.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/global.a11y.css b/dist/css/global.a11y.css index d951a68..9aaf181 100644 --- a/dist/css/global.a11y.css +++ b/dist/css/global.a11y.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/global.animation.css b/dist/css/global.animation.css index 646de74..919a948 100644 --- a/dist/css/global.animation.css +++ b/dist/css/global.animation.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/global.grid.css b/dist/css/global.grid.css index e4114be..a645fab 100644 --- a/dist/css/global.grid.css +++ b/dist/css/global.grid.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/global.layout.css b/dist/css/global.layout.css index 6b29b61..f6066fe 100644 --- a/dist/css/global.layout.css +++ b/dist/css/global.layout.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/global.prose.css b/dist/css/global.prose.css index 0f90064..d95a659 100644 --- a/dist/css/global.prose.css +++ b/dist/css/global.prose.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/global.wrap.css b/dist/css/global.wrap.css index 2ad5443..1e85bda 100644 --- a/dist/css/global.wrap.css +++ b/dist/css/global.wrap.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/help.colors.css b/dist/css/help.colors.css index 62e22fe..c947b30 100644 --- a/dist/css/help.colors.css +++ b/dist/css/help.colors.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/help.devtools.css b/dist/css/help.devtools.css index 565174e..49cefaa 100644 --- a/dist/css/help.devtools.css +++ b/dist/css/help.devtools.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/help.layout.css b/dist/css/help.layout.css index 99bfd9d..3a8757f 100644 --- a/dist/css/help.layout.css +++ b/dist/css/help.layout.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/help.opacity.css b/dist/css/help.opacity.css index cd39e23..e30226c 100644 --- a/dist/css/help.opacity.css +++ b/dist/css/help.opacity.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/help.ratios.css b/dist/css/help.ratios.css index 9a87dc3..7c569fe 100644 --- a/dist/css/help.ratios.css +++ b/dist/css/help.ratios.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/help.spacing.css b/dist/css/help.spacing.css index de51e07..a8553d8 100644 --- a/dist/css/help.spacing.css +++ b/dist/css/help.spacing.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/help.typography.css b/dist/css/help.typography.css index 6aff186..fef20b7 100644 --- a/dist/css/help.typography.css +++ b/dist/css/help.typography.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/mcss.css b/dist/css/mcss.css index 678a7f2..7cc4755 100644 --- a/dist/css/mcss.css +++ b/dist/css/mcss.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ @layer settings, base, elements, global, components, theme, helpers; @import url(./base.reset.css) layer(base); @import url(./component.avatar.css) layer(components); diff --git a/dist/css/settings.tokens.css b/dist/css/settings.tokens.css index 0e4ce5b..8e03fde 100644 --- a/dist/css/settings.tokens.css +++ b/dist/css/settings.tokens.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/settings.ui.css b/dist/css/settings.ui.css index e314f23..d865f27 100644 --- a/dist/css/settings.ui.css +++ b/dist/css/settings.ui.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/theme.default.css b/dist/css/theme.default.css index 337fd0b..d568aa9 100644 --- a/dist/css/theme.default.css +++ b/dist/css/theme.default.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/css/theme.wireframe.css b/dist/css/theme.wireframe.css index c6596eb..9b1d0a3 100644 --- a/dist/css/theme.wireframe.css +++ b/dist/css/theme.wireframe.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ /* SETTINGS MEDIA QUERIES diff --git a/dist/mcss.components.css b/dist/mcss.components.css new file mode 100644 index 0000000..b58bb21 --- /dev/null +++ b/dist/mcss.components.css @@ -0,0 +1,1908 @@ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ +/* + mCSS component library entry point. + + Optional companion to mcss.css: every component.*.css file, imported into + the `components` cascade layer. mcss.css only declares that layer slot and + never fills it, so skip this file if you build your own components. + + Layer priority comes from the layer statement in mcss.css (or any order + you declare yourself), so it doesn't matter whether this file loads before + or after mcss.css. +*/ + +/* Build-time only (@custom-media + mixin definitions, no runtime output) */ +/* +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 … */ + +/* Component library styles */ + +@layer components { + +.avatar { + --avatar-size: var(--xl1); + --avatar-font-size: var(--text-md); + /* Status dot defaults live on the block (not on .is-online/.is-offline, + which would out-specify them) so the size modifiers below can override. */ + --status-dot-size: var(--xs3); + --status-dot-position: 4%; + --status-dot-border-width: 2px; + --status-dot-border-color: var(--body-background-color); + position: relative; + display: inline-block; + width: var(--avatar-size); +} + + .avatar > div { + display: flex; + justify-content: center; + aspect-ratio: 1; + align-items: center; + border-radius: var(--avatar-radius); + font-size: var(--avatar-font-size); + line-height: 1; + background-color: var(--avatar-background-color); + border: var(--avatar-border-width) solid var(--avatar-border-color); + color: var(--avatar-color); + overflow: hidden; + } + :is(.avatar.is-online,.avatar.is-offline):after { + content: ""; + display: block; + width: var(--status-dot-size); + aspect-ratio: 1; + position: absolute; + top: var(--status-dot-position); + right: var(--status-dot-position); /* deliberately physical: dot pinned to a visual corner */ + border: var(--status-dot-border-width) solid var(--status-dot-border-color); + border-radius: var(--radius-round); + background-color: var(--avatar-status-dot-color-offline); + } + .avatar.is-online:after { + background-color: var(--avatar-status-dot-color-online); + } + +.avatar-sm { + --avatar-size: var(--sm3); + --avatar-font-size: var(--text-xs); + --status-dot-size: var(--xs2); + --status-dot-position: 0; + --status-dot-border-width: 1px; +} +.avatar-md { + --avatar-size: var(--md3); + --avatar-font-size: var(--text-sm); + --status-dot-size: var(--xs2); + --status-dot-border-width: 1px; +} +.avatar-lg { + --avatar-size: var(--xl3); + --avatar-font-size: var(--text-xl); + --status-dot-size: var(--xs3); + --status-dot-position: 7%; +} +.avatar-xl { + --avatar-size: var(--xxl3); + --avatar-font-size: var(--display-lg); + --status-dot-size: var(--sm2); + --status-dot-position: 7%; +} +} + +@layer components { + +/* BADGE */ + +.badge { + display: inline-block; + padding: var(--xs1) var(--xs2); + font-size: var(--badge-font-size); + font-weight: var(--semi-bold); + line-height: var(--leading-sm); + color: var(--badge-color); + background: var(--badge-background-color); + border-radius: var(--badge-border-radius); + + /* Variants only swap the local custom properties */ +} + + .badge.badge-primary { + --badge-color: var(--badge-primary-color); + --badge-background-color: var(--badge-primary-background-color); + } + + .badge.badge-success { + --badge-color: var(--badge-success-color); + --badge-background-color: var(--badge-success-background-color); + } + + .badge.badge-danger { + --badge-color: var(--badge-danger-color); + --badge-background-color: var(--badge-danger-background-color); + } + + .badge.badge-warning { + --badge-color: var(--badge-warning-color); + --badge-background-color: var(--badge-warning-background-color); + } +} + +@layer components { + +/* BANNER */ + +.banner { + display: flex; + align-items: center; + justify-content: center; + gap: var(--xs3); + padding: var(--xs2) var(--sm1); + font-size: var(--text-sm); + text-align: center; + color: var(--banner-color); + background: var(--banner-background-color); +} + + .banner a { + color: inherit; + font-weight: var(--semi-bold); + } + .banner_content p { + margin-bottom: 0; + } + +.banner_close { + display: flex; + align-items: center; + justify-content: center; + min-width: var(--sm3); + min-height: var(--sm3); + padding: var(--xs1); + color: inherit; + background: transparent; + border: none; + cursor: pointer; +} + + .banner_close svg { + width: var(--sm1); + height: var(--sm1); + } +} + +@layer components { + +/* BREADCRUMBS */ + .breadcrumbs ol { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: var(--xs2); + margin: 0; + padding: 0; + list-style: none; + font-size: var(--text-sm); + } + + .breadcrumbs li { + display: flex; + align-items: center; + gap: var(--xs2); + } + + /* separator between crumbs; the / "" alt text keeps it out of the + accessibility tree in browsers that support the syntax */ + .breadcrumbs li + li::before { + content: var(--breadcrumbs-separator); + color: var(--breadcrumbs-separator-color); + } + +@supports (content: "a" / "a") { +.breadcrumbs li + li::before { + content: var(--breadcrumbs-separator) / ""; + } +} + + .breadcrumbs a { + color: var(--breadcrumbs-color); + -webkit-text-decoration: none; + text-decoration: none; + transition: color var(--transition); + } + + :is(.breadcrumbs a):hover { + color: var(--link-color); + } + + .breadcrumbs [aria-current="page"] { + color: var(--breadcrumbs-color-current); + font-weight: var(--semi-bold); + } +} + +@layer components { + +.button, +.bt { + display: inline-flex; + display: inline flex; + justify-content: center; + align-items: center; + min-width: var(--bt-min-width); + min-height: var(--md3); + padding-inline: var(--xs3); + font-weight: var(--bt-font-weight); + font-size: var(--bt-font-size); + -webkit-text-decoration: none; + text-decoration: none; + color: var(--bt-color); + background-color: var(--bt-background-color); + border: var(--bt-border-width) solid var(--bt-border-color); + border-radius: var(--bt-border-radius); + cursor: pointer; + /* hover swaps the colors, :active scales; "all" would also animate + late-arriving layout changes (dev-server style injection, HMR) */ + transition: + color var(--transition-fast), + background-color var(--transition-fast), + border-color var(--transition-fast), + transform var(--transition-fast); +} + + :is(.button,.bt):where(:not(:disabled):hover) { + color: var(--bt-color-hover); + background-color: var(--bt-background-color-hover); + border-color: var(--bt-border-color-hover, var(--bt-border-color)); + } + + :is(.button,.bt):where(:not(:disabled):active) { + transform: scale(0.97); + } + + [aria-disabled="true"]:is(.button,.bt),:is(.button,.bt):disabled { + opacity: var(--o-2); + pointer-events: none; + } + + :is(.button,.bt) svg { + width: var(--sm1); + height: var(--sm1); + margin-inline-start: 0; + margin-inline-end: 0.5em; + } + + /* icon options */ + /* also tweaked under .bt-lg under "sizes" section */ + .bt-tightIcon:is(.button,.bt) svg { + margin-inline-end: 0.25em; + margin-inline-start: calc(var(--xs2) * -1); + } + + /* Colors */ + /* Variants only swap the local custom properties */ + + .bt-outline:is(.button,.bt) { + --bt-background-color: transparent; + --bt-border-color: var(--bt-outline-border-color); + --bt-color-hover: var(--bt-outline-color-hover); + --bt-background-color-hover: var(--bt-outline-background-color-hover); + --bt-border-color-hover: var(--bt-outline-border-color-hover); + } + + .bt-text:is(.button,.bt) { + --bt-border-color: transparent; + --bt-background-color: transparent; + --bt-color-hover: var(--link-color); + --bt-background-color-hover: transparent; + --bt-border-color-hover: transparent; + } + + .bt-outline-white:is(.button,.bt) { + --bt-color: var(--base-0); + --bt-color-hover: var(--base-0); + --bt-background-color: transparent; + --bt-background-color-hover: rgb(255 255 255 / 0.1); + --bt-border-color: var(--base-0); + --bt-border-color-hover: var(--base-0); + } + + /* Solid inverse for colored/gradient surfaces (pairs with bt-outline-white) */ + .bt-white:is(.button,.bt) { + --bt-color: var(--primary-700); + --bt-color-hover: var(--primary-600); + --bt-background-color: var(--base-0); + --bt-background-color-hover: var(--primary-50); + --bt-border-color: var(--base-0); + --bt-border-color-hover: var(--base-0); + } + + .bt-primary:is(.button,.bt) { + --bt-color: var(--bt-primary-color); + --bt-color-hover: var(--bt-primary-color-hover); + --bt-background-color: var(--bt-primary-background-color); + --bt-background-color-hover: var(--bt-primary-background-color-hover); + --bt-border-color: var(--bt-primary-border-color); + --bt-border-color-hover: var(--bt-primary-background-color-hover); + } + + .bt-primary.bt-outline:is(.button,.bt) { + --bt-color: var(--bt-primary-background-color); + --bt-color-hover: var(--bt-primary-color); + --bt-background-color: transparent; + --bt-background-color-hover: var(--bt-primary-background-color); + --bt-border-color-hover: var(--bt-primary-border-color-hover); + } + + .bt-yes:is(.button,.bt) { + --bt-color: var(--base-0); + --bt-color-hover: var(--yes-500); + --bt-background-color: var(--yes-500); + --bt-background-color-hover: var(--yes-100); + --bt-border-color: var(--yes-500); + --bt-border-color-hover: var(--yes-100); + } + + .bt-yes.bt-outline:is(.button,.bt) { + --bt-color: var(--yes-500); + --bt-color-hover: var(--base-0); + --bt-background-color: transparent; + --bt-background-color-hover: var(--yes-500); + --bt-border-color-hover: var(--yes-500); + } + + .bt-no:is(.button,.bt) { + --bt-color: var(--base-0); + --bt-color-hover: var(--no-500); + --bt-background-color: var(--no-500); + --bt-background-color-hover: var(--no-100); + --bt-border-color: var(--no-500); + --bt-border-color-hover: var(--no-100); + } + + .bt-no.bt-outline:is(.button,.bt) { + --bt-color: var(--no-500); + --bt-color-hover: var(--base-0); + --bt-background-color: transparent; + --bt-background-color-hover: var(--no-500); + --bt-border-color-hover: var(--no-500); + } + + .bt-maybe:is(.button,.bt) { + --bt-color: var(--base-0); + --bt-color-hover: var(--maybe-500); + --bt-background-color: var(--maybe-500); + --bt-background-color-hover: var(--maybe-100); + --bt-border-color: var(--maybe-500); + --bt-border-color-hover: var(--maybe-100); + } + + .bt-maybe.bt-outline:is(.button,.bt) { + --bt-color: var(--maybe-500); + --bt-color-hover: var(--base-0); + --bt-background-color: transparent; + --bt-background-color-hover: var(--maybe-500); + --bt-border-color-hover: var(--maybe-500); + } + +/* Sizes */ + +.bt-md { + min-width: var(--bt-min-width-md); + min-height: var(--lg2); + padding-inline: var(--xs3); +} + +.bt-lg { + min-width: var(--bt-min-width-lg); + min-height: var(--xl1); + padding-inline: var(--sm2); + font-size: var(--bt-font-size-lg); + border-radius: var(--bt-border-radius-lg); +} + + .bt-lg svg { + width: var(--sm3); + height: var(--sm3); + } + .bt-lg.bt-tightIcon svg { + margin-inline-start: calc(var(--xs3) * -1); + } +} + +@layer components { + +.card { + --loading-animation: 2s infinite ease-in-out; + + position: relative; + /* flex column so .card_byline can pin itself to the bottom */ + display: flex; + flex-direction: column; + padding: var(--card-spacing); + color: var(--card-color); + border-radius: var(--card-border-radius); + border: var(--card-border-width) solid var(--card-border-color); + transition: box-shadow var(--transition); +} + + .card.is-disabled { + opacity: var(--o-2); + pointer-events: none; + } + +.card-filled { + background: var(--card-bg-color); + border: none; +} + +.card-raised { + border: var(--card-border-width) solid var(--card-border-color); + box-shadow: var(--card-shadow); +} + +.card-raised:hover:not(.is-disabled) { + box-shadow: var(--card-shadow-hover); +} + +/* The card's single link, stretched over the whole card. Put .card_link on a + real anchor (usually the title link) so its text names the link. Positioned + parts later in the DOM (.card_actions) paint above the ::after and stay + clickable; parts before it need a z-index bump (.card_tags). */ +.card_link::after { + content: ""; + position: absolute; + inset: 0; +} + +.card_header { + display: grid; + grid-template-columns: 1fr minmax(min-content, max-content); + align-items: start; + gap: var(--xs2); + margin-bottom: var(--xs3); + /* we need extra spacing when there is an image after the header */ +} + .card_header:has( + .card_media) { + margin-bottom: var(--card-spacing); + } + +.card_title { + margin-bottom: 0; + font-size: var(--text-lg); + font-weight: var(--semi-bold); +} + + .card_title a { + color: var(--card-color); + -webkit-text-decoration: none; + text-decoration: none; + transition: color var(--transition); + } + + :is(.card_title a):hover { + color: var(--link-color); + } + .card_header_text p { + font-size: var(--text-lg); + color: var(--card-secondary-text-color); + } + +.card_badges { + display: flex; + flex-wrap: wrap; + gap: var(--xs2); + justify-content: flex-end; + transform: translate(var(--xs2), calc(var(--xs2) * -1)); +} + +/* Badge visuals come from the badge component (component.badge.css); the + Card component renders class="badge card_badge" on each badge. */ + +.card_tags { + /* keep the tags clickable above the stretched .card_link */ + position: relative; + z-index: var(--z-1); + margin-bottom: var(--sm2); +} + +.card_media { + margin-bottom: var(--card-spacing); + overflow: hidden; + border-radius: var(--card-border-radius); +} + +.card_media-flush { + /* edge-to-edge image on top of the card */ + margin: calc(var(--card-spacing) * -1); + margin-bottom: var(--card-spacing); + border-radius: var(--card-border-radius) var(--card-border-radius) 0 0; +} + +.card_image { + width: 100%; + object-fit: cover; + aspect-ratio: var(--card-aspect-ratio); +} + /* in case it's inside a .prose context */ + .card_content p:last-of-type { + margin-bottom: 0; + } + + /* guaranteed gap before the byline even when nothing pins it down */ + .card_content:has( + .card_byline) { + margin-bottom: var(--sm1); + } + +.card_byline { + /* margin-top: auto pins bylines to the bottom, so a row of cards lines up */ + display: flex; + align-items: center; + gap: var(--xs2); + margin-top: auto; + font-size: var(--text-sm); +} + + .card_byline time { + color: var(--card-secondary-text-color); + } + +.card_author { + display: block; + font-weight: var(--semi-bold); +} + +.card_actions { + display: flex; + justify-content: flex-end; + gap: var(--xs3); + /* positioned and after .card_link in the DOM, so actions paint above the + stretched link and stay clickable */ + position: relative; + margin-top: var(--card-spacing); +} + +/* Loading state */ + +.card_placeholder { + width: 100%; + aspect-ratio: var(--card-aspect-ratio); + background: var(--card-loading-bg); + animation: pulse var(--loading-animation); +} + +.card_loading { + display: flex; + flex-direction: column; + gap: var(--xs2); +} + +.card_loadingLine { + height: var(--sm1); + background: var(--card-loading-bg); + border-radius: var(--radius-sm); + animation: pulse var(--loading-animation); +} + +.card_loadingLine-short { + width: 75%; +} + +@keyframes pulse { + 0% { + opacity: 1; + } + 50% { + opacity: 0.5; + } + 100% { + opacity: 1; + } +} +} + +@layer components { + +/* FAQ */ + +.faq { + display: grid; + gap: var(--faq-spacing); +} + +/* Item visuals (borders, background, chevron, open state) come from the + details/summary element styling in elements.interactive.css. */ + +.faq_content { + cursor: auto; +} + + .faq_content p:last-of-type { + /* in case it's inside a .prose context */ + margin-bottom: 0; + } +} + +@layer components { + +/* FEATURE ITEM */ + +.featureItem { + /* As a .tiles item the li is display:grid (equal-height rows); keep + the icon/title/text packed at the top instead of stretching apart */ + align-content: start; +} + +.featureItem_icon { + display: flex; + align-items: center; + justify-content: center; + width: var(--featureItem-icon-box-size); + height: var(--featureItem-icon-box-size); + margin-bottom: var(--sm1); + color: var(--featureItem-icon-color); + background-color: var(--featureItem-icon-background-color); + border-radius: var(--featureItem-icon-border-radius); +} + + .featureItem_icon svg { + width: var(--featureItem-icon-size); + height: var(--featureItem-icon-size); + } + +.featureItem_title { + margin-bottom: var(--xs2); + font-size: var(--text-lg); + font-weight: var(--semi-bold); +} + .featureItem_text p:last-of-type { + /* in case it's inside a .prose context */ + margin-bottom: 0; + } +} + +@layer components { + +/* FIELD */ + +.field { + /* containing block for overlaid messages (see below) */ + position: relative; + display: grid; + gap: var(--field-spacing); +} + + .field label { + /* the grid gap handles spacing (overrides the elements-layer margin) */ + margin-bottom: 0; + } + +/* Messages sit in flow under the control. --field-message-position is the + interface for row compositions: with `absolute` (set by .fieldRow) they + overlay below the field instead of adding to its height, so the control + stays the field's bottom edge and a revealed error can't push a + bottom-aligned neighbor (button…) out of line. top/inset only apply then. */ +.field_hint, +.field_error { + position: var(--field-message-position); + top: calc(100% + var(--field-spacing)); + inset-inline: 0; + font-size: var(--text-sm); +} + +.field_hint { + color: var(--field-hint-color); +} + +.field_error { + display: none; + color: var(--field-error-color); +} + +/* Native validation: reveal the error message once the control has been + interacted with and is invalid (:user-invalid, not :invalid, so pristine + forms don't light up red). The border color comes from elements.form.css. + .is-invalid forces the same presentation from markup, for server-side + validation results, tests, and demos. */ + :is(.field:has(:user-invalid),.field.is-invalid) .field_error { + display: block; + } + + :is(.field:has(:user-invalid),.field.is-invalid):has(.field_error) .field_hint { + display: none; + } + +.field.is-invalid :is(input, select, textarea) { + border-color: var(--input-border-color-invalid); +} +} + +@layer components { + +/* FIELD ROW */ + +/* 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 + below the row instead of pushing bottom-aligned buttons out of line. + Leave a little vertical room under the row for them. */ +.fieldRow { + --field-message-position: absolute; + + display: flex; + flex-wrap: wrap; + align-items: end; + gap: var(--xs3); +} + +.fieldRow_field { + flex: 1 1 200px; +} +} + +@layer components { + +/* FOOTER */ + +.footer { + padding: var(--md3) var(--sm3); + line-height: var(--leading-xl); + color: var(--footer-text-color); + background-color: var(--footer-background-color); + border-top: var(--footer-border-width) dashed var(--footer-border-color); + transition: background-color var(--transition); +} + @media (width >= 768px) { + +.footer { + display: grid; + gap: var(--md3); + grid-template-columns: 25% 1fr; + padding: var(--lg3) var(--md3); +} + } + + .footer a { + color: var(--footer-link-color); + -webkit-text-decoration: none; + text-decoration: none; + font-weight: var(--book); + transition: color var(--transition); + } + :is(.footer a):hover { + color: var(--footer-link-color-hover); + } + +.footer_meta { + grid-column: 1; + grid-row: 1; +} + +.footer_nav ul { + margin: 0; + padding: 0; + list-style: none; +} + + :is(.footer_nav ul) li { + margin: 0; + } + @media (width >= 768px) { + +.footer_nav > ul { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); + gap: var(--sm3); +} + } + + :is(.footer_nav > ul) ul { + margin-bottom: var(--md3); + } + @media (width >= 768px) { + + :is(.footer_nav > ul) ul { + margin-bottom: 0; + } + } + + :is(:is(.footer_nav > ul) ul) li:not(:last-child) { + margin-bottom: var(--xs1); + } +} + +@layer components { + +/* HEADER */ + +.header { + display: flex; + align-items: center; + gap: var(--sm3); + height: var(--header-height); + padding-inline: var(--header-padding); + background-color: var(--header-background-color); +} + +.header-sticky { + position: sticky; + top: 0; + z-index: var(--z-5); + box-shadow: var(--shadow-sm); +} + + .header-sticky.is-top { + box-shadow: none; + } + +.header_logo { + display: flex; + align-items: center; + gap: var(--sm2); + font-size: var(--text-md); + font-weight: var(--semi-bold); + -webkit-text-decoration: none; + text-decoration: none; + color: var(--text-color); +} + +.header_nav { + display: none; + margin-inline-start: auto; +} + @media (width >= 768px) { + +.header_nav { + display: block; +} + } + + .header_nav ul { + display: flex; + gap: var(--md3); + margin: 0; + padding: 0; + list-style: none; + } + + :is(.header_nav ul) li { + margin: 0; + } + + :is(.header_nav ul) a { + display: flex; + align-items: center; + height: var(--header-height); + font-size: var(--text-sm); + font-weight: var(--bold); + -webkit-text-decoration: none; + text-decoration: none; + color: var(--text-color); + transition: color var(--transition); + } + :is(:is(.header_nav ul) a):hover,[aria-current]:is(:is(.header_nav ul) a) { + color: var(--link-color); + } + +.header_actions { + display: none; +} + @media (width >= 768px) { + +.header_actions { + display: flex; + align-items: center; + gap: var(--sm3); +} + } + +.header_navMobile { + margin-inline-start: auto; +} + @media (width >= 768px) { + +.header_navMobile { + display: none; +} + } + + .header_navMobile button { + display: flex; + align-items: center; + justify-content: center; + min-width: var(--sm3); + min-height: var(--sm3); + padding: var(--xs2); + color: var(--text-color); + background: transparent; + border: none; + cursor: pointer; + } + + .header_navMobile > div { + /* The full-screen menu is an always-dark surface by design; it does not + follow the light theme. Retheme it via the --header-menu-* tokens. */ + display: none; + position: fixed; + top: 0; + left: 0; /* deliberately physical: full-viewport overlay pinned to the screen edge */ + width: 100vw; + height: 100svh; + overflow-y: auto; + padding: var(--lg3); + background-color: var(--header-menu-background-color); + z-index: var(--z-5); + } + .is-open:is(.header_navMobile > div) { + display: block; + } + + :is(.header_navMobile > div) button { + position: fixed; + top: 0; + right: 0; /* deliberately physical: close button pinned to a visual corner */ + padding: var(--sm1) var(--sm3); + color: var(--header-menu-color); + } + + :is(.header_navMobile > div) a { + color: var(--header-menu-color); + -webkit-text-decoration: none; + text-decoration: none; + } + [aria-current]:is(:is(.header_navMobile > div) a) { + color: var(--header-menu-color-current); + } + + :is(.header_navMobile > div) ul { + margin: 0; + padding: 0; + list-style: none; + } + + :is(:is(.header_navMobile > div) ul) li { + margin: 0; + } + + :is(.header_navMobile > div) > ul { + font-size: var(--text-lg); + } + + :is(:is(.header_navMobile > div) > ul) li { + margin-top: var(--sm1); + } + + :is(:is(.header_navMobile > div) > ul) ul { + padding-inline-start: var(--sm1); + border-inline-start: 1px solid var(--header-menu-border-color); + } + :is(:is(:is(.header_navMobile > div) > ul) ul) a { + color: var(--header-menu-secondary-color); + } + [aria-current]:is(:is(:is(:is(.header_navMobile > div) > ul) ul) a) { + color: var(--header-menu-color-current); + } + +.header_menuExtra { + display: flex; + margin-bottom: var(--sm3); +} +} + +@layer components { + +/* SECTION */ + +.section { + padding-block: var(--section-spacing); +} + +/* Variants only swap the local custom properties */ + +.section-filled { + background-color: var(--section-filled-background-color); +} + +.section-primary { + background-color: var(--section-primary-background-color); + color: var(--section-primary-text-color); + /* Children (links, buttons, eyebrow…) follow the inverted surface */ + --text-color: var(--section-primary-text-color); + --link-color: var(--section-primary-link-color); + --link-color-hover: var(--section-primary-link-color-hover); + --section-eyebrow-color: var(--section-primary-eyebrow-color); + --section-lede-color: var(--section-primary-lede-color); +} + +/* The header and content each compose .wrap with their own width preset + (header defaults to .wrap-md, content to .wrap-lg), so a section can pair + a narrow reading-width header with a wider content column. */ +.section_content { + /* default doesn't need styling */ +} + +.section_header { + margin-bottom: var(--section-header-spacing); + text-align: center; +} + +.section_eyebrow { + margin-bottom: var(--xs2); + font-size: var(--text-sm); + font-weight: var(--semi-bold); + letter-spacing: var(--tracking-lg); + text-transform: uppercase; + color: var(--section-eyebrow-color); +} + +.section_title { + margin-bottom: var(--xs3); + font-size: var(--display-md); +} + +.section_lede { + font-size: var(--text-lg); + color: var(--section-lede-color); +} + +/* Centered button row: the "closing CTA" is a Section with one of these */ +.section_actions { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: var(--xs3); +} +} + +@layer components { + +.hero { +} + +.hero_wrap { + position: relative; + display: flex; + align-items: center; + justify-content: center; + min-height: 60svh; /* height is added inline via props */ + overflow: hidden; +} + +.hero_overlay { + position: absolute; + inset: 0; + pointer-events: none; + z-index: 2; +} + +.hero_content { + padding: var(--hero-content-padding); + max-width: 70ch; +} + +/* Wrapping button row (the hero twin of .section_actions); the full and + slideshow variants center it to match their centered text. */ +.hero_actions { + display: flex; + flex-wrap: wrap; + gap: var(--xs3); + margin-top: var(--hero-actions-spacing); +} + +.hero_media { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; +} + + .hero_media img,.hero_media video { + width: 100%; + height: 100%; + object-fit: cover; + } + +.hero_bg { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + object-fit: cover; + z-index: 0; +} + +.hero-split { + /* set inline by the component from the ratio prop */ + --hero-ratio-left: 62fr; + --hero-ratio-right: 38fr; + display: grid; + align-items: center; + /* one column on mobile */ + grid-template-columns: 1fr; +} + + @media (width >= 768px) { + +.hero-split { + grid-template-columns: var(--hero-ratio-left) var(--hero-ratio-right); +} + } + + /* setup via direction prop in component */ + @media (width >= 768px) { + .hero-split.hero-reversed div:nth-child(1) { + order: 2; + } + .hero-split.hero-reversed div:nth-child(2) { + order: 1; + } + + /* when `flush` prop is added we remove content padding on the "outside" */ + /* default */ + .hero-split.hero-flush:not(.hero-reversed) .hero_media + .hero_content { + padding-inline-end: 0; + } + /* contentFirst */ + .hero-split.hero-flush:not(.hero-reversed) .hero_content:has( + .hero_media) { + padding-inline-start: 0; + } + /* default */ + .hero-split.hero-flush.hero-reversed .hero_media + .hero_content { + padding-inline-start: 0; + } + /* contentFirst */ + .hero-split.hero-flush.hero-reversed .hero_content:has( + .hero_media) { + padding-inline-end: 0; + } + } + .hero-full .hero_content { + z-index: 2; + text-align: center; + max-width: 60ch; + min-width: 200px; + } + + .hero-full .hero_actions { + justify-content: center; + } + .hero-roundCorners .hero_media { + overflow: hidden; + border-radius: var(--hero-radius); + } + + .hero-roundCorners .hero_wrap { + border-radius: var(--hero-radius); + } + .hero-slideshow .hero_content { + position: relative; + width: 50ch; + } + + .hero-slideshow .hero_actions { + justify-content: center; + } + + .hero-slideshow .hero_content ul > li,.hero-slideshow .hero_bg { + z-index: 2; + position: absolute; + inset: 0; + text-align: center; + pointer-events: none; + opacity: 0; + transition-property: opacity; + transition-timing-function: ease-in-out; + /* set inline via slideshowTransition prop */ + transition-duration: var(--slideshow-transition, 220ms); + } + + .is-active:is(.hero-slideshow .hero_content ul > li,.hero-slideshow .hero_bg) { + opacity: 1; + pointer-events: auto; + } + +.hero_pagination { + position: absolute; + /* deliberately physical: symmetric full-width stretch over the media */ + left: 0; + right: 0; + bottom: var(--md1); + display: flex; + justify-content: center; + align-items: center; + gap: var(--xs1); + z-index: 2; +} + +/* 24px minimum hit target (WCAG 2.5.8); the visible dot keeps its size */ +.hero_pagination_dot { + display: grid; + place-items: center; + width: max(var(--hero-pagination-dot), 24px); + height: max(var(--hero-pagination-dot), 24px); + padding: 0; + background: transparent; + border: none; + cursor: pointer; +} + + .hero_pagination_dot::before { + content: ""; + width: var(--hero-pagination-dot); + height: var(--hero-pagination-dot); + border-radius: var(--radius-round); + background: var(--hero-pagination-dot-color); + opacity: var(--hero-pagination-opacity); + box-shadow: var(--shadow-sm); + transition: + opacity var(--transition), + background-color var(--transition); + } + .hero_pagination_dot.is-active::before { + opacity: 1; + background: var(--hero-pagination-dot-active-color); + } +} + +@layer components { + +/* PAGINATION */ + .pagination ul { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: var(--xs1); + margin: 0; + padding: 0; + list-style: none; + } + + .pagination a,.pagination span { + display: flex; + align-items: center; + justify-content: center; + min-width: var(--pagination-size); + min-height: var(--pagination-size); + font-size: var(--text-sm); + font-weight: var(--semi-bold); + -webkit-text-decoration: none; + text-decoration: none; + color: var(--pagination-color); + border-radius: var(--pagination-border-radius); + transition: background-color var(--transition-fast); + } + + .pagination a:hover { + background-color: var(--pagination-background-color-hover); + } + + .pagination a[aria-current="page"] { + color: var(--pagination-color-current); + background-color: var(--pagination-background-color-current); + } + .pagination_arrow svg { + width: var(--sm1); + height: var(--sm1); + } + + .pagination_arrow[aria-disabled="true"] { + opacity: var(--o-2); + } + +.pagination_arrow-prev svg { + rotate: 90deg; +} + +.pagination_arrow-next svg { + rotate: -90deg; +} +} + +@layer components { + +/* PREV / NEXT */ + +.prevNext { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--sm1); +} + +.prevNext_link { + display: grid; + align-content: start; + gap: var(--xs1); + padding: var(--sm1); + -webkit-text-decoration: none; + text-decoration: none; + color: var(--text-color); + border: var(--border-sm) solid var(--prevNext-border-color); + border-radius: var(--prevNext-border-radius); + transition: border-color var(--transition); +} + + .prevNext_link:hover { + border-color: var(--prevNext-border-color-hover); + } + + .prevNext_link small { + color: var(--prevNext-label-color); + } + + .prevNext_link span { + font-weight: var(--semi-bold); + } + +.prevNext_link-prev { + grid-column: 1; +} + +/* a lone "next" stays in the right column */ +.prevNext_link-next { + grid-column: 2; + text-align: end; +} +} + +@layer components { + +/* PRICING CARD */ + +.pricingCard { + display: flex; + flex-direction: column; +} + +.pricingCard-highlighted { + /* border-color + ring keeps the highlight from shifting the layout */ + border-color: var(--pricingCard-highlight-border-color); + box-shadow: 0 0 0 var(--border-sm) var(--pricingCard-highlight-border-color); +} + +.pricingCard_header { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--xs2); + margin-bottom: var(--sm1); +} + +.pricingCard_name { + margin-bottom: 0; + font-size: var(--text-lg); + font-weight: var(--semi-bold); +} + +.pricingCard_price { + display: flex; + align-items: baseline; + gap: var(--xs1); + margin-bottom: var(--sm1); +} + +.pricingCard_amount { + font-family: var(--heading-font); + font-size: var(--display-md); + font-weight: var(--black); + line-height: var(--leading-xs); +} + +.pricingCard_period, +.pricingCard_description { + color: var(--card-secondary-text-color); +} + +.pricingCard_period { + font-size: var(--text-sm); +} + +.pricingCard_description { + margin-bottom: var(--sm1); +} + +.pricingCard_features { + display: grid; + gap: var(--xs2); + margin: 0 0 var(--sm3); + padding: 0; + list-style: none; +} + + .pricingCard_features li { + display: flex; + align-items: start; + gap: var(--xs2); + } + +.pricingCard_check { + flex: none; + display: flex; + margin-top: var(--xs1); + color: var(--pricingCard-check-color); +} + + .pricingCard_check svg { + width: var(--sm1); + height: var(--sm1); + } + +.pricingCard_cta { + /* pinned to the bottom so CTAs line up across a row of tiers */ + display: grid; + margin-top: auto; +} +} + +@layer components { + +/* TESTIMONIAL */ + +.testimonial { + display: grid; + align-content: start; + gap: var(--sm1); +} + +.testimonial_quote { + /* the visual style comes from the blockquote element styling */ + margin-bottom: 0; +} + +.testimonial_byline { + display: flex; + align-items: center; + gap: var(--xs2); + font-size: var(--text-sm); +} + +.testimonial_name { + display: block; + font-weight: var(--semi-bold); +} + +.testimonial_role { + display: block; + color: var(--testimonial-role-color); +} +} + +@layer components { + +.readProgressBar { + position: fixed; + top: 0; + left: 0; /* deliberately physical: full-width bar pinned to the viewport edge */ + width: 100%; + height: var(--readProgressBar-height); + z-index: var(--z-5); +} + + .readProgressBar > div { + width: 100%; + height: 100%; + background: var(--readProgressBar-color); + animation: bar linear; + /* root, not nearest: the bar tracks the page, so the timeline must not + depend on where in the DOM the component happens to be rendered */ + animation-timeline: scroll(root y); + } + +@keyframes bar { + from { + width: 0; + } + to { + width: 100vw; + } +} +} + +@layer components { + +.notice { + --bg-color: var(--notice-background-color); + --bd-color: var(--notice-border-color); + --svg-color: inherit; + --code-color: inherit; + --code-bg-color: inherit; + + padding: var(--notice-spacing); + border: var(--notice-border-width) solid var(--bd-color); + border-radius: var(--notice-border-radius); + color: var(--notice-text-color); + background-color: var(--bg-color); +} + + .notice code { + background-color: var(--code-bg-color); + color: var(--code-color); + } + + .notice p:last-of-type { + /* in case it's inside a .prose context */ + margin-bottom: 0; + } + +.notice_title { + display: flex; +} + + .notice_title svg { + margin-bottom: var(--xs3); + margin-inline-end: 0.5em; + color: var(--svg-color); + } + + .notice_title strong { + display: block; + margin-bottom: var(--xs1); + } + +.notice-info { + color: var(--base-950); + --bg-color: var(--primary-100); + --bd-color: var(--primary-300); + --svg-color: var(--primary-400); + --code-color: var(--primary-600); + --code-bg-color: var(--primary-200); +} + +.notice-danger { + color: var(--base-950); + --bg-color: var(--no-200); + --bd-color: var(--no-500); + --svg-color: var(--no-500); + --code-color: var(--no-500); + --code-bg-color: var(--no-100); +} + +.notice-warning { + color: var(--base-950); + --bg-color: var(--maybe-200); + --bd-color: var(--maybe-500); + --svg-color: var(--maybe-400); + --code-color: var(--maybe-500); + --code-bg-color: var(--maybe-100); +} + +.notice-confirm { + color: var(--base-950); + --bg-color: var(--yes-100); + --bd-color: var(--yes-500); + --svg-color: var(--yes-400); + --code-color: var(--yes-500); + --code-bg-color: var(--yes-200); +} + +/* Heading-adjacent margin mirrors the prose rhythm in global.prose.css + (prose can't reach into component classes, so the notice owns this rule) */ +@scope (.prose) to (.not-prose) { + .notice:has(+ :is(h1, h2, h3, h4)) { + margin-bottom: calc(var(--prose-spacing) * 2); + } +} +} + +@layer components { + +.socialMedia { + --icon-size: var(--sm3); + + display: flex; + flex-wrap: wrap; + gap: var(--sm1); + list-style: none; + padding: 0; + margin: 0; +} + + .socialMedia a { + display: block; + width: var(--icon-size); + height: var(--icon-size); + + /* in case SVG has dimensions specified in its code */ + } + :is(.socialMedia a) svg { + width: var(--icon-size); + height: var(--icon-size); + } + +.socialMedia-md { + --icon-size: var(--md2); +} + +.socialMedia-lg { + --icon-size: var(--lg2); + gap: var(--sm2); +} + +.socialMedia-xl { + --icon-size: var(--xl2); + gap: var(--md2); +} +} + +@layer components { + .tags li { + margin-bottom: var(--xs2); + } + :is(.tags li):last-child { + margin-bottom: 0; + } + + .tags a { + padding: var(--xs1) var(--tags-padding); + -webkit-text-decoration: none; + text-decoration: none; + text-transform: lowercase; + font-size: var(--tags-font-size); + font-style: normal; + color: var(--tags-color); + border-radius: var(--tags-radius); + background-color: var(--tags-background-color); + transition: background-color var(--transition); + } + :is(.tags a):hover { + background-color: var(--tags-background-color-hover); + } + +.tags-inline { + display: flex; + flex-wrap: wrap; + gap: var(--xs2); +} + + .tags-inline li { + margin-bottom: 0; + } +} + +@layer components { + +/* TILES */ + +/* + Equal tiles in container-responsive columns: cards, feature items, + pricing tiers, anything repeated at one size. The column count answers + "how wide is the column I live in", not "how wide is the viewport": the + .layout scaffolds declare their main column as a size container; outside + a scaffold, wrap the list in a .tiles_container (or any inline-size + container). The wrapper is required there: with no container ancestor + the queries never match and the list stays single-column. + + Sizes name the tile: each one is a set of container thresholds tuned to + how much room that tile needs, and columns keep coming as the container + crosses them (no count cap; the column's width is the cap). A bare + .tiles uses the md thresholds (card-sized tiles); .tiles-sm fits small + icon + blurb tiles, so its columns appear sooner. The thresholds are + deliberately not the global viewport breakpoints: those can't see how + wide the column is. To pin a count yourself, set --tiles-columns on a + hook class of your own (unlayered CSS beats the rules below), or write + your own @container rules. +*/ + +.tiles { + --tiles-columns: 1; + display: grid; + grid-template-columns: repeat(var(--tiles-columns), 1fr); + grid-column-gap: var(--grid-column-gap); + grid-row-gap: var(--grid-row-gap); + margin: 0; + padding: 0; + list-style: none; +} + + .tiles > li { + /* grid items stretch, so tiles in a row share the same height */ + display: grid; + } + +/* md, the default (.tiles-md exists as the explicit spelling): a tile + keeps roughly 17rem of room */ +@container (width >= 36rem) { + .tiles { + --tiles-columns: 2; + } +} + +@container (width >= 56rem) { + .tiles { + --tiles-columns: 3; + } +} + +@container (width >= 76rem) { + .tiles { + --tiles-columns: 4; + } +} + +@container (width >= 96rem) { + .tiles { + --tiles-columns: 5; + } +} + +@container (width >= 116rem) { + .tiles { + --tiles-columns: 6; + } +} + +/* sm: a tile keeps roughly 13rem of room. Same specificity as the base + rules, so these must stay after them (a smaller tile never means fewer + columns at the same width). */ +@container (width >= 28rem) { + .tiles-sm { + --tiles-columns: 2; + } +} + +@container (width >= 44rem) { + .tiles-sm { + --tiles-columns: 3; + } +} + +@container (width >= 60rem) { + .tiles-sm { + --tiles-columns: 4; + } +} + +@container (width >= 76rem) { + .tiles-sm { + --tiles-columns: 5; + } +} + +@container (width >= 92rem) { + .tiles-sm { + --tiles-columns: 6; + } +} + +/* Fallback container for tiles used outside the .layout scaffolds */ +.tiles_container { + container-type: inline-size; +} +} + +@layer components { + /* we hide the TOC if there is less than 2 item */ + .toc:not(:has(li:nth-of-type(2))) { + display: none; + } + + .toc p { + margin-bottom: var(--xs2); + } + + .toc ul { + font-size: var(--text-sm); + } + :is(.toc ul) ul { + margin-inline-start: var(--toc-indentation); + } + + .toc > ul > li:first-child > a:first-child { + padding-top: 0; + } + + .toc a { + display: flex; + align-items: center; + padding-top: calc(var(--toc-spacing) / 2); + padding-bottom: calc(var(--toc-spacing) / 2); + -webkit-text-decoration: none; + text-decoration: none; + color: var(--toc-color); + transition: color var(--transition); + } + :is(.toc a):hover { + color: var(--toc-color-hover); + } + + :is(.toc a) span { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .is-active:is(.toc a) { + color: var(--toc-color-hover); + } + .is-active:is(.toc a) svg { + transform: translateX(calc(var(--xs1) * -1)); + opacity: var(--o-5); + } + .toc-icon a { + margin-inline-start: calc(var(--toc-icon-size) * -1); + } + + .toc-icon svg { + width: var(--toc-icon-size); + height: var(--toc-icon-size); + flex-shrink: 0; + opacity: var(--o-0); + transform: translateX(calc(var(--toc-icon-size) * -1)); + transition: opacity var(--transition), transform var(--transition); + } +} + +@layer components { +.toggle { + /* Themable via the --toggle-* tokens in settings.ui.css */ + --toggle-w: var(--toggle-width); + --toggle-h: var(--toggle-height); + --toggle-bd: var(--toggle-border-width); + position: relative; + appearance: none; + border: none; + /* The generic input padding (elements.form.css) survives appearance: none; + with border-box sizing it floors the track at 24px, so any toggle themed + below that squashes and loses its pill ends */ + padding: 0; + display: block; + width: var(--toggle-w); + height: var(--toggle-h); + border-radius: calc(var(--toggle-h) / 2); + cursor: pointer; + background-color: var(--toggle-track-color); +} + + .toggle::before { + --diameter: calc(var(--toggle-h) - var(--toggle-bd) * 2); + position: absolute; + top: var(--toggle-bd); + /* deliberately physical: the thumb travel (left + translateX) is a visual + mechanic; keeping it physical keeps the animation math in one axis system */ + left: var(--toggle-bd); + content: ""; + display: block; + width: var(--diameter); + height: var(--diameter); + border-radius: var(--diameter); + background-color: var(--toggle-thumb-color); + transition: + left var(--transition), + transform var(--transition), + width var(--transition); + transform: translateX(0); + } + + .toggle:checked { + background-color: var(--toggle-track-color-checked); + } + + .toggle:checked::before { + left: calc(100% - var(--toggle-bd)); + transform: translateX(-100%); + } + + .toggle:active::before { + width: calc(var(--diameter) * 1.3); + } +} diff --git a/dist/mcss.components.min.css b/dist/mcss.components.min.css new file mode 100644 index 0000000..abf6aa0 --- /dev/null +++ b/dist/mcss.components.min.css @@ -0,0 +1,2 @@ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ +@layer components{.avatar{--avatar-size: var(--xl1);--avatar-font-size: var(--text-md);--status-dot-size: var(--xs3);--status-dot-position: 4%;--status-dot-border-width: 2px;--status-dot-border-color: var(--body-background-color);position:relative;display:inline-block;width:var(--avatar-size)}.avatar>div{display:flex;justify-content:center;aspect-ratio:1;align-items:center;border-radius:var(--avatar-radius);font-size:var(--avatar-font-size);line-height:1;background-color:var(--avatar-background-color);border:var(--avatar-border-width) solid var(--avatar-border-color);color:var(--avatar-color);overflow:hidden}:is(.avatar.is-online,.avatar.is-offline):after{content:"";display:block;width:var(--status-dot-size);aspect-ratio:1;position:absolute;top:var(--status-dot-position);right:var(--status-dot-position);border:var(--status-dot-border-width) solid var(--status-dot-border-color);border-radius:var(--radius-round);background-color:var(--avatar-status-dot-color-offline)}.avatar.is-online:after{background-color:var(--avatar-status-dot-color-online)}.avatar-sm{--avatar-size: var(--sm3);--avatar-font-size: var(--text-xs);--status-dot-size: var(--xs2);--status-dot-position: 0;--status-dot-border-width: 1px}.avatar-md{--avatar-size: var(--md3);--avatar-font-size: var(--text-sm);--status-dot-size: var(--xs2);--status-dot-border-width: 1px}.avatar-lg{--avatar-size: var(--xl3);--avatar-font-size: var(--text-xl);--status-dot-size: var(--xs3);--status-dot-position: 7%}.avatar-xl{--avatar-size: var(--xxl3);--avatar-font-size: var(--display-lg);--status-dot-size: var(--sm2);--status-dot-position: 7%}}@layer components{.badge{display:inline-block;padding:var(--xs1) var(--xs2);font-size:var(--badge-font-size);font-weight:var(--semi-bold);line-height:var(--leading-sm);color:var(--badge-color);background:var(--badge-background-color);border-radius:var(--badge-border-radius)}.badge.badge-primary{--badge-color: var(--badge-primary-color);--badge-background-color: var(--badge-primary-background-color)}.badge.badge-success{--badge-color: var(--badge-success-color);--badge-background-color: var(--badge-success-background-color)}.badge.badge-danger{--badge-color: var(--badge-danger-color);--badge-background-color: var(--badge-danger-background-color)}.badge.badge-warning{--badge-color: var(--badge-warning-color);--badge-background-color: var(--badge-warning-background-color)}}@layer components{.banner{display:flex;align-items:center;justify-content:center;gap:var(--xs3);padding:var(--xs2) var(--sm1);font-size:var(--text-sm);text-align:center;color:var(--banner-color);background:var(--banner-background-color)}.banner a{color:inherit;font-weight:var(--semi-bold)}.banner_content p{margin-bottom:0}.banner_close{display:flex;align-items:center;justify-content:center;min-width:var(--sm3);min-height:var(--sm3);padding:var(--xs1);color:inherit;background:transparent;border:none;cursor:pointer}.banner_close svg{width:var(--sm1);height:var(--sm1)}}@layer components{.breadcrumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--xs2);margin:0;padding:0;list-style:none;font-size:var(--text-sm)}.breadcrumbs li{display:flex;align-items:center;gap:var(--xs2)}.breadcrumbs li+li:before{content:var(--breadcrumbs-separator);color:var(--breadcrumbs-separator-color)}@supports (content: "a" / "a"){.breadcrumbs li+li:before{content:var(--breadcrumbs-separator) / ""}}.breadcrumbs a{color:var(--breadcrumbs-color);-webkit-text-decoration:none;text-decoration:none;transition:color var(--transition)}:is(.breadcrumbs a):hover{color:var(--link-color)}.breadcrumbs [aria-current=page]{color:var(--breadcrumbs-color-current);font-weight:var(--semi-bold)}}@layer components{.button,.bt{display:inline-flex;display:inline flex;justify-content:center;align-items:center;min-width:var(--bt-min-width);min-height:var(--md3);padding-inline:var(--xs3);font-weight:var(--bt-font-weight);font-size:var(--bt-font-size);-webkit-text-decoration:none;text-decoration:none;color:var(--bt-color);background-color:var(--bt-background-color);border:var(--bt-border-width) solid var(--bt-border-color);border-radius:var(--bt-border-radius);cursor:pointer;transition:color var(--transition-fast),background-color var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast)}:is(.button,.bt):where(:not(:disabled):hover){color:var(--bt-color-hover);background-color:var(--bt-background-color-hover);border-color:var(--bt-border-color-hover, var(--bt-border-color))}:is(.button,.bt):where(:not(:disabled):active){transform:scale(.97)}[aria-disabled=true]:is(.button,.bt),:is(.button,.bt):disabled{opacity:var(--o-2);pointer-events:none}:is(.button,.bt) svg{width:var(--sm1);height:var(--sm1);margin-inline-start:0;margin-inline-end:.5em}.bt-tightIcon:is(.button,.bt) svg{margin-inline-end:.25em;margin-inline-start:calc(var(--xs2) * -1)}.bt-outline:is(.button,.bt){--bt-background-color: transparent;--bt-border-color: var(--bt-outline-border-color);--bt-color-hover: var(--bt-outline-color-hover);--bt-background-color-hover: var(--bt-outline-background-color-hover);--bt-border-color-hover: var(--bt-outline-border-color-hover)}.bt-text:is(.button,.bt){--bt-border-color: transparent;--bt-background-color: transparent;--bt-color-hover: var(--link-color);--bt-background-color-hover: transparent;--bt-border-color-hover: transparent}.bt-outline-white:is(.button,.bt){--bt-color: var(--base-0);--bt-color-hover: var(--base-0);--bt-background-color: transparent;--bt-background-color-hover: rgb(255 255 255 / .1);--bt-border-color: var(--base-0);--bt-border-color-hover: var(--base-0)}.bt-white:is(.button,.bt){--bt-color: var(--primary-700);--bt-color-hover: var(--primary-600);--bt-background-color: var(--base-0);--bt-background-color-hover: var(--primary-50);--bt-border-color: var(--base-0);--bt-border-color-hover: var(--base-0)}.bt-primary:is(.button,.bt){--bt-color: var(--bt-primary-color);--bt-color-hover: var(--bt-primary-color-hover);--bt-background-color: var(--bt-primary-background-color);--bt-background-color-hover: var(--bt-primary-background-color-hover);--bt-border-color: var(--bt-primary-border-color);--bt-border-color-hover: var(--bt-primary-background-color-hover)}.bt-primary.bt-outline:is(.button,.bt){--bt-color: var(--bt-primary-background-color);--bt-color-hover: var(--bt-primary-color);--bt-background-color: transparent;--bt-background-color-hover: var(--bt-primary-background-color);--bt-border-color-hover: var(--bt-primary-border-color-hover)}.bt-yes:is(.button,.bt){--bt-color: var(--base-0);--bt-color-hover: var(--yes-500);--bt-background-color: var(--yes-500);--bt-background-color-hover: var(--yes-100);--bt-border-color: var(--yes-500);--bt-border-color-hover: var(--yes-100)}.bt-yes.bt-outline:is(.button,.bt){--bt-color: var(--yes-500);--bt-color-hover: var(--base-0);--bt-background-color: transparent;--bt-background-color-hover: var(--yes-500);--bt-border-color-hover: var(--yes-500)}.bt-no:is(.button,.bt){--bt-color: var(--base-0);--bt-color-hover: var(--no-500);--bt-background-color: var(--no-500);--bt-background-color-hover: var(--no-100);--bt-border-color: var(--no-500);--bt-border-color-hover: var(--no-100)}.bt-no.bt-outline:is(.button,.bt){--bt-color: var(--no-500);--bt-color-hover: var(--base-0);--bt-background-color: transparent;--bt-background-color-hover: var(--no-500);--bt-border-color-hover: var(--no-500)}.bt-maybe:is(.button,.bt){--bt-color: var(--base-0);--bt-color-hover: var(--maybe-500);--bt-background-color: var(--maybe-500);--bt-background-color-hover: var(--maybe-100);--bt-border-color: var(--maybe-500);--bt-border-color-hover: var(--maybe-100)}.bt-maybe.bt-outline:is(.button,.bt){--bt-color: var(--maybe-500);--bt-color-hover: var(--base-0);--bt-background-color: transparent;--bt-background-color-hover: var(--maybe-500);--bt-border-color-hover: var(--maybe-500)}.bt-md{min-width:var(--bt-min-width-md);min-height:var(--lg2);padding-inline:var(--xs3)}.bt-lg{min-width:var(--bt-min-width-lg);min-height:var(--xl1);padding-inline:var(--sm2);font-size:var(--bt-font-size-lg);border-radius:var(--bt-border-radius-lg)}.bt-lg svg{width:var(--sm3);height:var(--sm3)}.bt-lg.bt-tightIcon svg{margin-inline-start:calc(var(--xs3) * -1)}}@layer components{.card{--loading-animation: 2s infinite ease-in-out;position:relative;display:flex;flex-direction:column;padding:var(--card-spacing);color:var(--card-color);border-radius:var(--card-border-radius);border:var(--card-border-width) solid var(--card-border-color);transition:box-shadow var(--transition)}.card.is-disabled{opacity:var(--o-2);pointer-events:none}.card-filled{background:var(--card-bg-color);border:none}.card-raised{border:var(--card-border-width) solid var(--card-border-color);box-shadow:var(--card-shadow)}.card-raised:hover:not(.is-disabled){box-shadow:var(--card-shadow-hover)}.card_link:after{content:"";position:absolute;inset:0}.card_header{display:grid;grid-template-columns:1fr minmax(min-content,max-content);align-items:start;gap:var(--xs2);margin-bottom:var(--xs3)}.card_header:has(+.card_media){margin-bottom:var(--card-spacing)}.card_title{margin-bottom:0;font-size:var(--text-lg);font-weight:var(--semi-bold)}.card_title a{color:var(--card-color);-webkit-text-decoration:none;text-decoration:none;transition:color var(--transition)}:is(.card_title a):hover{color:var(--link-color)}.card_header_text p{font-size:var(--text-lg);color:var(--card-secondary-text-color)}.card_badges{display:flex;flex-wrap:wrap;gap:var(--xs2);justify-content:flex-end;transform:translate(var(--xs2),calc(var(--xs2) * -1))}.card_tags{position:relative;z-index:var(--z-1);margin-bottom:var(--sm2)}.card_media{margin-bottom:var(--card-spacing);overflow:hidden;border-radius:var(--card-border-radius)}.card_media-flush{margin:calc(var(--card-spacing) * -1);margin-bottom:var(--card-spacing);border-radius:var(--card-border-radius) var(--card-border-radius) 0 0}.card_image{width:100%;object-fit:cover;aspect-ratio:var(--card-aspect-ratio)}.card_content p:last-of-type{margin-bottom:0}.card_content:has(+.card_byline){margin-bottom:var(--sm1)}.card_byline{display:flex;align-items:center;gap:var(--xs2);margin-top:auto;font-size:var(--text-sm)}.card_byline time{color:var(--card-secondary-text-color)}.card_author{display:block;font-weight:var(--semi-bold)}.card_actions{display:flex;justify-content:flex-end;gap:var(--xs3);position:relative;margin-top:var(--card-spacing)}.card_placeholder{width:100%;aspect-ratio:var(--card-aspect-ratio);background:var(--card-loading-bg);animation:pulse var(--loading-animation)}.card_loading{display:flex;flex-direction:column;gap:var(--xs2)}.card_loadingLine{height:var(--sm1);background:var(--card-loading-bg);border-radius:var(--radius-sm);animation:pulse var(--loading-animation)}.card_loadingLine-short{width:75%}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}}@layer components{.faq{display:grid;gap:var(--faq-spacing)}.faq_content{cursor:auto}.faq_content p:last-of-type{margin-bottom:0}}@layer components{.featureItem{align-content:start}.featureItem_icon{display:flex;align-items:center;justify-content:center;width:var(--featureItem-icon-box-size);height:var(--featureItem-icon-box-size);margin-bottom:var(--sm1);color:var(--featureItem-icon-color);background-color:var(--featureItem-icon-background-color);border-radius:var(--featureItem-icon-border-radius)}.featureItem_icon svg{width:var(--featureItem-icon-size);height:var(--featureItem-icon-size)}.featureItem_title{margin-bottom:var(--xs2);font-size:var(--text-lg);font-weight:var(--semi-bold)}.featureItem_text p:last-of-type{margin-bottom:0}}@layer components{.field{position:relative;display:grid;gap:var(--field-spacing)}.field label{margin-bottom:0}.field_hint,.field_error{position:var(--field-message-position);top:calc(100% + var(--field-spacing));inset-inline:0;font-size:var(--text-sm)}.field_hint{color:var(--field-hint-color)}.field_error{display:none;color:var(--field-error-color)}:is(.field:has(:user-invalid),.field.is-invalid) .field_error{display:block}:is(.field:has(:user-invalid),.field.is-invalid):has(.field_error) .field_hint{display:none}.field.is-invalid :is(input,select,textarea){border-color:var(--input-border-color-invalid)}}@layer components{.fieldRow{--field-message-position: absolute;display:flex;flex-wrap:wrap;align-items:end;gap:var(--xs3)}.fieldRow_field{flex:1 1 200px}}@layer components{.footer{padding:var(--md3) var(--sm3);line-height:var(--leading-xl);color:var(--footer-text-color);background-color:var(--footer-background-color);border-top:var(--footer-border-width) dashed var(--footer-border-color);transition:background-color var(--transition)}@media(width>=768px){.footer{display:grid;gap:var(--md3);grid-template-columns:25% 1fr;padding:var(--lg3) var(--md3)}}.footer a{color:var(--footer-link-color);-webkit-text-decoration:none;text-decoration:none;font-weight:var(--book);transition:color var(--transition)}:is(.footer a):hover{color:var(--footer-link-color-hover)}.footer_meta{grid-column:1;grid-row:1}.footer_nav ul{margin:0;padding:0;list-style:none}:is(.footer_nav ul) li{margin:0}@media(width>=768px){.footer_nav>ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--sm3)}}:is(.footer_nav>ul) ul{margin-bottom:var(--md3)}@media(width>=768px){:is(.footer_nav>ul) ul{margin-bottom:0}}:is(:is(.footer_nav>ul) ul) li:not(:last-child){margin-bottom:var(--xs1)}}@layer components{.header{display:flex;align-items:center;gap:var(--sm3);height:var(--header-height);padding-inline:var(--header-padding);background-color:var(--header-background-color)}.header-sticky{position:sticky;top:0;z-index:var(--z-5);box-shadow:var(--shadow-sm)}.header-sticky.is-top{box-shadow:none}.header_logo{display:flex;align-items:center;gap:var(--sm2);font-size:var(--text-md);font-weight:var(--semi-bold);-webkit-text-decoration:none;text-decoration:none;color:var(--text-color)}.header_nav{display:none;margin-inline-start:auto}@media(width>=768px){.header_nav{display:block}}.header_nav ul{display:flex;gap:var(--md3);margin:0;padding:0;list-style:none}:is(.header_nav ul) li{margin:0}:is(.header_nav ul) a{display:flex;align-items:center;height:var(--header-height);font-size:var(--text-sm);font-weight:var(--bold);-webkit-text-decoration:none;text-decoration:none;color:var(--text-color);transition:color var(--transition)}:is(:is(.header_nav ul) a):hover,[aria-current]:is(:is(.header_nav ul) a){color:var(--link-color)}.header_actions{display:none}@media(width>=768px){.header_actions{display:flex;align-items:center;gap:var(--sm3)}}.header_navMobile{margin-inline-start:auto}@media(width>=768px){.header_navMobile{display:none}}.header_navMobile button{display:flex;align-items:center;justify-content:center;min-width:var(--sm3);min-height:var(--sm3);padding:var(--xs2);color:var(--text-color);background:transparent;border:none;cursor:pointer}.header_navMobile>div{display:none;position:fixed;top:0;left:0;width:100vw;height:100svh;overflow-y:auto;padding:var(--lg3);background-color:var(--header-menu-background-color);z-index:var(--z-5)}.is-open:is(.header_navMobile>div){display:block}:is(.header_navMobile>div) button{position:fixed;top:0;right:0;padding:var(--sm1) var(--sm3);color:var(--header-menu-color)}:is(.header_navMobile>div) a{color:var(--header-menu-color);-webkit-text-decoration:none;text-decoration:none}[aria-current]:is(:is(.header_navMobile>div) a){color:var(--header-menu-color-current)}:is(.header_navMobile>div) ul{margin:0;padding:0;list-style:none}:is(:is(.header_navMobile>div) ul) li{margin:0}:is(.header_navMobile>div)>ul{font-size:var(--text-lg)}:is(:is(.header_navMobile>div)>ul) li{margin-top:var(--sm1)}:is(:is(.header_navMobile>div)>ul) ul{padding-inline-start:var(--sm1);border-inline-start:1px solid var(--header-menu-border-color)}:is(:is(:is(.header_navMobile>div)>ul) ul) a{color:var(--header-menu-secondary-color)}[aria-current]:is(:is(:is(:is(.header_navMobile>div)>ul) ul) a){color:var(--header-menu-color-current)}.header_menuExtra{display:flex;margin-bottom:var(--sm3)}}@layer components{.section{padding-block:var(--section-spacing)}.section-filled{background-color:var(--section-filled-background-color)}.section-primary{background-color:var(--section-primary-background-color);color:var(--section-primary-text-color);--text-color: var(--section-primary-text-color);--link-color: var(--section-primary-link-color);--link-color-hover: var(--section-primary-link-color-hover);--section-eyebrow-color: var(--section-primary-eyebrow-color);--section-lede-color: var(--section-primary-lede-color)}.section_header{margin-bottom:var(--section-header-spacing);text-align:center}.section_eyebrow{margin-bottom:var(--xs2);font-size:var(--text-sm);font-weight:var(--semi-bold);letter-spacing:var(--tracking-lg);text-transform:uppercase;color:var(--section-eyebrow-color)}.section_title{margin-bottom:var(--xs3);font-size:var(--display-md)}.section_lede{font-size:var(--text-lg);color:var(--section-lede-color)}.section_actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--xs3)}}@layer components{.hero_wrap{position:relative;display:flex;align-items:center;justify-content:center;min-height:60svh;overflow:hidden}.hero_overlay{position:absolute;inset:0;pointer-events:none;z-index:2}.hero_content{padding:var(--hero-content-padding);max-width:70ch}.hero_actions{display:flex;flex-wrap:wrap;gap:var(--xs3);margin-top:var(--hero-actions-spacing)}.hero_media{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.hero_media img,.hero_media video{width:100%;height:100%;object-fit:cover}.hero_bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}.hero-split{--hero-ratio-left: 62fr;--hero-ratio-right: 38fr;display:grid;align-items:center;grid-template-columns:1fr}@media(width>=768px){.hero-split{grid-template-columns:var(--hero-ratio-left) var(--hero-ratio-right)}}@media(width>=768px){.hero-split.hero-reversed div:nth-child(1){order:2}.hero-split.hero-reversed div:nth-child(2){order:1}.hero-split.hero-flush:not(.hero-reversed) .hero_media+.hero_content{padding-inline-end:0}.hero-split.hero-flush:not(.hero-reversed) .hero_content:has(+.hero_media){padding-inline-start:0}.hero-split.hero-flush.hero-reversed .hero_media+.hero_content{padding-inline-start:0}.hero-split.hero-flush.hero-reversed .hero_content:has(+.hero_media){padding-inline-end:0}}.hero-full .hero_content{z-index:2;text-align:center;max-width:60ch;min-width:200px}.hero-full .hero_actions{justify-content:center}.hero-roundCorners .hero_media{overflow:hidden;border-radius:var(--hero-radius)}.hero-roundCorners .hero_wrap{border-radius:var(--hero-radius)}.hero-slideshow .hero_content{position:relative;width:50ch}.hero-slideshow .hero_actions{justify-content:center}.hero-slideshow .hero_content ul>li,.hero-slideshow .hero_bg{z-index:2;position:absolute;inset:0;text-align:center;pointer-events:none;opacity:0;transition-property:opacity;transition-timing-function:ease-in-out;transition-duration:var(--slideshow-transition, .22s)}.is-active:is(.hero-slideshow .hero_content ul>li,.hero-slideshow .hero_bg){opacity:1;pointer-events:auto}.hero_pagination{position:absolute;left:0;right:0;bottom:var(--md1);display:flex;justify-content:center;align-items:center;gap:var(--xs1);z-index:2}.hero_pagination_dot{display:grid;place-items:center;width:max(var(--hero-pagination-dot),24px);height:max(var(--hero-pagination-dot),24px);padding:0;background:transparent;border:none;cursor:pointer}.hero_pagination_dot:before{content:"";width:var(--hero-pagination-dot);height:var(--hero-pagination-dot);border-radius:var(--radius-round);background:var(--hero-pagination-dot-color);opacity:var(--hero-pagination-opacity);box-shadow:var(--shadow-sm);transition:opacity var(--transition),background-color var(--transition)}.hero_pagination_dot.is-active:before{opacity:1;background:var(--hero-pagination-dot-active-color)}}@layer components{.pagination ul{display:flex;flex-wrap:wrap;align-items:center;gap:var(--xs1);margin:0;padding:0;list-style:none}.pagination a,.pagination span{display:flex;align-items:center;justify-content:center;min-width:var(--pagination-size);min-height:var(--pagination-size);font-size:var(--text-sm);font-weight:var(--semi-bold);-webkit-text-decoration:none;text-decoration:none;color:var(--pagination-color);border-radius:var(--pagination-border-radius);transition:background-color var(--transition-fast)}.pagination a:hover{background-color:var(--pagination-background-color-hover)}.pagination a[aria-current=page]{color:var(--pagination-color-current);background-color:var(--pagination-background-color-current)}.pagination_arrow svg{width:var(--sm1);height:var(--sm1)}.pagination_arrow[aria-disabled=true]{opacity:var(--o-2)}.pagination_arrow-prev svg{rotate:90deg}.pagination_arrow-next svg{rotate:-90deg}}@layer components{.prevNext{display:grid;grid-template-columns:1fr 1fr;gap:var(--sm1)}.prevNext_link{display:grid;align-content:start;gap:var(--xs1);padding:var(--sm1);-webkit-text-decoration:none;text-decoration:none;color:var(--text-color);border:var(--border-sm) solid var(--prevNext-border-color);border-radius:var(--prevNext-border-radius);transition:border-color var(--transition)}.prevNext_link:hover{border-color:var(--prevNext-border-color-hover)}.prevNext_link small{color:var(--prevNext-label-color)}.prevNext_link span{font-weight:var(--semi-bold)}.prevNext_link-prev{grid-column:1}.prevNext_link-next{grid-column:2;text-align:end}}@layer components{.pricingCard{display:flex;flex-direction:column}.pricingCard-highlighted{border-color:var(--pricingCard-highlight-border-color);box-shadow:0 0 0 var(--border-sm) var(--pricingCard-highlight-border-color)}.pricingCard_header{display:flex;align-items:center;justify-content:space-between;gap:var(--xs2);margin-bottom:var(--sm1)}.pricingCard_name{margin-bottom:0;font-size:var(--text-lg);font-weight:var(--semi-bold)}.pricingCard_price{display:flex;align-items:baseline;gap:var(--xs1);margin-bottom:var(--sm1)}.pricingCard_amount{font-family:var(--heading-font);font-size:var(--display-md);font-weight:var(--black);line-height:var(--leading-xs)}.pricingCard_period,.pricingCard_description{color:var(--card-secondary-text-color)}.pricingCard_period{font-size:var(--text-sm)}.pricingCard_description{margin-bottom:var(--sm1)}.pricingCard_features{display:grid;gap:var(--xs2);margin:0 0 var(--sm3);padding:0;list-style:none}.pricingCard_features li{display:flex;align-items:start;gap:var(--xs2)}.pricingCard_check{flex:none;display:flex;margin-top:var(--xs1);color:var(--pricingCard-check-color)}.pricingCard_check svg{width:var(--sm1);height:var(--sm1)}.pricingCard_cta{display:grid;margin-top:auto}}@layer components{.testimonial{display:grid;align-content:start;gap:var(--sm1)}.testimonial_quote{margin-bottom:0}.testimonial_byline{display:flex;align-items:center;gap:var(--xs2);font-size:var(--text-sm)}.testimonial_name{display:block;font-weight:var(--semi-bold)}.testimonial_role{display:block;color:var(--testimonial-role-color)}}@layer components{.readProgressBar{position:fixed;top:0;left:0;width:100%;height:var(--readProgressBar-height);z-index:var(--z-5)}.readProgressBar>div{width:100%;height:100%;background:var(--readProgressBar-color);animation:bar linear;animation-timeline:scroll(root y)}@keyframes bar{0%{width:0}to{width:100vw}}}@layer components{.notice{--bg-color: var(--notice-background-color);--bd-color: var(--notice-border-color);--svg-color: inherit;--code-color: inherit;--code-bg-color: inherit;padding:var(--notice-spacing);border:var(--notice-border-width) solid var(--bd-color);border-radius:var(--notice-border-radius);color:var(--notice-text-color);background-color:var(--bg-color)}.notice code{background-color:var(--code-bg-color);color:var(--code-color)}.notice p:last-of-type{margin-bottom:0}.notice_title{display:flex}.notice_title svg{margin-bottom:var(--xs3);margin-inline-end:.5em;color:var(--svg-color)}.notice_title strong{display:block;margin-bottom:var(--xs1)}.notice-info{color:var(--base-950);--bg-color: var(--primary-100);--bd-color: var(--primary-300);--svg-color: var(--primary-400);--code-color: var(--primary-600);--code-bg-color: var(--primary-200)}.notice-danger{color:var(--base-950);--bg-color: var(--no-200);--bd-color: var(--no-500);--svg-color: var(--no-500);--code-color: var(--no-500);--code-bg-color: var(--no-100)}.notice-warning{color:var(--base-950);--bg-color: var(--maybe-200);--bd-color: var(--maybe-500);--svg-color: var(--maybe-400);--code-color: var(--maybe-500);--code-bg-color: var(--maybe-100)}.notice-confirm{color:var(--base-950);--bg-color: var(--yes-100);--bd-color: var(--yes-500);--svg-color: var(--yes-400);--code-color: var(--yes-500);--code-bg-color: var(--yes-200)}@scope(.prose)to (.not-prose){.notice:has(+:is(h1,h2,h3,h4)){margin-bottom:calc(var(--prose-spacing) * 2)}}}@layer components{.socialMedia{--icon-size: var(--sm3);display:flex;flex-wrap:wrap;gap:var(--sm1);list-style:none;padding:0;margin:0}.socialMedia a{display:block;width:var(--icon-size);height:var(--icon-size)}:is(.socialMedia a) svg{width:var(--icon-size);height:var(--icon-size)}.socialMedia-md{--icon-size: var(--md2)}.socialMedia-lg{--icon-size: var(--lg2);gap:var(--sm2)}.socialMedia-xl{--icon-size: var(--xl2);gap:var(--md2)}}@layer components{.tags li{margin-bottom:var(--xs2)}:is(.tags li):last-child{margin-bottom:0}.tags a{padding:var(--xs1) var(--tags-padding);-webkit-text-decoration:none;text-decoration:none;text-transform:lowercase;font-size:var(--tags-font-size);font-style:normal;color:var(--tags-color);border-radius:var(--tags-radius);background-color:var(--tags-background-color);transition:background-color var(--transition)}:is(.tags a):hover{background-color:var(--tags-background-color-hover)}.tags-inline{display:flex;flex-wrap:wrap;gap:var(--xs2)}.tags-inline li{margin-bottom:0}}@layer components{.tiles{--tiles-columns: 1;display:grid;grid-template-columns:repeat(var(--tiles-columns),1fr);grid-column-gap:var(--grid-column-gap);grid-row-gap:var(--grid-row-gap);margin:0;padding:0;list-style:none}.tiles>li{display:grid}@container (width >= 36rem){.tiles{--tiles-columns: 2}}@container (width >= 56rem){.tiles{--tiles-columns: 3}}@container (width >= 76rem){.tiles{--tiles-columns: 4}}@container (width >= 96rem){.tiles{--tiles-columns: 5}}@container (width >= 116rem){.tiles{--tiles-columns: 6}}@container (width >= 28rem){.tiles-sm{--tiles-columns: 2}}@container (width >= 44rem){.tiles-sm{--tiles-columns: 3}}@container (width >= 60rem){.tiles-sm{--tiles-columns: 4}}@container (width >= 76rem){.tiles-sm{--tiles-columns: 5}}@container (width >= 92rem){.tiles-sm{--tiles-columns: 6}}.tiles_container{container-type:inline-size}}@layer components{.toc:not(:has(li:nth-of-type(2))){display:none}.toc p{margin-bottom:var(--xs2)}.toc ul{font-size:var(--text-sm)}:is(.toc ul) ul{margin-inline-start:var(--toc-indentation)}.toc>ul>li:first-child>a:first-child{padding-top:0}.toc a{display:flex;align-items:center;padding-top:calc(var(--toc-spacing) / 2);padding-bottom:calc(var(--toc-spacing) / 2);-webkit-text-decoration:none;text-decoration:none;color:var(--toc-color);transition:color var(--transition)}:is(.toc a):hover{color:var(--toc-color-hover)}:is(.toc a) span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.is-active:is(.toc a){color:var(--toc-color-hover)}.is-active:is(.toc a) svg{transform:translate(calc(var(--xs1) * -1));opacity:var(--o-5)}.toc-icon a{margin-inline-start:calc(var(--toc-icon-size) * -1)}.toc-icon svg{width:var(--toc-icon-size);height:var(--toc-icon-size);flex-shrink:0;opacity:var(--o-0);transform:translate(calc(var(--toc-icon-size) * -1));transition:opacity var(--transition),transform var(--transition)}}@layer components{.toggle{--toggle-w: var(--toggle-width);--toggle-h: var(--toggle-height);--toggle-bd: var(--toggle-border-width);position:relative;appearance:none;border:none;padding:0;display:block;width:var(--toggle-w);height:var(--toggle-h);border-radius:calc(var(--toggle-h) / 2);cursor:pointer;background-color:var(--toggle-track-color)}.toggle:before{--diameter: calc(var(--toggle-h) - var(--toggle-bd) * 2);position:absolute;top:var(--toggle-bd);left:var(--toggle-bd);content:"";display:block;width:var(--diameter);height:var(--diameter);border-radius:var(--diameter);background-color:var(--toggle-thumb-color);transition:left var(--transition),transform var(--transition),width var(--transition);transform:translate(0)}.toggle:checked{background-color:var(--toggle-track-color-checked)}.toggle:checked:before{left:calc(100% - var(--toggle-bd));transform:translate(-100%)}.toggle:active:before{width:calc(var(--diameter) * 1.3)}} diff --git a/dist/mcss.css b/dist/mcss.css index 4b0ebe8..0a52111 100644 --- a/dist/mcss.css +++ b/dist/mcss.css @@ -1,4 +1,4 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ @layer settings, base, elements, global, components, theme, helpers; /* @@ -3134,1877 +3134,14 @@ details { } } -/* Component library styles */ - -@layer components{ - -.avatar { - --avatar-size: var(--xl1); - --avatar-font-size: var(--text-md); - /* Status dot defaults live on the block (not on .is-online/.is-offline, - which would out-specify them) so the size modifiers below can override. */ - --status-dot-size: var(--xs3); - --status-dot-position: 4%; - --status-dot-border-width: 2px; - --status-dot-border-color: var(--body-background-color); - position: relative; - display: inline-block; - width: var(--avatar-size); -} - - .avatar > div { - display: flex; - justify-content: center; - aspect-ratio: 1; - align-items: center; - border-radius: var(--avatar-radius); - font-size: var(--avatar-font-size); - line-height: 1; - background-color: var(--avatar-background-color); - border: var(--avatar-border-width) solid var(--avatar-border-color); - color: var(--avatar-color); - overflow: hidden; - } - :is(.avatar.is-online,.avatar.is-offline):after { - content: ""; - display: block; - width: var(--status-dot-size); - aspect-ratio: 1; - position: absolute; - top: var(--status-dot-position); - right: var(--status-dot-position); /* deliberately physical: dot pinned to a visual corner */ - border: var(--status-dot-border-width) solid var(--status-dot-border-color); - border-radius: var(--radius-round); - background-color: var(--avatar-status-dot-color-offline); - } - .avatar.is-online:after { - background-color: var(--avatar-status-dot-color-online); - } - -.avatar-sm { - --avatar-size: var(--sm3); - --avatar-font-size: var(--text-xs); - --status-dot-size: var(--xs2); - --status-dot-position: 0; - --status-dot-border-width: 1px; -} -.avatar-md { - --avatar-size: var(--md3); - --avatar-font-size: var(--text-sm); - --status-dot-size: var(--xs2); - --status-dot-border-width: 1px; -} -.avatar-lg { - --avatar-size: var(--xl3); - --avatar-font-size: var(--text-xl); - --status-dot-size: var(--xs3); - --status-dot-position: 7%; -} -.avatar-xl { - --avatar-size: var(--xxl3); - --avatar-font-size: var(--display-lg); - --status-dot-size: var(--sm2); - --status-dot-position: 7%; -} -} - -@layer components{ - -/* BADGE */ - -.badge { - display: inline-block; - padding: var(--xs1) var(--xs2); - font-size: var(--badge-font-size); - font-weight: var(--semi-bold); - line-height: var(--leading-sm); - color: var(--badge-color); - background: var(--badge-background-color); - border-radius: var(--badge-border-radius); - - /* Variants only swap the local custom properties */ -} - - .badge.badge-primary { - --badge-color: var(--badge-primary-color); - --badge-background-color: var(--badge-primary-background-color); - } - - .badge.badge-success { - --badge-color: var(--badge-success-color); - --badge-background-color: var(--badge-success-background-color); - } - - .badge.badge-danger { - --badge-color: var(--badge-danger-color); - --badge-background-color: var(--badge-danger-background-color); - } - - .badge.badge-warning { - --badge-color: var(--badge-warning-color); - --badge-background-color: var(--badge-warning-background-color); - } -} - -@layer components{ - -/* BANNER */ - -.banner { - display: flex; - align-items: center; - justify-content: center; - gap: var(--xs3); - padding: var(--xs2) var(--sm1); - font-size: var(--text-sm); - text-align: center; - color: var(--banner-color); - background: var(--banner-background-color); -} - - .banner a { - color: inherit; - font-weight: var(--semi-bold); - } - .banner_content p { - margin-bottom: 0; - } - -.banner_close { - display: flex; - align-items: center; - justify-content: center; - min-width: var(--sm3); - min-height: var(--sm3); - padding: var(--xs1); - color: inherit; - background: transparent; - border: none; - cursor: pointer; -} - - .banner_close svg { - width: var(--sm1); - height: var(--sm1); - } -} - -@layer components{ - -/* BREADCRUMBS */ - .breadcrumbs ol { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: var(--xs2); - margin: 0; - padding: 0; - list-style: none; - font-size: var(--text-sm); - } - - .breadcrumbs li { - display: flex; - align-items: center; - gap: var(--xs2); - } - - /* separator between crumbs; the / "" alt text keeps it out of the - accessibility tree in browsers that support the syntax */ - .breadcrumbs li + li::before { - content: var(--breadcrumbs-separator); - color: var(--breadcrumbs-separator-color); - } - -@supports (content: "a" / "a"){ -.breadcrumbs li + li::before { - content: var(--breadcrumbs-separator) / ""; - } -} - - .breadcrumbs a { - color: var(--breadcrumbs-color); - -webkit-text-decoration: none; - text-decoration: none; - transition: color var(--transition); - } - - :is(.breadcrumbs a):hover { - color: var(--link-color); - } - - .breadcrumbs [aria-current="page"] { - color: var(--breadcrumbs-color-current); - font-weight: var(--semi-bold); - } -} - -@layer components{ - -.button, -.bt { - display: inline-flex; - display: inline flex; - justify-content: center; - align-items: center; - min-width: var(--bt-min-width); - min-height: var(--md3); - padding-inline: var(--xs3); - font-weight: var(--bt-font-weight); - font-size: var(--bt-font-size); - -webkit-text-decoration: none; - text-decoration: none; - color: var(--bt-color); - background-color: var(--bt-background-color); - border: var(--bt-border-width) solid var(--bt-border-color); - border-radius: var(--bt-border-radius); - cursor: pointer; - /* hover swaps the colors, :active scales; "all" would also animate - late-arriving layout changes (dev-server style injection, HMR) */ - transition: - color var(--transition-fast), - background-color var(--transition-fast), - border-color var(--transition-fast), - transform var(--transition-fast); -} - - :is(.button,.bt):where(:not(:disabled):hover) { - color: var(--bt-color-hover); - background-color: var(--bt-background-color-hover); - border-color: var(--bt-border-color-hover, var(--bt-border-color)); - } - - :is(.button,.bt):where(:not(:disabled):active) { - transform: scale(0.97); - } - - [aria-disabled="true"]:is(.button,.bt),:is(.button,.bt):disabled { - opacity: var(--o-2); - pointer-events: none; - } - - :is(.button,.bt) svg { - width: var(--sm1); - height: var(--sm1); - margin-inline-start: 0; - margin-inline-end: 0.5em; - } - - /* icon options */ - /* also tweaked under .bt-lg under "sizes" section */ - .bt-tightIcon:is(.button,.bt) svg { - margin-inline-end: 0.25em; - margin-inline-start: calc(var(--xs2) * -1); - } - - /* Colors */ - /* Variants only swap the local custom properties */ - - .bt-outline:is(.button,.bt) { - --bt-background-color: transparent; - --bt-border-color: var(--bt-outline-border-color); - --bt-color-hover: var(--bt-outline-color-hover); - --bt-background-color-hover: var(--bt-outline-background-color-hover); - --bt-border-color-hover: var(--bt-outline-border-color-hover); - } - - .bt-text:is(.button,.bt) { - --bt-border-color: transparent; - --bt-background-color: transparent; - --bt-color-hover: var(--link-color); - --bt-background-color-hover: transparent; - --bt-border-color-hover: transparent; - } - - .bt-outline-white:is(.button,.bt) { - --bt-color: var(--base-0); - --bt-color-hover: var(--base-0); - --bt-background-color: transparent; - --bt-background-color-hover: rgb(255 255 255 / 0.1); - --bt-border-color: var(--base-0); - --bt-border-color-hover: var(--base-0); - } - - /* Solid inverse for colored/gradient surfaces (pairs with bt-outline-white) */ - .bt-white:is(.button,.bt) { - --bt-color: var(--primary-700); - --bt-color-hover: var(--primary-600); - --bt-background-color: var(--base-0); - --bt-background-color-hover: var(--primary-50); - --bt-border-color: var(--base-0); - --bt-border-color-hover: var(--base-0); - } - - .bt-primary:is(.button,.bt) { - --bt-color: var(--bt-primary-color); - --bt-color-hover: var(--bt-primary-color-hover); - --bt-background-color: var(--bt-primary-background-color); - --bt-background-color-hover: var(--bt-primary-background-color-hover); - --bt-border-color: var(--bt-primary-border-color); - --bt-border-color-hover: var(--bt-primary-background-color-hover); - } - - .bt-primary.bt-outline:is(.button,.bt) { - --bt-color: var(--bt-primary-background-color); - --bt-color-hover: var(--bt-primary-color); - --bt-background-color: transparent; - --bt-background-color-hover: var(--bt-primary-background-color); - --bt-border-color-hover: var(--bt-primary-border-color-hover); - } - - .bt-yes:is(.button,.bt) { - --bt-color: var(--base-0); - --bt-color-hover: var(--yes-500); - --bt-background-color: var(--yes-500); - --bt-background-color-hover: var(--yes-100); - --bt-border-color: var(--yes-500); - --bt-border-color-hover: var(--yes-100); - } - - .bt-yes.bt-outline:is(.button,.bt) { - --bt-color: var(--yes-500); - --bt-color-hover: var(--base-0); - --bt-background-color: transparent; - --bt-background-color-hover: var(--yes-500); - --bt-border-color-hover: var(--yes-500); - } - - .bt-no:is(.button,.bt) { - --bt-color: var(--base-0); - --bt-color-hover: var(--no-500); - --bt-background-color: var(--no-500); - --bt-background-color-hover: var(--no-100); - --bt-border-color: var(--no-500); - --bt-border-color-hover: var(--no-100); - } - - .bt-no.bt-outline:is(.button,.bt) { - --bt-color: var(--no-500); - --bt-color-hover: var(--base-0); - --bt-background-color: transparent; - --bt-background-color-hover: var(--no-500); - --bt-border-color-hover: var(--no-500); - } - - .bt-maybe:is(.button,.bt) { - --bt-color: var(--base-0); - --bt-color-hover: var(--maybe-500); - --bt-background-color: var(--maybe-500); - --bt-background-color-hover: var(--maybe-100); - --bt-border-color: var(--maybe-500); - --bt-border-color-hover: var(--maybe-100); - } - - .bt-maybe.bt-outline:is(.button,.bt) { - --bt-color: var(--maybe-500); - --bt-color-hover: var(--base-0); - --bt-background-color: transparent; - --bt-background-color-hover: var(--maybe-500); - --bt-border-color-hover: var(--maybe-500); - } - -/* Sizes */ - -.bt-md { - min-width: var(--bt-min-width-md); - min-height: var(--lg2); - padding-inline: var(--xs3); -} - -.bt-lg { - min-width: var(--bt-min-width-lg); - min-height: var(--xl1); - padding-inline: var(--sm2); - font-size: var(--bt-font-size-lg); - border-radius: var(--bt-border-radius-lg); -} - - .bt-lg svg { - width: var(--sm3); - height: var(--sm3); - } - .bt-lg.bt-tightIcon svg { - margin-inline-start: calc(var(--xs3) * -1); - } -} - -@layer components{ - -.card { - --loading-animation: 2s infinite ease-in-out; - - position: relative; - /* flex column so .card_byline can pin itself to the bottom */ - display: flex; - flex-direction: column; - padding: var(--card-spacing); - color: var(--card-color); - border-radius: var(--card-border-radius); - border: var(--card-border-width) solid var(--card-border-color); - transition: box-shadow var(--transition); -} - - .card.is-disabled { - opacity: var(--o-2); - pointer-events: none; - } - -.card-filled { - background: var(--card-bg-color); - border: none; -} - -.card-raised { - border: var(--card-border-width) solid var(--card-border-color); - box-shadow: var(--card-shadow); -} - -.card-raised:hover:not(.is-disabled) { - box-shadow: var(--card-shadow-hover); -} - -/* The card's single link, stretched over the whole card. Put .card_link on a - real anchor (usually the title link) so its text names the link. Positioned - parts later in the DOM (.card_actions) paint above the ::after and stay - clickable; parts before it need a z-index bump (.card_tags). */ -.card_link::after { - content: ""; - position: absolute; - inset: 0; -} - -.card_header { - display: grid; - grid-template-columns: 1fr minmax(min-content, max-content); - align-items: start; - gap: var(--xs2); - margin-bottom: var(--xs3); - /* we need extra spacing when there is an image after the header */ -} - .card_header:has( + .card_media) { - margin-bottom: var(--card-spacing); - } - -.card_title { - margin-bottom: 0; - font-size: var(--text-lg); - font-weight: var(--semi-bold); -} - - .card_title a { - color: var(--card-color); - -webkit-text-decoration: none; - text-decoration: none; - transition: color var(--transition); - } - - :is(.card_title a):hover { - color: var(--link-color); - } - .card_header_text p { - font-size: var(--text-lg); - color: var(--card-secondary-text-color); - } - -.card_badges { - display: flex; - flex-wrap: wrap; - gap: var(--xs2); - justify-content: flex-end; - transform: translate(var(--xs2), calc(var(--xs2) * -1)); -} - -/* Badge visuals come from the badge component (component.badge.css); the - Card component renders class="badge card_badge" on each badge. */ - -.card_tags { - /* keep the tags clickable above the stretched .card_link */ - position: relative; - z-index: var(--z-1); - margin-bottom: var(--sm2); -} - -.card_media { - margin-bottom: var(--card-spacing); - overflow: hidden; - border-radius: var(--card-border-radius); -} - -.card_media-flush { - /* edge-to-edge image on top of the card */ - margin: calc(var(--card-spacing) * -1); - margin-bottom: var(--card-spacing); - border-radius: var(--card-border-radius) var(--card-border-radius) 0 0; -} - -.card_image { - width: 100%; - object-fit: cover; - aspect-ratio: var(--card-aspect-ratio); -} - /* in case it's inside a .prose context */ - .card_content p:last-of-type { - margin-bottom: 0; - } - - /* guaranteed gap before the byline even when nothing pins it down */ - .card_content:has( + .card_byline) { - margin-bottom: var(--sm1); - } - -.card_byline { - /* margin-top: auto pins bylines to the bottom, so a row of cards lines up */ - display: flex; - align-items: center; - gap: var(--xs2); - margin-top: auto; - font-size: var(--text-sm); -} - - .card_byline time { - color: var(--card-secondary-text-color); - } - -.card_author { - display: block; - font-weight: var(--semi-bold); -} - -.card_actions { - display: flex; - justify-content: flex-end; - gap: var(--xs3); - /* positioned and after .card_link in the DOM, so actions paint above the - stretched link and stay clickable */ - position: relative; - margin-top: var(--card-spacing); -} - -/* Loading state */ - -.card_placeholder { - width: 100%; - aspect-ratio: var(--card-aspect-ratio); - background: var(--card-loading-bg); - animation: pulse var(--loading-animation); -} - -.card_loading { - display: flex; - flex-direction: column; - gap: var(--xs2); -} - -.card_loadingLine { - height: var(--sm1); - background: var(--card-loading-bg); - border-radius: var(--radius-sm); - animation: pulse var(--loading-animation); -} - -.card_loadingLine-short { - width: 75%; -} - -@keyframes pulse { - 0% { - opacity: 1; - } - 50% { - opacity: 0.5; - } - 100% { - opacity: 1; - } -} -} - -@layer components{ - -/* FAQ */ - -.faq { - display: grid; - gap: var(--faq-spacing); -} - -/* Item visuals (borders, background, chevron, open state) come from the - details/summary element styling in elements.interactive.css. */ - -.faq_content { - cursor: auto; -} - - .faq_content p:last-of-type { - /* in case it's inside a .prose context */ - margin-bottom: 0; - } -} - -@layer components{ - -/* FEATURE ITEM */ - -.featureItem { - /* As a .tiles item the li is display:grid (equal-height rows); keep - the icon/title/text packed at the top instead of stretching apart */ - align-content: start; -} - -.featureItem_icon { - display: flex; - align-items: center; - justify-content: center; - width: var(--featureItem-icon-box-size); - height: var(--featureItem-icon-box-size); - margin-bottom: var(--sm1); - color: var(--featureItem-icon-color); - background-color: var(--featureItem-icon-background-color); - border-radius: var(--featureItem-icon-border-radius); -} - - .featureItem_icon svg { - width: var(--featureItem-icon-size); - height: var(--featureItem-icon-size); - } - -.featureItem_title { - margin-bottom: var(--xs2); - font-size: var(--text-lg); - font-weight: var(--semi-bold); -} - .featureItem_text p:last-of-type { - /* in case it's inside a .prose context */ - margin-bottom: 0; - } -} - -@layer components{ - -/* FIELD */ - -.field { - /* containing block for overlaid messages (see below) */ - position: relative; - display: grid; - gap: var(--field-spacing); -} - - .field label { - /* the grid gap handles spacing (overrides the elements-layer margin) */ - margin-bottom: 0; - } - -/* Messages sit in flow under the control. --field-message-position is the - interface for row compositions: with `absolute` (set by .fieldRow) they - overlay below the field instead of adding to its height, so the control - stays the field's bottom edge and a revealed error can't push a - bottom-aligned neighbor (button…) out of line. top/inset only apply then. */ -.field_hint, -.field_error { - position: var(--field-message-position); - top: calc(100% + var(--field-spacing)); - inset-inline: 0; - font-size: var(--text-sm); -} - -.field_hint { - color: var(--field-hint-color); -} - -.field_error { - display: none; - color: var(--field-error-color); -} - -/* Native validation: reveal the error message once the control has been - interacted with and is invalid (:user-invalid, not :invalid, so pristine - forms don't light up red). The border color comes from elements.form.css. - .is-invalid forces the same presentation from markup, for server-side - validation results, tests, and demos. */ - :is(.field:has(:user-invalid),.field.is-invalid) .field_error { - display: block; - } - - :is(.field:has(:user-invalid),.field.is-invalid):has(.field_error) .field_hint { - display: none; - } - -.field.is-invalid :is(input, select, textarea) { - border-color: var(--input-border-color-invalid); -} -} - -@layer components{ - -/* FIELD ROW */ - -/* 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 - below the row instead of pushing bottom-aligned buttons out of line. - Leave a little vertical room under the row for them. */ -.fieldRow { - --field-message-position: absolute; - - display: flex; - flex-wrap: wrap; - align-items: end; - gap: var(--xs3); -} - -.fieldRow_field { - flex: 1 1 200px; -} -} - -@layer components{ - -/* FOOTER */ - -.footer { - padding: var(--md3) var(--sm3); - line-height: var(--leading-xl); - color: var(--footer-text-color); - background-color: var(--footer-background-color); - border-top: var(--footer-border-width) dashed var(--footer-border-color); - transition: background-color var(--transition); -} - @media (width >= 768px) { - -.footer { - display: grid; - gap: var(--md3); - grid-template-columns: 25% 1fr; - padding: var(--lg3) var(--md3); -} - } - - .footer a { - color: var(--footer-link-color); - -webkit-text-decoration: none; - text-decoration: none; - font-weight: var(--book); - transition: color var(--transition); - } - :is(.footer a):hover { - color: var(--footer-link-color-hover); - } - -.footer_meta { - grid-column: 1; - grid-row: 1; -} - -.footer_nav ul { - margin: 0; - padding: 0; - list-style: none; -} - - :is(.footer_nav ul) li { - margin: 0; - } - @media (width >= 768px) { - -.footer_nav > ul { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); - gap: var(--sm3); -} - } - - :is(.footer_nav > ul) ul { - margin-bottom: var(--md3); - } - @media (width >= 768px) { - - :is(.footer_nav > ul) ul { - margin-bottom: 0; - } - } - - :is(:is(.footer_nav > ul) ul) li:not(:last-child) { - margin-bottom: var(--xs1); - } -} - -@layer components{ - -/* HEADER */ - -.header { - display: flex; - align-items: center; - gap: var(--sm3); - height: var(--header-height); - padding-inline: var(--header-padding); - background-color: var(--header-background-color); -} - -.header-sticky { - position: sticky; - top: 0; - z-index: var(--z-5); - box-shadow: var(--shadow-sm); -} - - .header-sticky.is-top { - box-shadow: none; - } - -.header_logo { - display: flex; - align-items: center; - gap: var(--sm2); - font-size: var(--text-md); - font-weight: var(--semi-bold); - -webkit-text-decoration: none; - text-decoration: none; - color: var(--text-color); -} - -.header_nav { - display: none; - margin-inline-start: auto; -} - @media (width >= 768px) { - -.header_nav { - display: block; -} - } - - .header_nav ul { - display: flex; - gap: var(--md3); - margin: 0; - padding: 0; - list-style: none; - } - - :is(.header_nav ul) li { - margin: 0; - } - - :is(.header_nav ul) a { - display: flex; - align-items: center; - height: var(--header-height); - font-size: var(--text-sm); - font-weight: var(--bold); - -webkit-text-decoration: none; - text-decoration: none; - color: var(--text-color); - transition: color var(--transition); - } - :is(:is(.header_nav ul) a):hover,[aria-current]:is(:is(.header_nav ul) a) { - color: var(--link-color); - } - -.header_actions { - display: none; -} - @media (width >= 768px) { - -.header_actions { - display: flex; - align-items: center; - gap: var(--sm3); -} - } - -.header_navMobile { - margin-inline-start: auto; -} - @media (width >= 768px) { - -.header_navMobile { - display: none; -} - } - - .header_navMobile button { - display: flex; - align-items: center; - justify-content: center; - min-width: var(--sm3); - min-height: var(--sm3); - padding: var(--xs2); - color: var(--text-color); - background: transparent; - border: none; - cursor: pointer; - } - - .header_navMobile > div { - /* The full-screen menu is an always-dark surface by design; it does not - follow the light theme. Retheme it via the --header-menu-* tokens. */ - display: none; - position: fixed; - top: 0; - left: 0; /* deliberately physical: full-viewport overlay pinned to the screen edge */ - width: 100vw; - height: 100svh; - overflow-y: auto; - padding: var(--lg3); - background-color: var(--header-menu-background-color); - z-index: var(--z-5); - } - .is-open:is(.header_navMobile > div) { - display: block; - } - - :is(.header_navMobile > div) button { - position: fixed; - top: 0; - right: 0; /* deliberately physical: close button pinned to a visual corner */ - padding: var(--sm1) var(--sm3); - color: var(--header-menu-color); - } - - :is(.header_navMobile > div) a { - color: var(--header-menu-color); - -webkit-text-decoration: none; - text-decoration: none; - } - [aria-current]:is(:is(.header_navMobile > div) a) { - color: var(--header-menu-color-current); - } - - :is(.header_navMobile > div) ul { - margin: 0; - padding: 0; - list-style: none; - } - - :is(:is(.header_navMobile > div) ul) li { - margin: 0; - } - - :is(.header_navMobile > div) > ul { - font-size: var(--text-lg); - } - - :is(:is(.header_navMobile > div) > ul) li { - margin-top: var(--sm1); - } - - :is(:is(.header_navMobile > div) > ul) ul { - padding-inline-start: var(--sm1); - border-inline-start: 1px solid var(--header-menu-border-color); - } - :is(:is(:is(.header_navMobile > div) > ul) ul) a { - color: var(--header-menu-secondary-color); - } - [aria-current]:is(:is(:is(:is(.header_navMobile > div) > ul) ul) a) { - color: var(--header-menu-color-current); - } - -.header_menuExtra { - display: flex; - margin-bottom: var(--sm3); -} -} - -@layer components{ - -/* SECTION */ - -.section { - padding-block: var(--section-spacing); -} - -/* Variants only swap the local custom properties */ - -.section-filled { - background-color: var(--section-filled-background-color); -} - -.section-primary { - background-color: var(--section-primary-background-color); - color: var(--section-primary-text-color); - /* Children (links, buttons, eyebrow…) follow the inverted surface */ - --text-color: var(--section-primary-text-color); - --link-color: var(--section-primary-link-color); - --link-color-hover: var(--section-primary-link-color-hover); - --section-eyebrow-color: var(--section-primary-eyebrow-color); - --section-lede-color: var(--section-primary-lede-color); -} - -/* The header and content each compose .wrap with their own width preset - (header defaults to .wrap-md, content to .wrap-lg), so a section can pair - a narrow reading-width header with a wider content column. */ -.section_content { - /* default doesn't need styling */ -} - -.section_header { - margin-bottom: var(--section-header-spacing); - text-align: center; -} - -.section_eyebrow { - margin-bottom: var(--xs2); - font-size: var(--text-sm); - font-weight: var(--semi-bold); - letter-spacing: var(--tracking-lg); - text-transform: uppercase; - color: var(--section-eyebrow-color); -} - -.section_title { - margin-bottom: var(--xs3); - font-size: var(--display-md); -} - -.section_lede { - font-size: var(--text-lg); - color: var(--section-lede-color); -} - -/* Centered button row: the "closing CTA" is a Section with one of these */ -.section_actions { - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: var(--xs3); -} -} - -@layer components{ - -.hero { -} - -.hero_wrap { - position: relative; - display: flex; - align-items: center; - justify-content: center; - min-height: 60svh; /* height is added inline via props */ - overflow: hidden; -} - -.hero_overlay { - position: absolute; - inset: 0; - pointer-events: none; - z-index: 2; -} - -.hero_content { - padding: var(--hero-content-padding); - max-width: 70ch; -} - -/* Wrapping button row (the hero twin of .section_actions); the full and - slideshow variants center it to match their centered text. */ -.hero_actions { - display: flex; - flex-wrap: wrap; - gap: var(--xs3); - margin-top: var(--hero-actions-spacing); -} - -.hero_media { - display: flex; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; -} - - .hero_media img,.hero_media video { - width: 100%; - height: 100%; - object-fit: cover; - } - -.hero_bg { - position: absolute; - inset: 0; - width: 100%; - height: 100%; - object-fit: cover; - z-index: 0; -} - -.hero-split { - /* set inline by the component from the ratio prop */ - --hero-ratio-left: 62fr; - --hero-ratio-right: 38fr; - display: grid; - align-items: center; - /* one column on mobile */ - grid-template-columns: 1fr; -} - - @media (width >= 768px) { - -.hero-split { - grid-template-columns: var(--hero-ratio-left) var(--hero-ratio-right); -} - } - - /* setup via direction prop in component */ - @media (width >= 768px) { - .hero-split.hero-reversed div:nth-child(1) { - order: 2; - } - .hero-split.hero-reversed div:nth-child(2) { - order: 1; - } - - /* when `flush` prop is added we remove content padding on the "outside" */ - /* default */ - .hero-split.hero-flush:not(.hero-reversed) .hero_media + .hero_content { - padding-inline-end: 0; - } - /* contentFirst */ - .hero-split.hero-flush:not(.hero-reversed) .hero_content:has( + .hero_media) { - padding-inline-start: 0; - } - /* default */ - .hero-split.hero-flush.hero-reversed .hero_media + .hero_content { - padding-inline-start: 0; - } - /* contentFirst */ - .hero-split.hero-flush.hero-reversed .hero_content:has( + .hero_media) { - padding-inline-end: 0; - } - } - .hero-full .hero_content { - z-index: 2; - text-align: center; - max-width: 60ch; - min-width: 200px; - } - - .hero-full .hero_actions { - justify-content: center; - } - .hero-roundCorners .hero_media { - overflow: hidden; - border-radius: var(--hero-radius); - } - - .hero-roundCorners .hero_wrap { - border-radius: var(--hero-radius); - } - .hero-slideshow .hero_content { - position: relative; - width: 50ch; - } - - .hero-slideshow .hero_actions { - justify-content: center; - } - - .hero-slideshow .hero_content ul > li,.hero-slideshow .hero_bg { - z-index: 2; - position: absolute; - inset: 0; - text-align: center; - pointer-events: none; - opacity: 0; - transition-property: opacity; - transition-timing-function: ease-in-out; - /* set inline via slideshowTransition prop */ - transition-duration: var(--slideshow-transition, 220ms); - } - - .is-active:is(.hero-slideshow .hero_content ul > li,.hero-slideshow .hero_bg) { - opacity: 1; - pointer-events: auto; - } - -.hero_pagination { - position: absolute; - /* deliberately physical: symmetric full-width stretch over the media */ - left: 0; - right: 0; - bottom: var(--md1); - display: flex; - justify-content: center; - align-items: center; - gap: var(--xs1); - z-index: 2; -} - -/* 24px minimum hit target (WCAG 2.5.8); the visible dot keeps its size */ -.hero_pagination_dot { - display: grid; - place-items: center; - width: max(var(--hero-pagination-dot), 24px); - height: max(var(--hero-pagination-dot), 24px); - padding: 0; - background: transparent; - border: none; - cursor: pointer; -} - - .hero_pagination_dot::before { - content: ""; - width: var(--hero-pagination-dot); - height: var(--hero-pagination-dot); - border-radius: var(--radius-round); - background: var(--hero-pagination-dot-color); - opacity: var(--hero-pagination-opacity); - box-shadow: var(--shadow-sm); - transition: - opacity var(--transition), - background-color var(--transition); - } - .hero_pagination_dot.is-active::before { - opacity: 1; - background: var(--hero-pagination-dot-active-color); - } -} - -@layer components{ - -/* PAGINATION */ - .pagination ul { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: var(--xs1); - margin: 0; - padding: 0; - list-style: none; - } - - .pagination a,.pagination span { - display: flex; - align-items: center; - justify-content: center; - min-width: var(--pagination-size); - min-height: var(--pagination-size); - font-size: var(--text-sm); - font-weight: var(--semi-bold); - -webkit-text-decoration: none; - text-decoration: none; - color: var(--pagination-color); - border-radius: var(--pagination-border-radius); - transition: background-color var(--transition-fast); - } - - .pagination a:hover { - background-color: var(--pagination-background-color-hover); - } - - .pagination a[aria-current="page"] { - color: var(--pagination-color-current); - background-color: var(--pagination-background-color-current); - } - .pagination_arrow svg { - width: var(--sm1); - height: var(--sm1); - } - - .pagination_arrow[aria-disabled="true"] { - opacity: var(--o-2); - } - -.pagination_arrow-prev svg { - rotate: 90deg; -} - -.pagination_arrow-next svg { - rotate: -90deg; -} -} - -@layer components{ - -/* PREV / NEXT */ - -.prevNext { - display: grid; - grid-template-columns: 1fr 1fr; - gap: var(--sm1); -} - -.prevNext_link { - display: grid; - align-content: start; - gap: var(--xs1); - padding: var(--sm1); - -webkit-text-decoration: none; - text-decoration: none; - color: var(--text-color); - border: var(--border-sm) solid var(--prevNext-border-color); - border-radius: var(--prevNext-border-radius); - transition: border-color var(--transition); -} - - .prevNext_link:hover { - border-color: var(--prevNext-border-color-hover); - } - - .prevNext_link small { - color: var(--prevNext-label-color); - } - - .prevNext_link span { - font-weight: var(--semi-bold); - } - -.prevNext_link-prev { - grid-column: 1; -} - -/* a lone "next" stays in the right column */ -.prevNext_link-next { - grid-column: 2; - text-align: end; -} -} - -@layer components{ - -/* PRICING CARD */ - -.pricingCard { - display: flex; - flex-direction: column; -} - -.pricingCard-highlighted { - /* border-color + ring keeps the highlight from shifting the layout */ - border-color: var(--pricingCard-highlight-border-color); - box-shadow: 0 0 0 var(--border-sm) var(--pricingCard-highlight-border-color); -} - -.pricingCard_header { - display: flex; - align-items: center; - justify-content: space-between; - gap: var(--xs2); - margin-bottom: var(--sm1); -} - -.pricingCard_name { - margin-bottom: 0; - font-size: var(--text-lg); - font-weight: var(--semi-bold); -} - -.pricingCard_price { - display: flex; - align-items: baseline; - gap: var(--xs1); - margin-bottom: var(--sm1); -} - -.pricingCard_amount { - font-family: var(--heading-font); - font-size: var(--display-md); - font-weight: var(--black); - line-height: var(--leading-xs); -} - -.pricingCard_period, -.pricingCard_description { - color: var(--card-secondary-text-color); -} - -.pricingCard_period { - font-size: var(--text-sm); -} - -.pricingCard_description { - margin-bottom: var(--sm1); -} - -.pricingCard_features { - display: grid; - gap: var(--xs2); - margin: 0 0 var(--sm3); - padding: 0; - list-style: none; -} - - .pricingCard_features li { - display: flex; - align-items: start; - gap: var(--xs2); - } - -.pricingCard_check { - flex: none; - display: flex; - margin-top: var(--xs1); - color: var(--pricingCard-check-color); -} - - .pricingCard_check svg { - width: var(--sm1); - height: var(--sm1); - } - -.pricingCard_cta { - /* pinned to the bottom so CTAs line up across a row of tiers */ - display: grid; - margin-top: auto; -} -} - -@layer components{ - -/* TESTIMONIAL */ - -.testimonial { - display: grid; - align-content: start; - gap: var(--sm1); -} - -.testimonial_quote { - /* the visual style comes from the blockquote element styling */ - margin-bottom: 0; -} - -.testimonial_byline { - display: flex; - align-items: center; - gap: var(--xs2); - font-size: var(--text-sm); -} - -.testimonial_name { - display: block; - font-weight: var(--semi-bold); -} - -.testimonial_role { - display: block; - color: var(--testimonial-role-color); -} -} - -@layer components{ - -.readProgressBar { - position: fixed; - top: 0; - left: 0; /* deliberately physical: full-width bar pinned to the viewport edge */ - width: 100%; - height: var(--readProgressBar-height); - z-index: var(--z-5); -} - - .readProgressBar > div { - width: 100%; - height: 100%; - background: var(--readProgressBar-color); - animation: bar linear; - /* root, not nearest: the bar tracks the page, so the timeline must not - depend on where in the DOM the component happens to be rendered */ - animation-timeline: scroll(root y); - } - -@keyframes bar { - from { - width: 0; - } - to { - width: 100vw; - } -} -} - -@layer components{ - -.notice { - --bg-color: var(--notice-background-color); - --bd-color: var(--notice-border-color); - --svg-color: inherit; - --code-color: inherit; - --code-bg-color: inherit; - - padding: var(--notice-spacing); - border: var(--notice-border-width) solid var(--bd-color); - border-radius: var(--notice-border-radius); - color: var(--notice-text-color); - background-color: var(--bg-color); -} - - .notice code { - background-color: var(--code-bg-color); - color: var(--code-color); - } - - .notice p:last-of-type { - /* in case it's inside a .prose context */ - margin-bottom: 0; - } - -.notice_title { - display: flex; -} - - .notice_title svg { - margin-bottom: var(--xs3); - margin-inline-end: 0.5em; - color: var(--svg-color); - } - - .notice_title strong { - display: block; - margin-bottom: var(--xs1); - } - -.notice-info { - color: var(--base-950); - --bg-color: var(--primary-100); - --bd-color: var(--primary-300); - --svg-color: var(--primary-400); - --code-color: var(--primary-600); - --code-bg-color: var(--primary-200); -} - -.notice-danger { - color: var(--base-950); - --bg-color: var(--no-200); - --bd-color: var(--no-500); - --svg-color: var(--no-500); - --code-color: var(--no-500); - --code-bg-color: var(--no-100); -} - -.notice-warning { - color: var(--base-950); - --bg-color: var(--maybe-200); - --bd-color: var(--maybe-500); - --svg-color: var(--maybe-400); - --code-color: var(--maybe-500); - --code-bg-color: var(--maybe-100); -} - -.notice-confirm { - color: var(--base-950); - --bg-color: var(--yes-100); - --bd-color: var(--yes-500); - --svg-color: var(--yes-400); - --code-color: var(--yes-500); - --code-bg-color: var(--yes-200); -} - -/* Heading-adjacent margin mirrors the prose rhythm in global.prose.css - (prose can't reach into component classes, so the notice owns this rule) */ -@scope (.prose) to (.not-prose) { - .notice:has(+ :is(h1, h2, h3, h4)) { - margin-bottom: calc(var(--prose-spacing) * 2); - } -} -} - -@layer components{ - -.socialMedia { - --icon-size: var(--sm3); - - display: flex; - flex-wrap: wrap; - gap: var(--sm1); - list-style: none; - padding: 0; - margin: 0; -} - - .socialMedia a { - display: block; - width: var(--icon-size); - height: var(--icon-size); - - /* in case SVG has dimensions specified in its code */ - } - :is(.socialMedia a) svg { - width: var(--icon-size); - height: var(--icon-size); - } - -.socialMedia-md { - --icon-size: var(--md2); -} - -.socialMedia-lg { - --icon-size: var(--lg2); - gap: var(--sm2); -} - -.socialMedia-xl { - --icon-size: var(--xl2); - gap: var(--md2); -} -} - -@layer components{ - .tags li { - margin-bottom: var(--xs2); - } - :is(.tags li):last-child { - margin-bottom: 0; - } - - .tags a { - padding: var(--xs1) var(--tags-padding); - -webkit-text-decoration: none; - text-decoration: none; - text-transform: lowercase; - font-size: var(--tags-font-size); - font-style: normal; - color: var(--tags-color); - border-radius: var(--tags-radius); - background-color: var(--tags-background-color); - transition: background-color var(--transition); - } - :is(.tags a):hover { - background-color: var(--tags-background-color-hover); - } - -.tags-inline { - display: flex; - flex-wrap: wrap; - gap: var(--xs2); -} - - .tags-inline li { - margin-bottom: 0; - } -} - -@layer components{ - -/* TILES */ - /* - Equal tiles in container-responsive columns: cards, feature items, - pricing tiers, anything repeated at one size. The column count answers - "how wide is the column I live in", not "how wide is the viewport": the - .layout scaffolds declare their main column as a size container; outside - a scaffold, wrap the list in a .tiles_container (or any inline-size - container). The wrapper is required there: with no container ancestor - the queries never match and the list stays single-column. - - Sizes name the tile: each one is a set of container thresholds tuned to - how much room that tile needs, and columns keep coming as the container - crosses them (no count cap; the column's width is the cap). A bare - .tiles uses the md thresholds (card-sized tiles); .tiles-sm fits small - icon + blurb tiles, so its columns appear sooner. The thresholds are - deliberately not the global viewport breakpoints: those can't see how - wide the column is. To pin a count yourself, set --tiles-columns on a - hook class of your own (unlayered CSS beats the rules below), or write - your own @container rules. + 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. */ -.tiles { - --tiles-columns: 1; - display: grid; - grid-template-columns: repeat(var(--tiles-columns), 1fr); - grid-column-gap: var(--grid-column-gap); - grid-row-gap: var(--grid-row-gap); - margin: 0; - padding: 0; - list-style: none; -} - - .tiles > li { - /* grid items stretch, so tiles in a row share the same height */ - display: grid; - } - -/* md, the default (.tiles-md exists as the explicit spelling): a tile - keeps roughly 17rem of room */ -@container (width >= 36rem) { - .tiles { - --tiles-columns: 2; - } -} - -@container (width >= 56rem) { - .tiles { - --tiles-columns: 3; - } -} - -@container (width >= 76rem) { - .tiles { - --tiles-columns: 4; - } -} - -@container (width >= 96rem) { - .tiles { - --tiles-columns: 5; - } -} - -@container (width >= 116rem) { - .tiles { - --tiles-columns: 6; - } -} - -/* sm: a tile keeps roughly 13rem of room. Same specificity as the base - rules, so these must stay after them (a smaller tile never means fewer - columns at the same width). */ -@container (width >= 28rem) { - .tiles-sm { - --tiles-columns: 2; - } -} - -@container (width >= 44rem) { - .tiles-sm { - --tiles-columns: 3; - } -} - -@container (width >= 60rem) { - .tiles-sm { - --tiles-columns: 4; - } -} - -@container (width >= 76rem) { - .tiles-sm { - --tiles-columns: 5; - } -} - -@container (width >= 92rem) { - .tiles-sm { - --tiles-columns: 6; - } -} - -/* Fallback container for tiles used outside the .layout scaffolds */ -.tiles_container { - container-type: inline-size; -} -} - -@layer components{ - /* we hide the TOC if there is less than 2 item */ - .toc:not(:has(li:nth-of-type(2))) { - display: none; - } - - .toc p { - margin-bottom: var(--xs2); - } - - .toc ul { - font-size: var(--text-sm); - } - :is(.toc ul) ul { - margin-inline-start: var(--toc-indentation); - } - - .toc > ul > li:first-child > a:first-child { - padding-top: 0; - } - - .toc a { - display: flex; - align-items: center; - padding-top: calc(var(--toc-spacing) / 2); - padding-bottom: calc(var(--toc-spacing) / 2); - -webkit-text-decoration: none; - text-decoration: none; - color: var(--toc-color); - transition: color var(--transition); - } - :is(.toc a):hover { - color: var(--toc-color-hover); - } - - :is(.toc a) span { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - .is-active:is(.toc a) { - color: var(--toc-color-hover); - } - .is-active:is(.toc a) svg { - transform: translateX(calc(var(--xs1) * -1)); - opacity: var(--o-5); - } - .toc-icon a { - margin-inline-start: calc(var(--toc-icon-size) * -1); - } - - .toc-icon svg { - width: var(--toc-icon-size); - height: var(--toc-icon-size); - flex-shrink: 0; - opacity: var(--o-0); - transform: translateX(calc(var(--toc-icon-size) * -1)); - transition: opacity var(--transition), transform var(--transition); - } -} - -@layer components{ -.toggle { - /* Themable via the --toggle-* tokens in settings.ui.css */ - --toggle-w: var(--toggle-width); - --toggle-h: var(--toggle-height); - --toggle-bd: var(--toggle-border-width); - position: relative; - appearance: none; - border: none; - /* The generic input padding (elements.form.css) survives appearance: none; - with border-box sizing it floors the track at 24px, so any toggle themed - below that squashes and loses its pill ends */ - padding: 0; - display: block; - width: var(--toggle-w); - height: var(--toggle-h); - border-radius: calc(var(--toggle-h) / 2); - cursor: pointer; - background-color: var(--toggle-track-color); -} - - .toggle::before { - --diameter: calc(var(--toggle-h) - var(--toggle-bd) * 2); - position: absolute; - top: var(--toggle-bd); - /* deliberately physical: the thumb travel (left + translateX) is a visual - mechanic; keeping it physical keeps the animation math in one axis system */ - left: var(--toggle-bd); - content: ""; - display: block; - width: var(--diameter); - height: var(--diameter); - border-radius: var(--diameter); - background-color: var(--toggle-thumb-color); - transition: - left var(--transition), - transform var(--transition), - width var(--transition); - transform: translateX(0); - } - - .toggle:checked { - background-color: var(--toggle-track-color-checked); - } - - .toggle:checked::before { - left: calc(100% - var(--toggle-bd)); - transform: translateX(-100%); - } - - .toggle:active::before { - width: calc(var(--diameter) * 1.3); - } -} - /* Helpers for local overrides. Every declaration is !important on purpose: */ /* important layered declarations beat unlayered CSS, so helpers win over */ /* everything, including consumer CSS. */ diff --git a/dist/mcss.min.css b/dist/mcss.min.css index 9c7bc0c..353a116 100644 --- a/dist/mcss.min.css +++ b/dist/mcss.min.css @@ -1,2 +1,2 @@ -/*! mCSS v1.0.0 | MIT | https://mcss.dev */ -@layer settings,base,elements,global,components,theme,helpers;@layer settings{:root{--baseline: 8;--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;--heading-1: clamp(var(--display-md), 1.269rem + 2.682vw, var(--display-xl));--heading-2: clamp(var(--display-sm), 1.057rem + 2.235vw, var(--display-lg));--heading-3: clamp(var(--text-xl), .881rem + 1.865vw, var(--display-md));--heading-4: clamp(var(--text-lg), .734rem + 1.553vw, var(--display-sm));--heading-5: clamp(var(--text-lg), .988rem + .706vw, var(--text-xl));--heading-6: clamp(var(--text-md), .824rem + .588vw, var(--text-lg));--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;--tracking-display-md: .5em;--tracking-display-lg: .75em;--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{--csstools-color-scheme--light: initial;color-scheme:light dark;--csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) var(--base-500);--ui-border-color: var(--csstools-light-dark-toggle--0, var(--base-200));--csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) rgb(0 0 0 / .6);--ui-shadow-color: var(--csstools-light-dark-toggle--1, rgb(0 0 0 / .1));--csstools-light-dark-toggle--2: var(--csstools-color-scheme--light) var(--primary-400);--focus-ring-color: var(--csstools-light-dark-toggle--2, var(--primary-500));--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)}@supports (color: light-dark(red,red)){:root{--ui-border-color: light-dark(var(--base-200), var(--base-500))}}@supports (color: light-dark(red,red)) and (color: rgb(0 0 0 / 0)){:root{--ui-shadow-color: light-dark(rgb(0 0 0 / .1), rgb(0 0 0 / .6))}}@supports (color: light-dark(red,red)){:root{--focus-ring-color: light-dark(var(--primary-500), var(--primary-400))}}@supports not (color: light-dark(tan,tan)){:root *{--csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) var(--base-500);--ui-border-color: var(--csstools-light-dark-toggle--0, var(--base-200));--csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) rgb(0 0 0 / .6);--ui-shadow-color: var(--csstools-light-dark-toggle--1, rgb(0 0 0 / .1));--csstools-light-dark-toggle--2: var(--csstools-color-scheme--light) var(--primary-400);--focus-ring-color: var(--csstools-light-dark-toggle--2, var(--primary-500))}}@media(prefers-color-scheme:dark){:root{--csstools-color-scheme--light: }}:root.theme-light{--csstools-color-scheme--light: initial;color-scheme:light}:root.theme-dark{--csstools-color-scheme--light: ;color-scheme:dark}:root{accent-color:var(--primary-500);--csstools-light-dark-toggle--3: var(--csstools-color-scheme--light) var(--base-950);--body-background-color: var(--csstools-light-dark-toggle--3, var(--base-0));--input-height: var(--md3);--input-padding: var(--xs3);--input-border-radius: var(--radius-md);--csstools-light-dark-toggle--4: var(--csstools-color-scheme--light) var(--danger-400);--input-border-color-invalid: var(--csstools-light-dark-toggle--4, var(--danger-500));--dialog-backdrop-color: var(--base-950);--dialog-backdrop-opacity: var(--o-4);--table-padding: var(--xs2) var(--sm1);--csstools-light-dark-toggle--5: var(--csstools-color-scheme--light) var(--base-700);--table-border-color: var(--csstools-light-dark-toggle--5, var(--base-100));--table-border-radius: var(--radius-md);--table-background-color: none;--heading-font: var(--display);--heading-weight: var(--black);--heading-line-height: var(--leading-sm);--csstools-light-dark-toggle--6: var(--csstools-color-scheme--light) var(--base-200);--text-color: var(--csstools-light-dark-toggle--6, var(--base-950));--csstools-light-dark-toggle--7: var(--csstools-color-scheme--light) var(--primary-400);--link-color: var(--csstools-light-dark-toggle--7, var(--primary-600));--link-color-hover: var(--primary-500);--csstools-light-dark-toggle--8: var(--csstools-color-scheme--light) var(--primary-400);--text-code-color: var(--csstools-light-dark-toggle--8, var(--primary-600));--csstools-light-dark-toggle--9: var(--csstools-color-scheme--light) var(--primary-900);--text-code-background-color: var(--csstools-light-dark-toggle--9, var(--primary-100));--pre-border-radius: var(--radius-md);--marker-color: var(--highlight-500);--csstools-light-dark-toggle--10: var(--csstools-color-scheme--light) var(--base-0);--selection-color: var(--csstools-light-dark-toggle--10, var(--base-950));--csstools-light-dark-toggle--11: var(--csstools-color-scheme--light) var(--primary-700);--selection-background-color: var(--csstools-light-dark-toggle--11, var(--primary-200))}@supports (color: light-dark(red,red)){:root{--body-background-color: light-dark(var(--base-0), var(--base-950));--input-border-color-invalid: light-dark(var(--danger-500), var(--danger-400));--table-border-color: light-dark(var(--base-100), var(--base-700));--text-color: light-dark(var(--base-950), var(--base-200));--link-color: light-dark(var(--primary-600), var(--primary-400));--text-code-color: light-dark(var(--primary-600), var(--primary-400));--text-code-background-color: light-dark( var(--primary-100), var(--primary-900) );--selection-color: light-dark(var(--base-950), var(--base-0));--selection-background-color: light-dark(var(--primary-200), var(--primary-700))}}@supports not (color: light-dark(tan,tan)){:root *{--csstools-light-dark-toggle--3: var(--csstools-color-scheme--light) var(--base-950);--body-background-color: var(--csstools-light-dark-toggle--3, var(--base-0));--csstools-light-dark-toggle--4: var(--csstools-color-scheme--light) var(--danger-400);--input-border-color-invalid: var(--csstools-light-dark-toggle--4, var(--danger-500));--csstools-light-dark-toggle--5: var(--csstools-color-scheme--light) var(--base-700);--table-border-color: var(--csstools-light-dark-toggle--5, var(--base-100));--csstools-light-dark-toggle--6: var(--csstools-color-scheme--light) var(--base-200);--text-color: var(--csstools-light-dark-toggle--6, var(--base-950));--csstools-light-dark-toggle--7: var(--csstools-color-scheme--light) var(--primary-400);--link-color: var(--csstools-light-dark-toggle--7, var(--primary-600));--csstools-light-dark-toggle--8: var(--csstools-color-scheme--light) var(--primary-400);--text-code-color: var(--csstools-light-dark-toggle--8, var(--primary-600));--csstools-light-dark-toggle--9: var(--csstools-color-scheme--light) var(--primary-900);--text-code-background-color: var(--csstools-light-dark-toggle--9, var(--primary-100));--csstools-light-dark-toggle--10: var(--csstools-color-scheme--light) var(--base-0);--selection-color: var(--csstools-light-dark-toggle--10, var(--base-950));--csstools-light-dark-toggle--11: var(--csstools-color-scheme--light) var(--primary-700);--selection-background-color: var(--csstools-light-dark-toggle--11, var(--primary-200))}}:root{--grid-column-gap: var(--sm1);--grid-row-gap: var(--sm1);--wrap-spacing: var(--sm1);--wrap-md-spacing: var(--sm3);--wrap-lg-spacing: 0;--wrap-width-sm: minmax(200px, 55ch);--wrap-width-md: minmax(200px, 70ch);--wrap-width-lg: minmax(200px, 900px);--wrap-width: var(--wrap-width-md);--layout-content-width: 70ch;--layout-aside-width: 245px;--layout-toc-width: 1fr;--prose-spacing: var(--sm1)}@media(width>=768px){:root{--grid-column-gap: var(--sm3);--grid-row-gap: var(--sm3)}}:root{--badge-font-size: var(--text-sm);--badge-border-radius: var(--radius-md);--badge-color: var(--base-0);--csstools-light-dark-toggle--12: var(--csstools-color-scheme--light) var(--base-600);--badge-background-color: var(--csstools-light-dark-toggle--12, var(--base-700));--badge-primary-color: var(--base-0);--csstools-light-dark-toggle--13: var(--csstools-color-scheme--light) var(--primary-500);--badge-primary-background-color: var(--csstools-light-dark-toggle--13, var(--primary-600));--csstools-light-dark-toggle--14: var(--csstools-color-scheme--light) var(--base-0);--badge-success-color: var(--csstools-light-dark-toggle--14, var(--success-500));--csstools-light-dark-toggle--15: var(--csstools-color-scheme--light) var(--success-500);--badge-success-background-color: var(--csstools-light-dark-toggle--15, var(--success-100));--csstools-light-dark-toggle--16: var(--csstools-color-scheme--light) var(--base-0);--badge-danger-color: var(--csstools-light-dark-toggle--16, var(--danger-500));--csstools-light-dark-toggle--17: var(--csstools-color-scheme--light) var(--danger-500);--badge-danger-background-color: var(--csstools-light-dark-toggle--17, var(--danger-100));--csstools-light-dark-toggle--18: var(--csstools-color-scheme--light) var(--base-950);--badge-warning-color: var(--csstools-light-dark-toggle--18, var(--warning-500));--csstools-light-dark-toggle--19: var(--csstools-color-scheme--light) var(--warning-500);--badge-warning-background-color: var(--csstools-light-dark-toggle--19, var(--warning-100))}@supports (color: light-dark(red,red)){:root{--badge-background-color: light-dark(var(--base-700), var(--base-600));--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) )}}@supports not (color: light-dark(tan,tan)){:root *{--csstools-light-dark-toggle--12: var(--csstools-color-scheme--light) var(--base-600);--badge-background-color: var(--csstools-light-dark-toggle--12, var(--base-700));--csstools-light-dark-toggle--13: var(--csstools-color-scheme--light) var(--primary-500);--badge-primary-background-color: var(--csstools-light-dark-toggle--13, var(--primary-600));--csstools-light-dark-toggle--14: var(--csstools-color-scheme--light) var(--base-0);--badge-success-color: var(--csstools-light-dark-toggle--14, var(--success-500));--csstools-light-dark-toggle--15: var(--csstools-color-scheme--light) var(--success-500);--badge-success-background-color: var(--csstools-light-dark-toggle--15, var(--success-100));--csstools-light-dark-toggle--16: var(--csstools-color-scheme--light) var(--base-0);--badge-danger-color: var(--csstools-light-dark-toggle--16, var(--danger-500));--csstools-light-dark-toggle--17: var(--csstools-color-scheme--light) var(--danger-500);--badge-danger-background-color: var(--csstools-light-dark-toggle--17, var(--danger-100));--csstools-light-dark-toggle--18: var(--csstools-color-scheme--light) var(--base-950);--badge-warning-color: var(--csstools-light-dark-toggle--18, var(--warning-500));--csstools-light-dark-toggle--19: var(--csstools-color-scheme--light) var(--warning-500);--badge-warning-background-color: var(--csstools-light-dark-toggle--19, var(--warning-100))}}: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);--csstools-light-dark-toggle--20: var(--csstools-color-scheme--light) var(--base-0);--bt-color-hover: var(--csstools-light-dark-toggle--20, var(--text-color));--csstools-light-dark-toggle--21: var(--csstools-color-scheme--light) var(--base-800);--bt-background-color: var(--csstools-light-dark-toggle--21, var(--base-0));--csstools-light-dark-toggle--22: var(--csstools-color-scheme--light) var(--base-900);--bt-background-color-hover: var(--csstools-light-dark-toggle--22, var(--base-50));--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);--csstools-light-dark-toggle--23: var(--csstools-color-scheme--light) var(--base-0);--bt-outline-color-hover: var(--csstools-light-dark-toggle--23, var(--base-950));--csstools-light-dark-toggle--24: var(--csstools-color-scheme--light) rgb(255 255 255 / .1);--bt-outline-background-color-hover: var(--csstools-light-dark-toggle--24, rgb(0 0 0 / .1));--csstools-light-dark-toggle--25: var(--csstools-color-scheme--light) var(--base-0);--bt-outline-border-color: var(--csstools-light-dark-toggle--25, var(--base-950));--csstools-light-dark-toggle--26: var(--csstools-color-scheme--light) var(--base-0);--bt-outline-border-color-hover: var(--csstools-light-dark-toggle--26, var(--base-950));--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)}@supports (color: light-dark(red,red)){:root{--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-outline-color-hover: light-dark(var(--base-950), var(--base-0))}}@supports (color: light-dark(red,red)) and (color: rgb(0 0 0 / 0)){:root{--bt-outline-background-color-hover: light-dark( rgb(0 0 0 / .1), rgb(255 255 255 / .1) )}}@supports (color: light-dark(red,red)){:root{--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))}}@supports not (color: light-dark(tan,tan)){:root *{--csstools-light-dark-toggle--20: var(--csstools-color-scheme--light) var(--base-0);--bt-color-hover: var(--csstools-light-dark-toggle--20, var(--text-color));--csstools-light-dark-toggle--21: var(--csstools-color-scheme--light) var(--base-800);--bt-background-color: var(--csstools-light-dark-toggle--21, var(--base-0));--csstools-light-dark-toggle--22: var(--csstools-color-scheme--light) var(--base-900);--bt-background-color-hover: var(--csstools-light-dark-toggle--22, var(--base-50));--csstools-light-dark-toggle--23: var(--csstools-color-scheme--light) var(--base-0);--bt-outline-color-hover: var(--csstools-light-dark-toggle--23, var(--base-950));--csstools-light-dark-toggle--24: var(--csstools-color-scheme--light) rgb(255 255 255 / .1);--bt-outline-background-color-hover: var(--csstools-light-dark-toggle--24, rgb(0 0 0 / .1));--csstools-light-dark-toggle--25: var(--csstools-color-scheme--light) var(--base-0);--bt-outline-border-color: var(--csstools-light-dark-toggle--25, var(--base-950));--csstools-light-dark-toggle--26: var(--csstools-color-scheme--light) var(--base-0);--bt-outline-border-color-hover: var(--csstools-light-dark-toggle--26, var(--base-950))}}:root{--avatar-color: var(--base-0);--avatar-background-color: var(--base-400);--csstools-light-dark-toggle--27: var(--csstools-color-scheme--light) var(--base-500);--avatar-border-color: var(--csstools-light-dark-toggle--27, var(--base-0));--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)}@supports (color: light-dark(red,red)){:root{--avatar-border-color: light-dark(var(--base-0), var(--base-500))}}@supports not (color: light-dark(tan,tan)){:root *{--csstools-light-dark-toggle--27: var(--csstools-color-scheme--light) var(--base-500);--avatar-border-color: var(--csstools-light-dark-toggle--27, var(--base-0))}}:root{--banner-color: var(--base-0);--csstools-light-dark-toggle--28: var(--csstools-color-scheme--light) var(--primary-800);--banner-background-color: var(--csstools-light-dark-toggle--28, var(--primary-600))}@supports (color: light-dark(red,red)){:root{--banner-background-color: light-dark(var(--primary-600), var(--primary-800))}}@supports not (color: light-dark(tan,tan)){:root *{--csstools-light-dark-toggle--28: var(--csstools-color-scheme--light) var(--primary-800);--banner-background-color: var(--csstools-light-dark-toggle--28, var(--primary-600))}}:root{--breadcrumbs-separator: "/";--csstools-light-dark-toggle--29: var(--csstools-color-scheme--light) var(--base-600);--breadcrumbs-separator-color: var(--csstools-light-dark-toggle--29, var(--base-300));--csstools-light-dark-toggle--30: var(--csstools-color-scheme--light) var(--base-400);--breadcrumbs-color: var(--csstools-light-dark-toggle--30, var(--base-500));--breadcrumbs-color-current: var(--text-color)}@supports (color: light-dark(red,red)){:root{--breadcrumbs-separator-color: light-dark(var(--base-300), var(--base-600));--breadcrumbs-color: light-dark(var(--base-500), var(--base-400))}}@supports not (color: light-dark(tan,tan)){:root *{--csstools-light-dark-toggle--29: var(--csstools-color-scheme--light) var(--base-600);--breadcrumbs-separator-color: var(--csstools-light-dark-toggle--29, var(--base-300));--csstools-light-dark-toggle--30: var(--csstools-color-scheme--light) var(--base-400);--breadcrumbs-color: var(--csstools-light-dark-toggle--30, var(--base-500))}}:root{--card-spacing: var(--sm3);--card-color: var(--text-color);--csstools-light-dark-toggle--31: var(--csstools-color-scheme--light) var(--base-500);--card-secondary-text-color: var(--csstools-light-dark-toggle--31, var(--base-400));--csstools-light-dark-toggle--32: var(--csstools-color-scheme--light) var(--base-900);--card-bg-color: var(--csstools-light-dark-toggle--32, var(--base-100));--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);--csstools-light-dark-toggle--33: var(--csstools-color-scheme--light) var(--base-900);--card-loading-bg: var(--csstools-light-dark-toggle--33, var(--base-200));--card-aspect-ratio: var(--ar-golden)}@supports (color: light-dark(red,red)){:root{--card-secondary-text-color: light-dark(var(--base-400), var(--base-500));--card-bg-color: light-dark(var(--base-100), var(--base-900));--card-loading-bg: light-dark(var(--base-200), var(--base-900))}}@supports not (color: light-dark(tan,tan)){:root *{--csstools-light-dark-toggle--31: var(--csstools-color-scheme--light) var(--base-500);--card-secondary-text-color: var(--csstools-light-dark-toggle--31, var(--base-400));--csstools-light-dark-toggle--32: var(--csstools-color-scheme--light) var(--base-900);--card-bg-color: var(--csstools-light-dark-toggle--32, var(--base-100));--csstools-light-dark-toggle--33: var(--csstools-color-scheme--light) var(--base-900);--card-loading-bg: var(--csstools-light-dark-toggle--33, var(--base-200))}}:root{--toggle-width: 50px;--toggle-height: 28px;--toggle-border-width: 2px;--csstools-light-dark-toggle--34: var(--csstools-color-scheme--light) var(--base-700);--toggle-track-color: var(--csstools-light-dark-toggle--34, var(--base-300));--toggle-track-color-checked: var(--yes-400);--toggle-thumb-color: var(--body-background-color)}@supports (color: light-dark(red,red)){:root{--toggle-track-color: light-dark(var(--base-300), var(--base-700))}}@supports not (color: light-dark(tan,tan)){:root *{--csstools-light-dark-toggle--34: var(--csstools-color-scheme--light) var(--base-700);--toggle-track-color: var(--csstools-light-dark-toggle--34, var(--base-300))}}:root{--faq-spacing: var(--xs3)}:root{--field-spacing: var(--xs1);--csstools-light-dark-toggle--35: var(--csstools-color-scheme--light) var(--base-500);--field-hint-color: var(--csstools-light-dark-toggle--35, var(--base-400));--csstools-light-dark-toggle--36: var(--csstools-color-scheme--light) var(--danger-300);--field-error-color: var(--csstools-light-dark-toggle--36, var(--danger-500));--field-message-position: static}@supports (color: light-dark(red,red)){:root{--field-hint-color: light-dark(var(--base-400), var(--base-500));--field-error-color: light-dark(var(--danger-500), var(--danger-300))}}@supports not (color: light-dark(tan,tan)){:root *{--csstools-light-dark-toggle--35: var(--csstools-color-scheme--light) var(--base-500);--field-hint-color: var(--csstools-light-dark-toggle--35, var(--base-400));--csstools-light-dark-toggle--36: var(--csstools-color-scheme--light) var(--danger-300);--field-error-color: var(--csstools-light-dark-toggle--36, var(--danger-500))}}:root{--featureItem-icon-box-size: var(--lg3);--featureItem-icon-size: var(--sm3);--csstools-light-dark-toggle--37: var(--csstools-color-scheme--light) var(--primary-300);--featureItem-icon-color: var(--csstools-light-dark-toggle--37, var(--primary-600));--csstools-light-dark-toggle--38: var(--csstools-color-scheme--light) var(--primary-900);--featureItem-icon-background-color: var(--csstools-light-dark-toggle--38, var(--primary-100));--featureItem-icon-border-radius: var(--radius-lg)}@supports (color: light-dark(red,red)){:root{--featureItem-icon-color: light-dark(var(--primary-600), var(--primary-300));--featureItem-icon-background-color: light-dark( var(--primary-100), var(--primary-900) )}}@supports not (color: light-dark(tan,tan)){:root *{--csstools-light-dark-toggle--37: var(--csstools-color-scheme--light) var(--primary-300);--featureItem-icon-color: var(--csstools-light-dark-toggle--37, var(--primary-600));--csstools-light-dark-toggle--38: var(--csstools-color-scheme--light) var(--primary-900);--featureItem-icon-background-color: var(--csstools-light-dark-toggle--38, var(--primary-100))}}:root{--csstools-light-dark-toggle--39: var(--csstools-color-scheme--light) var(--base-950);--footer-background-color: var(--csstools-light-dark-toggle--39, var(--primary-950));--csstools-light-dark-toggle--40: var(--csstools-color-scheme--light) var(--base-200);--footer-text-color: var(--csstools-light-dark-toggle--40, var(--base-0));--footer-border-width: var(--border-md);--csstools-light-dark-toggle--41: var(--csstools-color-scheme--light) var(--base-700);--footer-border-color: var(--csstools-light-dark-toggle--41, transparent);--csstools-light-dark-toggle--42: var(--csstools-color-scheme--light) var(--base-200);--footer-link-color: var(--csstools-light-dark-toggle--42, var(--base-0));--csstools-light-dark-toggle--43: var(--csstools-color-scheme--light) var(--base-0);--footer-link-color-hover: var(--csstools-light-dark-toggle--43, var(--primary-200))}@supports (color: light-dark(red,red)){: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-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))}}@supports not (color: light-dark(tan,tan)){:root *{--csstools-light-dark-toggle--39: var(--csstools-color-scheme--light) var(--base-950);--footer-background-color: var(--csstools-light-dark-toggle--39, var(--primary-950));--csstools-light-dark-toggle--40: var(--csstools-color-scheme--light) var(--base-200);--footer-text-color: var(--csstools-light-dark-toggle--40, var(--base-0));--csstools-light-dark-toggle--41: var(--csstools-color-scheme--light) var(--base-700);--footer-border-color: var(--csstools-light-dark-toggle--41, transparent);--csstools-light-dark-toggle--42: var(--csstools-color-scheme--light) var(--base-200);--footer-link-color: var(--csstools-light-dark-toggle--42, var(--base-0));--csstools-light-dark-toggle--43: var(--csstools-color-scheme--light) var(--base-0);--footer-link-color-hover: var(--csstools-light-dark-toggle--43, var(--primary-200))}}:root{--header-height: var(--xl1);--header-padding: var(--sm1)}@media(width>=768px){:root{--header-height: var(--xl2);--header-padding: var(--sm3)}}:root{--csstools-light-dark-toggle--44: var(--csstools-color-scheme--light) var(--base-950);--header-background-color: var(--csstools-light-dark-toggle--44, var(--base-0));--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)}@supports (color: light-dark(red,red)){:root{--header-background-color: light-dark(var(--base-0), var(--base-950))}}@supports not (color: light-dark(tan,tan)){:root *{--csstools-light-dark-toggle--44: var(--csstools-color-scheme--light) var(--base-950);--header-background-color: var(--csstools-light-dark-toggle--44, var(--base-0))}}: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);--csstools-light-dark-toggle--45: var(--csstools-color-scheme--light) var(--primary-500);--pagination-background-color-current: var(--csstools-light-dark-toggle--45, var(--primary-600));--csstools-light-dark-toggle--46: var(--csstools-color-scheme--light) var(--base-800);--pagination-background-color-hover: var(--csstools-light-dark-toggle--46, var(--base-100))}@supports (color: light-dark(red,red)){:root{--pagination-background-color-current: light-dark( var(--primary-600), var(--primary-500) );--pagination-background-color-hover: light-dark( var(--base-100), var(--base-800) )}}@supports not (color: light-dark(tan,tan)){:root *{--csstools-light-dark-toggle--45: var(--csstools-color-scheme--light) var(--primary-500);--pagination-background-color-current: var(--csstools-light-dark-toggle--45, var(--primary-600));--csstools-light-dark-toggle--46: var(--csstools-color-scheme--light) var(--base-800);--pagination-background-color-hover: var(--csstools-light-dark-toggle--46, var(--base-100))}}:root{--prevNext-border-color: var(--ui-border-color);--prevNext-border-radius: var(--radius-lg);--prevNext-border-color-hover: var(--link-color);--csstools-light-dark-toggle--47: var(--csstools-color-scheme--light) var(--base-500);--prevNext-label-color: var(--csstools-light-dark-toggle--47, var(--base-400))}@supports (color: light-dark(red,red)){:root{--prevNext-label-color: light-dark(var(--base-400), var(--base-500))}}@supports not (color: light-dark(tan,tan)){:root *{--csstools-light-dark-toggle--47: var(--csstools-color-scheme--light) var(--base-500);--prevNext-label-color: var(--csstools-light-dark-toggle--47, var(--base-400))}}:root{--notice-spacing: var(--sm1);--csstools-light-dark-toggle--48: var(--csstools-color-scheme--light) var(--base-0);--notice-text-color: var(--csstools-light-dark-toggle--48, var(--base-950));--csstools-light-dark-toggle--49: var(--csstools-color-scheme--light) var(--base-800);--notice-background-color: var(--csstools-light-dark-toggle--49, var(--base-50));--csstools-light-dark-toggle--50: var(--csstools-color-scheme--light) var(--base-500);--notice-border-color: var(--csstools-light-dark-toggle--50, var(--base-200));--notice-border-width: var(--border-sm);--notice-border-radius: var(--radius-lg)}@supports (color: light-dark(red,red)){:root{--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))}}@supports not (color: light-dark(tan,tan)){:root *{--csstools-light-dark-toggle--48: var(--csstools-color-scheme--light) var(--base-0);--notice-text-color: var(--csstools-light-dark-toggle--48, var(--base-950));--csstools-light-dark-toggle--49: var(--csstools-color-scheme--light) var(--base-800);--notice-background-color: var(--csstools-light-dark-toggle--49, var(--base-50));--csstools-light-dark-toggle--50: var(--csstools-color-scheme--light) var(--base-500);--notice-border-color: var(--csstools-light-dark-toggle--50, var(--base-200))}}:root{--csstools-light-dark-toggle--51: var(--csstools-color-scheme--light) var(--primary-400);--pricingCard-highlight-border-color: var(--csstools-light-dark-toggle--51, var(--primary-600));--csstools-light-dark-toggle--52: var(--csstools-color-scheme--light) var(--success-400);--pricingCard-check-color: var(--csstools-light-dark-toggle--52, var(--success-500))}@supports (color: light-dark(red,red)){:root{--pricingCard-highlight-border-color: light-dark( var(--primary-600), var(--primary-400) );--pricingCard-check-color: light-dark(var(--success-500), var(--success-400))}}@supports not (color: light-dark(tan,tan)){:root *{--csstools-light-dark-toggle--51: var(--csstools-color-scheme--light) var(--primary-400);--pricingCard-highlight-border-color: var(--csstools-light-dark-toggle--51, var(--primary-600));--csstools-light-dark-toggle--52: var(--csstools-color-scheme--light) var(--success-400);--pricingCard-check-color: var(--csstools-light-dark-toggle--52, var(--success-500))}}: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);--csstools-light-dark-toggle--53: var(--csstools-color-scheme--light) var(--primary-400);--section-eyebrow-color: var(--csstools-light-dark-toggle--53, var(--primary-600));--csstools-light-dark-toggle--54: var(--csstools-color-scheme--light) var(--base-400);--section-lede-color: var(--csstools-light-dark-toggle--54, var(--base-500));--csstools-light-dark-toggle--55: var(--csstools-color-scheme--light) var(--base-900);--section-filled-background-color: var(--csstools-light-dark-toggle--55, var(--base-50));--csstools-light-dark-toggle--56: var(--csstools-color-scheme--light) var(--primary-900);--section-primary-background-color: var(--csstools-light-dark-toggle--56, var(--primary-600));--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)}@supports (color: light-dark(red,red)){:root{--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) )}}@supports not (color: light-dark(tan,tan)){:root *{--csstools-light-dark-toggle--53: var(--csstools-color-scheme--light) var(--primary-400);--section-eyebrow-color: var(--csstools-light-dark-toggle--53, var(--primary-600));--csstools-light-dark-toggle--54: var(--csstools-color-scheme--light) var(--base-400);--section-lede-color: var(--csstools-light-dark-toggle--54, var(--base-500));--csstools-light-dark-toggle--55: var(--csstools-color-scheme--light) var(--base-900);--section-filled-background-color: var(--csstools-light-dark-toggle--55, var(--base-50));--csstools-light-dark-toggle--56: var(--csstools-color-scheme--light) var(--primary-900);--section-primary-background-color: var(--csstools-light-dark-toggle--56, var(--primary-600))}}:root{--csstools-light-dark-toggle--57: var(--csstools-color-scheme--light) var(--base-500);--testimonial-role-color: var(--csstools-light-dark-toggle--57, var(--base-400))}@supports (color: light-dark(red,red)){:root{--testimonial-role-color: light-dark(var(--base-400), var(--base-500))}}@supports not (color: light-dark(tan,tan)){:root *{--csstools-light-dark-toggle--57: var(--csstools-color-scheme--light) var(--base-500);--testimonial-role-color: var(--csstools-light-dark-toggle--57, var(--base-400))}}:root{--tags-padding: var(--xs2);--tags-font-size: var(--text-sm);--csstools-light-dark-toggle--58: var(--csstools-color-scheme--light) var(--base-400);--tags-color: var(--csstools-light-dark-toggle--58, var(--base-500));--csstools-light-dark-toggle--59: var(--csstools-color-scheme--light) var(--base-800);--tags-background-color: var(--csstools-light-dark-toggle--59, var(--base-100));--csstools-light-dark-toggle--60: var(--csstools-color-scheme--light) var(--base-950);--tags-background-color-hover: var(--csstools-light-dark-toggle--60, var(--base-200));--tags-radius: var(--radius-md)}@supports (color: light-dark(red,red)){:root{--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))}}@supports not (color: light-dark(tan,tan)){:root *{--csstools-light-dark-toggle--58: var(--csstools-color-scheme--light) var(--base-400);--tags-color: var(--csstools-light-dark-toggle--58, var(--base-500));--csstools-light-dark-toggle--59: var(--csstools-color-scheme--light) var(--base-800);--tags-background-color: var(--csstools-light-dark-toggle--59, var(--base-100));--csstools-light-dark-toggle--60: var(--csstools-color-scheme--light) var(--base-950);--tags-background-color-hover: var(--csstools-light-dark-toggle--60, var(--base-200))}}:root{--toc-color: var(--link-color);--toc-color-hover: var(--link-color-hover);--toc-spacing: var(--xs1);--toc-indentation: var(--xs3);--toc-icon-size: 16px}}@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:1.5}body: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(--semi-bold);color:var(--link-color)}a: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;--csstools-light-dark-toggle--61: var(--csstools-color-scheme--light) var(--base-900);background-color:var(--csstools-light-dark-toggle--61, var(--base-50));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))}@supports (color: light-dark(red,red)){address{background-color:light-dark(var(--base-50),var(--base-900))}}abbr{position:relative;cursor:help}abbr: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}abbr: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(--sm1);padding-inline:var(--md1) var(--sm3);font-style:italic;--csstools-light-dark-toggle--64: var(--csstools-color-scheme--light) var(--primary-900);background-color:var(--csstools-light-dark-toggle--64, var(--primary-50));border-radius:var(--radius-md)}@supports (color: light-dark(red,red)){blockquote{background-color:light-dark(var(--primary-50),var(--primary-900))}}blockquote:before{content:"";position:absolute;top:0;inset-inline-start:0;width:var(--xs2);height:100%;border-start-start-radius:var(--radius-md);border-end-start-radius:var(--radius-md);background-image:linear-gradient(var(--primary-800),var(--primary-500))}:is(blockquote p):first-child:before{content:open-quote}:is(blockquote p):last-child{margin-bottom:0}:is(blockquote p):last-child:after{content:close-quote}cite{font-style:italic}code,var,kbd{font-family:var(--mono);font-size:.9em;font-style:normal;--csstools-light-dark-toggle--62: var(--csstools-color-scheme--light) var(--base-300);color:var(--csstools-light-dark-toggle--62, var(--base-500))}@supports (color: light-dark(red,red)){code,var,kbd{color:light-dark(var(--base-500),var(--base-300))}}:is(code,var,kbd):not(h1 *):not(h2 *):not(h3 *):not(h4 *):not(h5 *):not(h6 *):not(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);line-height:var(--heading-line-height)}h1,.h1,h2,.h2,h3,.h3{margin-bottom:var(--sm1)}h4,.h4{margin-bottom:var(--sm2)}h5,.h5,h6,.h6{margin-bottom:var(--xs2)}:where(h1,h2,h3):has(+:is(h2,h3,h4)){margin-bottom:var(--sm2)}h1,.h1{font-size:var(--heading-1)}h2,.h2{font-size:var(--heading-2)}h3,.h3{font-size:var(--heading-3)}h4,.h4{font-size:var(--heading-4)}h5,.h5{font-size:var(--heading-5)}h6,.h6{font-size:var(--heading-6)}hr{--content: "";display:flex;justify-content:center;align-items:center;height:0;border-style:solid;border-width:1px 0 0;color:var(--ui-border-color);overflow:visible}hr:after{content:var(--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(--base-950);background-color:var(--yes-200);border-radius:var(--radius-sm);-webkit-text-decoration:none;text-decoration:none}ins: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:.9rem;white-space:pre-wrap;border-radius:var(--pre-border-radius)}q{font-style:italic}s{--csstools-light-dark-toggle--63: var(--csstools-color-scheme--light) var(--base-50);text-decoration-color:var(--csstools-light-dark-toggle--63, var(--base-950));text-decoration-style:wavy}@supports (color: light-dark(red,red)){s{text-decoration-color:light-dark(var(--base-950),var(--base-50))}}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(--xs2)}figure:has(figcaption+*) figcaption{margin-bottom:var(--xs2)}iframe{border:1px solid var(--ui-border-color)}}@layer elements{caption{caption-side:bottom;margin-top:var(--xs3);font-size:var(--text-sm)}table{border-spacing:0;border:1px 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:1px solid var(--table-border-color);border-inline-start:1px solid var(--table-border-color)}tr th:first-child,tr td:first-child{border-inline-start-width:0}:is(tbody tr:last-child) th,:is(tbody tr:last-child) td{border-bottom-width:0}tfoot th,tfoot td{border-top:1px 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:1px solid var(--ui-border-color);border-radius:var(--radius-lg);padding:var(--sm3)}fieldset ul:has([type=checkbox],[type=radio]){padding-inline-start:0}fieldset>[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]):not([type=radio])){height:var(--input-height)}input:where(:not([type=color]):not([type=file]):not([type=reset]):not([type=submit])){padding:var(--input-padding)}input:where(:not([type=color])){border-radius:var(--input-border-radius)}input:where(:not([type=file])){border:1px solid var(--ui-border-color)}input[type=file]{width:100%;accent-color:var(--text-color)}input[type=number]{padding-inline-end:var(--xs1)}label{display:block}label:has(+:is(input,select,textarea)){margin-bottom:var(--xs1)}legend{position:absolute;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);width:1px;height:1px;white-space:nowrap}meter{--meter-height: var(--sm1);--meter-radius: var(--radius-md);--meter-color-track: var(--primary-100);--meter-color-low: var(--no-400);--meter-color-med: var(--maybe-400);--meter-color-high: var(--yes-400);width:100%;background:var(--meter-color-track);border-radius:var(--meter-radius);height:var(--meter-height)}meter::-webkit-meter-bar{background:var(--meter-color-track)}meter::-webkit-meter-bar,meter::-webkit-meter-optimum-value,meter::-webkit-meter-suboptimum-value,meter::-webkit-meter-even-less-good-value{height:var(--meter-height);border:none;border-radius:var(--meter-radius)}meter::-webkit-meter-even-less-good-value{background:var(--meter-color-low)}meter::-webkit-meter-suboptimum-value{background:var(--meter-color-med)}meter::-webkit-meter-optimum-value{background:var(--meter-color-high)}meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:var(--meter-color-low)}meter:-moz-meter-sub-optimum::-moz-meter-bar{background:var(--meter-color-med)}meter:-moz-meter-optimum::-moz-meter-bar{background:var(--meter-color-high)}progress{--progress-height: var(--sm1);--progress-color: var(--primary-500);--progress-track-color: var(--primary-100);--progress-radius: var(--radius-md);appearance:none;width:100%;height:var(--progress-height);background:var(--progress-track-color);border-radius:var(--progress-radius);border:none}progress::-moz-progress-bar{background:var(--progress-color);border-radius:var(--progress-radius)}progress::-webkit-progress-bar{width:100%;background:var(--progress-track-color);border-radius:var(--progress-radius);height:var(--progress-height)}progress::-webkit-progress-value{background:var(--progress-color);border-radius:var(--progress-radius)}select{--icon-size: 24px;--split: calc(100% - var(--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:1px solid var(--ui-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%);-webkit-mask-image: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"),linear-gradient(to right,transparent calc(var(--split) - 1px),red 0),linear-gradient(red 0 0);mask-image: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"),linear-gradient(to right,transparent calc(var(--split) - 1px),red 0),linear-gradient(red 0 0);-webkit-mask-size:var(--icon-size),auto,auto;mask-size:var(--icon-size),auto,auto;-webkit-mask-position:calc(100% - var(--xs1)) center,0 0,0 0;mask-position:calc(100% - var(--xs1)) center,0 0,0 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-clip:padding-box,padding-box,border-box;mask-clip:padding-box,padding-box,border-box;-webkit-mask-origin:padding-box,padding-box,border-box;mask-origin:padding-box,padding-box,border-box;-webkit-mask-composite:source-over,xor;mask-composite:add,exclude}select:disabled{--csstools-light-dark-toggle--65: var(--csstools-color-scheme--light) hsl(from var(--text-color) h s 40%);--disabled-color: var(--csstools-light-dark-toggle--65, hsl(from var(--text-color) h s 70%));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%)}@supports (color: lab(from red l 1 1% / calc(alpha + .1))) and (color: light-dark(red,red)){select:disabled{--disabled-color: light-dark( hsl(from var(--text-color) h s 70%), hsl(from var(--text-color) h s 40%) )}}@supports not (color: light-dark(tan,tan)){select:disabled *{--csstools-light-dark-toggle--65: var(--csstools-color-scheme--light) hsl(from var(--text-color) h s 40%);--disabled-color: var(--csstools-light-dark-toggle--65, hsl(from var(--text-color) h s 70%))}}select[multiple]{height:auto;padding:var(--input-padding);background:var(--body-background-color);-webkit-mask-image:none;mask-image:none}textarea{width:100%;padding:var(--xs3);border-radius:var(--input-border-radius);border:1px solid var(--ui-border-color);resize:vertical}textarea:not([rows]){min-height:6em}}@layer elements{dialog{min-width:var(--tera1);max-width:var(--tera3);padding:var(--lg1) var(--md1);--csstools-light-dark-toggle--66: var(--csstools-color-scheme--light) var(--base-800);border:1px solid var(--csstools-light-dark-toggle--66, var(--base-200));--csstools-light-dark-toggle--67: var(--csstools-color-scheme--light) var(--base-900);background-color:var(--csstools-light-dark-toggle--67, var(--base-50));border-radius:var(--radius-lg)}@supports (color: light-dark(red,red)){dialog{border:1px solid light-dark(var(--base-200),var(--base-800));background-color:light-dark(var(--base-50),var(--base-900))}}dialog::backdrop{background:var(--dialog-backdrop-color);opacity:var(--dialog-backdrop-opacity)}dialog [aria-label="close pop-up"]{position:absolute;top:var(--xs3);right:var(--xs3);background:transparent;border:none;outline:none;cursor:pointer}dialog p:last-of-type{margin-bottom:0}details{padding:var(--sm1) var(--sm1);--csstools-light-dark-toggle--68: var(--csstools-color-scheme--light) var(--base-800);border:1px solid var(--csstools-light-dark-toggle--68, var(--base-200));--csstools-light-dark-toggle--69: var(--csstools-color-scheme--light) var(--base-900);background-color:var(--csstools-light-dark-toggle--69, var(--base-50));border-radius:var(--radius-lg);cursor:pointer}@supports (color: light-dark(red,red)){details{border:1px solid light-dark(var(--base-200),var(--base-800));background-color:light-dark(var(--base-50),var(--base-900))}}details summary{display:flex;justify-content:space-between;font-weight:var(--bold)}:is(details summary)::-webkit-details-marker{display:none}:is(details summary):after{content:"";width:24px;height:24px;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='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E") no-repeat;transition:var(--transition)}details[open]>summary{margin-bottom:var(--xs3)}:is(details[open]>summary):after{transform:rotate(180deg)}details 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 .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){.layout-centered .layout_content{margin-top:var(--xl3);margin-bottom:var(--md3);gap:var(--md3)}}.layout-centered .layout_content_main{grid-column:2}@media(width>=768px){.layout-sidebar .layout_content{display:grid;grid-template-columns:var(--layout-aside-width) minmax(0,1fr)}}.layout-sidebar .layout_content_main{padding:var(--sm2)}@media(width>=768px){.layout-sidebar .layout_content_main{grid-row:1;grid-column:2;padding:var(--lg1) var(--md2)}}@media(width>=768px){.layout-sidebar .layout_content_aside{grid-row:1;grid-column:1;padding:var(--lg1) var(--md3)}}@media(width>=768px){.layout-sidebar-end .layout_content{grid-template-columns:minmax(0,1fr) var(--layout-aside-width)}}@media(width>=768px){.layout-sidebar-end .layout_content_main{grid-column:1}}@media(width>=768px){.layout-sidebar-end .layout_content_aside{grid-column:2}}@media(width>=768px){.layout-docs .layout_content{display:grid;grid-template-columns:var(--layout-aside-width) minmax(0,1fr)}}@media(width>=1024px){.layout-docs .layout_content{grid-template-columns:var(--layout-aside-width) minmax(0,var(--layout-content-width)) var(--layout-toc-width)}}.layout-docs .layout_content_main{padding:var(--sm2)}@media(width>=768px){.layout-docs .layout_content_main{grid-row:1;grid-column:2;padding:var(--lg1) var(--md2)}}.layout-docs .layout_content_aside{display:none}@media(width>=768px){.layout-docs .layout_content_aside{display:block;grid-row:1;grid-column:1;padding:var(--lg1) var(--md3)}}@media(width>=768px){.layout-docs .layout_content_aside-toc{display:none}}@media(width>=1024px){.layout-docs .layout_content_aside-toc{display:block;grid-row:1;grid-column:3;padding:var(--lg1) var(--md3)}}.layout-split .layout_content{display:grid}@media(width>=768px){.layout-split .layout_content{grid-template-columns:1fr 1fr}}.layout-cover{min-height:100dvh}.layout-cover .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)}:is(p,ul,ol,dl) p,:is(p,ul,ol,dl) ul,:is(p,ul,ol,dl) ol,:is(p,ul,ol,dl) dl{margin-bottom:0}:is(ul,ol) ul,:is(ul,ol) ol{margin-inline-start:0;padding-inline-start:var(--sm2)}:is(ul,ol) li{margin-bottom:.5em}:is(:is(ul,ol) li)::marker{--csstools-light-dark-toggle--70: var(--csstools-color-scheme--light) var(--base-600);color:var(--csstools-light-dark-toggle--70, var(--base-300))}@supports (color: light-dark(red,red)){:is(:is(ul,ol) li)::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}ol 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}.wrap>*,.wrap>astro-island>*,.wrap>astro-slot>*,.wrap>astro-static-slot>*{grid-column:2;padding-inline:var(--wrap-spacing)}@media(width>=768px){.wrap>*,.wrap>astro-island>*,.wrap>astro-slot>*,.wrap>astro-static-slot>*{padding-inline:var(--wrap-md-spacing)}}@media(width>=1024px){.wrap>*,.wrap>astro-island>*,.wrap>astro-slot>*,.wrap>astro-static-slot>*{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 components{.avatar{--avatar-size: var(--xl1);--avatar-font-size: var(--text-md);--status-dot-size: var(--xs3);--status-dot-position: 4%;--status-dot-border-width: 2px;--status-dot-border-color: var(--body-background-color);position:relative;display:inline-block;width:var(--avatar-size)}.avatar>div{display:flex;justify-content:center;aspect-ratio:1;align-items:center;border-radius:var(--avatar-radius);font-size:var(--avatar-font-size);line-height:1;background-color:var(--avatar-background-color);border:var(--avatar-border-width) solid var(--avatar-border-color);color:var(--avatar-color);overflow:hidden}:is(.avatar.is-online,.avatar.is-offline):after{content:"";display:block;width:var(--status-dot-size);aspect-ratio:1;position:absolute;top:var(--status-dot-position);right:var(--status-dot-position);border:var(--status-dot-border-width) solid var(--status-dot-border-color);border-radius:var(--radius-round);background-color:var(--avatar-status-dot-color-offline)}.avatar.is-online:after{background-color:var(--avatar-status-dot-color-online)}.avatar-sm{--avatar-size: var(--sm3);--avatar-font-size: var(--text-xs);--status-dot-size: var(--xs2);--status-dot-position: 0;--status-dot-border-width: 1px}.avatar-md{--avatar-size: var(--md3);--avatar-font-size: var(--text-sm);--status-dot-size: var(--xs2);--status-dot-border-width: 1px}.avatar-lg{--avatar-size: var(--xl3);--avatar-font-size: var(--text-xl);--status-dot-size: var(--xs3);--status-dot-position: 7%}.avatar-xl{--avatar-size: var(--xxl3);--avatar-font-size: var(--display-lg);--status-dot-size: var(--sm2);--status-dot-position: 7%}}@layer components{.badge{display:inline-block;padding:var(--xs1) var(--xs2);font-size:var(--badge-font-size);font-weight:var(--semi-bold);line-height:var(--leading-sm);color:var(--badge-color);background:var(--badge-background-color);border-radius:var(--badge-border-radius)}.badge.badge-primary{--badge-color: var(--badge-primary-color);--badge-background-color: var(--badge-primary-background-color)}.badge.badge-success{--badge-color: var(--badge-success-color);--badge-background-color: var(--badge-success-background-color)}.badge.badge-danger{--badge-color: var(--badge-danger-color);--badge-background-color: var(--badge-danger-background-color)}.badge.badge-warning{--badge-color: var(--badge-warning-color);--badge-background-color: var(--badge-warning-background-color)}}@layer components{.banner{display:flex;align-items:center;justify-content:center;gap:var(--xs3);padding:var(--xs2) var(--sm1);font-size:var(--text-sm);text-align:center;color:var(--banner-color);background:var(--banner-background-color)}.banner a{color:inherit;font-weight:var(--semi-bold)}.banner_content p{margin-bottom:0}.banner_close{display:flex;align-items:center;justify-content:center;min-width:var(--sm3);min-height:var(--sm3);padding:var(--xs1);color:inherit;background:transparent;border:none;cursor:pointer}.banner_close svg{width:var(--sm1);height:var(--sm1)}}@layer components{.breadcrumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--xs2);margin:0;padding:0;list-style:none;font-size:var(--text-sm)}.breadcrumbs li{display:flex;align-items:center;gap:var(--xs2)}.breadcrumbs li+li:before{content:var(--breadcrumbs-separator);color:var(--breadcrumbs-separator-color)}@supports (content: "a" / "a"){.breadcrumbs li+li:before{content:var(--breadcrumbs-separator) / ""}}.breadcrumbs a{color:var(--breadcrumbs-color);-webkit-text-decoration:none;text-decoration:none;transition:color var(--transition)}:is(.breadcrumbs a):hover{color:var(--link-color)}.breadcrumbs [aria-current=page]{color:var(--breadcrumbs-color-current);font-weight:var(--semi-bold)}}@layer components{.button,.bt{display:inline-flex;display:inline flex;justify-content:center;align-items:center;min-width:var(--bt-min-width);min-height:var(--md3);padding-inline:var(--xs3);font-weight:var(--bt-font-weight);font-size:var(--bt-font-size);-webkit-text-decoration:none;text-decoration:none;color:var(--bt-color);background-color:var(--bt-background-color);border:var(--bt-border-width) solid var(--bt-border-color);border-radius:var(--bt-border-radius);cursor:pointer;transition:color var(--transition-fast),background-color var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast)}:is(.button,.bt):where(:not(:disabled):hover){color:var(--bt-color-hover);background-color:var(--bt-background-color-hover);border-color:var(--bt-border-color-hover, var(--bt-border-color))}:is(.button,.bt):where(:not(:disabled):active){transform:scale(.97)}[aria-disabled=true]:is(.button,.bt),:is(.button,.bt):disabled{opacity:var(--o-2);pointer-events:none}:is(.button,.bt) svg{width:var(--sm1);height:var(--sm1);margin-inline-start:0;margin-inline-end:.5em}.bt-tightIcon:is(.button,.bt) svg{margin-inline-end:.25em;margin-inline-start:calc(var(--xs2) * -1)}.bt-outline:is(.button,.bt){--bt-background-color: transparent;--bt-border-color: var(--bt-outline-border-color);--bt-color-hover: var(--bt-outline-color-hover);--bt-background-color-hover: var(--bt-outline-background-color-hover);--bt-border-color-hover: var(--bt-outline-border-color-hover)}.bt-text:is(.button,.bt){--bt-border-color: transparent;--bt-background-color: transparent;--bt-color-hover: var(--link-color);--bt-background-color-hover: transparent;--bt-border-color-hover: transparent}.bt-outline-white:is(.button,.bt){--bt-color: var(--base-0);--bt-color-hover: var(--base-0);--bt-background-color: transparent;--bt-background-color-hover: rgb(255 255 255 / .1);--bt-border-color: var(--base-0);--bt-border-color-hover: var(--base-0)}.bt-white:is(.button,.bt){--bt-color: var(--primary-700);--bt-color-hover: var(--primary-600);--bt-background-color: var(--base-0);--bt-background-color-hover: var(--primary-50);--bt-border-color: var(--base-0);--bt-border-color-hover: var(--base-0)}.bt-primary:is(.button,.bt){--bt-color: var(--bt-primary-color);--bt-color-hover: var(--bt-primary-color-hover);--bt-background-color: var(--bt-primary-background-color);--bt-background-color-hover: var(--bt-primary-background-color-hover);--bt-border-color: var(--bt-primary-border-color);--bt-border-color-hover: var(--bt-primary-background-color-hover)}.bt-primary.bt-outline:is(.button,.bt){--bt-color: var(--bt-primary-background-color);--bt-color-hover: var(--bt-primary-color);--bt-background-color: transparent;--bt-background-color-hover: var(--bt-primary-background-color);--bt-border-color-hover: var(--bt-primary-border-color-hover)}.bt-yes:is(.button,.bt){--bt-color: var(--base-0);--bt-color-hover: var(--yes-500);--bt-background-color: var(--yes-500);--bt-background-color-hover: var(--yes-100);--bt-border-color: var(--yes-500);--bt-border-color-hover: var(--yes-100)}.bt-yes.bt-outline:is(.button,.bt){--bt-color: var(--yes-500);--bt-color-hover: var(--base-0);--bt-background-color: transparent;--bt-background-color-hover: var(--yes-500);--bt-border-color-hover: var(--yes-500)}.bt-no:is(.button,.bt){--bt-color: var(--base-0);--bt-color-hover: var(--no-500);--bt-background-color: var(--no-500);--bt-background-color-hover: var(--no-100);--bt-border-color: var(--no-500);--bt-border-color-hover: var(--no-100)}.bt-no.bt-outline:is(.button,.bt){--bt-color: var(--no-500);--bt-color-hover: var(--base-0);--bt-background-color: transparent;--bt-background-color-hover: var(--no-500);--bt-border-color-hover: var(--no-500)}.bt-maybe:is(.button,.bt){--bt-color: var(--base-0);--bt-color-hover: var(--maybe-500);--bt-background-color: var(--maybe-500);--bt-background-color-hover: var(--maybe-100);--bt-border-color: var(--maybe-500);--bt-border-color-hover: var(--maybe-100)}.bt-maybe.bt-outline:is(.button,.bt){--bt-color: var(--maybe-500);--bt-color-hover: var(--base-0);--bt-background-color: transparent;--bt-background-color-hover: var(--maybe-500);--bt-border-color-hover: var(--maybe-500)}.bt-md{min-width:var(--bt-min-width-md);min-height:var(--lg2);padding-inline:var(--xs3)}.bt-lg{min-width:var(--bt-min-width-lg);min-height:var(--xl1);padding-inline:var(--sm2);font-size:var(--bt-font-size-lg);border-radius:var(--bt-border-radius-lg)}.bt-lg svg{width:var(--sm3);height:var(--sm3)}.bt-lg.bt-tightIcon svg{margin-inline-start:calc(var(--xs3) * -1)}}@layer components{.card{--loading-animation: 2s infinite ease-in-out;position:relative;display:flex;flex-direction:column;padding:var(--card-spacing);color:var(--card-color);border-radius:var(--card-border-radius);border:var(--card-border-width) solid var(--card-border-color);transition:box-shadow var(--transition)}.card.is-disabled{opacity:var(--o-2);pointer-events:none}.card-filled{background:var(--card-bg-color);border:none}.card-raised{border:var(--card-border-width) solid var(--card-border-color);box-shadow:var(--card-shadow)}.card-raised:hover:not(.is-disabled){box-shadow:var(--card-shadow-hover)}.card_link:after{content:"";position:absolute;inset:0}.card_header{display:grid;grid-template-columns:1fr minmax(min-content,max-content);align-items:start;gap:var(--xs2);margin-bottom:var(--xs3)}.card_header:has(+.card_media){margin-bottom:var(--card-spacing)}.card_title{margin-bottom:0;font-size:var(--text-lg);font-weight:var(--semi-bold)}.card_title a{color:var(--card-color);-webkit-text-decoration:none;text-decoration:none;transition:color var(--transition)}:is(.card_title a):hover{color:var(--link-color)}.card_header_text p{font-size:var(--text-lg);color:var(--card-secondary-text-color)}.card_badges{display:flex;flex-wrap:wrap;gap:var(--xs2);justify-content:flex-end;transform:translate(var(--xs2),calc(var(--xs2) * -1))}.card_tags{position:relative;z-index:var(--z-1);margin-bottom:var(--sm2)}.card_media{margin-bottom:var(--card-spacing);overflow:hidden;border-radius:var(--card-border-radius)}.card_media-flush{margin:calc(var(--card-spacing) * -1);margin-bottom:var(--card-spacing);border-radius:var(--card-border-radius) var(--card-border-radius) 0 0}.card_image{width:100%;object-fit:cover;aspect-ratio:var(--card-aspect-ratio)}.card_content p:last-of-type{margin-bottom:0}.card_content:has(+.card_byline){margin-bottom:var(--sm1)}.card_byline{display:flex;align-items:center;gap:var(--xs2);margin-top:auto;font-size:var(--text-sm)}.card_byline time{color:var(--card-secondary-text-color)}.card_author{display:block;font-weight:var(--semi-bold)}.card_actions{display:flex;justify-content:flex-end;gap:var(--xs3);position:relative;margin-top:var(--card-spacing)}.card_placeholder{width:100%;aspect-ratio:var(--card-aspect-ratio);background:var(--card-loading-bg);animation:pulse var(--loading-animation)}.card_loading{display:flex;flex-direction:column;gap:var(--xs2)}.card_loadingLine{height:var(--sm1);background:var(--card-loading-bg);border-radius:var(--radius-sm);animation:pulse var(--loading-animation)}.card_loadingLine-short{width:75%}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}}@layer components{.faq{display:grid;gap:var(--faq-spacing)}.faq_content{cursor:auto}.faq_content p:last-of-type{margin-bottom:0}}@layer components{.featureItem{align-content:start}.featureItem_icon{display:flex;align-items:center;justify-content:center;width:var(--featureItem-icon-box-size);height:var(--featureItem-icon-box-size);margin-bottom:var(--sm1);color:var(--featureItem-icon-color);background-color:var(--featureItem-icon-background-color);border-radius:var(--featureItem-icon-border-radius)}.featureItem_icon svg{width:var(--featureItem-icon-size);height:var(--featureItem-icon-size)}.featureItem_title{margin-bottom:var(--xs2);font-size:var(--text-lg);font-weight:var(--semi-bold)}.featureItem_text p:last-of-type{margin-bottom:0}}@layer components{.field{position:relative;display:grid;gap:var(--field-spacing)}.field label{margin-bottom:0}.field_hint,.field_error{position:var(--field-message-position);top:calc(100% + var(--field-spacing));inset-inline:0;font-size:var(--text-sm)}.field_hint{color:var(--field-hint-color)}.field_error{display:none;color:var(--field-error-color)}:is(.field:has(:user-invalid),.field.is-invalid) .field_error{display:block}:is(.field:has(:user-invalid),.field.is-invalid):has(.field_error) .field_hint{display:none}.field.is-invalid :is(input,select,textarea){border-color:var(--input-border-color-invalid)}}@layer components{.fieldRow{--field-message-position: absolute;display:flex;flex-wrap:wrap;align-items:end;gap:var(--xs3)}.fieldRow_field{flex:1 1 200px}}@layer components{.footer{padding:var(--md3) var(--sm3);line-height:var(--leading-xl);color:var(--footer-text-color);background-color:var(--footer-background-color);border-top:var(--footer-border-width) dashed var(--footer-border-color);transition:background-color var(--transition)}@media(width>=768px){.footer{display:grid;gap:var(--md3);grid-template-columns:25% 1fr;padding:var(--lg3) var(--md3)}}.footer a{color:var(--footer-link-color);-webkit-text-decoration:none;text-decoration:none;font-weight:var(--book);transition:color var(--transition)}:is(.footer a):hover{color:var(--footer-link-color-hover)}.footer_meta{grid-column:1;grid-row:1}.footer_nav ul{margin:0;padding:0;list-style:none}:is(.footer_nav ul) li{margin:0}@media(width>=768px){.footer_nav>ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--sm3)}}:is(.footer_nav>ul) ul{margin-bottom:var(--md3)}@media(width>=768px){:is(.footer_nav>ul) ul{margin-bottom:0}}:is(:is(.footer_nav>ul) ul) li:not(:last-child){margin-bottom:var(--xs1)}}@layer components{.header{display:flex;align-items:center;gap:var(--sm3);height:var(--header-height);padding-inline:var(--header-padding);background-color:var(--header-background-color)}.header-sticky{position:sticky;top:0;z-index:var(--z-5);box-shadow:var(--shadow-sm)}.header-sticky.is-top{box-shadow:none}.header_logo{display:flex;align-items:center;gap:var(--sm2);font-size:var(--text-md);font-weight:var(--semi-bold);-webkit-text-decoration:none;text-decoration:none;color:var(--text-color)}.header_nav{display:none;margin-inline-start:auto}@media(width>=768px){.header_nav{display:block}}.header_nav ul{display:flex;gap:var(--md3);margin:0;padding:0;list-style:none}:is(.header_nav ul) li{margin:0}:is(.header_nav ul) a{display:flex;align-items:center;height:var(--header-height);font-size:var(--text-sm);font-weight:var(--bold);-webkit-text-decoration:none;text-decoration:none;color:var(--text-color);transition:color var(--transition)}:is(:is(.header_nav ul) a):hover,[aria-current]:is(:is(.header_nav ul) a){color:var(--link-color)}.header_actions{display:none}@media(width>=768px){.header_actions{display:flex;align-items:center;gap:var(--sm3)}}.header_navMobile{margin-inline-start:auto}@media(width>=768px){.header_navMobile{display:none}}.header_navMobile button{display:flex;align-items:center;justify-content:center;min-width:var(--sm3);min-height:var(--sm3);padding:var(--xs2);color:var(--text-color);background:transparent;border:none;cursor:pointer}.header_navMobile>div{display:none;position:fixed;top:0;left:0;width:100vw;height:100svh;overflow-y:auto;padding:var(--lg3);background-color:var(--header-menu-background-color);z-index:var(--z-5)}.is-open:is(.header_navMobile>div){display:block}:is(.header_navMobile>div) button{position:fixed;top:0;right:0;padding:var(--sm1) var(--sm3);color:var(--header-menu-color)}:is(.header_navMobile>div) a{color:var(--header-menu-color);-webkit-text-decoration:none;text-decoration:none}[aria-current]:is(:is(.header_navMobile>div) a){color:var(--header-menu-color-current)}:is(.header_navMobile>div) ul{margin:0;padding:0;list-style:none}:is(:is(.header_navMobile>div) ul) li{margin:0}:is(.header_navMobile>div)>ul{font-size:var(--text-lg)}:is(:is(.header_navMobile>div)>ul) li{margin-top:var(--sm1)}:is(:is(.header_navMobile>div)>ul) ul{padding-inline-start:var(--sm1);border-inline-start:1px solid var(--header-menu-border-color)}:is(:is(:is(.header_navMobile>div)>ul) ul) a{color:var(--header-menu-secondary-color)}[aria-current]:is(:is(:is(:is(.header_navMobile>div)>ul) ul) a){color:var(--header-menu-color-current)}.header_menuExtra{display:flex;margin-bottom:var(--sm3)}}@layer components{.section{padding-block:var(--section-spacing)}.section-filled{background-color:var(--section-filled-background-color)}.section-primary{background-color:var(--section-primary-background-color);color:var(--section-primary-text-color);--text-color: var(--section-primary-text-color);--link-color: var(--section-primary-link-color);--link-color-hover: var(--section-primary-link-color-hover);--section-eyebrow-color: var(--section-primary-eyebrow-color);--section-lede-color: var(--section-primary-lede-color)}.section_header{margin-bottom:var(--section-header-spacing);text-align:center}.section_eyebrow{margin-bottom:var(--xs2);font-size:var(--text-sm);font-weight:var(--semi-bold);letter-spacing:var(--tracking-lg);text-transform:uppercase;color:var(--section-eyebrow-color)}.section_title{margin-bottom:var(--xs3);font-size:var(--display-md)}.section_lede{font-size:var(--text-lg);color:var(--section-lede-color)}.section_actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--xs3)}}@layer components{.hero_wrap{position:relative;display:flex;align-items:center;justify-content:center;min-height:60svh;overflow:hidden}.hero_overlay{position:absolute;inset:0;pointer-events:none;z-index:2}.hero_content{padding:var(--hero-content-padding);max-width:70ch}.hero_actions{display:flex;flex-wrap:wrap;gap:var(--xs3);margin-top:var(--hero-actions-spacing)}.hero_media{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.hero_media img,.hero_media video{width:100%;height:100%;object-fit:cover}.hero_bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}.hero-split{--hero-ratio-left: 62fr;--hero-ratio-right: 38fr;display:grid;align-items:center;grid-template-columns:1fr}@media(width>=768px){.hero-split{grid-template-columns:var(--hero-ratio-left) var(--hero-ratio-right)}}@media(width>=768px){.hero-split.hero-reversed div:nth-child(1){order:2}.hero-split.hero-reversed div:nth-child(2){order:1}.hero-split.hero-flush:not(.hero-reversed) .hero_media+.hero_content{padding-inline-end:0}.hero-split.hero-flush:not(.hero-reversed) .hero_content:has(+.hero_media){padding-inline-start:0}.hero-split.hero-flush.hero-reversed .hero_media+.hero_content{padding-inline-start:0}.hero-split.hero-flush.hero-reversed .hero_content:has(+.hero_media){padding-inline-end:0}}.hero-full .hero_content{z-index:2;text-align:center;max-width:60ch;min-width:200px}.hero-full .hero_actions{justify-content:center}.hero-roundCorners .hero_media{overflow:hidden;border-radius:var(--hero-radius)}.hero-roundCorners .hero_wrap{border-radius:var(--hero-radius)}.hero-slideshow .hero_content{position:relative;width:50ch}.hero-slideshow .hero_actions{justify-content:center}.hero-slideshow .hero_content ul>li,.hero-slideshow .hero_bg{z-index:2;position:absolute;inset:0;text-align:center;pointer-events:none;opacity:0;transition-property:opacity;transition-timing-function:ease-in-out;transition-duration:var(--slideshow-transition, .22s)}.is-active:is(.hero-slideshow .hero_content ul>li,.hero-slideshow .hero_bg){opacity:1;pointer-events:auto}.hero_pagination{position:absolute;left:0;right:0;bottom:var(--md1);display:flex;justify-content:center;align-items:center;gap:var(--xs1);z-index:2}.hero_pagination_dot{display:grid;place-items:center;width:max(var(--hero-pagination-dot),24px);height:max(var(--hero-pagination-dot),24px);padding:0;background:transparent;border:none;cursor:pointer}.hero_pagination_dot:before{content:"";width:var(--hero-pagination-dot);height:var(--hero-pagination-dot);border-radius:var(--radius-round);background:var(--hero-pagination-dot-color);opacity:var(--hero-pagination-opacity);box-shadow:var(--shadow-sm);transition:opacity var(--transition),background-color var(--transition)}.hero_pagination_dot.is-active:before{opacity:1;background:var(--hero-pagination-dot-active-color)}}@layer components{.pagination ul{display:flex;flex-wrap:wrap;align-items:center;gap:var(--xs1);margin:0;padding:0;list-style:none}.pagination a,.pagination span{display:flex;align-items:center;justify-content:center;min-width:var(--pagination-size);min-height:var(--pagination-size);font-size:var(--text-sm);font-weight:var(--semi-bold);-webkit-text-decoration:none;text-decoration:none;color:var(--pagination-color);border-radius:var(--pagination-border-radius);transition:background-color var(--transition-fast)}.pagination a:hover{background-color:var(--pagination-background-color-hover)}.pagination a[aria-current=page]{color:var(--pagination-color-current);background-color:var(--pagination-background-color-current)}.pagination_arrow svg{width:var(--sm1);height:var(--sm1)}.pagination_arrow[aria-disabled=true]{opacity:var(--o-2)}.pagination_arrow-prev svg{rotate:90deg}.pagination_arrow-next svg{rotate:-90deg}}@layer components{.prevNext{display:grid;grid-template-columns:1fr 1fr;gap:var(--sm1)}.prevNext_link{display:grid;align-content:start;gap:var(--xs1);padding:var(--sm1);-webkit-text-decoration:none;text-decoration:none;color:var(--text-color);border:var(--border-sm) solid var(--prevNext-border-color);border-radius:var(--prevNext-border-radius);transition:border-color var(--transition)}.prevNext_link:hover{border-color:var(--prevNext-border-color-hover)}.prevNext_link small{color:var(--prevNext-label-color)}.prevNext_link span{font-weight:var(--semi-bold)}.prevNext_link-prev{grid-column:1}.prevNext_link-next{grid-column:2;text-align:end}}@layer components{.pricingCard{display:flex;flex-direction:column}.pricingCard-highlighted{border-color:var(--pricingCard-highlight-border-color);box-shadow:0 0 0 var(--border-sm) var(--pricingCard-highlight-border-color)}.pricingCard_header{display:flex;align-items:center;justify-content:space-between;gap:var(--xs2);margin-bottom:var(--sm1)}.pricingCard_name{margin-bottom:0;font-size:var(--text-lg);font-weight:var(--semi-bold)}.pricingCard_price{display:flex;align-items:baseline;gap:var(--xs1);margin-bottom:var(--sm1)}.pricingCard_amount{font-family:var(--heading-font);font-size:var(--display-md);font-weight:var(--black);line-height:var(--leading-xs)}.pricingCard_period,.pricingCard_description{color:var(--card-secondary-text-color)}.pricingCard_period{font-size:var(--text-sm)}.pricingCard_description{margin-bottom:var(--sm1)}.pricingCard_features{display:grid;gap:var(--xs2);margin:0 0 var(--sm3);padding:0;list-style:none}.pricingCard_features li{display:flex;align-items:start;gap:var(--xs2)}.pricingCard_check{flex:none;display:flex;margin-top:var(--xs1);color:var(--pricingCard-check-color)}.pricingCard_check svg{width:var(--sm1);height:var(--sm1)}.pricingCard_cta{display:grid;margin-top:auto}}@layer components{.testimonial{display:grid;align-content:start;gap:var(--sm1)}.testimonial_quote{margin-bottom:0}.testimonial_byline{display:flex;align-items:center;gap:var(--xs2);font-size:var(--text-sm)}.testimonial_name{display:block;font-weight:var(--semi-bold)}.testimonial_role{display:block;color:var(--testimonial-role-color)}}@layer components{.readProgressBar{position:fixed;top:0;left:0;width:100%;height:var(--readProgressBar-height);z-index:var(--z-5)}.readProgressBar>div{width:100%;height:100%;background:var(--readProgressBar-color);animation:bar linear;animation-timeline:scroll(root y)}@keyframes bar{0%{width:0}to{width:100vw}}}@layer components{.notice{--bg-color: var(--notice-background-color);--bd-color: var(--notice-border-color);--svg-color: inherit;--code-color: inherit;--code-bg-color: inherit;padding:var(--notice-spacing);border:var(--notice-border-width) solid var(--bd-color);border-radius:var(--notice-border-radius);color:var(--notice-text-color);background-color:var(--bg-color)}.notice code{background-color:var(--code-bg-color);color:var(--code-color)}.notice p:last-of-type{margin-bottom:0}.notice_title{display:flex}.notice_title svg{margin-bottom:var(--xs3);margin-inline-end:.5em;color:var(--svg-color)}.notice_title strong{display:block;margin-bottom:var(--xs1)}.notice-info{color:var(--base-950);--bg-color: var(--primary-100);--bd-color: var(--primary-300);--svg-color: var(--primary-400);--code-color: var(--primary-600);--code-bg-color: var(--primary-200)}.notice-danger{color:var(--base-950);--bg-color: var(--no-200);--bd-color: var(--no-500);--svg-color: var(--no-500);--code-color: var(--no-500);--code-bg-color: var(--no-100)}.notice-warning{color:var(--base-950);--bg-color: var(--maybe-200);--bd-color: var(--maybe-500);--svg-color: var(--maybe-400);--code-color: var(--maybe-500);--code-bg-color: var(--maybe-100)}.notice-confirm{color:var(--base-950);--bg-color: var(--yes-100);--bd-color: var(--yes-500);--svg-color: var(--yes-400);--code-color: var(--yes-500);--code-bg-color: var(--yes-200)}@scope(.prose)to (.not-prose){.notice:has(+:is(h1,h2,h3,h4)){margin-bottom:calc(var(--prose-spacing) * 2)}}}@layer components{.socialMedia{--icon-size: var(--sm3);display:flex;flex-wrap:wrap;gap:var(--sm1);list-style:none;padding:0;margin:0}.socialMedia a{display:block;width:var(--icon-size);height:var(--icon-size)}:is(.socialMedia a) svg{width:var(--icon-size);height:var(--icon-size)}.socialMedia-md{--icon-size: var(--md2)}.socialMedia-lg{--icon-size: var(--lg2);gap:var(--sm2)}.socialMedia-xl{--icon-size: var(--xl2);gap:var(--md2)}}@layer components{.tags li{margin-bottom:var(--xs2)}:is(.tags li):last-child{margin-bottom:0}.tags a{padding:var(--xs1) var(--tags-padding);-webkit-text-decoration:none;text-decoration:none;text-transform:lowercase;font-size:var(--tags-font-size);font-style:normal;color:var(--tags-color);border-radius:var(--tags-radius);background-color:var(--tags-background-color);transition:background-color var(--transition)}:is(.tags a):hover{background-color:var(--tags-background-color-hover)}.tags-inline{display:flex;flex-wrap:wrap;gap:var(--xs2)}.tags-inline li{margin-bottom:0}}@layer components{.tiles{--tiles-columns: 1;display:grid;grid-template-columns:repeat(var(--tiles-columns),1fr);grid-column-gap:var(--grid-column-gap);grid-row-gap:var(--grid-row-gap);margin:0;padding:0;list-style:none}.tiles>li{display:grid}@container (width >= 36rem){.tiles{--tiles-columns: 2}}@container (width >= 56rem){.tiles{--tiles-columns: 3}}@container (width >= 76rem){.tiles{--tiles-columns: 4}}@container (width >= 96rem){.tiles{--tiles-columns: 5}}@container (width >= 116rem){.tiles{--tiles-columns: 6}}@container (width >= 28rem){.tiles-sm{--tiles-columns: 2}}@container (width >= 44rem){.tiles-sm{--tiles-columns: 3}}@container (width >= 60rem){.tiles-sm{--tiles-columns: 4}}@container (width >= 76rem){.tiles-sm{--tiles-columns: 5}}@container (width >= 92rem){.tiles-sm{--tiles-columns: 6}}.tiles_container{container-type:inline-size}}@layer components{.toc:not(:has(li:nth-of-type(2))){display:none}.toc p{margin-bottom:var(--xs2)}.toc ul{font-size:var(--text-sm)}:is(.toc ul) ul{margin-inline-start:var(--toc-indentation)}.toc>ul>li:first-child>a:first-child{padding-top:0}.toc a{display:flex;align-items:center;padding-top:calc(var(--toc-spacing) / 2);padding-bottom:calc(var(--toc-spacing) / 2);-webkit-text-decoration:none;text-decoration:none;color:var(--toc-color);transition:color var(--transition)}:is(.toc a):hover{color:var(--toc-color-hover)}:is(.toc a) span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.is-active:is(.toc a){color:var(--toc-color-hover)}.is-active:is(.toc a) svg{transform:translate(calc(var(--xs1) * -1));opacity:var(--o-5)}.toc-icon a{margin-inline-start:calc(var(--toc-icon-size) * -1)}.toc-icon svg{width:var(--toc-icon-size);height:var(--toc-icon-size);flex-shrink:0;opacity:var(--o-0);transform:translate(calc(var(--toc-icon-size) * -1));transition:opacity var(--transition),transform var(--transition)}}@layer components{.toggle{--toggle-w: var(--toggle-width);--toggle-h: var(--toggle-height);--toggle-bd: var(--toggle-border-width);position:relative;appearance:none;border:none;padding:0;display:block;width:var(--toggle-w);height:var(--toggle-h);border-radius:calc(var(--toggle-h) / 2);cursor:pointer;background-color:var(--toggle-track-color)}.toggle:before{--diameter: calc(var(--toggle-h) - var(--toggle-bd) * 2);position:absolute;top:var(--toggle-bd);left:var(--toggle-bd);content:"";display:block;width:var(--diameter);height:var(--diameter);border-radius:var(--diameter);background-color:var(--toggle-thumb-color);transition:left var(--transition),transform var(--transition),width var(--transition);transform:translate(0)}.toggle:checked{background-color:var(--toggle-track-color-checked)}.toggle:checked:before{left:calc(100% - var(--toggle-bd));transform:translate(-100%)}.toggle:active:before{width:calc(var(--diameter) * 1.3)}}@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{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}} +/*! mCSS v1.2.0 | MIT | https://mcss.dev */ +@layer settings,base,elements,global,components,theme,helpers;@layer settings{:root{--baseline: 8;--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;--heading-1: clamp(var(--display-md), 1.269rem + 2.682vw, var(--display-xl));--heading-2: clamp(var(--display-sm), 1.057rem + 2.235vw, var(--display-lg));--heading-3: clamp(var(--text-xl), .881rem + 1.865vw, var(--display-md));--heading-4: clamp(var(--text-lg), .734rem + 1.553vw, var(--display-sm));--heading-5: clamp(var(--text-lg), .988rem + .706vw, var(--text-xl));--heading-6: clamp(var(--text-md), .824rem + .588vw, var(--text-lg));--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;--tracking-display-md: .5em;--tracking-display-lg: .75em;--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{--csstools-color-scheme--light: initial;color-scheme:light dark;--csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) var(--base-500);--ui-border-color: var(--csstools-light-dark-toggle--0, var(--base-200));--csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) rgb(0 0 0 / .6);--ui-shadow-color: var(--csstools-light-dark-toggle--1, rgb(0 0 0 / .1));--csstools-light-dark-toggle--2: var(--csstools-color-scheme--light) var(--primary-400);--focus-ring-color: var(--csstools-light-dark-toggle--2, var(--primary-500));--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)}@supports (color: light-dark(red,red)){:root{--ui-border-color: light-dark(var(--base-200), var(--base-500))}}@supports (color: light-dark(red,red)) and (color: rgb(0 0 0 / 0)){:root{--ui-shadow-color: light-dark(rgb(0 0 0 / .1), rgb(0 0 0 / .6))}}@supports (color: light-dark(red,red)){:root{--focus-ring-color: light-dark(var(--primary-500), var(--primary-400))}}@supports not (color: light-dark(tan,tan)){:root *{--csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) var(--base-500);--ui-border-color: var(--csstools-light-dark-toggle--0, var(--base-200));--csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) rgb(0 0 0 / .6);--ui-shadow-color: var(--csstools-light-dark-toggle--1, rgb(0 0 0 / .1));--csstools-light-dark-toggle--2: var(--csstools-color-scheme--light) var(--primary-400);--focus-ring-color: var(--csstools-light-dark-toggle--2, var(--primary-500))}}@media(prefers-color-scheme:dark){:root{--csstools-color-scheme--light: }}:root.theme-light{--csstools-color-scheme--light: initial;color-scheme:light}:root.theme-dark{--csstools-color-scheme--light: ;color-scheme:dark}:root{accent-color:var(--primary-500);--csstools-light-dark-toggle--3: var(--csstools-color-scheme--light) var(--base-950);--body-background-color: var(--csstools-light-dark-toggle--3, var(--base-0));--input-height: var(--md3);--input-padding: var(--xs3);--input-border-radius: var(--radius-md);--csstools-light-dark-toggle--4: var(--csstools-color-scheme--light) var(--danger-400);--input-border-color-invalid: var(--csstools-light-dark-toggle--4, var(--danger-500));--dialog-backdrop-color: var(--base-950);--dialog-backdrop-opacity: var(--o-4);--table-padding: var(--xs2) var(--sm1);--csstools-light-dark-toggle--5: var(--csstools-color-scheme--light) var(--base-700);--table-border-color: var(--csstools-light-dark-toggle--5, var(--base-100));--table-border-radius: var(--radius-md);--table-background-color: none;--heading-font: var(--display);--heading-weight: var(--black);--heading-line-height: var(--leading-sm);--csstools-light-dark-toggle--6: var(--csstools-color-scheme--light) var(--base-200);--text-color: var(--csstools-light-dark-toggle--6, var(--base-950));--csstools-light-dark-toggle--7: var(--csstools-color-scheme--light) var(--primary-400);--link-color: var(--csstools-light-dark-toggle--7, var(--primary-600));--link-color-hover: var(--primary-500);--csstools-light-dark-toggle--8: var(--csstools-color-scheme--light) var(--primary-400);--text-code-color: var(--csstools-light-dark-toggle--8, var(--primary-600));--csstools-light-dark-toggle--9: var(--csstools-color-scheme--light) var(--primary-900);--text-code-background-color: var(--csstools-light-dark-toggle--9, var(--primary-100));--pre-border-radius: var(--radius-md);--marker-color: var(--highlight-500);--csstools-light-dark-toggle--10: var(--csstools-color-scheme--light) var(--base-0);--selection-color: var(--csstools-light-dark-toggle--10, var(--base-950));--csstools-light-dark-toggle--11: var(--csstools-color-scheme--light) var(--primary-700);--selection-background-color: var(--csstools-light-dark-toggle--11, var(--primary-200))}@supports (color: light-dark(red,red)){:root{--body-background-color: light-dark(var(--base-0), var(--base-950));--input-border-color-invalid: light-dark(var(--danger-500), var(--danger-400));--table-border-color: light-dark(var(--base-100), var(--base-700));--text-color: light-dark(var(--base-950), var(--base-200));--link-color: light-dark(var(--primary-600), var(--primary-400));--text-code-color: light-dark(var(--primary-600), var(--primary-400));--text-code-background-color: light-dark( var(--primary-100), var(--primary-900) );--selection-color: light-dark(var(--base-950), var(--base-0));--selection-background-color: light-dark(var(--primary-200), var(--primary-700))}}@supports not (color: light-dark(tan,tan)){:root *{--csstools-light-dark-toggle--3: var(--csstools-color-scheme--light) var(--base-950);--body-background-color: var(--csstools-light-dark-toggle--3, var(--base-0));--csstools-light-dark-toggle--4: var(--csstools-color-scheme--light) var(--danger-400);--input-border-color-invalid: var(--csstools-light-dark-toggle--4, var(--danger-500));--csstools-light-dark-toggle--5: var(--csstools-color-scheme--light) var(--base-700);--table-border-color: var(--csstools-light-dark-toggle--5, var(--base-100));--csstools-light-dark-toggle--6: var(--csstools-color-scheme--light) var(--base-200);--text-color: var(--csstools-light-dark-toggle--6, var(--base-950));--csstools-light-dark-toggle--7: var(--csstools-color-scheme--light) var(--primary-400);--link-color: var(--csstools-light-dark-toggle--7, var(--primary-600));--csstools-light-dark-toggle--8: var(--csstools-color-scheme--light) var(--primary-400);--text-code-color: var(--csstools-light-dark-toggle--8, var(--primary-600));--csstools-light-dark-toggle--9: var(--csstools-color-scheme--light) var(--primary-900);--text-code-background-color: var(--csstools-light-dark-toggle--9, var(--primary-100));--csstools-light-dark-toggle--10: var(--csstools-color-scheme--light) var(--base-0);--selection-color: var(--csstools-light-dark-toggle--10, var(--base-950));--csstools-light-dark-toggle--11: var(--csstools-color-scheme--light) var(--primary-700);--selection-background-color: var(--csstools-light-dark-toggle--11, var(--primary-200))}}:root{--grid-column-gap: var(--sm1);--grid-row-gap: var(--sm1);--wrap-spacing: var(--sm1);--wrap-md-spacing: var(--sm3);--wrap-lg-spacing: 0;--wrap-width-sm: minmax(200px, 55ch);--wrap-width-md: minmax(200px, 70ch);--wrap-width-lg: minmax(200px, 900px);--wrap-width: var(--wrap-width-md);--layout-content-width: 70ch;--layout-aside-width: 245px;--layout-toc-width: 1fr;--prose-spacing: var(--sm1)}@media(width>=768px){:root{--grid-column-gap: var(--sm3);--grid-row-gap: var(--sm3)}}:root{--badge-font-size: var(--text-sm);--badge-border-radius: var(--radius-md);--badge-color: var(--base-0);--csstools-light-dark-toggle--12: var(--csstools-color-scheme--light) var(--base-600);--badge-background-color: var(--csstools-light-dark-toggle--12, var(--base-700));--badge-primary-color: var(--base-0);--csstools-light-dark-toggle--13: var(--csstools-color-scheme--light) var(--primary-500);--badge-primary-background-color: var(--csstools-light-dark-toggle--13, var(--primary-600));--csstools-light-dark-toggle--14: var(--csstools-color-scheme--light) var(--base-0);--badge-success-color: var(--csstools-light-dark-toggle--14, var(--success-500));--csstools-light-dark-toggle--15: var(--csstools-color-scheme--light) var(--success-500);--badge-success-background-color: var(--csstools-light-dark-toggle--15, var(--success-100));--csstools-light-dark-toggle--16: var(--csstools-color-scheme--light) var(--base-0);--badge-danger-color: var(--csstools-light-dark-toggle--16, var(--danger-500));--csstools-light-dark-toggle--17: var(--csstools-color-scheme--light) var(--danger-500);--badge-danger-background-color: var(--csstools-light-dark-toggle--17, var(--danger-100));--csstools-light-dark-toggle--18: var(--csstools-color-scheme--light) var(--base-950);--badge-warning-color: var(--csstools-light-dark-toggle--18, var(--warning-500));--csstools-light-dark-toggle--19: var(--csstools-color-scheme--light) var(--warning-500);--badge-warning-background-color: var(--csstools-light-dark-toggle--19, var(--warning-100))}@supports (color: light-dark(red,red)){:root{--badge-background-color: light-dark(var(--base-700), var(--base-600));--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) )}}@supports not (color: light-dark(tan,tan)){:root *{--csstools-light-dark-toggle--12: var(--csstools-color-scheme--light) var(--base-600);--badge-background-color: var(--csstools-light-dark-toggle--12, var(--base-700));--csstools-light-dark-toggle--13: var(--csstools-color-scheme--light) var(--primary-500);--badge-primary-background-color: var(--csstools-light-dark-toggle--13, var(--primary-600));--csstools-light-dark-toggle--14: var(--csstools-color-scheme--light) var(--base-0);--badge-success-color: var(--csstools-light-dark-toggle--14, var(--success-500));--csstools-light-dark-toggle--15: var(--csstools-color-scheme--light) var(--success-500);--badge-success-background-color: var(--csstools-light-dark-toggle--15, var(--success-100));--csstools-light-dark-toggle--16: var(--csstools-color-scheme--light) var(--base-0);--badge-danger-color: var(--csstools-light-dark-toggle--16, var(--danger-500));--csstools-light-dark-toggle--17: var(--csstools-color-scheme--light) var(--danger-500);--badge-danger-background-color: var(--csstools-light-dark-toggle--17, var(--danger-100));--csstools-light-dark-toggle--18: var(--csstools-color-scheme--light) var(--base-950);--badge-warning-color: var(--csstools-light-dark-toggle--18, var(--warning-500));--csstools-light-dark-toggle--19: var(--csstools-color-scheme--light) var(--warning-500);--badge-warning-background-color: var(--csstools-light-dark-toggle--19, var(--warning-100))}}: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);--csstools-light-dark-toggle--20: var(--csstools-color-scheme--light) var(--base-0);--bt-color-hover: var(--csstools-light-dark-toggle--20, var(--text-color));--csstools-light-dark-toggle--21: var(--csstools-color-scheme--light) var(--base-800);--bt-background-color: var(--csstools-light-dark-toggle--21, var(--base-0));--csstools-light-dark-toggle--22: var(--csstools-color-scheme--light) var(--base-900);--bt-background-color-hover: var(--csstools-light-dark-toggle--22, var(--base-50));--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);--csstools-light-dark-toggle--23: var(--csstools-color-scheme--light) var(--base-0);--bt-outline-color-hover: var(--csstools-light-dark-toggle--23, var(--base-950));--csstools-light-dark-toggle--24: var(--csstools-color-scheme--light) rgb(255 255 255 / .1);--bt-outline-background-color-hover: var(--csstools-light-dark-toggle--24, rgb(0 0 0 / .1));--csstools-light-dark-toggle--25: var(--csstools-color-scheme--light) var(--base-0);--bt-outline-border-color: var(--csstools-light-dark-toggle--25, var(--base-950));--csstools-light-dark-toggle--26: var(--csstools-color-scheme--light) var(--base-0);--bt-outline-border-color-hover: var(--csstools-light-dark-toggle--26, var(--base-950));--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)}@supports (color: light-dark(red,red)){:root{--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-outline-color-hover: light-dark(var(--base-950), var(--base-0))}}@supports (color: light-dark(red,red)) and (color: rgb(0 0 0 / 0)){:root{--bt-outline-background-color-hover: light-dark( rgb(0 0 0 / .1), rgb(255 255 255 / .1) )}}@supports (color: light-dark(red,red)){:root{--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))}}@supports not (color: light-dark(tan,tan)){:root *{--csstools-light-dark-toggle--20: var(--csstools-color-scheme--light) var(--base-0);--bt-color-hover: var(--csstools-light-dark-toggle--20, var(--text-color));--csstools-light-dark-toggle--21: var(--csstools-color-scheme--light) var(--base-800);--bt-background-color: var(--csstools-light-dark-toggle--21, var(--base-0));--csstools-light-dark-toggle--22: var(--csstools-color-scheme--light) var(--base-900);--bt-background-color-hover: var(--csstools-light-dark-toggle--22, var(--base-50));--csstools-light-dark-toggle--23: var(--csstools-color-scheme--light) var(--base-0);--bt-outline-color-hover: var(--csstools-light-dark-toggle--23, var(--base-950));--csstools-light-dark-toggle--24: var(--csstools-color-scheme--light) rgb(255 255 255 / .1);--bt-outline-background-color-hover: var(--csstools-light-dark-toggle--24, rgb(0 0 0 / .1));--csstools-light-dark-toggle--25: var(--csstools-color-scheme--light) var(--base-0);--bt-outline-border-color: var(--csstools-light-dark-toggle--25, var(--base-950));--csstools-light-dark-toggle--26: var(--csstools-color-scheme--light) var(--base-0);--bt-outline-border-color-hover: var(--csstools-light-dark-toggle--26, var(--base-950))}}:root{--avatar-color: var(--base-0);--avatar-background-color: var(--base-400);--csstools-light-dark-toggle--27: var(--csstools-color-scheme--light) var(--base-500);--avatar-border-color: var(--csstools-light-dark-toggle--27, var(--base-0));--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)}@supports (color: light-dark(red,red)){:root{--avatar-border-color: light-dark(var(--base-0), var(--base-500))}}@supports not (color: light-dark(tan,tan)){:root *{--csstools-light-dark-toggle--27: var(--csstools-color-scheme--light) var(--base-500);--avatar-border-color: var(--csstools-light-dark-toggle--27, var(--base-0))}}:root{--banner-color: var(--base-0);--csstools-light-dark-toggle--28: var(--csstools-color-scheme--light) var(--primary-800);--banner-background-color: var(--csstools-light-dark-toggle--28, var(--primary-600))}@supports (color: light-dark(red,red)){:root{--banner-background-color: light-dark(var(--primary-600), var(--primary-800))}}@supports not (color: light-dark(tan,tan)){:root *{--csstools-light-dark-toggle--28: var(--csstools-color-scheme--light) var(--primary-800);--banner-background-color: var(--csstools-light-dark-toggle--28, var(--primary-600))}}:root{--breadcrumbs-separator: "/";--csstools-light-dark-toggle--29: var(--csstools-color-scheme--light) var(--base-600);--breadcrumbs-separator-color: var(--csstools-light-dark-toggle--29, var(--base-300));--csstools-light-dark-toggle--30: var(--csstools-color-scheme--light) var(--base-400);--breadcrumbs-color: var(--csstools-light-dark-toggle--30, var(--base-500));--breadcrumbs-color-current: var(--text-color)}@supports (color: light-dark(red,red)){:root{--breadcrumbs-separator-color: light-dark(var(--base-300), var(--base-600));--breadcrumbs-color: light-dark(var(--base-500), var(--base-400))}}@supports not (color: light-dark(tan,tan)){:root *{--csstools-light-dark-toggle--29: var(--csstools-color-scheme--light) var(--base-600);--breadcrumbs-separator-color: var(--csstools-light-dark-toggle--29, var(--base-300));--csstools-light-dark-toggle--30: var(--csstools-color-scheme--light) var(--base-400);--breadcrumbs-color: var(--csstools-light-dark-toggle--30, var(--base-500))}}:root{--card-spacing: var(--sm3);--card-color: var(--text-color);--csstools-light-dark-toggle--31: var(--csstools-color-scheme--light) var(--base-500);--card-secondary-text-color: var(--csstools-light-dark-toggle--31, var(--base-400));--csstools-light-dark-toggle--32: var(--csstools-color-scheme--light) var(--base-900);--card-bg-color: var(--csstools-light-dark-toggle--32, var(--base-100));--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);--csstools-light-dark-toggle--33: var(--csstools-color-scheme--light) var(--base-900);--card-loading-bg: var(--csstools-light-dark-toggle--33, var(--base-200));--card-aspect-ratio: var(--ar-golden)}@supports (color: light-dark(red,red)){:root{--card-secondary-text-color: light-dark(var(--base-400), var(--base-500));--card-bg-color: light-dark(var(--base-100), var(--base-900));--card-loading-bg: light-dark(var(--base-200), var(--base-900))}}@supports not (color: light-dark(tan,tan)){:root *{--csstools-light-dark-toggle--31: var(--csstools-color-scheme--light) var(--base-500);--card-secondary-text-color: var(--csstools-light-dark-toggle--31, var(--base-400));--csstools-light-dark-toggle--32: var(--csstools-color-scheme--light) var(--base-900);--card-bg-color: var(--csstools-light-dark-toggle--32, var(--base-100));--csstools-light-dark-toggle--33: var(--csstools-color-scheme--light) var(--base-900);--card-loading-bg: var(--csstools-light-dark-toggle--33, var(--base-200))}}:root{--toggle-width: 50px;--toggle-height: 28px;--toggle-border-width: 2px;--csstools-light-dark-toggle--34: var(--csstools-color-scheme--light) var(--base-700);--toggle-track-color: var(--csstools-light-dark-toggle--34, var(--base-300));--toggle-track-color-checked: var(--yes-400);--toggle-thumb-color: var(--body-background-color)}@supports (color: light-dark(red,red)){:root{--toggle-track-color: light-dark(var(--base-300), var(--base-700))}}@supports not (color: light-dark(tan,tan)){:root *{--csstools-light-dark-toggle--34: var(--csstools-color-scheme--light) var(--base-700);--toggle-track-color: var(--csstools-light-dark-toggle--34, var(--base-300))}}:root{--faq-spacing: var(--xs3)}:root{--field-spacing: var(--xs1);--csstools-light-dark-toggle--35: var(--csstools-color-scheme--light) var(--base-500);--field-hint-color: var(--csstools-light-dark-toggle--35, var(--base-400));--csstools-light-dark-toggle--36: var(--csstools-color-scheme--light) var(--danger-300);--field-error-color: var(--csstools-light-dark-toggle--36, var(--danger-500));--field-message-position: static}@supports (color: light-dark(red,red)){:root{--field-hint-color: light-dark(var(--base-400), var(--base-500));--field-error-color: light-dark(var(--danger-500), var(--danger-300))}}@supports not (color: light-dark(tan,tan)){:root *{--csstools-light-dark-toggle--35: var(--csstools-color-scheme--light) var(--base-500);--field-hint-color: var(--csstools-light-dark-toggle--35, var(--base-400));--csstools-light-dark-toggle--36: var(--csstools-color-scheme--light) var(--danger-300);--field-error-color: var(--csstools-light-dark-toggle--36, var(--danger-500))}}:root{--featureItem-icon-box-size: var(--lg3);--featureItem-icon-size: var(--sm3);--csstools-light-dark-toggle--37: var(--csstools-color-scheme--light) var(--primary-300);--featureItem-icon-color: var(--csstools-light-dark-toggle--37, var(--primary-600));--csstools-light-dark-toggle--38: var(--csstools-color-scheme--light) var(--primary-900);--featureItem-icon-background-color: var(--csstools-light-dark-toggle--38, var(--primary-100));--featureItem-icon-border-radius: var(--radius-lg)}@supports (color: light-dark(red,red)){:root{--featureItem-icon-color: light-dark(var(--primary-600), var(--primary-300));--featureItem-icon-background-color: light-dark( var(--primary-100), var(--primary-900) )}}@supports not (color: light-dark(tan,tan)){:root *{--csstools-light-dark-toggle--37: var(--csstools-color-scheme--light) var(--primary-300);--featureItem-icon-color: var(--csstools-light-dark-toggle--37, var(--primary-600));--csstools-light-dark-toggle--38: var(--csstools-color-scheme--light) var(--primary-900);--featureItem-icon-background-color: var(--csstools-light-dark-toggle--38, var(--primary-100))}}:root{--csstools-light-dark-toggle--39: var(--csstools-color-scheme--light) var(--base-950);--footer-background-color: var(--csstools-light-dark-toggle--39, var(--primary-950));--csstools-light-dark-toggle--40: var(--csstools-color-scheme--light) var(--base-200);--footer-text-color: var(--csstools-light-dark-toggle--40, var(--base-0));--footer-border-width: var(--border-md);--csstools-light-dark-toggle--41: var(--csstools-color-scheme--light) var(--base-700);--footer-border-color: var(--csstools-light-dark-toggle--41, transparent);--csstools-light-dark-toggle--42: var(--csstools-color-scheme--light) var(--base-200);--footer-link-color: var(--csstools-light-dark-toggle--42, var(--base-0));--csstools-light-dark-toggle--43: var(--csstools-color-scheme--light) var(--base-0);--footer-link-color-hover: var(--csstools-light-dark-toggle--43, var(--primary-200))}@supports (color: light-dark(red,red)){: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-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))}}@supports not (color: light-dark(tan,tan)){:root *{--csstools-light-dark-toggle--39: var(--csstools-color-scheme--light) var(--base-950);--footer-background-color: var(--csstools-light-dark-toggle--39, var(--primary-950));--csstools-light-dark-toggle--40: var(--csstools-color-scheme--light) var(--base-200);--footer-text-color: var(--csstools-light-dark-toggle--40, var(--base-0));--csstools-light-dark-toggle--41: var(--csstools-color-scheme--light) var(--base-700);--footer-border-color: var(--csstools-light-dark-toggle--41, transparent);--csstools-light-dark-toggle--42: var(--csstools-color-scheme--light) var(--base-200);--footer-link-color: var(--csstools-light-dark-toggle--42, var(--base-0));--csstools-light-dark-toggle--43: var(--csstools-color-scheme--light) var(--base-0);--footer-link-color-hover: var(--csstools-light-dark-toggle--43, var(--primary-200))}}:root{--header-height: var(--xl1);--header-padding: var(--sm1)}@media(width>=768px){:root{--header-height: var(--xl2);--header-padding: var(--sm3)}}:root{--csstools-light-dark-toggle--44: var(--csstools-color-scheme--light) var(--base-950);--header-background-color: var(--csstools-light-dark-toggle--44, var(--base-0));--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)}@supports (color: light-dark(red,red)){:root{--header-background-color: light-dark(var(--base-0), var(--base-950))}}@supports not (color: light-dark(tan,tan)){:root *{--csstools-light-dark-toggle--44: var(--csstools-color-scheme--light) var(--base-950);--header-background-color: var(--csstools-light-dark-toggle--44, var(--base-0))}}: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);--csstools-light-dark-toggle--45: var(--csstools-color-scheme--light) var(--primary-500);--pagination-background-color-current: var(--csstools-light-dark-toggle--45, var(--primary-600));--csstools-light-dark-toggle--46: var(--csstools-color-scheme--light) var(--base-800);--pagination-background-color-hover: var(--csstools-light-dark-toggle--46, var(--base-100))}@supports (color: light-dark(red,red)){:root{--pagination-background-color-current: light-dark( var(--primary-600), var(--primary-500) );--pagination-background-color-hover: light-dark( var(--base-100), var(--base-800) )}}@supports not (color: light-dark(tan,tan)){:root *{--csstools-light-dark-toggle--45: var(--csstools-color-scheme--light) var(--primary-500);--pagination-background-color-current: var(--csstools-light-dark-toggle--45, var(--primary-600));--csstools-light-dark-toggle--46: var(--csstools-color-scheme--light) var(--base-800);--pagination-background-color-hover: var(--csstools-light-dark-toggle--46, var(--base-100))}}:root{--prevNext-border-color: var(--ui-border-color);--prevNext-border-radius: var(--radius-lg);--prevNext-border-color-hover: var(--link-color);--csstools-light-dark-toggle--47: var(--csstools-color-scheme--light) var(--base-500);--prevNext-label-color: var(--csstools-light-dark-toggle--47, var(--base-400))}@supports (color: light-dark(red,red)){:root{--prevNext-label-color: light-dark(var(--base-400), var(--base-500))}}@supports not (color: light-dark(tan,tan)){:root *{--csstools-light-dark-toggle--47: var(--csstools-color-scheme--light) var(--base-500);--prevNext-label-color: var(--csstools-light-dark-toggle--47, var(--base-400))}}:root{--notice-spacing: var(--sm1);--csstools-light-dark-toggle--48: var(--csstools-color-scheme--light) var(--base-0);--notice-text-color: var(--csstools-light-dark-toggle--48, var(--base-950));--csstools-light-dark-toggle--49: var(--csstools-color-scheme--light) var(--base-800);--notice-background-color: var(--csstools-light-dark-toggle--49, var(--base-50));--csstools-light-dark-toggle--50: var(--csstools-color-scheme--light) var(--base-500);--notice-border-color: var(--csstools-light-dark-toggle--50, var(--base-200));--notice-border-width: var(--border-sm);--notice-border-radius: var(--radius-lg)}@supports (color: light-dark(red,red)){:root{--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))}}@supports not (color: light-dark(tan,tan)){:root *{--csstools-light-dark-toggle--48: var(--csstools-color-scheme--light) var(--base-0);--notice-text-color: var(--csstools-light-dark-toggle--48, var(--base-950));--csstools-light-dark-toggle--49: var(--csstools-color-scheme--light) var(--base-800);--notice-background-color: var(--csstools-light-dark-toggle--49, var(--base-50));--csstools-light-dark-toggle--50: var(--csstools-color-scheme--light) var(--base-500);--notice-border-color: var(--csstools-light-dark-toggle--50, var(--base-200))}}:root{--csstools-light-dark-toggle--51: var(--csstools-color-scheme--light) var(--primary-400);--pricingCard-highlight-border-color: var(--csstools-light-dark-toggle--51, var(--primary-600));--csstools-light-dark-toggle--52: var(--csstools-color-scheme--light) var(--success-400);--pricingCard-check-color: var(--csstools-light-dark-toggle--52, var(--success-500))}@supports (color: light-dark(red,red)){:root{--pricingCard-highlight-border-color: light-dark( var(--primary-600), var(--primary-400) );--pricingCard-check-color: light-dark(var(--success-500), var(--success-400))}}@supports not (color: light-dark(tan,tan)){:root *{--csstools-light-dark-toggle--51: var(--csstools-color-scheme--light) var(--primary-400);--pricingCard-highlight-border-color: var(--csstools-light-dark-toggle--51, var(--primary-600));--csstools-light-dark-toggle--52: var(--csstools-color-scheme--light) var(--success-400);--pricingCard-check-color: var(--csstools-light-dark-toggle--52, var(--success-500))}}: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);--csstools-light-dark-toggle--53: var(--csstools-color-scheme--light) var(--primary-400);--section-eyebrow-color: var(--csstools-light-dark-toggle--53, var(--primary-600));--csstools-light-dark-toggle--54: var(--csstools-color-scheme--light) var(--base-400);--section-lede-color: var(--csstools-light-dark-toggle--54, var(--base-500));--csstools-light-dark-toggle--55: var(--csstools-color-scheme--light) var(--base-900);--section-filled-background-color: var(--csstools-light-dark-toggle--55, var(--base-50));--csstools-light-dark-toggle--56: var(--csstools-color-scheme--light) var(--primary-900);--section-primary-background-color: var(--csstools-light-dark-toggle--56, var(--primary-600));--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)}@supports (color: light-dark(red,red)){:root{--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) )}}@supports not (color: light-dark(tan,tan)){:root *{--csstools-light-dark-toggle--53: var(--csstools-color-scheme--light) var(--primary-400);--section-eyebrow-color: var(--csstools-light-dark-toggle--53, var(--primary-600));--csstools-light-dark-toggle--54: var(--csstools-color-scheme--light) var(--base-400);--section-lede-color: var(--csstools-light-dark-toggle--54, var(--base-500));--csstools-light-dark-toggle--55: var(--csstools-color-scheme--light) var(--base-900);--section-filled-background-color: var(--csstools-light-dark-toggle--55, var(--base-50));--csstools-light-dark-toggle--56: var(--csstools-color-scheme--light) var(--primary-900);--section-primary-background-color: var(--csstools-light-dark-toggle--56, var(--primary-600))}}:root{--csstools-light-dark-toggle--57: var(--csstools-color-scheme--light) var(--base-500);--testimonial-role-color: var(--csstools-light-dark-toggle--57, var(--base-400))}@supports (color: light-dark(red,red)){:root{--testimonial-role-color: light-dark(var(--base-400), var(--base-500))}}@supports not (color: light-dark(tan,tan)){:root *{--csstools-light-dark-toggle--57: var(--csstools-color-scheme--light) var(--base-500);--testimonial-role-color: var(--csstools-light-dark-toggle--57, var(--base-400))}}:root{--tags-padding: var(--xs2);--tags-font-size: var(--text-sm);--csstools-light-dark-toggle--58: var(--csstools-color-scheme--light) var(--base-400);--tags-color: var(--csstools-light-dark-toggle--58, var(--base-500));--csstools-light-dark-toggle--59: var(--csstools-color-scheme--light) var(--base-800);--tags-background-color: var(--csstools-light-dark-toggle--59, var(--base-100));--csstools-light-dark-toggle--60: var(--csstools-color-scheme--light) var(--base-950);--tags-background-color-hover: var(--csstools-light-dark-toggle--60, var(--base-200));--tags-radius: var(--radius-md)}@supports (color: light-dark(red,red)){:root{--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))}}@supports not (color: light-dark(tan,tan)){:root *{--csstools-light-dark-toggle--58: var(--csstools-color-scheme--light) var(--base-400);--tags-color: var(--csstools-light-dark-toggle--58, var(--base-500));--csstools-light-dark-toggle--59: var(--csstools-color-scheme--light) var(--base-800);--tags-background-color: var(--csstools-light-dark-toggle--59, var(--base-100));--csstools-light-dark-toggle--60: var(--csstools-color-scheme--light) var(--base-950);--tags-background-color-hover: var(--csstools-light-dark-toggle--60, var(--base-200))}}:root{--toc-color: var(--link-color);--toc-color-hover: var(--link-color-hover);--toc-spacing: var(--xs1);--toc-indentation: var(--xs3);--toc-icon-size: 16px}}@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:1.5}body: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(--semi-bold);color:var(--link-color)}a: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;--csstools-light-dark-toggle--61: var(--csstools-color-scheme--light) var(--base-900);background-color:var(--csstools-light-dark-toggle--61, var(--base-50));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))}@supports (color: light-dark(red,red)){address{background-color:light-dark(var(--base-50),var(--base-900))}}abbr{position:relative;cursor:help}abbr: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}abbr: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(--sm1);padding-inline:var(--md1) var(--sm3);font-style:italic;--csstools-light-dark-toggle--64: var(--csstools-color-scheme--light) var(--primary-900);background-color:var(--csstools-light-dark-toggle--64, var(--primary-50));border-radius:var(--radius-md)}@supports (color: light-dark(red,red)){blockquote{background-color:light-dark(var(--primary-50),var(--primary-900))}}blockquote:before{content:"";position:absolute;top:0;inset-inline-start:0;width:var(--xs2);height:100%;border-start-start-radius:var(--radius-md);border-end-start-radius:var(--radius-md);background-image:linear-gradient(var(--primary-800),var(--primary-500))}:is(blockquote p):first-child:before{content:open-quote}:is(blockquote p):last-child{margin-bottom:0}:is(blockquote p):last-child:after{content:close-quote}cite{font-style:italic}code,var,kbd{font-family:var(--mono);font-size:.9em;font-style:normal;--csstools-light-dark-toggle--62: var(--csstools-color-scheme--light) var(--base-300);color:var(--csstools-light-dark-toggle--62, var(--base-500))}@supports (color: light-dark(red,red)){code,var,kbd{color:light-dark(var(--base-500),var(--base-300))}}:is(code,var,kbd):not(h1 *):not(h2 *):not(h3 *):not(h4 *):not(h5 *):not(h6 *):not(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);line-height:var(--heading-line-height)}h1,.h1,h2,.h2,h3,.h3{margin-bottom:var(--sm1)}h4,.h4{margin-bottom:var(--sm2)}h5,.h5,h6,.h6{margin-bottom:var(--xs2)}:where(h1,h2,h3):has(+:is(h2,h3,h4)){margin-bottom:var(--sm2)}h1,.h1{font-size:var(--heading-1)}h2,.h2{font-size:var(--heading-2)}h3,.h3{font-size:var(--heading-3)}h4,.h4{font-size:var(--heading-4)}h5,.h5{font-size:var(--heading-5)}h6,.h6{font-size:var(--heading-6)}hr{--content: "";display:flex;justify-content:center;align-items:center;height:0;border-style:solid;border-width:1px 0 0;color:var(--ui-border-color);overflow:visible}hr:after{content:var(--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(--base-950);background-color:var(--yes-200);border-radius:var(--radius-sm);-webkit-text-decoration:none;text-decoration:none}ins: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:.9rem;white-space:pre-wrap;border-radius:var(--pre-border-radius)}q{font-style:italic}s{--csstools-light-dark-toggle--63: var(--csstools-color-scheme--light) var(--base-50);text-decoration-color:var(--csstools-light-dark-toggle--63, var(--base-950));text-decoration-style:wavy}@supports (color: light-dark(red,red)){s{text-decoration-color:light-dark(var(--base-950),var(--base-50))}}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(--xs2)}figure:has(figcaption+*) figcaption{margin-bottom:var(--xs2)}iframe{border:1px solid var(--ui-border-color)}}@layer elements{caption{caption-side:bottom;margin-top:var(--xs3);font-size:var(--text-sm)}table{border-spacing:0;border:1px 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:1px solid var(--table-border-color);border-inline-start:1px solid var(--table-border-color)}tr th:first-child,tr td:first-child{border-inline-start-width:0}:is(tbody tr:last-child) th,:is(tbody tr:last-child) td{border-bottom-width:0}tfoot th,tfoot td{border-top:1px 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:1px solid var(--ui-border-color);border-radius:var(--radius-lg);padding:var(--sm3)}fieldset ul:has([type=checkbox],[type=radio]){padding-inline-start:0}fieldset>[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]):not([type=radio])){height:var(--input-height)}input:where(:not([type=color]):not([type=file]):not([type=reset]):not([type=submit])){padding:var(--input-padding)}input:where(:not([type=color])){border-radius:var(--input-border-radius)}input:where(:not([type=file])){border:1px solid var(--ui-border-color)}input[type=file]{width:100%;accent-color:var(--text-color)}input[type=number]{padding-inline-end:var(--xs1)}label{display:block}label:has(+:is(input,select,textarea)){margin-bottom:var(--xs1)}legend{position:absolute;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);width:1px;height:1px;white-space:nowrap}meter{--meter-height: var(--sm1);--meter-radius: var(--radius-md);--meter-color-track: var(--primary-100);--meter-color-low: var(--no-400);--meter-color-med: var(--maybe-400);--meter-color-high: var(--yes-400);width:100%;background:var(--meter-color-track);border-radius:var(--meter-radius);height:var(--meter-height)}meter::-webkit-meter-bar{background:var(--meter-color-track)}meter::-webkit-meter-bar,meter::-webkit-meter-optimum-value,meter::-webkit-meter-suboptimum-value,meter::-webkit-meter-even-less-good-value{height:var(--meter-height);border:none;border-radius:var(--meter-radius)}meter::-webkit-meter-even-less-good-value{background:var(--meter-color-low)}meter::-webkit-meter-suboptimum-value{background:var(--meter-color-med)}meter::-webkit-meter-optimum-value{background:var(--meter-color-high)}meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:var(--meter-color-low)}meter:-moz-meter-sub-optimum::-moz-meter-bar{background:var(--meter-color-med)}meter:-moz-meter-optimum::-moz-meter-bar{background:var(--meter-color-high)}progress{--progress-height: var(--sm1);--progress-color: var(--primary-500);--progress-track-color: var(--primary-100);--progress-radius: var(--radius-md);appearance:none;width:100%;height:var(--progress-height);background:var(--progress-track-color);border-radius:var(--progress-radius);border:none}progress::-moz-progress-bar{background:var(--progress-color);border-radius:var(--progress-radius)}progress::-webkit-progress-bar{width:100%;background:var(--progress-track-color);border-radius:var(--progress-radius);height:var(--progress-height)}progress::-webkit-progress-value{background:var(--progress-color);border-radius:var(--progress-radius)}select{--icon-size: 24px;--split: calc(100% - var(--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:1px solid var(--ui-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%);-webkit-mask-image: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"),linear-gradient(to right,transparent calc(var(--split) - 1px),red 0),linear-gradient(red 0 0);mask-image: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"),linear-gradient(to right,transparent calc(var(--split) - 1px),red 0),linear-gradient(red 0 0);-webkit-mask-size:var(--icon-size),auto,auto;mask-size:var(--icon-size),auto,auto;-webkit-mask-position:calc(100% - var(--xs1)) center,0 0,0 0;mask-position:calc(100% - var(--xs1)) center,0 0,0 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-clip:padding-box,padding-box,border-box;mask-clip:padding-box,padding-box,border-box;-webkit-mask-origin:padding-box,padding-box,border-box;mask-origin:padding-box,padding-box,border-box;-webkit-mask-composite:source-over,xor;mask-composite:add,exclude}select:disabled{--csstools-light-dark-toggle--65: var(--csstools-color-scheme--light) hsl(from var(--text-color) h s 40%);--disabled-color: var(--csstools-light-dark-toggle--65, hsl(from var(--text-color) h s 70%));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%)}@supports (color: lab(from red l 1 1% / calc(alpha + .1))) and (color: light-dark(red,red)){select:disabled{--disabled-color: light-dark( hsl(from var(--text-color) h s 70%), hsl(from var(--text-color) h s 40%) )}}@supports not (color: light-dark(tan,tan)){select:disabled *{--csstools-light-dark-toggle--65: var(--csstools-color-scheme--light) hsl(from var(--text-color) h s 40%);--disabled-color: var(--csstools-light-dark-toggle--65, hsl(from var(--text-color) h s 70%))}}select[multiple]{height:auto;padding:var(--input-padding);background:var(--body-background-color);-webkit-mask-image:none;mask-image:none}textarea{width:100%;padding:var(--xs3);border-radius:var(--input-border-radius);border:1px solid var(--ui-border-color);resize:vertical}textarea:not([rows]){min-height:6em}}@layer elements{dialog{min-width:var(--tera1);max-width:var(--tera3);padding:var(--lg1) var(--md1);--csstools-light-dark-toggle--66: var(--csstools-color-scheme--light) var(--base-800);border:1px solid var(--csstools-light-dark-toggle--66, var(--base-200));--csstools-light-dark-toggle--67: var(--csstools-color-scheme--light) var(--base-900);background-color:var(--csstools-light-dark-toggle--67, var(--base-50));border-radius:var(--radius-lg)}@supports (color: light-dark(red,red)){dialog{border:1px solid light-dark(var(--base-200),var(--base-800));background-color:light-dark(var(--base-50),var(--base-900))}}dialog::backdrop{background:var(--dialog-backdrop-color);opacity:var(--dialog-backdrop-opacity)}dialog [aria-label="close pop-up"]{position:absolute;top:var(--xs3);right:var(--xs3);background:transparent;border:none;outline:none;cursor:pointer}dialog p:last-of-type{margin-bottom:0}details{padding:var(--sm1) var(--sm1);--csstools-light-dark-toggle--68: var(--csstools-color-scheme--light) var(--base-800);border:1px solid var(--csstools-light-dark-toggle--68, var(--base-200));--csstools-light-dark-toggle--69: var(--csstools-color-scheme--light) var(--base-900);background-color:var(--csstools-light-dark-toggle--69, var(--base-50));border-radius:var(--radius-lg);cursor:pointer}@supports (color: light-dark(red,red)){details{border:1px solid light-dark(var(--base-200),var(--base-800));background-color:light-dark(var(--base-50),var(--base-900))}}details summary{display:flex;justify-content:space-between;font-weight:var(--bold)}:is(details summary)::-webkit-details-marker{display:none}:is(details summary):after{content:"";width:24px;height:24px;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='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E") no-repeat;transition:var(--transition)}details[open]>summary{margin-bottom:var(--xs3)}:is(details[open]>summary):after{transform:rotate(180deg)}details 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 .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){.layout-centered .layout_content{margin-top:var(--xl3);margin-bottom:var(--md3);gap:var(--md3)}}.layout-centered .layout_content_main{grid-column:2}@media(width>=768px){.layout-sidebar .layout_content{display:grid;grid-template-columns:var(--layout-aside-width) minmax(0,1fr)}}.layout-sidebar .layout_content_main{padding:var(--sm2)}@media(width>=768px){.layout-sidebar .layout_content_main{grid-row:1;grid-column:2;padding:var(--lg1) var(--md2)}}@media(width>=768px){.layout-sidebar .layout_content_aside{grid-row:1;grid-column:1;padding:var(--lg1) var(--md3)}}@media(width>=768px){.layout-sidebar-end .layout_content{grid-template-columns:minmax(0,1fr) var(--layout-aside-width)}}@media(width>=768px){.layout-sidebar-end .layout_content_main{grid-column:1}}@media(width>=768px){.layout-sidebar-end .layout_content_aside{grid-column:2}}@media(width>=768px){.layout-docs .layout_content{display:grid;grid-template-columns:var(--layout-aside-width) minmax(0,1fr)}}@media(width>=1024px){.layout-docs .layout_content{grid-template-columns:var(--layout-aside-width) minmax(0,var(--layout-content-width)) var(--layout-toc-width)}}.layout-docs .layout_content_main{padding:var(--sm2)}@media(width>=768px){.layout-docs .layout_content_main{grid-row:1;grid-column:2;padding:var(--lg1) var(--md2)}}.layout-docs .layout_content_aside{display:none}@media(width>=768px){.layout-docs .layout_content_aside{display:block;grid-row:1;grid-column:1;padding:var(--lg1) var(--md3)}}@media(width>=768px){.layout-docs .layout_content_aside-toc{display:none}}@media(width>=1024px){.layout-docs .layout_content_aside-toc{display:block;grid-row:1;grid-column:3;padding:var(--lg1) var(--md3)}}.layout-split .layout_content{display:grid}@media(width>=768px){.layout-split .layout_content{grid-template-columns:1fr 1fr}}.layout-cover{min-height:100dvh}.layout-cover .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)}:is(p,ul,ol,dl) p,:is(p,ul,ol,dl) ul,:is(p,ul,ol,dl) ol,:is(p,ul,ol,dl) dl{margin-bottom:0}:is(ul,ol) ul,:is(ul,ol) ol{margin-inline-start:0;padding-inline-start:var(--sm2)}:is(ul,ol) li{margin-bottom:.5em}:is(:is(ul,ol) li)::marker{--csstools-light-dark-toggle--70: var(--csstools-color-scheme--light) var(--base-600);color:var(--csstools-light-dark-toggle--70, var(--base-300))}@supports (color: light-dark(red,red)){:is(:is(ul,ol) li)::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}ol 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}.wrap>*,.wrap>astro-island>*,.wrap>astro-slot>*,.wrap>astro-static-slot>*{grid-column:2;padding-inline:var(--wrap-spacing)}@media(width>=768px){.wrap>*,.wrap>astro-island>*,.wrap>astro-slot>*,.wrap>astro-static-slot>*{padding-inline:var(--wrap-md-spacing)}}@media(width>=1024px){.wrap>*,.wrap>astro-island>*,.wrap>astro-slot>*,.wrap>astro-static-slot>*{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{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/package.json b/package.json index 225c7a1..5de5b51 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "mcss", "type": "module", - "version": "1.0.0", + "version": "1.2.0", "license": "MIT", "scripts": { "dev": "astro dev", diff --git a/src/content/components/start.mdx b/src/content/components/start.mdx index c0797f8..2504c4e 100644 --- a/src/content/components/start.mdx +++ b/src/content/components/start.mdx @@ -1,7 +1,7 @@ --- title: "Getting started" description: "How the mCSS component library works: copy the files you need into your project and own the code." -lastUpdate: 2026-07-23 +lastUpdate: 2026-07-26 version: 1.0 type: "intro" --- @@ -12,7 +12,7 @@ The mCSS component library is entirely built with the [mCSS framework](/docs/sta 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)) and use the documented markup. Works with any framework, or none. +- **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). diff --git a/src/content/docs/ai.mdx b/src/content/docs/ai.mdx index 8b94ca5..6bf7955 100644 --- a/src/content/docs/ai.mdx +++ b/src/content/docs/ai.mdx @@ -1,7 +1,7 @@ --- title: "AI Agents" description: "Machine-readable docs (llms.txt, markdown twins) and a ready-to-paste rules block for coding agents" -lastUpdate: 2026-07-23 +lastUpdate: 2026-07-26 version: 0.1 --- @@ -40,7 +40,7 @@ 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`. +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). - `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. diff --git a/src/content/docs/start.mdx b/src/content/docs/start.mdx index c2b58d4..e6666d5 100644 --- a/src/content/docs/start.mdx +++ b/src/content/docs/start.mdx @@ -1,7 +1,7 @@ --- title: "Getting Started" description: "Copy mCSS into your project and learn the methodology: file structure, class syntax, components" -lastUpdate: 2026-07-24 +lastUpdate: 2026-07-26 version: 1 --- @@ -50,7 +50,7 @@ Each layer only ever loses to the ones after it. The sections below detail each -Two entry files make the split concrete. The framework's own, [`framework/mcss.css`][mcss-entry], declares the layer order and puts every framework file in its layer. You never edit it: +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) */ @@ -65,17 +65,22 @@ Two entry files make the split concrete. The framework's own, [`framework/mcss.c @import url(./base.reset.css) layer(base); @import url(./elements.text.css) layer(elements); @import url(./global.grid.css) layer(global); -@import url(./component.button.css) layer(components); @import url(./help.spacing.css) layer(helpers); -/* etc. */ +/* 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. + 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: ```css /* your entry file */ @import url(./framework/mcss.css); +/* Optional: the mCSS component library. Skip it if you build + 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. */ @@ -93,12 +98,13 @@ Your site's entry (this site's is [`_global.css`][4]) pulls in the framework, ac [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 ### How to import mCSS in your project -#### Drop-in file +#### Drop-in files -Grab [`dist/mcss.css`][dist-css] (or [`dist/mcss.min.css`][dist-min]), the whole framework in one file, no build step needed. The easiest way to import, but the file size won't be optimized to your specific needs. +Grab [`dist/mcss.css`][dist-css] (or [`dist/mcss.min.css`][dist-min]), the framework core in one file, no build step needed. If you want the component library too, add [`dist/mcss.components.css`][dist-components] (or [`dist/mcss.components.min.css`][dist-components-min]) next to it; skip it if you build your own components. The easiest way to import, but the file size won't be optimized to your specific needs. #### Individual files @@ -112,6 +118,8 @@ Run `npm run build:css` in the repo to produce `dist/` from source. [dist-css]: https://github.com/minimaldesign/mCSS/blob/main/dist/mcss.css [dist-min]: https://github.com/minimaldesign/mCSS/blob/main/dist/mcss.min.css +[dist-components]: https://github.com/minimaldesign/mCSS/blob/main/dist/mcss.components.css +[dist-components-min]: https://github.com/minimaldesign/mCSS/blob/main/dist/mcss.components.min.css [dist-dir]: https://github.com/minimaldesign/mCSS/tree/main/dist/css [dist-index]: https://github.com/minimaldesign/mCSS/blob/main/dist/css/mcss.css [framework-src]: https://github.com/minimaldesign/mCSS/tree/main/src/styles/framework @@ -161,7 +169,7 @@ 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. +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. 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 ` +
      +
    • ~{mcssMinGzipKb} KB min+gzip
      • +
    • Components ~{mcssComponentsMinGzipKb} KB
      • +
    • 0 dependencies
      • +
    • Baseline 2024
      • +
    • MIT licensed
      • +
    - {/* 2: Proof strip: the install is one line */} -
    -

    The fastest way to give it a spin

    -
    -
    - - -
    -

    - Download mcss.min.css and mcss.components.min.css (optional). Every modern browser understands them as-is: no compiler, no config, no node modules. -

    -
      -
    • ~{mcssMinGzipKb} KB min+gzip, components +{mcssComponentsMinGzipKb} KB
      • -
    • 0 dependencies
      • -
    • Baseline 2024
      • -
    -
    -
    - - {/* 3: Philosophy */} + {/* 2: Philosophy */}
    @@ -202,7 +182,7 @@ const themeDiffs = {
    - {/* 4: Modern CSS showcase */} + {/* 3: Modern CSS showcase */}
    @@ -248,7 +228,7 @@ const themeDiffs = {
    - {/* 5: Theming demo (radio + :has(), zero JS) */} + {/* 4: Theming demo (radio + :has(), zero JS) */}
    Pick a demo theme @@ -299,60 +279,60 @@ const themeDiffs = {

    Radio buttons and :has(): this demo runs on zero JavaScript.

    - {/* 6: Component gallery */} + {/* 5: Component gallery */}
    @@ -364,7 +344,7 @@ const themeDiffs = {
    - {/* 7: Ownership */} + {/* 6: Ownership */}

    mCSS isn’t a dependency. It’s a starting point. Copy the files into your project and edit them like the code you wrote yourself, because now it is. Styling disagreements end with you changing a line, not filing an issue.

    @@ -377,7 +357,7 @@ const themeDiffs = {
    - {/* 8: Final CTA */} + {/* 7: Final CTA */}
    Get started in 10 mn diff --git a/src/styles/site/page.home.css b/src/styles/site/page.home.css index df98dfe..ad05a3d 100644 --- a/src/styles/site/page.home.css +++ b/src/styles/site/page.home.css @@ -9,7 +9,7 @@ } } -/* 3 to 6: narrow header, wide content. These blocks escape the wrap +/* 2 to 5: narrow header, wide content. These blocks escape the wrap column and center at up to 1150px. */ .home_pillars, .home_showcase_tiles, @@ -29,7 +29,7 @@ .home_hero { display: grid; align-content: center; - min-height: calc(72svh - var(--header-height)); + min-height: calc(80svh - var(--header-height)); padding-block: var(--lg1) var(--sm3); padding-inline: var(--sm3); } @@ -47,7 +47,7 @@ } @media (--lg) { grid-template-columns: minmax(0, 10fr) minmax(0, 9fr); - align-items: center; + align-items: top; gap: var(--xl2); } } @@ -72,11 +72,6 @@ justify-content: center; order: 2; } - - .home_hero_fineprint { - justify-content: center; - order: 3; - } } h1 { @@ -97,10 +92,10 @@ background-clip: text; /* The gradient only paints the box; at line-height 1 the descenders poke below it and vanish, so extend the box under the last line */ - padding-bottom: 0.12em; - font-size: var(--display-lg); + font-size: var(--display-md); line-height: var(--leading-xs); @media (--md) { + padding-bottom: 0.12em; font-size: var(--display-mega); } } @@ -127,12 +122,16 @@ display: flex; flex-wrap: wrap; gap: var(--xs2) var(--sm1); - margin-top: var(--sm1); + justify-content: center; + margin-top: var(--lg1); font-family: var(--mono); - font-size: var(--text-xs); + font-size: var(--text-sm); color: light-dark(var(--base-500), var(--base-400)); + @media (--md) { + margin-top: var(--xl3); + } - span { + li { display: inline-flex; align-items: center; gap: var(--xs1); @@ -173,7 +172,7 @@ /* The editor fakes Shiki's github-dark in both site themes */ .home_morph_editor { - margin: 0; + margin-top: var(--sm2); padding: var(--sm3); background-color: #24292e; border: var(--border-sm) solid rgb(255 255 255 / 0.12); @@ -191,9 +190,15 @@ height: 10px; border-radius: var(--radius-round); opacity: var(--o-4); - &:nth-child(1) { background: var(--no-300); } - &:nth-child(2) { background: var(--maybe-300); } - &:nth-child(3) { background: var(--yes-300); } + &:nth-child(1) { + background: var(--no-300); + } + &:nth-child(2) { + background: var(--maybe-300); + } + &:nth-child(3) { + background: var(--yes-300); + } } } @@ -219,9 +224,15 @@ } /* github-dark syntax roles */ -.home_morph_tag { color: #85e89d; } -.home_morph_attr { color: #b392f0; } -.home_morph_str { color: #9ecbff; } +.home_morph_tag { + color: #85e89d; +} +.home_morph_attr { + color: #b392f0; +} +.home_morph_str { + color: #9ecbff; +} /* Strike color channel: animated on the class span, painted only over the class text (not its trailing space) by the inner span's gradient stripe, @@ -246,19 +257,45 @@ ); } -.home_morph_g-1 { animation-name: morphC1; } -.home_morph_g-2 { animation-name: morphC2; } -.home_morph_g-3 { animation-name: morphC3; } -.home_morph_g-4 { animation-name: morphC4; } -.home_morph_g-5 { animation-name: morphC5; } -.home_morph_g-6 { animation-name: morphC6; } -.home_morph_g-7 { animation-name: morphC7; } -.home_morph_g-8 { animation-name: morphC8; } -.home_morph_g-9 { animation-name: morphC9; } -.home_morph_g-10 { animation-name: morphC10; } -.home_morph_g-11 { animation-name: morphC11; } -.home_morph_g-12 { animation-name: morphC12; } -.home_morph_g-13 { animation-name: morphC13; } +.home_morph_g-1 { + animation-name: morphC1; +} +.home_morph_g-2 { + animation-name: morphC2; +} +.home_morph_g-3 { + animation-name: morphC3; +} +.home_morph_g-4 { + animation-name: morphC4; +} +.home_morph_g-5 { + animation-name: morphC5; +} +.home_morph_g-6 { + animation-name: morphC6; +} +.home_morph_g-7 { + animation-name: morphC7; +} +.home_morph_g-8 { + animation-name: morphC8; +} +.home_morph_g-9 { + animation-name: morphC9; +} +.home_morph_g-10 { + animation-name: morphC10; +} +.home_morph_g-11 { + animation-name: morphC11; +} +.home_morph_g-12 { + animation-name: morphC12; +} +.home_morph_g-13 { + animation-name: morphC13; +} .home_morph_after, .home_morph_keep { @@ -346,12 +383,26 @@ color: light-dark(var(--base-500), var(--base-400)); } -.home_morph_editor:hover :is(.home_morph_frame, .home_morph_counter, .home_morph_g, .home_morph_after, .home_morph_count) { +.home_morph_editor:hover + :is( + .home_morph_frame, + .home_morph_counter, + .home_morph_g, + .home_morph_after, + .home_morph_count + ) { animation-play-state: paused; } /* Replay: the page script toggles this class to restart every animation */ -.home_morph.is-resetting :is(.home_morph_frame, .home_morph_counter, .home_morph_g, .home_morph_after, .home_morph_count) { +.home_morph.is-resetting + :is( + .home_morph_frame, + .home_morph_counter, + .home_morph_g, + .home_morph_after, + .home_morph_count + ) { animation-name: none; } @@ -381,202 +432,492 @@ A to B where A = 6 + 3.5(i-1) and B = A + 3.5 (percent). */ @keyframes morphFade { - 0%, 93.5% { opacity: 1; } - 95.5%, 98.5% { opacity: 0; } - 100% { opacity: 1; } + 0%, + 93.5% { + opacity: 1; + } + 95.5%, + 98.5% { + opacity: 0; + } + 100% { + opacity: 1; + } } @keyframes morphC1 { - 0%, 6% { opacity: 1; font-size: 1em; --morph-strike-now: transparent; } - 7%, 8.3% { opacity: 0.75; --morph-strike-now: var(--morph-strike); } - 9.4% { opacity: 0; font-size: 1em; } - 9.5%, 96% { opacity: 0; font-size: 0; } - 96.5%, 100% { opacity: 1; font-size: 1em; --morph-strike-now: transparent; } + 0%, + 6% { + opacity: 1; + font-size: 1em; + --morph-strike-now: transparent; + } + 7%, + 8.3% { + opacity: 0.75; + --morph-strike-now: var(--morph-strike); + } + 9.4% { + opacity: 0; + font-size: 1em; + } + 9.5%, + 96% { + opacity: 0; + font-size: 0; + } + 96.5%, + 100% { + opacity: 1; + font-size: 1em; + --morph-strike-now: transparent; + } } @keyframes morphC2 { - 0%, 9.5% { opacity: 1; font-size: 1em; --morph-strike-now: transparent; } - 10.5%, 11.8% { opacity: 0.75; --morph-strike-now: var(--morph-strike); } - 12.9% { opacity: 0; font-size: 1em; } - 13%, 96% { opacity: 0; font-size: 0; } - 96.5%, 100% { opacity: 1; font-size: 1em; --morph-strike-now: transparent; } + 0%, + 9.5% { + opacity: 1; + font-size: 1em; + --morph-strike-now: transparent; + } + 10.5%, + 11.8% { + opacity: 0.75; + --morph-strike-now: var(--morph-strike); + } + 12.9% { + opacity: 0; + font-size: 1em; + } + 13%, + 96% { + opacity: 0; + font-size: 0; + } + 96.5%, + 100% { + opacity: 1; + font-size: 1em; + --morph-strike-now: transparent; + } } @keyframes morphC3 { - 0%, 13% { opacity: 1; font-size: 1em; --morph-strike-now: transparent; } - 14%, 15.3% { opacity: 0.75; --morph-strike-now: var(--morph-strike); } - 16.4% { opacity: 0; font-size: 1em; } - 16.5%, 96% { opacity: 0; font-size: 0; } - 96.5%, 100% { opacity: 1; font-size: 1em; --morph-strike-now: transparent; } + 0%, + 13% { + opacity: 1; + font-size: 1em; + --morph-strike-now: transparent; + } + 14%, + 15.3% { + opacity: 0.75; + --morph-strike-now: var(--morph-strike); + } + 16.4% { + opacity: 0; + font-size: 1em; + } + 16.5%, + 96% { + opacity: 0; + font-size: 0; + } + 96.5%, + 100% { + opacity: 1; + font-size: 1em; + --morph-strike-now: transparent; + } } @keyframes morphC4 { - 0%, 16.5% { opacity: 1; font-size: 1em; --morph-strike-now: transparent; } - 17.5%, 18.8% { opacity: 0.75; --morph-strike-now: var(--morph-strike); } - 19.9% { opacity: 0; font-size: 1em; } - 20%, 96% { opacity: 0; font-size: 0; } - 96.5%, 100% { opacity: 1; font-size: 1em; --morph-strike-now: transparent; } + 0%, + 16.5% { + opacity: 1; + font-size: 1em; + --morph-strike-now: transparent; + } + 17.5%, + 18.8% { + opacity: 0.75; + --morph-strike-now: var(--morph-strike); + } + 19.9% { + opacity: 0; + font-size: 1em; + } + 20%, + 96% { + opacity: 0; + font-size: 0; + } + 96.5%, + 100% { + opacity: 1; + font-size: 1em; + --morph-strike-now: transparent; + } } @keyframes morphC5 { - 0%, 20% { opacity: 1; font-size: 1em; --morph-strike-now: transparent; } - 21%, 22.3% { opacity: 0.75; --morph-strike-now: var(--morph-strike); } - 23.4% { opacity: 0; font-size: 1em; } - 23.5%, 96% { opacity: 0; font-size: 0; } - 96.5%, 100% { opacity: 1; font-size: 1em; --morph-strike-now: transparent; } + 0%, + 20% { + opacity: 1; + font-size: 1em; + --morph-strike-now: transparent; + } + 21%, + 22.3% { + opacity: 0.75; + --morph-strike-now: var(--morph-strike); + } + 23.4% { + opacity: 0; + font-size: 1em; + } + 23.5%, + 96% { + opacity: 0; + font-size: 0; + } + 96.5%, + 100% { + opacity: 1; + font-size: 1em; + --morph-strike-now: transparent; + } } @keyframes morphC6 { - 0%, 23.5% { opacity: 1; font-size: 1em; --morph-strike-now: transparent; } - 24.5%, 25.8% { opacity: 0.75; --morph-strike-now: var(--morph-strike); } - 26.9% { opacity: 0; font-size: 1em; } - 27%, 96% { opacity: 0; font-size: 0; } - 96.5%, 100% { opacity: 1; font-size: 1em; --morph-strike-now: transparent; } + 0%, + 23.5% { + opacity: 1; + font-size: 1em; + --morph-strike-now: transparent; + } + 24.5%, + 25.8% { + opacity: 0.75; + --morph-strike-now: var(--morph-strike); + } + 26.9% { + opacity: 0; + font-size: 1em; + } + 27%, + 96% { + opacity: 0; + font-size: 0; + } + 96.5%, + 100% { + opacity: 1; + font-size: 1em; + --morph-strike-now: transparent; + } } @keyframes morphC7 { - 0%, 27% { opacity: 1; font-size: 1em; --morph-strike-now: transparent; } - 28%, 29.3% { opacity: 0.75; --morph-strike-now: var(--morph-strike); } - 30.4% { opacity: 0; font-size: 1em; } - 30.5%, 96% { opacity: 0; font-size: 0; } - 96.5%, 100% { opacity: 1; font-size: 1em; --morph-strike-now: transparent; } + 0%, + 27% { + opacity: 1; + font-size: 1em; + --morph-strike-now: transparent; + } + 28%, + 29.3% { + opacity: 0.75; + --morph-strike-now: var(--morph-strike); + } + 30.4% { + opacity: 0; + font-size: 1em; + } + 30.5%, + 96% { + opacity: 0; + font-size: 0; + } + 96.5%, + 100% { + opacity: 1; + font-size: 1em; + --morph-strike-now: transparent; + } } @keyframes morphC8 { - 0%, 30.5% { opacity: 1; font-size: 1em; --morph-strike-now: transparent; } - 31.5%, 32.8% { opacity: 0.75; --morph-strike-now: var(--morph-strike); } - 33.9% { opacity: 0; font-size: 1em; } - 34%, 96% { opacity: 0; font-size: 0; } - 96.5%, 100% { opacity: 1; font-size: 1em; --morph-strike-now: transparent; } + 0%, + 30.5% { + opacity: 1; + font-size: 1em; + --morph-strike-now: transparent; + } + 31.5%, + 32.8% { + opacity: 0.75; + --morph-strike-now: var(--morph-strike); + } + 33.9% { + opacity: 0; + font-size: 1em; + } + 34%, + 96% { + opacity: 0; + font-size: 0; + } + 96.5%, + 100% { + opacity: 1; + font-size: 1em; + --morph-strike-now: transparent; + } } @keyframes morphC9 { - 0%, 34% { opacity: 1; font-size: 1em; --morph-strike-now: transparent; } - 35%, 36.3% { opacity: 0.75; --morph-strike-now: var(--morph-strike); } - 37.4% { opacity: 0; font-size: 1em; } - 37.5%, 96% { opacity: 0; font-size: 0; } - 96.5%, 100% { opacity: 1; font-size: 1em; --morph-strike-now: transparent; } + 0%, + 34% { + opacity: 1; + font-size: 1em; + --morph-strike-now: transparent; + } + 35%, + 36.3% { + opacity: 0.75; + --morph-strike-now: var(--morph-strike); + } + 37.4% { + opacity: 0; + font-size: 1em; + } + 37.5%, + 96% { + opacity: 0; + font-size: 0; + } + 96.5%, + 100% { + opacity: 1; + font-size: 1em; + --morph-strike-now: transparent; + } } @keyframes morphC10 { - 0%, 37.5% { opacity: 1; font-size: 1em; --morph-strike-now: transparent; } - 38.5%, 39.8% { opacity: 0.75; --morph-strike-now: var(--morph-strike); } - 40.9% { opacity: 0; font-size: 1em; } - 41%, 96% { opacity: 0; font-size: 0; } - 96.5%, 100% { opacity: 1; font-size: 1em; --morph-strike-now: transparent; } + 0%, + 37.5% { + opacity: 1; + font-size: 1em; + --morph-strike-now: transparent; + } + 38.5%, + 39.8% { + opacity: 0.75; + --morph-strike-now: var(--morph-strike); + } + 40.9% { + opacity: 0; + font-size: 1em; + } + 41%, + 96% { + opacity: 0; + font-size: 0; + } + 96.5%, + 100% { + opacity: 1; + font-size: 1em; + --morph-strike-now: transparent; + } } @keyframes morphC11 { - 0%, 41% { opacity: 1; font-size: 1em; --morph-strike-now: transparent; } - 42%, 43.3% { opacity: 0.75; --morph-strike-now: var(--morph-strike); } - 44.4% { opacity: 0; font-size: 1em; } - 44.5%, 96% { opacity: 0; font-size: 0; } - 96.5%, 100% { opacity: 1; font-size: 1em; --morph-strike-now: transparent; } + 0%, + 41% { + opacity: 1; + font-size: 1em; + --morph-strike-now: transparent; + } + 42%, + 43.3% { + opacity: 0.75; + --morph-strike-now: var(--morph-strike); + } + 44.4% { + opacity: 0; + font-size: 1em; + } + 44.5%, + 96% { + opacity: 0; + font-size: 0; + } + 96.5%, + 100% { + opacity: 1; + font-size: 1em; + --morph-strike-now: transparent; + } } @keyframes morphC12 { - 0%, 44.5% { opacity: 1; font-size: 1em; --morph-strike-now: transparent; } - 45.5%, 46.8% { opacity: 0.75; --morph-strike-now: var(--morph-strike); } - 47.9% { opacity: 0; font-size: 1em; } - 48%, 96% { opacity: 0; font-size: 0; } - 96.5%, 100% { opacity: 1; font-size: 1em; --morph-strike-now: transparent; } + 0%, + 44.5% { + opacity: 1; + font-size: 1em; + --morph-strike-now: transparent; + } + 45.5%, + 46.8% { + opacity: 0.75; + --morph-strike-now: var(--morph-strike); + } + 47.9% { + opacity: 0; + font-size: 1em; + } + 48%, + 96% { + opacity: 0; + font-size: 0; + } + 96.5%, + 100% { + opacity: 1; + font-size: 1em; + --morph-strike-now: transparent; + } } @keyframes morphC13 { - 0%, 48% { opacity: 1; font-size: 1em; --morph-strike-now: transparent; } - 49%, 50.3% { opacity: 0.75; --morph-strike-now: var(--morph-strike); } - 51.4% { opacity: 0; font-size: 1em; } - 51.5%, 96% { opacity: 0; font-size: 0; } - 96.5%, 100% { opacity: 1; font-size: 1em; --morph-strike-now: transparent; } + 0%, + 48% { + opacity: 1; + font-size: 1em; + --morph-strike-now: transparent; + } + 49%, + 50.3% { + opacity: 0.75; + --morph-strike-now: var(--morph-strike); + } + 51.4% { + opacity: 0; + font-size: 1em; + } + 51.5%, + 96% { + opacity: 0; + font-size: 0; + } + 96.5%, + 100% { + opacity: 1; + font-size: 1em; + --morph-strike-now: transparent; + } } @keyframes morphAfter { - 0%, 51.5% { font-size: 0; opacity: 0; background-color: transparent; } - 52% { font-size: 1em; opacity: 0; } - 53% { opacity: 1; background-color: var(--morph-pulse); } - 62%, 96% { font-size: 1em; opacity: 1; background-color: transparent; } - 96.5%, 100% { font-size: 0; opacity: 0; } + 0%, + 51.5% { + font-size: 0; + opacity: 0; + background-color: transparent; + } + 52% { + font-size: 1em; + opacity: 0; + } + 53% { + opacity: 1; + background-color: var(--morph-pulse); + } + 62%, + 96% { + font-size: 1em; + opacity: 1; + background-color: transparent; + } + 96.5%, + 100% { + font-size: 0; + opacity: 0; + } } @keyframes morphCount { - 0%, 8.8% { --morph-n: 219; } - 9.5%, 12.3% { --morph-n: 204; } - 13%, 15.8% { --morph-n: 199; } - 16.5%, 19.3% { --morph-n: 194; } - 20%, 22.8% { --morph-n: 186; } - 23.5%, 26.3% { --morph-n: 172; } - 27%, 29.8% { --morph-n: 161; } - 30.5%, 33.3% { --morph-n: 150; } - 34%, 36.8% { --morph-n: 139; } - 37.5%, 40.3% { --morph-n: 126; } - 41%, 43.8% { --morph-n: 105; } - 44.5%, 47.3% { --morph-n: 84; } - 48%, 50.8% { --morph-n: 56; } - 51.5%, 52.2% { --morph-n: 41; } - 53%, 96% { --morph-n: 54; } - 96.5%, 100% { --morph-n: 219; } -} - -/* 2 PROOF STRIP */ - -.home_proof { - --section-spacing: var(--xl1); - padding-block-start: 0; -} - -.home_proof_title { - text-align: center; - margin-top: var(--lg3); - @media (--md) { - margin-top: var(--lg1); - + 0%, + 8.8% { + --morph-n: 219; } -} - -.home_proof_install { - position: relative; - width: fit-content; - max-width: 100%; - margin-inline: auto; -} - -/* Shiki (github-dark) one-liner; padding leaves room for the copy button */ -.home_proof_install pre { - margin: 0; - padding: var(--sm1) var(--xl1) var(--sm1) var(--sm3); - font-size: var(--text-sm); - border-radius: var(--radius-lg); - @media (--md) { - font-size: var(--text-md); + 9.5%, + 12.3% { + --morph-n: 204; } -} - -.home_proof_caption { - max-width: 60ch; - margin: var(--sm3) auto 0; - text-align: center; - color: light-dark(var(--base-500), var(--base-400)); -} - -.home_proof_facts { - display: flex; - flex-wrap: wrap; - justify-content: center; - align-items: center; - gap: var(--xs3) var(--md2); - margin: var(--sm3) 0 0; - padding: 0; - list-style: none; - font-family: var(--mono); - font-size: var(--text-xs); - color: light-dark(var(--base-500), var(--base-400)); - /* Stays on one line on small screens (like the hero fineprint) */ - @media (--md-n-below) { - gap: var(--xs3); + 13%, + 15.8% { + --morph-n: 199; + } + 16.5%, + 19.3% { + --morph-n: 194; + } + 20%, + 22.8% { + --morph-n: 186; + } + 23.5%, + 26.3% { + --morph-n: 172; + } + 27%, + 29.8% { + --morph-n: 161; + } + 30.5%, + 33.3% { + --morph-n: 150; + } + 34%, + 36.8% { + --morph-n: 139; + } + 37.5%, + 40.3% { + --morph-n: 126; + } + 41%, + 43.8% { + --morph-n: 105; + } + 44.5%, + 47.3% { + --morph-n: 84; + } + 48%, + 50.8% { + --morph-n: 56; + } + 51.5%, + 52.2% { + --morph-n: 41; + } + 53%, + 96% { + --morph-n: 54; + } + 96.5%, + 100% { + --morph-n: 219; } } -/* 3 PHILOSOPHY */ +/* 2 PHILOSOPHY */ /* prettier-ignore */ .home_pillars { @@ -614,7 +955,7 @@ } } -/* 4 MODERN CSS SHOWCASE */ +/* 3 MODERN CSS SHOWCASE */ /* .home_showcase_tiles is the size container the cards read (.tiles_container in the markup); .tiles handles the grid, the gaps, and the list reset. */ @@ -671,7 +1012,7 @@ color: light-dark(var(--base-500), var(--base-400)); } -/* 5 THEMING DEMO */ +/* 4 THEMING DEMO */ .home_themer_switcher { display: flex; @@ -701,7 +1042,9 @@ height: var(--md1); border-radius: var(--radius-round); border: var(--border-md) solid var(--ui-border-color); - transition: border-color var(--transition-fast), box-shadow var(--transition-fast); + transition: + border-color var(--transition-fast), + box-shadow var(--transition-fast); } input:checked ~ i { @@ -715,9 +1058,15 @@ } } -.home_themer_swatch-default i { background: var(--primary-500); } -.home_themer_swatch-wireframe i { background: #a3a3a3; } -.home_themer_swatch-sunset i { background: #ea580c; } +.home_themer_swatch-default i { + background: var(--primary-500); +} +.home_themer_swatch-wireframe i { + background: #a3a3a3; +} +.home_themer_swatch-sunset i { + background: #ea580c; +} .home_themer_split { display: grid; @@ -838,7 +1187,7 @@ color: light-dark(var(--base-500), var(--base-400)); } -/* 6 COMPONENT GALLERY */ +/* 5 COMPONENT GALLERY */ .home_gallery_grid { display: grid; @@ -887,7 +1236,7 @@ display: flex; justify-content: space-between; align-items: center; - padding-top: var(--xs3); + padding-bottom: var(--xs3); } .home_gallery_name { @@ -928,7 +1277,7 @@ } } -/* 7 OWNERSHIP: the exhale before the CTA */ +/* 6 OWNERSHIP: the exhale before the CTA */ .home_own { --section-spacing: var(--xl1); @@ -971,7 +1320,7 @@ } } -/* 8 FINAL CTA */ +/* 7 FINAL CTA */ .home_cta { --section-spacing: var(--xl2); @@ -984,7 +1333,7 @@ } .home_cta_bt { - --bt-color: light-dark(var(--primary-700), var(--base-950)); + --bt-color: light-dark(var(--primary-700), var(--base-950)); } .home_cta_newsletter { From e17eccf8da4da425b40e7842461694c617820f6b Mon Sep 17 00:00:00 2001 From: Yann Date: Mon, 27 Jul 2026 19:11:53 -0700 Subject: [PATCH 6/6] Update install docs and add a blog post for PostCSS --- CHANGELOG.md | 2 +- src/content/blog/postcss-setup-for-mcss.mdx | 264 ++++++++++++++++++++ src/content/docs/start.mdx | 25 +- 3 files changed, 282 insertions(+), 9 deletions(-) create mode 100644 src/content/blog/postcss-setup-for-mcss.mdx diff --git a/CHANGELOG.md b/CHANGELOG.md index 065283b..6f25525 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,7 +2,7 @@ All notable changes to mCSS. The framework follows the copy-it-you-own-it model: there is no package to update, so version numbers mark states of the repository you can copy from (each release is also a git tag). -## 1.2.0 (2026-07-26) +## 1.2.0 (2026-07-27) Core and components split: the drop-in framework file no longer bundles the component library, so sites that build their own components stop paying for it. diff --git a/src/content/blog/postcss-setup-for-mcss.mdx b/src/content/blog/postcss-setup-for-mcss.mdx new file mode 100644 index 0000000..9075e93 --- /dev/null +++ b/src/content/blog/postcss-setup-for-mcss.mdx @@ -0,0 +1,264 @@ +--- +title: "How to Set Up PostCSS for mCSS" +pubDate: 2026-07-27T12:00:00-07:00 +author: "Yann" +tags: ["mCSS", "postcss", "css", "dev"] +description: "The mCSS source files need exactly one build tool, and most of its configuration is about telling it to leave your CSS alone. Here is the whole setup, what each line is for, and how to check it worked." +--- + +import Notice from "../../components/Notice.astro"; + + + None of the following applies if you link to the pre-compiled files in your + code. The [Getting Started][install] page compares the two so you can pick the + best option for your use case.. + + +## + +If you copy the mCSS [source files][framework-src] rather than the compiled [drop-in bundles][install], you need a build step. Exactly one thing requires it: the framework writes its breakpoints as `@custom-media`, which no browser understands yet. + +That makes the setup smaller than you might expect, and a little upside down. Most PostCSS configs exist to translate modern CSS into something older browsers accept. This one mostly exists to stop that from happening, because everything else mCSS uses (cascade layers, nesting, `:has()`, `light-dark()`, `@scope`) is meant to reach the browser exactly as written. + +Budget ten minutes. If you already have a bundler, closer to two. + +## What actually needs compiling + +### Custom media queries + +`settings.media-queries.css` defines every breakpoint and user preference once: + +```css +@custom-media --md (width >= 768px); +@custom-media --motionOK (prefers-reduced-motion: no-preference); +@custom-media --OSdark (prefers-color-scheme: dark); +``` + +Framework files then use the name instead of the value: + +```css +/* framework/component.header.css */ +.header_nav { + display: none; + @media (--md) { + display: block; + } +} +``` + +Browsers still can't do that. So we compile it to: + +```css +.header_nav { + display: none; + @media (width >= 768px) { + display: block; + } +} +``` + +Note what did **not** change: the nested `@media` is still nested. The output is modern CSS, just with the breakpoint spelled out. See the [media queries docs](/docs/media-queries) for the full list of names. + +### Mixins, if you want them + +`settings.mixins.css` defines two `@define-mixin` blocks. Nothing in mCSS uses them by default, so they are genuinely optional: install the plugin if you want mixins in your own CSS, or delete the import from `mcss.css`. Leaving the import without the plugin will add code browsers will ignore. Harmless, but it is bloat if you're not going to use that feature. + +### + + + +- `@layer`: critical for mCSS to work as intended. +- All Baseline 2024 used natively: Nesting, `:has()`, `light-dark()`, `@scope`, etc. + +A default PostCSS setup will happily "help" with several of these. The config below is mostly the list of things it must keep its hands off. + + + +## Install + +```bash +npm install -D postcss postcss-preset-env +``` + +[postcss-preset-env][presetEnv] is what resolves `@custom-media`. Add [postcss-mixins][mixins] as well if you decided you want mixins: + +```bash +npm install -D postcss-mixins +``` + +## The config + +Create `postcss.config.cjs` at the root of your project: + +```js +/* postcss.config.cjs */ +const postcssPresetEnv = require("postcss-preset-env"); + +module.exports = { + plugins: [ + postcssPresetEnv({ + stage: 2, + features: { + // mCSS ships native cascade layers; without this, preset-env's + // polyfill strips every @layer rule and rewrites priorities as + // specificity hacks. Do not remove. + "cascade-layers": false, + // Only matters if you use the wireframe theme: the polyfill freezes + // random() into one static value, killing the per-element tilt. + "random-function": false, + }, + }), + ], +}; +``` + +That is the whole file. Three details are worth unpacking. + +### `stage: 2` + +preset-env groups features by how far along the standards process they are. Stage 2 means "a working draft the CSS Working Group has agreed on", and custom media queries sit exactly there. It is also preset-env's own default, so you could technically omit the line. Keep it: it documents the floor, and it means a future change to the default cannot quietly turn on features you never asked for. + +### `"cascade-layers": false` + +The one that matters. Left enabled, preset-env's cascade-layer polyfill deletes every `@layer` rule and tries to recreate the priority order with specificity, padding selectors with `:not(#\#)` repetitions to make later layers "heavier". + +For most frameworks that is a reasonable trade. For mCSS it is fatal, because the promise of the layers runs in the other direction: framework CSS is supposed to _lose_ to yours. Once the layers become specificity, your unlayered rules stop winning automatically, and you are back to counting selectors and reaching for `!important`. Everything still compiles, nothing warns you, and your overrides just quietly stop working. + +Since mCSS only supports browsers that implement `@layer` natively (see [browser support](/docs/start#browser-support)), there is nothing to polyfill anyway. + +### `"random-function": false` + +Narrower, and you can skip it unless you use the [wireframe theme](/docs/themes). CSS `random()` gives each element in that theme its own slight hand-drawn tilt. The polyfill replaces `random()` with a single fixed value seeded from the length of your source, so every element tilts identically, and the value changes whenever you edit an unrelated line. Browsers without `random()` already fall back to `sibling-index()` math, so passing it through is strictly better. + +## The browserslist floor + +preset-env decides what to transform by asking [browserslist](https://browsersl.ist) which browsers you support. Give it a floor that already has the features mCSS relies on and it will stop reaching for polyfills on its own. Create `.browserslistrc`: + +```text +# mCSS support floor: browsers with native cascade-layer support (~Baseline 2022+). +defaults and supports css-cascade-layers +``` + +`defaults` is browserslist's usual "last 2 versions, > 0.5% usage, not dead". The `and supports css-cascade-layers` half narrows it to browsers that implement `@layer`, which in practice also covers nesting and `:has()`. + +## If your project already has a bundler + +You are done. Astro, Vite, Next, Nuxt, SvelteKit, Parcel, and anything else with PostCSS built in will pick up `postcss.config.cjs` from the project root on their own. Import your entry file the way you already do: + +```js +import "./styles/main.css"; +``` + +Bundlers also inline the `@import` chain themselves, which matters more than it looks: `@custom-media` definitions only apply within the stylesheet PostCSS is processing, so the breakpoint file has to be pulled into the same document as the files that use it. Your bundler is already doing that. (This site is an Astro project and its PostCSS config is exactly the file above, nothing more.) + +Run your usual `dev` and `build`. Nothing else changes. + +## If your project has no bundler + +A plain HTML site, or anything where nothing currently compiles CSS, needs two more packages: one to run PostCSS from the command line, one to follow `@import`. + +```bash +npm install -D postcss-cli postcss-import +``` + +Add `postcss-import` to the config, **first in the array**, so imports are inlined before anything else looks at the file: + +```js +/* postcss.config.cjs */ +const postcssPresetEnv = require("postcss-preset-env"); + +module.exports = { + plugins: [ + require("postcss-import"), + postcssPresetEnv({ + stage: 2, + features: { + "cascade-layers": false, + "random-function": false, + }, + }), + ], +}; +``` + +Order is not a style preference here. Put it last and preset-env sees a file full of `@media (--md)` with no definitions in scope, leaves them alone, and ships them to the browser broken. + +Then point a script at your entry file: + +```json +"scripts": { + "build:css": "postcss src/styles/main.css -o public/css/main.css", + "watch:css": "postcss src/styles/main.css -o public/css/main.css --watch" +} +``` + +`npm run build:css` writes one compiled stylesheet, which is what your HTML links: + +```html + +``` + +`npm run watch:css` leaves it running while you work. Commit the source, not the output, and run the build in CI or before you deploy. + +## Check that it worked + +Three greps on the compiled file, which beat squinting at a page: + +```bash +# Should print 0: every custom media query resolved. +grep -c "@custom-media" public/css/main.css + +# Should print a number well above 0: the layers survived. +grep -c "@layer" public/css/main.css + +# Should print 0: no unresolved breakpoint names left behind. +grep -c "@media (--" public/css/main.css +``` + +If the first and third are `0` and the second is not, the setup is correct. + +The final check: write a rule that overrides the framework. + +```css +/* your CSS, after the framework imports */ +.bt { + border-radius: 0; +} +``` + +Square buttons mean it works. If mCSS wins that fight, the cascade-layers polyfill is still on. + +## Troubleshooting + +**Your overrides stop winning, or need `!important` for no reason.** +The cascade-layers polyfill is enabled. Check that `"cascade-layers": false` is in the config, and that the config is actually being read (bundlers only auto-detect it at the project root). + +**`@media (--md)` shows up in the output.** +PostCSS never saw the definitions and the usage together. With a bundler, check that the file importing the breakpoints is part of the same entry. Without one, it is almost always a missing or misordered `postcss-import`. + +**`@define-mixin` blocks in the output.** +`postcss-mixins` is not installed. Install it, or drop the `settings.mixins.css` import from `mcss.css`. + +**Your editor flags `@custom-media` or `@layer` as an unknown at-rule.** +That is the editor, not your build. [Here is the fix](/blog/fix-unknown-at-rule-warnings). + +**The wireframe theme looks uniformly tilted, or your compiled CSS changes on every unrelated edit.** +The `random-function` polyfill is on. + +**Nesting got flattened, or `:has()` turned into something else.** +Your browserslist target is too broad. Check `.browserslistrc` exists and is being picked up. + +## Regenerating the dist files + + + For a normal project you will never need it. It builds the framework, not your + site. + + +If you forked mCSS itself and want to rebuild the shipped bundles, the repo's [`src/tools/build-css.mjs`][build-tool] is the script that does it: same plugins as above, plus `postcss-import` to bundle and `esbuild` to minify. It writes the single-file bundles, their minified twins, and the per-file copies in `dist/css/`. The `SRC` and `OUT` constants at the top of the file are the two paths to repoint at your own folders. + +[build-tool]: https://github.com/minimaldesign/mCSS/blob/main/src/tools/build-css.mjs +[framework-src]: https://github.com/minimaldesign/mCSS/tree/main/src/styles/ +[install]: /docs/start#the-easy-install +[mixins]: https://github.com/postcss/postcss-mixins +[presetEnv]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-preset-env diff --git a/src/content/docs/start.mdx b/src/content/docs/start.mdx index 930d42c..0abb087 100644 --- a/src/content/docs/start.mdx +++ b/src/content/docs/start.mdx @@ -1,7 +1,7 @@ --- title: "Getting Started" description: "Copy mCSS into your project and learn the methodology: file structure, class syntax, components" -lastUpdate: 2026-07-26 +lastUpdate: 2026-07-27 version: 1 --- @@ -20,19 +20,27 @@ Once you've read through the basics below, the best way to understand how it all
    -### Drop-in files +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. -Grab [`dist/mcss.css`][dist-css] (or [`dist/mcss.min.css`][dist-min]), the framework core in one file, no build step needed. If you want the component library too, add [`dist/mcss.components.css`][dist-components] (or [`dist/mcss.components.min.css`][dist-components-min]) next to it; skip it if you build your own components. The easiest way to import, but the file size won't be optimized to your specific needs. +### Install with PostCSS -### Individual files +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). -Every framework file is also available pre-processed in [`dist/css/`][dist-dir] (with [`dist/css/mcss.css`][dist-index] as an `@import` index), so you can copy just the layers you need. +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]. -### Source files +### The easy install -Copy [`src/styles/framework/`][framework-src] if you run PostCSS yourself (the source uses `@custom-media`, which needs [postcss-preset-env][presetEnv]). +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: -Run `npm run build:css` in the repo to produce `dist/` from source. +```html + + + +``` + +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. + +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).
    @@ -384,6 +392,7 @@ The exact compile floor lives in `.browserslistrc` (`defaults and supports css-c [interfaceTokens]: /docs/tokens#interface-tokens [layers]: /blog/what-is-itcss#the-layers-of-itcss [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