diff --git a/.claude/launch.json b/.claude/launch.json
index 6836a612..29f05070 100644
--- a/.claude/launch.json
+++ b/.claude/launch.json
@@ -1,35 +1,26 @@
 {
   "version": "0.0.1",
   "configurations": [
-    {
-      "name": "preview",
-      "runtimeExecutable": "npm",
-      "runtimeArgs": ["run", "preview"],
-      "port": 4321
-    },
-    {
-      "name": "preview-4331",
-      "runtimeExecutable": "npm",
-      "runtimeArgs": ["run", "preview", "--", "--port", "4331"],
-      "port": 4331
-    },
     {
       "name": "dev",
       "runtimeExecutable": "npm",
-      "runtimeArgs": ["run", "dev"],
+      "runtimeArgs": [
+        "run",
+        "dev"
+      ],
       "port": 4321
     },
     {
-      "name": "dev-4330",
-      "runtimeExecutable": "npm",
-      "runtimeArgs": ["run", "dev", "--", "--port", "4330"],
-      "port": 4330
-    },
-    {
-      "name": "dev-4340",
+      "name": "preview",
       "runtimeExecutable": "npm",
-      "runtimeArgs": ["run", "dev", "--", "--port", "4340"],
-      "port": 4340
+      "runtimeArgs": [
+        "run",
+        "preview",
+        "--",
+        "--port",
+        "4400"
+      ],
+      "port": 4400
     }
   ]
 }
diff --git a/.githooks/pre-commit b/.githooks/pre-commit
index e6ba46a4..3d73fa96 100755
--- a/.githooks/pre-commit
+++ b/.githooks/pre-commit
@@ -10,3 +10,7 @@ if git diff --cached --name-only | grep -qE '^(src/styles/framework/|src/tools/b
   npm run --silent build:css || exit 1
   git add dist
 fi
+
+# Every copy of the cascade-layer statement (theme file pins, docs code
+# blocks, dist) must agree with the canonical one in framework/mcss.css.
+npm run --silent check:layers || exit 1
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 3e8497c6..a77b9708 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -36,23 +36,30 @@ jobs:
           git diff --exit-code dist/ || { echo '::error::dist/ is stale — run `npm run build:css` and commit the result'; exit 1; }
           test -z "$(git status --porcelain dist/)" || { echo '::error::dist/ has uncommitted files — run `npm run build:css` and commit the result'; exit 1; }
 
+      - name: Layer statements agree everywhere
+        run: npm run check:layers
+
       - name: Verify dist invariants
         run: |
           set -e
-          # layers survived the build (the preset-env polyfill must stay off)
-          grep -q '@layer settings, base, elements, global, components, theme, helpers;' dist/mcss.css
+          # no cascade-layers or light-dark polyfill artifacts (the layer
+          # statement itself is covered by check:layers above)
           ! grep -q ':not(#' dist/mcss.css
-          # 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
+          ! grep -q 'csstools' dist/mcss.css
+          ! grep -q 'csstools' dist/mcss.components.css
+          # the core bundle bakes in the default theme (it must paint alone)
+          # but ships no components and no user theme
+          grep -qE '@layer theme\.default ?\{' dist/mcss.css
+          ! grep -qE '@layer theme\.user ?\{' dist/mcss.css
+          ! grep -qE '@layer components ?\{' dist/mcss.css
+          # the component library lives in its own bundle, with no theme
+          grep -qE '@layer components ?\{' dist/mcss.components.css
+          ! grep -qE '@layer theme\.(default|user) ?\{' dist/mcss.components.css
+          # standalone themes self-layer into theme.user, and the default
+          # theme's entry layers its parts, so any import method lands right
+          grep -qE '@layer theme\.user ?\{' dist/css/theme.wireframe.css
+          grep -qE '@layer theme\.user ?\{' dist/css/theme.starter.css
+          grep -qF 'layer(theme.default)' dist/css/theme.default.css
           # no unresolved custom media or mixins shipped
           # (plain '@custom-media' appears in a comment; check real syntax)
           ! grep -qE '@custom-media --|media \(--' dist/mcss.css
diff --git a/CLAUDE.md b/CLAUDE.md
index 8e1d9fac..a3890473 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -8,11 +8,11 @@ mCSS is a CSS framework (ITCSS-based) paired with an Astro documentation site, c
 
 ## Commands
 
-| Command             | Purpose                          |
-| ------------------- | -------------------------------- |
-| `npm run dev`       | Start Astro dev server           |
-| `npm run build`     | Production static build          |
-| `npm run preview`   | Preview the production build     |
+| Command           | Purpose                      |
+| ----------------- | ---------------------------- |
+| `npm run dev`     | Start Astro dev server       |
+| `npm run build`   | Production static build      |
+| `npm run preview` | Preview the production build |
 
 ## Architecture overview
 
@@ -25,7 +25,7 @@ mCSS is a CSS framework (ITCSS-based) paired with an Astro documentation site, c
 
 ## CSS cascade layers are load-bearing
 
-The framework uses native `@layer`; the layer name (declared in `src/styles/framework/mcss.css`) decides priority, and unlayered site CSS beats every layer. Import new framework files with `layer(<name>)`, except `theme.*.css` files: those wrap themselves in `@layer theme` and are activated from the consumer entry (`_global.css`), never imported by `mcss.css`. Never re-enable preset-env's `cascade-layers` polyfill in `postcss.config.cjs`. Always consult [agents/css.md](agents/css.md) before adding or moving CSS files.
+The framework uses native `@layer`; the layer name (declared in `src/styles/framework/mcss.css`) decides priority, and unlayered site CSS beats every layer. Import new framework files with `layer(<name>)`, except standalone `theme.*.css` files (starter, skins): those self-layer via `@layer theme.user` and are activated from the consumer entry (`_global.css`), never imported by `mcss.css`. The default theme's parts are plain CSS layered by their entry (`theme.default.css`, with `layer(theme.default)`). Every design value lives in the default theme (`theme.default.css`); the framework does not paint without it. Never re-enable preset-env's `cascade-layers` polyfill in `postcss.config.cjs`. Always consult [agents/css.md](agents/css.md) before adding or moving CSS files.
 
 ## Detailed reference docs
 
diff --git a/agents/components.md b/agents/components.md
index bec7ea3d..7c22a01e 100644
--- a/agents/components.md
+++ b/agents/components.md
@@ -8,7 +8,7 @@
 4. **Rest spread**: `{...rest}` on the root element so consumers can set any native attribute.
 5. **`data-testid`**: accepted as a prop with a sensible per-component default.
 6. **States vs modifiers**: runtime states are `.is-*` classes (`.is-active`, `.is-online`); build-time variants are block modifiers (`.card-filled`). Prefer styling ARIA attributes when one exists (`[aria-current]`, `[aria-disabled]`).
-7. **Interface tokens**: every themable knob has a declared default in `settings.ui.css`; local-only custom properties use descriptive names (`--avatar-size`, not `--w`).
+7. **UI tokens**: every themable knob has a declared default in `theme.default.ui.css`; local-only custom properties use descriptive names (`--avatar-size`, not `--w`).
 8. **Slots**: default slot for main content; named slots documented on the component's docs page.
 9. **A11y**: keyboard operable, labelled, JS motion gated on `prefers-reduced-motion`, no live-region roles on static content.
 
diff --git a/agents/css.md b/agents/css.md
index 69fa6e46..548525f0 100644
--- a/agents/css.md
+++ b/agents/css.md
@@ -9,25 +9,27 @@ mCSS uses **native CSS cascade layers** (`@layer`) on top of an ITCSS-inspired f
 ## Cascade rules (load-bearing)
 
 1. Framework layers, in priority order (later wins):
-   `settings, base, elements, global, components, theme, helpers`
-   The order runs **from default to deliberate**: `settings` through `components` are the framework's defaults, `theme` is a deliberate override of those defaults, helpers are the last word. (Not "generic to specific": a theme is broad in reach but late in intent, and intent decides cascade order.)
+   `base, elements, global, components, theme.default, theme.user, helpers`
+   The order runs **from default to deliberate**: `base` through `components` are the framework's structure, `theme.default` holds the default theme's design values, `theme.user` holds the consumer's deliberate deviations, helpers are the last word. (Not "generic to specific": a theme is broad in reach but late in intent, and intent decides cascade order.)
 2. **Unlayered CSS beats every layer for normal declarations.** That's the consumer guarantee ("your CSS wins") and why site CSS is unlayered.
-3. **The `theme` layer holds at most one active theme** (`theme.*.css`): token overrides plus optional style rules. Theme files are self-layered (each wraps its own content in `@layer theme`) and are **never imported by `mcss.css`**; the consumer entry activates one (see `_global.css`). No theme = the default look. Unlayered consumer CSS still beats themes.
+3. **Every design value lives in the default theme** (`theme.default.css` entry importing `theme.default.tokens.css` + `theme.default.ui.css` with `layer(theme.default)`; the parts are plain CSS, the entry assigns their layer, and the dist build pre-wraps the dist copies for lone `<link>` use). It is **never imported by `mcss.css`**; the consumer entry activates it right after `mcss.css` (see `_global.css`), and the framework does not paint without it. A consumer theme (self-layered into `theme.user`, see `theme.starter.css`) beats the default regardless of import order; a full skin like `theme.wireframe.css` is an entry that composes `theme.default.css` and overrides on top. Activate exactly one theme entry. Unlayered consumer CSS still beats all themes.
 4. **Helpers are the exception: every helper declaration carries `!important`.** Important layered declarations beat unlayered CSS (the cascade inverts for important), so helpers win over site and consumer CSS too. They're element-level overrides, like inline styling. For important declarations layer order also inverts (earlier layer wins), which is why the reduced-motion block in `base.reset.css` still beats helpers.
 5. `!important` is REQUIRED in every helper declaration and banned everywhere else in the framework, except the reduced-motion block in `base.reset.css` and third-party override files (see `site/external.astro.css`). `help.colors.css` and `help.spacing.css` get it from their generators.
 6. `postcss.config.cjs` disables preset-env's `cascade-layers` polyfill. **Never remove that option** — the polyfill strips every `@layer` rule and silently replaces the cascade with specificity hacks. The browser floor is set in `.browserslistrc` (`defaults and supports css-cascade-layers`).
 
 ## Layer table
 
-| Layer      | Prefix        | Purpose                                                     |
-| ---------- | ------------- | ----------------------------------------------------------- |
-| settings   | `settings.*`  | Primitive tokens (`settings.tokens.css`) and interface tokens (`settings.ui.css`); media queries + mixins import unlayered: build-time only |
-| base       | `base.*`      | Reset only (`base.reset.css`)                               |
-| elements   | `elements.*`  | Bare HTML element styles (text, form, media)                |
-| global     | `global.*`    | Structural patterns (a11y, grid, layout, prose, wrap)       |
-| components | `component.*` | Library components (card, hero, notice, …), including CSS-only single-class ones (badge, button, toggle); imported by `mcss.components.css`, never by `mcss.css` |
-| theme      | `theme.*`     | Swappable themes: token overrides + style rules, self-layered via `@layer theme`, activated by the consumer entry (never by `mcss.css`) |
-| helpers    | `help.*`      | Utility overrides (colors, spacing, typography), all `!important`: beats everything, including unlayered CSS |
+| Layer         | Prefix            | Purpose                                                                                                                                                                                                                                        |
+| ------------- | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| base          | `base.*`          | Reset only (`base.reset.css`)                                                                                                                                                                                                                  |
+| elements      | `elements.*`      | Bare HTML element styles (text, form, media)                                                                                                                                                                                                   |
+| global        | `global.*`        | Structural patterns (a11y, grid, layout, prose, wrap)                                                                                                                                                                                          |
+| components    | `component.*`     | Library components (card, hero, notice, …), including CSS-only single-class ones (badge, button, toggle); imported by `mcss.components.css`, never by `mcss.css`                                                                               |
+| theme.default | `theme.default.*` | The default theme: scale tokens (`theme.default.tokens.css`) and ui tokens (`theme.default.ui.css`), imported by the `theme.default.css` entry, activated by the consumer entry (never by `mcss.css`); the framework does not paint without it |
+| theme.user    | `theme.*`         | Your theme and swappable skins: token overrides + style rules, self-layered via `@layer theme.user`; a full skin (`theme.wireframe.css`) is an entry composing `theme.default.css` and overriding on top                                       |
+| helpers       | `help.*`          | Utility overrides (colors, spacing, typography), all `!important`: beats everything, including unlayered CSS                                                                                                                                   |
+
+`settings.media-queries.css` and `settings.mixins.css` are the only remaining `settings.*` files: build-time material (`@custom-media` + mixins), imported unlayered, no runtime output.
 
 `page.*` is a file-naming convention only (page-specific styles, e.g. site `page.docs.css`); those files are plain unlayered consumer CSS, there is no `pages` layer.
 
@@ -46,7 +48,7 @@ Site-only files keep the same prefixes but live in `src/styles/site/` and import
 - Block modifiers (`.card-filled`, `.bt-primary`) for **build-time variants** chosen by props/markup.
 - Prefer styling an ARIA attribute when one exists: `[aria-current="true"]`, `[aria-expanded="true"]`, `[aria-disabled="true"]` beat inventing a parallel class.
 - Nested states compile to two-class selectors (`.avatar.is-online`) that out-specify single-class modifiers (`.avatar-xl`). So declare custom-property **defaults on the block**, let modifiers override them, and only **consume** the properties inside state blocks — never declare defaults there (that's how the avatar status-dot regression happened).
-- Element chains may go as deep as the block's own structure needs (`.home_morph_static_arrow` = arrow inside the morph's static state). The underscore marks hierarchy **within one block**; multi-word single names stay camelCase (`.home_themer_formRow`). A nested *component* always starts its own block (`.themeToggle_text`, never `.header_navMobile_themeToggle_text`).
+- Element chains may go as deep as the block's own structure needs (`.home_morph_static_arrow` = arrow inside the morph's static state). The underscore marks hierarchy **within one block**; multi-word single names stay camelCase (`.home_themer_formRow`). A nested _component_ always starts its own block (`.themeToggle_text`, never `.header_navMobile_themeToggle_text`).
 
 ### Never couple classes from different components (CRITICAL)
 
@@ -55,18 +57,18 @@ A selector must only contain classes from its own block. Never write a descendan
 To style a component from outside:
 
 - **Its root**: mix your own class onto the element in markup (`<Section class="home_section …">`) and style that class.
-- **Its internals**: use the component's `<part>Class` props (`headerClass`, `titleClass`, …) to mix a class onto the part, or set the component's interface tokens on your own hook class. If neither exists yet, add the prop or token to the component. Do not reach in with a selector.
+- **Its internals**: use the component's `<part>Class` props (`headerClass`, `titleClass`, …) to mix a class onto the part, or set the component's ui tokens on your own hook class. If neither exists yet, add the prop or token to the component. Do not reach in with a selector.
 - **Bare HTML tags** (`.home_themer_formRow > button`), `.is-*` states, and ARIA attribute selectors are fine inside your own block.
 - **Context blocks are not components**: a component may reference the environment it sits in (`@scope (.prose) to (.not-prose)` in `component.notice.css`, `:root.theme-dark`), but the context's own file must never name specific components (that's why `global.prose.css` lists only bare tags).
 - **Theme files are the one sanctioned exception**: a `theme.*.css` file may select component classes from outside (`.card::after`, `.bt`) because a theme is by definition a style over the whole system, versioned with the framework. Even there, prefer token overrides; reach for selectors only for what tokens can't express (pseudo-elements, `nth-child` rhythm, `text-decoration`).
 
 ### Token naming grammar
 
-Interface tokens (`settings.ui.css`) are the public API of every component; they follow `--component-part-property`, longhand, kebab-case:
+UI tokens (`theme.default.ui.css`) are the public API of every component; they follow `--component-part-property`, longhand, kebab-case:
 
 - `--bt-background-color-hover`, `--notice-border-width`, `--avatar-status-dot-color-online`
 - No abbreviations (`--card-bg-color` is legacy; new tokens spell out `background-color`), no camelCase, no underscores.
-- Feedback colors: prefer the semantic aliases `--success-*` / `--danger-*` / `--warning-*` over the raw `--yes/no/maybe-*` scales.
+- Feedback colors come straight from the `--yes-*` / `--no-*` / `--maybe-*` palettes; there is no separate success/danger/warning alias tier.
 
 ### Logical vs physical direction
 
@@ -85,7 +87,7 @@ Never `transition: all` — it also transitions layout properties, so any late-a
 
 - **One block per file.** Every block gets its own file named after it (`.featureItem` lives in `component.featureItem.css`, never inside `component.featureGrid.css`), even for small companion blocks (`component.fieldRow.css`, site `component.webring.css`).
 - Framework file: create `src/styles/framework/<prefix>.<name>.css` and add `@import url(./<file>) layer(<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.<name>.css` wrapping its own content in `@layer theme { … }`; do NOT import it in `mcss.css` (the consumer entry activates it; the dist index lists it commented out).
+- Theme file: copy `src/styles/framework/theme.starter.css` to `theme.<name>.css` (its content self-layers via `@layer theme.user { … }`); do NOT import it in `mcss.css` (the consumer entry activates it after `theme.default.css`). For a full swappable skin, write an entry that imports `theme.default.css` and overrides on top, like `theme.wireframe.css`. The dist index lists non-default themes commented out.
 - Site file: create `src/styles/site/<prefix>.<name>.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/astro.config.mjs b/astro.config.mjs
index 8223deb3..7c457e8e 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -8,7 +8,8 @@ import tunnel from "astro-tunnel";
 import expressiveCode from "astro-expressive-code";
 
 // astro-tunnel is a dev-only tool; keep it out of production builds
-const isDev = process.env.NODE_ENV !== "production" && process.argv.includes("dev");
+const isDev =
+  process.env.NODE_ENV !== "production" && process.argv.includes("dev");
 
 // https://astro.build/config
 export default defineConfig({
@@ -16,20 +17,14 @@ export default defineConfig({
   // dist/ is reserved for the framework CSS artifact (npm run build:css);
   // the hosting platform's publish directory must point at _site/
   outDir: "./_site",
-  redirects: {
-    // slug lowercased for consistency with the other component docs
-    "/components/ReadProgressBar": "/components/readprogressbar",
-    // the template docs page moved from the components collection to docs
-    "/components/template": "/docs/template",
-    // tags pages moved under /blog so the Blog nav item highlights on them
-    "/tags": "/blog/tags",
-    "/tags/[tag]": "/blog/tags/[tag]",
-  },
+  // Redirects live in public/_redirects (Netlify edge, real 301s), not
+  // here: Astro config redirects emit meta-refresh HTML stubs that shadow
+  // the Netlify rules and that non-browser clients don't follow.
   integrations: [
     preact(),
     sitemap({
-      // keep the meta-refresh stubs at /tags/* and the bare demo pages out
-      filter: (page) => !page.startsWith("https://mcss.dev/tags/") && !page.startsWith("https://mcss.dev/demos/"),
+      // keep the bare demo pages out
+      filter: (page) => !page.startsWith("https://mcss.dev/demos/"),
     }),
     expressiveCode({
       themes: ["github-dark"], // Theme also needs to be imported in shikiHighlighter.js
diff --git a/dist/css/base.reset.css b/dist/css/base.reset.css
index d66c21c3..bedf4f90 100644
--- a/dist/css/base.reset.css
+++ b/dist/css/base.reset.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
diff --git a/dist/css/component.avatar.css b/dist/css/component.avatar.css
index 2ee84f63..989bfb23 100644
--- a/dist/css/component.avatar.css
+++ b/dist/css/component.avatar.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
diff --git a/dist/css/component.badge.css b/dist/css/component.badge.css
index dc0d0d71..3fbfa212 100644
--- a/dist/css/component.badge.css
+++ b/dist/css/component.badge.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
diff --git a/dist/css/component.banner.css b/dist/css/component.banner.css
index ea56c1cc..1598b27f 100644
--- a/dist/css/component.banner.css
+++ b/dist/css/component.banner.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
diff --git a/dist/css/component.breadcrumbs.css b/dist/css/component.breadcrumbs.css
index 999522df..65804e4e 100644
--- a/dist/css/component.breadcrumbs.css
+++ b/dist/css/component.breadcrumbs.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
diff --git a/dist/css/component.button.css b/dist/css/component.button.css
index 00cac71d..bdcd19d1 100644
--- a/dist/css/component.button.css
+++ b/dist/css/component.button.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
diff --git a/dist/css/component.card.css b/dist/css/component.card.css
index b605766e..0ff65f7a 100644
--- a/dist/css/component.card.css
+++ b/dist/css/component.card.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
diff --git a/dist/css/component.faq.css b/dist/css/component.faq.css
index 1429620f..97900d7d 100644
--- a/dist/css/component.faq.css
+++ b/dist/css/component.faq.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
diff --git a/dist/css/component.featureItem.css b/dist/css/component.featureItem.css
index afc09e15..1ac79fd7 100644
--- a/dist/css/component.featureItem.css
+++ b/dist/css/component.featureItem.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
diff --git a/dist/css/component.field.css b/dist/css/component.field.css
index ca3dd5ce..ff23f974 100644
--- a/dist/css/component.field.css
+++ b/dist/css/component.field.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
diff --git a/dist/css/component.fieldRow.css b/dist/css/component.fieldRow.css
index e7bf64ac..5d934852 100644
--- a/dist/css/component.fieldRow.css
+++ b/dist/css/component.fieldRow.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
@@ -30,7 +30,7 @@ xxl: 1920px
 /* Inline composition: fields and buttons on one wrapping row
    (newsletter signup, search bar…). Mix .fieldRow_field onto each field:
    fieldRow never reaches into the field block itself, it only sets the
-   --field-message-position interface token so hints and errors overlay
+   --field-message-position ui token so hints and errors overlay
    below the row instead of pushing bottom-aligned buttons out of line.
    Leave a little vertical room under the row for them. */
 .fieldRow {
diff --git a/dist/css/component.footer.css b/dist/css/component.footer.css
index f104aa7e..359291a5 100644
--- a/dist/css/component.footer.css
+++ b/dist/css/component.footer.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
diff --git a/dist/css/component.header.css b/dist/css/component.header.css
index 94aac3c7..546d8854 100644
--- a/dist/css/component.header.css
+++ b/dist/css/component.header.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
diff --git a/dist/css/component.hero.css b/dist/css/component.hero.css
index bf5dc18e..8a486f5b 100644
--- a/dist/css/component.hero.css
+++ b/dist/css/component.hero.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
diff --git a/dist/css/component.notice.css b/dist/css/component.notice.css
index e196ecce..56a4ed74 100644
--- a/dist/css/component.notice.css
+++ b/dist/css/component.notice.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
diff --git a/dist/css/component.pagination.css b/dist/css/component.pagination.css
index 19797b1b..59debcc5 100644
--- a/dist/css/component.pagination.css
+++ b/dist/css/component.pagination.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
diff --git a/dist/css/component.prevNext.css b/dist/css/component.prevNext.css
index 48bbc8b8..aa397f24 100644
--- a/dist/css/component.prevNext.css
+++ b/dist/css/component.prevNext.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
diff --git a/dist/css/component.pricing.css b/dist/css/component.pricing.css
index 63217db8..222972e0 100644
--- a/dist/css/component.pricing.css
+++ b/dist/css/component.pricing.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
diff --git a/dist/css/component.readProgressBar.css b/dist/css/component.readProgressBar.css
index 38fcc327..9fd8193b 100644
--- a/dist/css/component.readProgressBar.css
+++ b/dist/css/component.readProgressBar.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
diff --git a/dist/css/component.section.css b/dist/css/component.section.css
index f780c4b4..257763c5 100644
--- a/dist/css/component.section.css
+++ b/dist/css/component.section.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
diff --git a/dist/css/component.socialMedia.css b/dist/css/component.socialMedia.css
index 3f516f1d..de714b22 100644
--- a/dist/css/component.socialMedia.css
+++ b/dist/css/component.socialMedia.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
diff --git a/dist/css/component.tags.css b/dist/css/component.tags.css
index 698140b5..2393f3c6 100644
--- a/dist/css/component.tags.css
+++ b/dist/css/component.tags.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
diff --git a/dist/css/component.testimonial.css b/dist/css/component.testimonial.css
index f6d75e78..e1a9c346 100644
--- a/dist/css/component.testimonial.css
+++ b/dist/css/component.testimonial.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
diff --git a/dist/css/component.tiles.css b/dist/css/component.tiles.css
index 64a510f9..e5e02573 100644
--- a/dist/css/component.tiles.css
+++ b/dist/css/component.tiles.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
diff --git a/dist/css/component.toc.css b/dist/css/component.toc.css
index 4b1adad3..fa9e9505 100644
--- a/dist/css/component.toc.css
+++ b/dist/css/component.toc.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
diff --git a/dist/css/component.toggle.css b/dist/css/component.toggle.css
index cf52fb67..3884544a 100644
--- a/dist/css/component.toggle.css
+++ b/dist/css/component.toggle.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
@@ -26,7 +26,7 @@ xxl: 1920px
 
 @layer components {
 .toggle {
-  /* Themable via the --toggle-* tokens in settings.ui.css */
+  /* Themable via the --toggle-* tokens in theme.default.ui.css */
   --toggle-w: var(--toggle-width);
   --toggle-h: var(--toggle-height);
   --toggle-bd: var(--toggle-border-width);
diff --git a/dist/css/elements.form.css b/dist/css/elements.form.css
index bc91b889..5be6baa4 100644
--- a/dist/css/elements.form.css
+++ b/dist/css/elements.form.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
diff --git a/dist/css/elements.interactive.css b/dist/css/elements.interactive.css
index 556b63c0..4d743f3d 100644
--- a/dist/css/elements.interactive.css
+++ b/dist/css/elements.interactive.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
diff --git a/dist/css/elements.media.css b/dist/css/elements.media.css
index f9538b04..8304cc13 100644
--- a/dist/css/elements.media.css
+++ b/dist/css/elements.media.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
diff --git a/dist/css/elements.sectioning.css b/dist/css/elements.sectioning.css
index c79973f6..29e37ed0 100644
--- a/dist/css/elements.sectioning.css
+++ b/dist/css/elements.sectioning.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
diff --git a/dist/css/elements.table.css b/dist/css/elements.table.css
index 9374349a..0c6474f1 100644
--- a/dist/css/elements.table.css
+++ b/dist/css/elements.table.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
diff --git a/dist/css/elements.text.css b/dist/css/elements.text.css
index 1e9e09ff..49632efa 100644
--- a/dist/css/elements.text.css
+++ b/dist/css/elements.text.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
@@ -173,7 +173,7 @@ dd + dt {
 }
 
 del {
-  text-decoration-color: var(--danger-500);
+  text-decoration-color: var(--no-500);
   text-decoration-style: wavy;
 }
 
diff --git a/dist/css/elements.text.quotes.css b/dist/css/elements.text.quotes.css
index 23dab16a..793d28a0 100644
--- a/dist/css/elements.text.quotes.css
+++ b/dist/css/elements.text.quotes.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
diff --git a/dist/css/global.a11y.css b/dist/css/global.a11y.css
index 3b00d3dd..e41f9bdc 100644
--- a/dist/css/global.a11y.css
+++ b/dist/css/global.a11y.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
diff --git a/dist/css/global.animation.css b/dist/css/global.animation.css
index 236444ac..b0ef0142 100644
--- a/dist/css/global.animation.css
+++ b/dist/css/global.animation.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
diff --git a/dist/css/global.grid.css b/dist/css/global.grid.css
index ff78485d..654523bc 100644
--- a/dist/css/global.grid.css
+++ b/dist/css/global.grid.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
@@ -43,7 +43,7 @@ xxl: 1920px
 }
 
 /* DEFAULT */
-.grid > .grid_item { display: block; appearance: none; -webkit-appearance: none }
+.grid > .grid_item { display: block; appearance: none; }
 .grid[col="1"] { --grid-tc: repeat(1, 1fr) }
 .grid[col="2"] { --grid-tc: repeat(2, 1fr) }
 .grid[col="3"] { --grid-tc: repeat(3, 1fr) }
diff --git a/dist/css/global.layout.css b/dist/css/global.layout.css
index 1d0da077..a3a11cc3 100644
--- a/dist/css/global.layout.css
+++ b/dist/css/global.layout.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
@@ -37,7 +37,7 @@ xxl: 1920px
       <footer>…</footer>
     </body>
 
-  Widths come from the layout tokens in settings.ui.css:
+  Widths come from the layout tokens in theme.default.ui.css:
   --layout-content-width, --layout-aside-width, --layout-toc-width.
 */
 
diff --git a/dist/css/global.prose.css b/dist/css/global.prose.css
index d97b490e..d7344ea9 100644
--- a/dist/css/global.prose.css
+++ b/dist/css/global.prose.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
diff --git a/dist/css/global.wrap.css b/dist/css/global.wrap.css
index 77379abe..279caf8a 100644
--- a/dist/css/global.wrap.css
+++ b/dist/css/global.wrap.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
diff --git a/dist/css/help.colors.css b/dist/css/help.colors.css
index 2d16e199..0c747fd2 100644
--- a/dist/css/help.colors.css
+++ b/dist/css/help.colors.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
diff --git a/dist/css/help.devtools.css b/dist/css/help.devtools.css
index fb0a305f..75df3daa 100644
--- a/dist/css/help.devtools.css
+++ b/dist/css/help.devtools.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
@@ -49,9 +49,9 @@ body.dev {
   z-index: var(--z-top) !important;
   padding: var(--sm1) !important;
   font-size: 1rem !important;
-  color: var(--danger-500) !important;
-  background: var(--danger-100) !important;
-  border: 1px solid var(--danger-500) !important;
+  color: var(--no-500) !important;
+  background: var(--no-100) !important;
+  border: 1px solid var(--no-500) !important;
   border-radius: var(--radius-md) !important;
 }
 
diff --git a/dist/css/help.layout.css b/dist/css/help.layout.css
index 20fe9c76..a5aeccaf 100644
--- a/dist/css/help.layout.css
+++ b/dist/css/help.layout.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
diff --git a/dist/css/help.opacity.css b/dist/css/help.opacity.css
index 282b84e1..19409d29 100644
--- a/dist/css/help.opacity.css
+++ b/dist/css/help.opacity.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
diff --git a/dist/css/help.ratios.css b/dist/css/help.ratios.css
index b9484143..baf3dad4 100644
--- a/dist/css/help.ratios.css
+++ b/dist/css/help.ratios.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
diff --git a/dist/css/help.spacing.css b/dist/css/help.spacing.css
index ed50f1c7..dd0daeac 100644
--- a/dist/css/help.spacing.css
+++ b/dist/css/help.spacing.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
diff --git a/dist/css/help.typography.css b/dist/css/help.typography.css
index 8e4e9624..4abbcb39 100644
--- a/dist/css/help.typography.css
+++ b/dist/css/help.typography.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
diff --git a/dist/css/mcss.css b/dist/css/mcss.css
index 32a61f18..55bc0f55 100644
--- a/dist/css/mcss.css
+++ b/dist/css/mcss.css
@@ -1,6 +1,19 @@
 /*! mCSS v1.3.0 | MIT | https://mcss.dev */
-@layer settings, base, elements, global, components, theme, helpers;
+@layer base, elements, global, components, theme.default, theme.user, external, helpers;
 @import url(./base.reset.css) layer(base);
+@import url(./elements.form.css) layer(elements);
+@import url(./elements.interactive.css) layer(elements);
+@import url(./elements.media.css) layer(elements);
+@import url(./elements.sectioning.css) layer(elements);
+@import url(./elements.table.css) layer(elements);
+@import url(./elements.text.css) layer(elements);
+@import url(./elements.text.quotes.css) layer(elements);
+@import url(./global.a11y.css) layer(global);
+@import url(./global.animation.css) layer(global);
+@import url(./global.grid.css) layer(global);
+@import url(./global.layout.css) layer(global);
+@import url(./global.prose.css) layer(global);
+@import url(./global.wrap.css) layer(global);
 @import url(./component.avatar.css) layer(components);
 @import url(./component.badge.css) layer(components);
 @import url(./component.banner.css) layer(components);
@@ -26,19 +39,11 @@
 @import url(./component.tiles.css) layer(components);
 @import url(./component.toc.css) layer(components);
 @import url(./component.toggle.css) layer(components);
-@import url(./elements.form.css) layer(elements);
-@import url(./elements.interactive.css) layer(elements);
-@import url(./elements.media.css) layer(elements);
-@import url(./elements.sectioning.css) layer(elements);
-@import url(./elements.table.css) layer(elements);
-@import url(./elements.text.css) layer(elements);
-@import url(./elements.text.quotes.css) layer(elements);
-@import url(./global.a11y.css) layer(global);
-@import url(./global.animation.css) layer(global);
-@import url(./global.grid.css) layer(global);
-@import url(./global.layout.css) layer(global);
-@import url(./global.prose.css) layer(global);
-@import url(./global.wrap.css) layer(global);
+@import url(./theme.default.css); /* the default theme */
+/* @import url(./theme.default.tokens.css); */ /* imported by theme.default.css */
+/* @import url(./theme.default.ui.css); */ /* imported by theme.default.css */
+/* @import url(./theme.starter.css); */ /* your theme's starting point: keep the default active */
+/* @import url(./theme.wireframe.css); */ /* full theme: use instead of the default (it imports it itself) */
 @import url(./help.colors.css) layer(helpers);
 @import url(./help.devtools.css) layer(helpers);
 @import url(./help.layout.css) layer(helpers);
@@ -46,7 +51,3 @@
 @import url(./help.ratios.css) layer(helpers);
 @import url(./help.spacing.css) layer(helpers);
 @import url(./help.typography.css) layer(helpers);
-@import url(./settings.tokens.css) layer(settings);
-@import url(./settings.ui.css) layer(settings);
-/* @import url(./theme.default.css); */ /* theme: activate at most one */
-/* @import url(./theme.wireframe.css); */ /* theme: activate at most one */
diff --git a/dist/css/theme.default.css b/dist/css/theme.default.css
index e9c5d554..3b0aa9aa 100644
--- a/dist/css/theme.default.css
+++ b/dist/css/theme.default.css
@@ -1,70 +1,26 @@
 /*! mCSS v1.3.0 | MIT | https://mcss.dev */
-/*
-SETTINGS MEDIA QUERIES
-
-https://github.com/argyleink/open-props/blob/main/src/props.media.css
-https://open-props.style/#media-queries
-
-Can't use var() inside media queries 🤦‍♂️
-https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
-
-xxs: 240px
-xs: 360px
-sm: 480px
-md: 768px
-lg: 1024px
-xl: 1440px
-xxl: 1920px
-*/
-
-/* https://github.com/postcss/postcss-mixins */
-
-/* Example */
-
-/* truncate single line of text and adds … */
-
-/* DEFAULT THEME (template) */
+/* DEFAULT THEME */
 
 /*
-  A theme is a file of token overrides, plus optional rules for what
-  tokens can't express. Swap which theme file your entry point imports and
-  the whole site restyles; everything a theme doesn't mention falls back to
-  the framework defaults (settings.tokens.css + settings.ui.css).
-
-  Themes are self-layered: the @layer theme block below slots this file
-  into the layer order declared in mcss.css no matter how it's loaded
-  (plain @import, link tag, bundler). Import exactly one theme from your
-  own entry point, after mcss.css:
+  Basic design tokens and UI abstractions
+  Import it next to mcss.css
 
     @import url(./framework/mcss.css);
-    @import url(./framework/theme.wireframe.css);
+    @import url(./framework/theme.default.css);
+
+  mcss.css imports no theme itself; without this file every token is unset
+  and the page will look broken..
 
-  mCSS imports no theme by default: an empty theme layer IS the default
-  look. Copy this file to start your own theme.
+  Don't edit the  default theme.
 
-  Guidelines:
-  - Prefer token overrides. Override raw tokens (--base-*, --text) to shift
-    the whole palette or type, interface tokens (--ui-border-color,
-    --heading-font) for cross-cutting changes, or component tokens
-    (--bt-border-radius) for surgical ones.
-  - Rules are for what tokens can't express (pseudo-elements,
-    nth-child rhythm, text-decoration). Theme files are the one place
-    allowed to style component classes from outside; they still lose
-    to your unlayered CSS and to helpers, by design.
-  - No !important: that privilege is reserved for the helpers layer.
+  To make your own theme,  either duplicate/rename the 2 files below and
+  import theme instead of the default, or just override the bits you want
+  to change and imported that AFTER the defaults. There is `theme.starter.css`
+  to get you started if you want to go that road (recommended)).
 */
 
-@layer theme {
-  :root {
-    /* A new palette usually gets you 80% of the way:              */
-    /* --base-0: #fff;                                             */
-    /* --primary-500: rebeccapurple;                               */
-    /* Then reach for interface and component tokens as needed:    */
-    /* --heading-font: Georgia, serif;                             */
-    /* --card-border-radius: 0;                                    */
-    /* A theme may also add scales the framework doesn't ship,     */
-    /* e.g. a second accent, and use them in its own style rules:  */
-    /* --secondary-500: teal;                                      */
-  }
-}
+/* Defensive redundancy - Same layers as in mcss.css */
+@layer base, elements, global, components, theme.default, theme.user, external, helpers;
+
+@import url(./theme.default.tokens.css) layer(theme.default);
+@import url(./theme.default.ui.css) layer(theme.default);
diff --git a/dist/css/settings.tokens.css b/dist/css/theme.default.tokens.css
similarity index 81%
rename from dist/css/settings.tokens.css
rename to dist/css/theme.default.tokens.css
index efb95a49..eb9c5c1e 100644
--- a/dist/css/settings.tokens.css
+++ b/dist/css/theme.default.tokens.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
@@ -24,14 +24,17 @@ xxl: 1920px
 
 /* truncate single line of text and adds … */
 
-@layer settings {
-/* SETTINGS TOKENS */
+@layer theme.default {
+/* DEFAULT THEME: TOKENS */
 
 /*
-Can't use var() inside media queries, so breakpoints are hard coded in
-settings.media-queries.css
+  Raw design tokens. Part of the default theme (see theme.default.css);
+  Don't edit this file directly. Thee best way is to Override it with your
+  own theme (see theme.starter.css).
 
-xxs: 240px xs: 360px sm: 480px md: 768px lg: 1024px xl: 1440px xxl: 1920px
+  Can't use var() inside media queries, so breakpoints are hard coded in
+  settings.media-queries.css instead of custom properties
+  xxs: 240px xs: 360px sm: 480px md: 768px lg: 1024px xl: 1440px xxl: 1920px
 */
 
 /*
@@ -48,19 +51,23 @@ xxs: 240px xs: 360px sm: 480px md: 768px lg: 1024px xl: 1440px xxl: 1920px
 
 • Colors
 
-• Box shadows
-• Border radius
 • Border width
+• Border radius
+
+• Box shadows
+
 • Opacity
+
+• Z-index
+
+• Transitions
+
 */
 
 :root {
-  /* GLOBALS */
 
   /* DIMENSIONS */
 
-  /* Sizes */
-
   --xs1: 4px;
   --xs2: 8px;
   --xs3: 12px;
@@ -97,18 +104,20 @@ xxs: 240px xs: 360px sm: 480px md: 768px lg: 1024px xl: 1440px xxl: 1920px
   --tera2: 480px;
   --tera3: 520px;
 
-  /* Aspect Ratios */
+  /* ASPECT RATIOS */
+
   --ar-square: 1;
   --ar-landscape: 4/3;
   --ar-portrait: 3/4;
   --ar-widescreen: 16/9;
   --ar-golden: 1.618/1;
 
-  /* TYPOGRAPHY */
-  /* See also elements.text & help.text */
+  /*  */
+
+  /* (More typography in elements.text & help.text)  */
+
+  /* FONT FAMILIES (https://modernfontstacks.com) */
 
-  /* Font Families */
-  /* Local font stacks - More options @ https://modernfontstacks.com */
   --display:
     Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, ui-sans-serif,
     sans-serif;
@@ -118,8 +127,8 @@ xxs: 240px xs: 360px sm: 480px md: 768px lg: 1024px xl: 1440px xxl: 1920px
     Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono,
     ui-monospace, monospace;
 
-  /* Font Sizes */
-  /* Create your own sizes @ https://typescale.com */
+  /* FONT SIZES (https://typescale.com) */
+
   --text-xs: 0.694rem;
   --text-sm: 0.833rem;
   --text-md: 1rem;
@@ -132,11 +141,8 @@ xxs: 240px xs: 360px sm: 480px md: 768px lg: 1024px xl: 1440px xxl: 1920px
   --display-mega: 3.583rem;
   --display-giga: 4.299rem;
 
-  /* Heading font sizes are decisions, not scale steps: they map each
-     heading level onto this scale. See --heading-font-size-* in
-     settings.ui.css. */
+  /* FONT WEIGHTS */
 
-  /* Font Weights */
   --extra-light: 200;
   --light: 300;
   --book: 400;
@@ -144,14 +150,16 @@ xxs: 240px xs: 360px sm: 480px md: 768px lg: 1024px xl: 1440px xxl: 1920px
   --bold: 700;
   --black: 900;
 
-  /* Letter Spacing */
+  /* LETTER SPACING */
+
   --tracking-sm: -0.05em;
   --tracking-md: 0.025em;
   --tracking-lg: 0.05em;
   --tracking-xl: 0.075em;
   --tracking-xxl: 0.15em;
 
-  /* Line Height */
+  /* LINE HEIGHT */
+
   --leading-xs: 1;
   --leading-sm: 1.15;
   --leading-md: 1.375;
@@ -159,8 +167,7 @@ xxs: 240px xs: 360px sm: 480px md: 768px lg: 1024px xl: 1440px xxl: 1920px
   --leading-xl: 1.75;
   --leading-xxl: 2;
 
-  /* COLORS */
-  /* Make your own palettes programmatically: https://www.tints.dev */
+  /* COLORS (https://www.tints.dev) */
 
   /* Base */
 
@@ -191,8 +198,6 @@ xxs: 240px xs: 360px sm: 480px md: 768px lg: 1024px xl: 1440px xxl: 1920px
   --primary-900: #0c4a6e;
   --primary-950: #082f49;
 
-  /* Secondary and/or Highlight goes here */
-
   /* Feedback */
 
   --yes-100: #d5f6e8;
@@ -217,14 +222,6 @@ xxs: 240px xs: 360px sm: 480px md: 768px lg: 1024px xl: 1440px xxl: 1920px
 
   --highlight-500: #ffee00;
 
-  /* GRADIENTS */
-
-  --gradient-primary: linear-gradient(
-    90deg,
-    var(--primary-950) 0%,
-    var(--primary-400) 100%
-  );
-
   /* BORDERS */
 
   --border-sm: 1px;
diff --git a/dist/css/settings.ui.css b/dist/css/theme.default.ui.css
similarity index 82%
rename from dist/css/settings.ui.css
rename to dist/css/theme.default.ui.css
index 08a2191b..41ca16ae 100644
--- a/dist/css/settings.ui.css
+++ b/dist/css/theme.default.ui.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
@@ -24,69 +24,40 @@ xxl: 1920px
 
 /* truncate single line of text and adds … */
 
-@layer settings {
-/* INTERFACE TOKENS */
+@layer theme.default {
+/* DEFAULT THEME: UI */
 
 /*
-  The decisions layer. Every token here is named for what it's FOR (an
-  element, a component, or a shared meaning) and answers "what does this
-  thing use by default". Tokens named for what they ARE (--sm1, --base-500,
-  --bold) are scale tokens and live in settings.tokens.css. That's the
-  whole split: a name that mentions a UI thing belongs here; a name that
-  labels a step on a scale belongs there.
+  Tokens here are one abstraction level above raw tokens
+  They define styling for elements, components, or a shared style.
 
   Values, in order of preference:
-  1. Another interface token, when the meaning is shared
-     (--input-border-color: var(--ui-border-color)).
-  2. A scale token, when the value should follow the system scales
-     (--fieldset-padding: var(--sm3)).
-  3. A raw value, only where following the scales would be wrong:
-     content (separator strings, icon URLs), geometry tuned to one
-     control (--toggle-width), or element-relative measures that track
-     the element's own type instead of the page (em heading spacing).
-     The test: "if a theme retuned the scales, should this follow?"
-
-  Deliberate deviations from these defaults live in a theme file
-  (see theme.default.css).
+  1. Another ui token, when the meaning is shared
+     `--input-border-color: var(--ui-border-color)`
+  2. A raw token: `--fieldset-padding: var(--sm3)`
+  3. A raw value, only when it's not supposed to match a raw token
+     or when it's relative to the the element's own value (em heading spacing).
+
+  Part of the default theme (see theme.default.css); don't edit it,
+  override from your own theme (see theme.starter.css).
 */
 
 :root {
   /* Color scheme (light/dark), toggled by the .theme-light / .theme-dark
-     classes below. Unrelated to theme files, which are full themes. */
+     classes below. */
   color-scheme: light dark;
 
   --ui-border-color: light-dark(var(--base-200), var(--base-500));
-  /* Also consumed by the --shadow-* scale in settings.tokens.css: the one
-     reference between the files that runs upward, so shadows can switch
-     with the color scheme. Raw alpha colors: the palettes have no alpha
-     steps. */
+  /* Also used by the --shadow-*  in theme.default.tokens.css, The one reference
+     between the files that runs upward, so shadows can switch with the color
+     scheme. Raw alpha colors: the palettes have no alpha steps. */
   --ui-shadow-color: light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.6));
 
-  /* Keyboard focus ring (consumed by :focus-visible in global.a11y.css).
-     Raw 2px on purpose: an accessibility affordance that shouldn't move
-     when a theme retunes the decorative border scale. */
+  /* Keyboard focus ring (used by :focus-visible in global.a11y.css).
+     Raw 2px on purpose: an accessibility shouldn't change with the theme. */
   --focus-ring-color: light-dark(var(--primary-500), var(--primary-400));
   --focus-ring-width: 2px;
   --focus-ring-offset: 2px;
-
-  /* Semantic feedback aliases over the raw feedback palettes.
-     Prefer these in components and themes; a theme can restyle feedback by
-     overriding the aliases without touching the raw scales. */
-  --success-100: var(--yes-100);
-  --success-200: var(--yes-200);
-  --success-300: var(--yes-300);
-  --success-400: var(--yes-400);
-  --success-500: var(--yes-500);
-  --danger-100: var(--no-100);
-  --danger-200: var(--no-200);
-  --danger-300: var(--no-300);
-  --danger-400: var(--no-400);
-  --danger-500: var(--no-500);
-  --warning-100: var(--maybe-100);
-  --warning-200: var(--maybe-200);
-  --warning-300: var(--maybe-300);
-  --warning-400: var(--maybe-400);
-  --warning-500: var(--maybe-500);
 }
 
 :root.theme-light {
@@ -110,10 +81,7 @@ xxl: 1920px
   --input-border-width: var(--border-sm);
   --input-border-color: var(--ui-border-color);
   --input-border-radius: var(--radius-md);
-  --input-border-color-invalid: light-dark(
-    var(--danger-500),
-    var(--danger-400)
-  );
+  --input-border-color-invalid: light-dark(var(--no-500), var(--no-400));
 
   /* Gap under a label that precedes its control */
   --label-spacing: var(--xs1);
@@ -128,16 +96,16 @@ xxl: 1920px
   --meter-height: var(--sm1);
   --meter-border-radius: var(--radius-md);
   --meter-track-color: var(--primary-100);
-  --meter-low-color: var(--danger-400);
-  --meter-medium-color: var(--warning-400);
-  --meter-high-color: var(--success-400);
+  --meter-low-color: var(--no-400);
+  --meter-medium-color: var(--maybe-400);
+  --meter-high-color: var(--yes-400);
 
   --progress-height: var(--sm1);
   --progress-color: var(--primary-500);
   --progress-track-color: var(--primary-100);
   --progress-border-radius: var(--radius-md);
 
-  /* select's chevron, applied as a mask painted with the text color;
+  /* select's chevron, applied as a mask using  text color;
      any url() works here, data URL or file */
   --select-icon-size: var(--sm3);
   --select-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");
@@ -152,9 +120,8 @@ xxl: 1920px
   --dialog-backdrop-color: var(--base-950);
   --dialog-backdrop-opacity: var(--o-4);
 
-  /* details: same surface as dialog by default, on purpose but
-     independently overridable. Spacing is the gap between an open
-     summary and its content. */
+  /* details: same as dialog by default, on purpose, to be  independently
+     overridable. Spacing is the gap between an open summary and its content. */
   --details-padding: var(--sm1);
   --details-spacing: var(--xs3);
   --details-border-width: var(--border-sm);
@@ -268,7 +235,7 @@ xxl: 1920px
 
   /* ins: background stays light in both light/dark modes */
   --ins-color: var(--base-950);
-  --ins-background-color: var(--success-200);
+  --ins-background-color: var(--yes-200);
 
   --marker-color: var(--highlight-500);
 
@@ -321,20 +288,14 @@ xxl: 1920px
     var(--primary-600),
     var(--primary-500)
   );
-  --badge-success-color: light-dark(var(--success-500), var(--base-0));
-  --badge-success-background-color: light-dark(
-    var(--success-100),
-    var(--success-500)
-  );
-  --badge-danger-color: light-dark(var(--danger-500), var(--base-0));
-  --badge-danger-background-color: light-dark(
-    var(--danger-100),
-    var(--danger-500)
-  );
-  --badge-warning-color: light-dark(var(--warning-500), var(--base-950));
+  --badge-success-color: light-dark(var(--yes-500), var(--base-0));
+  --badge-success-background-color: light-dark(var(--yes-100), var(--yes-500));
+  --badge-danger-color: light-dark(var(--no-500), var(--base-0));
+  --badge-danger-background-color: light-dark(var(--no-100), var(--no-500));
+  --badge-warning-color: light-dark(var(--maybe-500), var(--base-950));
   --badge-warning-background-color: light-dark(
-    var(--warning-100),
-    var(--warning-500)
+    var(--maybe-100),
+    var(--maybe-500)
   );
 }
 
@@ -447,7 +408,7 @@ xxl: 1920px
 :root {
   --field-spacing: var(--xs1);
   --field-hint-color: light-dark(var(--base-400), var(--base-500));
-  --field-error-color: light-dark(var(--danger-500), var(--danger-300));
+  --field-error-color: light-dark(var(--no-500), var(--no-300));
   /*Field's hint/error position. Use `static` to reflow under, use `absolute`
   (and leave enough space below) if you don't want any shift on errors */
   --field-message-position: static;
@@ -552,7 +513,7 @@ xxl: 1920px
     var(--primary-600),
     var(--primary-400)
   );
-  --pricingCard-check-color: light-dark(var(--success-500), var(--success-400));
+  --pricingCard-check-color: light-dark(var(--yes-500), var(--yes-400));
 }
 
 /* Read Progress Bar */
diff --git a/dist/css/theme.starter.css b/dist/css/theme.starter.css
new file mode 100644
index 00000000..2a75fd9b
--- /dev/null
+++ b/dist/css/theme.starter.css
@@ -0,0 +1,71 @@
+/*! mCSS v1.3.0 | MIT | https://mcss.dev */
+/*
+SETTINGS MEDIA QUERIES
+
+https://github.com/argyleink/open-props/blob/main/src/props.media.css
+https://open-props.style/#media-queries
+
+Can't use var() inside media queries 🤦‍♂️
+https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
+so breakpoints are not in theme.default.tokens.css
+
+xxs: 240px
+xs: 360px
+sm: 480px
+md: 768px
+lg: 1024px
+xl: 1440px
+xxl: 1920px
+*/
+
+/* https://github.com/postcss/postcss-mixins */
+
+/* Example */
+
+/* truncate single line of text and adds … */
+
+/* STARTER USER THEME */
+
+/*
+  A theme is a file of token overrides, plus optional style rules for what
+  tokens can't express. This file is where your theme starts: import it
+  from your own entry point after the default theme:
+
+    @import url(./framework/mcss.css);
+    @import url(./framework/theme.default.css);
+    @import url(./theme.starter.css);
+
+  MAKE SURE you put all your overrides inside `@layer theme.user`
+
+  Guidelines:
+
+  - Override values in `theme.default.tokens.css` for low level stuff
+    like colors, sizes, fonts, etc.
+  - For UI related stuff like button radius or component specific styles,
+    override values in `theme.default.ui.css`
+  - Add your own rules if a token can't do what you need (pseudo-elements,
+  nth-child,, text-decoration, etc.)
+  - Don't use !important. If you need to, you're doing something wrong.
+    Email me and I'll help you out.
+  - For a full swappable theme, look at `theme.wireframe.css` to see
+    how it's done.
+*/
+
+/* Pin the layer order before declaring into it: priority is set by
+   first declaration, so this file slots correctly even if it loads
+   before mcss.css. */
+@layer base, elements, global, components, theme.default, theme.user, external, helpers;
+
+@layer theme.user {
+  :root {
+    /* A new palette usually gets you 80% of the way:              */
+    /* --base-0: #fff;                                             */
+    /* --primary-500: rebeccapurple;                               */
+    /* Then reach for ui and component tokens as needed:           */
+    /* --heading-font: Georgia, serif;                             */
+    /* --card-border-radius: 0;                                    */
+    /* A theme may also add tokens the framework doesn't ship,     */
+    /* e.g. a second accent, and use them in its own style rules:  */
+    /* --secondary-500: teal;                                      */
+  }
+}
diff --git a/dist/css/theme.wireframe.css b/dist/css/theme.wireframe.css
index c8195b5c..102a4660 100644
--- a/dist/css/theme.wireframe.css
+++ b/dist/css/theme.wireframe.css
@@ -7,7 +7,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
@@ -30,10 +30,24 @@ xxl: 1920px
   A hand-drawn wireframe theme: grayscale palette, rounded type, wobbly
   borders, paper-cutout shadows, and a traced-twice pencil stroke on
   cards and buttons. Mostly token overrides; the style rules at the
-  bottom cover what tokens can't express. See theme.default.css for how
-  themes work and how to activate one.
+  bottom cover what tokens can't express.
+
+  A full theme is an entry that composes the default theme and overrides
+  on top. This file contains ONLY this theme's deviations; everything it
+  doesn't mention comes from theme.default.css, which the @import below
+  makes the browser load alongside this file. The rules here land in
+  `theme.user`, which wins over the default theme's `theme.default`
+  layer. Activate exactly one theme entry from your own entry point
+  (see theme.default.css).
 */
 
+/* Pin the layer order before anything else in this file: priority is
+   set by first declaration, so this theme slots correctly even if it
+   loads before mcss.css. */
+@layer base, elements, global, components, theme.default, theme.user, external, helpers;
+
+@import url(./theme.default.css);
+
 /* Registered so it computes on the element that declares it and then
    inherits as a plain integer: a card and its media resolve the SAME
    seed and can derive matching corners. Property registrations are
@@ -44,7 +58,7 @@ xxl: 1920px
   initial-value: 1;
 }
 
-@layer theme {
+@layer theme.user {
   :root {
     /* COLORS: everything goes grayscale, including the primary scale */
 
@@ -98,7 +112,9 @@ xxl: 1920px
        Comic Sans ships on macOS and Windows, Chalkboard SE on iOS,
        casual is the Android generic. */
 
-    --text: 'Comic Sans MS', 'Chalkboard SE', Chalkboard, 'Comic Neue', 'Segoe Print', 'Bradley Hand', casual, cursive;
+    --text:
+      "Comic Sans MS", "Chalkboard SE", Chalkboard, "Comic Neue", "Segoe Print",
+      "Bradley Hand", casual, cursive;
     --display: var(--text);
     --heading-font: var(--text);
     --heading-weight: var(--bold);
@@ -157,7 +173,10 @@ xxl: 1920px
        against paper, not one gray against another. */
 
     --toggle-track-color-checked: light-dark(var(--base-800), var(--base-200));
-    --avatar-status-dot-color-online: light-dark(var(--base-800), var(--base-200));
+    --avatar-status-dot-color-online: light-dark(
+      var(--base-800),
+      var(--base-200)
+    );
 
     /* WAYFINDING STAYS CRISP: the focus ring is not part of the sketch,
        and --marker-color is already highlighter yellow. */
@@ -273,8 +292,7 @@ xxl: 1920px
        Corner pattern mirrors --wobble-2 (short/long alternation). */
     .card,
     .card_media {
-      border-radius:
-        calc(9px + sin(var(--sketch-seed) * 9.1) * 2px)
+      border-radius: calc(9px + sin(var(--sketch-seed) * 9.1) * 2px)
         calc(105px + sin(var(--sketch-seed) * 4.7) * 18px)
         calc(7px + sin(var(--sketch-seed) * 3.1) * 2px)
         calc(120px + sin(var(--sketch-seed) * 5.5) * 18px) /
@@ -286,13 +304,10 @@ xxl: 1920px
 
     /* Flush media bleeds to the card's top edge only */
     .card_media-flush {
-      border-radius:
-        calc(9px + sin(var(--sketch-seed) * 9.1) * 2px)
-        calc(105px + sin(var(--sketch-seed) * 4.7) * 18px)
-        0 0 /
+      border-radius: calc(9px + sin(var(--sketch-seed) * 9.1) * 2px)
+        calc(105px + sin(var(--sketch-seed) * 4.7) * 18px) 0 0 /
         calc(115px + sin(var(--sketch-seed) * 5.9) * 18px)
-        calc(8px + sin(var(--sketch-seed) * 7.7) * 2px)
-        0 0;
+        calc(8px + sin(var(--sketch-seed) * 7.7) * 2px) 0 0;
     }
 
     .card::after,
@@ -300,8 +315,7 @@ xxl: 1920px
       rotate: calc(sin(var(--sketch-seed) * 7.3) * 0.6deg);
       translate: calc(sin(var(--sketch-seed) * 3.7) * 1.5px)
         calc(cos(var(--sketch-seed) * 5.3) * 1.5px);
-      border-radius:
-        calc(100px + sin(var(--sketch-seed) * 5.1) * 20px)
+      border-radius: calc(100px + sin(var(--sketch-seed) * 5.1) * 20px)
         calc(8px + sin(var(--sketch-seed) * 2.3) * 3px)
         calc(110px + sin(var(--sketch-seed) * 4.9) * 20px)
         calc(9px + sin(var(--sketch-seed) * 4.3) * 3px) /
diff --git a/dist/mcss.components.css b/dist/mcss.components.css
index fb1ee6c4..e26d7f63 100644
--- a/dist/mcss.components.css
+++ b/dist/mcss.components.css
@@ -20,7 +20,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
@@ -772,7 +772,7 @@ li + li::before {
 /* Inline composition: fields and buttons on one wrapping row
    (newsletter signup, search bar…). Mix .fieldRow_field onto each field:
    fieldRow never reaches into the field block itself, it only sets the
-   --field-message-position interface token so hints and errors overlay
+   --field-message-position ui token so hints and errors overlay
    below the row instead of pushing bottom-aligned buttons out of line.
    Leave a little vertical room under the row for them. */
 .fieldRow {
@@ -1900,7 +1900,7 @@ li + li::before {
 
 @layer components {
 .toggle {
-  /* Themable via the --toggle-* tokens in settings.ui.css */
+  /* Themable via the --toggle-* tokens in theme.default.ui.css */
   --toggle-w: var(--toggle-width);
   --toggle-h: var(--toggle-height);
   --toggle-bd: var(--toggle-border-width);
diff --git a/dist/mcss.css b/dist/mcss.css
index 40ca879c..57823470 100644
--- a/dist/mcss.css
+++ b/dist/mcss.css
@@ -1,18 +1,15 @@
 /*! mCSS v1.3.0 | MIT | https://mcss.dev */
 
-@layer settings, base, elements, global, components, theme, helpers;
+@layer base, elements, global, components, theme.default, theme.user, external, helpers;
+@layer base, elements, global, components, theme.default, theme.user, external, helpers;
 /*
   mCSS framework entry point.
 
-  The framework lives in named cascade layers, declared here in priority
-  order (later wins). The layer name, not import order, decides priority.
-  Anything a consumer writes OUTSIDE these layers beats the framework by
-  default, with one exception: helpers use !important, and important layered
-  declarations beat unlayered CSS. Helpers are element-level overrides that
-  win everywhere, like inline styling.
+  mCSS recreates the ITCSS specificity strategy using modern CSS layers.
+  Anything outside these layers has higher specificity, except helpers which use
+  `!important` to override everything, by design.
 */
 
-/* Build-time only (@custom-media + mixin definitions, no runtime output) */
 /*
 SETTINGS MEDIA QUERIES
 
@@ -21,7 +18,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
@@ -37,5392 +34,5379 @@ xxl: 1920px
 
 /* truncate single line of text and adds … */
 
-/* Settings */
-
-@layer settings{
-
-/* SETTINGS TOKENS */
-
 /*
-Can't use var() inside media queries, so breakpoints are hard coded in
-settings.media-queries.css
+  Your theme is not imported here, but at the same level as mCSS:
 
-xxs: 240px xs: 360px sm: 480px md: 768px lg: 1024px xl: 1440px xxl: 1920px
-*/
+    @import url(./framework/mcss.css);
+    @import url(./framework/theme.default.css);
 
-/*
+  See the default theme for how to create your own.
+*/
 
-• Dimensions (Margin, Padding, Width, Height)
-• Aspect Ratios
+/* Reset & Normalize */
 
-• Font Families
-• Font Size
-• Font Weight
+@layer base{
 
-• Letter Spacing
-• Line Height
+/* RESET */
 
-• Colors
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
 
-• Box shadows
-• Border radius
-• Border width
-• Opacity
+/*
+Immediately jump any animation to the end point
+Remove transitions & fixed background attachment
 */
+@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;
+  }
+}
 
-:root {
-  /* GLOBALS */
+:where(:not(dialog)) {
+  margin: 0;
+}
 
-  /* DIMENSIONS */
+/* Allow percentage-based heights */
+/* See elements.sectioning.css for default body styling */
+html,
+body {
+  min-height: 100%;
+}
+}
 
-  /* Sizes */
+/* Global styles for HTML elements and their abstractions */
+/* https://developer.mozilla.org/en-US/docs/Web/HTML/Element */
+@layer elements{
 
-  --xs1: 4px;
-  --xs2: 8px;
-  --xs3: 12px;
+/* SECTIONING ROOT */
 
-  --sm1: 16px;
-  --sm2: 20px;
-  --sm3: 24px;
+body {
+  /* line-sizing is a CSSWG draft with no browser support yet; kept as intent
+     for consistent line-spacing once it ships. */
+  line-sizing: normal;
+  /* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */
+  -webkit-text-size-adjust: none;
+     -moz-text-size-adjust: none;
+          text-size-adjust: none;
+  background-color: var(--body-background-color);
+  color: var(--text-color);
+  font-family: var(--text);
+  line-height: var(--body-line-height);
 
-  --md1: 28px;
-  --md2: 32px;
-  --md3: 36px;
+  /* for elements like dialog etc. that require scrolling turned off */
+  &:has(.body-is-locked) {
+    overflow: hidden;
+  }
+}
 
-  --lg1: 40px;
-  --lg2: 44px;
-  --lg3: 48px;
+/* CONTENT SECTIONING ELEMENTS */
 
-  --xl1: 56px;
-  --xl2: 64px;
-  --xl3: 80px;
+address {
+  /* moved to elements.text.css where most people would assume it is */
+}
 
-  --xxl1: 96px;
-  --xxl2: 112px;
-  --xxl3: 128px;
+article {
+}
 
-  --mega1: 160px;
-  --mega2: 192px;
-  --mega3: 224px;
+aside {
+}
 
-  --giga1: 256px;
-  --giga2: 288px;
-  --giga3: 320px;
+footer {
+}
 
-  --tera1: 384px;
-  --tera2: 480px;
-  --tera3: 520px;
+header {
+}
 
-  /* Aspect Ratios */
-  --ar-square: 1;
-  --ar-landscape: 4/3;
-  --ar-portrait: 3/4;
-  --ar-widescreen: 16/9;
-  --ar-golden: 1.618/1;
+/* Technically headings (h1, h2, h3, etc.) should be here, but I think it makes more sense to keep them in the elements.text file */
 
-  /* TYPOGRAPHY */
-  /* See also elements.text & help.text */
+hgroup {
+}
 
-  /* Font Families */
-  /* Local font stacks - More options @ https://modernfontstacks.com */
-  --display:
-    Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, ui-sans-serif,
-    sans-serif;
-  --text: ui-sans-serif, system-ui, sans-serif;
-  --mono:
-    Dank Mono, Inconsolata, Fira Mono, SF Mono, Monaco, Droid Sans Mono,
-    Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono,
-    ui-monospace, monospace;
+main {
+}
 
-  /* Font Sizes */
-  /* Create your own sizes @ https://typescale.com */
-  --text-xs: 0.694rem;
-  --text-sm: 0.833rem;
-  --text-md: 1rem;
-  --text-lg: 1.2rem;
-  --text-xl: 1.44rem;
-  --display-sm: 1.728rem;
-  --display-md: 2.074rem;
-  --display-lg: 2.488rem;
-  --display-xl: 2.986rem; /* h1 */
-  --display-mega: 3.583rem;
-  --display-giga: 4.299rem;
+nav {
+}
 
-  /* Heading font sizes are decisions, not scale steps: they map each
-     heading level onto this scale. See --heading-font-size-* in
-     settings.ui.css. */
+section {
+}
 
-  /* Font Weights */
-  --extra-light: 200;
-  --light: 300;
-  --book: 400;
-  --semi-bold: 600;
-  --bold: 700;
-  --black: 900;
+search {
+}
+}
+@layer elements{
 
-  /* Letter Spacing */
-  --tracking-sm: -0.05em;
-  --tracking-md: 0.025em;
-  --tracking-lg: 0.05em;
-  --tracking-xl: 0.075em;
-  --tracking-xxl: 0.15em;
+/* ELEMENTS TEXT */
 
-  /* Line Height */
-  --leading-xs: 1;
-  --leading-sm: 1.15;
-  --leading-md: 1.375;
-  --leading-lg: 1.5;
-  --leading-xl: 1.75;
-  --leading-xxl: 2;
+::selection {
+  color: var(--selection-color);
+  background-color: var(--selection-background-color);
+}
 
-  /* COLORS */
-  /* Make your own palettes programmatically: https://www.tints.dev */
+:where(a, u, ins, abbr) {
+  text-underline-offset: 2px;
+}
 
-  /* Base */
+a {
+  font-weight: var(--link-font-weight);
+  color: var(--link-color);
+  &:where(:hover) {
+    color: var(--link-color-hover);
+    -webkit-text-decoration: none;
+    text-decoration: none;
+  }
+}
 
-  --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;
+address {
+  width: max-content;
+  max-width: 100%;
+  padding: var(--sm1) var(--sm3);
+  font-style: normal;
+  background-color: light-dark(var(--base-50), var(--base-900));
+  border: var(--xs2) solid transparent;
+  border-image: 8
+    repeating-linear-gradient(
+      -45deg,
+      var(--no-500) 0,
+      var(--no-500) var(--xs2),
+      transparent 0,
+      transparent calc(var(--xs2) * 2),
+      var(--primary-500) 0,
+      var(--primary-500) calc(var(--xs2) * 3),
+      transparent 0,
+      transparent calc(var(--xs2) * 4)
+    );
+}
 
-  /* Primary */
+abbr {
+  position: relative;
+  cursor: help;
+  &:after {
+    position: relative;
+    top: calc(var(--xs1) * -1);
+    width: var(--sm1);
+    height: var(--sm1);
+    display: inline-block;
+    content: "";
+    background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='circle-help'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M9.09%209a3%203%200%200%201%205.83%201c0%202-3%203-3%203'/%3E%3Cpath%20d='M12%2017h.01'/%3E%3C/svg%3E");
+    background-size: contain;
+  }
+  &:hover:before {
+    width: max-content;
+    max-width: 400px;
+    position: absolute;
+    left: 50%; /* deliberately physical: symmetric centering, paired with translate(-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);
+  }
+}
 
-  --primary-50: #f0f9ff;
-  --primary-100: #e0f2fe;
-  --primary-200: #bae6fd;
-  --primary-300: #7dd3fc;
-  --primary-400: #38bdf8;
-  --primary-500: #0ea5e9;
-  --primary-600: #0284c7;
-  --primary-700: #0369a1;
-  --primary-800: #075985;
-  --primary-900: #0c4a6e;
-  --primary-950: #082f49;
-
-  /* Secondary and/or Highlight goes here */
-
-  /* Feedback */
-
-  --yes-100: #d5f6e8;
-  --yes-200: #afebd4;
-  --yes-300: #7adbbd;
-  --yes-400: #46c4a0;
-  --yes-500: #13886d;
-
-  --no-100: #ffe4e6;
-  --no-200: #fecdd3;
-  --no-300: #fda4af;
-  --no-400: #fb7185;
-  --no-500: #e11d48;
-
-  --maybe-100: #fff7d6;
-  --maybe-200: #fff0b3;
-  --maybe-300: #ffd64a;
-  --maybe-400: #ffc220;
-  --maybe-500: #f9a007;
-
-  /* Highlight (text marker) */
-
-  --highlight-500: #ffee00;
+b {
+}
 
-  /* GRADIENTS */
+blockquote {
+  position: relative;
+  margin-bottom: var(--prose-spacing);
+  padding-block: var(--blockquote-padding-block);
+  /* extra inline-start room for the accent bar */
+  padding-inline: var(--blockquote-padding-inline);
+  font-style: italic;
+  background-color: var(--blockquote-background-color);
+  border-radius: var(--blockquote-border-radius);
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    inset-inline-start: 0;
+    width: var(--blockquote-accent-width);
+    height: 100%;
+    border-start-start-radius: var(--blockquote-border-radius);
+    border-end-start-radius: var(--blockquote-border-radius);
+    background: var(--blockquote-accent-color);
+  }
 
-  --gradient-primary: linear-gradient(
-    90deg,
-    var(--primary-950) 0%,
-    var(--primary-400) 100%
-  );
+  p {
+    &:first-child::before {
+      content: open-quote;
+    }
+    &:last-child {
+      margin-bottom: 0;
+      &::after {
+        content: close-quote;
+      }
+    }
+  }
+}
 
-  /* BORDERS */
+br {
+}
 
-  --border-sm: 1px;
-  --border-md: 2px;
-  --border-lg: 4px;
-  --border-xl: 8px;
-  --border-xxl: 12px;
+cite {
+  font-style: italic;
+}
 
-  --radius-sm: 3px;
-  --radius-md: 5px;
-  --radius-lg: 8px;
-  --radius-xl: 12px;
-  --radius-xxl: 16px;
-  --radius-round: 1e5px;
+code,
+var,
+kbd {
+  font-family: var(--mono);
+  font-size: 0.9em;
+  font-style: normal;
+  color: var(--text-code-muted-color);
+}
 
-  /* DROP SHADOWS  */
+:is(code, var, kbd):not(h1 *, h2 *, h3 *, h4 *, h5 *, h6 *, pre *) {
+  padding: 0.15em 0.3em;
+  color: var(--text-code-color);
+  background-color: var(--text-code-background-color);
+  border-radius: var(--radius-sm);
+}
 
-  --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);
+data {
+}
 
-  /* OPACITY */
+dl {
+}
 
-  --o-0: 0; /* overkill for consistency */
-  --o-1: 0.2;
-  --o-2: 0.4;
-  --o-3: 0.6;
-  --o-4: 0.8;
-  --o-5: 1;
+dt {
+  font-weight: var(--bold);
+}
 
-  /* Z-INDEX */
+dd {
+}
 
-  --z-bottom: -1000000000;
-  --z-0: 0; /* overkill for consistency */
-  --z-1: 10;
-  --z-2: 20;
-  --z-3: 30;
-  --z-4: 40;
-  --z-5: 50;
-  --z-top: 1000000000;
+dd + dt {
+  margin-top: 0.5em;
+}
 
-  /* TRANSITIONS */
+del {
+  text-decoration-color: var(--no-500);
+  text-decoration-style: wavy;
+}
 
-  --transition: 220ms ease-in-out;
-  --transition-fast: 100ms ease-in-out;
+dfn {
 }
+
+em {
 }
 
-@layer settings{
+/* figcaption and figure are in elements.media.css */
 
-/* INTERFACE TOKENS */
+/* Technically, headings should be in elements.sectioning but I'm guessing that's where most people would expect this to be */
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3,
+h4,
+.h4,
+h5,
+.h5,
+h6,
+.h6 {
+  overflow-wrap: break-word; /* Avoid text overflows */
+  text-wrap: balance;
+}
 
-/*
-  The decisions layer. Every token here is named for what it's FOR (an
-  element, a component, or a shared meaning) and answers "what does this
-  thing use by default". Tokens named for what they ARE (--sm1, --base-500,
-  --bold) are scale tokens and live in settings.tokens.css. That's the
-  whole split: a name that mentions a UI thing belongs here; a name that
-  labels a step on a scale belongs there.
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3,
+h4,
+.h4 {
+  font-family: var(--heading-font);
+  font-weight: var(--heading-weight);
+  letter-spacing: var(--heading-letter-spacing);
+}
 
-  Values, in order of preference:
-  1. Another interface token, when the meaning is shared
-     (--input-border-color: var(--ui-border-color)).
-  2. A scale token, when the value should follow the system scales
-     (--fieldset-padding: var(--sm3)).
-  3. A raw value, only where following the scales would be wrong:
-     content (separator strings, icon URLs), geometry tuned to one
-     control (--toggle-width), or element-relative measures that track
-     the element's own type instead of the page (em heading spacing).
-     The test: "if a theme retuned the scales, should this follow?"
-
-  Deliberate deviations from these defaults live in a theme file
-  (see theme.default.css).
-*/
+h1,
+.h1 {
+  margin-bottom: var(--heading-spacing-h1);
+  font-size: var(--heading-font-size-h1);
+  line-height: var(--heading-line-height-h1);
+}
 
-:root {
-  /* Color scheme (light/dark), toggled by the .theme-light / .theme-dark
-     classes below. Unrelated to theme files, which are full themes. */
-  color-scheme: light dark;
+h2,
+.h2 {
+  margin-bottom: var(--heading-spacing-h2);
+  font-size: var(--heading-font-size-h2);
+  line-height: var(--heading-line-height-h2);
+}
 
-  --ui-border-color: light-dark(var(--base-200), var(--base-500));
-  /* Also consumed by the --shadow-* scale in settings.tokens.css: the one
-     reference between the files that runs upward, so shadows can switch
-     with the color scheme. Raw alpha colors: the palettes have no alpha
-     steps. */
-  --ui-shadow-color: light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.6));
+h3,
+.h3 {
+  margin-bottom: var(--heading-spacing-h3);
+  font-size: var(--heading-font-size-h3);
+  line-height: var(--heading-line-height-h3);
+}
 
-  /* Keyboard focus ring (consumed by :focus-visible in global.a11y.css).
-     Raw 2px on purpose: an accessibility affordance that shouldn't move
-     when a theme retunes the decorative border scale. */
-  --focus-ring-color: light-dark(var(--primary-500), var(--primary-400));
-  --focus-ring-width: 2px;
-  --focus-ring-offset: 2px;
+h4,
+.h4 {
+  margin-bottom: var(--heading-spacing-h4);
+  font-size: var(--heading-font-size-h4);
+  line-height: var(--heading-line-height-h4);
+}
 
-  /* Semantic feedback aliases over the raw feedback palettes.
-     Prefer these in components and themes; a theme can restyle feedback by
-     overriding the aliases without touching the raw scales. */
-  --success-100: var(--yes-100);
-  --success-200: var(--yes-200);
-  --success-300: var(--yes-300);
-  --success-400: var(--yes-400);
-  --success-500: var(--yes-500);
-  --danger-100: var(--no-100);
-  --danger-200: var(--no-200);
-  --danger-300: var(--no-300);
-  --danger-400: var(--no-400);
-  --danger-500: var(--no-500);
-  --warning-100: var(--maybe-100);
-  --warning-200: var(--maybe-200);
-  --warning-300: var(--maybe-300);
-  --warning-400: var(--maybe-400);
-  --warning-500: var(--maybe-500);
+h5,
+.h5 {
+  margin-bottom: var(--heading-spacing-h5);
+  font-size: var(--heading-font-size-h5);
+  line-height: var(--heading-line-height-h5);
 }
 
-:root.theme-light {
-  color-scheme: light;
+h6,
+.h6 {
+  margin-bottom: var(--heading-spacing-h6);
+  font-size: var(--heading-font-size-h6);
+  line-height: var(--heading-line-height-h6);
 }
 
-:root.theme-dark {
-  color-scheme: dark;
+/* h1—h3 with a h2—h4 subheading right after gets the consecutive margin
+   (must come after the per-level rules: it ties them on specificity, so
+   source order decides) */
+:where(h1, h2, h3):has(+ :is(h2, h3, h4)) {
+  margin-bottom: var(--heading-spacing-consecutive);
 }
 
-/* HTML ELEMENTS */
+hr {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 0;
+  border-style: solid;
+  border-width: var(--border-sm) 0 0;
+  color: var(--ui-border-color);
+  overflow: visible;
+  &::after {
+    content: var(--hr-content);
+    padding: 0 var(--xs1);
+    line-height: 1;
+    letter-spacing: var(--tracking-sm);
+    background-color: var(--body-background-color);
+  }
+}
 
-:root {
-  accent-color: var(--primary-500);
+:where(hr):has(+ :is(p)) {
+  margin-bottom: var(--prose-spacing);
+}
 
-  --body-background-color: light-dark(var(--base-0), var(--base-950));
-  --body-line-height: var(--leading-lg);
+i {
+}
 
-  --input-height: var(--md3);
-  --input-padding: var(--xs3);
-  --input-border-width: var(--border-sm);
-  --input-border-color: var(--ui-border-color);
-  --input-border-radius: var(--radius-md);
-  --input-border-color-invalid: light-dark(
-    var(--danger-500),
-    var(--danger-400)
-  );
-
-  /* Gap under a label that precedes its control */
-  --label-spacing: var(--xs1);
-
-  --fieldset-padding: var(--sm3);
-  --fieldset-border-width: var(--border-sm);
-  --fieldset-border-color: var(--ui-border-color);
-  --fieldset-border-radius: var(--radius-lg);
-
-  /* meter: low/medium/high map to the even-less-good, suboptimum, and
-     optimum pseudo-elements */
-  --meter-height: var(--sm1);
-  --meter-border-radius: var(--radius-md);
-  --meter-track-color: var(--primary-100);
-  --meter-low-color: var(--danger-400);
-  --meter-medium-color: var(--warning-400);
-  --meter-high-color: var(--success-400);
-
-  --progress-height: var(--sm1);
-  --progress-color: var(--primary-500);
-  --progress-track-color: var(--primary-100);
-  --progress-border-radius: var(--radius-md);
-
-  /* select's chevron, applied as a mask painted with the text color;
-     any url() works here, data URL or file */
-  --select-icon-size: var(--sm3);
-  --select-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");
-
-  --dialog-min-width: var(--tera1);
-  --dialog-max-width: var(--tera3);
-  --dialog-padding: var(--lg1) var(--md1);
-  --dialog-border-width: var(--border-sm);
-  --dialog-border-color: light-dark(var(--base-200), var(--base-800));
-  --dialog-background-color: light-dark(var(--base-50), var(--base-900));
-  --dialog-border-radius: var(--radius-lg);
-  --dialog-backdrop-color: var(--base-950);
-  --dialog-backdrop-opacity: var(--o-4);
-
-  /* details: same surface as dialog by default, on purpose but
-     independently overridable. Spacing is the gap between an open
-     summary and its content. */
-  --details-padding: var(--sm1);
-  --details-spacing: var(--xs3);
-  --details-border-width: var(--border-sm);
-  --details-border-color: light-dark(var(--base-200), var(--base-800));
-  --details-background-color: light-dark(var(--base-50), var(--base-900));
-  --details-border-radius: var(--radius-lg);
-  --details-icon-size: var(--sm3);
-  /* Marker icon, applied as a mask painted with the text color; any
-     url() works here, data URL or file */
-  --details-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");
-
-  --table-padding: var(--xs2) var(--sm1);
-  --table-border-width: var(--border-sm);
-  --table-border-color: light-dark(var(--base-100), var(--base-700));
-  --table-border-radius: var(--radius-md);
-  --table-background-color: none;
-  /* Gap between the table and its caption */
-  --table-caption-spacing: var(--xs3);
-  /* Gap between a figure's content and caption on either side */
-  --figcaption-spacing: var(--xs2);
-
-  /* Text */
-
-  --heading-font: var(--display);
-  --heading-weight: var(--black);
-  --heading-letter-spacing: normal; /* (e.g. -0.02em or var(--tracking-sm)) */
-
-  --heading-font-size-h1: clamp(
-    var(--display-md),
-    1.269rem + 2.682vw,
-    var(--display-xl)
-  ); /* 2.074rem → 2.986rem */
-  --heading-font-size-h2: clamp(
-    var(--display-sm),
-    1.057rem + 2.235vw,
-    var(--display-lg)
-  ); /* 1.728rem → 2.488rem */
-  --heading-font-size-h3: clamp(
-    var(--text-xl),
-    0.881rem + 1.865vw,
-    var(--display-md)
-  ); /* 1.44rem → 2.074rem */
-  --heading-font-size-h4: clamp(
-    var(--text-lg),
-    0.734rem + 1.553vw,
-    var(--display-sm)
-  ); /* 1.2rem → 1.728rem */
-  --heading-font-size-h5: clamp(
-    var(--text-lg),
-    0.988rem + 0.706vw,
-    var(--text-xl)
-  ); /* 1.2rem → 1.44rem */
-  --heading-font-size-h6: clamp(
-    var(--text-md),
-    0.824rem + 0.588vw,
-    var(--text-lg)
-  ); /* 1rem → 1.2rem */
-
-  --heading-line-height: var(--leading-sm);
-  --heading-line-height-h1: var(--heading-line-height);
-  --heading-line-height-h2: var(--heading-line-height);
-  --heading-line-height-h3: var(--heading-line-height);
-  --heading-line-height-h4: var(--leading-md);
-  --heading-line-height-h5: var(--leading-md);
-  --heading-line-height-h6: var(--leading-md);
-
-  /* Headings bottom margin  */
-  --heading-spacing-h1: 0.4em;
-  --heading-spacing-h2: 0.4em;
-  --heading-spacing-h3: 0.4em;
-  --heading-spacing-h4: 0.4em;
-  --heading-spacing-h5: 0.4em;
-  --heading-spacing-h6: 0.4em;
-  /* Any h1 before h2, h2 before h3, h3 before h4.  */
-  --heading-spacing-consecutive: 0.3em;
-
-  --text-color: light-dark(var(--base-950), var(--base-200));
-  --link-font-weight: var(--semi-bold);
-  --link-color: light-dark(var(--primary-600), var(--primary-400));
-  --link-color-hover: var(--primary-500);
-
-  --text-code-color: light-dark(var(--primary-600), var(--primary-400));
-  --text-code-background-color: light-dark(
-    var(--primary-100),
-    var(--primary-900)
-  );
-  /* when code inline styling doesn't apply (inside headings and pre) */
-  --text-code-muted-color: light-dark(var(--base-500), var(--base-300));
-
-  --pre-border-radius: var(--radius-md);
-  /* matching the 0.9em of inline code */
-  --pre-font-size: 0.9rem;
-
-  --blockquote-padding-block: var(--sm1);
-  --blockquote-padding-inline: var(--md1) var(--sm3);
-  --blockquote-background-color: light-dark(
-    var(--primary-50),
-    var(--primary-900)
-  );
-  --blockquote-border-radius: var(--radius-md);
-  --blockquote-accent-width: var(--xs2);
-  --blockquote-accent-color: linear-gradient(
-    var(--primary-800),
-    var(--primary-500)
-  );
-
-  /* .prose related stuff in GLOBAL */
+ins {
+  padding: 0.15em 0.3em;
+  color: var(--ins-color);
+  background-color: var(--ins-background-color);
+  border-radius: var(--radius-sm);
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  &::before {
+    content: "+ ";
+  }
+}
 
-  /* Optional centered label on <hr>, e.g. "***" or a dingbat */
-  --hr-content: "";
+mark {
+  padding: 0.15em 0.5em;
+  background: var(--marker-color);
+  border-radius: 1em 0;
+}
 
-  /* ins: background stays light in both light/dark modes */
-  --ins-color: var(--base-950);
-  --ins-background-color: var(--success-200);
+menu {
+}
 
-  --marker-color: var(--highlight-500);
+:where(ol, ul) {
+  list-style-type: none;
+  padding: 0;
+}
 
-  --selection-color: light-dark(var(--base-950), var(--base-0));
-  --selection-background-color: light-dark(
-    var(--primary-200),
-    var(--primary-700)
-  );
+li {
 }
 
-/* GLOBAL */
+p {
+}
 
-:root {
-  /* Mobile-first: tighter gutters on small screens, 24px from --md up */
-  --grid-column-gap: var(--sm1);
-  --grid-row-gap: var(--sm1);
-  @media (width >= 768px) {
-    --grid-column-gap: var(--sm3);
-    --grid-row-gap: var(--sm3);
-  }
+pre {
+  font-family: var(--mono);
+  font-size: var(--pre-font-size);
+  white-space: pre-wrap; /* override overflow default */
+  border-radius: var(--pre-border-radius);
+}
 
-  --wrap-spacing: var(--sm1);
-  --wrap-md-spacing: var(--sm3);
-  --wrap-lg-spacing: 0;
-  /* Widths are measures: ch tracks the text size, so raw on purpose. */
-  --wrap-width-sm: minmax(0, 55ch);
-  --wrap-width-md: minmax(0, 70ch);
-  --wrap-width-lg: minmax(0, 900px);
-  --wrap-width: var(--wrap-width-md);
+q {
+  /* see: elements.text.quotes.css */
+  font-style: italic;
+}
 
-  --layout-content-width: 70ch;
-  --layout-aside-width: 245px;
-  --layout-toc-width: 1fr;
+s {
+  text-decoration-color: light-dark(var(--base-950), var(--base-50));
+  text-decoration-style: wavy;
+}
 
-  --prose-spacing: var(--sm1);
+samp {
 }
 
-/* COMPONENTS */
+small {
+}
 
-/* Badge */
+strong {
+}
 
-:root {
-  --badge-font-size: var(--text-sm);
-  --badge-border-radius: var(--radius-md);
-  --badge-color: var(--base-0);
-  --badge-background-color: light-dark(var(--base-700), var(--base-600));
+sub {
+  line-height: 1;
+}
 
-  --badge-primary-color: var(--base-0);
-  --badge-primary-background-color: light-dark(
-    var(--primary-600),
-    var(--primary-500)
-  );
-  --badge-success-color: light-dark(var(--success-500), var(--base-0));
-  --badge-success-background-color: light-dark(
-    var(--success-100),
-    var(--success-500)
-  );
-  --badge-danger-color: light-dark(var(--danger-500), var(--base-0));
-  --badge-danger-background-color: light-dark(
-    var(--danger-100),
-    var(--danger-500)
-  );
-  --badge-warning-color: light-dark(var(--warning-500), var(--base-950));
-  --badge-warning-background-color: light-dark(
-    var(--warning-100),
-    var(--warning-500)
-  );
+sup {
+  line-height: 1;
 }
 
-/* Button */
-/* (Button defaults and primary button colors) */
+time {
+}
+}
+@layer elements{
 
-:root {
-  /* Optical minimums, deliberately off the spacing scale */
-  --bt-min-width: 101px;
-  --bt-min-width-md: 123px;
-  --bt-min-width-lg: 133px;
+/*
+  This is what user agents are supposed to be doing for quotes,
+  according to https://html.spec.whatwg.org/multipage/rendering.html#quotes
 
-  --bt-font-size: var(--text-sm);
-  --bt-font-size-lg: var(--text-md);
-  --bt-font-weight: var(--semi-bold);
+  https://github.com/jensimmons/cssremedy/blob/master/css/quotes.css
+*/
 
-  --bt-color: var(--text-color);
-  --bt-color-hover: light-dark(var(--text-color), var(--base-0));
+: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' } /* “ ” ‘ ’ */
 
-  --bt-background-color: light-dark(var(--base-0), var(--base-800));
-  --bt-background-color-hover: light-dark(var(--base-50), var(--base-900));
 
-  --bt-border-color: var(--ui-border-color);
-  --bt-border-width: var(--border-sm);
-  --bt-border-radius: var(--radius-lg);
-  --bt-border-radius-lg: var(--radius-xl);
+:root:lang(uz),       :not(:lang(uz)) > :lang(uz)             { quotes: '\201c' '\201d' '\2019' '\2018' } /* “ ” ’ ‘ */
 
-  --bt-outline-color-hover: light-dark(var(--base-950), var(--base-0));
-  --bt-outline-background-color-hover: light-dark(
-    rgb(0 0 0 / 0.1),
-    rgb(255 255 255 / 0.1)
-  );
-  --bt-outline-border-color: light-dark(var(--base-950), var(--base-0));
-  --bt-outline-border-color-hover: light-dark(var(--base-950), var(--base-0));
 
-  --bt-primary-color: var(--base-0);
-  --bt-primary-color-hover: var(--base-0);
-  --bt-primary-background-color: var(--primary-600);
-  --bt-primary-background-color-hover: var(--primary-500);
-  --bt-primary-border-color: var(--primary-600);
-  --bt-primary-border-color-hover: var(--primary-600);
-}
+: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' } /* “ ” “ ” */
 
-/* Avatar */
 
-:root {
-  --avatar-color: var(--base-0);
-  --avatar-background-color: var(--base-400);
-  --avatar-border-color: light-dark(var(--base-0), var(--base-500));
-  --avatar-border-width: var(--border-sm);
-  --avatar-radius: var(--radius-round);
-  --avatar-status-dot-color-offline: var(--base-300);
-  --avatar-status-dot-color-online: var(--yes-400);
-}
+:root: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' } /* ” “ ’ ‘ */
 
-/* Banner */
 
-:root {
-  --banner-color: var(--base-0);
-  --banner-background-color: light-dark(var(--primary-600), var(--primary-800));
-}
+: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' } /* ” ” ’ ’ */
 
-/* Breadcrumbs */
 
-:root {
-  --breadcrumbs-separator: "/";
-  --breadcrumbs-separator-color: light-dark(var(--base-300), var(--base-600));
-  --breadcrumbs-color: light-dark(var(--base-500), var(--base-400));
-  --breadcrumbs-color-current: var(--text-color);
-}
+:root: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' } /* „ “ ‘ ‘ */
 
-/* Card */
 
-:root {
-  --card-spacing: var(--sm3);
-  --card-color: var(--text-color);
-  --card-secondary-text-color: light-dark(var(--base-400), var(--base-500));
-  --card-bg-color: light-dark(var(--base-100), var(--base-900));
-  --card-border-radius: var(--radius-lg);
-  --card-border-color: var(--ui-border-color);
-  --card-border-width: var(--border-sm);
-  --card-shadow: var(--shadow-md);
-  --card-shadow-hover: var(--shadow-xl);
-  --card-loading-bg: light-dark(var(--base-200), var(--base-900));
-  /* Default media aspect ratio; the Card component pins it inline only
-     when its aspectRatio prop is passed */
-  --card-aspect-ratio: var(--ar-golden);
-}
+: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' } /* „ “ „ “ */
 
-/* Toggle */
 
-:root {
-  /* Drawn-control geometry, deliberately off the scales */
-  --toggle-width: 50px;
-  --toggle-height: 28px;
-  --toggle-border-width: 2px;
-  --toggle-track-color: light-dark(var(--base-300), var(--base-700));
-  --toggle-track-color-checked: var(--yes-400);
-  --toggle-thumb-color: var(--body-background-color);
-}
+:root: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(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' } /* „ “ ‚ ‘ */
 
-/* FAQ */
 
-:root {
-  --faq-spacing: var(--xs3);
-}
+:root:lang(ka),       :not(:lang(ka)) > :lang(ka)             { quotes: '\201e' '\201c' '\00ab' '\00bb' } /* „ “ « » */
 
-/* Field */
 
-:root {
-  --field-spacing: var(--xs1);
-  --field-hint-color: light-dark(var(--base-400), var(--base-500));
-  --field-error-color: light-dark(var(--danger-500), var(--danger-300));
-  /*Field's hint/error position. Use `static` to reflow under, use `absolute`
-  (and leave enough space below) if you don't want any shift on errors */
-  --field-message-position: static;
-}
+:root:lang(bs),       :not(:lang(bs)) > :lang(bs)             { quotes: '\201e' '\201d' '\2018' '\2019' } /* „ ” ‘ ’ */
 
-/* FeatureItem */
 
-:root {
-  --featureItem-icon-box-size: var(--lg3);
-  --featureItem-icon-size: var(--sm3);
-  --featureItem-icon-color: light-dark(var(--primary-600), var(--primary-300));
-  --featureItem-icon-background-color: light-dark(
-    var(--primary-100),
-    var(--primary-900)
-  );
-  --featureItem-icon-border-radius: var(--radius-lg);
-}
+: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' } /* „ ” ‚ ’ */
 
-/* Footer */
 
-:root {
-  --footer-background-color: light-dark(var(--primary-950), var(--base-950));
-  --footer-text-color: light-dark(var(--base-0), var(--base-200));
-  --footer-border-width: var(--border-md);
-  --footer-border-color: light-dark(transparent, var(--base-700));
-  --footer-link-color: light-dark(var(--base-0), var(--base-200));
-  --footer-link-color-hover: light-dark(var(--primary-200), var(--base-0));
-}
+:root:lang(nmg),      :not(:lang(nmg)) > :lang(nmg)           { quotes: '\201e' '\201d' '\00ab' '\00bb' } /* „ ” « » */
+:root:lang(ro),       :not(:lang(ro)) > :lang(ro)             { quotes: '\201e' '\201d' '\00ab' '\00bb' } /* „ ” « » */
+:root:lang(pl),       :not(:lang(pl)) > :lang(pl)             { quotes: '\201e' '\201d' '\00ab' '\00bb' } /* „ ” « » */
 
-/* Header */
 
-:root {
-  --header-height: var(--xl1);
-  --header-padding: var(--sm1);
-  @media (width >= 768px) {
-    --header-height: var(--xl2);
-    --header-padding: var(--sm3);
-  }
-  --header-background-color: light-dark(var(--base-0), var(--base-950));
+:root:lang(hu),       :not(:lang(hu)) > :lang(hu)             { quotes: '\201e' '\201d' '\00bb' '\00ab' } /* „ ” » « */
 
-  /* The mobile menu is an always-dark  by design */
-  --header-menu-background-color: var(--base-950);
-  --header-menu-color: var(--base-0);
-  --header-menu-color-current: var(--primary-400);
-  --header-menu-secondary-color: var(--base-300);
-  --header-menu-border-color: var(--base-500);
-}
 
-/* Hero */
+:root: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 {
-  --hero-radius: var(--radius-xl);
-  --hero-content-padding: var(--md3);
-  --hero-actions-spacing: var(--lg3);
-  --hero-pagination-dot: var(--sm1);
-  --hero-pagination-dot-color: var(--base-0);
-  --hero-pagination-dot-active-color: var(--primary-600);
-  --hero-pagination-opacity: var(--o-4);
-}
 
-/* Pagination */
-
-:root {
-  --pagination-size: var(--md3);
-  --pagination-border-radius: var(--radius-md);
-  --pagination-color: var(--text-color);
-  --pagination-color-current: var(--base-0);
-  --pagination-background-color-current: light-dark(
-    var(--primary-600),
-    var(--primary-500)
-  );
-  --pagination-background-color-hover: light-dark(
-    var(--base-100),
-    var(--base-800)
-  );
-}
+:root:lang(dua),      :not(:lang(dua)) > :lang(dua)           { quotes: '\00ab' '\00bb' '\2018' '\2019' } /* « » ‘ ’ */
+:root:lang(ksf),      :not(:lang(ksf)) > :lang(ksf)           { quotes: '\00ab' '\00bb' '\2018' '\2019' } /* « » ‘ ’ */
+:root:lang(rw),       :not(:lang(rw)) > :lang(rw)             { quotes: '\00ab' '\00bb' '\2018' '\2019' } /* « » ‘ ’ */
+:root:lang(nn),       :not(:lang(nn)) > :lang(nn)             { quotes: '\00ab' '\00bb' '\2018' '\2019' } /* « » ‘ ’ */
+:root:lang(nb),       :not(:lang(nb)) > :lang(nb)             { quotes: '\00ab' '\00bb' '\2018' '\2019' } /* « » ‘ ’ */
 
-/* PrevNext */
 
-:root {
-  --prevNext-border-color: var(--ui-border-color);
-  --prevNext-border-radius: var(--radius-lg);
-  --prevNext-border-color-hover: var(--link-color);
-  --prevNext-label-color: light-dark(var(--base-400), var(--base-500));
-}
+:root:lang(ast),      :not(:lang(ast)) > :lang(ast)           { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
+:root:lang(bm),       :not(:lang(bm)) > :lang(bm)             { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
+:root:lang(br),       :not(:lang(br)) > :lang(br)             { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
+:root:lang(ca),       :not(:lang(ca)) > :lang(ca)             { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
+:root:lang(dyo),      :not(:lang(dyo)) > :lang(dyo)           { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
+:root:lang(el),       :not(:lang(el)) > :lang(el)             { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
+:root:lang(es),       :not(:lang(es)) > :lang(es)             { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
+:root:lang(ewo),      :not(:lang(ewo)) > :lang(ewo)           { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
+:root:lang(mg),       :not(:lang(mg)) > :lang(mg)             { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
+:root:lang(mua),      :not(:lang(mua)) > :lang(mua)           { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
+:root:lang(sg),       :not(:lang(sg)) > :lang(sg)             { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
+:root:lang(it),       :not(:lang(it)) > :lang(it)             { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
+:root:lang(kab),      :not(:lang(kab)) > :lang(kab)           { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
+:root:lang(kk),       :not(:lang(kk)) > :lang(kk)             { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
+:root:lang(pt-PT),    :not(:lang(pt-PT)) > :lang(pt-PT)       { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
+:root:lang(nnh),      :not(:lang(nnh)) > :lang(nnh)           { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
+:root:lang(sq),       :not(:lang(sq)) > :lang(sq)             { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
 
-/* Notice */
 
-:root {
-  --notice-spacing: var(--sm1);
-  --notice-text-color: light-dark(var(--base-950), var(--base-0));
-  --notice-background-color: light-dark(var(--base-50), var(--base-800));
-  --notice-border-color: light-dark(var(--base-200), var(--base-500));
-  --notice-border-width: var(--border-sm);
-  --notice-border-radius: var(--radius-lg);
-}
+:root:lang(bas),      :not(:lang(bas)) > :lang(bas)           { quotes: '\00ab' '\00bb' '\201e' '\201c' } /* « » „ “ */
+:root:lang(be),       :not(:lang(be)) > :lang(be)             { quotes: '\00ab' '\00bb' '\201e' '\201c' } /* « » „ “ */
+:root:lang(ky),       :not(:lang(ky)) > :lang(ky)             { quotes: '\00ab' '\00bb' '\201e' '\201c' } /* « » „ “ */
+:root:lang(sah),      :not(:lang(sah)) > :lang(sah)           { quotes: '\00ab' '\00bb' '\201e' '\201c' } /* « » „ “ */
+:root:lang(ru),       :not(:lang(ru)) > :lang(ru)             { quotes: '\00ab' '\00bb' '\201e' '\201c' } /* « » „ “ */
+:root:lang(uk),       :not(:lang(uk)) > :lang(uk)             { quotes: '\00ab' '\00bb' '\201e' '\201c' } /* « » „ “ */
 
-/* Pricing */
 
-:root {
-  --pricingCard-highlight-border-color: light-dark(
-    var(--primary-600),
-    var(--primary-400)
-  );
-  --pricingCard-check-color: light-dark(var(--success-500), var(--success-400));
-}
+:root:lang(zgh),      :not(:lang(zgh)) > :lang(zgh)           { quotes: '\00ab' '\00bb' '\201e' '\201d' } /* « » „ ” */
+:root:lang(shi),      :not(:lang(shi)) > :lang(shi)           { quotes: '\00ab' '\00bb' '\201e' '\201d' } /* « » „ ” */
+:root:lang(shi-Latn), :not(:lang(shi-Latn)) > :lang(shi-Latn) { quotes: '\00ab' '\00bb' '\201e' '\201d' } /* « » „ ” */
 
-/* Read Progress Bar */
 
-:root {
-  --readProgressBar-height: var(--xs1);
-  --readProgressBar-color: linear-gradient(
-    90deg,
-    var(--primary-600) 0%,
-    var(--primary-400) 100%
-  );
-}
+:root:lang(am),       :not(:lang(am)) > :lang(am)             { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */
+:root:lang(az-Cyrl),  :not(:lang(az-Cyrl)) > :lang(az-Cyrl)   { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */
+:root:lang(fa),       :not(:lang(fa)) > :lang(fa)             { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */
+:root:lang(fr-CH),    :not(:lang(fr-CH)) > :lang(fr-CH)       { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */
+:root:lang(gsw),      :not(:lang(gsw)) > :lang(gsw)           { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */
+:root:lang(jgo),      :not(:lang(jgo)) > :lang(jgo)           { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */
+:root:lang(kkj),      :not(:lang(kkj)) > :lang(kkj)           { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */
+:root:lang(mzn),      :not(:lang(mzn)) > :lang(mzn)           { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */
 
-/* Section */
 
-:root {
-  --section-spacing: var(--xl3);
-  --section-header-spacing: var(--lg3);
-  --section-eyebrow-color: light-dark(var(--primary-600), var(--primary-400));
-  --section-lede-color: light-dark(var(--base-500), var(--base-400));
-  --section-filled-background-color: light-dark(
-    var(--base-50),
-    var(--base-900)
-  );
-  --section-primary-background-color: light-dark(
-    var(--primary-600),
-    var(--primary-900)
-  );
-  --section-primary-text-color: var(--base-0);
-  --section-primary-link-color: var(--primary-100);
-  --section-primary-link-color-hover: var(--base-0);
-  --section-primary-eyebrow-color: var(--primary-200);
-  --section-primary-lede-color: var(--primary-100);
-}
+:root:lang(fr),       :not(:lang(fr)) > :lang(fr)             { quotes: '\00ab' '\00bb' '\00ab' '\00bb' } /* « » « » */
+:root:lang(hy),       :not(:lang(hy)) > :lang(hy)             { quotes: '\00ab' '\00bb' '\00ab' '\00bb' } /* « » « » */
+:root:lang(yav),      :not(:lang(yav)) > :lang(yav)           { quotes: '\00ab' '\00bb' '\00ab' '\00bb' } /* « » « » */
 
-/* Testimonial */
 
-:root {
-  --testimonial-role-color: light-dark(var(--base-400), var(--base-500));
+: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{
 
-/* Tags */
+/* ELEMENTS MEDIA/EMBEDDED */
 
-:root {
-  --tags-padding: var(--xs2);
-  --tags-font-size: var(--text-sm);
-  --tags-color: light-dark(var(--base-500), var(--base-400));
-  --tags-background-color: light-dark(var(--base-100), var(--base-800));
-  --tags-background-color-hover: light-dark(var(--base-200), var(--base-950));
-  --tags-radius: var(--radius-md);
+/* better media defaults */
+audio,
+canvas,
+embed,
+iframe,
+img,
+object,
+picture,
+svg,
+video {
+  display: block;
+  vertical-align: middle; /* removes strange space-below if display changes */
+  max-width: 100%;
 }
 
-/* Tiles has no tokens here: its column count is set by container queries in
-   component.tiles.css since custom properties don't work inside @container.
-*/
-
-/* TOC */
+img,
+svg,
+video,
+canvas {
+  height: auto; /* maintain intrinsic aspect ratios when `max-width` is applied. */
+}
 
-:root {
-  --toc-color: var(--link-color);
-  --toc-color-hover: var(--link-color-hover);
-  --toc-spacing: var(--xs1);
-  --toc-indentation: var(--xs3);
-  --toc-icon-size: var(--sm1);
+audio {
+  width: 100%; /* remove default 300px */
+  max-width: var(--tera1);
 }
+
+audio:not([controls]) {
+  display: none;
 }
 
-/*
-  No theme is imported here, ever: the framework only declares the empty
-  `theme` slot above. A theme (theme.*.css) is part of YOUR css: a swappable
-  theme of token overrides plus optional style rules that you activate, at
-  most one, from your own entry point (see _global.css for this site's).
-  Theme files self-layer (@layer theme inside the file), so wherever that
-  import sits it lands in this slot.
-  None imported = the default look (settings.* holds every default).
-*/
+canvas {
+}
 
-/* Reset & Normalize */
+figcaption {
+  font-style: italic;
+  font-size: var(--text-sm);
+}
 
-@layer base{
+figure {
+  /* caption at bottom or top */
+  &:has(* + figcaption) {
+    figcaption {
+      margin-top: var(--figcaption-spacing);
+    }
+  }
+  &:has(figcaption + *) {
+    figcaption {
+      margin-bottom: var(--figcaption-spacing);
+    }
+  }
+}
 
-/* RESET */
+iframe {
+  border: var(--border-sm) solid var(--ui-border-color);
+}
 
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
+img {
 }
 
-/*
-Immediately jump any animation to the end point
-Remove transitions & fixed background attachment
-*/
-@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;
-  }
+picture {
 }
 
-:where(:not(dialog)) {
-  margin: 0;
+svg {
 }
 
-/* Allow percentage-based heights */
-/* See elements.sectioning.css for default body styling */
-html,
-body {
-  min-height: 100%;
+video {
 }
 }
-
-/* Global styles for HTML elements and their abstractions */
-/* https://developer.mozilla.org/en-US/docs/Web/HTML/Element */
 @layer elements{
 
-/* SECTIONING ROOT */
+/* ELEMENTS TABLE */
 
-body {
-  /* line-sizing is a CSSWG draft with no browser support yet; kept as intent
-     for consistent line-spacing once it ships. */
-  line-sizing: normal;
-  /* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */
-  -webkit-text-size-adjust: none;
-     -moz-text-size-adjust: none;
-          text-size-adjust: none;
-  background-color: var(--body-background-color);
-  color: var(--text-color);
-  font-family: var(--text);
-  line-height: var(--body-line-height);
+caption {
+  caption-side: bottom;
+  margin-top: var(--table-caption-spacing);
+  font-size: var(--text-sm);
+}
 
-  /* for elements like dialog etc. that require scrolling turned off */
-  &:has(.body-is-locked) {
-    overflow: hidden;
-  }
+colgroup {
 }
 
-/* CONTENT SECTIONING ELEMENTS */
+table {
+  border-spacing: 0;
+  border: var(--table-border-width) solid var(--table-border-color);
+  border-radius: var(--table-border-radius);
+  background-color: var(--table-background-color);
+}
 
-address {
-  /* moved to elements.text.css where most people would assume it is */
+th,
+td {
+  text-align: start;
+  padding: var(--table-padding);
+  border-bottom: var(--table-border-width) solid var(--table-border-color);
+  border-inline-start: var(--table-border-width) solid var(--table-border-color);
 }
 
-article {
+tr {
+  th:first-child,
+  td:first-child {
+    border-inline-start-width: 0;
+  }
 }
 
-aside {
+thead {
 }
 
-footer {
+tbody {
+  tr:last-child {
+    th,
+    td {
+      border-bottom-width: 0;
+    }
+  }
 }
 
-header {
+tfoot {
+  th,
+  td {
+    border-top: var(--table-border-width) solid var(--table-border-color);
+    border-bottom-width: 0;
+  }
+}
 }
+@layer elements{
 
-/* Technically headings (h1, h2, h3, etc.) should be here, but I think it makes more sense to keep them in the elements.text file */
+/* ELEMENTS FORM */
 
-hgroup {
+::placeholder {
+  opacity: var(--o-4);
 }
 
-main {
+/* Remove built-in form typography styles */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+  color: var(--text-color);
 }
 
-nav {
+button {
+  color: var(--text-color);
 }
 
-section {
+datalist {
 }
 
-search {
-}
-}
-@layer elements{
+fieldset {
+  border: var(--fieldset-border-width) solid var(--fieldset-border-color);
+  border-radius: var(--fieldset-border-radius);
+  padding: var(--fieldset-padding);
 
-/* ELEMENTS TEXT */
+  ul:has([type="checkbox"], [type="radio"]) {
+    padding-inline-start: 0;
+  }
 
-::selection {
-  color: var(--selection-color);
-  background-color: var(--selection-background-color);
+  > [aria-hidden] {
+    /* legend replacement  */
+    margin-bottom: var(--sm3);
+    font-size: var(--text-lg);
+    grid-column: 1 / -1;
+  }
 }
 
-:where(a, u, ins, abbr) {
-  text-underline-offset: 2px;
+/* Only flag fields the user has actually interacted with */
+:is(input, select, textarea):user-invalid {
+  border-color: var(--input-border-color-invalid);
 }
 
-a {
-  font-weight: var(--link-font-weight);
-  color: var(--link-color);
-  &:where(:hover) {
-    color: var(--link-color-hover);
-    -webkit-text-decoration: none;
-    text-decoration: none;
+input {
+  &:where(:not([type="checkbox"], [type="radio"])) {
+    height: var(--input-height);
+  }
+  &:where(
+    :not([type="color"], [type="file"], [type="reset"], [type="submit"])
+  ) {
+    padding: var(--input-padding);
+  }
+  &:where(:not([type="color"])) {
+    border-radius: var(--input-border-radius);
+  }
+  &:where(:not([type="file"])) {
+    border: var(--input-border-width) solid var(--input-border-color);
+  }
+  &[type="file"] {
+    width: 100%;
+    accent-color: var(--text-color);
+  }
+  &[type="number"] {
+    padding-inline-end: var(--xs1);
   }
 }
 
-address {
-  width: max-content;
-  max-width: 100%;
-  padding: var(--sm1) var(--sm3);
-  font-style: normal;
-  background-color: light-dark(var(--base-50), var(--base-900));
-  border: var(--xs2) solid transparent;
-  border-image: 8
-    repeating-linear-gradient(
-      -45deg,
-      var(--no-500) 0,
-      var(--no-500) var(--xs2),
-      transparent 0,
-      transparent calc(var(--xs2) * 2),
-      var(--primary-500) 0,
-      var(--primary-500) calc(var(--xs2) * 3),
-      transparent 0,
-      transparent calc(var(--xs2) * 4)
-    );
-}
-
-abbr {
-  position: relative;
-  cursor: help;
-  &:after {
-    position: relative;
-    top: calc(var(--xs1) * -1);
-    width: var(--sm1);
-    height: var(--sm1);
-    display: inline-block;
-    content: "";
-    background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='circle-help'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M9.09%209a3%203%200%200%201%205.83%201c0%202-3%203-3%203'/%3E%3Cpath%20d='M12%2017h.01'/%3E%3C/svg%3E");
-    background-size: contain;
-  }
-  &:hover:before {
-    width: max-content;
-    max-width: 400px;
-    position: absolute;
-    left: 50%; /* deliberately physical: symmetric centering, paired with translate(-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);
+label {
+  display: block;
+  &:has(+ :is(input, select, textarea)) {
+    margin-bottom: var(--label-spacing);
   }
 }
 
-b {
+legend {
+  /*  Visually hidden  */
+  /* replaced by fieldset > [aria-hidden] above */
+  position: absolute;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  width: 1px;
+  height: 1px;
+  white-space: nowrap;
 }
 
-blockquote {
-  position: relative;
-  margin-bottom: var(--prose-spacing);
-  padding-block: var(--blockquote-padding-block);
-  /* extra inline-start room for the accent bar */
-  padding-inline: var(--blockquote-padding-inline);
-  font-style: italic;
-  background-color: var(--blockquote-background-color);
-  border-radius: var(--blockquote-border-radius);
-  &::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    inset-inline-start: 0;
-    width: var(--blockquote-accent-width);
-    height: 100%;
-    border-start-start-radius: var(--blockquote-border-radius);
-    border-end-start-radius: var(--blockquote-border-radius);
-    background: var(--blockquote-accent-color);
+meter {
+  width: 100%;
+  background: var(--meter-track-color);
+  border-radius: var(--meter-border-radius);
+  height: var(--meter-height);
+  /* webkit */
+  &::-webkit-meter-bar {
+    background: var(--meter-track-color);
   }
-
-  p {
-    &:first-child::before {
-      content: open-quote;
-    }
-    &:last-child {
-      margin-bottom: 0;
-      &::after {
-        content: close-quote;
-      }
-    }
+  &::-webkit-meter-bar,
+  &::-webkit-meter-optimum-value,
+  &::-webkit-meter-suboptimum-value,
+  &::-webkit-meter-even-less-good-value {
+    height: var(--meter-height);
+    border: none;
+    border-radius: var(--meter-border-radius);
+  }
+  &::-webkit-meter-even-less-good-value {
+    background: var(--meter-low-color);
+  }
+  &::-webkit-meter-suboptimum-value {
+    background: var(--meter-medium-color);
+  }
+  &::-webkit-meter-optimum-value {
+    background: var(--meter-high-color);
+  }
+  /* mozilla */
+  &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
+    background: var(--meter-low-color);
+  }
+  &:-moz-meter-sub-optimum::-moz-meter-bar {
+    background: var(--meter-medium-color);
+  }
+  &:-moz-meter-optimum::-moz-meter-bar {
+    background: var(--meter-high-color);
   }
 }
 
-br {
-}
-
-cite {
-  font-style: italic;
+optgroup {
 }
 
-code,
-var,
-kbd {
-  font-family: var(--mono);
-  font-size: 0.9em;
-  font-style: normal;
-  color: var(--text-code-muted-color);
+option {
 }
 
-:is(code, var, kbd):not(h1 *, h2 *, h3 *, h4 *, h5 *, h6 *, pre *) {
-  padding: 0.15em 0.3em;
-  color: var(--text-code-color);
-  background-color: var(--text-code-background-color);
-  border-radius: var(--radius-sm);
+output {
 }
 
-data {
+progress {
+  appearance: none;
+  width: 100%;
+  /* mozilla */
+  height: var(--progress-height);
+  background: var(--progress-track-color);
+  border-radius: var(--progress-border-radius);
+  border: none;
+  &::-moz-progress-bar {
+    background: var(--progress-color);
+    border-radius: var(--progress-border-radius);
+  }
+  /* webkit */
+  &::-webkit-progress-bar {
+    width: 100%;
+    background: var(--progress-track-color);
+    border-radius: var(--progress-border-radius);
+    height: var(--progress-height);
+  }
+  &::-webkit-progress-value {
+    background: var(--progress-color);
+    border-radius: var(--progress-border-radius);
+  }
 }
 
-dl {
-}
+select {
+  /* derived, stays local */
+  --split: calc(100% - var(--select-icon-size));
+  display: flex;
+  appearance: none;
+  height: var(--input-height);
+  padding: var(--xs1) calc(var(--input-padding) + var(--md1)) var(--xs1)
+    var(--input-padding);
+  border: var(--input-border-width) solid var(--input-border-color);
+  border-radius: var(--input-border-radius);
+  background: linear-gradient(
+    to right,
+    var(--body-background-color) 0 var(--split),
+    var(--text-color) var(--split) 100%
+  );
+  mask-image:
+    var(--select-icon),
+    linear-gradient(to right, transparent calc(var(--split) - 1px), red 0),
+    linear-gradient(red 0 0);
+  mask-size: var(--select-icon-size), auto, auto;
+  mask-position:
+    calc(100% - var(--xs1)) center,
+    0 0,
+    0 0;
+  mask-repeat: no-repeat;
+  mask-clip: padding-box, padding-box, border-box;
+  mask-origin: padding-box, padding-box, border-box;
+  mask-composite: add, exclude;
 
-dt {
-  font-weight: var(--bold);
-}
+  /* focus ring comes from the global :focus-visible rule (global.a11y.css) */
 
-dd {
-}
+  &:disabled {
+    --disabled-color: light-dark(
+      hsl(from var(--text-color) h s 70%),
+      hsl(from var(--text-color) h s 40%)
+    );
+    cursor: not-allowed;
+    color: var(--disabled-color);
+    background: linear-gradient(
+      to right,
+      var(--body-background-color) 0 var(--split),
+      var(--disabled-color) var(--split) 100%
+    );
+  }
 
-dd + dt {
-  margin-top: 0.5em;
+  &[multiple] {
+    height: auto;
+    padding: var(--input-padding);
+    background: var(--body-background-color);
+    mask-image: none;
+  }
 }
 
-del {
-  text-decoration-color: var(--danger-500);
-  text-decoration-style: wavy;
+textarea {
+  width: 100%;
+  padding: var(--input-padding);
+  border-radius: var(--input-border-radius);
+  border: var(--input-border-width) solid var(--input-border-color);
+  resize: vertical;
+  &:not([rows]) {
+    min-height: 6em;
+  }
 }
-
-dfn {
 }
+@layer elements{
 
-em {
-}
+/* ELEMENTS INTERACTIVE */
 
-/* figcaption and figure are in elements.media.css */
+dialog {
+  /* body scrolling is stopped by adding .body-is-locked on <dialog> */
+  /* But it can be added to any element. See elements.sectioning.css > body { … }  */
+  min-width: var(--dialog-min-width);
+  max-width: var(--dialog-max-width);
+  padding: var(--dialog-padding);
+  border: var(--dialog-border-width) solid var(--dialog-border-color);
+  background-color: var(--dialog-background-color);
+  border-radius: var(--dialog-border-radius);
 
-/* Technically, headings should be in elements.sectioning but I'm guessing that's where most people would expect this to be */
-h1,
-.h1,
-h2,
-.h2,
-h3,
-.h3,
-h4,
-.h4,
-h5,
-.h5,
-h6,
-.h6 {
-  overflow-wrap: break-word; /* Avoid text overflows */
-  text-wrap: balance;
-}
+  &::backdrop {
+    background: var(--dialog-backdrop-color);
+    opacity: var(--dialog-backdrop-opacity);
+  }
 
-h1,
-.h1,
-h2,
-.h2,
-h3,
-.h3,
-h4,
-.h4 {
-  font-family: var(--heading-font);
-  font-weight: var(--heading-weight);
-  letter-spacing: var(--heading-letter-spacing);
-}
+  [aria-label="close pop-up"] {
+    position: absolute;
+    top: var(--xs3);
+    right: var(
+      --xs3
+    ); /* deliberately physical: close button pinned to a visual corner */
+    background: transparent;
+    border: none;
+    outline: none;
+    cursor: pointer;
+  }
 
-h1,
-.h1 {
-  margin-bottom: var(--heading-spacing-h1);
-  font-size: var(--heading-font-size-h1);
-  line-height: var(--heading-line-height-h1);
+  p:last-of-type {
+    /* in case it's inside a .prose context */
+    margin-bottom: 0;
+  }
 }
 
-h2,
-.h2 {
-  margin-bottom: var(--heading-spacing-h2);
-  font-size: var(--heading-font-size-h2);
-  line-height: var(--heading-line-height-h2);
-}
+details {
+  padding: var(--details-padding);
+  border: var(--details-border-width) solid var(--details-border-color);
+  background-color: var(--details-background-color);
+  border-radius: var(--details-border-radius);
+  cursor: pointer;
 
-h3,
-.h3 {
-  margin-bottom: var(--heading-spacing-h3);
-  font-size: var(--heading-font-size-h3);
-  line-height: var(--heading-line-height-h3);
-}
+  summary {
+    display: flex;
+    justify-content: space-between;
+    font-weight: var(--bold);
+    &::-webkit-details-marker {
+      display: none;
+    }
+    &::after {
+      content: "";
+      width: var(--details-icon-size);
+      height: var(--details-icon-size);
+      /* icon as a mask painted with the text color, so it follows the
+         color scheme (an SVG in background-image can't see currentColor
+         and always renders black) */
+      background-color: currentColor;
+      mask-image: var(--details-icon);
+      mask-size: contain;
+      mask-repeat: no-repeat;
+      transition: transform var(--transition);
+    }
+  }
 
-h4,
-.h4 {
-  margin-bottom: var(--heading-spacing-h4);
-  font-size: var(--heading-font-size-h4);
-  line-height: var(--heading-line-height-h4);
+  &[open] > summary {
+    margin-bottom: var(--details-spacing);
+    &::after {
+      transform: rotate(180deg);
+    }
+  }
+
+  p:last-of-type {
+    /* in case it's inside a .prose context */
+    margin-bottom: 0;
+  }
+}
 }
 
-h5,
-.h5 {
-  margin-bottom: var(--heading-spacing-h5);
-  font-size: var(--heading-font-size-h5);
-  line-height: var(--heading-line-height-h5);
+/* Global styles */
+
+@layer global{
+/* Unified keyboard focus ring (themable via the --focus-ring-* tokens).
+   Applies everywhere so keyboard users get one consistent treatment. */
+:focus-visible {
+  outline: var(--focus-ring-width) solid var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
 }
 
-h6,
-.h6 {
-  margin-bottom: var(--heading-spacing-h6);
-  font-size: var(--heading-font-size-h6);
-  line-height: var(--heading-line-height-h6);
+/* Skip-to-content link. Place it as the first element in <body>, pointing
+   at the id of your main content; it stays off-screen until focused. */
+.a11y-skipLink {
+  position: fixed;
+  z-index: var(--z-top);
+  inset-block-start: -100vb;
+  inset-inline-start: 0;
+  padding: 0.75em 1.25em;
+  background-color: var(--body-background-color);
+  color: var(--text-color);
 }
 
-/* h1—h3 with a h2—h4 subheading right after gets the consecutive margin
-   (must come after the per-level rules: it ties them on specificity, so
-   source order decides) */
-:where(h1, h2, h3):has(+ :is(h2, h3, h4)) {
-  margin-bottom: var(--heading-spacing-consecutive);
+.a11y-skipLink:focus {
+  inset-block-start: 0;
 }
 
-hr {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 0;
-  border-style: solid;
-  border-width: var(--border-sm) 0 0;
-  color: var(--ui-border-color);
-  overflow: visible;
-  &::after {
-    content: var(--hr-content);
-    padding: 0 var(--xs1);
-    line-height: 1;
-    letter-spacing: var(--tracking-sm);
-    background-color: var(--body-background-color);
-  }
+/* hide in browser but accessible in screen readers */
+.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;
 }
-
-:where(hr):has(+ :is(p)) {
-  margin-bottom: var(--prose-spacing);
 }
 
-i {
-}
+@layer global{
 
-ins {
-  padding: 0.15em 0.3em;
-  color: var(--ins-color);
-  background-color: var(--ins-background-color);
-  border-radius: var(--radius-sm);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  &::before {
-    content: "+ ";
+@keyframes fadeFromOpaque {
+  from {
+    opacity: 1;
   }
 }
 
-mark {
-  padding: 0.15em 0.5em;
-  background: var(--marker-color);
-  border-radius: 1em 0;
-}
-
-menu {
+@keyframes fadeToOpaque {
+  to {
+    opacity: 1;
+  }
 }
 
-:where(ol, ul) {
-  list-style-type: none;
-  padding: 0;
+@keyframes fadeFromTransparent {
+  from {
+    opacity: 0;
+  }
 }
 
-li {
+@keyframes fadeToTransparent {
+  to {
+    opacity: 0;
+  }
 }
-
-p {
 }
 
-pre {
-  font-family: var(--mono);
-  font-size: var(--pre-font-size);
-  white-space: pre-wrap; /* override overflow default */
-  border-radius: var(--pre-border-radius);
+@layer global{
+/* GRID */
+/* Generated by src/tools/generate.global.grid.cjs */
+.grid {
+  display: grid;
+  --grid-tc: repeat(4, 1fr);
+  --grid-cs: 1; /* column start */
+  --grid-ce: -1; /* column end */
+  grid-template-columns: var(--grid-tc);
+  grid-column-gap: var(--grid-column-gap);
+  grid-row-gap: var(--grid-row-gap);
 }
 
-q {
-  /* see: elements.text.quotes.css */
-  font-style: italic;
+.grid-flush {
+  grid-column-gap: 0;
+  grid-row-gap: 0;
 }
 
-s {
-  text-decoration-color: light-dark(var(--base-950), var(--base-50));
-  text-decoration-style: wavy;
-}
+/* DEFAULT */
+.grid > .grid_item { display: block; appearance: none; }
+.grid[col="1"] { --grid-tc: repeat(1, 1fr) }
+.grid[col="2"] { --grid-tc: repeat(2, 1fr) }
+.grid[col="3"] { --grid-tc: repeat(3, 1fr) }
+.grid[col="4"] { --grid-tc: repeat(4, 1fr) }
+.grid[col="5"] { --grid-tc: repeat(5, 1fr) }
+.grid[col="6"] { --grid-tc: repeat(6, 1fr) }
+.grid[col="7"] { --grid-tc: repeat(7, 1fr) }
+.grid[col="8"] { --grid-tc: repeat(8, 1fr) }
+.grid[col="9"] { --grid-tc: repeat(9, 1fr) }
+.grid[col="10"] { --grid-tc: repeat(10, 1fr) }
+.grid[col="11"] { --grid-tc: repeat(11, 1fr) }
+.grid[col="12"] { --grid-tc: repeat(12, 1fr) }
+.grid[col="13"] { --grid-tc: repeat(13, 1fr) }
+.grid[col="14"] { --grid-tc: repeat(14, 1fr) }
+.grid[col="15"] { --grid-tc: repeat(15, 1fr) }
+.grid[col="16"] { --grid-tc: repeat(16, 1fr) }
+.grid[col="17"] { --grid-tc: repeat(17, 1fr) }
+.grid[col="18"] { --grid-tc: repeat(18, 1fr) }
+.grid[col="19"] { --grid-tc: repeat(19, 1fr) }
+.grid[col="20"] { --grid-tc: repeat(20, 1fr) }
+.grid[col="21"] { --grid-tc: repeat(21, 1fr) }
+.grid[col="22"] { --grid-tc: repeat(22, 1fr) }
+.grid[col="23"] { --grid-tc: repeat(23, 1fr) }
+.grid[col="24"] { --grid-tc: repeat(24, 1fr) }
+/* span=start... */
+.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 }
+/* span=...+width, span=...-end */
+.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 }
+/* connect vars */
+.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 }
+/* MD — window >= 768px */
+@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) }
 
-samp {
-}
+  /* span-md=start... */
+  .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 }
 
-small {
-}
+  /* span-md=...+width, span-md=...-end */
+  .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 }
 
-strong {
+  /* connect vars */
+  .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 }
 }
+/* LARGE -  width >= 1024 */
+@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) }
 
-sub {
-  line-height: 1;
-}
+  /* span-lg=start... */
+  .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 }
 
-sup {
-  line-height: 1;
+  /* span-lg=...+width, span-lg=...-end */
+  .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 }
+
+  /* connect vars */
+  .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 }
 }
+/* EXTRA LARGE -  width >= 1440 */
+@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) }
 
-time {
+  /* span-xl=start... */
+  .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 }
+
+  /* span-xl=...+width, span-xl=...-end */
+  .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 }
+
+  /* connect vars */
+  .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 elements{
+
+@layer global{
 
 /*
-  This is what user agents are supposed to be doing for quotes,
-  according to https://html.spec.whatwg.org/multipage/rendering.html#quotes
+  Page-level layout scaffolds. Every variant extends the .layout base:
 
-  https://github.com/jensimmons/cssremedy/blob/master/css/quotes.css
+    <body class="layout layout-sidebar">
+      <header>…</header>
+      <div class="layout_content">
+        <aside class="layout_content_aside">…</aside>
+        <main class="layout_content_main">…</main>
+      </div>
+      <footer>…</footer>
+    </body>
+
+  Widths come from the layout tokens in theme.default.ui.css:
+  --layout-content-width, --layout-aside-width, --layout-toc-width.
 */
 
-: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' } /* “ ” ‘ ’ */
+/* App shell: header / content / footer, with a sticky footer. Base for
+   every variant below, also usable on its own. */
+.layout {
+  display: flex;
+  flex-direction: column;
+  width: 100vw;
+  min-height: 100vh;
 
+  .layout_content {
+    flex: 1;
+  }
+}
 
-:root:lang(uz),       :not(:lang(uz)) > :lang(uz)             { quotes: '\201c' '\201d' '\2019' '\2018' } /* “ ” ’ ‘ */
+/* The main column is a size container: container-responsive components
+   (Tiles) pick their column count from it instead of the viewport.
+   Named, so custom rules can target it with @container main. */
+.layout_content_main {
+  container: main / inline-size;
+}
 
+/* Single centered reading column: articles, blog posts, legal pages. */
+.layout-centered {
+  .layout_content {
+    display: grid;
+    gap: var(--sm3);
+    grid-template-columns: 1fr minmax(0, var(--layout-content-width)) 1fr;
+    margin-top: var(--lg1);
+    margin-bottom: var(--sm1);
+    @media (width >= 768px) {
+      margin-top: var(--xl3);
+      margin-bottom: var(--md3);
+      gap: var(--md3);
+    }
+  }
 
-: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' } /* “ ” “ ” */
+  .layout_content_main {
+    grid-column: 2;
+  }
+}
 
+/* Aside + main: settings pages, simple docs, blogs with a nav column.
+   Single column below --md, aside following source order. */
+.layout-sidebar {
+  .layout_content {
+    @media (width >= 768px) {
+      display: grid;
+      grid-template-columns: var(--layout-aside-width) minmax(0, 1fr);
+    }
+  }
 
-: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' } /* ” “ ’ ‘ */
+  .layout_content_main {
+    padding: var(--sm2);
+    @media (width >= 768px) {
+      grid-row: 1;
+      grid-column: 2;
+      padding: var(--lg1) var(--md2);
+    }
+  }
 
+  .layout_content_aside {
+    @media (width >= 768px) {
+      grid-row: 1;
+      grid-column: 1;
+      padding: var(--lg1) var(--md3);
+    }
+  }
+}
 
-: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' } /* ” ” ’ ’ */
+/* Moves the aside to the reading end ("end", not "right": columns follow
+   the writing direction). Compose with .layout-sidebar. */
+.layout-sidebar-end {
+  .layout_content {
+    @media (width >= 768px) {
+      grid-template-columns: minmax(0, 1fr) var(--layout-aside-width);
+    }
+  }
 
+  .layout_content_main {
+    @media (width >= 768px) {
+      grid-column: 1;
+    }
+  }
 
-: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' } /* „ “ ‘ ‘ */
+  .layout_content_aside {
+    @media (width >= 768px) {
+      grid-column: 2;
+    }
+  }
+}
 
+/* Documentation shell: nav aside + main + table of contents. One column
+   below --md with both asides hidden (put that navigation in your header
+   menu), nav + main from --md, TOC joins from --lg. */
+.layout-docs {
+  .layout_content {
+    @media (width >= 768px) {
+      display: grid;
+      grid-template-columns: var(--layout-aside-width) minmax(0, 1fr);
+    }
+    @media (width >= 1024px) {
+      grid-template-columns:
+        var(--layout-aside-width)
+        minmax(0, var(--layout-content-width))
+        var(--layout-toc-width);
+    }
+  }
 
-: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' } /* „ “ „ “ */
+  .layout_content_main {
+    padding: var(--sm2);
+    @media (width >= 768px) {
+      grid-row: 1;
+      grid-column: 2;
+      padding: var(--lg1) var(--md2);
+    }
+  }
 
+  .layout_content_aside {
+    display: none;
+    @media (width >= 768px) {
+      display: block;
+      grid-row: 1;
+      grid-column: 1;
+      padding: var(--lg1) var(--md3);
+    }
+  }
 
-: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(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' } /* „ “ ‚ ‘ */
+  /* Compose on the second aside: class="layout_content_aside
+     layout_content_aside-toc". Same specificity as the base element rule,
+     so these declarations must stay after it. */
+  .layout_content_aside-toc {
+    @media (width >= 768px) {
+      display: none;
+    }
+    @media (width >= 1024px) {
+      display: block;
+      grid-row: 1;
+      grid-column: 3;
+      padding: var(--lg1) var(--md3);
+    }
+  }
+}
 
+/* Two equal panes, stacked below --md: auth screens, "image + content"
+   landings. Panes are the direct children of .layout_content. */
+.layout-split {
+  .layout_content {
+    display: grid;
+    @media (width >= 768px) {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+}
 
-:root:lang(ka),       :not(:lang(ka)) > :lang(ka)             { quotes: '\201e' '\201c' '\00ab' '\00bb' } /* „ “ « » */
+/* Full-viewport cover with centered content: landing, 404, coming soon.
+   dvh so mobile browser chrome never hides the content. */
+.layout-cover {
+  min-height: 100dvh;
 
+  .layout_content {
+    display: grid;
+    place-items: center;
+  }
+}
+}
 
-:root:lang(bs),       :not(:lang(bs)) > :lang(bs)             { quotes: '\201e' '\201d' '\2018' '\2019' } /* „ ” ‘ ’ */
+@layer global{
 
+/* PROSE - Default style for text content */
 
-: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' } /* „ ” ‚ ’ */
+@scope (.prose) to (.not-prose) {
+  /* Component blocks mirror this heading-adjacent margin themselves in their
+     own files (.notice in component.notice.css; site-only .expressive-code,
+     .canIUse in their unlayered site CSS files): prose never reaches into
+     another component's classes. */
+  :is(p, ul, ol, blockquote, table):has(+ :is(h1, h2, h3, h4)) {
+    margin-bottom: calc(var(--prose-spacing) * 2);
+  }
 
+  p,
+  ul,
+  ol,
+  dl {
+    margin-bottom: var(--prose-spacing);
+    p,
+    ul,
+    ol,
+    dl {
+      margin-bottom: 0;
+    }
+  }
 
-:root:lang(nmg),      :not(:lang(nmg)) > :lang(nmg)           { quotes: '\201e' '\201d' '\00ab' '\00bb' } /* „ ” « » */
-:root:lang(ro),       :not(:lang(ro)) > :lang(ro)             { quotes: '\201e' '\201d' '\00ab' '\00bb' } /* „ ” « » */
-:root:lang(pl),       :not(:lang(pl)) > :lang(pl)             { quotes: '\201e' '\201d' '\00ab' '\00bb' } /* „ ” « » */
+  ul,
+  ol {
+    ul,
+    ol {
+      margin-inline-start: 0;
+      padding-inline-start: var(--sm2);
+    }
+    li {
+      margin-bottom: 0.5em;
+      &::marker {
+        color: light-dark(var(--base-300), var(--base-600));
+      }
+    }
+  }
 
+  ul {
+    margin-inline-start: var(--sm2);
+    list-style-type: "→ ";
+  }
 
-:root:lang(hu),       :not(:lang(hu)) > :lang(hu)             { quotes: '\201e' '\201d' '\00bb' '\00ab' } /* „ ” » « */
+  ol {
+    margin-inline-start: var(--md2);
+    list-style-type: decimal-leading-zero;
+    li::marker {
+      font-size: var(--text-sm);
+    }
+  }
 
+  table {
+    margin-top: var(--md1);
+    margin-bottom: var(--md1);
+  }
+}
+}
 
-: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' } /* ‘ ’ “ ” */
+@layer global{
 
+/* LAYOUT WRAP */
 
-:root:lang(dua),      :not(:lang(dua)) > :lang(dua)           { quotes: '\00ab' '\00bb' '\2018' '\2019' } /* « » ‘ ’ */
-:root:lang(ksf),      :not(:lang(ksf)) > :lang(ksf)           { quotes: '\00ab' '\00bb' '\2018' '\2019' } /* « » ‘ ’ */
-:root:lang(rw),       :not(:lang(rw)) > :lang(rw)             { quotes: '\00ab' '\00bb' '\2018' '\2019' } /* « » ‘ ’ */
-:root:lang(nn),       :not(:lang(nn)) > :lang(nn)             { quotes: '\00ab' '\00bb' '\2018' '\2019' } /* « » ‘ ’ */
-:root:lang(nb),       :not(:lang(nb)) > :lang(nb)             { quotes: '\00ab' '\00bb' '\2018' '\2019' } /* « » ‘ ’ */
+.wrap {
+  display: grid;
+  grid-template-columns: 1fr var(--wrap-width) 1fr;
 
+  > *,
+  > astro-island > *,
+  > astro-slot > *,
+  > astro-static-slot > * {
+    grid-column: 2;
+    padding-inline: var(--wrap-spacing);
+    @media (width >= 768px) {
+      padding-inline: var(--wrap-md-spacing);
+    }
+    @media (width >= 1024px) {
+      padding-inline: var(--wrap-lg-spacing);
+    }
+  }
+}
 
-:root:lang(ast),      :not(:lang(ast)) > :lang(ast)           { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
-:root:lang(bm),       :not(:lang(bm)) > :lang(bm)             { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
-:root:lang(br),       :not(:lang(br)) > :lang(br)             { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
-:root:lang(ca),       :not(:lang(ca)) > :lang(ca)             { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
-:root:lang(dyo),      :not(:lang(dyo)) > :lang(dyo)           { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
-:root:lang(el),       :not(:lang(el)) > :lang(el)             { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
-:root:lang(es),       :not(:lang(es)) > :lang(es)             { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
-:root:lang(ewo),      :not(:lang(ewo)) > :lang(ewo)           { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
-:root:lang(mg),       :not(:lang(mg)) > :lang(mg)             { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
-:root:lang(mua),      :not(:lang(mua)) > :lang(mua)           { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
-:root:lang(sg),       :not(:lang(sg)) > :lang(sg)             { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
-:root:lang(it),       :not(:lang(it)) > :lang(it)             { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
-:root:lang(kab),      :not(:lang(kab)) > :lang(kab)           { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
-:root:lang(kk),       :not(:lang(kk)) > :lang(kk)             { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
-:root:lang(pt-PT),    :not(:lang(pt-PT)) > :lang(pt-PT)       { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
-:root:lang(nnh),      :not(:lang(nnh)) > :lang(nnh)           { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
-:root:lang(sq),       :not(:lang(sq)) > :lang(sq)             { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
+/* Width presets: a bare .wrap uses --wrap-width, which defaults to the md
+   size; the modifiers pin a specific size regardless of inherited values. */
+.wrap-sm {
+  --wrap-width: var(--wrap-width-sm);
+}
 
+.wrap-md {
+  --wrap-width: var(--wrap-width-md);
+}
 
-:root:lang(bas),      :not(:lang(bas)) > :lang(bas)           { quotes: '\00ab' '\00bb' '\201e' '\201c' } /* « » „ “ */
-:root:lang(be),       :not(:lang(be)) > :lang(be)             { quotes: '\00ab' '\00bb' '\201e' '\201c' } /* « » „ “ */
-:root:lang(ky),       :not(:lang(ky)) > :lang(ky)             { quotes: '\00ab' '\00bb' '\201e' '\201c' } /* « » „ “ */
-:root:lang(sah),      :not(:lang(sah)) > :lang(sah)           { quotes: '\00ab' '\00bb' '\201e' '\201c' } /* « » „ “ */
-:root:lang(ru),       :not(:lang(ru)) > :lang(ru)             { quotes: '\00ab' '\00bb' '\201e' '\201c' } /* « » „ “ */
-:root:lang(uk),       :not(:lang(uk)) > :lang(uk)             { quotes: '\00ab' '\00bb' '\201e' '\201c' } /* « » „ “ */
+.wrap-lg {
+  --wrap-width: var(--wrap-width-lg);
+}
 
+.wrap_content {
+  /* default doesn't need styling */
+}
 
-:root:lang(zgh),      :not(:lang(zgh)) > :lang(zgh)           { quotes: '\00ab' '\00bb' '\201e' '\201d' } /* « » „ ” */
-:root:lang(shi),      :not(:lang(shi)) > :lang(shi)           { quotes: '\00ab' '\00bb' '\201e' '\201d' } /* « » „ ” */
-:root:lang(shi-Latn), :not(:lang(shi-Latn)) > :lang(shi-Latn) { quotes: '\00ab' '\00bb' '\201e' '\201d' } /* « » „ ” */
+.wrap_content-fullBleed {
+  grid-column: 1 / -1;
+  width: 100%;
+  object-fit: cover;
+}
+}
 
+/*
+  Components are optional and not imported here
+  You import them at the same level as mCSS:
 
-:root:lang(am),       :not(:lang(am)) > :lang(am)             { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */
-:root:lang(az-Cyrl),  :not(:lang(az-Cyrl)) > :lang(az-Cyrl)   { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */
-:root:lang(fa),       :not(:lang(fa)) > :lang(fa)             { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */
-:root:lang(fr-CH),    :not(:lang(fr-CH)) > :lang(fr-CH)       { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */
-:root:lang(gsw),      :not(:lang(gsw)) > :lang(gsw)           { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */
-:root:lang(jgo),      :not(:lang(jgo)) > :lang(jgo)           { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */
-:root:lang(kkj),      :not(:lang(kkj)) > :lang(kkj)           { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */
-:root:lang(mzn),      :not(:lang(mzn)) > :lang(mzn)           { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */
+    @import url(./framework/mcss.css);
+    @import url(./framework/mcss.components.css);
 
+  See the default theme for how to create your own.
+*/
 
-:root:lang(fr),       :not(:lang(fr)) > :lang(fr)             { quotes: '\00ab' '\00bb' '\00ab' '\00bb' } /* « » « » */
-:root:lang(hy),       :not(:lang(hy)) > :lang(hy)             { quotes: '\00ab' '\00bb' '\00ab' '\00bb' } /* « » « » */
-:root:lang(yav),      :not(:lang(yav)) > :lang(yav)           { quotes: '\00ab' '\00bb' '\00ab' '\00bb' } /* « » « » */
+/*
+  `external` is an empty slot for third-party CSS (npm packages, plugins).
+  Import vendor stylesheets into it from your own global import:
 
+    @import url(../node_modules/some-package/widget.css) layer(external);
 
-: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{
+  Vendor CSS in the layer loses to all your unlayered CSS, so it stays
+  easy to override. Write those overrides in a patch.* file (e.g.
+  patch.datepicker.css) in your own CSS folder.
+*/
 
-/* ELEMENTS MEDIA/EMBEDDED */
+/* Helpers for local overrides. Every declaration is !important */
+/* (Use VERY sparingly, or you might as well use Tailwind…) */
+@layer helpers{
+/* HELPER COLORS */
+/* !important is intentional: important layered declarations beat unlayered CSS, so helpers win everywhere */
+/* Generated by src/tools/generate.help.color.cjs */
 
-/* better media defaults */
-audio,
-canvas,
-embed,
-iframe,
-img,
-object,
-picture,
-svg,
-video {
-  display: block;
-  vertical-align: middle; /* removes strange space-below if display changes */
-  max-width: 100%;
+.c-base-0 {
+  color: var(--base-0) !important;
 }
 
-img,
-svg,
-video,
-canvas {
-  height: auto; /* maintain intrinsic aspect ratios when `max-width` is applied. */
+.bdc-base-0 {
+  border-color: var(--base-0) !important;
 }
 
-audio {
-  width: 100%; /* remove default 300px */
-  max-width: var(--tera1);
+.bgc-base-0 {
+  background-color: var(--base-0) !important;
 }
 
-audio:not([controls]) {
-  display: none;
+.c-base-50 {
+  color: var(--base-50) !important;
 }
 
-canvas {
+.bdc-base-50 {
+  border-color: var(--base-50) !important;
 }
 
-figcaption {
-  font-style: italic;
-  font-size: var(--text-sm);
+.bgc-base-50 {
+  background-color: var(--base-50) !important;
 }
 
-figure {
-  /* caption at bottom or top */
-  &:has(* + figcaption) {
-    figcaption {
-      margin-top: var(--figcaption-spacing);
-    }
-  }
-  &:has(figcaption + *) {
-    figcaption {
-      margin-bottom: var(--figcaption-spacing);
-    }
-  }
+.c-base-100 {
+  color: var(--base-100) !important;
 }
 
-iframe {
-  border: var(--border-sm) solid var(--ui-border-color);
+.bdc-base-100 {
+  border-color: var(--base-100) !important;
 }
 
-img {
+.bgc-base-100 {
+  background-color: var(--base-100) !important;
 }
 
-picture {
+.c-base-200 {
+  color: var(--base-200) !important;
 }
 
-svg {
+.bdc-base-200 {
+  border-color: var(--base-200) !important;
 }
 
-video {
+.bgc-base-200 {
+  background-color: var(--base-200) !important;
 }
+
+.c-base-300 {
+  color: var(--base-300) !important;
 }
-@layer elements{
 
-/* ELEMENTS TABLE */
+.bdc-base-300 {
+  border-color: var(--base-300) !important;
+}
 
-caption {
-  caption-side: bottom;
-  margin-top: var(--table-caption-spacing);
-  font-size: var(--text-sm);
+.bgc-base-300 {
+  background-color: var(--base-300) !important;
 }
 
-colgroup {
+.c-base-400 {
+  color: var(--base-400) !important;
 }
 
-table {
-  border-spacing: 0;
-  border: var(--table-border-width) solid var(--table-border-color);
-  border-radius: var(--table-border-radius);
-  background-color: var(--table-background-color);
+.bdc-base-400 {
+  border-color: var(--base-400) !important;
 }
 
-th,
-td {
-  text-align: start;
-  padding: var(--table-padding);
-  border-bottom: var(--table-border-width) solid var(--table-border-color);
-  border-inline-start: var(--table-border-width) solid var(--table-border-color);
+.bgc-base-400 {
+  background-color: var(--base-400) !important;
 }
 
-tr {
-  th:first-child,
-  td:first-child {
-    border-inline-start-width: 0;
-  }
+.c-base-500 {
+  color: var(--base-500) !important;
 }
 
-thead {
+.bdc-base-500 {
+  border-color: var(--base-500) !important;
 }
 
-tbody {
-  tr:last-child {
-    th,
-    td {
-      border-bottom-width: 0;
-    }
-  }
+.bgc-base-500 {
+  background-color: var(--base-500) !important;
 }
 
-tfoot {
-  th,
-  td {
-    border-top: var(--table-border-width) solid var(--table-border-color);
-    border-bottom-width: 0;
-  }
+.c-base-600 {
+  color: var(--base-600) !important;
 }
+
+.bdc-base-600 {
+  border-color: var(--base-600) !important;
 }
-@layer elements{
 
-/* ELEMENTS FORM */
+.bgc-base-600 {
+  background-color: var(--base-600) !important;
+}
 
-::placeholder {
-  opacity: var(--o-4);
+.c-base-700 {
+  color: var(--base-700) !important;
 }
 
-/* Remove built-in form typography styles */
-input,
-button,
-textarea,
-select {
-  font: inherit;
-  color: var(--text-color);
+.bdc-base-700 {
+  border-color: var(--base-700) !important;
 }
 
-button {
-  color: var(--text-color);
+.bgc-base-700 {
+  background-color: var(--base-700) !important;
 }
 
-datalist {
+.c-base-800 {
+  color: var(--base-800) !important;
 }
 
-fieldset {
-  border: var(--fieldset-border-width) solid var(--fieldset-border-color);
-  border-radius: var(--fieldset-border-radius);
-  padding: var(--fieldset-padding);
+.bdc-base-800 {
+  border-color: var(--base-800) !important;
+}
 
-  ul:has([type="checkbox"], [type="radio"]) {
-    padding-inline-start: 0;
-  }
+.bgc-base-800 {
+  background-color: var(--base-800) !important;
+}
 
-  > [aria-hidden] {
-    /* legend replacement  */
-    margin-bottom: var(--sm3);
-    font-size: var(--text-lg);
-    grid-column: 1 / -1;
-  }
+.c-base-900 {
+  color: var(--base-900) !important;
 }
 
-/* Only flag fields the user has actually interacted with */
-:is(input, select, textarea):user-invalid {
-  border-color: var(--input-border-color-invalid);
+.bdc-base-900 {
+  border-color: var(--base-900) !important;
 }
 
-input {
-  &:where(:not([type="checkbox"], [type="radio"])) {
-    height: var(--input-height);
-  }
-  &:where(
-    :not([type="color"], [type="file"], [type="reset"], [type="submit"])
-  ) {
-    padding: var(--input-padding);
-  }
-  &:where(:not([type="color"])) {
-    border-radius: var(--input-border-radius);
-  }
-  &:where(:not([type="file"])) {
-    border: var(--input-border-width) solid var(--input-border-color);
-  }
-  &[type="file"] {
-    width: 100%;
-    accent-color: var(--text-color);
-  }
-  &[type="number"] {
-    padding-inline-end: var(--xs1);
-  }
+.bgc-base-900 {
+  background-color: var(--base-900) !important;
 }
 
-label {
-  display: block;
-  &:has(+ :is(input, select, textarea)) {
-    margin-bottom: var(--label-spacing);
-  }
+.c-base-950 {
+  color: var(--base-950) !important;
 }
 
-legend {
-  /*  Visually hidden  */
-  /* replaced by fieldset > [aria-hidden] above */
-  position: absolute;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  width: 1px;
-  height: 1px;
-  white-space: nowrap;
+.bdc-base-950 {
+  border-color: var(--base-950) !important;
 }
 
-meter {
-  width: 100%;
-  background: var(--meter-track-color);
-  border-radius: var(--meter-border-radius);
-  height: var(--meter-height);
-  /* webkit */
-  &::-webkit-meter-bar {
-    background: var(--meter-track-color);
-  }
-  &::-webkit-meter-bar,
-  &::-webkit-meter-optimum-value,
-  &::-webkit-meter-suboptimum-value,
-  &::-webkit-meter-even-less-good-value {
-    height: var(--meter-height);
-    border: none;
-    border-radius: var(--meter-border-radius);
-  }
-  &::-webkit-meter-even-less-good-value {
-    background: var(--meter-low-color);
-  }
-  &::-webkit-meter-suboptimum-value {
-    background: var(--meter-medium-color);
-  }
-  &::-webkit-meter-optimum-value {
-    background: var(--meter-high-color);
-  }
-  /* mozilla */
-  &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
-    background: var(--meter-low-color);
-  }
-  &:-moz-meter-sub-optimum::-moz-meter-bar {
-    background: var(--meter-medium-color);
-  }
-  &:-moz-meter-optimum::-moz-meter-bar {
-    background: var(--meter-high-color);
-  }
+.bgc-base-950 {
+  background-color: var(--base-950) !important;
 }
 
-optgroup {
+.c-primary-50 {
+  color: var(--primary-50) !important;
 }
 
-option {
+.bdc-primary-50 {
+  border-color: var(--primary-50) !important;
 }
 
-output {
+.bgc-primary-50 {
+  background-color: var(--primary-50) !important;
 }
 
-progress {
-  appearance: none;
-  width: 100%;
-  /* mozilla */
-  height: var(--progress-height);
-  background: var(--progress-track-color);
-  border-radius: var(--progress-border-radius);
-  border: none;
-  &::-moz-progress-bar {
-    background: var(--progress-color);
-    border-radius: var(--progress-border-radius);
-  }
-  /* webkit */
-  &::-webkit-progress-bar {
-    width: 100%;
-    background: var(--progress-track-color);
-    border-radius: var(--progress-border-radius);
-    height: var(--progress-height);
-  }
-  &::-webkit-progress-value {
-    background: var(--progress-color);
-    border-radius: var(--progress-border-radius);
-  }
+.c-primary-100 {
+  color: var(--primary-100) !important;
 }
 
-select {
-  /* derived, stays local */
-  --split: calc(100% - var(--select-icon-size));
-  display: flex;
-  appearance: none;
-  height: var(--input-height);
-  padding: var(--xs1) calc(var(--input-padding) + var(--md1)) var(--xs1)
-    var(--input-padding);
-  border: var(--input-border-width) solid var(--input-border-color);
-  border-radius: var(--input-border-radius);
-  background: linear-gradient(
-    to right,
-    var(--body-background-color) 0 var(--split),
-    var(--text-color) var(--split) 100%
-  );
-  mask-image:
-    var(--select-icon),
-    linear-gradient(to right, transparent calc(var(--split) - 1px), red 0),
-    linear-gradient(red 0 0);
-  mask-size: var(--select-icon-size), auto, auto;
-  mask-position:
-    calc(100% - var(--xs1)) center,
-    0 0,
-    0 0;
-  mask-repeat: no-repeat;
-  mask-clip: padding-box, padding-box, border-box;
-  mask-origin: padding-box, padding-box, border-box;
-  mask-composite: add, exclude;
+.bdc-primary-100 {
+  border-color: var(--primary-100) !important;
+}
 
-  /* focus ring comes from the global :focus-visible rule (global.a11y.css) */
+.bgc-primary-100 {
+  background-color: var(--primary-100) !important;
+}
 
-  &:disabled {
-    --disabled-color: light-dark(
-      hsl(from var(--text-color) h s 70%),
-      hsl(from var(--text-color) h s 40%)
-    );
-    cursor: not-allowed;
-    color: var(--disabled-color);
-    background: linear-gradient(
-      to right,
-      var(--body-background-color) 0 var(--split),
-      var(--disabled-color) var(--split) 100%
-    );
-  }
+.c-primary-200 {
+  color: var(--primary-200) !important;
+}
 
-  &[multiple] {
-    height: auto;
-    padding: var(--input-padding);
-    background: var(--body-background-color);
-    mask-image: none;
-  }
+.bdc-primary-200 {
+  border-color: var(--primary-200) !important;
 }
 
-textarea {
-  width: 100%;
-  padding: var(--input-padding);
-  border-radius: var(--input-border-radius);
-  border: var(--input-border-width) solid var(--input-border-color);
-  resize: vertical;
-  &:not([rows]) {
-    min-height: 6em;
-  }
+.bgc-primary-200 {
+  background-color: var(--primary-200) !important;
 }
+
+.c-primary-300 {
+  color: var(--primary-300) !important;
 }
-@layer elements{
 
-/* ELEMENTS INTERACTIVE */
+.bdc-primary-300 {
+  border-color: var(--primary-300) !important;
+}
 
-dialog {
-  /* body scrolling is stopped by adding .body-is-locked on <dialog> */
-  /* But it can be added to any element. See elements.sectioning.css > body { … }  */
-  min-width: var(--dialog-min-width);
-  max-width: var(--dialog-max-width);
-  padding: var(--dialog-padding);
-  border: var(--dialog-border-width) solid var(--dialog-border-color);
-  background-color: var(--dialog-background-color);
-  border-radius: var(--dialog-border-radius);
+.bgc-primary-300 {
+  background-color: var(--primary-300) !important;
+}
 
-  &::backdrop {
-    background: var(--dialog-backdrop-color);
-    opacity: var(--dialog-backdrop-opacity);
-  }
+.c-primary-400 {
+  color: var(--primary-400) !important;
+}
 
-  [aria-label="close pop-up"] {
-    position: absolute;
-    top: var(--xs3);
-    right: var(
-      --xs3
-    ); /* deliberately physical: close button pinned to a visual corner */
-    background: transparent;
-    border: none;
-    outline: none;
-    cursor: pointer;
-  }
+.bdc-primary-400 {
+  border-color: var(--primary-400) !important;
+}
 
-  p:last-of-type {
-    /* in case it's inside a .prose context */
-    margin-bottom: 0;
-  }
+.bgc-primary-400 {
+  background-color: var(--primary-400) !important;
 }
 
-details {
-  padding: var(--details-padding);
-  border: var(--details-border-width) solid var(--details-border-color);
-  background-color: var(--details-background-color);
-  border-radius: var(--details-border-radius);
-  cursor: pointer;
+.c-primary-500 {
+  color: var(--primary-500) !important;
+}
 
-  summary {
-    display: flex;
-    justify-content: space-between;
-    font-weight: var(--bold);
-    &::-webkit-details-marker {
-      display: none;
-    }
-    &::after {
-      content: "";
-      width: var(--details-icon-size);
-      height: var(--details-icon-size);
-      /* icon as a mask painted with the text color, so it follows the
-         color scheme (an SVG in background-image can't see currentColor
-         and always renders black) */
-      background-color: currentColor;
-      mask-image: var(--details-icon);
-      mask-size: contain;
-      mask-repeat: no-repeat;
-      transition: transform var(--transition);
-    }
-  }
+.bdc-primary-500 {
+  border-color: var(--primary-500) !important;
+}
 
-  &[open] > summary {
-    margin-bottom: var(--details-spacing);
-    &::after {
-      transform: rotate(180deg);
-    }
-  }
+.bgc-primary-500 {
+  background-color: var(--primary-500) !important;
+}
 
-  p:last-of-type {
-    /* in case it's inside a .prose context */
-    margin-bottom: 0;
-  }
+.c-primary-600 {
+  color: var(--primary-600) !important;
 }
+
+.bdc-primary-600 {
+  border-color: var(--primary-600) !important;
 }
 
-/* Global styles */
+.bgc-primary-600 {
+  background-color: var(--primary-600) !important;
+}
 
-@layer global{
-/* Unified keyboard focus ring (themable via the --focus-ring-* tokens).
-   Applies everywhere so keyboard users get one consistent treatment. */
-:focus-visible {
-  outline: var(--focus-ring-width) solid var(--focus-ring-color);
-  outline-offset: var(--focus-ring-offset);
+.c-primary-700 {
+  color: var(--primary-700) !important;
 }
 
-/* Skip-to-content link. Place it as the first element in <body>, pointing
-   at the id of your main content; it stays off-screen until focused. */
-.a11y-skipLink {
-  position: fixed;
-  z-index: var(--z-top);
-  inset-block-start: -100vb;
-  inset-inline-start: 0;
-  padding: 0.75em 1.25em;
-  background-color: var(--body-background-color);
-  color: var(--text-color);
+.bdc-primary-700 {
+  border-color: var(--primary-700) !important;
 }
 
-.a11y-skipLink:focus {
-  inset-block-start: 0;
+.bgc-primary-700 {
+  background-color: var(--primary-700) !important;
 }
 
-/* hide in browser but accessible in screen readers */
-.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;
+.c-primary-800 {
+  color: var(--primary-800) !important;
 }
+
+.bdc-primary-800 {
+  border-color: var(--primary-800) !important;
 }
 
-@layer global{
+.bgc-primary-800 {
+  background-color: var(--primary-800) !important;
+}
 
-@keyframes fadeFromOpaque {
-  from {
-    opacity: 1;
-  }
+.c-primary-900 {
+  color: var(--primary-900) !important;
 }
 
-@keyframes fadeToOpaque {
-  to {
-    opacity: 1;
-  }
+.bdc-primary-900 {
+  border-color: var(--primary-900) !important;
 }
 
-@keyframes fadeFromTransparent {
-  from {
-    opacity: 0;
-  }
+.bgc-primary-900 {
+  background-color: var(--primary-900) !important;
 }
 
-@keyframes fadeToTransparent {
-  to {
-    opacity: 0;
-  }
+.c-primary-950 {
+  color: var(--primary-950) !important;
 }
+
+.bdc-primary-950 {
+  border-color: var(--primary-950) !important;
 }
 
-@layer global{
-/* GRID */
-/* Generated by src/tools/generate.global.grid.cjs */
-.grid {
-  display: grid;
-  --grid-tc: repeat(4, 1fr);
-  --grid-cs: 1; /* column start */
-  --grid-ce: -1; /* column end */
-  grid-template-columns: var(--grid-tc);
-  grid-column-gap: var(--grid-column-gap);
-  grid-row-gap: var(--grid-row-gap);
+.bgc-primary-950 {
+  background-color: var(--primary-950) !important;
 }
 
-.grid-flush {
-  grid-column-gap: 0;
-  grid-row-gap: 0;
+.c-yes-100 {
+  color: var(--yes-100) !important;
 }
 
-/* DEFAULT */
-.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) }
-/* span=start... */
-.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 }
-/* span=...+width, span=...-end */
-.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 }
-/* connect vars */
-.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 }
-/* MD — window >= 768px */
-@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) }
+.bdc-yes-100 {
+  border-color: var(--yes-100) !important;
+}
 
-  /* span-md=start... */
-  .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 }
+.bgc-yes-100 {
+  background-color: var(--yes-100) !important;
+}
 
-  /* span-md=...+width, span-md=...-end */
-  .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 }
+.c-yes-200 {
+  color: var(--yes-200) !important;
+}
 
-  /* connect vars */
-  .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 }
+.bdc-yes-200 {
+  border-color: var(--yes-200) !important;
 }
-/* LARGE -  width >= 1024 */
-@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) }
 
-  /* span-lg=start... */
-  .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 }
+.bgc-yes-200 {
+  background-color: var(--yes-200) !important;
+}
 
-  /* span-lg=...+width, span-lg=...-end */
-  .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 }
+.c-yes-300 {
+  color: var(--yes-300) !important;
+}
 
-  /* connect vars */
-  .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 }
+.bdc-yes-300 {
+  border-color: var(--yes-300) !important;
 }
-/* EXTRA LARGE -  width >= 1440 */
-@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) }
 
-  /* span-xl=start... */
-  .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 }
+.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;
+}
 
-  /* span-xl=...+width, span-xl=...-end */
-  .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 }
+.bdc-no-300 {
+  border-color: var(--no-300) !important;
+}
 
-  /* connect vars */
-  .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 }
+.bgc-no-300 {
+  background-color: var(--no-300) !important;
 }
+
+.c-no-400 {
+  color: var(--no-400) !important;
 }
 
-@layer global{
+.bdc-no-400 {
+  border-color: var(--no-400) !important;
+}
 
-/*
-  Page-level layout scaffolds. Every variant extends the .layout base:
+.bgc-no-400 {
+  background-color: var(--no-400) !important;
+}
 
-    <body class="layout layout-sidebar">
-      <header>…</header>
-      <div class="layout_content">
-        <aside class="layout_content_aside">…</aside>
-        <main class="layout_content_main">…</main>
-      </div>
-      <footer>…</footer>
-    </body>
+.c-no-500 {
+  color: var(--no-500) !important;
+}
 
-  Widths come from the layout tokens in settings.ui.css:
-  --layout-content-width, --layout-aside-width, --layout-toc-width.
-*/
+.bdc-no-500 {
+  border-color: var(--no-500) !important;
+}
 
-/* App shell: header / content / footer, with a sticky footer. Base for
-   every variant below, also usable on its own. */
-.layout {
-  display: flex;
-  flex-direction: column;
-  width: 100vw;
-  min-height: 100vh;
+.bgc-no-500 {
+  background-color: var(--no-500) !important;
+}
 
-  .layout_content {
-    flex: 1;
-  }
+.c-maybe-100 {
+  color: var(--maybe-100) !important;
 }
 
-/* The main column is a size container: container-responsive components
-   (Tiles) pick their column count from it instead of the viewport.
-   Named, so custom rules can target it with @container main. */
-.layout_content_main {
-  container: main / inline-size;
+.bdc-maybe-100 {
+  border-color: var(--maybe-100) !important;
 }
 
-/* Single centered reading column: articles, blog posts, legal pages. */
-.layout-centered {
-  .layout_content {
-    display: grid;
-    gap: var(--sm3);
-    grid-template-columns: 1fr minmax(0, var(--layout-content-width)) 1fr;
-    margin-top: var(--lg1);
-    margin-bottom: var(--sm1);
-    @media (width >= 768px) {
-      margin-top: var(--xl3);
-      margin-bottom: var(--md3);
-      gap: var(--md3);
-    }
-  }
+.bgc-maybe-100 {
+  background-color: var(--maybe-100) !important;
+}
 
-  .layout_content_main {
-    grid-column: 2;
-  }
+.c-maybe-200 {
+  color: var(--maybe-200) !important;
 }
 
-/* Aside + main: settings pages, simple docs, blogs with a nav column.
-   Single column below --md, aside following source order. */
-.layout-sidebar {
-  .layout_content {
-    @media (width >= 768px) {
-      display: grid;
-      grid-template-columns: var(--layout-aside-width) minmax(0, 1fr);
-    }
-  }
+.bdc-maybe-200 {
+  border-color: var(--maybe-200) !important;
+}
 
-  .layout_content_main {
-    padding: var(--sm2);
-    @media (width >= 768px) {
-      grid-row: 1;
-      grid-column: 2;
-      padding: var(--lg1) var(--md2);
-    }
-  }
+.bgc-maybe-200 {
+  background-color: var(--maybe-200) !important;
+}
 
-  .layout_content_aside {
-    @media (width >= 768px) {
-      grid-row: 1;
-      grid-column: 1;
-      padding: var(--lg1) var(--md3);
-    }
-  }
+.c-maybe-300 {
+  color: var(--maybe-300) !important;
 }
 
-/* Moves the aside to the reading end ("end", not "right": columns follow
-   the writing direction). Compose with .layout-sidebar. */
-.layout-sidebar-end {
-  .layout_content {
-    @media (width >= 768px) {
-      grid-template-columns: minmax(0, 1fr) var(--layout-aside-width);
-    }
-  }
+.bdc-maybe-300 {
+  border-color: var(--maybe-300) !important;
+}
 
-  .layout_content_main {
-    @media (width >= 768px) {
-      grid-column: 1;
-    }
-  }
+.bgc-maybe-300 {
+  background-color: var(--maybe-300) !important;
+}
 
-  .layout_content_aside {
-    @media (width >= 768px) {
-      grid-column: 2;
-    }
-  }
+.c-maybe-400 {
+  color: var(--maybe-400) !important;
 }
 
-/* Documentation shell: nav aside + main + table of contents. One column
-   below --md with both asides hidden (put that navigation in your header
-   menu), nav + main from --md, TOC joins from --lg. */
-.layout-docs {
-  .layout_content {
-    @media (width >= 768px) {
-      display: grid;
-      grid-template-columns: var(--layout-aside-width) minmax(0, 1fr);
-    }
-    @media (width >= 1024px) {
-      grid-template-columns:
-        var(--layout-aside-width)
-        minmax(0, var(--layout-content-width))
-        var(--layout-toc-width);
-    }
-  }
+.bdc-maybe-400 {
+  border-color: var(--maybe-400) !important;
+}
 
-  .layout_content_main {
-    padding: var(--sm2);
-    @media (width >= 768px) {
-      grid-row: 1;
-      grid-column: 2;
-      padding: var(--lg1) var(--md2);
-    }
-  }
+.bgc-maybe-400 {
+  background-color: var(--maybe-400) !important;
+}
 
-  .layout_content_aside {
-    display: none;
-    @media (width >= 768px) {
-      display: block;
-      grid-row: 1;
-      grid-column: 1;
-      padding: var(--lg1) var(--md3);
-    }
-  }
+.c-maybe-500 {
+  color: var(--maybe-500) !important;
+}
 
-  /* Compose on the second aside: class="layout_content_aside
-     layout_content_aside-toc". Same specificity as the base element rule,
-     so these declarations must stay after it. */
-  .layout_content_aside-toc {
-    @media (width >= 768px) {
-      display: none;
-    }
-    @media (width >= 1024px) {
-      display: block;
-      grid-row: 1;
-      grid-column: 3;
-      padding: var(--lg1) var(--md3);
-    }
-  }
+.bdc-maybe-500 {
+  border-color: var(--maybe-500) !important;
+}
+
+.bgc-maybe-500 {
+  background-color: var(--maybe-500) !important;
+}
+}
+@layer helpers{
+
+/* DEV TOOLS */
+
+/* Debug-only helpers. You have to add the classes yourself. */
+
+/* Baseline grid overlay: add .dev to <body> while checking vertical rhythm. */
+body.dev {
+  --baseline: 8;
+  background-size: 100% calc(var(--baseline) * 1px) !important;
+  background-image: linear-gradient(
+    to bottom,
+    rgba(0, 0, 0, 0) calc((var(--baseline) - 1) * 1px),
+    hotpink calc(var(--baseline) * 1px)
+  ) !important;
+}
+
+/* Fixed error toast, used by components to surface dev-time mistakes
+   (see Hero.astro's slide count check). */
+.dev-error {
+  position: fixed !important;
+  top: var(--md1) !important;
+  left: var(--md1) !important;
+  z-index: var(--z-top) !important;
+  padding: var(--sm1) !important;
+  font-size: 1rem !important;
+  color: var(--no-500) !important;
+  background: var(--no-100) !important;
+  border: 1px solid var(--no-500) !important;
+  border-radius: var(--radius-md) !important;
 }
-
-/* Two equal panes, stacked below --md: auth screens, "image + content"
-   landings. Panes are the direct children of .layout_content. */
-.layout-split {
-  .layout_content {
-    display: grid;
-    @media (width >= 768px) {
-      grid-template-columns: 1fr 1fr;
-    }
-  }
 }
+@layer helpers{
 
-/* Full-viewport cover with centered content: landing, 404, coming soon.
-   dvh so mobile browser chrome never hides the content. */
-.layout-cover {
-  min-height: 100dvh;
+/* HELPER OVERFLOW */
 
-  .layout_content {
-    display: grid;
-    place-items: center;
-  }
-}
+.of-auto,
+.overflow-auto {
+  overflow: auto !important;
 }
 
-@layer global{
+.of-hidden,
+.overflow-hidden {
+  overflow: hidden !important;
+}
 
-/* PROSE - Default style for text content */
+.of-clip,
+.overflow-clip {
+  overflow: clip !important;
+}
 
-@scope (.prose) to (.not-prose) {
-  /* Component blocks mirror this heading-adjacent margin themselves in their
-     own files (.notice in component.notice.css; site-only .expressive-code,
-     .canIUse in their unlayered site CSS files): prose never reaches into
-     another component's classes. */
-  :is(p, ul, ol, blockquote, table):has(+ :is(h1, h2, h3, h4)) {
-    margin-bottom: calc(var(--prose-spacing) * 2);
-  }
+.of-visible,
+.overflow-visible {
+  overflow: visible !important;
+}
 
-  p,
-  ul,
-  ol,
-  dl {
-    margin-bottom: var(--prose-spacing);
-    p,
-    ul,
-    ol,
-    dl {
-      margin-bottom: 0;
-    }
-  }
+.of-scroll,
+.overflow-scroll {
+  overflow: scroll !important;
+}
 
-  ul,
-  ol {
-    ul,
-    ol {
-      margin-inline-start: 0;
-      padding-inline-start: var(--sm2);
-    }
-    li {
-      margin-bottom: 0.5em;
-      &::marker {
-        color: light-dark(var(--base-300), var(--base-600));
-      }
-    }
-  }
+.of-x-auto,
+.overflow-x-auto {
+  overflow-x: auto !important;
+}
 
-  ul {
-    margin-inline-start: var(--sm2);
-    list-style-type: "→ ";
-  }
+.of-y-auto,
+.overflow-y-auto {
+  overflow-y: auto !important;
+}
 
-  ol {
-    margin-inline-start: var(--md2);
-    list-style-type: decimal-leading-zero;
-    li::marker {
-      font-size: var(--text-sm);
-    }
-  }
+.of-x-hidden,
+.overflow-x-hidden {
+  overflow-x: hidden !important;
+}
 
-  table {
-    margin-top: var(--md1);
-    margin-bottom: var(--md1);
-  }
+.of-y-hidden,
+.overflow-y-hidden {
+  overflow-y: hidden !important;
 }
+
+.of-x-clip,
+.overflow-x-clip {
+  overflow-x: clip !important;
 }
 
-@layer global{
+.of-y-clip,
+.overflow-y-clip {
+  overflow-y: clip !important;
+}
 
-/* LAYOUT WRAP */
+.of-x-visible,
+.overflow-x-visible {
+  overflow-x: visible !important;
+}
 
-.wrap {
-  display: grid;
-  grid-template-columns: 1fr var(--wrap-width) 1fr;
+.of-y-visible,
+.overflow-y-visible {
+  overflow-y: visible !important;
+}
 
-  > *,
-  > astro-island > *,
-  > astro-slot > *,
-  > astro-static-slot > * {
-    grid-column: 2;
-    padding-inline: var(--wrap-spacing);
-    @media (width >= 768px) {
-      padding-inline: var(--wrap-md-spacing);
-    }
-    @media (width >= 1024px) {
-      padding-inline: var(--wrap-lg-spacing);
-    }
-  }
+.of-x-scroll,
+.overflow-x-scroll {
+  overflow-x: scroll !important;
 }
 
-/* Width presets: a bare .wrap uses --wrap-width, which defaults to the md
-   size; the modifiers pin a specific size regardless of inherited values. */
-.wrap-sm {
-  --wrap-width: var(--wrap-width-sm);
+.of-y-scroll,
+.overflow-y-scroll {
+  overflow-y: scroll !important;
 }
 
-.wrap-md {
-  --wrap-width: var(--wrap-width-md);
+/* HELPER POSITION */
+
+.position-static {
+  position: static !important;
 }
 
-.wrap-lg {
-  --wrap-width: var(--wrap-width-lg);
+.position-fixed {
+  position: fixed !important;
 }
 
-.wrap_content {
-  /* default doesn't need styling */
+.position-absolute {
+  position: absolute !important;
 }
 
-.wrap_content-fullBleed {
-  grid-column: 1 / -1;
-  width: 100%;
-  object-fit: cover;
+.position-relative {
+  position: relative !important;
 }
+
+.position-sticky {
+  position: sticky !important;
 }
 
-/*
-  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.
-*/
+/* HELPER VISIBILITY  */
 
-/* Helpers for local overrides. Every declaration is !important on purpose: */
-/* important layered declarations beat unlayered CSS, so helpers win over */
-/* everything, including consumer CSS. */
-/* (Use VERY sparingly, or you might as well use Tailwind…) */
-@layer helpers{
-/* HELPER COLORS */
-/* !important is intentional: important layered declarations beat unlayered CSS, so helpers win everywhere */
-/* Generated by src/tools/generate.help.color.cjs */
+.visibility-visible {
+  visibility: visible !important;
+}
 
-.c-base-0 {
-  color: var(--base-0) !important;
+.visibility-hidden {
+  visibility: hidden !important;
 }
 
-.bdc-base-0 {
-  border-color: var(--base-0) !important;
+.visibility-collapse {
+  visibility: collapse !important;
 }
 
-.bgc-base-0 {
-  background-color: var(--base-0) !important;
+/* HELPER Z-INDEX  */
+
+.z-auto {
+  z-index: auto !important;
 }
 
-.c-base-50 {
-  color: var(--base-50) !important;
+.z-bottom {
+  z-index: var(--z-bottom) !important;
 }
 
-.bdc-base-50 {
-  border-color: var(--base-50) !important;
+.z-0 {
+  z-index: var(--z-0) !important;
 }
 
-.bgc-base-50 {
-  background-color: var(--base-50) !important;
+.z-1 {
+  z-index: var(--z-1) !important;
 }
 
-.c-base-100 {
-  color: var(--base-100) !important;
+.z-2 {
+  z-index: var(--z-2) !important;
 }
 
-.bdc-base-100 {
-  border-color: var(--base-100) !important;
+.z-3 {
+  z-index: var(--z-3) !important;
 }
 
-.bgc-base-100 {
-  background-color: var(--base-100) !important;
+.z-4 {
+  z-index: var(--z-4) !important;
 }
 
-.c-base-200 {
-  color: var(--base-200) !important;
+.z-5 {
+  z-index: var(--z-5) !important;
 }
 
-.bdc-base-200 {
-  border-color: var(--base-200) !important;
+.z-top {
+  z-index: var(--z-top) !important;
+}
 }
+@layer helpers{
 
-.bgc-base-200 {
-  background-color: var(--base-200) !important;
+/* HELPER OPACITY */
+
+.o-0 {
+  opacity: var(--o-0) !important;
 }
 
-.c-base-300 {
-  color: var(--base-300) !important;
+.o-1 {
+  opacity: var(--o-1) !important;
 }
 
-.bdc-base-300 {
-  border-color: var(--base-300) !important;
+.o-2 {
+  opacity: var(--o-2) !important;
 }
 
-.bgc-base-300 {
-  background-color: var(--base-300) !important;
+.o-3 {
+  opacity: var(--o-3) !important;
 }
 
-.c-base-400 {
-  color: var(--base-400) !important;
+.o-4 {
+  opacity: var(--o-4) !important;
 }
 
-.bdc-base-400 {
-  border-color: var(--base-400) !important;
+.o-5 {
+  opacity: var(--o-5) !important;
 }
-
-.bgc-base-400 {
-  background-color: var(--base-400) !important;
 }
+@layer helpers{
 
-.c-base-500 {
-  color: var(--base-500) !important;
+/* HELPER RATIOS */
+
+.ar-square {
+  aspect-ratio: var(--ar-square) !important;
 }
 
-.bdc-base-500 {
-  border-color: var(--base-500) !important;
+.ar-landscape {
+  aspect-ratio: var(--ar-landscape) !important;
 }
 
-.bgc-base-500 {
-  background-color: var(--base-500) !important;
+.ar-portrait {
+  aspect-ratio: var(--ar-portrait) !important;
 }
 
-.c-base-600 {
-  color: var(--base-600) !important;
+.ar-widescreen {
+  aspect-ratio: var(--ar-widescreen) !important;
 }
 
-.bdc-base-600 {
-  border-color: var(--base-600) !important;
+.ar-golden {
+  aspect-ratio: var(--ar-golden) !important;
+}
 }
+@layer helpers{
+/* HELPER SPACING */
+/* !important is intentional: important layered declarations beat unlayered CSS, so helpers win everywhere */
+/* Generated by src/tools/generate.help.spacing.cjs */
 
-.bgc-base-600 {
-  background-color: var(--base-600) !important;
+.w-0 {
+  width: 0 !important;
 }
 
-.c-base-700 {
-  color: var(--base-700) !important;
+.h-0 {
+  height: 0 !important;
 }
 
-.bdc-base-700 {
-  border-color: var(--base-700) !important;
+.m-0 {
+  margin: 0 !important;
 }
 
-.bgc-base-700 {
-  background-color: var(--base-700) !important;
+.mt-0 {
+  margin-top: 0 !important;
 }
 
-.c-base-800 {
-  color: var(--base-800) !important;
+.mb-0 {
+  margin-bottom: 0 !important;
 }
 
-.bdc-base-800 {
-  border-color: var(--base-800) !important;
+.ml-0 {
+  margin-left: 0 !important;
 }
 
-.bgc-base-800 {
-  background-color: var(--base-800) !important;
+.mr-0 {
+  margin-right: 0 !important;
 }
 
-.c-base-900 {
-  color: var(--base-900) !important;
+.mis-0 {
+  margin-inline-start: 0 !important;
 }
 
-.bdc-base-900 {
-  border-color: var(--base-900) !important;
+.mie-0 {
+  margin-inline-end: 0 !important;
 }
 
-.bgc-base-900 {
-  background-color: var(--base-900) !important;
+.p-0 {
+  padding: 0 !important;
 }
 
-.c-base-950 {
-  color: var(--base-950) !important;
+.pt-0 {
+  padding-top: 0 !important;
 }
 
-.bdc-base-950 {
-  border-color: var(--base-950) !important;
+.pb-0 {
+  padding-bottom: 0 !important;
 }
 
-.bgc-base-950 {
-  background-color: var(--base-950) !important;
+.pl-0 {
+  padding-left: 0 !important;
 }
 
-.c-primary-50 {
-  color: var(--primary-50) !important;
+.pr-0 {
+  padding-right: 0 !important;
 }
 
-.bdc-primary-50 {
-  border-color: var(--primary-50) !important;
+.pis-0 {
+  padding-inline-start: 0 !important;
 }
 
-.bgc-primary-50 {
-  background-color: var(--primary-50) !important;
+.pie-0 {
+  padding-inline-end: 0 !important;
 }
 
-.c-primary-100 {
-  color: var(--primary-100) !important;
+.w-xs1 {
+  width: var(--xs1) !important;
 }
 
-.bdc-primary-100 {
-  border-color: var(--primary-100) !important;
+.h-xs1 {
+  height: var(--xs1) !important;
 }
 
-.bgc-primary-100 {
-  background-color: var(--primary-100) !important;
+.m-xs1 {
+  margin: var(--xs1) !important;
 }
 
-.c-primary-200 {
-  color: var(--primary-200) !important;
+.mt-xs1 {
+  margin-top: var(--xs1) !important;
 }
 
-.bdc-primary-200 {
-  border-color: var(--primary-200) !important;
+.mb-xs1 {
+  margin-bottom: var(--xs1) !important;
 }
 
-.bgc-primary-200 {
-  background-color: var(--primary-200) !important;
+.ml-xs1 {
+  margin-left: var(--xs1) !important;
 }
 
-.c-primary-300 {
-  color: var(--primary-300) !important;
+.mr-xs1 {
+  margin-right: var(--xs1) !important;
 }
 
-.bdc-primary-300 {
-  border-color: var(--primary-300) !important;
+.mis-xs1 {
+  margin-inline-start: var(--xs1) !important;
 }
 
-.bgc-primary-300 {
-  background-color: var(--primary-300) !important;
+.mie-xs1 {
+  margin-inline-end: var(--xs1) !important;
 }
 
-.c-primary-400 {
-  color: var(--primary-400) !important;
+.p-xs1 {
+  padding: var(--xs1) !important;
 }
 
-.bdc-primary-400 {
-  border-color: var(--primary-400) !important;
+.pt-xs1 {
+  padding-top: var(--xs1) !important;
 }
 
-.bgc-primary-400 {
-  background-color: var(--primary-400) !important;
+.pb-xs1 {
+  padding-bottom: var(--xs1) !important;
 }
 
-.c-primary-500 {
-  color: var(--primary-500) !important;
+.pl-xs1 {
+  padding-left: var(--xs1) !important;
 }
 
-.bdc-primary-500 {
-  border-color: var(--primary-500) !important;
+.pr-xs1 {
+  padding-right: var(--xs1) !important;
 }
 
-.bgc-primary-500 {
-  background-color: var(--primary-500) !important;
+.pis-xs1 {
+  padding-inline-start: var(--xs1) !important;
 }
 
-.c-primary-600 {
-  color: var(--primary-600) !important;
+.pie-xs1 {
+  padding-inline-end: var(--xs1) !important;
 }
 
-.bdc-primary-600 {
-  border-color: var(--primary-600) !important;
+.w-xs2 {
+  width: var(--xs2) !important;
 }
 
-.bgc-primary-600 {
-  background-color: var(--primary-600) !important;
+.h-xs2 {
+  height: var(--xs2) !important;
 }
 
-.c-primary-700 {
-  color: var(--primary-700) !important;
+.m-xs2 {
+  margin: var(--xs2) !important;
 }
 
-.bdc-primary-700 {
-  border-color: var(--primary-700) !important;
+.mt-xs2 {
+  margin-top: var(--xs2) !important;
 }
 
-.bgc-primary-700 {
-  background-color: var(--primary-700) !important;
+.mb-xs2 {
+  margin-bottom: var(--xs2) !important;
 }
 
-.c-primary-800 {
-  color: var(--primary-800) !important;
+.ml-xs2 {
+  margin-left: var(--xs2) !important;
 }
 
-.bdc-primary-800 {
-  border-color: var(--primary-800) !important;
+.mr-xs2 {
+  margin-right: var(--xs2) !important;
 }
 
-.bgc-primary-800 {
-  background-color: var(--primary-800) !important;
+.mis-xs2 {
+  margin-inline-start: var(--xs2) !important;
 }
 
-.c-primary-900 {
-  color: var(--primary-900) !important;
+.mie-xs2 {
+  margin-inline-end: var(--xs2) !important;
 }
 
-.bdc-primary-900 {
-  border-color: var(--primary-900) !important;
+.p-xs2 {
+  padding: var(--xs2) !important;
 }
 
-.bgc-primary-900 {
-  background-color: var(--primary-900) !important;
+.pt-xs2 {
+  padding-top: var(--xs2) !important;
 }
 
-.c-primary-950 {
-  color: var(--primary-950) !important;
+.pb-xs2 {
+  padding-bottom: var(--xs2) !important;
 }
 
-.bdc-primary-950 {
-  border-color: var(--primary-950) !important;
+.pl-xs2 {
+  padding-left: var(--xs2) !important;
 }
 
-.bgc-primary-950 {
-  background-color: var(--primary-950) !important;
+.pr-xs2 {
+  padding-right: var(--xs2) !important;
 }
 
-.c-yes-100 {
-  color: var(--yes-100) !important;
+.pis-xs2 {
+  padding-inline-start: var(--xs2) !important;
 }
 
-.bdc-yes-100 {
-  border-color: var(--yes-100) !important;
+.pie-xs2 {
+  padding-inline-end: var(--xs2) !important;
 }
 
-.bgc-yes-100 {
-  background-color: var(--yes-100) !important;
+.w-xs3 {
+  width: var(--xs3) !important;
 }
 
-.c-yes-200 {
-  color: var(--yes-200) !important;
+.h-xs3 {
+  height: var(--xs3) !important;
 }
 
-.bdc-yes-200 {
-  border-color: var(--yes-200) !important;
+.m-xs3 {
+  margin: var(--xs3) !important;
 }
 
-.bgc-yes-200 {
-  background-color: var(--yes-200) !important;
+.mt-xs3 {
+  margin-top: var(--xs3) !important;
 }
 
-.c-yes-300 {
-  color: var(--yes-300) !important;
+.mb-xs3 {
+  margin-bottom: var(--xs3) !important;
 }
 
-.bdc-yes-300 {
-  border-color: var(--yes-300) !important;
+.ml-xs3 {
+  margin-left: var(--xs3) !important;
 }
 
-.bgc-yes-300 {
-  background-color: var(--yes-300) !important;
+.mr-xs3 {
+  margin-right: var(--xs3) !important;
 }
 
-.c-yes-400 {
-  color: var(--yes-400) !important;
+.mis-xs3 {
+  margin-inline-start: var(--xs3) !important;
 }
 
-.bdc-yes-400 {
-  border-color: var(--yes-400) !important;
+.mie-xs3 {
+  margin-inline-end: var(--xs3) !important;
 }
 
-.bgc-yes-400 {
-  background-color: var(--yes-400) !important;
+.p-xs3 {
+  padding: var(--xs3) !important;
 }
 
-.c-yes-500 {
-  color: var(--yes-500) !important;
+.pt-xs3 {
+  padding-top: var(--xs3) !important;
 }
 
-.bdc-yes-500 {
-  border-color: var(--yes-500) !important;
+.pb-xs3 {
+  padding-bottom: var(--xs3) !important;
 }
 
-.bgc-yes-500 {
-  background-color: var(--yes-500) !important;
+.pl-xs3 {
+  padding-left: var(--xs3) !important;
 }
 
-.c-no-100 {
-  color: var(--no-100) !important;
+.pr-xs3 {
+  padding-right: var(--xs3) !important;
 }
 
-.bdc-no-100 {
-  border-color: var(--no-100) !important;
+.pis-xs3 {
+  padding-inline-start: var(--xs3) !important;
 }
 
-.bgc-no-100 {
-  background-color: var(--no-100) !important;
+.pie-xs3 {
+  padding-inline-end: var(--xs3) !important;
 }
 
-.c-no-200 {
-  color: var(--no-200) !important;
+.w-sm1 {
+  width: var(--sm1) !important;
 }
 
-.bdc-no-200 {
-  border-color: var(--no-200) !important;
+.h-sm1 {
+  height: var(--sm1) !important;
 }
 
-.bgc-no-200 {
-  background-color: var(--no-200) !important;
+.m-sm1 {
+  margin: var(--sm1) !important;
 }
 
-.c-no-300 {
-  color: var(--no-300) !important;
+.mt-sm1 {
+  margin-top: var(--sm1) !important;
 }
 
-.bdc-no-300 {
-  border-color: var(--no-300) !important;
+.mb-sm1 {
+  margin-bottom: var(--sm1) !important;
 }
 
-.bgc-no-300 {
-  background-color: var(--no-300) !important;
+.ml-sm1 {
+  margin-left: var(--sm1) !important;
 }
 
-.c-no-400 {
-  color: var(--no-400) !important;
+.mr-sm1 {
+  margin-right: var(--sm1) !important;
 }
 
-.bdc-no-400 {
-  border-color: var(--no-400) !important;
+.mis-sm1 {
+  margin-inline-start: var(--sm1) !important;
 }
 
-.bgc-no-400 {
-  background-color: var(--no-400) !important;
+.mie-sm1 {
+  margin-inline-end: var(--sm1) !important;
 }
 
-.c-no-500 {
-  color: var(--no-500) !important;
+.p-sm1 {
+  padding: var(--sm1) !important;
 }
 
-.bdc-no-500 {
-  border-color: var(--no-500) !important;
+.pt-sm1 {
+  padding-top: var(--sm1) !important;
 }
 
-.bgc-no-500 {
-  background-color: var(--no-500) !important;
+.pb-sm1 {
+  padding-bottom: var(--sm1) !important;
 }
 
-.c-maybe-100 {
-  color: var(--maybe-100) !important;
+.pl-sm1 {
+  padding-left: var(--sm1) !important;
 }
 
-.bdc-maybe-100 {
-  border-color: var(--maybe-100) !important;
+.pr-sm1 {
+  padding-right: var(--sm1) !important;
 }
 
-.bgc-maybe-100 {
-  background-color: var(--maybe-100) !important;
+.pis-sm1 {
+  padding-inline-start: var(--sm1) !important;
 }
 
-.c-maybe-200 {
-  color: var(--maybe-200) !important;
+.pie-sm1 {
+  padding-inline-end: var(--sm1) !important;
 }
 
-.bdc-maybe-200 {
-  border-color: var(--maybe-200) !important;
+.w-sm2 {
+  width: var(--sm2) !important;
 }
 
-.bgc-maybe-200 {
-  background-color: var(--maybe-200) !important;
+.h-sm2 {
+  height: var(--sm2) !important;
 }
 
-.c-maybe-300 {
-  color: var(--maybe-300) !important;
+.m-sm2 {
+  margin: var(--sm2) !important;
 }
 
-.bdc-maybe-300 {
-  border-color: var(--maybe-300) !important;
+.mt-sm2 {
+  margin-top: var(--sm2) !important;
 }
 
-.bgc-maybe-300 {
-  background-color: var(--maybe-300) !important;
+.mb-sm2 {
+  margin-bottom: var(--sm2) !important;
 }
 
-.c-maybe-400 {
-  color: var(--maybe-400) !important;
+.ml-sm2 {
+  margin-left: var(--sm2) !important;
 }
 
-.bdc-maybe-400 {
-  border-color: var(--maybe-400) !important;
+.mr-sm2 {
+  margin-right: var(--sm2) !important;
 }
 
-.bgc-maybe-400 {
-  background-color: var(--maybe-400) !important;
+.mis-sm2 {
+  margin-inline-start: var(--sm2) !important;
 }
 
-.c-maybe-500 {
-  color: var(--maybe-500) !important;
+.mie-sm2 {
+  margin-inline-end: var(--sm2) !important;
 }
 
-.bdc-maybe-500 {
-  border-color: var(--maybe-500) !important;
+.p-sm2 {
+  padding: var(--sm2) !important;
 }
 
-.bgc-maybe-500 {
-  background-color: var(--maybe-500) !important;
+.pt-sm2 {
+  padding-top: var(--sm2) !important;
 }
+
+.pb-sm2 {
+  padding-bottom: var(--sm2) !important;
 }
-@layer helpers{
 
-/* DEV TOOLS */
+.pl-sm2 {
+  padding-left: var(--sm2) !important;
+}
 
-/* Debug-only helpers. You have to add the classes yourself. */
+.pr-sm2 {
+  padding-right: var(--sm2) !important;
+}
 
-/* Baseline grid overlay: add .dev to <body> while checking vertical rhythm. */
-body.dev {
-  --baseline: 8;
-  background-size: 100% calc(var(--baseline) * 1px) !important;
-  background-image: linear-gradient(
-    to bottom,
-    rgba(0, 0, 0, 0) calc((var(--baseline) - 1) * 1px),
-    hotpink calc(var(--baseline) * 1px)
-  ) !important;
+.pis-sm2 {
+  padding-inline-start: var(--sm2) !important;
 }
 
-/* Fixed error toast, used by components to surface dev-time mistakes
-   (see Hero.astro's slide count check). */
-.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;
+.pie-sm2 {
+  padding-inline-end: var(--sm2) !important;
 }
+
+.w-sm3 {
+  width: var(--sm3) !important;
 }
-@layer helpers{
 
-/* HELPER OVERFLOW */
+.h-sm3 {
+  height: var(--sm3) !important;
+}
 
-.of-auto,
-.overflow-auto {
-  overflow: auto !important;
+.m-sm3 {
+  margin: var(--sm3) !important;
 }
 
-.of-hidden,
-.overflow-hidden {
-  overflow: hidden !important;
+.mt-sm3 {
+  margin-top: var(--sm3) !important;
 }
 
-.of-clip,
-.overflow-clip {
-  overflow: clip !important;
+.mb-sm3 {
+  margin-bottom: var(--sm3) !important;
 }
 
-.of-visible,
-.overflow-visible {
-  overflow: visible !important;
+.ml-sm3 {
+  margin-left: var(--sm3) !important;
 }
 
-.of-scroll,
-.overflow-scroll {
-  overflow: scroll !important;
+.mr-sm3 {
+  margin-right: var(--sm3) !important;
 }
 
-.of-x-auto,
-.overflow-x-auto {
-  overflow-x: auto !important;
+.mis-sm3 {
+  margin-inline-start: var(--sm3) !important;
 }
 
-.of-y-auto,
-.overflow-y-auto {
-  overflow-y: auto !important;
+.mie-sm3 {
+  margin-inline-end: var(--sm3) !important;
 }
 
-.of-x-hidden,
-.overflow-x-hidden {
-  overflow-x: hidden !important;
+.p-sm3 {
+  padding: var(--sm3) !important;
 }
 
-.of-y-hidden,
-.overflow-y-hidden {
-  overflow-y: hidden !important;
+.pt-sm3 {
+  padding-top: var(--sm3) !important;
 }
 
-.of-x-clip,
-.overflow-x-clip {
-  overflow-x: clip !important;
+.pb-sm3 {
+  padding-bottom: var(--sm3) !important;
 }
 
-.of-y-clip,
-.overflow-y-clip {
-  overflow-y: clip !important;
+.pl-sm3 {
+  padding-left: var(--sm3) !important;
 }
 
-.of-x-visible,
-.overflow-x-visible {
-  overflow-x: visible !important;
+.pr-sm3 {
+  padding-right: var(--sm3) !important;
 }
 
-.of-y-visible,
-.overflow-y-visible {
-  overflow-y: visible !important;
+.pis-sm3 {
+  padding-inline-start: var(--sm3) !important;
 }
 
-.of-x-scroll,
-.overflow-x-scroll {
-  overflow-x: scroll !important;
+.pie-sm3 {
+  padding-inline-end: var(--sm3) !important;
 }
 
-.of-y-scroll,
-.overflow-y-scroll {
-  overflow-y: scroll !important;
+.w-md1 {
+  width: var(--md1) !important;
 }
 
-/* HELPER POSITION */
+.h-md1 {
+  height: var(--md1) !important;
+}
 
-.position-static {
-  position: static !important;
+.m-md1 {
+  margin: var(--md1) !important;
 }
 
-.position-fixed {
-  position: fixed !important;
+.mt-md1 {
+  margin-top: var(--md1) !important;
 }
 
-.position-absolute {
-  position: absolute !important;
+.mb-md1 {
+  margin-bottom: var(--md1) !important;
 }
 
-.position-relative {
-  position: relative !important;
+.ml-md1 {
+  margin-left: var(--md1) !important;
 }
 
-.position-sticky {
-  position: sticky !important;
+.mr-md1 {
+  margin-right: var(--md1) !important;
 }
 
-/* HELPER VISIBILITY  */
+.mis-md1 {
+  margin-inline-start: var(--md1) !important;
+}
 
-.visibility-visible {
-  visibility: visible !important;
+.mie-md1 {
+  margin-inline-end: var(--md1) !important;
 }
 
-.visibility-hidden {
-  visibility: hidden !important;
+.p-md1 {
+  padding: var(--md1) !important;
 }
 
-.visibility-collapse {
-  visibility: collapse !important;
+.pt-md1 {
+  padding-top: var(--md1) !important;
 }
 
-/* HELPER Z-INDEX  */
+.pb-md1 {
+  padding-bottom: var(--md1) !important;
+}
 
-.z-auto {
-  z-index: auto !important;
+.pl-md1 {
+  padding-left: var(--md1) !important;
 }
 
-.z-bottom {
-  z-index: var(--z-bottom) !important;
+.pr-md1 {
+  padding-right: var(--md1) !important;
 }
 
-.z-0 {
-  z-index: var(--z-0) !important;
+.pis-md1 {
+  padding-inline-start: var(--md1) !important;
 }
 
-.z-1 {
-  z-index: var(--z-1) !important;
+.pie-md1 {
+  padding-inline-end: var(--md1) !important;
 }
 
-.z-2 {
-  z-index: var(--z-2) !important;
+.w-md2 {
+  width: var(--md2) !important;
 }
 
-.z-3 {
-  z-index: var(--z-3) !important;
+.h-md2 {
+  height: var(--md2) !important;
 }
 
-.z-4 {
-  z-index: var(--z-4) !important;
+.m-md2 {
+  margin: var(--md2) !important;
 }
 
-.z-5 {
-  z-index: var(--z-5) !important;
+.mt-md2 {
+  margin-top: var(--md2) !important;
 }
 
-.z-top {
-  z-index: var(--z-top) !important;
+.mb-md2 {
+  margin-bottom: var(--md2) !important;
 }
+
+.ml-md2 {
+  margin-left: var(--md2) !important;
 }
-@layer helpers{
 
-/* HELPER OPACITY */
+.mr-md2 {
+  margin-right: var(--md2) !important;
+}
 
-.o-0 {
-  opacity: var(--o-0) !important;
+.mis-md2 {
+  margin-inline-start: var(--md2) !important;
 }
 
-.o-1 {
-  opacity: var(--o-1) !important;
+.mie-md2 {
+  margin-inline-end: var(--md2) !important;
 }
 
-.o-2 {
-  opacity: var(--o-2) !important;
+.p-md2 {
+  padding: var(--md2) !important;
 }
 
-.o-3 {
-  opacity: var(--o-3) !important;
+.pt-md2 {
+  padding-top: var(--md2) !important;
 }
 
-.o-4 {
-  opacity: var(--o-4) !important;
+.pb-md2 {
+  padding-bottom: var(--md2) !important;
 }
 
-.o-5 {
-  opacity: var(--o-5) !important;
+.pl-md2 {
+  padding-left: var(--md2) !important;
 }
+
+.pr-md2 {
+  padding-right: var(--md2) !important;
 }
-@layer helpers{
 
-/* HELPER RATIOS */
+.pis-md2 {
+  padding-inline-start: var(--md2) !important;
+}
 
-.ar-square {
-  aspect-ratio: var(--ar-square) !important;
+.pie-md2 {
+  padding-inline-end: var(--md2) !important;
 }
 
-.ar-landscape {
-  aspect-ratio: var(--ar-landscape) !important;
+.w-md3 {
+  width: var(--md3) !important;
 }
 
-.ar-portrait {
-  aspect-ratio: var(--ar-portrait) !important;
+.h-md3 {
+  height: var(--md3) !important;
 }
 
-.ar-widescreen {
-  aspect-ratio: var(--ar-widescreen) !important;
+.m-md3 {
+  margin: var(--md3) !important;
 }
 
-.ar-golden {
-  aspect-ratio: var(--ar-golden) !important;
+.mt-md3 {
+  margin-top: var(--md3) !important;
 }
+
+.mb-md3 {
+  margin-bottom: var(--md3) !important;
 }
-@layer helpers{
-/* HELPER SPACING */
-/* !important is intentional: important layered declarations beat unlayered CSS, so helpers win everywhere */
-/* Generated by src/tools/generate.help.spacing.cjs */
 
-.w-0 {
-  width: 0 !important;
+.ml-md3 {
+  margin-left: var(--md3) !important;
 }
 
-.h-0 {
-  height: 0 !important;
+.mr-md3 {
+  margin-right: var(--md3) !important;
 }
 
-.m-0 {
-  margin: 0 !important;
+.mis-md3 {
+  margin-inline-start: var(--md3) !important;
 }
 
-.mt-0 {
-  margin-top: 0 !important;
+.mie-md3 {
+  margin-inline-end: var(--md3) !important;
 }
 
-.mb-0 {
-  margin-bottom: 0 !important;
+.p-md3 {
+  padding: var(--md3) !important;
 }
 
-.ml-0 {
-  margin-left: 0 !important;
+.pt-md3 {
+  padding-top: var(--md3) !important;
 }
 
-.mr-0 {
-  margin-right: 0 !important;
+.pb-md3 {
+  padding-bottom: var(--md3) !important;
 }
 
-.mis-0 {
-  margin-inline-start: 0 !important;
+.pl-md3 {
+  padding-left: var(--md3) !important;
 }
 
-.mie-0 {
-  margin-inline-end: 0 !important;
+.pr-md3 {
+  padding-right: var(--md3) !important;
 }
 
-.p-0 {
-  padding: 0 !important;
+.pis-md3 {
+  padding-inline-start: var(--md3) !important;
 }
 
-.pt-0 {
-  padding-top: 0 !important;
+.pie-md3 {
+  padding-inline-end: var(--md3) !important;
 }
 
-.pb-0 {
-  padding-bottom: 0 !important;
+.w-lg1 {
+  width: var(--lg1) !important;
 }
 
-.pl-0 {
-  padding-left: 0 !important;
+.h-lg1 {
+  height: var(--lg1) !important;
 }
 
-.pr-0 {
-  padding-right: 0 !important;
+.m-lg1 {
+  margin: var(--lg1) !important;
 }
 
-.pis-0 {
-  padding-inline-start: 0 !important;
+.mt-lg1 {
+  margin-top: var(--lg1) !important;
 }
 
-.pie-0 {
-  padding-inline-end: 0 !important;
+.mb-lg1 {
+  margin-bottom: var(--lg1) !important;
 }
 
-.w-xs1 {
-  width: var(--xs1) !important;
+.ml-lg1 {
+  margin-left: var(--lg1) !important;
 }
 
-.h-xs1 {
-  height: var(--xs1) !important;
+.mr-lg1 {
+  margin-right: var(--lg1) !important;
 }
 
-.m-xs1 {
-  margin: var(--xs1) !important;
+.mis-lg1 {
+  margin-inline-start: var(--lg1) !important;
 }
 
-.mt-xs1 {
-  margin-top: var(--xs1) !important;
+.mie-lg1 {
+  margin-inline-end: var(--lg1) !important;
 }
 
-.mb-xs1 {
-  margin-bottom: var(--xs1) !important;
+.p-lg1 {
+  padding: var(--lg1) !important;
 }
 
-.ml-xs1 {
-  margin-left: var(--xs1) !important;
+.pt-lg1 {
+  padding-top: var(--lg1) !important;
 }
 
-.mr-xs1 {
-  margin-right: var(--xs1) !important;
+.pb-lg1 {
+  padding-bottom: var(--lg1) !important;
 }
 
-.mis-xs1 {
-  margin-inline-start: var(--xs1) !important;
+.pl-lg1 {
+  padding-left: var(--lg1) !important;
 }
 
-.mie-xs1 {
-  margin-inline-end: var(--xs1) !important;
+.pr-lg1 {
+  padding-right: var(--lg1) !important;
 }
 
-.p-xs1 {
-  padding: var(--xs1) !important;
+.pis-lg1 {
+  padding-inline-start: var(--lg1) !important;
 }
 
-.pt-xs1 {
-  padding-top: var(--xs1) !important;
+.pie-lg1 {
+  padding-inline-end: var(--lg1) !important;
 }
 
-.pb-xs1 {
-  padding-bottom: var(--xs1) !important;
+.w-lg2 {
+  width: var(--lg2) !important;
 }
 
-.pl-xs1 {
-  padding-left: var(--xs1) !important;
+.h-lg2 {
+  height: var(--lg2) !important;
 }
 
-.pr-xs1 {
-  padding-right: var(--xs1) !important;
+.m-lg2 {
+  margin: var(--lg2) !important;
 }
 
-.pis-xs1 {
-  padding-inline-start: var(--xs1) !important;
+.mt-lg2 {
+  margin-top: var(--lg2) !important;
 }
 
-.pie-xs1 {
-  padding-inline-end: var(--xs1) !important;
+.mb-lg2 {
+  margin-bottom: var(--lg2) !important;
 }
 
-.w-xs2 {
-  width: var(--xs2) !important;
+.ml-lg2 {
+  margin-left: var(--lg2) !important;
 }
 
-.h-xs2 {
-  height: var(--xs2) !important;
+.mr-lg2 {
+  margin-right: var(--lg2) !important;
 }
 
-.m-xs2 {
-  margin: var(--xs2) !important;
+.mis-lg2 {
+  margin-inline-start: var(--lg2) !important;
 }
 
-.mt-xs2 {
-  margin-top: var(--xs2) !important;
+.mie-lg2 {
+  margin-inline-end: var(--lg2) !important;
 }
 
-.mb-xs2 {
-  margin-bottom: var(--xs2) !important;
+.p-lg2 {
+  padding: var(--lg2) !important;
 }
 
-.ml-xs2 {
-  margin-left: var(--xs2) !important;
+.pt-lg2 {
+  padding-top: var(--lg2) !important;
 }
 
-.mr-xs2 {
-  margin-right: var(--xs2) !important;
+.pb-lg2 {
+  padding-bottom: var(--lg2) !important;
 }
 
-.mis-xs2 {
-  margin-inline-start: var(--xs2) !important;
+.pl-lg2 {
+  padding-left: var(--lg2) !important;
 }
 
-.mie-xs2 {
-  margin-inline-end: var(--xs2) !important;
+.pr-lg2 {
+  padding-right: var(--lg2) !important;
 }
 
-.p-xs2 {
-  padding: var(--xs2) !important;
+.pis-lg2 {
+  padding-inline-start: var(--lg2) !important;
 }
 
-.pt-xs2 {
-  padding-top: var(--xs2) !important;
+.pie-lg2 {
+  padding-inline-end: var(--lg2) !important;
 }
 
-.pb-xs2 {
-  padding-bottom: var(--xs2) !important;
+.w-lg3 {
+  width: var(--lg3) !important;
 }
 
-.pl-xs2 {
-  padding-left: var(--xs2) !important;
+.h-lg3 {
+  height: var(--lg3) !important;
 }
 
-.pr-xs2 {
-  padding-right: var(--xs2) !important;
+.m-lg3 {
+  margin: var(--lg3) !important;
 }
 
-.pis-xs2 {
-  padding-inline-start: var(--xs2) !important;
+.mt-lg3 {
+  margin-top: var(--lg3) !important;
 }
 
-.pie-xs2 {
-  padding-inline-end: var(--xs2) !important;
+.mb-lg3 {
+  margin-bottom: var(--lg3) !important;
 }
 
-.w-xs3 {
-  width: var(--xs3) !important;
+.ml-lg3 {
+  margin-left: var(--lg3) !important;
 }
 
-.h-xs3 {
-  height: var(--xs3) !important;
+.mr-lg3 {
+  margin-right: var(--lg3) !important;
 }
 
-.m-xs3 {
-  margin: var(--xs3) !important;
+.mis-lg3 {
+  margin-inline-start: var(--lg3) !important;
 }
 
-.mt-xs3 {
-  margin-top: var(--xs3) !important;
+.mie-lg3 {
+  margin-inline-end: var(--lg3) !important;
 }
 
-.mb-xs3 {
-  margin-bottom: var(--xs3) !important;
+.p-lg3 {
+  padding: var(--lg3) !important;
 }
 
-.ml-xs3 {
-  margin-left: var(--xs3) !important;
+.pt-lg3 {
+  padding-top: var(--lg3) !important;
 }
 
-.mr-xs3 {
-  margin-right: var(--xs3) !important;
+.pb-lg3 {
+  padding-bottom: var(--lg3) !important;
 }
 
-.mis-xs3 {
-  margin-inline-start: var(--xs3) !important;
+.pl-lg3 {
+  padding-left: var(--lg3) !important;
 }
 
-.mie-xs3 {
-  margin-inline-end: var(--xs3) !important;
+.pr-lg3 {
+  padding-right: var(--lg3) !important;
 }
 
-.p-xs3 {
-  padding: var(--xs3) !important;
+.pis-lg3 {
+  padding-inline-start: var(--lg3) !important;
 }
 
-.pt-xs3 {
-  padding-top: var(--xs3) !important;
+.pie-lg3 {
+  padding-inline-end: var(--lg3) !important;
 }
 
-.pb-xs3 {
-  padding-bottom: var(--xs3) !important;
+.w-xl1 {
+  width: var(--xl1) !important;
 }
 
-.pl-xs3 {
-  padding-left: var(--xs3) !important;
+.h-xl1 {
+  height: var(--xl1) !important;
 }
 
-.pr-xs3 {
-  padding-right: var(--xs3) !important;
+.m-xl1 {
+  margin: var(--xl1) !important;
 }
 
-.pis-xs3 {
-  padding-inline-start: var(--xs3) !important;
+.mt-xl1 {
+  margin-top: var(--xl1) !important;
 }
 
-.pie-xs3 {
-  padding-inline-end: var(--xs3) !important;
+.mb-xl1 {
+  margin-bottom: var(--xl1) !important;
 }
 
-.w-sm1 {
-  width: var(--sm1) !important;
+.ml-xl1 {
+  margin-left: var(--xl1) !important;
 }
 
-.h-sm1 {
-  height: var(--sm1) !important;
+.mr-xl1 {
+  margin-right: var(--xl1) !important;
 }
 
-.m-sm1 {
-  margin: var(--sm1) !important;
+.mis-xl1 {
+  margin-inline-start: var(--xl1) !important;
 }
 
-.mt-sm1 {
-  margin-top: var(--sm1) !important;
+.mie-xl1 {
+  margin-inline-end: var(--xl1) !important;
 }
 
-.mb-sm1 {
-  margin-bottom: var(--sm1) !important;
+.p-xl1 {
+  padding: var(--xl1) !important;
 }
 
-.ml-sm1 {
-  margin-left: var(--sm1) !important;
+.pt-xl1 {
+  padding-top: var(--xl1) !important;
 }
 
-.mr-sm1 {
-  margin-right: var(--sm1) !important;
+.pb-xl1 {
+  padding-bottom: var(--xl1) !important;
 }
 
-.mis-sm1 {
-  margin-inline-start: var(--sm1) !important;
+.pl-xl1 {
+  padding-left: var(--xl1) !important;
 }
 
-.mie-sm1 {
-  margin-inline-end: var(--sm1) !important;
+.pr-xl1 {
+  padding-right: var(--xl1) !important;
 }
 
-.p-sm1 {
-  padding: var(--sm1) !important;
+.pis-xl1 {
+  padding-inline-start: var(--xl1) !important;
 }
 
-.pt-sm1 {
-  padding-top: var(--sm1) !important;
+.pie-xl1 {
+  padding-inline-end: var(--xl1) !important;
 }
 
-.pb-sm1 {
-  padding-bottom: var(--sm1) !important;
+.w-xl2 {
+  width: var(--xl2) !important;
 }
 
-.pl-sm1 {
-  padding-left: var(--sm1) !important;
+.h-xl2 {
+  height: var(--xl2) !important;
 }
 
-.pr-sm1 {
-  padding-right: var(--sm1) !important;
+.m-xl2 {
+  margin: var(--xl2) !important;
 }
 
-.pis-sm1 {
-  padding-inline-start: var(--sm1) !important;
+.mt-xl2 {
+  margin-top: var(--xl2) !important;
 }
 
-.pie-sm1 {
-  padding-inline-end: var(--sm1) !important;
+.mb-xl2 {
+  margin-bottom: var(--xl2) !important;
 }
 
-.w-sm2 {
-  width: var(--sm2) !important;
+.ml-xl2 {
+  margin-left: var(--xl2) !important;
 }
 
-.h-sm2 {
-  height: var(--sm2) !important;
+.mr-xl2 {
+  margin-right: var(--xl2) !important;
 }
 
-.m-sm2 {
-  margin: var(--sm2) !important;
+.mis-xl2 {
+  margin-inline-start: var(--xl2) !important;
 }
 
-.mt-sm2 {
-  margin-top: var(--sm2) !important;
+.mie-xl2 {
+  margin-inline-end: var(--xl2) !important;
 }
 
-.mb-sm2 {
-  margin-bottom: var(--sm2) !important;
+.p-xl2 {
+  padding: var(--xl2) !important;
 }
 
-.ml-sm2 {
-  margin-left: var(--sm2) !important;
+.pt-xl2 {
+  padding-top: var(--xl2) !important;
 }
 
-.mr-sm2 {
-  margin-right: var(--sm2) !important;
+.pb-xl2 {
+  padding-bottom: var(--xl2) !important;
 }
 
-.mis-sm2 {
-  margin-inline-start: var(--sm2) !important;
+.pl-xl2 {
+  padding-left: var(--xl2) !important;
 }
 
-.mie-sm2 {
-  margin-inline-end: var(--sm2) !important;
+.pr-xl2 {
+  padding-right: var(--xl2) !important;
 }
 
-.p-sm2 {
-  padding: var(--sm2) !important;
+.pis-xl2 {
+  padding-inline-start: var(--xl2) !important;
 }
 
-.pt-sm2 {
-  padding-top: var(--sm2) !important;
+.pie-xl2 {
+  padding-inline-end: var(--xl2) !important;
 }
 
-.pb-sm2 {
-  padding-bottom: var(--sm2) !important;
+.w-xl3 {
+  width: var(--xl3) !important;
 }
 
-.pl-sm2 {
-  padding-left: var(--sm2) !important;
+.h-xl3 {
+  height: var(--xl3) !important;
 }
 
-.pr-sm2 {
-  padding-right: var(--sm2) !important;
+.m-xl3 {
+  margin: var(--xl3) !important;
 }
 
-.pis-sm2 {
-  padding-inline-start: var(--sm2) !important;
+.mt-xl3 {
+  margin-top: var(--xl3) !important;
 }
 
-.pie-sm2 {
-  padding-inline-end: var(--sm2) !important;
+.mb-xl3 {
+  margin-bottom: var(--xl3) !important;
 }
 
-.w-sm3 {
-  width: var(--sm3) !important;
+.ml-xl3 {
+  margin-left: var(--xl3) !important;
 }
 
-.h-sm3 {
-  height: var(--sm3) !important;
+.mr-xl3 {
+  margin-right: var(--xl3) !important;
 }
 
-.m-sm3 {
-  margin: var(--sm3) !important;
+.mis-xl3 {
+  margin-inline-start: var(--xl3) !important;
 }
 
-.mt-sm3 {
-  margin-top: var(--sm3) !important;
+.mie-xl3 {
+  margin-inline-end: var(--xl3) !important;
 }
 
-.mb-sm3 {
-  margin-bottom: var(--sm3) !important;
+.p-xl3 {
+  padding: var(--xl3) !important;
 }
 
-.ml-sm3 {
-  margin-left: var(--sm3) !important;
+.pt-xl3 {
+  padding-top: var(--xl3) !important;
 }
 
-.mr-sm3 {
-  margin-right: var(--sm3) !important;
+.pb-xl3 {
+  padding-bottom: var(--xl3) !important;
 }
 
-.mis-sm3 {
-  margin-inline-start: var(--sm3) !important;
+.pl-xl3 {
+  padding-left: var(--xl3) !important;
 }
 
-.mie-sm3 {
-  margin-inline-end: var(--sm3) !important;
+.pr-xl3 {
+  padding-right: var(--xl3) !important;
 }
 
-.p-sm3 {
-  padding: var(--sm3) !important;
+.pis-xl3 {
+  padding-inline-start: var(--xl3) !important;
 }
 
-.pt-sm3 {
-  padding-top: var(--sm3) !important;
+.pie-xl3 {
+  padding-inline-end: var(--xl3) !important;
 }
 
-.pb-sm3 {
-  padding-bottom: var(--sm3) !important;
+.w-xxl1 {
+  width: var(--xxl1) !important;
 }
 
-.pl-sm3 {
-  padding-left: var(--sm3) !important;
+.h-xxl1 {
+  height: var(--xxl1) !important;
 }
 
-.pr-sm3 {
-  padding-right: var(--sm3) !important;
+.m-xxl1 {
+  margin: var(--xxl1) !important;
 }
 
-.pis-sm3 {
-  padding-inline-start: var(--sm3) !important;
+.mt-xxl1 {
+  margin-top: var(--xxl1) !important;
 }
 
-.pie-sm3 {
-  padding-inline-end: var(--sm3) !important;
+.mb-xxl1 {
+  margin-bottom: var(--xxl1) !important;
 }
 
-.w-md1 {
-  width: var(--md1) !important;
+.ml-xxl1 {
+  margin-left: var(--xxl1) !important;
 }
 
-.h-md1 {
-  height: var(--md1) !important;
+.mr-xxl1 {
+  margin-right: var(--xxl1) !important;
 }
 
-.m-md1 {
-  margin: var(--md1) !important;
+.mis-xxl1 {
+  margin-inline-start: var(--xxl1) !important;
 }
 
-.mt-md1 {
-  margin-top: var(--md1) !important;
+.mie-xxl1 {
+  margin-inline-end: var(--xxl1) !important;
 }
 
-.mb-md1 {
-  margin-bottom: var(--md1) !important;
+.p-xxl1 {
+  padding: var(--xxl1) !important;
 }
 
-.ml-md1 {
-  margin-left: var(--md1) !important;
+.pt-xxl1 {
+  padding-top: var(--xxl1) !important;
 }
 
-.mr-md1 {
-  margin-right: var(--md1) !important;
+.pb-xxl1 {
+  padding-bottom: var(--xxl1) !important;
 }
 
-.mis-md1 {
-  margin-inline-start: var(--md1) !important;
+.pl-xxl1 {
+  padding-left: var(--xxl1) !important;
 }
 
-.mie-md1 {
-  margin-inline-end: var(--md1) !important;
+.pr-xxl1 {
+  padding-right: var(--xxl1) !important;
 }
 
-.p-md1 {
-  padding: var(--md1) !important;
+.pis-xxl1 {
+  padding-inline-start: var(--xxl1) !important;
 }
 
-.pt-md1 {
-  padding-top: var(--md1) !important;
+.pie-xxl1 {
+  padding-inline-end: var(--xxl1) !important;
 }
 
-.pb-md1 {
-  padding-bottom: var(--md1) !important;
+.w-xxl2 {
+  width: var(--xxl2) !important;
 }
 
-.pl-md1 {
-  padding-left: var(--md1) !important;
+.h-xxl2 {
+  height: var(--xxl2) !important;
 }
 
-.pr-md1 {
-  padding-right: var(--md1) !important;
+.m-xxl2 {
+  margin: var(--xxl2) !important;
 }
 
-.pis-md1 {
-  padding-inline-start: var(--md1) !important;
+.mt-xxl2 {
+  margin-top: var(--xxl2) !important;
 }
 
-.pie-md1 {
-  padding-inline-end: var(--md1) !important;
+.mb-xxl2 {
+  margin-bottom: var(--xxl2) !important;
 }
 
-.w-md2 {
-  width: var(--md2) !important;
+.ml-xxl2 {
+  margin-left: var(--xxl2) !important;
 }
 
-.h-md2 {
-  height: var(--md2) !important;
+.mr-xxl2 {
+  margin-right: var(--xxl2) !important;
 }
 
-.m-md2 {
-  margin: var(--md2) !important;
+.mis-xxl2 {
+  margin-inline-start: var(--xxl2) !important;
 }
 
-.mt-md2 {
-  margin-top: var(--md2) !important;
+.mie-xxl2 {
+  margin-inline-end: var(--xxl2) !important;
 }
 
-.mb-md2 {
-  margin-bottom: var(--md2) !important;
+.p-xxl2 {
+  padding: var(--xxl2) !important;
 }
 
-.ml-md2 {
-  margin-left: var(--md2) !important;
+.pt-xxl2 {
+  padding-top: var(--xxl2) !important;
 }
 
-.mr-md2 {
-  margin-right: var(--md2) !important;
+.pb-xxl2 {
+  padding-bottom: var(--xxl2) !important;
 }
 
-.mis-md2 {
-  margin-inline-start: var(--md2) !important;
+.pl-xxl2 {
+  padding-left: var(--xxl2) !important;
 }
 
-.mie-md2 {
-  margin-inline-end: var(--md2) !important;
+.pr-xxl2 {
+  padding-right: var(--xxl2) !important;
 }
 
-.p-md2 {
-  padding: var(--md2) !important;
+.pis-xxl2 {
+  padding-inline-start: var(--xxl2) !important;
 }
 
-.pt-md2 {
-  padding-top: var(--md2) !important;
+.pie-xxl2 {
+  padding-inline-end: var(--xxl2) !important;
 }
 
-.pb-md2 {
-  padding-bottom: var(--md2) !important;
+.w-xxl3 {
+  width: var(--xxl3) !important;
 }
 
-.pl-md2 {
-  padding-left: var(--md2) !important;
+.h-xxl3 {
+  height: var(--xxl3) !important;
 }
 
-.pr-md2 {
-  padding-right: var(--md2) !important;
+.m-xxl3 {
+  margin: var(--xxl3) !important;
 }
 
-.pis-md2 {
-  padding-inline-start: var(--md2) !important;
+.mt-xxl3 {
+  margin-top: var(--xxl3) !important;
 }
 
-.pie-md2 {
-  padding-inline-end: var(--md2) !important;
+.mb-xxl3 {
+  margin-bottom: var(--xxl3) !important;
 }
 
-.w-md3 {
-  width: var(--md3) !important;
+.ml-xxl3 {
+  margin-left: var(--xxl3) !important;
 }
 
-.h-md3 {
-  height: var(--md3) !important;
+.mr-xxl3 {
+  margin-right: var(--xxl3) !important;
 }
 
-.m-md3 {
-  margin: var(--md3) !important;
+.mis-xxl3 {
+  margin-inline-start: var(--xxl3) !important;
 }
 
-.mt-md3 {
-  margin-top: var(--md3) !important;
+.mie-xxl3 {
+  margin-inline-end: var(--xxl3) !important;
 }
 
-.mb-md3 {
-  margin-bottom: var(--md3) !important;
+.p-xxl3 {
+  padding: var(--xxl3) !important;
 }
 
-.ml-md3 {
-  margin-left: var(--md3) !important;
+.pt-xxl3 {
+  padding-top: var(--xxl3) !important;
 }
 
-.mr-md3 {
-  margin-right: var(--md3) !important;
+.pb-xxl3 {
+  padding-bottom: var(--xxl3) !important;
 }
 
-.mis-md3 {
-  margin-inline-start: var(--md3) !important;
+.pl-xxl3 {
+  padding-left: var(--xxl3) !important;
 }
 
-.mie-md3 {
-  margin-inline-end: var(--md3) !important;
+.pr-xxl3 {
+  padding-right: var(--xxl3) !important;
 }
 
-.p-md3 {
-  padding: var(--md3) !important;
+.pis-xxl3 {
+  padding-inline-start: var(--xxl3) !important;
 }
 
-.pt-md3 {
-  padding-top: var(--md3) !important;
+.pie-xxl3 {
+  padding-inline-end: var(--xxl3) !important;
 }
 
-.pb-md3 {
-  padding-bottom: var(--md3) !important;
+.w-mega1 {
+  width: var(--mega1) !important;
 }
 
-.pl-md3 {
-  padding-left: var(--md3) !important;
+.h-mega1 {
+  height: var(--mega1) !important;
 }
 
-.pr-md3 {
-  padding-right: var(--md3) !important;
+.m-mega1 {
+  margin: var(--mega1) !important;
 }
 
-.pis-md3 {
-  padding-inline-start: var(--md3) !important;
+.mt-mega1 {
+  margin-top: var(--mega1) !important;
 }
 
-.pie-md3 {
-  padding-inline-end: var(--md3) !important;
+.mb-mega1 {
+  margin-bottom: var(--mega1) !important;
 }
 
-.w-lg1 {
-  width: var(--lg1) !important;
+.ml-mega1 {
+  margin-left: var(--mega1) !important;
 }
 
-.h-lg1 {
-  height: var(--lg1) !important;
+.mr-mega1 {
+  margin-right: var(--mega1) !important;
 }
 
-.m-lg1 {
-  margin: var(--lg1) !important;
+.mis-mega1 {
+  margin-inline-start: var(--mega1) !important;
 }
 
-.mt-lg1 {
-  margin-top: var(--lg1) !important;
+.mie-mega1 {
+  margin-inline-end: var(--mega1) !important;
 }
 
-.mb-lg1 {
-  margin-bottom: var(--lg1) !important;
+.p-mega1 {
+  padding: var(--mega1) !important;
 }
 
-.ml-lg1 {
-  margin-left: var(--lg1) !important;
+.pt-mega1 {
+  padding-top: var(--mega1) !important;
 }
 
-.mr-lg1 {
-  margin-right: var(--lg1) !important;
+.pb-mega1 {
+  padding-bottom: var(--mega1) !important;
 }
 
-.mis-lg1 {
-  margin-inline-start: var(--lg1) !important;
+.pl-mega1 {
+  padding-left: var(--mega1) !important;
 }
 
-.mie-lg1 {
-  margin-inline-end: var(--lg1) !important;
+.pr-mega1 {
+  padding-right: var(--mega1) !important;
 }
 
-.p-lg1 {
-  padding: var(--lg1) !important;
+.pis-mega1 {
+  padding-inline-start: var(--mega1) !important;
 }
 
-.pt-lg1 {
-  padding-top: var(--lg1) !important;
+.pie-mega1 {
+  padding-inline-end: var(--mega1) !important;
 }
 
-.pb-lg1 {
-  padding-bottom: var(--lg1) !important;
+.w-mega2 {
+  width: var(--mega2) !important;
 }
 
-.pl-lg1 {
-  padding-left: var(--lg1) !important;
+.h-mega2 {
+  height: var(--mega2) !important;
 }
 
-.pr-lg1 {
-  padding-right: var(--lg1) !important;
+.m-mega2 {
+  margin: var(--mega2) !important;
 }
 
-.pis-lg1 {
-  padding-inline-start: var(--lg1) !important;
+.mt-mega2 {
+  margin-top: var(--mega2) !important;
 }
 
-.pie-lg1 {
-  padding-inline-end: var(--lg1) !important;
+.mb-mega2 {
+  margin-bottom: var(--mega2) !important;
 }
 
-.w-lg2 {
-  width: var(--lg2) !important;
+.ml-mega2 {
+  margin-left: var(--mega2) !important;
 }
 
-.h-lg2 {
-  height: var(--lg2) !important;
+.mr-mega2 {
+  margin-right: var(--mega2) !important;
 }
 
-.m-lg2 {
-  margin: var(--lg2) !important;
+.mis-mega2 {
+  margin-inline-start: var(--mega2) !important;
 }
 
-.mt-lg2 {
-  margin-top: var(--lg2) !important;
+.mie-mega2 {
+  margin-inline-end: var(--mega2) !important;
 }
 
-.mb-lg2 {
-  margin-bottom: var(--lg2) !important;
+.p-mega2 {
+  padding: var(--mega2) !important;
 }
 
-.ml-lg2 {
-  margin-left: var(--lg2) !important;
+.pt-mega2 {
+  padding-top: var(--mega2) !important;
 }
 
-.mr-lg2 {
-  margin-right: var(--lg2) !important;
+.pb-mega2 {
+  padding-bottom: var(--mega2) !important;
 }
 
-.mis-lg2 {
-  margin-inline-start: var(--lg2) !important;
+.pl-mega2 {
+  padding-left: var(--mega2) !important;
 }
 
-.mie-lg2 {
-  margin-inline-end: var(--lg2) !important;
+.pr-mega2 {
+  padding-right: var(--mega2) !important;
 }
 
-.p-lg2 {
-  padding: var(--lg2) !important;
+.pis-mega2 {
+  padding-inline-start: var(--mega2) !important;
 }
 
-.pt-lg2 {
-  padding-top: var(--lg2) !important;
+.pie-mega2 {
+  padding-inline-end: var(--mega2) !important;
 }
 
-.pb-lg2 {
-  padding-bottom: var(--lg2) !important;
+.w-mega3 {
+  width: var(--mega3) !important;
 }
 
-.pl-lg2 {
-  padding-left: var(--lg2) !important;
+.h-mega3 {
+  height: var(--mega3) !important;
 }
 
-.pr-lg2 {
-  padding-right: var(--lg2) !important;
+.m-mega3 {
+  margin: var(--mega3) !important;
 }
 
-.pis-lg2 {
-  padding-inline-start: var(--lg2) !important;
+.mt-mega3 {
+  margin-top: var(--mega3) !important;
 }
 
-.pie-lg2 {
-  padding-inline-end: var(--lg2) !important;
+.mb-mega3 {
+  margin-bottom: var(--mega3) !important;
 }
 
-.w-lg3 {
-  width: var(--lg3) !important;
+.ml-mega3 {
+  margin-left: var(--mega3) !important;
 }
 
-.h-lg3 {
-  height: var(--lg3) !important;
+.mr-mega3 {
+  margin-right: var(--mega3) !important;
 }
 
-.m-lg3 {
-  margin: var(--lg3) !important;
+.mis-mega3 {
+  margin-inline-start: var(--mega3) !important;
 }
 
-.mt-lg3 {
-  margin-top: var(--lg3) !important;
+.mie-mega3 {
+  margin-inline-end: var(--mega3) !important;
 }
 
-.mb-lg3 {
-  margin-bottom: var(--lg3) !important;
+.p-mega3 {
+  padding: var(--mega3) !important;
 }
 
-.ml-lg3 {
-  margin-left: var(--lg3) !important;
+.pt-mega3 {
+  padding-top: var(--mega3) !important;
 }
 
-.mr-lg3 {
-  margin-right: var(--lg3) !important;
+.pb-mega3 {
+  padding-bottom: var(--mega3) !important;
 }
 
-.mis-lg3 {
-  margin-inline-start: var(--lg3) !important;
+.pl-mega3 {
+  padding-left: var(--mega3) !important;
 }
 
-.mie-lg3 {
-  margin-inline-end: var(--lg3) !important;
+.pr-mega3 {
+  padding-right: var(--mega3) !important;
 }
 
-.p-lg3 {
-  padding: var(--lg3) !important;
+.pis-mega3 {
+  padding-inline-start: var(--mega3) !important;
 }
 
-.pt-lg3 {
-  padding-top: var(--lg3) !important;
+.pie-mega3 {
+  padding-inline-end: var(--mega3) !important;
 }
 
-.pb-lg3 {
-  padding-bottom: var(--lg3) !important;
+.w-giga1 {
+  width: var(--giga1) !important;
 }
 
-.pl-lg3 {
-  padding-left: var(--lg3) !important;
+.h-giga1 {
+  height: var(--giga1) !important;
 }
 
-.pr-lg3 {
-  padding-right: var(--lg3) !important;
+.m-giga1 {
+  margin: var(--giga1) !important;
 }
 
-.pis-lg3 {
-  padding-inline-start: var(--lg3) !important;
+.mt-giga1 {
+  margin-top: var(--giga1) !important;
 }
 
-.pie-lg3 {
-  padding-inline-end: var(--lg3) !important;
+.mb-giga1 {
+  margin-bottom: var(--giga1) !important;
 }
 
-.w-xl1 {
-  width: var(--xl1) !important;
+.ml-giga1 {
+  margin-left: var(--giga1) !important;
 }
 
-.h-xl1 {
-  height: var(--xl1) !important;
+.mr-giga1 {
+  margin-right: var(--giga1) !important;
 }
 
-.m-xl1 {
-  margin: var(--xl1) !important;
+.mis-giga1 {
+  margin-inline-start: var(--giga1) !important;
 }
 
-.mt-xl1 {
-  margin-top: var(--xl1) !important;
+.mie-giga1 {
+  margin-inline-end: var(--giga1) !important;
 }
 
-.mb-xl1 {
-  margin-bottom: var(--xl1) !important;
+.p-giga1 {
+  padding: var(--giga1) !important;
 }
 
-.ml-xl1 {
-  margin-left: var(--xl1) !important;
+.pt-giga1 {
+  padding-top: var(--giga1) !important;
 }
 
-.mr-xl1 {
-  margin-right: var(--xl1) !important;
+.pb-giga1 {
+  padding-bottom: var(--giga1) !important;
 }
 
-.mis-xl1 {
-  margin-inline-start: var(--xl1) !important;
+.pl-giga1 {
+  padding-left: var(--giga1) !important;
 }
 
-.mie-xl1 {
-  margin-inline-end: var(--xl1) !important;
+.pr-giga1 {
+  padding-right: var(--giga1) !important;
 }
 
-.p-xl1 {
-  padding: var(--xl1) !important;
+.pis-giga1 {
+  padding-inline-start: var(--giga1) !important;
 }
 
-.pt-xl1 {
-  padding-top: var(--xl1) !important;
+.pie-giga1 {
+  padding-inline-end: var(--giga1) !important;
 }
 
-.pb-xl1 {
-  padding-bottom: var(--xl1) !important;
+.w-giga2 {
+  width: var(--giga2) !important;
 }
 
-.pl-xl1 {
-  padding-left: var(--xl1) !important;
+.h-giga2 {
+  height: var(--giga2) !important;
 }
 
-.pr-xl1 {
-  padding-right: var(--xl1) !important;
+.m-giga2 {
+  margin: var(--giga2) !important;
 }
 
-.pis-xl1 {
-  padding-inline-start: var(--xl1) !important;
+.mt-giga2 {
+  margin-top: var(--giga2) !important;
 }
 
-.pie-xl1 {
-  padding-inline-end: var(--xl1) !important;
+.mb-giga2 {
+  margin-bottom: var(--giga2) !important;
 }
 
-.w-xl2 {
-  width: var(--xl2) !important;
+.ml-giga2 {
+  margin-left: var(--giga2) !important;
 }
 
-.h-xl2 {
-  height: var(--xl2) !important;
+.mr-giga2 {
+  margin-right: var(--giga2) !important;
 }
 
-.m-xl2 {
-  margin: var(--xl2) !important;
+.mis-giga2 {
+  margin-inline-start: var(--giga2) !important;
 }
 
-.mt-xl2 {
-  margin-top: var(--xl2) !important;
+.mie-giga2 {
+  margin-inline-end: var(--giga2) !important;
 }
 
-.mb-xl2 {
-  margin-bottom: var(--xl2) !important;
+.p-giga2 {
+  padding: var(--giga2) !important;
 }
 
-.ml-xl2 {
-  margin-left: var(--xl2) !important;
+.pt-giga2 {
+  padding-top: var(--giga2) !important;
 }
 
-.mr-xl2 {
-  margin-right: var(--xl2) !important;
+.pb-giga2 {
+  padding-bottom: var(--giga2) !important;
 }
 
-.mis-xl2 {
-  margin-inline-start: var(--xl2) !important;
+.pl-giga2 {
+  padding-left: var(--giga2) !important;
 }
 
-.mie-xl2 {
-  margin-inline-end: var(--xl2) !important;
+.pr-giga2 {
+  padding-right: var(--giga2) !important;
 }
 
-.p-xl2 {
-  padding: var(--xl2) !important;
+.pis-giga2 {
+  padding-inline-start: var(--giga2) !important;
 }
 
-.pt-xl2 {
-  padding-top: var(--xl2) !important;
+.pie-giga2 {
+  padding-inline-end: var(--giga2) !important;
 }
 
-.pb-xl2 {
-  padding-bottom: var(--xl2) !important;
+.w-giga3 {
+  width: var(--giga3) !important;
 }
 
-.pl-xl2 {
-  padding-left: var(--xl2) !important;
+.h-giga3 {
+  height: var(--giga3) !important;
 }
 
-.pr-xl2 {
-  padding-right: var(--xl2) !important;
+.m-giga3 {
+  margin: var(--giga3) !important;
 }
 
-.pis-xl2 {
-  padding-inline-start: var(--xl2) !important;
+.mt-giga3 {
+  margin-top: var(--giga3) !important;
 }
 
-.pie-xl2 {
-  padding-inline-end: var(--xl2) !important;
+.mb-giga3 {
+  margin-bottom: var(--giga3) !important;
 }
 
-.w-xl3 {
-  width: var(--xl3) !important;
+.ml-giga3 {
+  margin-left: var(--giga3) !important;
 }
 
-.h-xl3 {
-  height: var(--xl3) !important;
+.mr-giga3 {
+  margin-right: var(--giga3) !important;
 }
 
-.m-xl3 {
-  margin: var(--xl3) !important;
+.mis-giga3 {
+  margin-inline-start: var(--giga3) !important;
 }
 
-.mt-xl3 {
-  margin-top: var(--xl3) !important;
+.mie-giga3 {
+  margin-inline-end: var(--giga3) !important;
 }
 
-.mb-xl3 {
-  margin-bottom: var(--xl3) !important;
+.p-giga3 {
+  padding: var(--giga3) !important;
 }
 
-.ml-xl3 {
-  margin-left: var(--xl3) !important;
+.pt-giga3 {
+  padding-top: var(--giga3) !important;
 }
 
-.mr-xl3 {
-  margin-right: var(--xl3) !important;
+.pb-giga3 {
+  padding-bottom: var(--giga3) !important;
 }
 
-.mis-xl3 {
-  margin-inline-start: var(--xl3) !important;
+.pl-giga3 {
+  padding-left: var(--giga3) !important;
 }
 
-.mie-xl3 {
-  margin-inline-end: var(--xl3) !important;
+.pr-giga3 {
+  padding-right: var(--giga3) !important;
 }
 
-.p-xl3 {
-  padding: var(--xl3) !important;
+.pis-giga3 {
+  padding-inline-start: var(--giga3) !important;
 }
 
-.pt-xl3 {
-  padding-top: var(--xl3) !important;
+.pie-giga3 {
+  padding-inline-end: var(--giga3) !important;
 }
 
-.pb-xl3 {
-  padding-bottom: var(--xl3) !important;
+.w-tera1 {
+  width: var(--tera1) !important;
 }
 
-.pl-xl3 {
-  padding-left: var(--xl3) !important;
+.h-tera1 {
+  height: var(--tera1) !important;
 }
 
-.pr-xl3 {
-  padding-right: var(--xl3) !important;
+.m-tera1 {
+  margin: var(--tera1) !important;
 }
 
-.pis-xl3 {
-  padding-inline-start: var(--xl3) !important;
+.mt-tera1 {
+  margin-top: var(--tera1) !important;
 }
 
-.pie-xl3 {
-  padding-inline-end: var(--xl3) !important;
+.mb-tera1 {
+  margin-bottom: var(--tera1) !important;
 }
 
-.w-xxl1 {
-  width: var(--xxl1) !important;
+.ml-tera1 {
+  margin-left: var(--tera1) !important;
 }
 
-.h-xxl1 {
-  height: var(--xxl1) !important;
+.mr-tera1 {
+  margin-right: var(--tera1) !important;
 }
 
-.m-xxl1 {
-  margin: var(--xxl1) !important;
+.mis-tera1 {
+  margin-inline-start: var(--tera1) !important;
 }
 
-.mt-xxl1 {
-  margin-top: var(--xxl1) !important;
+.mie-tera1 {
+  margin-inline-end: var(--tera1) !important;
 }
 
-.mb-xxl1 {
-  margin-bottom: var(--xxl1) !important;
+.p-tera1 {
+  padding: var(--tera1) !important;
 }
 
-.ml-xxl1 {
-  margin-left: var(--xxl1) !important;
+.pt-tera1 {
+  padding-top: var(--tera1) !important;
 }
 
-.mr-xxl1 {
-  margin-right: var(--xxl1) !important;
+.pb-tera1 {
+  padding-bottom: var(--tera1) !important;
 }
 
-.mis-xxl1 {
-  margin-inline-start: var(--xxl1) !important;
+.pl-tera1 {
+  padding-left: var(--tera1) !important;
 }
 
-.mie-xxl1 {
-  margin-inline-end: var(--xxl1) !important;
+.pr-tera1 {
+  padding-right: var(--tera1) !important;
 }
 
-.p-xxl1 {
-  padding: var(--xxl1) !important;
+.pis-tera1 {
+  padding-inline-start: var(--tera1) !important;
 }
 
-.pt-xxl1 {
-  padding-top: var(--xxl1) !important;
+.pie-tera1 {
+  padding-inline-end: var(--tera1) !important;
 }
 
-.pb-xxl1 {
-  padding-bottom: var(--xxl1) !important;
+.w-tera2 {
+  width: var(--tera2) !important;
 }
 
-.pl-xxl1 {
-  padding-left: var(--xxl1) !important;
+.h-tera2 {
+  height: var(--tera2) !important;
 }
 
-.pr-xxl1 {
-  padding-right: var(--xxl1) !important;
+.m-tera2 {
+  margin: var(--tera2) !important;
 }
 
-.pis-xxl1 {
-  padding-inline-start: var(--xxl1) !important;
+.mt-tera2 {
+  margin-top: var(--tera2) !important;
 }
 
-.pie-xxl1 {
-  padding-inline-end: var(--xxl1) !important;
+.mb-tera2 {
+  margin-bottom: var(--tera2) !important;
 }
 
-.w-xxl2 {
-  width: var(--xxl2) !important;
+.ml-tera2 {
+  margin-left: var(--tera2) !important;
 }
 
-.h-xxl2 {
-  height: var(--xxl2) !important;
+.mr-tera2 {
+  margin-right: var(--tera2) !important;
 }
 
-.m-xxl2 {
-  margin: var(--xxl2) !important;
+.mis-tera2 {
+  margin-inline-start: var(--tera2) !important;
 }
 
-.mt-xxl2 {
-  margin-top: var(--xxl2) !important;
+.mie-tera2 {
+  margin-inline-end: var(--tera2) !important;
 }
 
-.mb-xxl2 {
-  margin-bottom: var(--xxl2) !important;
+.p-tera2 {
+  padding: var(--tera2) !important;
 }
 
-.ml-xxl2 {
-  margin-left: var(--xxl2) !important;
+.pt-tera2 {
+  padding-top: var(--tera2) !important;
 }
 
-.mr-xxl2 {
-  margin-right: var(--xxl2) !important;
+.pb-tera2 {
+  padding-bottom: var(--tera2) !important;
 }
 
-.mis-xxl2 {
-  margin-inline-start: var(--xxl2) !important;
+.pl-tera2 {
+  padding-left: var(--tera2) !important;
 }
 
-.mie-xxl2 {
-  margin-inline-end: var(--xxl2) !important;
+.pr-tera2 {
+  padding-right: var(--tera2) !important;
 }
 
-.p-xxl2 {
-  padding: var(--xxl2) !important;
+.pis-tera2 {
+  padding-inline-start: var(--tera2) !important;
 }
 
-.pt-xxl2 {
-  padding-top: var(--xxl2) !important;
+.pie-tera2 {
+  padding-inline-end: var(--tera2) !important;
 }
 
-.pb-xxl2 {
-  padding-bottom: var(--xxl2) !important;
+.w-tera3 {
+  width: var(--tera3) !important;
 }
 
-.pl-xxl2 {
-  padding-left: var(--xxl2) !important;
+.h-tera3 {
+  height: var(--tera3) !important;
 }
 
-.pr-xxl2 {
-  padding-right: var(--xxl2) !important;
+.m-tera3 {
+  margin: var(--tera3) !important;
 }
 
-.pis-xxl2 {
-  padding-inline-start: var(--xxl2) !important;
+.mt-tera3 {
+  margin-top: var(--tera3) !important;
 }
 
-.pie-xxl2 {
-  padding-inline-end: var(--xxl2) !important;
+.mb-tera3 {
+  margin-bottom: var(--tera3) !important;
 }
 
-.w-xxl3 {
-  width: var(--xxl3) !important;
+.ml-tera3 {
+  margin-left: var(--tera3) !important;
 }
 
-.h-xxl3 {
-  height: var(--xxl3) !important;
+.mr-tera3 {
+  margin-right: var(--tera3) !important;
 }
 
-.m-xxl3 {
-  margin: var(--xxl3) !important;
+.mis-tera3 {
+  margin-inline-start: var(--tera3) !important;
 }
 
-.mt-xxl3 {
-  margin-top: var(--xxl3) !important;
+.mie-tera3 {
+  margin-inline-end: var(--tera3) !important;
 }
 
-.mb-xxl3 {
-  margin-bottom: var(--xxl3) !important;
+.p-tera3 {
+  padding: var(--tera3) !important;
 }
 
-.ml-xxl3 {
-  margin-left: var(--xxl3) !important;
+.pt-tera3 {
+  padding-top: var(--tera3) !important;
 }
 
-.mr-xxl3 {
-  margin-right: var(--xxl3) !important;
+.pb-tera3 {
+  padding-bottom: var(--tera3) !important;
 }
 
-.mis-xxl3 {
-  margin-inline-start: var(--xxl3) !important;
+.pl-tera3 {
+  padding-left: var(--tera3) !important;
 }
 
-.mie-xxl3 {
-  margin-inline-end: var(--xxl3) !important;
+.pr-tera3 {
+  padding-right: var(--tera3) !important;
 }
 
-.p-xxl3 {
-  padding: var(--xxl3) !important;
+.pis-tera3 {
+  padding-inline-start: var(--tera3) !important;
 }
 
-.pt-xxl3 {
-  padding-top: var(--xxl3) !important;
+.pie-tera3 {
+  padding-inline-end: var(--tera3) !important;
 }
-
-.pb-xxl3 {
-  padding-bottom: var(--xxl3) !important;
 }
+@layer helpers{
 
-.pl-xxl3 {
-  padding-left: var(--xxl3) !important;
+/* HELPER TYPOGRAPHY */
+
+/* .h1, .h2, .h3, .h4, .h5, .h6 are in elements.text */
+
+/* FONT FAMILY */
+
+.font-text {
+  font-family: var(--text) !important;
 }
 
-.pr-xxl3 {
-  padding-right: var(--xxl3) !important;
+.font-display {
+  font-family: var(--display) !important;
 }
 
-.pis-xxl3 {
-  padding-inline-start: var(--xxl3) !important;
+.font-mono {
+  font-family: var(--mono) !important;
 }
 
-.pie-xxl3 {
-  padding-inline-end: var(--xxl3) !important;
+/* FONT STYLE */
+
+.font-italic {
+  font-style: italic !important;
 }
 
-.w-mega1 {
-  width: var(--mega1) !important;
+.font-normal {
+  font-style: normal !important;
 }
 
-.h-mega1 {
-  height: var(--mega1) !important;
+/* FONT WEIGHTS */
+
+.font-extra-light {
+  font-weight: var(--extra-light) !important;
 }
 
-.m-mega1 {
-  margin: var(--mega1) !important;
+.font-light {
+  font-weight: var(--light) !important;
 }
 
-.mt-mega1 {
-  margin-top: var(--mega1) !important;
+.font-book {
+  font-weight: var(--book) !important;
 }
 
-.mb-mega1 {
-  margin-bottom: var(--mega1) !important;
+.font-semi-bold {
+  font-weight: var(--semi-bold) !important;
 }
 
-.ml-mega1 {
-  margin-left: var(--mega1) !important;
+.font-bold {
+  font-weight: var(--bold) !important;
 }
 
-.mr-mega1 {
-  margin-right: var(--mega1) !important;
+.font-black {
+  font-weight: var(--black) !important;
 }
 
-.mis-mega1 {
-  margin-inline-start: var(--mega1) !important;
+/* FONT SIZES */
+
+.text-xs {
+  font-size: var(--text-xs) !important;
 }
 
-.mie-mega1 {
-  margin-inline-end: var(--mega1) !important;
+.text-sm {
+  font-size: var(--text-sm) !important;
 }
 
-.p-mega1 {
-  padding: var(--mega1) !important;
+.text-md {
+  font-size: var(--text-md) !important;
 }
 
-.pt-mega1 {
-  padding-top: var(--mega1) !important;
+.text-lg {
+  font-size: var(--text-lg) !important;
 }
 
-.pb-mega1 {
-  padding-bottom: var(--mega1) !important;
+.text-xl {
+  font-size: var(--text-xl) !important;
 }
 
-.pl-mega1 {
-  padding-left: var(--mega1) !important;
+.display-sm {
+  font-size: var(--display-sm) !important;
 }
 
-.pr-mega1 {
-  padding-right: var(--mega1) !important;
+.display-md {
+  font-size: var(--display-md) !important;
 }
 
-.pis-mega1 {
-  padding-inline-start: var(--mega1) !important;
+.display-lg {
+  font-size: var(--display-lg) !important;
 }
 
-.pie-mega1 {
-  padding-inline-end: var(--mega1) !important;
+.display-xl {
+  font-size: var(--display-xl) !important;
 }
 
-.w-mega2 {
-  width: var(--mega2) !important;
+.display-mega {
+  font-size: var(--display-mega) !important;
 }
 
-.h-mega2 {
-  height: var(--mega2) !important;
+.display-giga {
+  font-size: var(--display-giga) !important;
 }
 
-.m-mega2 {
-  margin: var(--mega2) !important;
+/* LETTER SPACING */
+
+.tracking-sm {
+  letter-spacing: var(--tracking-sm) !important;
 }
 
-.mt-mega2 {
-  margin-top: var(--mega2) !important;
+.tracking-md {
+  letter-spacing: var(--tracking-md) !important;
 }
 
-.mb-mega2 {
-  margin-bottom: var(--mega2) !important;
+.tracking-lg {
+  letter-spacing: var(--tracking-lg) !important;
 }
 
-.ml-mega2 {
-  margin-left: var(--mega2) !important;
+.tracking-xl {
+  letter-spacing: var(--tracking-xl) !important;
 }
 
-.mr-mega2 {
-  margin-right: var(--mega2) !important;
+.tracking-xxl {
+  letter-spacing: var(--tracking-xxl) !important;
 }
 
-.mis-mega2 {
-  margin-inline-start: var(--mega2) !important;
+/* LINE HEIGHT */
+
+.leading-xs {
+  line-height: var(--leading-xs) !important;
 }
 
-.mie-mega2 {
-  margin-inline-end: var(--mega2) !important;
+.leading-sm {
+  line-height: var(--leading-sm) !important;
 }
 
-.p-mega2 {
-  padding: var(--mega2) !important;
+.leading-md {
+  line-height: var(--leading-md) !important;
 }
 
-.pt-mega2 {
-  padding-top: var(--mega2) !important;
+.leading-lg {
+  line-height: var(--leading-lg) !important;
 }
 
-.pb-mega2 {
-  padding-bottom: var(--mega2) !important;
+.leading-xl {
+  line-height: var(--leading-xl) !important;
 }
 
-.pl-mega2 {
-  padding-left: var(--mega2) !important;
+.leading-xxl {
+  line-height: var(--leading-xxl) !important;
 }
 
-.pr-mega2 {
-  padding-right: var(--mega2) !important;
+/* TEXT ALIGN */
+
+.text-left {
+  text-align: left !important;
 }
 
-.pis-mega2 {
-  padding-inline-start: var(--mega2) !important;
+.text-center {
+  text-align: center !important;
 }
 
-.pie-mega2 {
-  padding-inline-end: var(--mega2) !important;
+.text-right {
+  text-align: right !important;
 }
 
-.w-mega3 {
-  width: var(--mega3) !important;
+.text-justify {
+  text-align: justify !important;
 }
 
-.h-mega3 {
-  height: var(--mega3) !important;
+.text-start {
+  text-align: start !important;
 }
 
-.m-mega3 {
-  margin: var(--mega3) !important;
+.text-end {
+  text-align: end !important;
 }
 
-.mt-mega3 {
-  margin-top: var(--mega3) !important;
+/* TEXT TRANSFORM */
+
+.text-uppercase {
+  text-transform: uppercase !important;
 }
 
-.mb-mega3 {
-  margin-bottom: var(--mega3) !important;
+.text-lowercase {
+  text-transform: lowercase !important;
 }
 
-.ml-mega3 {
-  margin-left: var(--mega3) !important;
+.text-capitalize {
+  text-transform: capitalize !important;
 }
-
-.mr-mega3 {
-  margin-right: var(--mega3) !important;
 }
+/* DEFAULT THEME */
 
-.mis-mega3 {
-  margin-inline-start: var(--mega3) !important;
-}
+/*
+  Basic design tokens and UI abstractions
+  Import it next to mcss.css
 
-.mie-mega3 {
-  margin-inline-end: var(--mega3) !important;
-}
+    @import url(./framework/mcss.css);
+    @import url(./framework/theme.default.css);
 
-.p-mega3 {
-  padding: var(--mega3) !important;
-}
+  mcss.css imports no theme itself; without this file every token is unset
+  and the page will look broken..
 
-.pt-mega3 {
-  padding-top: var(--mega3) !important;
-}
+  Don't edit the  default theme.
 
-.pb-mega3 {
-  padding-bottom: var(--mega3) !important;
-}
+  To make your own theme,  either duplicate/rename the 2 files below and
+  import theme instead of the default, or just override the bits you want
+  to change and imported that AFTER the defaults. There is `theme.starter.css`
+  to get you started if you want to go that road (recommended)).
+*/
 
-.pl-mega3 {
-  padding-left: var(--mega3) !important;
-}
+/* Defensive redundancy - Same layers as in mcss.css */
 
-.pr-mega3 {
-  padding-right: var(--mega3) !important;
-}
+@layer theme.default{
 
-.pis-mega3 {
-  padding-inline-start: var(--mega3) !important;
-}
+/* DEFAULT THEME: TOKENS */
 
-.pie-mega3 {
-  padding-inline-end: var(--mega3) !important;
-}
+/*
+  Raw design tokens. Part of the default theme (see theme.default.css);
+  Don't edit this file directly. Thee best way is to Override it with your
+  own theme (see theme.starter.css).
 
-.w-giga1 {
-  width: var(--giga1) !important;
-}
+  Can't use var() inside media queries, so breakpoints are hard coded in
+  settings.media-queries.css instead of custom properties
+  xxs: 240px xs: 360px sm: 480px md: 768px lg: 1024px xl: 1440px xxl: 1920px
+*/
 
-.h-giga1 {
-  height: var(--giga1) !important;
-}
+/*
 
-.m-giga1 {
-  margin: var(--giga1) !important;
-}
+• Dimensions (Margin, Padding, Width, Height)
+• Aspect Ratios
 
-.mt-giga1 {
-  margin-top: var(--giga1) !important;
-}
+• Font Families
+• Font Size
+• Font Weight
 
-.mb-giga1 {
-  margin-bottom: var(--giga1) !important;
-}
+• Letter Spacing
+• Line Height
 
-.ml-giga1 {
-  margin-left: var(--giga1) !important;
-}
+• Colors
 
-.mr-giga1 {
-  margin-right: var(--giga1) !important;
-}
+• Border width
+• Border radius
 
-.mis-giga1 {
-  margin-inline-start: var(--giga1) !important;
-}
+• Box shadows
 
-.mie-giga1 {
-  margin-inline-end: var(--giga1) !important;
-}
+• Opacity
 
-.p-giga1 {
-  padding: var(--giga1) !important;
-}
+• Z-index
 
-.pt-giga1 {
-  padding-top: var(--giga1) !important;
-}
+• Transitions
 
-.pb-giga1 {
-  padding-bottom: var(--giga1) !important;
-}
+*/
 
-.pl-giga1 {
-  padding-left: var(--giga1) !important;
-}
+:root {
 
-.pr-giga1 {
-  padding-right: var(--giga1) !important;
-}
+  /* DIMENSIONS */
 
-.pis-giga1 {
-  padding-inline-start: var(--giga1) !important;
-}
+  --xs1: 4px;
+  --xs2: 8px;
+  --xs3: 12px;
 
-.pie-giga1 {
-  padding-inline-end: var(--giga1) !important;
-}
+  --sm1: 16px;
+  --sm2: 20px;
+  --sm3: 24px;
 
-.w-giga2 {
-  width: var(--giga2) !important;
-}
+  --md1: 28px;
+  --md2: 32px;
+  --md3: 36px;
 
-.h-giga2 {
-  height: var(--giga2) !important;
-}
+  --lg1: 40px;
+  --lg2: 44px;
+  --lg3: 48px;
 
-.m-giga2 {
-  margin: var(--giga2) !important;
-}
+  --xl1: 56px;
+  --xl2: 64px;
+  --xl3: 80px;
 
-.mt-giga2 {
-  margin-top: var(--giga2) !important;
-}
+  --xxl1: 96px;
+  --xxl2: 112px;
+  --xxl3: 128px;
 
-.mb-giga2 {
-  margin-bottom: var(--giga2) !important;
-}
+  --mega1: 160px;
+  --mega2: 192px;
+  --mega3: 224px;
 
-.ml-giga2 {
-  margin-left: var(--giga2) !important;
-}
+  --giga1: 256px;
+  --giga2: 288px;
+  --giga3: 320px;
 
-.mr-giga2 {
-  margin-right: var(--giga2) !important;
-}
+  --tera1: 384px;
+  --tera2: 480px;
+  --tera3: 520px;
 
-.mis-giga2 {
-  margin-inline-start: var(--giga2) !important;
-}
+  /* ASPECT RATIOS */
 
-.mie-giga2 {
-  margin-inline-end: var(--giga2) !important;
-}
+  --ar-square: 1;
+  --ar-landscape: 4/3;
+  --ar-portrait: 3/4;
+  --ar-widescreen: 16/9;
+  --ar-golden: 1.618/1;
 
-.p-giga2 {
-  padding: var(--giga2) !important;
-}
+  /*  */
 
-.pt-giga2 {
-  padding-top: var(--giga2) !important;
-}
+  /* (More typography in elements.text & help.text)  */
 
-.pb-giga2 {
-  padding-bottom: var(--giga2) !important;
-}
+  /* FONT FAMILIES (https://modernfontstacks.com) */
 
-.pl-giga2 {
-  padding-left: var(--giga2) !important;
-}
+  --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;
 
-.pr-giga2 {
-  padding-right: var(--giga2) !important;
-}
+  /* FONT SIZES (https://typescale.com) */
 
-.pis-giga2 {
-  padding-inline-start: var(--giga2) !important;
-}
+  --text-xs: 0.694rem;
+  --text-sm: 0.833rem;
+  --text-md: 1rem;
+  --text-lg: 1.2rem;
+  --text-xl: 1.44rem;
+  --display-sm: 1.728rem;
+  --display-md: 2.074rem;
+  --display-lg: 2.488rem;
+  --display-xl: 2.986rem; /* h1 */
+  --display-mega: 3.583rem;
+  --display-giga: 4.299rem;
 
-.pie-giga2 {
-  padding-inline-end: var(--giga2) !important;
-}
+  /* FONT WEIGHTS */
 
-.w-giga3 {
-  width: var(--giga3) !important;
-}
+  --extra-light: 200;
+  --light: 300;
+  --book: 400;
+  --semi-bold: 600;
+  --bold: 700;
+  --black: 900;
 
-.h-giga3 {
-  height: var(--giga3) !important;
-}
+  /* LETTER SPACING */
 
-.m-giga3 {
-  margin: var(--giga3) !important;
-}
+  --tracking-sm: -0.05em;
+  --tracking-md: 0.025em;
+  --tracking-lg: 0.05em;
+  --tracking-xl: 0.075em;
+  --tracking-xxl: 0.15em;
 
-.mt-giga3 {
-  margin-top: var(--giga3) !important;
-}
+  /* LINE HEIGHT */
 
-.mb-giga3 {
-  margin-bottom: var(--giga3) !important;
-}
+  --leading-xs: 1;
+  --leading-sm: 1.15;
+  --leading-md: 1.375;
+  --leading-lg: 1.5;
+  --leading-xl: 1.75;
+  --leading-xxl: 2;
+
+  /* COLORS (https://www.tints.dev) */
+
+  /* Base */
+
+  --base-0: #fff;
+  --base-50: #f6f7f9;
+  --base-100: #edeef1;
+  --base-200: #d6dbe1;
+  --base-300: #b2bbc7;
+  --base-400: #8897a8;
+  --base-500: #697a8e;
+  --base-600: #546375;
+  --base-700: #4a5666;
+  --base-800: #3c4550;
+  --base-900: #353c45;
+  --base-950: #23282e;
+
+  /* Primary */
 
-.ml-giga3 {
-  margin-left: var(--giga3) !important;
-}
+  --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;
 
-.mr-giga3 {
-  margin-right: var(--giga3) !important;
-}
+  /* Feedback */
 
-.mis-giga3 {
-  margin-inline-start: var(--giga3) !important;
-}
+  --yes-100: #d5f6e8;
+  --yes-200: #afebd4;
+  --yes-300: #7adbbd;
+  --yes-400: #46c4a0;
+  --yes-500: #13886d;
 
-.mie-giga3 {
-  margin-inline-end: var(--giga3) !important;
-}
+  --no-100: #ffe4e6;
+  --no-200: #fecdd3;
+  --no-300: #fda4af;
+  --no-400: #fb7185;
+  --no-500: #e11d48;
 
-.p-giga3 {
-  padding: var(--giga3) !important;
-}
+  --maybe-100: #fff7d6;
+  --maybe-200: #fff0b3;
+  --maybe-300: #ffd64a;
+  --maybe-400: #ffc220;
+  --maybe-500: #f9a007;
 
-.pt-giga3 {
-  padding-top: var(--giga3) !important;
-}
+  /* Highlight (text marker) */
 
-.pb-giga3 {
-  padding-bottom: var(--giga3) !important;
-}
+  --highlight-500: #ffee00;
 
-.pl-giga3 {
-  padding-left: var(--giga3) !important;
-}
+  /* BORDERS */
 
-.pr-giga3 {
-  padding-right: var(--giga3) !important;
-}
+  --border-sm: 1px;
+  --border-md: 2px;
+  --border-lg: 4px;
+  --border-xl: 8px;
+  --border-xxl: 12px;
 
-.pis-giga3 {
-  padding-inline-start: var(--giga3) !important;
-}
+  --radius-sm: 3px;
+  --radius-md: 5px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius-xxl: 16px;
+  --radius-round: 1e5px;
 
-.pie-giga3 {
-  padding-inline-end: var(--giga3) !important;
-}
+  /* DROP SHADOWS  */
 
-.w-tera1 {
-  width: var(--tera1) !important;
-}
+  --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);
 
-.h-tera1 {
-  height: var(--tera1) !important;
-}
+  /* OPACITY */
 
-.m-tera1 {
-  margin: var(--tera1) !important;
-}
+  --o-0: 0; /* overkill for consistency */
+  --o-1: 0.2;
+  --o-2: 0.4;
+  --o-3: 0.6;
+  --o-4: 0.8;
+  --o-5: 1;
 
-.mt-tera1 {
-  margin-top: var(--tera1) !important;
-}
+  /* Z-INDEX */
 
-.mb-tera1 {
-  margin-bottom: var(--tera1) !important;
-}
+  --z-bottom: -1000000000;
+  --z-0: 0; /* overkill for consistency */
+  --z-1: 10;
+  --z-2: 20;
+  --z-3: 30;
+  --z-4: 40;
+  --z-5: 50;
+  --z-top: 1000000000;
 
-.ml-tera1 {
-  margin-left: var(--tera1) !important;
-}
+  /* TRANSITIONS */
 
-.mr-tera1 {
-  margin-right: var(--tera1) !important;
+  --transition: 220ms ease-in-out;
+  --transition-fast: 100ms ease-in-out;
 }
-
-.mis-tera1 {
-  margin-inline-start: var(--tera1) !important;
 }
 
-.mie-tera1 {
-  margin-inline-end: var(--tera1) !important;
-}
+@layer theme.default{
 
-.p-tera1 {
-  padding: var(--tera1) !important;
-}
+/* DEFAULT THEME: UI */
 
-.pt-tera1 {
-  padding-top: var(--tera1) !important;
-}
+/*
+  Tokens here are one abstraction level above raw tokens
+  They define styling for elements, components, or a shared style.
 
-.pb-tera1 {
-  padding-bottom: var(--tera1) !important;
-}
+  Values, in order of preference:
+  1. Another ui token, when the meaning is shared
+     `--input-border-color: var(--ui-border-color)`
+  2. A raw token: `--fieldset-padding: var(--sm3)`
+  3. A raw value, only when it's not supposed to match a raw token
+     or when it's relative to the the element's own value (em heading spacing).
+
+  Part of the default theme (see theme.default.css); don't edit it,
+  override from your own theme (see theme.starter.css).
+*/
 
-.pl-tera1 {
-  padding-left: var(--tera1) !important;
-}
+:root {
+  /* Color scheme (light/dark), toggled by the .theme-light / .theme-dark
+     classes below. */
+  color-scheme: light dark;
 
-.pr-tera1 {
-  padding-right: var(--tera1) !important;
-}
+  --ui-border-color: light-dark(var(--base-200), var(--base-500));
+  /* Also used by the --shadow-*  in theme.default.tokens.css, The one reference
+     between the files that runs upward, so shadows can switch with the color
+     scheme. Raw alpha colors: the palettes have no alpha steps. */
+  --ui-shadow-color: light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.6));
 
-.pis-tera1 {
-  padding-inline-start: var(--tera1) !important;
+  /* Keyboard focus ring (used by :focus-visible in global.a11y.css).
+     Raw 2px on purpose: an accessibility shouldn't change with the theme. */
+  --focus-ring-color: light-dark(var(--primary-500), var(--primary-400));
+  --focus-ring-width: 2px;
+  --focus-ring-offset: 2px;
 }
 
-.pie-tera1 {
-  padding-inline-end: var(--tera1) !important;
+:root.theme-light {
+  color-scheme: light;
 }
 
-.w-tera2 {
-  width: var(--tera2) !important;
+:root.theme-dark {
+  color-scheme: dark;
 }
 
-.h-tera2 {
-  height: var(--tera2) !important;
-}
+/* HTML ELEMENTS */
 
-.m-tera2 {
-  margin: var(--tera2) !important;
-}
+:root {
+  accent-color: var(--primary-500);
 
-.mt-tera2 {
-  margin-top: var(--tera2) !important;
-}
+  --body-background-color: light-dark(var(--base-0), var(--base-950));
+  --body-line-height: var(--leading-lg);
 
-.mb-tera2 {
-  margin-bottom: var(--tera2) !important;
-}
+  --input-height: var(--md3);
+  --input-padding: var(--xs3);
+  --input-border-width: var(--border-sm);
+  --input-border-color: var(--ui-border-color);
+  --input-border-radius: var(--radius-md);
+  --input-border-color-invalid: light-dark(var(--no-500), var(--no-400));
 
-.ml-tera2 {
-  margin-left: var(--tera2) !important;
-}
+  /* Gap under a label that precedes its control */
+  --label-spacing: var(--xs1);
 
-.mr-tera2 {
-  margin-right: var(--tera2) !important;
-}
+  --fieldset-padding: var(--sm3);
+  --fieldset-border-width: var(--border-sm);
+  --fieldset-border-color: var(--ui-border-color);
+  --fieldset-border-radius: var(--radius-lg);
 
-.mis-tera2 {
-  margin-inline-start: var(--tera2) !important;
-}
+  /* meter: low/medium/high map to the even-less-good, suboptimum, and
+     optimum pseudo-elements */
+  --meter-height: var(--sm1);
+  --meter-border-radius: var(--radius-md);
+  --meter-track-color: var(--primary-100);
+  --meter-low-color: var(--no-400);
+  --meter-medium-color: var(--maybe-400);
+  --meter-high-color: var(--yes-400);
 
-.mie-tera2 {
-  margin-inline-end: var(--tera2) !important;
-}
+  --progress-height: var(--sm1);
+  --progress-color: var(--primary-500);
+  --progress-track-color: var(--primary-100);
+  --progress-border-radius: var(--radius-md);
 
-.p-tera2 {
-  padding: var(--tera2) !important;
-}
+  /* select's chevron, applied as a mask using  text color;
+     any url() works here, data URL or file */
+  --select-icon-size: var(--sm3);
+  --select-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");
 
-.pt-tera2 {
-  padding-top: var(--tera2) !important;
-}
+  --dialog-min-width: var(--tera1);
+  --dialog-max-width: var(--tera3);
+  --dialog-padding: var(--lg1) var(--md1);
+  --dialog-border-width: var(--border-sm);
+  --dialog-border-color: light-dark(var(--base-200), var(--base-800));
+  --dialog-background-color: light-dark(var(--base-50), var(--base-900));
+  --dialog-border-radius: var(--radius-lg);
+  --dialog-backdrop-color: var(--base-950);
+  --dialog-backdrop-opacity: var(--o-4);
 
-.pb-tera2 {
-  padding-bottom: var(--tera2) !important;
-}
+  /* details: same as dialog by default, on purpose, to be  independently
+     overridable. Spacing is the gap between an open summary and its content. */
+  --details-padding: var(--sm1);
+  --details-spacing: var(--xs3);
+  --details-border-width: var(--border-sm);
+  --details-border-color: light-dark(var(--base-200), var(--base-800));
+  --details-background-color: light-dark(var(--base-50), var(--base-900));
+  --details-border-radius: var(--radius-lg);
+  --details-icon-size: var(--sm3);
+  /* Marker icon, applied as a mask painted with the text color; any
+     url() works here, data URL or file */
+  --details-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");
 
-.pl-tera2 {
-  padding-left: var(--tera2) !important;
-}
+  --table-padding: var(--xs2) var(--sm1);
+  --table-border-width: var(--border-sm);
+  --table-border-color: light-dark(var(--base-100), var(--base-700));
+  --table-border-radius: var(--radius-md);
+  --table-background-color: none;
+  /* Gap between the table and its caption */
+  --table-caption-spacing: var(--xs3);
+  /* Gap between a figure's content and caption on either side */
+  --figcaption-spacing: var(--xs2);
 
-.pr-tera2 {
-  padding-right: var(--tera2) !important;
-}
+  /* Text */
 
-.pis-tera2 {
-  padding-inline-start: var(--tera2) !important;
-}
+  --heading-font: var(--display);
+  --heading-weight: var(--black);
+  --heading-letter-spacing: normal; /* (e.g. -0.02em or var(--tracking-sm)) */
 
-.pie-tera2 {
-  padding-inline-end: var(--tera2) !important;
-}
+  --heading-font-size-h1: clamp(
+    var(--display-md),
+    1.269rem + 2.682vw,
+    var(--display-xl)
+  ); /* 2.074rem → 2.986rem */
+  --heading-font-size-h2: clamp(
+    var(--display-sm),
+    1.057rem + 2.235vw,
+    var(--display-lg)
+  ); /* 1.728rem → 2.488rem */
+  --heading-font-size-h3: clamp(
+    var(--text-xl),
+    0.881rem + 1.865vw,
+    var(--display-md)
+  ); /* 1.44rem → 2.074rem */
+  --heading-font-size-h4: clamp(
+    var(--text-lg),
+    0.734rem + 1.553vw,
+    var(--display-sm)
+  ); /* 1.2rem → 1.728rem */
+  --heading-font-size-h5: clamp(
+    var(--text-lg),
+    0.988rem + 0.706vw,
+    var(--text-xl)
+  ); /* 1.2rem → 1.44rem */
+  --heading-font-size-h6: clamp(
+    var(--text-md),
+    0.824rem + 0.588vw,
+    var(--text-lg)
+  ); /* 1rem → 1.2rem */
 
-.w-tera3 {
-  width: var(--tera3) !important;
-}
+  --heading-line-height: var(--leading-sm);
+  --heading-line-height-h1: var(--heading-line-height);
+  --heading-line-height-h2: var(--heading-line-height);
+  --heading-line-height-h3: var(--heading-line-height);
+  --heading-line-height-h4: var(--leading-md);
+  --heading-line-height-h5: var(--leading-md);
+  --heading-line-height-h6: var(--leading-md);
 
-.h-tera3 {
-  height: var(--tera3) !important;
-}
+  /* Headings bottom margin  */
+  --heading-spacing-h1: 0.4em;
+  --heading-spacing-h2: 0.4em;
+  --heading-spacing-h3: 0.4em;
+  --heading-spacing-h4: 0.4em;
+  --heading-spacing-h5: 0.4em;
+  --heading-spacing-h6: 0.4em;
+  /* Any h1 before h2, h2 before h3, h3 before h4.  */
+  --heading-spacing-consecutive: 0.3em;
 
-.m-tera3 {
-  margin: var(--tera3) !important;
-}
+  --text-color: light-dark(var(--base-950), var(--base-200));
+  --link-font-weight: var(--semi-bold);
+  --link-color: light-dark(var(--primary-600), var(--primary-400));
+  --link-color-hover: var(--primary-500);
 
-.mt-tera3 {
-  margin-top: var(--tera3) !important;
-}
+  --text-code-color: light-dark(var(--primary-600), var(--primary-400));
+  --text-code-background-color: light-dark(
+    var(--primary-100),
+    var(--primary-900)
+  );
+  /* when code inline styling doesn't apply (inside headings and pre) */
+  --text-code-muted-color: light-dark(var(--base-500), var(--base-300));
 
-.mb-tera3 {
-  margin-bottom: var(--tera3) !important;
-}
+  --pre-border-radius: var(--radius-md);
+  /* matching the 0.9em of inline code */
+  --pre-font-size: 0.9rem;
 
-.ml-tera3 {
-  margin-left: var(--tera3) !important;
-}
+  --blockquote-padding-block: var(--sm1);
+  --blockquote-padding-inline: var(--md1) var(--sm3);
+  --blockquote-background-color: light-dark(
+    var(--primary-50),
+    var(--primary-900)
+  );
+  --blockquote-border-radius: var(--radius-md);
+  --blockquote-accent-width: var(--xs2);
+  --blockquote-accent-color: linear-gradient(
+    var(--primary-800),
+    var(--primary-500)
+  );
 
-.mr-tera3 {
-  margin-right: var(--tera3) !important;
-}
+  /* .prose related stuff in GLOBAL */
 
-.mis-tera3 {
-  margin-inline-start: var(--tera3) !important;
-}
+  /* Optional centered label on <hr>, e.g. "***" or a dingbat */
+  --hr-content: "";
 
-.mie-tera3 {
-  margin-inline-end: var(--tera3) !important;
-}
+  /* ins: background stays light in both light/dark modes */
+  --ins-color: var(--base-950);
+  --ins-background-color: var(--yes-200);
 
-.p-tera3 {
-  padding: var(--tera3) !important;
-}
+  --marker-color: var(--highlight-500);
 
-.pt-tera3 {
-  padding-top: var(--tera3) !important;
+  --selection-color: light-dark(var(--base-950), var(--base-0));
+  --selection-background-color: light-dark(
+    var(--primary-200),
+    var(--primary-700)
+  );
 }
 
-.pb-tera3 {
-  padding-bottom: var(--tera3) !important;
-}
+/* GLOBAL */
 
-.pl-tera3 {
-  padding-left: var(--tera3) !important;
-}
+:root {
+  /* Mobile-first: tighter gutters on small screens, 24px from --md up */
+  --grid-column-gap: var(--sm1);
+  --grid-row-gap: var(--sm1);
+  @media (width >= 768px) {
+    --grid-column-gap: var(--sm3);
+    --grid-row-gap: var(--sm3);
+  }
 
-.pr-tera3 {
-  padding-right: var(--tera3) !important;
-}
+  --wrap-spacing: var(--sm1);
+  --wrap-md-spacing: var(--sm3);
+  --wrap-lg-spacing: 0;
+  /* Widths are measures: ch tracks the text size, so raw on purpose. */
+  --wrap-width-sm: minmax(0, 55ch);
+  --wrap-width-md: minmax(0, 70ch);
+  --wrap-width-lg: minmax(0, 900px);
+  --wrap-width: var(--wrap-width-md);
 
-.pis-tera3 {
-  padding-inline-start: var(--tera3) !important;
-}
+  --layout-content-width: 70ch;
+  --layout-aside-width: 245px;
+  --layout-toc-width: 1fr;
 
-.pie-tera3 {
-  padding-inline-end: var(--tera3) !important;
-}
+  --prose-spacing: var(--sm1);
 }
-@layer helpers{
-
-/* HELPER TYPOGRAPHY */
 
-/* .h1, .h2, .h3, .h4, .h5, .h6 are in elements.text */
-
-/* FONT FAMILY */
+/* COMPONENTS */
 
-.font-text {
-  font-family: var(--text) !important;
-}
+/* Badge */
 
-.font-display {
-  font-family: var(--display) !important;
-}
+:root {
+  --badge-font-size: var(--text-sm);
+  --badge-border-radius: var(--radius-md);
+  --badge-color: var(--base-0);
+  --badge-background-color: light-dark(var(--base-700), var(--base-600));
 
-.font-mono {
-  font-family: var(--mono) !important;
+  --badge-primary-color: var(--base-0);
+  --badge-primary-background-color: light-dark(
+    var(--primary-600),
+    var(--primary-500)
+  );
+  --badge-success-color: light-dark(var(--yes-500), var(--base-0));
+  --badge-success-background-color: light-dark(var(--yes-100), var(--yes-500));
+  --badge-danger-color: light-dark(var(--no-500), var(--base-0));
+  --badge-danger-background-color: light-dark(var(--no-100), var(--no-500));
+  --badge-warning-color: light-dark(var(--maybe-500), var(--base-950));
+  --badge-warning-background-color: light-dark(
+    var(--maybe-100),
+    var(--maybe-500)
+  );
 }
 
-/* FONT STYLE */
+/* Button */
+/* (Button defaults and primary button colors) */
 
-.font-italic {
-  font-style: italic !important;
-}
+:root {
+  /* Optical minimums, deliberately off the spacing scale */
+  --bt-min-width: 101px;
+  --bt-min-width-md: 123px;
+  --bt-min-width-lg: 133px;
 
-.font-normal {
-  font-style: normal !important;
-}
+  --bt-font-size: var(--text-sm);
+  --bt-font-size-lg: var(--text-md);
+  --bt-font-weight: var(--semi-bold);
 
-/* FONT WEIGHTS */
+  --bt-color: var(--text-color);
+  --bt-color-hover: light-dark(var(--text-color), var(--base-0));
 
-.font-extra-light {
-  font-weight: var(--extra-light) !important;
-}
+  --bt-background-color: light-dark(var(--base-0), var(--base-800));
+  --bt-background-color-hover: light-dark(var(--base-50), var(--base-900));
 
-.font-light {
-  font-weight: var(--light) !important;
-}
+  --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);
 
-.font-book {
-  font-weight: var(--book) !important;
-}
+  --bt-outline-color-hover: light-dark(var(--base-950), var(--base-0));
+  --bt-outline-background-color-hover: light-dark(
+    rgb(0 0 0 / 0.1),
+    rgb(255 255 255 / 0.1)
+  );
+  --bt-outline-border-color: light-dark(var(--base-950), var(--base-0));
+  --bt-outline-border-color-hover: light-dark(var(--base-950), var(--base-0));
 
-.font-semi-bold {
-  font-weight: var(--semi-bold) !important;
+  --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);
 }
 
-.font-bold {
-  font-weight: var(--bold) !important;
-}
+/* Avatar */
 
-.font-black {
-  font-weight: var(--black) !important;
+:root {
+  --avatar-color: var(--base-0);
+  --avatar-background-color: var(--base-400);
+  --avatar-border-color: light-dark(var(--base-0), var(--base-500));
+  --avatar-border-width: var(--border-sm);
+  --avatar-radius: var(--radius-round);
+  --avatar-status-dot-color-offline: var(--base-300);
+  --avatar-status-dot-color-online: var(--yes-400);
 }
 
-/* FONT SIZES */
+/* Banner */
 
-.text-xs {
-  font-size: var(--text-xs) !important;
+:root {
+  --banner-color: var(--base-0);
+  --banner-background-color: light-dark(var(--primary-600), var(--primary-800));
 }
 
-.text-sm {
-  font-size: var(--text-sm) !important;
-}
+/* Breadcrumbs */
 
-.text-md {
-  font-size: var(--text-md) !important;
+:root {
+  --breadcrumbs-separator: "/";
+  --breadcrumbs-separator-color: light-dark(var(--base-300), var(--base-600));
+  --breadcrumbs-color: light-dark(var(--base-500), var(--base-400));
+  --breadcrumbs-color-current: var(--text-color);
 }
 
-.text-lg {
-  font-size: var(--text-lg) !important;
-}
+/* Card */
 
-.text-xl {
-  font-size: var(--text-xl) !important;
+:root {
+  --card-spacing: var(--sm3);
+  --card-color: var(--text-color);
+  --card-secondary-text-color: light-dark(var(--base-400), var(--base-500));
+  --card-bg-color: light-dark(var(--base-100), var(--base-900));
+  --card-border-radius: var(--radius-lg);
+  --card-border-color: var(--ui-border-color);
+  --card-border-width: var(--border-sm);
+  --card-shadow: var(--shadow-md);
+  --card-shadow-hover: var(--shadow-xl);
+  --card-loading-bg: light-dark(var(--base-200), var(--base-900));
+  /* Default media aspect ratio; the Card component pins it inline only
+     when its aspectRatio prop is passed */
+  --card-aspect-ratio: var(--ar-golden);
 }
 
-.display-sm {
-  font-size: var(--display-sm) !important;
-}
+/* Toggle */
 
-.display-md {
-  font-size: var(--display-md) !important;
+:root {
+  /* Drawn-control geometry, deliberately off the scales */
+  --toggle-width: 50px;
+  --toggle-height: 28px;
+  --toggle-border-width: 2px;
+  --toggle-track-color: light-dark(var(--base-300), var(--base-700));
+  --toggle-track-color-checked: var(--yes-400);
+  --toggle-thumb-color: var(--body-background-color);
 }
 
-.display-lg {
-  font-size: var(--display-lg) !important;
-}
+/* FAQ */
 
-.display-xl {
-  font-size: var(--display-xl) !important;
+:root {
+  --faq-spacing: var(--xs3);
 }
 
-.display-mega {
-  font-size: var(--display-mega) !important;
-}
+/* Field */
 
-.display-giga {
-  font-size: var(--display-giga) !important;
+:root {
+  --field-spacing: var(--xs1);
+  --field-hint-color: light-dark(var(--base-400), var(--base-500));
+  --field-error-color: light-dark(var(--no-500), var(--no-300));
+  /*Field's hint/error position. Use `static` to reflow under, use `absolute`
+  (and leave enough space below) if you don't want any shift on errors */
+  --field-message-position: static;
 }
 
-/* LETTER SPACING */
+/* FeatureItem */
 
-.tracking-sm {
-  letter-spacing: var(--tracking-sm) !important;
+:root {
+  --featureItem-icon-box-size: var(--lg3);
+  --featureItem-icon-size: var(--sm3);
+  --featureItem-icon-color: light-dark(var(--primary-600), var(--primary-300));
+  --featureItem-icon-background-color: light-dark(
+    var(--primary-100),
+    var(--primary-900)
+  );
+  --featureItem-icon-border-radius: var(--radius-lg);
 }
 
-.tracking-md {
-  letter-spacing: var(--tracking-md) !important;
-}
+/* Footer */
 
-.tracking-lg {
-  letter-spacing: var(--tracking-lg) !important;
+:root {
+  --footer-background-color: light-dark(var(--primary-950), var(--base-950));
+  --footer-text-color: light-dark(var(--base-0), var(--base-200));
+  --footer-border-width: var(--border-md);
+  --footer-border-color: light-dark(transparent, var(--base-700));
+  --footer-link-color: light-dark(var(--base-0), var(--base-200));
+  --footer-link-color-hover: light-dark(var(--primary-200), var(--base-0));
 }
 
-.tracking-xl {
-  letter-spacing: var(--tracking-xl) !important;
-}
+/* Header */
 
-.tracking-xxl {
-  letter-spacing: var(--tracking-xxl) !important;
+:root {
+  --header-height: var(--xl1);
+  --header-padding: var(--sm1);
+  @media (width >= 768px) {
+    --header-height: var(--xl2);
+    --header-padding: var(--sm3);
+  }
+  --header-background-color: light-dark(var(--base-0), var(--base-950));
+
+  /* The mobile menu is an always-dark  by design */
+  --header-menu-background-color: var(--base-950);
+  --header-menu-color: var(--base-0);
+  --header-menu-color-current: var(--primary-400);
+  --header-menu-secondary-color: var(--base-300);
+  --header-menu-border-color: var(--base-500);
 }
 
-/* LINE HEIGHT */
+/* Hero */
 
-.leading-xs {
-  line-height: var(--leading-xs) !important;
+: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);
 }
 
-.leading-sm {
-  line-height: var(--leading-sm) !important;
-}
+/* Pagination */
 
-.leading-md {
-  line-height: var(--leading-md) !important;
+:root {
+  --pagination-size: var(--md3);
+  --pagination-border-radius: var(--radius-md);
+  --pagination-color: var(--text-color);
+  --pagination-color-current: var(--base-0);
+  --pagination-background-color-current: light-dark(
+    var(--primary-600),
+    var(--primary-500)
+  );
+  --pagination-background-color-hover: light-dark(
+    var(--base-100),
+    var(--base-800)
+  );
 }
 
-.leading-lg {
-  line-height: var(--leading-lg) !important;
-}
+/* PrevNext */
 
-.leading-xl {
-  line-height: var(--leading-xl) !important;
+:root {
+  --prevNext-border-color: var(--ui-border-color);
+  --prevNext-border-radius: var(--radius-lg);
+  --prevNext-border-color-hover: var(--link-color);
+  --prevNext-label-color: light-dark(var(--base-400), var(--base-500));
 }
 
-.leading-xxl {
-  line-height: var(--leading-xxl) !important;
+/* Notice */
+
+:root {
+  --notice-spacing: var(--sm1);
+  --notice-text-color: light-dark(var(--base-950), var(--base-0));
+  --notice-background-color: light-dark(var(--base-50), var(--base-800));
+  --notice-border-color: light-dark(var(--base-200), var(--base-500));
+  --notice-border-width: var(--border-sm);
+  --notice-border-radius: var(--radius-lg);
 }
 
-/* TEXT ALIGN */
+/* Pricing */
 
-.text-left {
-  text-align: left !important;
+:root {
+  --pricingCard-highlight-border-color: light-dark(
+    var(--primary-600),
+    var(--primary-400)
+  );
+  --pricingCard-check-color: light-dark(var(--yes-500), var(--yes-400));
 }
 
-.text-center {
-  text-align: center !important;
-}
+/* Read Progress Bar */
 
-.text-right {
-  text-align: right !important;
+:root {
+  --readProgressBar-height: var(--xs1);
+  --readProgressBar-color: linear-gradient(
+    90deg,
+    var(--primary-600) 0%,
+    var(--primary-400) 100%
+  );
 }
 
-.text-justify {
-  text-align: justify !important;
-}
+/* Section */
 
-.text-start {
-  text-align: start !important;
+:root {
+  --section-spacing: var(--xl3);
+  --section-header-spacing: var(--lg3);
+  --section-eyebrow-color: light-dark(var(--primary-600), var(--primary-400));
+  --section-lede-color: light-dark(var(--base-500), var(--base-400));
+  --section-filled-background-color: light-dark(
+    var(--base-50),
+    var(--base-900)
+  );
+  --section-primary-background-color: light-dark(
+    var(--primary-600),
+    var(--primary-900)
+  );
+  --section-primary-text-color: var(--base-0);
+  --section-primary-link-color: var(--primary-100);
+  --section-primary-link-color-hover: var(--base-0);
+  --section-primary-eyebrow-color: var(--primary-200);
+  --section-primary-lede-color: var(--primary-100);
 }
 
-.text-end {
-  text-align: end !important;
+/* Testimonial */
+
+:root {
+  --testimonial-role-color: light-dark(var(--base-400), var(--base-500));
 }
 
-/* TEXT TRANSFORM */
+/* Tags */
 
-.text-uppercase {
-  text-transform: uppercase !important;
+:root {
+  --tags-padding: var(--xs2);
+  --tags-font-size: var(--text-sm);
+  --tags-color: light-dark(var(--base-500), var(--base-400));
+  --tags-background-color: light-dark(var(--base-100), var(--base-800));
+  --tags-background-color-hover: light-dark(var(--base-200), var(--base-950));
+  --tags-radius: var(--radius-md);
 }
 
-.text-lowercase {
-  text-transform: lowercase !important;
-}
+/* Tiles has no tokens here: its column count is set by container queries in
+   component.tiles.css since custom properties don't work inside @container.
+*/
 
-.text-capitalize {
-  text-transform: capitalize !important;
+/* TOC */
+
+:root {
+  --toc-color: var(--link-color);
+  --toc-color-hover: var(--link-color-hover);
+  --toc-spacing: var(--xs1);
+  --toc-indentation: var(--xs3);
+  --toc-icon-size: var(--sm1);
 }
 }
diff --git a/dist/mcss.min.css b/dist/mcss.min.css
index 2f957b90..0f8ee080 100644
--- a/dist/mcss.min.css
+++ b/dist/mcss.min.css
@@ -1,2 +1,2 @@
 /*! mCSS v1.3.0 | MIT | https://mcss.dev */
-@layer settings,base,elements,global,components,theme,helpers;@layer settings{:root{--xs1: 4px;--xs2: 8px;--xs3: 12px;--sm1: 16px;--sm2: 20px;--sm3: 24px;--md1: 28px;--md2: 32px;--md3: 36px;--lg1: 40px;--lg2: 44px;--lg3: 48px;--xl1: 56px;--xl2: 64px;--xl3: 80px;--xxl1: 96px;--xxl2: 112px;--xxl3: 128px;--mega1: 160px;--mega2: 192px;--mega3: 224px;--giga1: 256px;--giga2: 288px;--giga3: 320px;--tera1: 384px;--tera2: 480px;--tera3: 520px;--ar-square: 1;--ar-landscape: 4/3;--ar-portrait: 3/4;--ar-widescreen: 16/9;--ar-golden: 1.618/1;--display: Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, ui-sans-serif, sans-serif;--text: ui-sans-serif, system-ui, sans-serif;--mono: Dank Mono, Inconsolata, Fira Mono, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, ui-monospace, monospace;--text-xs: .694rem;--text-sm: .833rem;--text-md: 1rem;--text-lg: 1.2rem;--text-xl: 1.44rem;--display-sm: 1.728rem;--display-md: 2.074rem;--display-lg: 2.488rem;--display-xl: 2.986rem;--display-mega: 3.583rem;--display-giga: 4.299rem;--extra-light: 200;--light: 300;--book: 400;--semi-bold: 600;--bold: 700;--black: 900;--tracking-sm: -.05em;--tracking-md: .025em;--tracking-lg: .05em;--tracking-xl: .075em;--tracking-xxl: .15em;--leading-xs: 1;--leading-sm: 1.15;--leading-md: 1.375;--leading-lg: 1.5;--leading-xl: 1.75;--leading-xxl: 2;--base-0: #fff;--base-50: #f6f7f9;--base-100: #edeef1;--base-200: #d6dbe1;--base-300: #b2bbc7;--base-400: #8897a8;--base-500: #697a8e;--base-600: #546375;--base-700: #4a5666;--base-800: #3c4550;--base-900: #353c45;--base-950: #23282e;--primary-50: #f0f9ff;--primary-100: #e0f2fe;--primary-200: #bae6fd;--primary-300: #7dd3fc;--primary-400: #38bdf8;--primary-500: #0ea5e9;--primary-600: #0284c7;--primary-700: #0369a1;--primary-800: #075985;--primary-900: #0c4a6e;--primary-950: #082f49;--yes-100: #d5f6e8;--yes-200: #afebd4;--yes-300: #7adbbd;--yes-400: #46c4a0;--yes-500: #13886d;--no-100: #ffe4e6;--no-200: #fecdd3;--no-300: #fda4af;--no-400: #fb7185;--no-500: #e11d48;--maybe-100: #fff7d6;--maybe-200: #fff0b3;--maybe-300: #ffd64a;--maybe-400: #ffc220;--maybe-500: #f9a007;--highlight-500: #ffee00;--gradient-primary: linear-gradient( 90deg, var(--primary-950) 0%, var(--primary-400) 100% );--border-sm: 1px;--border-md: 2px;--border-lg: 4px;--border-xl: 8px;--border-xxl: 12px;--radius-sm: 3px;--radius-md: 5px;--radius-lg: 8px;--radius-xl: 12px;--radius-xxl: 16px;--radius-round: 1e5px;--shadow-sm: 0 1px 3px 0 var(--ui-shadow-color), 0 1px 2px -1px var(--ui-shadow-color);--shadow-md: 0 4px 6px -1px var(--ui-shadow-color), 0 2px 4px -2px var(--ui-shadow-color);--shadow-lg: 0 8px 13px -3px var(--ui-shadow-color), 0 4px 6px -4px var(--ui-shadow-color);--shadow-xl: 0 20px 20px -5px var(--ui-shadow-color), 0 8px 10px -6px var(--ui-shadow-color);--shadow-xxl: 0px 11px 8px -6px var(--ui-shadow-color), 0 10px 15px 2px var(--ui-shadow-color);--o-0: 0;--o-1: .2;--o-2: .4;--o-3: .6;--o-4: .8;--o-5: 1;--z-bottom: -1000000000;--z-0: 0;--z-1: 10;--z-2: 20;--z-3: 30;--z-4: 40;--z-5: 50;--z-top: 1000000000;--transition: .22s ease-in-out;--transition-fast: .1s ease-in-out}}@layer settings{:root{color-scheme:light dark;--ui-border-color: light-dark(var(--base-200), var(--base-500));--ui-shadow-color: light-dark(rgb(0 0 0 / .1), rgb(0 0 0 / .6));--focus-ring-color: light-dark(var(--primary-500), var(--primary-400));--focus-ring-width: 2px;--focus-ring-offset: 2px;--success-100: var(--yes-100);--success-200: var(--yes-200);--success-300: var(--yes-300);--success-400: var(--yes-400);--success-500: var(--yes-500);--danger-100: var(--no-100);--danger-200: var(--no-200);--danger-300: var(--no-300);--danger-400: var(--no-400);--danger-500: var(--no-500);--warning-100: var(--maybe-100);--warning-200: var(--maybe-200);--warning-300: var(--maybe-300);--warning-400: var(--maybe-400);--warning-500: var(--maybe-500)}:root.theme-light{color-scheme:light}:root.theme-dark{color-scheme:dark}:root{accent-color:var(--primary-500);--body-background-color: light-dark(var(--base-0), var(--base-950));--body-line-height: var(--leading-lg);--input-height: var(--md3);--input-padding: var(--xs3);--input-border-width: var(--border-sm);--input-border-color: var(--ui-border-color);--input-border-radius: var(--radius-md);--input-border-color-invalid: light-dark( var(--danger-500), var(--danger-400) );--label-spacing: var(--xs1);--fieldset-padding: var(--sm3);--fieldset-border-width: var(--border-sm);--fieldset-border-color: var(--ui-border-color);--fieldset-border-radius: var(--radius-lg);--meter-height: var(--sm1);--meter-border-radius: var(--radius-md);--meter-track-color: var(--primary-100);--meter-low-color: var(--danger-400);--meter-medium-color: var(--warning-400);--meter-high-color: var(--success-400);--progress-height: var(--sm1);--progress-color: var(--primary-500);--progress-track-color: var(--primary-100);--progress-border-radius: var(--radius-md);--select-icon-size: var(--sm3);--select-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");--dialog-min-width: var(--tera1);--dialog-max-width: var(--tera3);--dialog-padding: var(--lg1) var(--md1);--dialog-border-width: var(--border-sm);--dialog-border-color: light-dark(var(--base-200), var(--base-800));--dialog-background-color: light-dark(var(--base-50), var(--base-900));--dialog-border-radius: var(--radius-lg);--dialog-backdrop-color: var(--base-950);--dialog-backdrop-opacity: var(--o-4);--details-padding: var(--sm1);--details-spacing: var(--xs3);--details-border-width: var(--border-sm);--details-border-color: light-dark(var(--base-200), var(--base-800));--details-background-color: light-dark(var(--base-50), var(--base-900));--details-border-radius: var(--radius-lg);--details-icon-size: var(--sm3);--details-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");--table-padding: var(--xs2) var(--sm1);--table-border-width: var(--border-sm);--table-border-color: light-dark(var(--base-100), var(--base-700));--table-border-radius: var(--radius-md);--table-background-color: none;--table-caption-spacing: var(--xs3);--figcaption-spacing: var(--xs2);--heading-font: var(--display);--heading-weight: var(--black);--heading-letter-spacing: normal;--heading-font-size-h1: clamp( var(--display-md), 1.269rem + 2.682vw, var(--display-xl) );--heading-font-size-h2: clamp( var(--display-sm), 1.057rem + 2.235vw, var(--display-lg) );--heading-font-size-h3: clamp( var(--text-xl), .881rem + 1.865vw, var(--display-md) );--heading-font-size-h4: clamp( var(--text-lg), .734rem + 1.553vw, var(--display-sm) );--heading-font-size-h5: clamp( var(--text-lg), .988rem + .706vw, var(--text-xl) );--heading-font-size-h6: clamp( var(--text-md), .824rem + .588vw, var(--text-lg) );--heading-line-height: var(--leading-sm);--heading-line-height-h1: var(--heading-line-height);--heading-line-height-h2: var(--heading-line-height);--heading-line-height-h3: var(--heading-line-height);--heading-line-height-h4: var(--leading-md);--heading-line-height-h5: var(--leading-md);--heading-line-height-h6: var(--leading-md);--heading-spacing-h1: .4em;--heading-spacing-h2: .4em;--heading-spacing-h3: .4em;--heading-spacing-h4: .4em;--heading-spacing-h5: .4em;--heading-spacing-h6: .4em;--heading-spacing-consecutive: .3em;--text-color: light-dark(var(--base-950), var(--base-200));--link-font-weight: var(--semi-bold);--link-color: light-dark(var(--primary-600), var(--primary-400));--link-color-hover: var(--primary-500);--text-code-color: light-dark(var(--primary-600), var(--primary-400));--text-code-background-color: light-dark( var(--primary-100), var(--primary-900) );--text-code-muted-color: light-dark(var(--base-500), var(--base-300));--pre-border-radius: var(--radius-md);--pre-font-size: .9rem;--blockquote-padding-block: var(--sm1);--blockquote-padding-inline: var(--md1) var(--sm3);--blockquote-background-color: light-dark( var(--primary-50), var(--primary-900) );--blockquote-border-radius: var(--radius-md);--blockquote-accent-width: var(--xs2);--blockquote-accent-color: linear-gradient( var(--primary-800), var(--primary-500) );--hr-content: "";--ins-color: var(--base-950);--ins-background-color: var(--success-200);--marker-color: var(--highlight-500);--selection-color: light-dark(var(--base-950), var(--base-0));--selection-background-color: light-dark( var(--primary-200), var(--primary-700) )}:root{--grid-column-gap: var(--sm1);--grid-row-gap: var(--sm1);@media(width>=768px){--grid-column-gap: var(--sm3);--grid-row-gap: var(--sm3)}--wrap-spacing: var(--sm1);--wrap-md-spacing: var(--sm3);--wrap-lg-spacing: 0;--wrap-width-sm: minmax(0, 55ch);--wrap-width-md: minmax(0, 70ch);--wrap-width-lg: minmax(0, 900px);--wrap-width: var(--wrap-width-md);--layout-content-width: 70ch;--layout-aside-width: 245px;--layout-toc-width: 1fr;--prose-spacing: var(--sm1)}:root{--badge-font-size: var(--text-sm);--badge-border-radius: var(--radius-md);--badge-color: var(--base-0);--badge-background-color: light-dark(var(--base-700), var(--base-600));--badge-primary-color: var(--base-0);--badge-primary-background-color: light-dark( var(--primary-600), var(--primary-500) );--badge-success-color: light-dark(var(--success-500), var(--base-0));--badge-success-background-color: light-dark( var(--success-100), var(--success-500) );--badge-danger-color: light-dark(var(--danger-500), var(--base-0));--badge-danger-background-color: light-dark( var(--danger-100), var(--danger-500) );--badge-warning-color: light-dark(var(--warning-500), var(--base-950));--badge-warning-background-color: light-dark( var(--warning-100), var(--warning-500) )}:root{--bt-min-width: 101px;--bt-min-width-md: 123px;--bt-min-width-lg: 133px;--bt-font-size: var(--text-sm);--bt-font-size-lg: var(--text-md);--bt-font-weight: var(--semi-bold);--bt-color: var(--text-color);--bt-color-hover: light-dark(var(--text-color), var(--base-0));--bt-background-color: light-dark(var(--base-0), var(--base-800));--bt-background-color-hover: light-dark(var(--base-50), var(--base-900));--bt-border-color: var(--ui-border-color);--bt-border-width: var(--border-sm);--bt-border-radius: var(--radius-lg);--bt-border-radius-lg: var(--radius-xl);--bt-outline-color-hover: light-dark(var(--base-950), var(--base-0));--bt-outline-background-color-hover: light-dark( rgb(0 0 0 / .1), rgb(255 255 255 / .1) );--bt-outline-border-color: light-dark(var(--base-950), var(--base-0));--bt-outline-border-color-hover: light-dark(var(--base-950), var(--base-0));--bt-primary-color: var(--base-0);--bt-primary-color-hover: var(--base-0);--bt-primary-background-color: var(--primary-600);--bt-primary-background-color-hover: var(--primary-500);--bt-primary-border-color: var(--primary-600);--bt-primary-border-color-hover: var(--primary-600)}:root{--avatar-color: var(--base-0);--avatar-background-color: var(--base-400);--avatar-border-color: light-dark(var(--base-0), var(--base-500));--avatar-border-width: var(--border-sm);--avatar-radius: var(--radius-round);--avatar-status-dot-color-offline: var(--base-300);--avatar-status-dot-color-online: var(--yes-400)}:root{--banner-color: var(--base-0);--banner-background-color: light-dark(var(--primary-600), var(--primary-800))}:root{--breadcrumbs-separator: "/";--breadcrumbs-separator-color: light-dark(var(--base-300), var(--base-600));--breadcrumbs-color: light-dark(var(--base-500), var(--base-400));--breadcrumbs-color-current: var(--text-color)}:root{--card-spacing: var(--sm3);--card-color: var(--text-color);--card-secondary-text-color: light-dark(var(--base-400), var(--base-500));--card-bg-color: light-dark(var(--base-100), var(--base-900));--card-border-radius: var(--radius-lg);--card-border-color: var(--ui-border-color);--card-border-width: var(--border-sm);--card-shadow: var(--shadow-md);--card-shadow-hover: var(--shadow-xl);--card-loading-bg: light-dark(var(--base-200), var(--base-900));--card-aspect-ratio: var(--ar-golden)}:root{--toggle-width: 50px;--toggle-height: 28px;--toggle-border-width: 2px;--toggle-track-color: light-dark(var(--base-300), var(--base-700));--toggle-track-color-checked: var(--yes-400);--toggle-thumb-color: var(--body-background-color)}:root{--faq-spacing: var(--xs3)}:root{--field-spacing: var(--xs1);--field-hint-color: light-dark(var(--base-400), var(--base-500));--field-error-color: light-dark(var(--danger-500), var(--danger-300));--field-message-position: static}:root{--featureItem-icon-box-size: var(--lg3);--featureItem-icon-size: var(--sm3);--featureItem-icon-color: light-dark(var(--primary-600), var(--primary-300));--featureItem-icon-background-color: light-dark( var(--primary-100), var(--primary-900) );--featureItem-icon-border-radius: var(--radius-lg)}:root{--footer-background-color: light-dark(var(--primary-950), var(--base-950));--footer-text-color: light-dark(var(--base-0), var(--base-200));--footer-border-width: var(--border-md);--footer-border-color: light-dark(transparent, var(--base-700));--footer-link-color: light-dark(var(--base-0), var(--base-200));--footer-link-color-hover: light-dark(var(--primary-200), var(--base-0))}:root{--header-height: var(--xl1);--header-padding: var(--sm1);@media(width>=768px){--header-height: var(--xl2);--header-padding: var(--sm3)}--header-background-color: light-dark(var(--base-0), var(--base-950));--header-menu-background-color: var(--base-950);--header-menu-color: var(--base-0);--header-menu-color-current: var(--primary-400);--header-menu-secondary-color: var(--base-300);--header-menu-border-color: var(--base-500)}:root{--hero-radius: var(--radius-xl);--hero-content-padding: var(--md3);--hero-actions-spacing: var(--lg3);--hero-pagination-dot: var(--sm1);--hero-pagination-dot-color: var(--base-0);--hero-pagination-dot-active-color: var(--primary-600);--hero-pagination-opacity: var(--o-4)}:root{--pagination-size: var(--md3);--pagination-border-radius: var(--radius-md);--pagination-color: var(--text-color);--pagination-color-current: var(--base-0);--pagination-background-color-current: light-dark( var(--primary-600), var(--primary-500) );--pagination-background-color-hover: light-dark( var(--base-100), var(--base-800) )}:root{--prevNext-border-color: var(--ui-border-color);--prevNext-border-radius: var(--radius-lg);--prevNext-border-color-hover: var(--link-color);--prevNext-label-color: light-dark(var(--base-400), var(--base-500))}:root{--notice-spacing: var(--sm1);--notice-text-color: light-dark(var(--base-950), var(--base-0));--notice-background-color: light-dark(var(--base-50), var(--base-800));--notice-border-color: light-dark(var(--base-200), var(--base-500));--notice-border-width: var(--border-sm);--notice-border-radius: var(--radius-lg)}:root{--pricingCard-highlight-border-color: light-dark( var(--primary-600), var(--primary-400) );--pricingCard-check-color: light-dark(var(--success-500), var(--success-400))}:root{--readProgressBar-height: var(--xs1);--readProgressBar-color: linear-gradient( 90deg, var(--primary-600) 0%, var(--primary-400) 100% )}:root{--section-spacing: var(--xl3);--section-header-spacing: var(--lg3);--section-eyebrow-color: light-dark(var(--primary-600), var(--primary-400));--section-lede-color: light-dark(var(--base-500), var(--base-400));--section-filled-background-color: light-dark( var(--base-50), var(--base-900) );--section-primary-background-color: light-dark( var(--primary-600), var(--primary-900) );--section-primary-text-color: var(--base-0);--section-primary-link-color: var(--primary-100);--section-primary-link-color-hover: var(--base-0);--section-primary-eyebrow-color: var(--primary-200);--section-primary-lede-color: var(--primary-100)}:root{--testimonial-role-color: light-dark(var(--base-400), var(--base-500))}:root{--tags-padding: var(--xs2);--tags-font-size: var(--text-sm);--tags-color: light-dark(var(--base-500), var(--base-400));--tags-background-color: light-dark(var(--base-100), var(--base-800));--tags-background-color-hover: light-dark(var(--base-200), var(--base-950));--tags-radius: var(--radius-md)}:root{--toc-color: var(--link-color);--toc-color-hover: var(--link-color-hover);--toc-spacing: var(--xs1);--toc-indentation: var(--xs3);--toc-icon-size: var(--sm1)}}@layer base{*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion:reduce){*,:before,:after{animation-delay:-1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}}:where(:not(dialog)){margin:0}html,body{min-height:100%}}@layer elements{body{line-sizing:normal;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;background-color:var(--body-background-color);color:var(--text-color);font-family:var(--text);line-height:var(--body-line-height);&:has(.body-is-locked){overflow:hidden}}}@layer elements{::selection{color:var(--selection-color);background-color:var(--selection-background-color)}:where(a,u,ins,abbr){text-underline-offset:2px}a{font-weight:var(--link-font-weight);color:var(--link-color);&:where(:hover){color:var(--link-color-hover);-webkit-text-decoration:none;text-decoration:none}}address{width:max-content;max-width:100%;padding:var(--sm1) var(--sm3);font-style:normal;background-color:light-dark(var(--base-50),var(--base-900));border:var(--xs2) solid transparent;border-image:8 repeating-linear-gradient(-45deg,var(--no-500) 0,var(--no-500) var(--xs2),transparent 0,transparent calc(var(--xs2) * 2),var(--primary-500) 0,var(--primary-500) calc(var(--xs2) * 3),transparent 0,transparent calc(var(--xs2) * 4))}abbr{position:relative;cursor:help;&:after{position:relative;top:calc(var(--xs1) * -1);width:var(--sm1);height:var(--sm1);display:inline-block;content:"";background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='circle-help'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M9.09%209a3%203%200%200%201%205.83%201c0%202-3%203-3%203'/%3E%3Cpath%20d='M12%2017h.01'/%3E%3C/svg%3E");background-size:contain}&:hover:before{width:max-content;max-width:400px;position:absolute;left:50%;padding:var(--xs1) var(--xs3);content:attr(title);color:var(--base-0);background-color:var(--base-900);opacity:var(--o-4);border-radius:var(--radius-sm);transform:translate(-50%,-2em)}}blockquote{position:relative;margin-bottom:var(--prose-spacing);padding-block:var(--blockquote-padding-block);padding-inline:var(--blockquote-padding-inline);font-style:italic;background-color:var(--blockquote-background-color);border-radius:var(--blockquote-border-radius);&:before{content:"";position:absolute;top:0;inset-inline-start:0;width:var(--blockquote-accent-width);height:100%;border-start-start-radius:var(--blockquote-border-radius);border-end-start-radius:var(--blockquote-border-radius);background:var(--blockquote-accent-color)}p{&:first-child:before{content:open-quote}&:last-child{margin-bottom:0;&:after{content:close-quote}}}}cite{font-style:italic}code,var,kbd{font-family:var(--mono);font-size:.9em;font-style:normal;color:var(--text-code-muted-color)}:is(code,var,kbd):not(h1 *,h2 *,h3 *,h4 *,h5 *,h6 *,pre *){padding:.15em .3em;color:var(--text-code-color);background-color:var(--text-code-background-color);border-radius:var(--radius-sm)}dt{font-weight:var(--bold)}dd+dt{margin-top:.5em}del{text-decoration-color:var(--danger-500);text-decoration-style:wavy}h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{overflow-wrap:break-word;text-wrap:balance}h1,.h1,h2,.h2,h3,.h3,h4,.h4{font-family:var(--heading-font);font-weight:var(--heading-weight);letter-spacing:var(--heading-letter-spacing)}h1,.h1{margin-bottom:var(--heading-spacing-h1);font-size:var(--heading-font-size-h1);line-height:var(--heading-line-height-h1)}h2,.h2{margin-bottom:var(--heading-spacing-h2);font-size:var(--heading-font-size-h2);line-height:var(--heading-line-height-h2)}h3,.h3{margin-bottom:var(--heading-spacing-h3);font-size:var(--heading-font-size-h3);line-height:var(--heading-line-height-h3)}h4,.h4{margin-bottom:var(--heading-spacing-h4);font-size:var(--heading-font-size-h4);line-height:var(--heading-line-height-h4)}h5,.h5{margin-bottom:var(--heading-spacing-h5);font-size:var(--heading-font-size-h5);line-height:var(--heading-line-height-h5)}h6,.h6{margin-bottom:var(--heading-spacing-h6);font-size:var(--heading-font-size-h6);line-height:var(--heading-line-height-h6)}:where(h1,h2,h3):has(+:is(h2,h3,h4)){margin-bottom:var(--heading-spacing-consecutive)}hr{display:flex;justify-content:center;align-items:center;height:0;border-style:solid;border-width:var(--border-sm) 0 0;color:var(--ui-border-color);overflow:visible;&:after{content:var(--hr-content);padding:0 var(--xs1);line-height:1;letter-spacing:var(--tracking-sm);background-color:var(--body-background-color)}}:where(hr):has(+:is(p)){margin-bottom:var(--prose-spacing)}ins{padding:.15em .3em;color:var(--ins-color);background-color:var(--ins-background-color);border-radius:var(--radius-sm);-webkit-text-decoration:none;text-decoration:none;&:before{content:"+ "}}mark{padding:.15em .5em;background:var(--marker-color);border-radius:1em 0}:where(ol,ul){list-style-type:none;padding:0}pre{font-family:var(--mono);font-size:var(--pre-font-size);white-space:pre-wrap;border-radius:var(--pre-border-radius)}q{font-style:italic}s{text-decoration-color:light-dark(var(--base-950),var(--base-50));text-decoration-style:wavy}sub,sup{line-height:1}}@layer elements{:root{quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(af),:not(:lang(af))>:lang(af){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ak),:not(:lang(ak))>:lang(ak){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(asa),:not(:lang(asa))>:lang(asa){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(az),:not(:lang(az))>:lang(az){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(bem),:not(:lang(bem))>:lang(bem){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(bez),:not(:lang(bez))>:lang(bez){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(bn),:not(:lang(bn))>:lang(bn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(brx),:not(:lang(brx))>:lang(brx){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(cgg),:not(:lang(cgg))>:lang(cgg){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(chr),:not(:lang(chr))>:lang(chr){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(cy),:not(:lang(cy))>:lang(cy){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(da),:not(:lang(da))>:lang(da){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(dav),:not(:lang(dav))>:lang(dav){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(dje),:not(:lang(dje))>:lang(dje){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(dz),:not(:lang(dz))>:lang(dz){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ebu),:not(:lang(ebu))>:lang(ebu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ee),:not(:lang(ee))>:lang(ee){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(en),:not(:lang(en))>:lang(en){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(fil),:not(:lang(fil))>:lang(fil){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(fo),:not(:lang(fo))>:lang(fo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ga),:not(:lang(ga))>:lang(ga){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(gd),:not(:lang(gd))>:lang(gd){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(gl),:not(:lang(gl))>:lang(gl){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(gu),:not(:lang(gu))>:lang(gu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(guz),:not(:lang(guz))>:lang(guz){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ha),:not(:lang(ha))>:lang(ha){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(hi),:not(:lang(hi))>:lang(hi){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(id),:not(:lang(id))>:lang(id){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ig),:not(:lang(ig))>:lang(ig){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(jmc),:not(:lang(jmc))>:lang(jmc){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kam),:not(:lang(kam))>:lang(kam){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kde),:not(:lang(kde))>:lang(kde){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kea),:not(:lang(kea))>:lang(kea){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(khq),:not(:lang(khq))>:lang(khq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ki),:not(:lang(ki))>:lang(ki){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kln),:not(:lang(kln))>:lang(kln){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(km),:not(:lang(km))>:lang(km){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kn),:not(:lang(kn))>:lang(kn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ko),:not(:lang(ko))>:lang(ko){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ksb),:not(:lang(ksb))>:lang(ksb){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lg),:not(:lang(lg))>:lang(lg){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ln),:not(:lang(ln))>:lang(ln){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lo),:not(:lang(lo))>:lang(lo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lrc),:not(:lang(lrc))>:lang(lrc){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lu),:not(:lang(lu))>:lang(lu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(luo),:not(:lang(luo))>:lang(luo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lv),:not(:lang(lv))>:lang(lv){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mas),:not(:lang(mas))>:lang(mas){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mer),:not(:lang(mer))>:lang(mer){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mfe),:not(:lang(mfe))>:lang(mfe){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mgo),:not(:lang(mgo))>:lang(mgo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ml),:not(:lang(ml))>:lang(ml){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mn),:not(:lang(mn))>:lang(mn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mr),:not(:lang(mr))>:lang(mr){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ms),:not(:lang(ms))>:lang(ms){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mt),:not(:lang(mt))>:lang(mt){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(my),:not(:lang(my))>:lang(my){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(naq),:not(:lang(naq))>:lang(naq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(nd),:not(:lang(nd))>:lang(nd){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ne),:not(:lang(ne))>:lang(ne){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(nus),:not(:lang(nus))>:lang(nus){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(nyn),:not(:lang(nyn))>:lang(nyn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(pa),:not(:lang(pa))>:lang(pa){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(pt),:not(:lang(pt))>:lang(pt){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(rof),:not(:lang(rof))>:lang(rof){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(rwk),:not(:lang(rwk))>:lang(rwk){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(saq),:not(:lang(saq))>:lang(saq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(sbp),:not(:lang(sbp))>:lang(sbp){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(seh),:not(:lang(seh))>:lang(seh){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ses),:not(:lang(ses))>:lang(ses){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(si),:not(:lang(si))>:lang(si){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(so),:not(:lang(so))>:lang(so){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(sw),:not(:lang(sw))>:lang(sw){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ta),:not(:lang(ta))>:lang(ta){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(te),:not(:lang(te))>:lang(te){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(teo),:not(:lang(teo))>:lang(teo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(th),:not(:lang(th))>:lang(th){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(to),:not(:lang(to))>:lang(to){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(tr),:not(:lang(tr))>:lang(tr){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(twq),:not(:lang(twq))>:lang(twq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(tzm),:not(:lang(tzm))>:lang(tzm){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(uz-Cyrl),:not(:lang(uz-Cyrl))>:lang(uz-Cyrl){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vai),:not(:lang(vai))>:lang(vai){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vai-Latn),:not(:lang(vai-Latn))>:lang(vai-Latn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vi),:not(:lang(vi))>:lang(vi){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vun),:not(:lang(vun))>:lang(vun){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(xog),:not(:lang(xog))>:lang(xog){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(yo),:not(:lang(yo))>:lang(yo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(yue-Hans),:not(:lang(yue-Hans))>:lang(yue-Hans){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(zh),:not(:lang(zh))>:lang(zh){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(zu),:not(:lang(zu))>:lang(zu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(uz),:not(:lang(uz))>:lang(uz){quotes:"\201c" "\201d" "\2019" "\2018"}:root:lang(eu),:not(:lang(eu))>:lang(eu){quotes:"\201c" "\201d" "\201c" "\201d"}:root:lang(tk),:not(:lang(tk))>:lang(tk){quotes:"\201c" "\201d" "\201c" "\201d"}:root:lang(ar),:not(:lang(ar))>:lang(ar){quotes:"\201d" "\201c" "\2019" "\2018"}:root:lang(ur),:not(:lang(ur))>:lang(ur){quotes:"\201d" "\201c" "\2019" "\2018"}:root:lang(fi),:not(:lang(fi))>:lang(fi){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(he),:not(:lang(he))>:lang(he){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(lag),:not(:lang(lag))>:lang(lag){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(rn),:not(:lang(rn))>:lang(rn){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(sn),:not(:lang(sn))>:lang(sn){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(sv),:not(:lang(sv))>:lang(sv){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(sr),:not(:lang(sr))>:lang(sr){quotes:"\201e" "\201c" "\2018" "\2018"}:root:lang(sr-Latn),:not(:lang(sr-Latn))>:lang(sr-Latn){quotes:"\201e" "\201c" "\2018" "\2018"}:root:lang(bg),:not(:lang(bg))>:lang(bg){quotes:"\201e" "\201c" "\201e" "\201c"}:root:lang(lt),:not(:lang(lt))>:lang(lt){quotes:"\201e" "\201c" "\201e" "\201c"}:root:lang(bs-Cyrl),:not(:lang(bs-Cyrl))>:lang(bs-Cyrl){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(cs),:not(:lang(cs))>:lang(cs){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(de),:not(:lang(de))>:lang(de){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(dsb),:not(:lang(dsb))>:lang(dsb){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(et),:not(:lang(et))>:lang(et){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(hr),:not(:lang(hr))>:lang(hr){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(hsb),:not(:lang(hsb))>:lang(hsb){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(is),:not(:lang(is))>:lang(is){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(lb),:not(:lang(lb))>:lang(lb){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(luy),:not(:lang(luy))>:lang(luy){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(mk),:not(:lang(mk))>:lang(mk){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(sk),:not(:lang(sk))>:lang(sk){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(sl),:not(:lang(sl))>:lang(sl){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(ka),:not(:lang(ka))>:lang(ka){quotes:"\201e" "\201c" "\ab" "\bb"}:root:lang(bs),:not(:lang(bs))>:lang(bs){quotes:"\201e" "\201d" "\2018" "\2019"}:root:lang(agq),:not(:lang(agq))>:lang(agq){quotes:"\201e" "\201d" "\201a" "\2019"}:root:lang(ff),:not(:lang(ff))>:lang(ff){quotes:"\201e" "\201d" "\201a" "\2019"}:root:lang(nmg),:not(:lang(nmg))>:lang(nmg){quotes:"\201e" "\201d" "\ab" "\bb"}:root:lang(ro),:not(:lang(ro))>:lang(ro){quotes:"\201e" "\201d" "\ab" "\bb"}:root:lang(pl),:not(:lang(pl))>:lang(pl){quotes:"\201e" "\201d" "\ab" "\bb"}:root:lang(hu),:not(:lang(hu))>:lang(hu){quotes:"\201e" "\201d" "\bb" "\ab"}:root:lang(nl),:not(:lang(nl))>:lang(nl){quotes:"\2018" "\2019" "\201c" "\201d"}:root:lang(ti-ER),:not(:lang(ti-ER))>:lang(ti-ER){quotes:"\2018" "\2019" "\201c" "\201d"}:root:lang(dua),:not(:lang(dua))>:lang(dua){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(ksf),:not(:lang(ksf))>:lang(ksf){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(rw),:not(:lang(rw))>:lang(rw){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(nn),:not(:lang(nn))>:lang(nn){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(nb),:not(:lang(nb))>:lang(nb){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(ast),:not(:lang(ast))>:lang(ast){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(bm),:not(:lang(bm))>:lang(bm){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(br),:not(:lang(br))>:lang(br){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(ca),:not(:lang(ca))>:lang(ca){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(dyo),:not(:lang(dyo))>:lang(dyo){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(el),:not(:lang(el))>:lang(el){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(es),:not(:lang(es))>:lang(es){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(ewo),:not(:lang(ewo))>:lang(ewo){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(mg),:not(:lang(mg))>:lang(mg){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(mua),:not(:lang(mua))>:lang(mua){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(sg),:not(:lang(sg))>:lang(sg){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(it),:not(:lang(it))>:lang(it){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(kab),:not(:lang(kab))>:lang(kab){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(kk),:not(:lang(kk))>:lang(kk){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(pt-PT),:not(:lang(pt-PT))>:lang(pt-PT){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(nnh),:not(:lang(nnh))>:lang(nnh){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(sq),:not(:lang(sq))>:lang(sq){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(bas),:not(:lang(bas))>:lang(bas){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(be),:not(:lang(be))>:lang(be){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(ky),:not(:lang(ky))>:lang(ky){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(sah),:not(:lang(sah))>:lang(sah){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(ru),:not(:lang(ru))>:lang(ru){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(uk),:not(:lang(uk))>:lang(uk){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(zgh),:not(:lang(zgh))>:lang(zgh){quotes:"\ab" "\bb" "\201e" "\201d"}:root:lang(shi),:not(:lang(shi))>:lang(shi){quotes:"\ab" "\bb" "\201e" "\201d"}:root:lang(shi-Latn),:not(:lang(shi-Latn))>:lang(shi-Latn){quotes:"\ab" "\bb" "\201e" "\201d"}:root:lang(am),:not(:lang(am))>:lang(am){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(az-Cyrl),:not(:lang(az-Cyrl))>:lang(az-Cyrl){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(fa),:not(:lang(fa))>:lang(fa){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(fr-CH),:not(:lang(fr-CH))>:lang(fr-CH){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(gsw),:not(:lang(gsw))>:lang(gsw){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(jgo),:not(:lang(jgo))>:lang(jgo){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(kkj),:not(:lang(kkj))>:lang(kkj){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(mzn),:not(:lang(mzn))>:lang(mzn){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(fr),:not(:lang(fr))>:lang(fr){quotes:"\ab" "\bb" "\ab" "\bb"}:root:lang(hy),:not(:lang(hy))>:lang(hy){quotes:"\ab" "\bb" "\ab" "\bb"}:root:lang(yav),:not(:lang(yav))>:lang(yav){quotes:"\ab" "\bb" "\ab" "\bb"}:root:lang(ja),:not(:lang(ja))>:lang(ja){quotes:"\300c" "\300d" "\300e" "\300f"}:root:lang(yue),:not(:lang(yue))>:lang(yue){quotes:"\300c" "\300d" "\300e" "\300f"}:root:lang(zh-Hant),:not(:lang(zh-Hant))>:lang(zh-Hant){quotes:"\300c" "\300d" "\300e" "\300f"}}@layer elements{audio,canvas,embed,iframe,img,object,picture,svg,video{display:block;vertical-align:middle;max-width:100%}img,svg,video,canvas{height:auto}audio{width:100%;max-width:var(--tera1)}audio:not([controls]){display:none}figcaption{font-style:italic;font-size:var(--text-sm)}figure{&:has(*+figcaption){figcaption{margin-top:var(--figcaption-spacing)}}&:has(figcaption+*){figcaption{margin-bottom:var(--figcaption-spacing)}}}iframe{border:var(--border-sm) solid var(--ui-border-color)}}@layer elements{caption{caption-side:bottom;margin-top:var(--table-caption-spacing);font-size:var(--text-sm)}table{border-spacing:0;border:var(--table-border-width) solid var(--table-border-color);border-radius:var(--table-border-radius);background-color:var(--table-background-color)}th,td{text-align:start;padding:var(--table-padding);border-bottom:var(--table-border-width) solid var(--table-border-color);border-inline-start:var(--table-border-width) solid var(--table-border-color)}tr{th:first-child,td:first-child{border-inline-start-width:0}}tbody{tr:last-child{th,td{border-bottom-width:0}}}tfoot{th,td{border-top:var(--table-border-width) solid var(--table-border-color);border-bottom-width:0}}}@layer elements{::placeholder{opacity:var(--o-4)}input,button,textarea,select{font:inherit;color:var(--text-color)}button{color:var(--text-color)}fieldset{border:var(--fieldset-border-width) solid var(--fieldset-border-color);border-radius:var(--fieldset-border-radius);padding:var(--fieldset-padding);ul:has([type=checkbox],[type=radio]){padding-inline-start:0}>[aria-hidden]{margin-bottom:var(--sm3);font-size:var(--text-lg);grid-column:1 / -1}}:is(input,select,textarea):user-invalid{border-color:var(--input-border-color-invalid)}input{&:where(:not([type=checkbox],[type=radio])){height:var(--input-height)}&:where(:not([type=color],[type=file],[type=reset],[type=submit])){padding:var(--input-padding)}&:where(:not([type=color])){border-radius:var(--input-border-radius)}&:where(:not([type=file])){border:var(--input-border-width) solid var(--input-border-color)}&[type=file]{width:100%;accent-color:var(--text-color)}&[type=number]{padding-inline-end:var(--xs1)}}label{display:block;&:has(+:is(input,select,textarea)){margin-bottom:var(--label-spacing)}}legend{position:absolute;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);width:1px;height:1px;white-space:nowrap}meter{width:100%;background:var(--meter-track-color);border-radius:var(--meter-border-radius);height:var(--meter-height);&::-webkit-meter-bar{background:var(--meter-track-color)}&::-webkit-meter-bar,&::-webkit-meter-optimum-value,&::-webkit-meter-suboptimum-value,&::-webkit-meter-even-less-good-value{height:var(--meter-height);border:none;border-radius:var(--meter-border-radius)}&::-webkit-meter-even-less-good-value{background:var(--meter-low-color)}&::-webkit-meter-suboptimum-value{background:var(--meter-medium-color)}&::-webkit-meter-optimum-value{background:var(--meter-high-color)}&:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:var(--meter-low-color)}&:-moz-meter-sub-optimum::-moz-meter-bar{background:var(--meter-medium-color)}&:-moz-meter-optimum::-moz-meter-bar{background:var(--meter-high-color)}}progress{appearance:none;width:100%;height:var(--progress-height);background:var(--progress-track-color);border-radius:var(--progress-border-radius);border:none;&::-moz-progress-bar{background:var(--progress-color);border-radius:var(--progress-border-radius)}&::-webkit-progress-bar{width:100%;background:var(--progress-track-color);border-radius:var(--progress-border-radius);height:var(--progress-height)}&::-webkit-progress-value{background:var(--progress-color);border-radius:var(--progress-border-radius)}}select{--split: calc(100% - var(--select-icon-size));display:flex;appearance:none;height:var(--input-height);padding:var(--xs1) calc(var(--input-padding) + var(--md1)) var(--xs1) var(--input-padding);border:var(--input-border-width) solid var(--input-border-color);border-radius:var(--input-border-radius);background:linear-gradient(to right,var(--body-background-color) 0 var(--split),var(--text-color) var(--split) 100%);mask-image:var(--select-icon),linear-gradient(to right,transparent calc(var(--split) - 1px),red 0),linear-gradient(red 0 0);mask-size:var(--select-icon-size),auto,auto;mask-position:calc(100% - var(--xs1)) center,0 0,0 0;mask-repeat:no-repeat;mask-clip:padding-box,padding-box,border-box;mask-origin:padding-box,padding-box,border-box;mask-composite:add,exclude;&:disabled{--disabled-color: light-dark( hsl(from var(--text-color) h s 70%), hsl(from var(--text-color) h s 40%) );cursor:not-allowed;color:var(--disabled-color);background:linear-gradient(to right,var(--body-background-color) 0 var(--split),var(--disabled-color) var(--split) 100%)}&[multiple]{height:auto;padding:var(--input-padding);background:var(--body-background-color);mask-image:none}}textarea{width:100%;padding:var(--input-padding);border-radius:var(--input-border-radius);border:var(--input-border-width) solid var(--input-border-color);resize:vertical;&:not([rows]){min-height:6em}}}@layer elements{dialog{min-width:var(--dialog-min-width);max-width:var(--dialog-max-width);padding:var(--dialog-padding);border:var(--dialog-border-width) solid var(--dialog-border-color);background-color:var(--dialog-background-color);border-radius:var(--dialog-border-radius);&::backdrop{background:var(--dialog-backdrop-color);opacity:var(--dialog-backdrop-opacity)}[aria-label="close pop-up"]{position:absolute;top:var(--xs3);right:var( --xs3 );background:transparent;border:none;outline:none;cursor:pointer}p:last-of-type{margin-bottom:0}}details{padding:var(--details-padding);border:var(--details-border-width) solid var(--details-border-color);background-color:var(--details-background-color);border-radius:var(--details-border-radius);cursor:pointer;summary{display:flex;justify-content:space-between;font-weight:var(--bold);&::-webkit-details-marker{display:none}&:after{content:"";width:var(--details-icon-size);height:var(--details-icon-size);background-color:currentColor;mask-image:var(--details-icon);mask-size:contain;mask-repeat:no-repeat;transition:transform var(--transition)}}&[open]>summary{margin-bottom:var(--details-spacing);&:after{transform:rotate(180deg)}}p:last-of-type{margin-bottom:0}}}@layer global{:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.a11y-skipLink{position:fixed;z-index:var(--z-top);inset-block-start:-100vb;inset-inline-start:0;padding:.75em 1.25em;background-color:var(--body-background-color);color:var(--text-color)}.a11y-skipLink:focus{inset-block-start:0}.a11y-srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}}@layer global{@keyframes fadeFromOpaque{0%{opacity:1}}@keyframes fadeToOpaque{to{opacity:1}}@keyframes fadeFromTransparent{0%{opacity:0}}@keyframes fadeToTransparent{to{opacity:0}}}@layer global{.grid{display:grid;--grid-tc: repeat(4, 1fr);--grid-cs: 1;--grid-ce: -1;grid-template-columns:var(--grid-tc);grid-column-gap:var(--grid-column-gap);grid-row-gap:var(--grid-row-gap)}.grid-flush{grid-column-gap:0;grid-row-gap:0}.grid>.grid_item{display:block;appearance:none;-webkit-appearance:none}.grid[col="1"]{--grid-tc: repeat(1, 1fr) }.grid[col="2"]{--grid-tc: repeat(2, 1fr) }.grid[col="3"]{--grid-tc: repeat(3, 1fr) }.grid[col="4"]{--grid-tc: repeat(4, 1fr) }.grid[col="5"]{--grid-tc: repeat(5, 1fr) }.grid[col="6"]{--grid-tc: repeat(6, 1fr) }.grid[col="7"]{--grid-tc: repeat(7, 1fr) }.grid[col="8"]{--grid-tc: repeat(8, 1fr) }.grid[col="9"]{--grid-tc: repeat(9, 1fr) }.grid[col="10"]{--grid-tc: repeat(10, 1fr) }.grid[col="11"]{--grid-tc: repeat(11, 1fr) }.grid[col="12"]{--grid-tc: repeat(12, 1fr) }.grid[col="13"]{--grid-tc: repeat(13, 1fr) }.grid[col="14"]{--grid-tc: repeat(14, 1fr) }.grid[col="15"]{--grid-tc: repeat(15, 1fr) }.grid[col="16"]{--grid-tc: repeat(16, 1fr) }.grid[col="17"]{--grid-tc: repeat(17, 1fr) }.grid[col="18"]{--grid-tc: repeat(18, 1fr) }.grid[col="19"]{--grid-tc: repeat(19, 1fr) }.grid[col="20"]{--grid-tc: repeat(20, 1fr) }.grid[col="21"]{--grid-tc: repeat(21, 1fr) }.grid[col="22"]{--grid-tc: repeat(22, 1fr) }.grid[col="23"]{--grid-tc: repeat(23, 1fr) }.grid[col="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span^="1"]{--grid-cs: 1 }.grid>.grid_item[span^="2"]{--grid-cs: 2 }.grid>.grid_item[span^="3"]{--grid-cs: 3 }.grid>.grid_item[span^="4"]{--grid-cs: 4 }.grid>.grid_item[span^="5"]{--grid-cs: 5 }.grid>.grid_item[span^="6"]{--grid-cs: 6 }.grid>.grid_item[span^="7"]{--grid-cs: 7 }.grid>.grid_item[span^="8"]{--grid-cs: 8 }.grid>.grid_item[span^="9"]{--grid-cs: 9 }.grid>.grid_item[span^="10"]{--grid-cs: 10 }.grid>.grid_item[span^="11"]{--grid-cs: 11 }.grid>.grid_item[span^="12"]{--grid-cs: 12 }.grid>.grid_item[span^="13"]{--grid-cs: 13 }.grid>.grid_item[span^="14"]{--grid-cs: 14 }.grid>.grid_item[span^="15"]{--grid-cs: 15 }.grid>.grid_item[span^="16"]{--grid-cs: 16 }.grid>.grid_item[span^="17"]{--grid-cs: 17 }.grid>.grid_item[span^="18"]{--grid-cs: 18 }.grid>.grid_item[span^="19"]{--grid-cs: 19 }.grid>.grid_item[span^="20"]{--grid-cs: 20 }.grid>.grid_item[span^="21"]{--grid-cs: 21 }.grid>.grid_item[span^="22"]{--grid-cs: 22 }.grid>.grid_item[span^="23"]{--grid-cs: 23 }.grid>.grid_item[span^="24"]{--grid-cs: 24 }.grid>.grid_item[span$="+1"],.grid>.grid_item[span="1"]{--grid-ce: 1 }.grid>.grid_item[span$="+2"],.grid>.grid_item[span$="-1"],.grid>.grid_item[span="2"]{--grid-ce: 2 }.grid>.grid_item[span$="+3"],.grid>.grid_item[span$="-2"],.grid>.grid_item[span="3"]{--grid-ce: 3 }.grid>.grid_item[span$="+4"],.grid>.grid_item[span$="-3"],.grid>.grid_item[span="4"]{--grid-ce: 4 }.grid>.grid_item[span$="+5"],.grid>.grid_item[span$="-4"],.grid>.grid_item[span="5"]{--grid-ce: 5 }.grid>.grid_item[span$="+6"],.grid>.grid_item[span$="-5"],.grid>.grid_item[span="6"]{--grid-ce: 6 }.grid>.grid_item[span$="+7"],.grid>.grid_item[span$="-6"],.grid>.grid_item[span="7"]{--grid-ce: 7 }.grid>.grid_item[span$="+8"],.grid>.grid_item[span$="-7"],.grid>.grid_item[span="8"]{--grid-ce: 8 }.grid>.grid_item[span$="+9"],.grid>.grid_item[span$="-8"],.grid>.grid_item[span="9"]{--grid-ce: 9 }.grid>.grid_item[span$="+10"],.grid>.grid_item[span$="-9"],.grid>.grid_item[span="10"]{--grid-ce: 10 }.grid>.grid_item[span$="+11"],.grid>.grid_item[span$="-10"],.grid>.grid_item[span="11"]{--grid-ce: 11 }.grid>.grid_item[span$="+12"],.grid>.grid_item[span$="-11"],.grid>.grid_item[span="12"]{--grid-ce: 12 }.grid>.grid_item[span$="+13"],.grid>.grid_item[span$="-12"],.grid>.grid_item[span="13"]{--grid-ce: 13 }.grid>.grid_item[span$="+14"],.grid>.grid_item[span$="-13"],.grid>.grid_item[span="14"]{--grid-ce: 14 }.grid>.grid_item[span$="+15"],.grid>.grid_item[span$="-14"],.grid>.grid_item[span="15"]{--grid-ce: 15 }.grid>.grid_item[span$="+16"],.grid>.grid_item[span$="-15"],.grid>.grid_item[span="16"]{--grid-ce: 16 }.grid>.grid_item[span$="+17"],.grid>.grid_item[span$="-16"],.grid>.grid_item[span="17"]{--grid-ce: 17 }.grid>.grid_item[span$="+18"],.grid>.grid_item[span$="-17"],.grid>.grid_item[span="18"]{--grid-ce: 18 }.grid>.grid_item[span$="+19"],.grid>.grid_item[span$="-18"],.grid>.grid_item[span="19"]{--grid-ce: 19 }.grid>.grid_item[span$="+20"],.grid>.grid_item[span$="-19"],.grid>.grid_item[span="20"]{--grid-ce: 20 }.grid>.grid_item[span$="+21"],.grid>.grid_item[span$="-20"],.grid>.grid_item[span="21"]{--grid-ce: 21 }.grid>.grid_item[span$="+22"],.grid>.grid_item[span$="-21"],.grid>.grid_item[span="22"]{--grid-ce: 22 }.grid>.grid_item[span$="+23"],.grid>.grid_item[span$="-22"],.grid>.grid_item[span="23"]{--grid-ce: 23 }.grid>.grid_item[span$="+24"],.grid>.grid_item[span$="-23"],.grid>.grid_item[span="24"]{--grid-ce: 24 }.grid>.grid_item[span$="-24"]{--grid-ce: 25 }.grid>.grid_item[span]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span*="+"],.grid>.grid_item[span*="-"],.grid>.grid_item[span*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span*="-"],.grid>.grid_item[span*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span=row]{grid-column:1 / -1}@media only screen and (width>=768px){.grid[col-md="1"]{--grid-tc: repeat(1, 1fr) }.grid[col-md="2"]{--grid-tc: repeat(2, 1fr) }.grid[col-md="3"]{--grid-tc: repeat(3, 1fr) }.grid[col-md="4"]{--grid-tc: repeat(4, 1fr) }.grid[col-md="5"]{--grid-tc: repeat(5, 1fr) }.grid[col-md="6"]{--grid-tc: repeat(6, 1fr) }.grid[col-md="7"]{--grid-tc: repeat(7, 1fr) }.grid[col-md="8"]{--grid-tc: repeat(8, 1fr) }.grid[col-md="9"]{--grid-tc: repeat(9, 1fr) }.grid[col-md="10"]{--grid-tc: repeat(10, 1fr) }.grid[col-md="11"]{--grid-tc: repeat(11, 1fr) }.grid[col-md="12"]{--grid-tc: repeat(12, 1fr) }.grid[col-md="13"]{--grid-tc: repeat(13, 1fr) }.grid[col-md="14"]{--grid-tc: repeat(14, 1fr) }.grid[col-md="15"]{--grid-tc: repeat(15, 1fr) }.grid[col-md="16"]{--grid-tc: repeat(16, 1fr) }.grid[col-md="17"]{--grid-tc: repeat(17, 1fr) }.grid[col-md="18"]{--grid-tc: repeat(18, 1fr) }.grid[col-md="19"]{--grid-tc: repeat(19, 1fr) }.grid[col-md="20"]{--grid-tc: repeat(20, 1fr) }.grid[col-md="21"]{--grid-tc: repeat(21, 1fr) }.grid[col-md="22"]{--grid-tc: repeat(22, 1fr) }.grid[col-md="23"]{--grid-tc: repeat(23, 1fr) }.grid[col-md="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span-md^="1"]{--grid-cs: 1 }.grid>.grid_item[span-md^="2"]{--grid-cs: 2 }.grid>.grid_item[span-md^="3"]{--grid-cs: 3 }.grid>.grid_item[span-md^="4"]{--grid-cs: 4 }.grid>.grid_item[span-md^="5"]{--grid-cs: 5 }.grid>.grid_item[span-md^="6"]{--grid-cs: 6 }.grid>.grid_item[span-md^="7"]{--grid-cs: 7 }.grid>.grid_item[span-md^="8"]{--grid-cs: 8 }.grid>.grid_item[span-md^="9"]{--grid-cs: 9 }.grid>.grid_item[span-md^="10"]{--grid-cs: 10 }.grid>.grid_item[span-md^="11"]{--grid-cs: 11 }.grid>.grid_item[span-md^="12"]{--grid-cs: 12 }.grid>.grid_item[span-md^="13"]{--grid-cs: 13 }.grid>.grid_item[span-md^="14"]{--grid-cs: 14 }.grid>.grid_item[span-md^="15"]{--grid-cs: 15 }.grid>.grid_item[span-md^="16"]{--grid-cs: 16 }.grid>.grid_item[span-md^="17"]{--grid-cs: 17 }.grid>.grid_item[span-md^="18"]{--grid-cs: 18 }.grid>.grid_item[span-md^="19"]{--grid-cs: 19 }.grid>.grid_item[span-md^="20"]{--grid-cs: 20 }.grid>.grid_item[span-md^="21"]{--grid-cs: 21 }.grid>.grid_item[span-md^="22"]{--grid-cs: 22 }.grid>.grid_item[span-md^="23"]{--grid-cs: 23 }.grid>.grid_item[span-md^="24"]{--grid-cs: 24 }.grid>.grid_item[span-md$="+1"],.grid>.grid_item[span-md="1"]{--grid-ce: 1 }.grid>.grid_item[span-md$="+2"],.grid>.grid_item[span-md$="-1"],.grid>.grid_item[span-md="2"]{--grid-ce: 2 }.grid>.grid_item[span-md$="+3"],.grid>.grid_item[span-md$="-2"],.grid>.grid_item[span-md="3"]{--grid-ce: 3 }.grid>.grid_item[span-md$="+4"],.grid>.grid_item[span-md$="-3"],.grid>.grid_item[span-md="4"]{--grid-ce: 4 }.grid>.grid_item[span-md$="+5"],.grid>.grid_item[span-md$="-4"],.grid>.grid_item[span-md="5"]{--grid-ce: 5 }.grid>.grid_item[span-md$="+6"],.grid>.grid_item[span-md$="-5"],.grid>.grid_item[span-md="6"]{--grid-ce: 6 }.grid>.grid_item[span-md$="+7"],.grid>.grid_item[span-md$="-6"],.grid>.grid_item[span-md="7"]{--grid-ce: 7 }.grid>.grid_item[span-md$="+8"],.grid>.grid_item[span-md$="-7"],.grid>.grid_item[span-md="8"]{--grid-ce: 8 }.grid>.grid_item[span-md$="+9"],.grid>.grid_item[span-md$="-8"],.grid>.grid_item[span-md="9"]{--grid-ce: 9 }.grid>.grid_item[span-md$="+10"],.grid>.grid_item[span-md$="-9"],.grid>.grid_item[span-md="10"]{--grid-ce: 10 }.grid>.grid_item[span-md$="+11"],.grid>.grid_item[span-md$="-10"],.grid>.grid_item[span-md="11"]{--grid-ce: 11 }.grid>.grid_item[span-md$="+12"],.grid>.grid_item[span-md$="-11"],.grid>.grid_item[span-md="12"]{--grid-ce: 12 }.grid>.grid_item[span-md$="+13"],.grid>.grid_item[span-md$="-12"],.grid>.grid_item[span-md="13"]{--grid-ce: 13 }.grid>.grid_item[span-md$="+14"],.grid>.grid_item[span-md$="-13"],.grid>.grid_item[span-md="14"]{--grid-ce: 14 }.grid>.grid_item[span-md$="+15"],.grid>.grid_item[span-md$="-14"],.grid>.grid_item[span-md="15"]{--grid-ce: 15 }.grid>.grid_item[span-md$="+16"],.grid>.grid_item[span-md$="-15"],.grid>.grid_item[span-md="16"]{--grid-ce: 16 }.grid>.grid_item[span-md$="+17"],.grid>.grid_item[span-md$="-16"],.grid>.grid_item[span-md="17"]{--grid-ce: 17 }.grid>.grid_item[span-md$="+18"],.grid>.grid_item[span-md$="-17"],.grid>.grid_item[span-md="18"]{--grid-ce: 18 }.grid>.grid_item[span-md$="+19"],.grid>.grid_item[span-md$="-18"],.grid>.grid_item[span-md="19"]{--grid-ce: 19 }.grid>.grid_item[span-md$="+20"],.grid>.grid_item[span-md$="-19"],.grid>.grid_item[span-md="20"]{--grid-ce: 20 }.grid>.grid_item[span-md$="+21"],.grid>.grid_item[span-md$="-20"],.grid>.grid_item[span-md="21"]{--grid-ce: 21 }.grid>.grid_item[span-md$="+22"],.grid>.grid_item[span-md$="-21"],.grid>.grid_item[span-md="22"]{--grid-ce: 22 }.grid>.grid_item[span-md$="+23"],.grid>.grid_item[span-md$="-22"],.grid>.grid_item[span-md="23"]{--grid-ce: 23 }.grid>.grid_item[span-md$="+24"],.grid>.grid_item[span-md$="-23"],.grid>.grid_item[span-md="24"]{--grid-ce: 24 }.grid>.grid_item[span-md$="-24"]{--grid-ce: 25 }.grid>.grid_item[span-md]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span-md*="+"],.grid>.grid_item[span-md*="-"],.grid>.grid_item[span-md*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span-md*="-"],.grid>.grid_item[span-md*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span-md=row]{grid-column:1 / -1}}@media only screen and (width>=1024px){.grid[col-lg="1"]{--grid-tc: repeat(1, 1fr) }.grid[col-lg="2"]{--grid-tc: repeat(2, 1fr) }.grid[col-lg="3"]{--grid-tc: repeat(3, 1fr) }.grid[col-lg="4"]{--grid-tc: repeat(4, 1fr) }.grid[col-lg="5"]{--grid-tc: repeat(5, 1fr) }.grid[col-lg="6"]{--grid-tc: repeat(6, 1fr) }.grid[col-lg="7"]{--grid-tc: repeat(7, 1fr) }.grid[col-lg="8"]{--grid-tc: repeat(8, 1fr) }.grid[col-lg="9"]{--grid-tc: repeat(9, 1fr) }.grid[col-lg="10"]{--grid-tc: repeat(10, 1fr) }.grid[col-lg="11"]{--grid-tc: repeat(11, 1fr) }.grid[col-lg="12"]{--grid-tc: repeat(12, 1fr) }.grid[col-lg="13"]{--grid-tc: repeat(13, 1fr) }.grid[col-lg="14"]{--grid-tc: repeat(14, 1fr) }.grid[col-lg="15"]{--grid-tc: repeat(15, 1fr) }.grid[col-lg="16"]{--grid-tc: repeat(16, 1fr) }.grid[col-lg="17"]{--grid-tc: repeat(17, 1fr) }.grid[col-lg="18"]{--grid-tc: repeat(18, 1fr) }.grid[col-lg="19"]{--grid-tc: repeat(19, 1fr) }.grid[col-lg="20"]{--grid-tc: repeat(20, 1fr) }.grid[col-lg="21"]{--grid-tc: repeat(21, 1fr) }.grid[col-lg="22"]{--grid-tc: repeat(22, 1fr) }.grid[col-lg="23"]{--grid-tc: repeat(23, 1fr) }.grid[col-lg="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span-lg^="1"]{--grid-cs: 1 }.grid>.grid_item[span-lg^="2"]{--grid-cs: 2 }.grid>.grid_item[span-lg^="3"]{--grid-cs: 3 }.grid>.grid_item[span-lg^="4"]{--grid-cs: 4 }.grid>.grid_item[span-lg^="5"]{--grid-cs: 5 }.grid>.grid_item[span-lg^="6"]{--grid-cs: 6 }.grid>.grid_item[span-lg^="7"]{--grid-cs: 7 }.grid>.grid_item[span-lg^="8"]{--grid-cs: 8 }.grid>.grid_item[span-lg^="9"]{--grid-cs: 9 }.grid>.grid_item[span-lg^="10"]{--grid-cs: 10 }.grid>.grid_item[span-lg^="11"]{--grid-cs: 11 }.grid>.grid_item[span-lg^="12"]{--grid-cs: 12 }.grid>.grid_item[span-lg^="13"]{--grid-cs: 13 }.grid>.grid_item[span-lg^="14"]{--grid-cs: 14 }.grid>.grid_item[span-lg^="15"]{--grid-cs: 15 }.grid>.grid_item[span-lg^="16"]{--grid-cs: 16 }.grid>.grid_item[span-lg^="17"]{--grid-cs: 17 }.grid>.grid_item[span-lg^="18"]{--grid-cs: 18 }.grid>.grid_item[span-lg^="19"]{--grid-cs: 19 }.grid>.grid_item[span-lg^="20"]{--grid-cs: 20 }.grid>.grid_item[span-lg^="21"]{--grid-cs: 21 }.grid>.grid_item[span-lg^="22"]{--grid-cs: 22 }.grid>.grid_item[span-lg^="23"]{--grid-cs: 23 }.grid>.grid_item[span-lg^="24"]{--grid-cs: 24 }.grid>.grid_item[span-lg$="+1"],.grid>.grid_item[span-lg="1"]{--grid-ce: 1 }.grid>.grid_item[span-lg$="+2"],.grid>.grid_item[span-lg$="-1"],.grid>.grid_item[span-lg="2"]{--grid-ce: 2 }.grid>.grid_item[span-lg$="+3"],.grid>.grid_item[span-lg$="-2"],.grid>.grid_item[span-lg="3"]{--grid-ce: 3 }.grid>.grid_item[span-lg$="+4"],.grid>.grid_item[span-lg$="-3"],.grid>.grid_item[span-lg="4"]{--grid-ce: 4 }.grid>.grid_item[span-lg$="+5"],.grid>.grid_item[span-lg$="-4"],.grid>.grid_item[span-lg="5"]{--grid-ce: 5 }.grid>.grid_item[span-lg$="+6"],.grid>.grid_item[span-lg$="-5"],.grid>.grid_item[span-lg="6"]{--grid-ce: 6 }.grid>.grid_item[span-lg$="+7"],.grid>.grid_item[span-lg$="-6"],.grid>.grid_item[span-lg="7"]{--grid-ce: 7 }.grid>.grid_item[span-lg$="+8"],.grid>.grid_item[span-lg$="-7"],.grid>.grid_item[span-lg="8"]{--grid-ce: 8 }.grid>.grid_item[span-lg$="+9"],.grid>.grid_item[span-lg$="-8"],.grid>.grid_item[span-lg="9"]{--grid-ce: 9 }.grid>.grid_item[span-lg$="+10"],.grid>.grid_item[span-lg$="-9"],.grid>.grid_item[span-lg="10"]{--grid-ce: 10 }.grid>.grid_item[span-lg$="+11"],.grid>.grid_item[span-lg$="-10"],.grid>.grid_item[span-lg="11"]{--grid-ce: 11 }.grid>.grid_item[span-lg$="+12"],.grid>.grid_item[span-lg$="-11"],.grid>.grid_item[span-lg="12"]{--grid-ce: 12 }.grid>.grid_item[span-lg$="+13"],.grid>.grid_item[span-lg$="-12"],.grid>.grid_item[span-lg="13"]{--grid-ce: 13 }.grid>.grid_item[span-lg$="+14"],.grid>.grid_item[span-lg$="-13"],.grid>.grid_item[span-lg="14"]{--grid-ce: 14 }.grid>.grid_item[span-lg$="+15"],.grid>.grid_item[span-lg$="-14"],.grid>.grid_item[span-lg="15"]{--grid-ce: 15 }.grid>.grid_item[span-lg$="+16"],.grid>.grid_item[span-lg$="-15"],.grid>.grid_item[span-lg="16"]{--grid-ce: 16 }.grid>.grid_item[span-lg$="+17"],.grid>.grid_item[span-lg$="-16"],.grid>.grid_item[span-lg="17"]{--grid-ce: 17 }.grid>.grid_item[span-lg$="+18"],.grid>.grid_item[span-lg$="-17"],.grid>.grid_item[span-lg="18"]{--grid-ce: 18 }.grid>.grid_item[span-lg$="+19"],.grid>.grid_item[span-lg$="-18"],.grid>.grid_item[span-lg="19"]{--grid-ce: 19 }.grid>.grid_item[span-lg$="+20"],.grid>.grid_item[span-lg$="-19"],.grid>.grid_item[span-lg="20"]{--grid-ce: 20 }.grid>.grid_item[span-lg$="+21"],.grid>.grid_item[span-lg$="-20"],.grid>.grid_item[span-lg="21"]{--grid-ce: 21 }.grid>.grid_item[span-lg$="+22"],.grid>.grid_item[span-lg$="-21"],.grid>.grid_item[span-lg="22"]{--grid-ce: 22 }.grid>.grid_item[span-lg$="+23"],.grid>.grid_item[span-lg$="-22"],.grid>.grid_item[span-lg="23"]{--grid-ce: 23 }.grid>.grid_item[span-lg$="+24"],.grid>.grid_item[span-lg$="-23"],.grid>.grid_item[span-lg="24"]{--grid-ce: 24 }.grid>.grid_item[span-lg$="-24"]{--grid-ce: 25 }.grid>.grid_item[span-lg]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span-lg*="+"],.grid>.grid_item[span-lg*="-"],.grid>.grid_item[span-lg*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span-lg*="-"],.grid>.grid_item[span-lg*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span-lg=row]{grid-column:1 / -1}}@media only screen and (width>=1440px){.grid[col-xl="1"]{--grid-tc: repeat(1, 1fr) }.grid[col-xl="2"]{--grid-tc: repeat(2, 1fr) }.grid[col-xl="3"]{--grid-tc: repeat(3, 1fr) }.grid[col-xl="4"]{--grid-tc: repeat(4, 1fr) }.grid[col-xl="5"]{--grid-tc: repeat(5, 1fr) }.grid[col-xl="6"]{--grid-tc: repeat(6, 1fr) }.grid[col-xl="7"]{--grid-tc: repeat(7, 1fr) }.grid[col-xl="8"]{--grid-tc: repeat(8, 1fr) }.grid[col-xl="9"]{--grid-tc: repeat(9, 1fr) }.grid[col-xl="10"]{--grid-tc: repeat(10, 1fr) }.grid[col-xl="11"]{--grid-tc: repeat(11, 1fr) }.grid[col-xl="12"]{--grid-tc: repeat(12, 1fr) }.grid[col-xl="13"]{--grid-tc: repeat(13, 1fr) }.grid[col-xl="14"]{--grid-tc: repeat(14, 1fr) }.grid[col-xl="15"]{--grid-tc: repeat(15, 1fr) }.grid[col-xl="16"]{--grid-tc: repeat(16, 1fr) }.grid[col-xl="17"]{--grid-tc: repeat(17, 1fr) }.grid[col-xl="18"]{--grid-tc: repeat(18, 1fr) }.grid[col-xl="19"]{--grid-tc: repeat(19, 1fr) }.grid[col-xl="20"]{--grid-tc: repeat(20, 1fr) }.grid[col-xl="21"]{--grid-tc: repeat(21, 1fr) }.grid[col-xl="22"]{--grid-tc: repeat(22, 1fr) }.grid[col-xl="23"]{--grid-tc: repeat(23, 1fr) }.grid[col-xl="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span-xl^="1"]{--grid-cs: 1 }.grid>.grid_item[span-xl^="2"]{--grid-cs: 2 }.grid>.grid_item[span-xl^="3"]{--grid-cs: 3 }.grid>.grid_item[span-xl^="4"]{--grid-cs: 4 }.grid>.grid_item[span-xl^="5"]{--grid-cs: 5 }.grid>.grid_item[span-xl^="6"]{--grid-cs: 6 }.grid>.grid_item[span-xl^="7"]{--grid-cs: 7 }.grid>.grid_item[span-xl^="8"]{--grid-cs: 8 }.grid>.grid_item[span-xl^="9"]{--grid-cs: 9 }.grid>.grid_item[span-xl^="10"]{--grid-cs: 10 }.grid>.grid_item[span-xl^="11"]{--grid-cs: 11 }.grid>.grid_item[span-xl^="12"]{--grid-cs: 12 }.grid>.grid_item[span-xl^="13"]{--grid-cs: 13 }.grid>.grid_item[span-xl^="14"]{--grid-cs: 14 }.grid>.grid_item[span-xl^="15"]{--grid-cs: 15 }.grid>.grid_item[span-xl^="16"]{--grid-cs: 16 }.grid>.grid_item[span-xl^="17"]{--grid-cs: 17 }.grid>.grid_item[span-xl^="18"]{--grid-cs: 18 }.grid>.grid_item[span-xl^="19"]{--grid-cs: 19 }.grid>.grid_item[span-xl^="20"]{--grid-cs: 20 }.grid>.grid_item[span-xl^="21"]{--grid-cs: 21 }.grid>.grid_item[span-xl^="22"]{--grid-cs: 22 }.grid>.grid_item[span-xl^="23"]{--grid-cs: 23 }.grid>.grid_item[span-xl^="24"]{--grid-cs: 24 }.grid>.grid_item[span-xl$="+1"],.grid>.grid_item[span-xl="1"]{--grid-ce: 1 }.grid>.grid_item[span-xl$="+2"],.grid>.grid_item[span-xl$="-1"],.grid>.grid_item[span-xl="2"]{--grid-ce: 2 }.grid>.grid_item[span-xl$="+3"],.grid>.grid_item[span-xl$="-2"],.grid>.grid_item[span-xl="3"]{--grid-ce: 3 }.grid>.grid_item[span-xl$="+4"],.grid>.grid_item[span-xl$="-3"],.grid>.grid_item[span-xl="4"]{--grid-ce: 4 }.grid>.grid_item[span-xl$="+5"],.grid>.grid_item[span-xl$="-4"],.grid>.grid_item[span-xl="5"]{--grid-ce: 5 }.grid>.grid_item[span-xl$="+6"],.grid>.grid_item[span-xl$="-5"],.grid>.grid_item[span-xl="6"]{--grid-ce: 6 }.grid>.grid_item[span-xl$="+7"],.grid>.grid_item[span-xl$="-6"],.grid>.grid_item[span-xl="7"]{--grid-ce: 7 }.grid>.grid_item[span-xl$="+8"],.grid>.grid_item[span-xl$="-7"],.grid>.grid_item[span-xl="8"]{--grid-ce: 8 }.grid>.grid_item[span-xl$="+9"],.grid>.grid_item[span-xl$="-8"],.grid>.grid_item[span-xl="9"]{--grid-ce: 9 }.grid>.grid_item[span-xl$="+10"],.grid>.grid_item[span-xl$="-9"],.grid>.grid_item[span-xl="10"]{--grid-ce: 10 }.grid>.grid_item[span-xl$="+11"],.grid>.grid_item[span-xl$="-10"],.grid>.grid_item[span-xl="11"]{--grid-ce: 11 }.grid>.grid_item[span-xl$="+12"],.grid>.grid_item[span-xl$="-11"],.grid>.grid_item[span-xl="12"]{--grid-ce: 12 }.grid>.grid_item[span-xl$="+13"],.grid>.grid_item[span-xl$="-12"],.grid>.grid_item[span-xl="13"]{--grid-ce: 13 }.grid>.grid_item[span-xl$="+14"],.grid>.grid_item[span-xl$="-13"],.grid>.grid_item[span-xl="14"]{--grid-ce: 14 }.grid>.grid_item[span-xl$="+15"],.grid>.grid_item[span-xl$="-14"],.grid>.grid_item[span-xl="15"]{--grid-ce: 15 }.grid>.grid_item[span-xl$="+16"],.grid>.grid_item[span-xl$="-15"],.grid>.grid_item[span-xl="16"]{--grid-ce: 16 }.grid>.grid_item[span-xl$="+17"],.grid>.grid_item[span-xl$="-16"],.grid>.grid_item[span-xl="17"]{--grid-ce: 17 }.grid>.grid_item[span-xl$="+18"],.grid>.grid_item[span-xl$="-17"],.grid>.grid_item[span-xl="18"]{--grid-ce: 18 }.grid>.grid_item[span-xl$="+19"],.grid>.grid_item[span-xl$="-18"],.grid>.grid_item[span-xl="19"]{--grid-ce: 19 }.grid>.grid_item[span-xl$="+20"],.grid>.grid_item[span-xl$="-19"],.grid>.grid_item[span-xl="20"]{--grid-ce: 20 }.grid>.grid_item[span-xl$="+21"],.grid>.grid_item[span-xl$="-20"],.grid>.grid_item[span-xl="21"]{--grid-ce: 21 }.grid>.grid_item[span-xl$="+22"],.grid>.grid_item[span-xl$="-21"],.grid>.grid_item[span-xl="22"]{--grid-ce: 22 }.grid>.grid_item[span-xl$="+23"],.grid>.grid_item[span-xl$="-22"],.grid>.grid_item[span-xl="23"]{--grid-ce: 23 }.grid>.grid_item[span-xl$="+24"],.grid>.grid_item[span-xl$="-23"],.grid>.grid_item[span-xl="24"]{--grid-ce: 24 }.grid>.grid_item[span-xl$="-24"]{--grid-ce: 25 }.grid>.grid_item[span-xl]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span-xl*="+"],.grid>.grid_item[span-xl*="-"],.grid>.grid_item[span-xl*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span-xl*="-"],.grid>.grid_item[span-xl*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span-xl=row]{grid-column:1 / -1}}}@layer global{.layout{display:flex;flex-direction:column;width:100vw;min-height:100vh;.layout_content{flex:1}}.layout_content_main{container:main / inline-size}.layout-centered{.layout_content{display:grid;gap:var(--sm3);grid-template-columns:1fr minmax(0,var(--layout-content-width)) 1fr;margin-top:var(--lg1);margin-bottom:var(--sm1);@media(width>=768px){margin-top:var(--xl3);margin-bottom:var(--md3);gap:var(--md3)}}.layout_content_main{grid-column:2}}.layout-sidebar{.layout_content{@media(width>=768px){display:grid;grid-template-columns:var(--layout-aside-width) minmax(0,1fr)}}.layout_content_main{padding:var(--sm2);@media(width>=768px){grid-row:1;grid-column:2;padding:var(--lg1) var(--md2)}}.layout_content_aside{@media(width>=768px){grid-row:1;grid-column:1;padding:var(--lg1) var(--md3)}}}.layout-sidebar-end{.layout_content{@media(width>=768px){grid-template-columns:minmax(0,1fr) var(--layout-aside-width)}}.layout_content_main{@media(width>=768px){grid-column:1}}.layout_content_aside{@media(width>=768px){grid-column:2}}}.layout-docs{.layout_content{@media(width>=768px){display:grid;grid-template-columns:var(--layout-aside-width) minmax(0,1fr)}@media(width>=1024px){grid-template-columns:var(--layout-aside-width) minmax(0,var(--layout-content-width)) var(--layout-toc-width)}}.layout_content_main{padding:var(--sm2);@media(width>=768px){grid-row:1;grid-column:2;padding:var(--lg1) var(--md2)}}.layout_content_aside{display:none;@media(width>=768px){display:block;grid-row:1;grid-column:1;padding:var(--lg1) var(--md3)}}.layout_content_aside-toc{@media(width>=768px){display:none}@media(width>=1024px){display:block;grid-row:1;grid-column:3;padding:var(--lg1) var(--md3)}}}.layout-split{.layout_content{display:grid;@media(width>=768px){grid-template-columns:1fr 1fr}}}.layout-cover{min-height:100dvh;.layout_content{display:grid;place-items:center}}}@layer global{@scope(.prose)to (.not-prose){:is(p,ul,ol,blockquote,table):has(+:is(h1,h2,h3,h4)){margin-bottom:calc(var(--prose-spacing) * 2)}p,ul,ol,dl{margin-bottom:var(--prose-spacing);p,ul,ol,dl{margin-bottom:0}}ul,ol{ul,ol{margin-inline-start:0;padding-inline-start:var(--sm2)}li{margin-bottom:.5em;&::marker{color:light-dark(var(--base-300),var(--base-600))}}}ul{margin-inline-start:var(--sm2);list-style-type:"\2192  "}ol{margin-inline-start:var(--md2);list-style-type:decimal-leading-zero;li::marker{font-size:var(--text-sm)}}table{margin-top:var(--md1);margin-bottom:var(--md1)}}}@layer global{.wrap{display:grid;grid-template-columns:1fr var(--wrap-width) 1fr;>*,>astro-island>*,>astro-slot>*,>astro-static-slot>*{grid-column:2;padding-inline:var(--wrap-spacing);@media(width>=768px){padding-inline:var(--wrap-md-spacing)}@media(width>=1024px){padding-inline:var(--wrap-lg-spacing)}}}.wrap-sm{--wrap-width: var(--wrap-width-sm)}.wrap-md{--wrap-width: var(--wrap-width-md)}.wrap-lg{--wrap-width: var(--wrap-width-lg)}.wrap_content-fullBleed{grid-column:1 / -1;width:100%;object-fit:cover}}@layer helpers{.c-base-0{color:var(--base-0)!important}.bdc-base-0{border-color:var(--base-0)!important}.bgc-base-0{background-color:var(--base-0)!important}.c-base-50{color:var(--base-50)!important}.bdc-base-50{border-color:var(--base-50)!important}.bgc-base-50{background-color:var(--base-50)!important}.c-base-100{color:var(--base-100)!important}.bdc-base-100{border-color:var(--base-100)!important}.bgc-base-100{background-color:var(--base-100)!important}.c-base-200{color:var(--base-200)!important}.bdc-base-200{border-color:var(--base-200)!important}.bgc-base-200{background-color:var(--base-200)!important}.c-base-300{color:var(--base-300)!important}.bdc-base-300{border-color:var(--base-300)!important}.bgc-base-300{background-color:var(--base-300)!important}.c-base-400{color:var(--base-400)!important}.bdc-base-400{border-color:var(--base-400)!important}.bgc-base-400{background-color:var(--base-400)!important}.c-base-500{color:var(--base-500)!important}.bdc-base-500{border-color:var(--base-500)!important}.bgc-base-500{background-color:var(--base-500)!important}.c-base-600{color:var(--base-600)!important}.bdc-base-600{border-color:var(--base-600)!important}.bgc-base-600{background-color:var(--base-600)!important}.c-base-700{color:var(--base-700)!important}.bdc-base-700{border-color:var(--base-700)!important}.bgc-base-700{background-color:var(--base-700)!important}.c-base-800{color:var(--base-800)!important}.bdc-base-800{border-color:var(--base-800)!important}.bgc-base-800{background-color:var(--base-800)!important}.c-base-900{color:var(--base-900)!important}.bdc-base-900{border-color:var(--base-900)!important}.bgc-base-900{background-color:var(--base-900)!important}.c-base-950{color:var(--base-950)!important}.bdc-base-950{border-color:var(--base-950)!important}.bgc-base-950{background-color:var(--base-950)!important}.c-primary-50{color:var(--primary-50)!important}.bdc-primary-50{border-color:var(--primary-50)!important}.bgc-primary-50{background-color:var(--primary-50)!important}.c-primary-100{color:var(--primary-100)!important}.bdc-primary-100{border-color:var(--primary-100)!important}.bgc-primary-100{background-color:var(--primary-100)!important}.c-primary-200{color:var(--primary-200)!important}.bdc-primary-200{border-color:var(--primary-200)!important}.bgc-primary-200{background-color:var(--primary-200)!important}.c-primary-300{color:var(--primary-300)!important}.bdc-primary-300{border-color:var(--primary-300)!important}.bgc-primary-300{background-color:var(--primary-300)!important}.c-primary-400{color:var(--primary-400)!important}.bdc-primary-400{border-color:var(--primary-400)!important}.bgc-primary-400{background-color:var(--primary-400)!important}.c-primary-500{color:var(--primary-500)!important}.bdc-primary-500{border-color:var(--primary-500)!important}.bgc-primary-500{background-color:var(--primary-500)!important}.c-primary-600{color:var(--primary-600)!important}.bdc-primary-600{border-color:var(--primary-600)!important}.bgc-primary-600{background-color:var(--primary-600)!important}.c-primary-700{color:var(--primary-700)!important}.bdc-primary-700{border-color:var(--primary-700)!important}.bgc-primary-700{background-color:var(--primary-700)!important}.c-primary-800{color:var(--primary-800)!important}.bdc-primary-800{border-color:var(--primary-800)!important}.bgc-primary-800{background-color:var(--primary-800)!important}.c-primary-900{color:var(--primary-900)!important}.bdc-primary-900{border-color:var(--primary-900)!important}.bgc-primary-900{background-color:var(--primary-900)!important}.c-primary-950{color:var(--primary-950)!important}.bdc-primary-950{border-color:var(--primary-950)!important}.bgc-primary-950{background-color:var(--primary-950)!important}.c-yes-100{color:var(--yes-100)!important}.bdc-yes-100{border-color:var(--yes-100)!important}.bgc-yes-100{background-color:var(--yes-100)!important}.c-yes-200{color:var(--yes-200)!important}.bdc-yes-200{border-color:var(--yes-200)!important}.bgc-yes-200{background-color:var(--yes-200)!important}.c-yes-300{color:var(--yes-300)!important}.bdc-yes-300{border-color:var(--yes-300)!important}.bgc-yes-300{background-color:var(--yes-300)!important}.c-yes-400{color:var(--yes-400)!important}.bdc-yes-400{border-color:var(--yes-400)!important}.bgc-yes-400{background-color:var(--yes-400)!important}.c-yes-500{color:var(--yes-500)!important}.bdc-yes-500{border-color:var(--yes-500)!important}.bgc-yes-500{background-color:var(--yes-500)!important}.c-no-100{color:var(--no-100)!important}.bdc-no-100{border-color:var(--no-100)!important}.bgc-no-100{background-color:var(--no-100)!important}.c-no-200{color:var(--no-200)!important}.bdc-no-200{border-color:var(--no-200)!important}.bgc-no-200{background-color:var(--no-200)!important}.c-no-300{color:var(--no-300)!important}.bdc-no-300{border-color:var(--no-300)!important}.bgc-no-300{background-color:var(--no-300)!important}.c-no-400{color:var(--no-400)!important}.bdc-no-400{border-color:var(--no-400)!important}.bgc-no-400{background-color:var(--no-400)!important}.c-no-500{color:var(--no-500)!important}.bdc-no-500{border-color:var(--no-500)!important}.bgc-no-500{background-color:var(--no-500)!important}.c-maybe-100{color:var(--maybe-100)!important}.bdc-maybe-100{border-color:var(--maybe-100)!important}.bgc-maybe-100{background-color:var(--maybe-100)!important}.c-maybe-200{color:var(--maybe-200)!important}.bdc-maybe-200{border-color:var(--maybe-200)!important}.bgc-maybe-200{background-color:var(--maybe-200)!important}.c-maybe-300{color:var(--maybe-300)!important}.bdc-maybe-300{border-color:var(--maybe-300)!important}.bgc-maybe-300{background-color:var(--maybe-300)!important}.c-maybe-400{color:var(--maybe-400)!important}.bdc-maybe-400{border-color:var(--maybe-400)!important}.bgc-maybe-400{background-color:var(--maybe-400)!important}.c-maybe-500{color:var(--maybe-500)!important}.bdc-maybe-500{border-color:var(--maybe-500)!important}.bgc-maybe-500{background-color:var(--maybe-500)!important}}@layer helpers{body.dev{--baseline: 8;background-size:100% calc(var(--baseline) * 1px)!important;background-image:linear-gradient(to bottom,#0000 calc((var(--baseline) - 1) * 1px),#ff69b4 calc(var(--baseline) * 1px))!important}.dev-error{position:fixed!important;top:var(--md1)!important;left:var(--md1)!important;z-index:var(--z-top)!important;padding:var(--sm1)!important;font-size:1rem!important;color:var(--danger-500)!important;background:var(--danger-100)!important;border:1px solid var(--danger-500)!important;border-radius:var(--radius-md)!important}}@layer helpers{.of-auto,.overflow-auto{overflow:auto!important}.of-hidden,.overflow-hidden{overflow:hidden!important}.of-clip,.overflow-clip{overflow:clip!important}.of-visible,.overflow-visible{overflow:visible!important}.of-scroll,.overflow-scroll{overflow:scroll!important}.of-x-auto,.overflow-x-auto{overflow-x:auto!important}.of-y-auto,.overflow-y-auto{overflow-y:auto!important}.of-x-hidden,.overflow-x-hidden{overflow-x:hidden!important}.of-y-hidden,.overflow-y-hidden{overflow-y:hidden!important}.of-x-clip,.overflow-x-clip{overflow-x:clip!important}.of-y-clip,.overflow-y-clip{overflow-y:clip!important}.of-x-visible,.overflow-x-visible{overflow-x:visible!important}.of-y-visible,.overflow-y-visible{overflow-y:visible!important}.of-x-scroll,.overflow-x-scroll{overflow-x:scroll!important}.of-y-scroll,.overflow-y-scroll{overflow-y:scroll!important}.position-static{position:static!important}.position-fixed{position:fixed!important}.position-absolute{position:absolute!important}.position-relative{position:relative!important}.position-sticky{position:sticky!important}.visibility-visible{visibility:visible!important}.visibility-hidden{visibility:hidden!important}.visibility-collapse{visibility:collapse!important}.z-auto{z-index:auto!important}.z-bottom{z-index:var(--z-bottom)!important}.z-0{z-index:var(--z-0)!important}.z-1{z-index:var(--z-1)!important}.z-2{z-index:var(--z-2)!important}.z-3{z-index:var(--z-3)!important}.z-4{z-index:var(--z-4)!important}.z-5{z-index:var(--z-5)!important}.z-top{z-index:var(--z-top)!important}}@layer helpers{.o-0{opacity:var(--o-0)!important}.o-1{opacity:var(--o-1)!important}.o-2{opacity:var(--o-2)!important}.o-3{opacity:var(--o-3)!important}.o-4{opacity:var(--o-4)!important}.o-5{opacity:var(--o-5)!important}}@layer helpers{.ar-square{aspect-ratio:var(--ar-square)!important}.ar-landscape{aspect-ratio:var(--ar-landscape)!important}.ar-portrait{aspect-ratio:var(--ar-portrait)!important}.ar-widescreen{aspect-ratio:var(--ar-widescreen)!important}.ar-golden{aspect-ratio:var(--ar-golden)!important}}@layer helpers{.w-0{width:0!important}.h-0{height:0!important}.m-0{margin:0!important}.mt-0{margin-top:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mr-0{margin-right:0!important}.mis-0{margin-inline-start:0!important}.mie-0{margin-inline-end:0!important}.p-0{padding:0!important}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.pis-0{padding-inline-start:0!important}.pie-0{padding-inline-end:0!important}.w-xs1{width:var(--xs1)!important}.h-xs1{height:var(--xs1)!important}.m-xs1{margin:var(--xs1)!important}.mt-xs1{margin-top:var(--xs1)!important}.mb-xs1{margin-bottom:var(--xs1)!important}.ml-xs1{margin-left:var(--xs1)!important}.mr-xs1{margin-right:var(--xs1)!important}.mis-xs1{margin-inline-start:var(--xs1)!important}.mie-xs1{margin-inline-end:var(--xs1)!important}.p-xs1{padding:var(--xs1)!important}.pt-xs1{padding-top:var(--xs1)!important}.pb-xs1{padding-bottom:var(--xs1)!important}.pl-xs1{padding-left:var(--xs1)!important}.pr-xs1{padding-right:var(--xs1)!important}.pis-xs1{padding-inline-start:var(--xs1)!important}.pie-xs1{padding-inline-end:var(--xs1)!important}.w-xs2{width:var(--xs2)!important}.h-xs2{height:var(--xs2)!important}.m-xs2{margin:var(--xs2)!important}.mt-xs2{margin-top:var(--xs2)!important}.mb-xs2{margin-bottom:var(--xs2)!important}.ml-xs2{margin-left:var(--xs2)!important}.mr-xs2{margin-right:var(--xs2)!important}.mis-xs2{margin-inline-start:var(--xs2)!important}.mie-xs2{margin-inline-end:var(--xs2)!important}.p-xs2{padding:var(--xs2)!important}.pt-xs2{padding-top:var(--xs2)!important}.pb-xs2{padding-bottom:var(--xs2)!important}.pl-xs2{padding-left:var(--xs2)!important}.pr-xs2{padding-right:var(--xs2)!important}.pis-xs2{padding-inline-start:var(--xs2)!important}.pie-xs2{padding-inline-end:var(--xs2)!important}.w-xs3{width:var(--xs3)!important}.h-xs3{height:var(--xs3)!important}.m-xs3{margin:var(--xs3)!important}.mt-xs3{margin-top:var(--xs3)!important}.mb-xs3{margin-bottom:var(--xs3)!important}.ml-xs3{margin-left:var(--xs3)!important}.mr-xs3{margin-right:var(--xs3)!important}.mis-xs3{margin-inline-start:var(--xs3)!important}.mie-xs3{margin-inline-end:var(--xs3)!important}.p-xs3{padding:var(--xs3)!important}.pt-xs3{padding-top:var(--xs3)!important}.pb-xs3{padding-bottom:var(--xs3)!important}.pl-xs3{padding-left:var(--xs3)!important}.pr-xs3{padding-right:var(--xs3)!important}.pis-xs3{padding-inline-start:var(--xs3)!important}.pie-xs3{padding-inline-end:var(--xs3)!important}.w-sm1{width:var(--sm1)!important}.h-sm1{height:var(--sm1)!important}.m-sm1{margin:var(--sm1)!important}.mt-sm1{margin-top:var(--sm1)!important}.mb-sm1{margin-bottom:var(--sm1)!important}.ml-sm1{margin-left:var(--sm1)!important}.mr-sm1{margin-right:var(--sm1)!important}.mis-sm1{margin-inline-start:var(--sm1)!important}.mie-sm1{margin-inline-end:var(--sm1)!important}.p-sm1{padding:var(--sm1)!important}.pt-sm1{padding-top:var(--sm1)!important}.pb-sm1{padding-bottom:var(--sm1)!important}.pl-sm1{padding-left:var(--sm1)!important}.pr-sm1{padding-right:var(--sm1)!important}.pis-sm1{padding-inline-start:var(--sm1)!important}.pie-sm1{padding-inline-end:var(--sm1)!important}.w-sm2{width:var(--sm2)!important}.h-sm2{height:var(--sm2)!important}.m-sm2{margin:var(--sm2)!important}.mt-sm2{margin-top:var(--sm2)!important}.mb-sm2{margin-bottom:var(--sm2)!important}.ml-sm2{margin-left:var(--sm2)!important}.mr-sm2{margin-right:var(--sm2)!important}.mis-sm2{margin-inline-start:var(--sm2)!important}.mie-sm2{margin-inline-end:var(--sm2)!important}.p-sm2{padding:var(--sm2)!important}.pt-sm2{padding-top:var(--sm2)!important}.pb-sm2{padding-bottom:var(--sm2)!important}.pl-sm2{padding-left:var(--sm2)!important}.pr-sm2{padding-right:var(--sm2)!important}.pis-sm2{padding-inline-start:var(--sm2)!important}.pie-sm2{padding-inline-end:var(--sm2)!important}.w-sm3{width:var(--sm3)!important}.h-sm3{height:var(--sm3)!important}.m-sm3{margin:var(--sm3)!important}.mt-sm3{margin-top:var(--sm3)!important}.mb-sm3{margin-bottom:var(--sm3)!important}.ml-sm3{margin-left:var(--sm3)!important}.mr-sm3{margin-right:var(--sm3)!important}.mis-sm3{margin-inline-start:var(--sm3)!important}.mie-sm3{margin-inline-end:var(--sm3)!important}.p-sm3{padding:var(--sm3)!important}.pt-sm3{padding-top:var(--sm3)!important}.pb-sm3{padding-bottom:var(--sm3)!important}.pl-sm3{padding-left:var(--sm3)!important}.pr-sm3{padding-right:var(--sm3)!important}.pis-sm3{padding-inline-start:var(--sm3)!important}.pie-sm3{padding-inline-end:var(--sm3)!important}.w-md1{width:var(--md1)!important}.h-md1{height:var(--md1)!important}.m-md1{margin:var(--md1)!important}.mt-md1{margin-top:var(--md1)!important}.mb-md1{margin-bottom:var(--md1)!important}.ml-md1{margin-left:var(--md1)!important}.mr-md1{margin-right:var(--md1)!important}.mis-md1{margin-inline-start:var(--md1)!important}.mie-md1{margin-inline-end:var(--md1)!important}.p-md1{padding:var(--md1)!important}.pt-md1{padding-top:var(--md1)!important}.pb-md1{padding-bottom:var(--md1)!important}.pl-md1{padding-left:var(--md1)!important}.pr-md1{padding-right:var(--md1)!important}.pis-md1{padding-inline-start:var(--md1)!important}.pie-md1{padding-inline-end:var(--md1)!important}.w-md2{width:var(--md2)!important}.h-md2{height:var(--md2)!important}.m-md2{margin:var(--md2)!important}.mt-md2{margin-top:var(--md2)!important}.mb-md2{margin-bottom:var(--md2)!important}.ml-md2{margin-left:var(--md2)!important}.mr-md2{margin-right:var(--md2)!important}.mis-md2{margin-inline-start:var(--md2)!important}.mie-md2{margin-inline-end:var(--md2)!important}.p-md2{padding:var(--md2)!important}.pt-md2{padding-top:var(--md2)!important}.pb-md2{padding-bottom:var(--md2)!important}.pl-md2{padding-left:var(--md2)!important}.pr-md2{padding-right:var(--md2)!important}.pis-md2{padding-inline-start:var(--md2)!important}.pie-md2{padding-inline-end:var(--md2)!important}.w-md3{width:var(--md3)!important}.h-md3{height:var(--md3)!important}.m-md3{margin:var(--md3)!important}.mt-md3{margin-top:var(--md3)!important}.mb-md3{margin-bottom:var(--md3)!important}.ml-md3{margin-left:var(--md3)!important}.mr-md3{margin-right:var(--md3)!important}.mis-md3{margin-inline-start:var(--md3)!important}.mie-md3{margin-inline-end:var(--md3)!important}.p-md3{padding:var(--md3)!important}.pt-md3{padding-top:var(--md3)!important}.pb-md3{padding-bottom:var(--md3)!important}.pl-md3{padding-left:var(--md3)!important}.pr-md3{padding-right:var(--md3)!important}.pis-md3{padding-inline-start:var(--md3)!important}.pie-md3{padding-inline-end:var(--md3)!important}.w-lg1{width:var(--lg1)!important}.h-lg1{height:var(--lg1)!important}.m-lg1{margin:var(--lg1)!important}.mt-lg1{margin-top:var(--lg1)!important}.mb-lg1{margin-bottom:var(--lg1)!important}.ml-lg1{margin-left:var(--lg1)!important}.mr-lg1{margin-right:var(--lg1)!important}.mis-lg1{margin-inline-start:var(--lg1)!important}.mie-lg1{margin-inline-end:var(--lg1)!important}.p-lg1{padding:var(--lg1)!important}.pt-lg1{padding-top:var(--lg1)!important}.pb-lg1{padding-bottom:var(--lg1)!important}.pl-lg1{padding-left:var(--lg1)!important}.pr-lg1{padding-right:var(--lg1)!important}.pis-lg1{padding-inline-start:var(--lg1)!important}.pie-lg1{padding-inline-end:var(--lg1)!important}.w-lg2{width:var(--lg2)!important}.h-lg2{height:var(--lg2)!important}.m-lg2{margin:var(--lg2)!important}.mt-lg2{margin-top:var(--lg2)!important}.mb-lg2{margin-bottom:var(--lg2)!important}.ml-lg2{margin-left:var(--lg2)!important}.mr-lg2{margin-right:var(--lg2)!important}.mis-lg2{margin-inline-start:var(--lg2)!important}.mie-lg2{margin-inline-end:var(--lg2)!important}.p-lg2{padding:var(--lg2)!important}.pt-lg2{padding-top:var(--lg2)!important}.pb-lg2{padding-bottom:var(--lg2)!important}.pl-lg2{padding-left:var(--lg2)!important}.pr-lg2{padding-right:var(--lg2)!important}.pis-lg2{padding-inline-start:var(--lg2)!important}.pie-lg2{padding-inline-end:var(--lg2)!important}.w-lg3{width:var(--lg3)!important}.h-lg3{height:var(--lg3)!important}.m-lg3{margin:var(--lg3)!important}.mt-lg3{margin-top:var(--lg3)!important}.mb-lg3{margin-bottom:var(--lg3)!important}.ml-lg3{margin-left:var(--lg3)!important}.mr-lg3{margin-right:var(--lg3)!important}.mis-lg3{margin-inline-start:var(--lg3)!important}.mie-lg3{margin-inline-end:var(--lg3)!important}.p-lg3{padding:var(--lg3)!important}.pt-lg3{padding-top:var(--lg3)!important}.pb-lg3{padding-bottom:var(--lg3)!important}.pl-lg3{padding-left:var(--lg3)!important}.pr-lg3{padding-right:var(--lg3)!important}.pis-lg3{padding-inline-start:var(--lg3)!important}.pie-lg3{padding-inline-end:var(--lg3)!important}.w-xl1{width:var(--xl1)!important}.h-xl1{height:var(--xl1)!important}.m-xl1{margin:var(--xl1)!important}.mt-xl1{margin-top:var(--xl1)!important}.mb-xl1{margin-bottom:var(--xl1)!important}.ml-xl1{margin-left:var(--xl1)!important}.mr-xl1{margin-right:var(--xl1)!important}.mis-xl1{margin-inline-start:var(--xl1)!important}.mie-xl1{margin-inline-end:var(--xl1)!important}.p-xl1{padding:var(--xl1)!important}.pt-xl1{padding-top:var(--xl1)!important}.pb-xl1{padding-bottom:var(--xl1)!important}.pl-xl1{padding-left:var(--xl1)!important}.pr-xl1{padding-right:var(--xl1)!important}.pis-xl1{padding-inline-start:var(--xl1)!important}.pie-xl1{padding-inline-end:var(--xl1)!important}.w-xl2{width:var(--xl2)!important}.h-xl2{height:var(--xl2)!important}.m-xl2{margin:var(--xl2)!important}.mt-xl2{margin-top:var(--xl2)!important}.mb-xl2{margin-bottom:var(--xl2)!important}.ml-xl2{margin-left:var(--xl2)!important}.mr-xl2{margin-right:var(--xl2)!important}.mis-xl2{margin-inline-start:var(--xl2)!important}.mie-xl2{margin-inline-end:var(--xl2)!important}.p-xl2{padding:var(--xl2)!important}.pt-xl2{padding-top:var(--xl2)!important}.pb-xl2{padding-bottom:var(--xl2)!important}.pl-xl2{padding-left:var(--xl2)!important}.pr-xl2{padding-right:var(--xl2)!important}.pis-xl2{padding-inline-start:var(--xl2)!important}.pie-xl2{padding-inline-end:var(--xl2)!important}.w-xl3{width:var(--xl3)!important}.h-xl3{height:var(--xl3)!important}.m-xl3{margin:var(--xl3)!important}.mt-xl3{margin-top:var(--xl3)!important}.mb-xl3{margin-bottom:var(--xl3)!important}.ml-xl3{margin-left:var(--xl3)!important}.mr-xl3{margin-right:var(--xl3)!important}.mis-xl3{margin-inline-start:var(--xl3)!important}.mie-xl3{margin-inline-end:var(--xl3)!important}.p-xl3{padding:var(--xl3)!important}.pt-xl3{padding-top:var(--xl3)!important}.pb-xl3{padding-bottom:var(--xl3)!important}.pl-xl3{padding-left:var(--xl3)!important}.pr-xl3{padding-right:var(--xl3)!important}.pis-xl3{padding-inline-start:var(--xl3)!important}.pie-xl3{padding-inline-end:var(--xl3)!important}.w-xxl1{width:var(--xxl1)!important}.h-xxl1{height:var(--xxl1)!important}.m-xxl1{margin:var(--xxl1)!important}.mt-xxl1{margin-top:var(--xxl1)!important}.mb-xxl1{margin-bottom:var(--xxl1)!important}.ml-xxl1{margin-left:var(--xxl1)!important}.mr-xxl1{margin-right:var(--xxl1)!important}.mis-xxl1{margin-inline-start:var(--xxl1)!important}.mie-xxl1{margin-inline-end:var(--xxl1)!important}.p-xxl1{padding:var(--xxl1)!important}.pt-xxl1{padding-top:var(--xxl1)!important}.pb-xxl1{padding-bottom:var(--xxl1)!important}.pl-xxl1{padding-left:var(--xxl1)!important}.pr-xxl1{padding-right:var(--xxl1)!important}.pis-xxl1{padding-inline-start:var(--xxl1)!important}.pie-xxl1{padding-inline-end:var(--xxl1)!important}.w-xxl2{width:var(--xxl2)!important}.h-xxl2{height:var(--xxl2)!important}.m-xxl2{margin:var(--xxl2)!important}.mt-xxl2{margin-top:var(--xxl2)!important}.mb-xxl2{margin-bottom:var(--xxl2)!important}.ml-xxl2{margin-left:var(--xxl2)!important}.mr-xxl2{margin-right:var(--xxl2)!important}.mis-xxl2{margin-inline-start:var(--xxl2)!important}.mie-xxl2{margin-inline-end:var(--xxl2)!important}.p-xxl2{padding:var(--xxl2)!important}.pt-xxl2{padding-top:var(--xxl2)!important}.pb-xxl2{padding-bottom:var(--xxl2)!important}.pl-xxl2{padding-left:var(--xxl2)!important}.pr-xxl2{padding-right:var(--xxl2)!important}.pis-xxl2{padding-inline-start:var(--xxl2)!important}.pie-xxl2{padding-inline-end:var(--xxl2)!important}.w-xxl3{width:var(--xxl3)!important}.h-xxl3{height:var(--xxl3)!important}.m-xxl3{margin:var(--xxl3)!important}.mt-xxl3{margin-top:var(--xxl3)!important}.mb-xxl3{margin-bottom:var(--xxl3)!important}.ml-xxl3{margin-left:var(--xxl3)!important}.mr-xxl3{margin-right:var(--xxl3)!important}.mis-xxl3{margin-inline-start:var(--xxl3)!important}.mie-xxl3{margin-inline-end:var(--xxl3)!important}.p-xxl3{padding:var(--xxl3)!important}.pt-xxl3{padding-top:var(--xxl3)!important}.pb-xxl3{padding-bottom:var(--xxl3)!important}.pl-xxl3{padding-left:var(--xxl3)!important}.pr-xxl3{padding-right:var(--xxl3)!important}.pis-xxl3{padding-inline-start:var(--xxl3)!important}.pie-xxl3{padding-inline-end:var(--xxl3)!important}.w-mega1{width:var(--mega1)!important}.h-mega1{height:var(--mega1)!important}.m-mega1{margin:var(--mega1)!important}.mt-mega1{margin-top:var(--mega1)!important}.mb-mega1{margin-bottom:var(--mega1)!important}.ml-mega1{margin-left:var(--mega1)!important}.mr-mega1{margin-right:var(--mega1)!important}.mis-mega1{margin-inline-start:var(--mega1)!important}.mie-mega1{margin-inline-end:var(--mega1)!important}.p-mega1{padding:var(--mega1)!important}.pt-mega1{padding-top:var(--mega1)!important}.pb-mega1{padding-bottom:var(--mega1)!important}.pl-mega1{padding-left:var(--mega1)!important}.pr-mega1{padding-right:var(--mega1)!important}.pis-mega1{padding-inline-start:var(--mega1)!important}.pie-mega1{padding-inline-end:var(--mega1)!important}.w-mega2{width:var(--mega2)!important}.h-mega2{height:var(--mega2)!important}.m-mega2{margin:var(--mega2)!important}.mt-mega2{margin-top:var(--mega2)!important}.mb-mega2{margin-bottom:var(--mega2)!important}.ml-mega2{margin-left:var(--mega2)!important}.mr-mega2{margin-right:var(--mega2)!important}.mis-mega2{margin-inline-start:var(--mega2)!important}.mie-mega2{margin-inline-end:var(--mega2)!important}.p-mega2{padding:var(--mega2)!important}.pt-mega2{padding-top:var(--mega2)!important}.pb-mega2{padding-bottom:var(--mega2)!important}.pl-mega2{padding-left:var(--mega2)!important}.pr-mega2{padding-right:var(--mega2)!important}.pis-mega2{padding-inline-start:var(--mega2)!important}.pie-mega2{padding-inline-end:var(--mega2)!important}.w-mega3{width:var(--mega3)!important}.h-mega3{height:var(--mega3)!important}.m-mega3{margin:var(--mega3)!important}.mt-mega3{margin-top:var(--mega3)!important}.mb-mega3{margin-bottom:var(--mega3)!important}.ml-mega3{margin-left:var(--mega3)!important}.mr-mega3{margin-right:var(--mega3)!important}.mis-mega3{margin-inline-start:var(--mega3)!important}.mie-mega3{margin-inline-end:var(--mega3)!important}.p-mega3{padding:var(--mega3)!important}.pt-mega3{padding-top:var(--mega3)!important}.pb-mega3{padding-bottom:var(--mega3)!important}.pl-mega3{padding-left:var(--mega3)!important}.pr-mega3{padding-right:var(--mega3)!important}.pis-mega3{padding-inline-start:var(--mega3)!important}.pie-mega3{padding-inline-end:var(--mega3)!important}.w-giga1{width:var(--giga1)!important}.h-giga1{height:var(--giga1)!important}.m-giga1{margin:var(--giga1)!important}.mt-giga1{margin-top:var(--giga1)!important}.mb-giga1{margin-bottom:var(--giga1)!important}.ml-giga1{margin-left:var(--giga1)!important}.mr-giga1{margin-right:var(--giga1)!important}.mis-giga1{margin-inline-start:var(--giga1)!important}.mie-giga1{margin-inline-end:var(--giga1)!important}.p-giga1{padding:var(--giga1)!important}.pt-giga1{padding-top:var(--giga1)!important}.pb-giga1{padding-bottom:var(--giga1)!important}.pl-giga1{padding-left:var(--giga1)!important}.pr-giga1{padding-right:var(--giga1)!important}.pis-giga1{padding-inline-start:var(--giga1)!important}.pie-giga1{padding-inline-end:var(--giga1)!important}.w-giga2{width:var(--giga2)!important}.h-giga2{height:var(--giga2)!important}.m-giga2{margin:var(--giga2)!important}.mt-giga2{margin-top:var(--giga2)!important}.mb-giga2{margin-bottom:var(--giga2)!important}.ml-giga2{margin-left:var(--giga2)!important}.mr-giga2{margin-right:var(--giga2)!important}.mis-giga2{margin-inline-start:var(--giga2)!important}.mie-giga2{margin-inline-end:var(--giga2)!important}.p-giga2{padding:var(--giga2)!important}.pt-giga2{padding-top:var(--giga2)!important}.pb-giga2{padding-bottom:var(--giga2)!important}.pl-giga2{padding-left:var(--giga2)!important}.pr-giga2{padding-right:var(--giga2)!important}.pis-giga2{padding-inline-start:var(--giga2)!important}.pie-giga2{padding-inline-end:var(--giga2)!important}.w-giga3{width:var(--giga3)!important}.h-giga3{height:var(--giga3)!important}.m-giga3{margin:var(--giga3)!important}.mt-giga3{margin-top:var(--giga3)!important}.mb-giga3{margin-bottom:var(--giga3)!important}.ml-giga3{margin-left:var(--giga3)!important}.mr-giga3{margin-right:var(--giga3)!important}.mis-giga3{margin-inline-start:var(--giga3)!important}.mie-giga3{margin-inline-end:var(--giga3)!important}.p-giga3{padding:var(--giga3)!important}.pt-giga3{padding-top:var(--giga3)!important}.pb-giga3{padding-bottom:var(--giga3)!important}.pl-giga3{padding-left:var(--giga3)!important}.pr-giga3{padding-right:var(--giga3)!important}.pis-giga3{padding-inline-start:var(--giga3)!important}.pie-giga3{padding-inline-end:var(--giga3)!important}.w-tera1{width:var(--tera1)!important}.h-tera1{height:var(--tera1)!important}.m-tera1{margin:var(--tera1)!important}.mt-tera1{margin-top:var(--tera1)!important}.mb-tera1{margin-bottom:var(--tera1)!important}.ml-tera1{margin-left:var(--tera1)!important}.mr-tera1{margin-right:var(--tera1)!important}.mis-tera1{margin-inline-start:var(--tera1)!important}.mie-tera1{margin-inline-end:var(--tera1)!important}.p-tera1{padding:var(--tera1)!important}.pt-tera1{padding-top:var(--tera1)!important}.pb-tera1{padding-bottom:var(--tera1)!important}.pl-tera1{padding-left:var(--tera1)!important}.pr-tera1{padding-right:var(--tera1)!important}.pis-tera1{padding-inline-start:var(--tera1)!important}.pie-tera1{padding-inline-end:var(--tera1)!important}.w-tera2{width:var(--tera2)!important}.h-tera2{height:var(--tera2)!important}.m-tera2{margin:var(--tera2)!important}.mt-tera2{margin-top:var(--tera2)!important}.mb-tera2{margin-bottom:var(--tera2)!important}.ml-tera2{margin-left:var(--tera2)!important}.mr-tera2{margin-right:var(--tera2)!important}.mis-tera2{margin-inline-start:var(--tera2)!important}.mie-tera2{margin-inline-end:var(--tera2)!important}.p-tera2{padding:var(--tera2)!important}.pt-tera2{padding-top:var(--tera2)!important}.pb-tera2{padding-bottom:var(--tera2)!important}.pl-tera2{padding-left:var(--tera2)!important}.pr-tera2{padding-right:var(--tera2)!important}.pis-tera2{padding-inline-start:var(--tera2)!important}.pie-tera2{padding-inline-end:var(--tera2)!important}.w-tera3{width:var(--tera3)!important}.h-tera3{height:var(--tera3)!important}.m-tera3{margin:var(--tera3)!important}.mt-tera3{margin-top:var(--tera3)!important}.mb-tera3{margin-bottom:var(--tera3)!important}.ml-tera3{margin-left:var(--tera3)!important}.mr-tera3{margin-right:var(--tera3)!important}.mis-tera3{margin-inline-start:var(--tera3)!important}.mie-tera3{margin-inline-end:var(--tera3)!important}.p-tera3{padding:var(--tera3)!important}.pt-tera3{padding-top:var(--tera3)!important}.pb-tera3{padding-bottom:var(--tera3)!important}.pl-tera3{padding-left:var(--tera3)!important}.pr-tera3{padding-right:var(--tera3)!important}.pis-tera3{padding-inline-start:var(--tera3)!important}.pie-tera3{padding-inline-end:var(--tera3)!important}}@layer helpers{.font-text{font-family:var(--text)!important}.font-display{font-family:var(--display)!important}.font-mono{font-family:var(--mono)!important}.font-italic{font-style:italic!important}.font-normal{font-style:normal!important}.font-extra-light{font-weight:var(--extra-light)!important}.font-light{font-weight:var(--light)!important}.font-book{font-weight:var(--book)!important}.font-semi-bold{font-weight:var(--semi-bold)!important}.font-bold{font-weight:var(--bold)!important}.font-black{font-weight:var(--black)!important}.text-xs{font-size:var(--text-xs)!important}.text-sm{font-size:var(--text-sm)!important}.text-md{font-size:var(--text-md)!important}.text-lg{font-size:var(--text-lg)!important}.text-xl{font-size:var(--text-xl)!important}.display-sm{font-size:var(--display-sm)!important}.display-md{font-size:var(--display-md)!important}.display-lg{font-size:var(--display-lg)!important}.display-xl{font-size:var(--display-xl)!important}.display-mega{font-size:var(--display-mega)!important}.display-giga{font-size:var(--display-giga)!important}.tracking-sm{letter-spacing:var(--tracking-sm)!important}.tracking-md{letter-spacing:var(--tracking-md)!important}.tracking-lg{letter-spacing:var(--tracking-lg)!important}.tracking-xl{letter-spacing:var(--tracking-xl)!important}.tracking-xxl{letter-spacing:var(--tracking-xxl)!important}.leading-xs{line-height:var(--leading-xs)!important}.leading-sm{line-height:var(--leading-sm)!important}.leading-md{line-height:var(--leading-md)!important}.leading-lg{line-height:var(--leading-lg)!important}.leading-xl{line-height:var(--leading-xl)!important}.leading-xxl{line-height:var(--leading-xxl)!important}.text-left{text-align:left!important}.text-center{text-align:center!important}.text-right{text-align:right!important}.text-justify{text-align:justify!important}.text-start{text-align:start!important}.text-end{text-align:end!important}.text-uppercase{text-transform:uppercase!important}.text-lowercase{text-transform:lowercase!important}.text-capitalize{text-transform:capitalize!important}}
+@layer base,elements,global,components,theme.default,theme.user,external,helpers;@layer base,elements,global,components,theme.default,theme.user,external,helpers;@layer base{*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion:reduce){*,:before,:after{animation-delay:-1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}}:where(:not(dialog)){margin:0}html,body{min-height:100%}}@layer elements{body{line-sizing:normal;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;background-color:var(--body-background-color);color:var(--text-color);font-family:var(--text);line-height:var(--body-line-height);&:has(.body-is-locked){overflow:hidden}}}@layer elements{::selection{color:var(--selection-color);background-color:var(--selection-background-color)}:where(a,u,ins,abbr){text-underline-offset:2px}a{font-weight:var(--link-font-weight);color:var(--link-color);&:where(:hover){color:var(--link-color-hover);-webkit-text-decoration:none;text-decoration:none}}address{width:max-content;max-width:100%;padding:var(--sm1) var(--sm3);font-style:normal;background-color:light-dark(var(--base-50),var(--base-900));border:var(--xs2) solid transparent;border-image:8 repeating-linear-gradient(-45deg,var(--no-500) 0,var(--no-500) var(--xs2),transparent 0,transparent calc(var(--xs2) * 2),var(--primary-500) 0,var(--primary-500) calc(var(--xs2) * 3),transparent 0,transparent calc(var(--xs2) * 4))}abbr{position:relative;cursor:help;&:after{position:relative;top:calc(var(--xs1) * -1);width:var(--sm1);height:var(--sm1);display:inline-block;content:"";background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='circle-help'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M9.09%209a3%203%200%200%201%205.83%201c0%202-3%203-3%203'/%3E%3Cpath%20d='M12%2017h.01'/%3E%3C/svg%3E");background-size:contain}&:hover:before{width:max-content;max-width:400px;position:absolute;left:50%;padding:var(--xs1) var(--xs3);content:attr(title);color:var(--base-0);background-color:var(--base-900);opacity:var(--o-4);border-radius:var(--radius-sm);transform:translate(-50%,-2em)}}blockquote{position:relative;margin-bottom:var(--prose-spacing);padding-block:var(--blockquote-padding-block);padding-inline:var(--blockquote-padding-inline);font-style:italic;background-color:var(--blockquote-background-color);border-radius:var(--blockquote-border-radius);&:before{content:"";position:absolute;top:0;inset-inline-start:0;width:var(--blockquote-accent-width);height:100%;border-start-start-radius:var(--blockquote-border-radius);border-end-start-radius:var(--blockquote-border-radius);background:var(--blockquote-accent-color)}p{&:first-child:before{content:open-quote}&:last-child{margin-bottom:0;&:after{content:close-quote}}}}cite{font-style:italic}code,var,kbd{font-family:var(--mono);font-size:.9em;font-style:normal;color:var(--text-code-muted-color)}:is(code,var,kbd):not(h1 *,h2 *,h3 *,h4 *,h5 *,h6 *,pre *){padding:.15em .3em;color:var(--text-code-color);background-color:var(--text-code-background-color);border-radius:var(--radius-sm)}dt{font-weight:var(--bold)}dd+dt{margin-top:.5em}del{text-decoration-color:var(--no-500);text-decoration-style:wavy}h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{overflow-wrap:break-word;text-wrap:balance}h1,.h1,h2,.h2,h3,.h3,h4,.h4{font-family:var(--heading-font);font-weight:var(--heading-weight);letter-spacing:var(--heading-letter-spacing)}h1,.h1{margin-bottom:var(--heading-spacing-h1);font-size:var(--heading-font-size-h1);line-height:var(--heading-line-height-h1)}h2,.h2{margin-bottom:var(--heading-spacing-h2);font-size:var(--heading-font-size-h2);line-height:var(--heading-line-height-h2)}h3,.h3{margin-bottom:var(--heading-spacing-h3);font-size:var(--heading-font-size-h3);line-height:var(--heading-line-height-h3)}h4,.h4{margin-bottom:var(--heading-spacing-h4);font-size:var(--heading-font-size-h4);line-height:var(--heading-line-height-h4)}h5,.h5{margin-bottom:var(--heading-spacing-h5);font-size:var(--heading-font-size-h5);line-height:var(--heading-line-height-h5)}h6,.h6{margin-bottom:var(--heading-spacing-h6);font-size:var(--heading-font-size-h6);line-height:var(--heading-line-height-h6)}:where(h1,h2,h3):has(+:is(h2,h3,h4)){margin-bottom:var(--heading-spacing-consecutive)}hr{display:flex;justify-content:center;align-items:center;height:0;border-style:solid;border-width:var(--border-sm) 0 0;color:var(--ui-border-color);overflow:visible;&:after{content:var(--hr-content);padding:0 var(--xs1);line-height:1;letter-spacing:var(--tracking-sm);background-color:var(--body-background-color)}}:where(hr):has(+:is(p)){margin-bottom:var(--prose-spacing)}ins{padding:.15em .3em;color:var(--ins-color);background-color:var(--ins-background-color);border-radius:var(--radius-sm);-webkit-text-decoration:none;text-decoration:none;&:before{content:"+ "}}mark{padding:.15em .5em;background:var(--marker-color);border-radius:1em 0}:where(ol,ul){list-style-type:none;padding:0}pre{font-family:var(--mono);font-size:var(--pre-font-size);white-space:pre-wrap;border-radius:var(--pre-border-radius)}q{font-style:italic}s{text-decoration-color:light-dark(var(--base-950),var(--base-50));text-decoration-style:wavy}sub,sup{line-height:1}}@layer elements{:root{quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(af),:not(:lang(af))>:lang(af){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ak),:not(:lang(ak))>:lang(ak){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(asa),:not(:lang(asa))>:lang(asa){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(az),:not(:lang(az))>:lang(az){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(bem),:not(:lang(bem))>:lang(bem){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(bez),:not(:lang(bez))>:lang(bez){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(bn),:not(:lang(bn))>:lang(bn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(brx),:not(:lang(brx))>:lang(brx){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(cgg),:not(:lang(cgg))>:lang(cgg){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(chr),:not(:lang(chr))>:lang(chr){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(cy),:not(:lang(cy))>:lang(cy){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(da),:not(:lang(da))>:lang(da){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(dav),:not(:lang(dav))>:lang(dav){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(dje),:not(:lang(dje))>:lang(dje){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(dz),:not(:lang(dz))>:lang(dz){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ebu),:not(:lang(ebu))>:lang(ebu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ee),:not(:lang(ee))>:lang(ee){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(en),:not(:lang(en))>:lang(en){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(fil),:not(:lang(fil))>:lang(fil){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(fo),:not(:lang(fo))>:lang(fo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ga),:not(:lang(ga))>:lang(ga){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(gd),:not(:lang(gd))>:lang(gd){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(gl),:not(:lang(gl))>:lang(gl){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(gu),:not(:lang(gu))>:lang(gu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(guz),:not(:lang(guz))>:lang(guz){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ha),:not(:lang(ha))>:lang(ha){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(hi),:not(:lang(hi))>:lang(hi){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(id),:not(:lang(id))>:lang(id){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ig),:not(:lang(ig))>:lang(ig){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(jmc),:not(:lang(jmc))>:lang(jmc){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kam),:not(:lang(kam))>:lang(kam){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kde),:not(:lang(kde))>:lang(kde){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kea),:not(:lang(kea))>:lang(kea){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(khq),:not(:lang(khq))>:lang(khq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ki),:not(:lang(ki))>:lang(ki){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kln),:not(:lang(kln))>:lang(kln){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(km),:not(:lang(km))>:lang(km){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(kn),:not(:lang(kn))>:lang(kn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ko),:not(:lang(ko))>:lang(ko){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ksb),:not(:lang(ksb))>:lang(ksb){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lg),:not(:lang(lg))>:lang(lg){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ln),:not(:lang(ln))>:lang(ln){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lo),:not(:lang(lo))>:lang(lo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lrc),:not(:lang(lrc))>:lang(lrc){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lu),:not(:lang(lu))>:lang(lu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(luo),:not(:lang(luo))>:lang(luo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(lv),:not(:lang(lv))>:lang(lv){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mas),:not(:lang(mas))>:lang(mas){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mer),:not(:lang(mer))>:lang(mer){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mfe),:not(:lang(mfe))>:lang(mfe){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mgo),:not(:lang(mgo))>:lang(mgo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ml),:not(:lang(ml))>:lang(ml){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mn),:not(:lang(mn))>:lang(mn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mr),:not(:lang(mr))>:lang(mr){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ms),:not(:lang(ms))>:lang(ms){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(mt),:not(:lang(mt))>:lang(mt){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(my),:not(:lang(my))>:lang(my){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(naq),:not(:lang(naq))>:lang(naq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(nd),:not(:lang(nd))>:lang(nd){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ne),:not(:lang(ne))>:lang(ne){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(nus),:not(:lang(nus))>:lang(nus){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(nyn),:not(:lang(nyn))>:lang(nyn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(pa),:not(:lang(pa))>:lang(pa){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(pt),:not(:lang(pt))>:lang(pt){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(rof),:not(:lang(rof))>:lang(rof){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(rwk),:not(:lang(rwk))>:lang(rwk){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(saq),:not(:lang(saq))>:lang(saq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(sbp),:not(:lang(sbp))>:lang(sbp){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(seh),:not(:lang(seh))>:lang(seh){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ses),:not(:lang(ses))>:lang(ses){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(si),:not(:lang(si))>:lang(si){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(so),:not(:lang(so))>:lang(so){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(sw),:not(:lang(sw))>:lang(sw){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(ta),:not(:lang(ta))>:lang(ta){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(te),:not(:lang(te))>:lang(te){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(teo),:not(:lang(teo))>:lang(teo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(th),:not(:lang(th))>:lang(th){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(to),:not(:lang(to))>:lang(to){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(tr),:not(:lang(tr))>:lang(tr){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(twq),:not(:lang(twq))>:lang(twq){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(tzm),:not(:lang(tzm))>:lang(tzm){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(uz-Cyrl),:not(:lang(uz-Cyrl))>:lang(uz-Cyrl){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vai),:not(:lang(vai))>:lang(vai){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vai-Latn),:not(:lang(vai-Latn))>:lang(vai-Latn){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vi),:not(:lang(vi))>:lang(vi){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(vun),:not(:lang(vun))>:lang(vun){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(xog),:not(:lang(xog))>:lang(xog){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(yo),:not(:lang(yo))>:lang(yo){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(yue-Hans),:not(:lang(yue-Hans))>:lang(yue-Hans){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(zh),:not(:lang(zh))>:lang(zh){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(zu),:not(:lang(zu))>:lang(zu){quotes:"\201c" "\201d" "\2018" "\2019"}:root:lang(uz),:not(:lang(uz))>:lang(uz){quotes:"\201c" "\201d" "\2019" "\2018"}:root:lang(eu),:not(:lang(eu))>:lang(eu){quotes:"\201c" "\201d" "\201c" "\201d"}:root:lang(tk),:not(:lang(tk))>:lang(tk){quotes:"\201c" "\201d" "\201c" "\201d"}:root:lang(ar),:not(:lang(ar))>:lang(ar){quotes:"\201d" "\201c" "\2019" "\2018"}:root:lang(ur),:not(:lang(ur))>:lang(ur){quotes:"\201d" "\201c" "\2019" "\2018"}:root:lang(fi),:not(:lang(fi))>:lang(fi){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(he),:not(:lang(he))>:lang(he){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(lag),:not(:lang(lag))>:lang(lag){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(rn),:not(:lang(rn))>:lang(rn){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(sn),:not(:lang(sn))>:lang(sn){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(sv),:not(:lang(sv))>:lang(sv){quotes:"\201d" "\201d" "\2019" "\2019"}:root:lang(sr),:not(:lang(sr))>:lang(sr){quotes:"\201e" "\201c" "\2018" "\2018"}:root:lang(sr-Latn),:not(:lang(sr-Latn))>:lang(sr-Latn){quotes:"\201e" "\201c" "\2018" "\2018"}:root:lang(bg),:not(:lang(bg))>:lang(bg){quotes:"\201e" "\201c" "\201e" "\201c"}:root:lang(lt),:not(:lang(lt))>:lang(lt){quotes:"\201e" "\201c" "\201e" "\201c"}:root:lang(bs-Cyrl),:not(:lang(bs-Cyrl))>:lang(bs-Cyrl){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(cs),:not(:lang(cs))>:lang(cs){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(de),:not(:lang(de))>:lang(de){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(dsb),:not(:lang(dsb))>:lang(dsb){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(et),:not(:lang(et))>:lang(et){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(hr),:not(:lang(hr))>:lang(hr){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(hsb),:not(:lang(hsb))>:lang(hsb){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(is),:not(:lang(is))>:lang(is){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(lb),:not(:lang(lb))>:lang(lb){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(luy),:not(:lang(luy))>:lang(luy){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(mk),:not(:lang(mk))>:lang(mk){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(sk),:not(:lang(sk))>:lang(sk){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(sl),:not(:lang(sl))>:lang(sl){quotes:"\201e" "\201c" "\201a" "\2018"}:root:lang(ka),:not(:lang(ka))>:lang(ka){quotes:"\201e" "\201c" "\ab" "\bb"}:root:lang(bs),:not(:lang(bs))>:lang(bs){quotes:"\201e" "\201d" "\2018" "\2019"}:root:lang(agq),:not(:lang(agq))>:lang(agq){quotes:"\201e" "\201d" "\201a" "\2019"}:root:lang(ff),:not(:lang(ff))>:lang(ff){quotes:"\201e" "\201d" "\201a" "\2019"}:root:lang(nmg),:not(:lang(nmg))>:lang(nmg){quotes:"\201e" "\201d" "\ab" "\bb"}:root:lang(ro),:not(:lang(ro))>:lang(ro){quotes:"\201e" "\201d" "\ab" "\bb"}:root:lang(pl),:not(:lang(pl))>:lang(pl){quotes:"\201e" "\201d" "\ab" "\bb"}:root:lang(hu),:not(:lang(hu))>:lang(hu){quotes:"\201e" "\201d" "\bb" "\ab"}:root:lang(nl),:not(:lang(nl))>:lang(nl){quotes:"\2018" "\2019" "\201c" "\201d"}:root:lang(ti-ER),:not(:lang(ti-ER))>:lang(ti-ER){quotes:"\2018" "\2019" "\201c" "\201d"}:root:lang(dua),:not(:lang(dua))>:lang(dua){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(ksf),:not(:lang(ksf))>:lang(ksf){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(rw),:not(:lang(rw))>:lang(rw){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(nn),:not(:lang(nn))>:lang(nn){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(nb),:not(:lang(nb))>:lang(nb){quotes:"\ab" "\bb" "\2018" "\2019"}:root:lang(ast),:not(:lang(ast))>:lang(ast){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(bm),:not(:lang(bm))>:lang(bm){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(br),:not(:lang(br))>:lang(br){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(ca),:not(:lang(ca))>:lang(ca){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(dyo),:not(:lang(dyo))>:lang(dyo){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(el),:not(:lang(el))>:lang(el){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(es),:not(:lang(es))>:lang(es){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(ewo),:not(:lang(ewo))>:lang(ewo){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(mg),:not(:lang(mg))>:lang(mg){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(mua),:not(:lang(mua))>:lang(mua){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(sg),:not(:lang(sg))>:lang(sg){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(it),:not(:lang(it))>:lang(it){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(kab),:not(:lang(kab))>:lang(kab){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(kk),:not(:lang(kk))>:lang(kk){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(pt-PT),:not(:lang(pt-PT))>:lang(pt-PT){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(nnh),:not(:lang(nnh))>:lang(nnh){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(sq),:not(:lang(sq))>:lang(sq){quotes:"\ab" "\bb" "\201c" "\201d"}:root:lang(bas),:not(:lang(bas))>:lang(bas){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(be),:not(:lang(be))>:lang(be){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(ky),:not(:lang(ky))>:lang(ky){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(sah),:not(:lang(sah))>:lang(sah){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(ru),:not(:lang(ru))>:lang(ru){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(uk),:not(:lang(uk))>:lang(uk){quotes:"\ab" "\bb" "\201e" "\201c"}:root:lang(zgh),:not(:lang(zgh))>:lang(zgh){quotes:"\ab" "\bb" "\201e" "\201d"}:root:lang(shi),:not(:lang(shi))>:lang(shi){quotes:"\ab" "\bb" "\201e" "\201d"}:root:lang(shi-Latn),:not(:lang(shi-Latn))>:lang(shi-Latn){quotes:"\ab" "\bb" "\201e" "\201d"}:root:lang(am),:not(:lang(am))>:lang(am){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(az-Cyrl),:not(:lang(az-Cyrl))>:lang(az-Cyrl){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(fa),:not(:lang(fa))>:lang(fa){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(fr-CH),:not(:lang(fr-CH))>:lang(fr-CH){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(gsw),:not(:lang(gsw))>:lang(gsw){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(jgo),:not(:lang(jgo))>:lang(jgo){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(kkj),:not(:lang(kkj))>:lang(kkj){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(mzn),:not(:lang(mzn))>:lang(mzn){quotes:"\ab" "\bb" "\2039" "\203a"}:root:lang(fr),:not(:lang(fr))>:lang(fr){quotes:"\ab" "\bb" "\ab" "\bb"}:root:lang(hy),:not(:lang(hy))>:lang(hy){quotes:"\ab" "\bb" "\ab" "\bb"}:root:lang(yav),:not(:lang(yav))>:lang(yav){quotes:"\ab" "\bb" "\ab" "\bb"}:root:lang(ja),:not(:lang(ja))>:lang(ja){quotes:"\300c" "\300d" "\300e" "\300f"}:root:lang(yue),:not(:lang(yue))>:lang(yue){quotes:"\300c" "\300d" "\300e" "\300f"}:root:lang(zh-Hant),:not(:lang(zh-Hant))>:lang(zh-Hant){quotes:"\300c" "\300d" "\300e" "\300f"}}@layer elements{audio,canvas,embed,iframe,img,object,picture,svg,video{display:block;vertical-align:middle;max-width:100%}img,svg,video,canvas{height:auto}audio{width:100%;max-width:var(--tera1)}audio:not([controls]){display:none}figcaption{font-style:italic;font-size:var(--text-sm)}figure{&:has(*+figcaption){figcaption{margin-top:var(--figcaption-spacing)}}&:has(figcaption+*){figcaption{margin-bottom:var(--figcaption-spacing)}}}iframe{border:var(--border-sm) solid var(--ui-border-color)}}@layer elements{caption{caption-side:bottom;margin-top:var(--table-caption-spacing);font-size:var(--text-sm)}table{border-spacing:0;border:var(--table-border-width) solid var(--table-border-color);border-radius:var(--table-border-radius);background-color:var(--table-background-color)}th,td{text-align:start;padding:var(--table-padding);border-bottom:var(--table-border-width) solid var(--table-border-color);border-inline-start:var(--table-border-width) solid var(--table-border-color)}tr{th:first-child,td:first-child{border-inline-start-width:0}}tbody{tr:last-child{th,td{border-bottom-width:0}}}tfoot{th,td{border-top:var(--table-border-width) solid var(--table-border-color);border-bottom-width:0}}}@layer elements{::placeholder{opacity:var(--o-4)}input,button,textarea,select{font:inherit;color:var(--text-color)}button{color:var(--text-color)}fieldset{border:var(--fieldset-border-width) solid var(--fieldset-border-color);border-radius:var(--fieldset-border-radius);padding:var(--fieldset-padding);ul:has([type=checkbox],[type=radio]){padding-inline-start:0}>[aria-hidden]{margin-bottom:var(--sm3);font-size:var(--text-lg);grid-column:1 / -1}}:is(input,select,textarea):user-invalid{border-color:var(--input-border-color-invalid)}input{&:where(:not([type=checkbox],[type=radio])){height:var(--input-height)}&:where(:not([type=color],[type=file],[type=reset],[type=submit])){padding:var(--input-padding)}&:where(:not([type=color])){border-radius:var(--input-border-radius)}&:where(:not([type=file])){border:var(--input-border-width) solid var(--input-border-color)}&[type=file]{width:100%;accent-color:var(--text-color)}&[type=number]{padding-inline-end:var(--xs1)}}label{display:block;&:has(+:is(input,select,textarea)){margin-bottom:var(--label-spacing)}}legend{position:absolute;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);width:1px;height:1px;white-space:nowrap}meter{width:100%;background:var(--meter-track-color);border-radius:var(--meter-border-radius);height:var(--meter-height);&::-webkit-meter-bar{background:var(--meter-track-color)}&::-webkit-meter-bar,&::-webkit-meter-optimum-value,&::-webkit-meter-suboptimum-value,&::-webkit-meter-even-less-good-value{height:var(--meter-height);border:none;border-radius:var(--meter-border-radius)}&::-webkit-meter-even-less-good-value{background:var(--meter-low-color)}&::-webkit-meter-suboptimum-value{background:var(--meter-medium-color)}&::-webkit-meter-optimum-value{background:var(--meter-high-color)}&:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:var(--meter-low-color)}&:-moz-meter-sub-optimum::-moz-meter-bar{background:var(--meter-medium-color)}&:-moz-meter-optimum::-moz-meter-bar{background:var(--meter-high-color)}}progress{appearance:none;width:100%;height:var(--progress-height);background:var(--progress-track-color);border-radius:var(--progress-border-radius);border:none;&::-moz-progress-bar{background:var(--progress-color);border-radius:var(--progress-border-radius)}&::-webkit-progress-bar{width:100%;background:var(--progress-track-color);border-radius:var(--progress-border-radius);height:var(--progress-height)}&::-webkit-progress-value{background:var(--progress-color);border-radius:var(--progress-border-radius)}}select{--split: calc(100% - var(--select-icon-size));display:flex;appearance:none;height:var(--input-height);padding:var(--xs1) calc(var(--input-padding) + var(--md1)) var(--xs1) var(--input-padding);border:var(--input-border-width) solid var(--input-border-color);border-radius:var(--input-border-radius);background:linear-gradient(to right,var(--body-background-color) 0 var(--split),var(--text-color) var(--split) 100%);mask-image:var(--select-icon),linear-gradient(to right,transparent calc(var(--split) - 1px),red 0),linear-gradient(red 0 0);mask-size:var(--select-icon-size),auto,auto;mask-position:calc(100% - var(--xs1)) center,0 0,0 0;mask-repeat:no-repeat;mask-clip:padding-box,padding-box,border-box;mask-origin:padding-box,padding-box,border-box;mask-composite:add,exclude;&:disabled{--disabled-color: light-dark( hsl(from var(--text-color) h s 70%), hsl(from var(--text-color) h s 40%) );cursor:not-allowed;color:var(--disabled-color);background:linear-gradient(to right,var(--body-background-color) 0 var(--split),var(--disabled-color) var(--split) 100%)}&[multiple]{height:auto;padding:var(--input-padding);background:var(--body-background-color);mask-image:none}}textarea{width:100%;padding:var(--input-padding);border-radius:var(--input-border-radius);border:var(--input-border-width) solid var(--input-border-color);resize:vertical;&:not([rows]){min-height:6em}}}@layer elements{dialog{min-width:var(--dialog-min-width);max-width:var(--dialog-max-width);padding:var(--dialog-padding);border:var(--dialog-border-width) solid var(--dialog-border-color);background-color:var(--dialog-background-color);border-radius:var(--dialog-border-radius);&::backdrop{background:var(--dialog-backdrop-color);opacity:var(--dialog-backdrop-opacity)}[aria-label="close pop-up"]{position:absolute;top:var(--xs3);right:var( --xs3 );background:transparent;border:none;outline:none;cursor:pointer}p:last-of-type{margin-bottom:0}}details{padding:var(--details-padding);border:var(--details-border-width) solid var(--details-border-color);background-color:var(--details-background-color);border-radius:var(--details-border-radius);cursor:pointer;summary{display:flex;justify-content:space-between;font-weight:var(--bold);&::-webkit-details-marker{display:none}&:after{content:"";width:var(--details-icon-size);height:var(--details-icon-size);background-color:currentColor;mask-image:var(--details-icon);mask-size:contain;mask-repeat:no-repeat;transition:transform var(--transition)}}&[open]>summary{margin-bottom:var(--details-spacing);&:after{transform:rotate(180deg)}}p:last-of-type{margin-bottom:0}}}@layer global{:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.a11y-skipLink{position:fixed;z-index:var(--z-top);inset-block-start:-100vb;inset-inline-start:0;padding:.75em 1.25em;background-color:var(--body-background-color);color:var(--text-color)}.a11y-skipLink:focus{inset-block-start:0}.a11y-srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}}@layer global{@keyframes fadeFromOpaque{0%{opacity:1}}@keyframes fadeToOpaque{to{opacity:1}}@keyframes fadeFromTransparent{0%{opacity:0}}@keyframes fadeToTransparent{to{opacity:0}}}@layer global{.grid{display:grid;--grid-tc: repeat(4, 1fr);--grid-cs: 1;--grid-ce: -1;grid-template-columns:var(--grid-tc);grid-column-gap:var(--grid-column-gap);grid-row-gap:var(--grid-row-gap)}.grid-flush{grid-column-gap:0;grid-row-gap:0}.grid>.grid_item{display:block;appearance:none}.grid[col="1"]{--grid-tc: repeat(1, 1fr) }.grid[col="2"]{--grid-tc: repeat(2, 1fr) }.grid[col="3"]{--grid-tc: repeat(3, 1fr) }.grid[col="4"]{--grid-tc: repeat(4, 1fr) }.grid[col="5"]{--grid-tc: repeat(5, 1fr) }.grid[col="6"]{--grid-tc: repeat(6, 1fr) }.grid[col="7"]{--grid-tc: repeat(7, 1fr) }.grid[col="8"]{--grid-tc: repeat(8, 1fr) }.grid[col="9"]{--grid-tc: repeat(9, 1fr) }.grid[col="10"]{--grid-tc: repeat(10, 1fr) }.grid[col="11"]{--grid-tc: repeat(11, 1fr) }.grid[col="12"]{--grid-tc: repeat(12, 1fr) }.grid[col="13"]{--grid-tc: repeat(13, 1fr) }.grid[col="14"]{--grid-tc: repeat(14, 1fr) }.grid[col="15"]{--grid-tc: repeat(15, 1fr) }.grid[col="16"]{--grid-tc: repeat(16, 1fr) }.grid[col="17"]{--grid-tc: repeat(17, 1fr) }.grid[col="18"]{--grid-tc: repeat(18, 1fr) }.grid[col="19"]{--grid-tc: repeat(19, 1fr) }.grid[col="20"]{--grid-tc: repeat(20, 1fr) }.grid[col="21"]{--grid-tc: repeat(21, 1fr) }.grid[col="22"]{--grid-tc: repeat(22, 1fr) }.grid[col="23"]{--grid-tc: repeat(23, 1fr) }.grid[col="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span^="1"]{--grid-cs: 1 }.grid>.grid_item[span^="2"]{--grid-cs: 2 }.grid>.grid_item[span^="3"]{--grid-cs: 3 }.grid>.grid_item[span^="4"]{--grid-cs: 4 }.grid>.grid_item[span^="5"]{--grid-cs: 5 }.grid>.grid_item[span^="6"]{--grid-cs: 6 }.grid>.grid_item[span^="7"]{--grid-cs: 7 }.grid>.grid_item[span^="8"]{--grid-cs: 8 }.grid>.grid_item[span^="9"]{--grid-cs: 9 }.grid>.grid_item[span^="10"]{--grid-cs: 10 }.grid>.grid_item[span^="11"]{--grid-cs: 11 }.grid>.grid_item[span^="12"]{--grid-cs: 12 }.grid>.grid_item[span^="13"]{--grid-cs: 13 }.grid>.grid_item[span^="14"]{--grid-cs: 14 }.grid>.grid_item[span^="15"]{--grid-cs: 15 }.grid>.grid_item[span^="16"]{--grid-cs: 16 }.grid>.grid_item[span^="17"]{--grid-cs: 17 }.grid>.grid_item[span^="18"]{--grid-cs: 18 }.grid>.grid_item[span^="19"]{--grid-cs: 19 }.grid>.grid_item[span^="20"]{--grid-cs: 20 }.grid>.grid_item[span^="21"]{--grid-cs: 21 }.grid>.grid_item[span^="22"]{--grid-cs: 22 }.grid>.grid_item[span^="23"]{--grid-cs: 23 }.grid>.grid_item[span^="24"]{--grid-cs: 24 }.grid>.grid_item[span$="+1"],.grid>.grid_item[span="1"]{--grid-ce: 1 }.grid>.grid_item[span$="+2"],.grid>.grid_item[span$="-1"],.grid>.grid_item[span="2"]{--grid-ce: 2 }.grid>.grid_item[span$="+3"],.grid>.grid_item[span$="-2"],.grid>.grid_item[span="3"]{--grid-ce: 3 }.grid>.grid_item[span$="+4"],.grid>.grid_item[span$="-3"],.grid>.grid_item[span="4"]{--grid-ce: 4 }.grid>.grid_item[span$="+5"],.grid>.grid_item[span$="-4"],.grid>.grid_item[span="5"]{--grid-ce: 5 }.grid>.grid_item[span$="+6"],.grid>.grid_item[span$="-5"],.grid>.grid_item[span="6"]{--grid-ce: 6 }.grid>.grid_item[span$="+7"],.grid>.grid_item[span$="-6"],.grid>.grid_item[span="7"]{--grid-ce: 7 }.grid>.grid_item[span$="+8"],.grid>.grid_item[span$="-7"],.grid>.grid_item[span="8"]{--grid-ce: 8 }.grid>.grid_item[span$="+9"],.grid>.grid_item[span$="-8"],.grid>.grid_item[span="9"]{--grid-ce: 9 }.grid>.grid_item[span$="+10"],.grid>.grid_item[span$="-9"],.grid>.grid_item[span="10"]{--grid-ce: 10 }.grid>.grid_item[span$="+11"],.grid>.grid_item[span$="-10"],.grid>.grid_item[span="11"]{--grid-ce: 11 }.grid>.grid_item[span$="+12"],.grid>.grid_item[span$="-11"],.grid>.grid_item[span="12"]{--grid-ce: 12 }.grid>.grid_item[span$="+13"],.grid>.grid_item[span$="-12"],.grid>.grid_item[span="13"]{--grid-ce: 13 }.grid>.grid_item[span$="+14"],.grid>.grid_item[span$="-13"],.grid>.grid_item[span="14"]{--grid-ce: 14 }.grid>.grid_item[span$="+15"],.grid>.grid_item[span$="-14"],.grid>.grid_item[span="15"]{--grid-ce: 15 }.grid>.grid_item[span$="+16"],.grid>.grid_item[span$="-15"],.grid>.grid_item[span="16"]{--grid-ce: 16 }.grid>.grid_item[span$="+17"],.grid>.grid_item[span$="-16"],.grid>.grid_item[span="17"]{--grid-ce: 17 }.grid>.grid_item[span$="+18"],.grid>.grid_item[span$="-17"],.grid>.grid_item[span="18"]{--grid-ce: 18 }.grid>.grid_item[span$="+19"],.grid>.grid_item[span$="-18"],.grid>.grid_item[span="19"]{--grid-ce: 19 }.grid>.grid_item[span$="+20"],.grid>.grid_item[span$="-19"],.grid>.grid_item[span="20"]{--grid-ce: 20 }.grid>.grid_item[span$="+21"],.grid>.grid_item[span$="-20"],.grid>.grid_item[span="21"]{--grid-ce: 21 }.grid>.grid_item[span$="+22"],.grid>.grid_item[span$="-21"],.grid>.grid_item[span="22"]{--grid-ce: 22 }.grid>.grid_item[span$="+23"],.grid>.grid_item[span$="-22"],.grid>.grid_item[span="23"]{--grid-ce: 23 }.grid>.grid_item[span$="+24"],.grid>.grid_item[span$="-23"],.grid>.grid_item[span="24"]{--grid-ce: 24 }.grid>.grid_item[span$="-24"]{--grid-ce: 25 }.grid>.grid_item[span]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span*="+"],.grid>.grid_item[span*="-"],.grid>.grid_item[span*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span*="-"],.grid>.grid_item[span*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span=row]{grid-column:1 / -1}@media only screen and (width>=768px){.grid[col-md="1"]{--grid-tc: repeat(1, 1fr) }.grid[col-md="2"]{--grid-tc: repeat(2, 1fr) }.grid[col-md="3"]{--grid-tc: repeat(3, 1fr) }.grid[col-md="4"]{--grid-tc: repeat(4, 1fr) }.grid[col-md="5"]{--grid-tc: repeat(5, 1fr) }.grid[col-md="6"]{--grid-tc: repeat(6, 1fr) }.grid[col-md="7"]{--grid-tc: repeat(7, 1fr) }.grid[col-md="8"]{--grid-tc: repeat(8, 1fr) }.grid[col-md="9"]{--grid-tc: repeat(9, 1fr) }.grid[col-md="10"]{--grid-tc: repeat(10, 1fr) }.grid[col-md="11"]{--grid-tc: repeat(11, 1fr) }.grid[col-md="12"]{--grid-tc: repeat(12, 1fr) }.grid[col-md="13"]{--grid-tc: repeat(13, 1fr) }.grid[col-md="14"]{--grid-tc: repeat(14, 1fr) }.grid[col-md="15"]{--grid-tc: repeat(15, 1fr) }.grid[col-md="16"]{--grid-tc: repeat(16, 1fr) }.grid[col-md="17"]{--grid-tc: repeat(17, 1fr) }.grid[col-md="18"]{--grid-tc: repeat(18, 1fr) }.grid[col-md="19"]{--grid-tc: repeat(19, 1fr) }.grid[col-md="20"]{--grid-tc: repeat(20, 1fr) }.grid[col-md="21"]{--grid-tc: repeat(21, 1fr) }.grid[col-md="22"]{--grid-tc: repeat(22, 1fr) }.grid[col-md="23"]{--grid-tc: repeat(23, 1fr) }.grid[col-md="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span-md^="1"]{--grid-cs: 1 }.grid>.grid_item[span-md^="2"]{--grid-cs: 2 }.grid>.grid_item[span-md^="3"]{--grid-cs: 3 }.grid>.grid_item[span-md^="4"]{--grid-cs: 4 }.grid>.grid_item[span-md^="5"]{--grid-cs: 5 }.grid>.grid_item[span-md^="6"]{--grid-cs: 6 }.grid>.grid_item[span-md^="7"]{--grid-cs: 7 }.grid>.grid_item[span-md^="8"]{--grid-cs: 8 }.grid>.grid_item[span-md^="9"]{--grid-cs: 9 }.grid>.grid_item[span-md^="10"]{--grid-cs: 10 }.grid>.grid_item[span-md^="11"]{--grid-cs: 11 }.grid>.grid_item[span-md^="12"]{--grid-cs: 12 }.grid>.grid_item[span-md^="13"]{--grid-cs: 13 }.grid>.grid_item[span-md^="14"]{--grid-cs: 14 }.grid>.grid_item[span-md^="15"]{--grid-cs: 15 }.grid>.grid_item[span-md^="16"]{--grid-cs: 16 }.grid>.grid_item[span-md^="17"]{--grid-cs: 17 }.grid>.grid_item[span-md^="18"]{--grid-cs: 18 }.grid>.grid_item[span-md^="19"]{--grid-cs: 19 }.grid>.grid_item[span-md^="20"]{--grid-cs: 20 }.grid>.grid_item[span-md^="21"]{--grid-cs: 21 }.grid>.grid_item[span-md^="22"]{--grid-cs: 22 }.grid>.grid_item[span-md^="23"]{--grid-cs: 23 }.grid>.grid_item[span-md^="24"]{--grid-cs: 24 }.grid>.grid_item[span-md$="+1"],.grid>.grid_item[span-md="1"]{--grid-ce: 1 }.grid>.grid_item[span-md$="+2"],.grid>.grid_item[span-md$="-1"],.grid>.grid_item[span-md="2"]{--grid-ce: 2 }.grid>.grid_item[span-md$="+3"],.grid>.grid_item[span-md$="-2"],.grid>.grid_item[span-md="3"]{--grid-ce: 3 }.grid>.grid_item[span-md$="+4"],.grid>.grid_item[span-md$="-3"],.grid>.grid_item[span-md="4"]{--grid-ce: 4 }.grid>.grid_item[span-md$="+5"],.grid>.grid_item[span-md$="-4"],.grid>.grid_item[span-md="5"]{--grid-ce: 5 }.grid>.grid_item[span-md$="+6"],.grid>.grid_item[span-md$="-5"],.grid>.grid_item[span-md="6"]{--grid-ce: 6 }.grid>.grid_item[span-md$="+7"],.grid>.grid_item[span-md$="-6"],.grid>.grid_item[span-md="7"]{--grid-ce: 7 }.grid>.grid_item[span-md$="+8"],.grid>.grid_item[span-md$="-7"],.grid>.grid_item[span-md="8"]{--grid-ce: 8 }.grid>.grid_item[span-md$="+9"],.grid>.grid_item[span-md$="-8"],.grid>.grid_item[span-md="9"]{--grid-ce: 9 }.grid>.grid_item[span-md$="+10"],.grid>.grid_item[span-md$="-9"],.grid>.grid_item[span-md="10"]{--grid-ce: 10 }.grid>.grid_item[span-md$="+11"],.grid>.grid_item[span-md$="-10"],.grid>.grid_item[span-md="11"]{--grid-ce: 11 }.grid>.grid_item[span-md$="+12"],.grid>.grid_item[span-md$="-11"],.grid>.grid_item[span-md="12"]{--grid-ce: 12 }.grid>.grid_item[span-md$="+13"],.grid>.grid_item[span-md$="-12"],.grid>.grid_item[span-md="13"]{--grid-ce: 13 }.grid>.grid_item[span-md$="+14"],.grid>.grid_item[span-md$="-13"],.grid>.grid_item[span-md="14"]{--grid-ce: 14 }.grid>.grid_item[span-md$="+15"],.grid>.grid_item[span-md$="-14"],.grid>.grid_item[span-md="15"]{--grid-ce: 15 }.grid>.grid_item[span-md$="+16"],.grid>.grid_item[span-md$="-15"],.grid>.grid_item[span-md="16"]{--grid-ce: 16 }.grid>.grid_item[span-md$="+17"],.grid>.grid_item[span-md$="-16"],.grid>.grid_item[span-md="17"]{--grid-ce: 17 }.grid>.grid_item[span-md$="+18"],.grid>.grid_item[span-md$="-17"],.grid>.grid_item[span-md="18"]{--grid-ce: 18 }.grid>.grid_item[span-md$="+19"],.grid>.grid_item[span-md$="-18"],.grid>.grid_item[span-md="19"]{--grid-ce: 19 }.grid>.grid_item[span-md$="+20"],.grid>.grid_item[span-md$="-19"],.grid>.grid_item[span-md="20"]{--grid-ce: 20 }.grid>.grid_item[span-md$="+21"],.grid>.grid_item[span-md$="-20"],.grid>.grid_item[span-md="21"]{--grid-ce: 21 }.grid>.grid_item[span-md$="+22"],.grid>.grid_item[span-md$="-21"],.grid>.grid_item[span-md="22"]{--grid-ce: 22 }.grid>.grid_item[span-md$="+23"],.grid>.grid_item[span-md$="-22"],.grid>.grid_item[span-md="23"]{--grid-ce: 23 }.grid>.grid_item[span-md$="+24"],.grid>.grid_item[span-md$="-23"],.grid>.grid_item[span-md="24"]{--grid-ce: 24 }.grid>.grid_item[span-md$="-24"]{--grid-ce: 25 }.grid>.grid_item[span-md]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span-md*="+"],.grid>.grid_item[span-md*="-"],.grid>.grid_item[span-md*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span-md*="-"],.grid>.grid_item[span-md*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span-md=row]{grid-column:1 / -1}}@media only screen and (width>=1024px){.grid[col-lg="1"]{--grid-tc: repeat(1, 1fr) }.grid[col-lg="2"]{--grid-tc: repeat(2, 1fr) }.grid[col-lg="3"]{--grid-tc: repeat(3, 1fr) }.grid[col-lg="4"]{--grid-tc: repeat(4, 1fr) }.grid[col-lg="5"]{--grid-tc: repeat(5, 1fr) }.grid[col-lg="6"]{--grid-tc: repeat(6, 1fr) }.grid[col-lg="7"]{--grid-tc: repeat(7, 1fr) }.grid[col-lg="8"]{--grid-tc: repeat(8, 1fr) }.grid[col-lg="9"]{--grid-tc: repeat(9, 1fr) }.grid[col-lg="10"]{--grid-tc: repeat(10, 1fr) }.grid[col-lg="11"]{--grid-tc: repeat(11, 1fr) }.grid[col-lg="12"]{--grid-tc: repeat(12, 1fr) }.grid[col-lg="13"]{--grid-tc: repeat(13, 1fr) }.grid[col-lg="14"]{--grid-tc: repeat(14, 1fr) }.grid[col-lg="15"]{--grid-tc: repeat(15, 1fr) }.grid[col-lg="16"]{--grid-tc: repeat(16, 1fr) }.grid[col-lg="17"]{--grid-tc: repeat(17, 1fr) }.grid[col-lg="18"]{--grid-tc: repeat(18, 1fr) }.grid[col-lg="19"]{--grid-tc: repeat(19, 1fr) }.grid[col-lg="20"]{--grid-tc: repeat(20, 1fr) }.grid[col-lg="21"]{--grid-tc: repeat(21, 1fr) }.grid[col-lg="22"]{--grid-tc: repeat(22, 1fr) }.grid[col-lg="23"]{--grid-tc: repeat(23, 1fr) }.grid[col-lg="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span-lg^="1"]{--grid-cs: 1 }.grid>.grid_item[span-lg^="2"]{--grid-cs: 2 }.grid>.grid_item[span-lg^="3"]{--grid-cs: 3 }.grid>.grid_item[span-lg^="4"]{--grid-cs: 4 }.grid>.grid_item[span-lg^="5"]{--grid-cs: 5 }.grid>.grid_item[span-lg^="6"]{--grid-cs: 6 }.grid>.grid_item[span-lg^="7"]{--grid-cs: 7 }.grid>.grid_item[span-lg^="8"]{--grid-cs: 8 }.grid>.grid_item[span-lg^="9"]{--grid-cs: 9 }.grid>.grid_item[span-lg^="10"]{--grid-cs: 10 }.grid>.grid_item[span-lg^="11"]{--grid-cs: 11 }.grid>.grid_item[span-lg^="12"]{--grid-cs: 12 }.grid>.grid_item[span-lg^="13"]{--grid-cs: 13 }.grid>.grid_item[span-lg^="14"]{--grid-cs: 14 }.grid>.grid_item[span-lg^="15"]{--grid-cs: 15 }.grid>.grid_item[span-lg^="16"]{--grid-cs: 16 }.grid>.grid_item[span-lg^="17"]{--grid-cs: 17 }.grid>.grid_item[span-lg^="18"]{--grid-cs: 18 }.grid>.grid_item[span-lg^="19"]{--grid-cs: 19 }.grid>.grid_item[span-lg^="20"]{--grid-cs: 20 }.grid>.grid_item[span-lg^="21"]{--grid-cs: 21 }.grid>.grid_item[span-lg^="22"]{--grid-cs: 22 }.grid>.grid_item[span-lg^="23"]{--grid-cs: 23 }.grid>.grid_item[span-lg^="24"]{--grid-cs: 24 }.grid>.grid_item[span-lg$="+1"],.grid>.grid_item[span-lg="1"]{--grid-ce: 1 }.grid>.grid_item[span-lg$="+2"],.grid>.grid_item[span-lg$="-1"],.grid>.grid_item[span-lg="2"]{--grid-ce: 2 }.grid>.grid_item[span-lg$="+3"],.grid>.grid_item[span-lg$="-2"],.grid>.grid_item[span-lg="3"]{--grid-ce: 3 }.grid>.grid_item[span-lg$="+4"],.grid>.grid_item[span-lg$="-3"],.grid>.grid_item[span-lg="4"]{--grid-ce: 4 }.grid>.grid_item[span-lg$="+5"],.grid>.grid_item[span-lg$="-4"],.grid>.grid_item[span-lg="5"]{--grid-ce: 5 }.grid>.grid_item[span-lg$="+6"],.grid>.grid_item[span-lg$="-5"],.grid>.grid_item[span-lg="6"]{--grid-ce: 6 }.grid>.grid_item[span-lg$="+7"],.grid>.grid_item[span-lg$="-6"],.grid>.grid_item[span-lg="7"]{--grid-ce: 7 }.grid>.grid_item[span-lg$="+8"],.grid>.grid_item[span-lg$="-7"],.grid>.grid_item[span-lg="8"]{--grid-ce: 8 }.grid>.grid_item[span-lg$="+9"],.grid>.grid_item[span-lg$="-8"],.grid>.grid_item[span-lg="9"]{--grid-ce: 9 }.grid>.grid_item[span-lg$="+10"],.grid>.grid_item[span-lg$="-9"],.grid>.grid_item[span-lg="10"]{--grid-ce: 10 }.grid>.grid_item[span-lg$="+11"],.grid>.grid_item[span-lg$="-10"],.grid>.grid_item[span-lg="11"]{--grid-ce: 11 }.grid>.grid_item[span-lg$="+12"],.grid>.grid_item[span-lg$="-11"],.grid>.grid_item[span-lg="12"]{--grid-ce: 12 }.grid>.grid_item[span-lg$="+13"],.grid>.grid_item[span-lg$="-12"],.grid>.grid_item[span-lg="13"]{--grid-ce: 13 }.grid>.grid_item[span-lg$="+14"],.grid>.grid_item[span-lg$="-13"],.grid>.grid_item[span-lg="14"]{--grid-ce: 14 }.grid>.grid_item[span-lg$="+15"],.grid>.grid_item[span-lg$="-14"],.grid>.grid_item[span-lg="15"]{--grid-ce: 15 }.grid>.grid_item[span-lg$="+16"],.grid>.grid_item[span-lg$="-15"],.grid>.grid_item[span-lg="16"]{--grid-ce: 16 }.grid>.grid_item[span-lg$="+17"],.grid>.grid_item[span-lg$="-16"],.grid>.grid_item[span-lg="17"]{--grid-ce: 17 }.grid>.grid_item[span-lg$="+18"],.grid>.grid_item[span-lg$="-17"],.grid>.grid_item[span-lg="18"]{--grid-ce: 18 }.grid>.grid_item[span-lg$="+19"],.grid>.grid_item[span-lg$="-18"],.grid>.grid_item[span-lg="19"]{--grid-ce: 19 }.grid>.grid_item[span-lg$="+20"],.grid>.grid_item[span-lg$="-19"],.grid>.grid_item[span-lg="20"]{--grid-ce: 20 }.grid>.grid_item[span-lg$="+21"],.grid>.grid_item[span-lg$="-20"],.grid>.grid_item[span-lg="21"]{--grid-ce: 21 }.grid>.grid_item[span-lg$="+22"],.grid>.grid_item[span-lg$="-21"],.grid>.grid_item[span-lg="22"]{--grid-ce: 22 }.grid>.grid_item[span-lg$="+23"],.grid>.grid_item[span-lg$="-22"],.grid>.grid_item[span-lg="23"]{--grid-ce: 23 }.grid>.grid_item[span-lg$="+24"],.grid>.grid_item[span-lg$="-23"],.grid>.grid_item[span-lg="24"]{--grid-ce: 24 }.grid>.grid_item[span-lg$="-24"]{--grid-ce: 25 }.grid>.grid_item[span-lg]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span-lg*="+"],.grid>.grid_item[span-lg*="-"],.grid>.grid_item[span-lg*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span-lg*="-"],.grid>.grid_item[span-lg*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span-lg=row]{grid-column:1 / -1}}@media only screen and (width>=1440px){.grid[col-xl="1"]{--grid-tc: repeat(1, 1fr) }.grid[col-xl="2"]{--grid-tc: repeat(2, 1fr) }.grid[col-xl="3"]{--grid-tc: repeat(3, 1fr) }.grid[col-xl="4"]{--grid-tc: repeat(4, 1fr) }.grid[col-xl="5"]{--grid-tc: repeat(5, 1fr) }.grid[col-xl="6"]{--grid-tc: repeat(6, 1fr) }.grid[col-xl="7"]{--grid-tc: repeat(7, 1fr) }.grid[col-xl="8"]{--grid-tc: repeat(8, 1fr) }.grid[col-xl="9"]{--grid-tc: repeat(9, 1fr) }.grid[col-xl="10"]{--grid-tc: repeat(10, 1fr) }.grid[col-xl="11"]{--grid-tc: repeat(11, 1fr) }.grid[col-xl="12"]{--grid-tc: repeat(12, 1fr) }.grid[col-xl="13"]{--grid-tc: repeat(13, 1fr) }.grid[col-xl="14"]{--grid-tc: repeat(14, 1fr) }.grid[col-xl="15"]{--grid-tc: repeat(15, 1fr) }.grid[col-xl="16"]{--grid-tc: repeat(16, 1fr) }.grid[col-xl="17"]{--grid-tc: repeat(17, 1fr) }.grid[col-xl="18"]{--grid-tc: repeat(18, 1fr) }.grid[col-xl="19"]{--grid-tc: repeat(19, 1fr) }.grid[col-xl="20"]{--grid-tc: repeat(20, 1fr) }.grid[col-xl="21"]{--grid-tc: repeat(21, 1fr) }.grid[col-xl="22"]{--grid-tc: repeat(22, 1fr) }.grid[col-xl="23"]{--grid-tc: repeat(23, 1fr) }.grid[col-xl="24"]{--grid-tc: repeat(24, 1fr) }.grid>.grid_item[span-xl^="1"]{--grid-cs: 1 }.grid>.grid_item[span-xl^="2"]{--grid-cs: 2 }.grid>.grid_item[span-xl^="3"]{--grid-cs: 3 }.grid>.grid_item[span-xl^="4"]{--grid-cs: 4 }.grid>.grid_item[span-xl^="5"]{--grid-cs: 5 }.grid>.grid_item[span-xl^="6"]{--grid-cs: 6 }.grid>.grid_item[span-xl^="7"]{--grid-cs: 7 }.grid>.grid_item[span-xl^="8"]{--grid-cs: 8 }.grid>.grid_item[span-xl^="9"]{--grid-cs: 9 }.grid>.grid_item[span-xl^="10"]{--grid-cs: 10 }.grid>.grid_item[span-xl^="11"]{--grid-cs: 11 }.grid>.grid_item[span-xl^="12"]{--grid-cs: 12 }.grid>.grid_item[span-xl^="13"]{--grid-cs: 13 }.grid>.grid_item[span-xl^="14"]{--grid-cs: 14 }.grid>.grid_item[span-xl^="15"]{--grid-cs: 15 }.grid>.grid_item[span-xl^="16"]{--grid-cs: 16 }.grid>.grid_item[span-xl^="17"]{--grid-cs: 17 }.grid>.grid_item[span-xl^="18"]{--grid-cs: 18 }.grid>.grid_item[span-xl^="19"]{--grid-cs: 19 }.grid>.grid_item[span-xl^="20"]{--grid-cs: 20 }.grid>.grid_item[span-xl^="21"]{--grid-cs: 21 }.grid>.grid_item[span-xl^="22"]{--grid-cs: 22 }.grid>.grid_item[span-xl^="23"]{--grid-cs: 23 }.grid>.grid_item[span-xl^="24"]{--grid-cs: 24 }.grid>.grid_item[span-xl$="+1"],.grid>.grid_item[span-xl="1"]{--grid-ce: 1 }.grid>.grid_item[span-xl$="+2"],.grid>.grid_item[span-xl$="-1"],.grid>.grid_item[span-xl="2"]{--grid-ce: 2 }.grid>.grid_item[span-xl$="+3"],.grid>.grid_item[span-xl$="-2"],.grid>.grid_item[span-xl="3"]{--grid-ce: 3 }.grid>.grid_item[span-xl$="+4"],.grid>.grid_item[span-xl$="-3"],.grid>.grid_item[span-xl="4"]{--grid-ce: 4 }.grid>.grid_item[span-xl$="+5"],.grid>.grid_item[span-xl$="-4"],.grid>.grid_item[span-xl="5"]{--grid-ce: 5 }.grid>.grid_item[span-xl$="+6"],.grid>.grid_item[span-xl$="-5"],.grid>.grid_item[span-xl="6"]{--grid-ce: 6 }.grid>.grid_item[span-xl$="+7"],.grid>.grid_item[span-xl$="-6"],.grid>.grid_item[span-xl="7"]{--grid-ce: 7 }.grid>.grid_item[span-xl$="+8"],.grid>.grid_item[span-xl$="-7"],.grid>.grid_item[span-xl="8"]{--grid-ce: 8 }.grid>.grid_item[span-xl$="+9"],.grid>.grid_item[span-xl$="-8"],.grid>.grid_item[span-xl="9"]{--grid-ce: 9 }.grid>.grid_item[span-xl$="+10"],.grid>.grid_item[span-xl$="-9"],.grid>.grid_item[span-xl="10"]{--grid-ce: 10 }.grid>.grid_item[span-xl$="+11"],.grid>.grid_item[span-xl$="-10"],.grid>.grid_item[span-xl="11"]{--grid-ce: 11 }.grid>.grid_item[span-xl$="+12"],.grid>.grid_item[span-xl$="-11"],.grid>.grid_item[span-xl="12"]{--grid-ce: 12 }.grid>.grid_item[span-xl$="+13"],.grid>.grid_item[span-xl$="-12"],.grid>.grid_item[span-xl="13"]{--grid-ce: 13 }.grid>.grid_item[span-xl$="+14"],.grid>.grid_item[span-xl$="-13"],.grid>.grid_item[span-xl="14"]{--grid-ce: 14 }.grid>.grid_item[span-xl$="+15"],.grid>.grid_item[span-xl$="-14"],.grid>.grid_item[span-xl="15"]{--grid-ce: 15 }.grid>.grid_item[span-xl$="+16"],.grid>.grid_item[span-xl$="-15"],.grid>.grid_item[span-xl="16"]{--grid-ce: 16 }.grid>.grid_item[span-xl$="+17"],.grid>.grid_item[span-xl$="-16"],.grid>.grid_item[span-xl="17"]{--grid-ce: 17 }.grid>.grid_item[span-xl$="+18"],.grid>.grid_item[span-xl$="-17"],.grid>.grid_item[span-xl="18"]{--grid-ce: 18 }.grid>.grid_item[span-xl$="+19"],.grid>.grid_item[span-xl$="-18"],.grid>.grid_item[span-xl="19"]{--grid-ce: 19 }.grid>.grid_item[span-xl$="+20"],.grid>.grid_item[span-xl$="-19"],.grid>.grid_item[span-xl="20"]{--grid-ce: 20 }.grid>.grid_item[span-xl$="+21"],.grid>.grid_item[span-xl$="-20"],.grid>.grid_item[span-xl="21"]{--grid-ce: 21 }.grid>.grid_item[span-xl$="+22"],.grid>.grid_item[span-xl$="-21"],.grid>.grid_item[span-xl="22"]{--grid-ce: 22 }.grid>.grid_item[span-xl$="+23"],.grid>.grid_item[span-xl$="-22"],.grid>.grid_item[span-xl="23"]{--grid-ce: 23 }.grid>.grid_item[span-xl$="+24"],.grid>.grid_item[span-xl$="-23"],.grid>.grid_item[span-xl="24"]{--grid-ce: 24 }.grid>.grid_item[span-xl$="-24"]{--grid-ce: 25 }.grid>.grid_item[span-xl]{grid-column-end:span var(--grid-ce)}.grid>.grid_item[span-xl*="+"],.grid>.grid_item[span-xl*="-"],.grid>.grid_item[span-xl*=".."]{grid-column-start:var(--grid-cs)}.grid>.grid_item[span-xl*="-"],.grid>.grid_item[span-xl*=".."]{grid-column-end:var(--grid-ce)}.grid>.grid_item[span-xl=row]{grid-column:1 / -1}}}@layer global{.layout{display:flex;flex-direction:column;width:100vw;min-height:100vh;.layout_content{flex:1}}.layout_content_main{container:main / inline-size}.layout-centered{.layout_content{display:grid;gap:var(--sm3);grid-template-columns:1fr minmax(0,var(--layout-content-width)) 1fr;margin-top:var(--lg1);margin-bottom:var(--sm1);@media(width>=768px){margin-top:var(--xl3);margin-bottom:var(--md3);gap:var(--md3)}}.layout_content_main{grid-column:2}}.layout-sidebar{.layout_content{@media(width>=768px){display:grid;grid-template-columns:var(--layout-aside-width) minmax(0,1fr)}}.layout_content_main{padding:var(--sm2);@media(width>=768px){grid-row:1;grid-column:2;padding:var(--lg1) var(--md2)}}.layout_content_aside{@media(width>=768px){grid-row:1;grid-column:1;padding:var(--lg1) var(--md3)}}}.layout-sidebar-end{.layout_content{@media(width>=768px){grid-template-columns:minmax(0,1fr) var(--layout-aside-width)}}.layout_content_main{@media(width>=768px){grid-column:1}}.layout_content_aside{@media(width>=768px){grid-column:2}}}.layout-docs{.layout_content{@media(width>=768px){display:grid;grid-template-columns:var(--layout-aside-width) minmax(0,1fr)}@media(width>=1024px){grid-template-columns:var(--layout-aside-width) minmax(0,var(--layout-content-width)) var(--layout-toc-width)}}.layout_content_main{padding:var(--sm2);@media(width>=768px){grid-row:1;grid-column:2;padding:var(--lg1) var(--md2)}}.layout_content_aside{display:none;@media(width>=768px){display:block;grid-row:1;grid-column:1;padding:var(--lg1) var(--md3)}}.layout_content_aside-toc{@media(width>=768px){display:none}@media(width>=1024px){display:block;grid-row:1;grid-column:3;padding:var(--lg1) var(--md3)}}}.layout-split{.layout_content{display:grid;@media(width>=768px){grid-template-columns:1fr 1fr}}}.layout-cover{min-height:100dvh;.layout_content{display:grid;place-items:center}}}@layer global{@scope(.prose)to (.not-prose){:is(p,ul,ol,blockquote,table):has(+:is(h1,h2,h3,h4)){margin-bottom:calc(var(--prose-spacing) * 2)}p,ul,ol,dl{margin-bottom:var(--prose-spacing);p,ul,ol,dl{margin-bottom:0}}ul,ol{ul,ol{margin-inline-start:0;padding-inline-start:var(--sm2)}li{margin-bottom:.5em;&::marker{color:light-dark(var(--base-300),var(--base-600))}}}ul{margin-inline-start:var(--sm2);list-style-type:"\2192  "}ol{margin-inline-start:var(--md2);list-style-type:decimal-leading-zero;li::marker{font-size:var(--text-sm)}}table{margin-top:var(--md1);margin-bottom:var(--md1)}}}@layer global{.wrap{display:grid;grid-template-columns:1fr var(--wrap-width) 1fr;>*,>astro-island>*,>astro-slot>*,>astro-static-slot>*{grid-column:2;padding-inline:var(--wrap-spacing);@media(width>=768px){padding-inline:var(--wrap-md-spacing)}@media(width>=1024px){padding-inline:var(--wrap-lg-spacing)}}}.wrap-sm{--wrap-width: var(--wrap-width-sm)}.wrap-md{--wrap-width: var(--wrap-width-md)}.wrap-lg{--wrap-width: var(--wrap-width-lg)}.wrap_content-fullBleed{grid-column:1 / -1;width:100%;object-fit:cover}}@layer helpers{.c-base-0{color:var(--base-0)!important}.bdc-base-0{border-color:var(--base-0)!important}.bgc-base-0{background-color:var(--base-0)!important}.c-base-50{color:var(--base-50)!important}.bdc-base-50{border-color:var(--base-50)!important}.bgc-base-50{background-color:var(--base-50)!important}.c-base-100{color:var(--base-100)!important}.bdc-base-100{border-color:var(--base-100)!important}.bgc-base-100{background-color:var(--base-100)!important}.c-base-200{color:var(--base-200)!important}.bdc-base-200{border-color:var(--base-200)!important}.bgc-base-200{background-color:var(--base-200)!important}.c-base-300{color:var(--base-300)!important}.bdc-base-300{border-color:var(--base-300)!important}.bgc-base-300{background-color:var(--base-300)!important}.c-base-400{color:var(--base-400)!important}.bdc-base-400{border-color:var(--base-400)!important}.bgc-base-400{background-color:var(--base-400)!important}.c-base-500{color:var(--base-500)!important}.bdc-base-500{border-color:var(--base-500)!important}.bgc-base-500{background-color:var(--base-500)!important}.c-base-600{color:var(--base-600)!important}.bdc-base-600{border-color:var(--base-600)!important}.bgc-base-600{background-color:var(--base-600)!important}.c-base-700{color:var(--base-700)!important}.bdc-base-700{border-color:var(--base-700)!important}.bgc-base-700{background-color:var(--base-700)!important}.c-base-800{color:var(--base-800)!important}.bdc-base-800{border-color:var(--base-800)!important}.bgc-base-800{background-color:var(--base-800)!important}.c-base-900{color:var(--base-900)!important}.bdc-base-900{border-color:var(--base-900)!important}.bgc-base-900{background-color:var(--base-900)!important}.c-base-950{color:var(--base-950)!important}.bdc-base-950{border-color:var(--base-950)!important}.bgc-base-950{background-color:var(--base-950)!important}.c-primary-50{color:var(--primary-50)!important}.bdc-primary-50{border-color:var(--primary-50)!important}.bgc-primary-50{background-color:var(--primary-50)!important}.c-primary-100{color:var(--primary-100)!important}.bdc-primary-100{border-color:var(--primary-100)!important}.bgc-primary-100{background-color:var(--primary-100)!important}.c-primary-200{color:var(--primary-200)!important}.bdc-primary-200{border-color:var(--primary-200)!important}.bgc-primary-200{background-color:var(--primary-200)!important}.c-primary-300{color:var(--primary-300)!important}.bdc-primary-300{border-color:var(--primary-300)!important}.bgc-primary-300{background-color:var(--primary-300)!important}.c-primary-400{color:var(--primary-400)!important}.bdc-primary-400{border-color:var(--primary-400)!important}.bgc-primary-400{background-color:var(--primary-400)!important}.c-primary-500{color:var(--primary-500)!important}.bdc-primary-500{border-color:var(--primary-500)!important}.bgc-primary-500{background-color:var(--primary-500)!important}.c-primary-600{color:var(--primary-600)!important}.bdc-primary-600{border-color:var(--primary-600)!important}.bgc-primary-600{background-color:var(--primary-600)!important}.c-primary-700{color:var(--primary-700)!important}.bdc-primary-700{border-color:var(--primary-700)!important}.bgc-primary-700{background-color:var(--primary-700)!important}.c-primary-800{color:var(--primary-800)!important}.bdc-primary-800{border-color:var(--primary-800)!important}.bgc-primary-800{background-color:var(--primary-800)!important}.c-primary-900{color:var(--primary-900)!important}.bdc-primary-900{border-color:var(--primary-900)!important}.bgc-primary-900{background-color:var(--primary-900)!important}.c-primary-950{color:var(--primary-950)!important}.bdc-primary-950{border-color:var(--primary-950)!important}.bgc-primary-950{background-color:var(--primary-950)!important}.c-yes-100{color:var(--yes-100)!important}.bdc-yes-100{border-color:var(--yes-100)!important}.bgc-yes-100{background-color:var(--yes-100)!important}.c-yes-200{color:var(--yes-200)!important}.bdc-yes-200{border-color:var(--yes-200)!important}.bgc-yes-200{background-color:var(--yes-200)!important}.c-yes-300{color:var(--yes-300)!important}.bdc-yes-300{border-color:var(--yes-300)!important}.bgc-yes-300{background-color:var(--yes-300)!important}.c-yes-400{color:var(--yes-400)!important}.bdc-yes-400{border-color:var(--yes-400)!important}.bgc-yes-400{background-color:var(--yes-400)!important}.c-yes-500{color:var(--yes-500)!important}.bdc-yes-500{border-color:var(--yes-500)!important}.bgc-yes-500{background-color:var(--yes-500)!important}.c-no-100{color:var(--no-100)!important}.bdc-no-100{border-color:var(--no-100)!important}.bgc-no-100{background-color:var(--no-100)!important}.c-no-200{color:var(--no-200)!important}.bdc-no-200{border-color:var(--no-200)!important}.bgc-no-200{background-color:var(--no-200)!important}.c-no-300{color:var(--no-300)!important}.bdc-no-300{border-color:var(--no-300)!important}.bgc-no-300{background-color:var(--no-300)!important}.c-no-400{color:var(--no-400)!important}.bdc-no-400{border-color:var(--no-400)!important}.bgc-no-400{background-color:var(--no-400)!important}.c-no-500{color:var(--no-500)!important}.bdc-no-500{border-color:var(--no-500)!important}.bgc-no-500{background-color:var(--no-500)!important}.c-maybe-100{color:var(--maybe-100)!important}.bdc-maybe-100{border-color:var(--maybe-100)!important}.bgc-maybe-100{background-color:var(--maybe-100)!important}.c-maybe-200{color:var(--maybe-200)!important}.bdc-maybe-200{border-color:var(--maybe-200)!important}.bgc-maybe-200{background-color:var(--maybe-200)!important}.c-maybe-300{color:var(--maybe-300)!important}.bdc-maybe-300{border-color:var(--maybe-300)!important}.bgc-maybe-300{background-color:var(--maybe-300)!important}.c-maybe-400{color:var(--maybe-400)!important}.bdc-maybe-400{border-color:var(--maybe-400)!important}.bgc-maybe-400{background-color:var(--maybe-400)!important}.c-maybe-500{color:var(--maybe-500)!important}.bdc-maybe-500{border-color:var(--maybe-500)!important}.bgc-maybe-500{background-color:var(--maybe-500)!important}}@layer helpers{body.dev{--baseline: 8;background-size:100% calc(var(--baseline) * 1px)!important;background-image:linear-gradient(to bottom,#0000 calc((var(--baseline) - 1) * 1px),#ff69b4 calc(var(--baseline) * 1px))!important}.dev-error{position:fixed!important;top:var(--md1)!important;left:var(--md1)!important;z-index:var(--z-top)!important;padding:var(--sm1)!important;font-size:1rem!important;color:var(--no-500)!important;background:var(--no-100)!important;border:1px solid var(--no-500)!important;border-radius:var(--radius-md)!important}}@layer helpers{.of-auto,.overflow-auto{overflow:auto!important}.of-hidden,.overflow-hidden{overflow:hidden!important}.of-clip,.overflow-clip{overflow:clip!important}.of-visible,.overflow-visible{overflow:visible!important}.of-scroll,.overflow-scroll{overflow:scroll!important}.of-x-auto,.overflow-x-auto{overflow-x:auto!important}.of-y-auto,.overflow-y-auto{overflow-y:auto!important}.of-x-hidden,.overflow-x-hidden{overflow-x:hidden!important}.of-y-hidden,.overflow-y-hidden{overflow-y:hidden!important}.of-x-clip,.overflow-x-clip{overflow-x:clip!important}.of-y-clip,.overflow-y-clip{overflow-y:clip!important}.of-x-visible,.overflow-x-visible{overflow-x:visible!important}.of-y-visible,.overflow-y-visible{overflow-y:visible!important}.of-x-scroll,.overflow-x-scroll{overflow-x:scroll!important}.of-y-scroll,.overflow-y-scroll{overflow-y:scroll!important}.position-static{position:static!important}.position-fixed{position:fixed!important}.position-absolute{position:absolute!important}.position-relative{position:relative!important}.position-sticky{position:sticky!important}.visibility-visible{visibility:visible!important}.visibility-hidden{visibility:hidden!important}.visibility-collapse{visibility:collapse!important}.z-auto{z-index:auto!important}.z-bottom{z-index:var(--z-bottom)!important}.z-0{z-index:var(--z-0)!important}.z-1{z-index:var(--z-1)!important}.z-2{z-index:var(--z-2)!important}.z-3{z-index:var(--z-3)!important}.z-4{z-index:var(--z-4)!important}.z-5{z-index:var(--z-5)!important}.z-top{z-index:var(--z-top)!important}}@layer helpers{.o-0{opacity:var(--o-0)!important}.o-1{opacity:var(--o-1)!important}.o-2{opacity:var(--o-2)!important}.o-3{opacity:var(--o-3)!important}.o-4{opacity:var(--o-4)!important}.o-5{opacity:var(--o-5)!important}}@layer helpers{.ar-square{aspect-ratio:var(--ar-square)!important}.ar-landscape{aspect-ratio:var(--ar-landscape)!important}.ar-portrait{aspect-ratio:var(--ar-portrait)!important}.ar-widescreen{aspect-ratio:var(--ar-widescreen)!important}.ar-golden{aspect-ratio:var(--ar-golden)!important}}@layer helpers{.w-0{width:0!important}.h-0{height:0!important}.m-0{margin:0!important}.mt-0{margin-top:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mr-0{margin-right:0!important}.mis-0{margin-inline-start:0!important}.mie-0{margin-inline-end:0!important}.p-0{padding:0!important}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.pis-0{padding-inline-start:0!important}.pie-0{padding-inline-end:0!important}.w-xs1{width:var(--xs1)!important}.h-xs1{height:var(--xs1)!important}.m-xs1{margin:var(--xs1)!important}.mt-xs1{margin-top:var(--xs1)!important}.mb-xs1{margin-bottom:var(--xs1)!important}.ml-xs1{margin-left:var(--xs1)!important}.mr-xs1{margin-right:var(--xs1)!important}.mis-xs1{margin-inline-start:var(--xs1)!important}.mie-xs1{margin-inline-end:var(--xs1)!important}.p-xs1{padding:var(--xs1)!important}.pt-xs1{padding-top:var(--xs1)!important}.pb-xs1{padding-bottom:var(--xs1)!important}.pl-xs1{padding-left:var(--xs1)!important}.pr-xs1{padding-right:var(--xs1)!important}.pis-xs1{padding-inline-start:var(--xs1)!important}.pie-xs1{padding-inline-end:var(--xs1)!important}.w-xs2{width:var(--xs2)!important}.h-xs2{height:var(--xs2)!important}.m-xs2{margin:var(--xs2)!important}.mt-xs2{margin-top:var(--xs2)!important}.mb-xs2{margin-bottom:var(--xs2)!important}.ml-xs2{margin-left:var(--xs2)!important}.mr-xs2{margin-right:var(--xs2)!important}.mis-xs2{margin-inline-start:var(--xs2)!important}.mie-xs2{margin-inline-end:var(--xs2)!important}.p-xs2{padding:var(--xs2)!important}.pt-xs2{padding-top:var(--xs2)!important}.pb-xs2{padding-bottom:var(--xs2)!important}.pl-xs2{padding-left:var(--xs2)!important}.pr-xs2{padding-right:var(--xs2)!important}.pis-xs2{padding-inline-start:var(--xs2)!important}.pie-xs2{padding-inline-end:var(--xs2)!important}.w-xs3{width:var(--xs3)!important}.h-xs3{height:var(--xs3)!important}.m-xs3{margin:var(--xs3)!important}.mt-xs3{margin-top:var(--xs3)!important}.mb-xs3{margin-bottom:var(--xs3)!important}.ml-xs3{margin-left:var(--xs3)!important}.mr-xs3{margin-right:var(--xs3)!important}.mis-xs3{margin-inline-start:var(--xs3)!important}.mie-xs3{margin-inline-end:var(--xs3)!important}.p-xs3{padding:var(--xs3)!important}.pt-xs3{padding-top:var(--xs3)!important}.pb-xs3{padding-bottom:var(--xs3)!important}.pl-xs3{padding-left:var(--xs3)!important}.pr-xs3{padding-right:var(--xs3)!important}.pis-xs3{padding-inline-start:var(--xs3)!important}.pie-xs3{padding-inline-end:var(--xs3)!important}.w-sm1{width:var(--sm1)!important}.h-sm1{height:var(--sm1)!important}.m-sm1{margin:var(--sm1)!important}.mt-sm1{margin-top:var(--sm1)!important}.mb-sm1{margin-bottom:var(--sm1)!important}.ml-sm1{margin-left:var(--sm1)!important}.mr-sm1{margin-right:var(--sm1)!important}.mis-sm1{margin-inline-start:var(--sm1)!important}.mie-sm1{margin-inline-end:var(--sm1)!important}.p-sm1{padding:var(--sm1)!important}.pt-sm1{padding-top:var(--sm1)!important}.pb-sm1{padding-bottom:var(--sm1)!important}.pl-sm1{padding-left:var(--sm1)!important}.pr-sm1{padding-right:var(--sm1)!important}.pis-sm1{padding-inline-start:var(--sm1)!important}.pie-sm1{padding-inline-end:var(--sm1)!important}.w-sm2{width:var(--sm2)!important}.h-sm2{height:var(--sm2)!important}.m-sm2{margin:var(--sm2)!important}.mt-sm2{margin-top:var(--sm2)!important}.mb-sm2{margin-bottom:var(--sm2)!important}.ml-sm2{margin-left:var(--sm2)!important}.mr-sm2{margin-right:var(--sm2)!important}.mis-sm2{margin-inline-start:var(--sm2)!important}.mie-sm2{margin-inline-end:var(--sm2)!important}.p-sm2{padding:var(--sm2)!important}.pt-sm2{padding-top:var(--sm2)!important}.pb-sm2{padding-bottom:var(--sm2)!important}.pl-sm2{padding-left:var(--sm2)!important}.pr-sm2{padding-right:var(--sm2)!important}.pis-sm2{padding-inline-start:var(--sm2)!important}.pie-sm2{padding-inline-end:var(--sm2)!important}.w-sm3{width:var(--sm3)!important}.h-sm3{height:var(--sm3)!important}.m-sm3{margin:var(--sm3)!important}.mt-sm3{margin-top:var(--sm3)!important}.mb-sm3{margin-bottom:var(--sm3)!important}.ml-sm3{margin-left:var(--sm3)!important}.mr-sm3{margin-right:var(--sm3)!important}.mis-sm3{margin-inline-start:var(--sm3)!important}.mie-sm3{margin-inline-end:var(--sm3)!important}.p-sm3{padding:var(--sm3)!important}.pt-sm3{padding-top:var(--sm3)!important}.pb-sm3{padding-bottom:var(--sm3)!important}.pl-sm3{padding-left:var(--sm3)!important}.pr-sm3{padding-right:var(--sm3)!important}.pis-sm3{padding-inline-start:var(--sm3)!important}.pie-sm3{padding-inline-end:var(--sm3)!important}.w-md1{width:var(--md1)!important}.h-md1{height:var(--md1)!important}.m-md1{margin:var(--md1)!important}.mt-md1{margin-top:var(--md1)!important}.mb-md1{margin-bottom:var(--md1)!important}.ml-md1{margin-left:var(--md1)!important}.mr-md1{margin-right:var(--md1)!important}.mis-md1{margin-inline-start:var(--md1)!important}.mie-md1{margin-inline-end:var(--md1)!important}.p-md1{padding:var(--md1)!important}.pt-md1{padding-top:var(--md1)!important}.pb-md1{padding-bottom:var(--md1)!important}.pl-md1{padding-left:var(--md1)!important}.pr-md1{padding-right:var(--md1)!important}.pis-md1{padding-inline-start:var(--md1)!important}.pie-md1{padding-inline-end:var(--md1)!important}.w-md2{width:var(--md2)!important}.h-md2{height:var(--md2)!important}.m-md2{margin:var(--md2)!important}.mt-md2{margin-top:var(--md2)!important}.mb-md2{margin-bottom:var(--md2)!important}.ml-md2{margin-left:var(--md2)!important}.mr-md2{margin-right:var(--md2)!important}.mis-md2{margin-inline-start:var(--md2)!important}.mie-md2{margin-inline-end:var(--md2)!important}.p-md2{padding:var(--md2)!important}.pt-md2{padding-top:var(--md2)!important}.pb-md2{padding-bottom:var(--md2)!important}.pl-md2{padding-left:var(--md2)!important}.pr-md2{padding-right:var(--md2)!important}.pis-md2{padding-inline-start:var(--md2)!important}.pie-md2{padding-inline-end:var(--md2)!important}.w-md3{width:var(--md3)!important}.h-md3{height:var(--md3)!important}.m-md3{margin:var(--md3)!important}.mt-md3{margin-top:var(--md3)!important}.mb-md3{margin-bottom:var(--md3)!important}.ml-md3{margin-left:var(--md3)!important}.mr-md3{margin-right:var(--md3)!important}.mis-md3{margin-inline-start:var(--md3)!important}.mie-md3{margin-inline-end:var(--md3)!important}.p-md3{padding:var(--md3)!important}.pt-md3{padding-top:var(--md3)!important}.pb-md3{padding-bottom:var(--md3)!important}.pl-md3{padding-left:var(--md3)!important}.pr-md3{padding-right:var(--md3)!important}.pis-md3{padding-inline-start:var(--md3)!important}.pie-md3{padding-inline-end:var(--md3)!important}.w-lg1{width:var(--lg1)!important}.h-lg1{height:var(--lg1)!important}.m-lg1{margin:var(--lg1)!important}.mt-lg1{margin-top:var(--lg1)!important}.mb-lg1{margin-bottom:var(--lg1)!important}.ml-lg1{margin-left:var(--lg1)!important}.mr-lg1{margin-right:var(--lg1)!important}.mis-lg1{margin-inline-start:var(--lg1)!important}.mie-lg1{margin-inline-end:var(--lg1)!important}.p-lg1{padding:var(--lg1)!important}.pt-lg1{padding-top:var(--lg1)!important}.pb-lg1{padding-bottom:var(--lg1)!important}.pl-lg1{padding-left:var(--lg1)!important}.pr-lg1{padding-right:var(--lg1)!important}.pis-lg1{padding-inline-start:var(--lg1)!important}.pie-lg1{padding-inline-end:var(--lg1)!important}.w-lg2{width:var(--lg2)!important}.h-lg2{height:var(--lg2)!important}.m-lg2{margin:var(--lg2)!important}.mt-lg2{margin-top:var(--lg2)!important}.mb-lg2{margin-bottom:var(--lg2)!important}.ml-lg2{margin-left:var(--lg2)!important}.mr-lg2{margin-right:var(--lg2)!important}.mis-lg2{margin-inline-start:var(--lg2)!important}.mie-lg2{margin-inline-end:var(--lg2)!important}.p-lg2{padding:var(--lg2)!important}.pt-lg2{padding-top:var(--lg2)!important}.pb-lg2{padding-bottom:var(--lg2)!important}.pl-lg2{padding-left:var(--lg2)!important}.pr-lg2{padding-right:var(--lg2)!important}.pis-lg2{padding-inline-start:var(--lg2)!important}.pie-lg2{padding-inline-end:var(--lg2)!important}.w-lg3{width:var(--lg3)!important}.h-lg3{height:var(--lg3)!important}.m-lg3{margin:var(--lg3)!important}.mt-lg3{margin-top:var(--lg3)!important}.mb-lg3{margin-bottom:var(--lg3)!important}.ml-lg3{margin-left:var(--lg3)!important}.mr-lg3{margin-right:var(--lg3)!important}.mis-lg3{margin-inline-start:var(--lg3)!important}.mie-lg3{margin-inline-end:var(--lg3)!important}.p-lg3{padding:var(--lg3)!important}.pt-lg3{padding-top:var(--lg3)!important}.pb-lg3{padding-bottom:var(--lg3)!important}.pl-lg3{padding-left:var(--lg3)!important}.pr-lg3{padding-right:var(--lg3)!important}.pis-lg3{padding-inline-start:var(--lg3)!important}.pie-lg3{padding-inline-end:var(--lg3)!important}.w-xl1{width:var(--xl1)!important}.h-xl1{height:var(--xl1)!important}.m-xl1{margin:var(--xl1)!important}.mt-xl1{margin-top:var(--xl1)!important}.mb-xl1{margin-bottom:var(--xl1)!important}.ml-xl1{margin-left:var(--xl1)!important}.mr-xl1{margin-right:var(--xl1)!important}.mis-xl1{margin-inline-start:var(--xl1)!important}.mie-xl1{margin-inline-end:var(--xl1)!important}.p-xl1{padding:var(--xl1)!important}.pt-xl1{padding-top:var(--xl1)!important}.pb-xl1{padding-bottom:var(--xl1)!important}.pl-xl1{padding-left:var(--xl1)!important}.pr-xl1{padding-right:var(--xl1)!important}.pis-xl1{padding-inline-start:var(--xl1)!important}.pie-xl1{padding-inline-end:var(--xl1)!important}.w-xl2{width:var(--xl2)!important}.h-xl2{height:var(--xl2)!important}.m-xl2{margin:var(--xl2)!important}.mt-xl2{margin-top:var(--xl2)!important}.mb-xl2{margin-bottom:var(--xl2)!important}.ml-xl2{margin-left:var(--xl2)!important}.mr-xl2{margin-right:var(--xl2)!important}.mis-xl2{margin-inline-start:var(--xl2)!important}.mie-xl2{margin-inline-end:var(--xl2)!important}.p-xl2{padding:var(--xl2)!important}.pt-xl2{padding-top:var(--xl2)!important}.pb-xl2{padding-bottom:var(--xl2)!important}.pl-xl2{padding-left:var(--xl2)!important}.pr-xl2{padding-right:var(--xl2)!important}.pis-xl2{padding-inline-start:var(--xl2)!important}.pie-xl2{padding-inline-end:var(--xl2)!important}.w-xl3{width:var(--xl3)!important}.h-xl3{height:var(--xl3)!important}.m-xl3{margin:var(--xl3)!important}.mt-xl3{margin-top:var(--xl3)!important}.mb-xl3{margin-bottom:var(--xl3)!important}.ml-xl3{margin-left:var(--xl3)!important}.mr-xl3{margin-right:var(--xl3)!important}.mis-xl3{margin-inline-start:var(--xl3)!important}.mie-xl3{margin-inline-end:var(--xl3)!important}.p-xl3{padding:var(--xl3)!important}.pt-xl3{padding-top:var(--xl3)!important}.pb-xl3{padding-bottom:var(--xl3)!important}.pl-xl3{padding-left:var(--xl3)!important}.pr-xl3{padding-right:var(--xl3)!important}.pis-xl3{padding-inline-start:var(--xl3)!important}.pie-xl3{padding-inline-end:var(--xl3)!important}.w-xxl1{width:var(--xxl1)!important}.h-xxl1{height:var(--xxl1)!important}.m-xxl1{margin:var(--xxl1)!important}.mt-xxl1{margin-top:var(--xxl1)!important}.mb-xxl1{margin-bottom:var(--xxl1)!important}.ml-xxl1{margin-left:var(--xxl1)!important}.mr-xxl1{margin-right:var(--xxl1)!important}.mis-xxl1{margin-inline-start:var(--xxl1)!important}.mie-xxl1{margin-inline-end:var(--xxl1)!important}.p-xxl1{padding:var(--xxl1)!important}.pt-xxl1{padding-top:var(--xxl1)!important}.pb-xxl1{padding-bottom:var(--xxl1)!important}.pl-xxl1{padding-left:var(--xxl1)!important}.pr-xxl1{padding-right:var(--xxl1)!important}.pis-xxl1{padding-inline-start:var(--xxl1)!important}.pie-xxl1{padding-inline-end:var(--xxl1)!important}.w-xxl2{width:var(--xxl2)!important}.h-xxl2{height:var(--xxl2)!important}.m-xxl2{margin:var(--xxl2)!important}.mt-xxl2{margin-top:var(--xxl2)!important}.mb-xxl2{margin-bottom:var(--xxl2)!important}.ml-xxl2{margin-left:var(--xxl2)!important}.mr-xxl2{margin-right:var(--xxl2)!important}.mis-xxl2{margin-inline-start:var(--xxl2)!important}.mie-xxl2{margin-inline-end:var(--xxl2)!important}.p-xxl2{padding:var(--xxl2)!important}.pt-xxl2{padding-top:var(--xxl2)!important}.pb-xxl2{padding-bottom:var(--xxl2)!important}.pl-xxl2{padding-left:var(--xxl2)!important}.pr-xxl2{padding-right:var(--xxl2)!important}.pis-xxl2{padding-inline-start:var(--xxl2)!important}.pie-xxl2{padding-inline-end:var(--xxl2)!important}.w-xxl3{width:var(--xxl3)!important}.h-xxl3{height:var(--xxl3)!important}.m-xxl3{margin:var(--xxl3)!important}.mt-xxl3{margin-top:var(--xxl3)!important}.mb-xxl3{margin-bottom:var(--xxl3)!important}.ml-xxl3{margin-left:var(--xxl3)!important}.mr-xxl3{margin-right:var(--xxl3)!important}.mis-xxl3{margin-inline-start:var(--xxl3)!important}.mie-xxl3{margin-inline-end:var(--xxl3)!important}.p-xxl3{padding:var(--xxl3)!important}.pt-xxl3{padding-top:var(--xxl3)!important}.pb-xxl3{padding-bottom:var(--xxl3)!important}.pl-xxl3{padding-left:var(--xxl3)!important}.pr-xxl3{padding-right:var(--xxl3)!important}.pis-xxl3{padding-inline-start:var(--xxl3)!important}.pie-xxl3{padding-inline-end:var(--xxl3)!important}.w-mega1{width:var(--mega1)!important}.h-mega1{height:var(--mega1)!important}.m-mega1{margin:var(--mega1)!important}.mt-mega1{margin-top:var(--mega1)!important}.mb-mega1{margin-bottom:var(--mega1)!important}.ml-mega1{margin-left:var(--mega1)!important}.mr-mega1{margin-right:var(--mega1)!important}.mis-mega1{margin-inline-start:var(--mega1)!important}.mie-mega1{margin-inline-end:var(--mega1)!important}.p-mega1{padding:var(--mega1)!important}.pt-mega1{padding-top:var(--mega1)!important}.pb-mega1{padding-bottom:var(--mega1)!important}.pl-mega1{padding-left:var(--mega1)!important}.pr-mega1{padding-right:var(--mega1)!important}.pis-mega1{padding-inline-start:var(--mega1)!important}.pie-mega1{padding-inline-end:var(--mega1)!important}.w-mega2{width:var(--mega2)!important}.h-mega2{height:var(--mega2)!important}.m-mega2{margin:var(--mega2)!important}.mt-mega2{margin-top:var(--mega2)!important}.mb-mega2{margin-bottom:var(--mega2)!important}.ml-mega2{margin-left:var(--mega2)!important}.mr-mega2{margin-right:var(--mega2)!important}.mis-mega2{margin-inline-start:var(--mega2)!important}.mie-mega2{margin-inline-end:var(--mega2)!important}.p-mega2{padding:var(--mega2)!important}.pt-mega2{padding-top:var(--mega2)!important}.pb-mega2{padding-bottom:var(--mega2)!important}.pl-mega2{padding-left:var(--mega2)!important}.pr-mega2{padding-right:var(--mega2)!important}.pis-mega2{padding-inline-start:var(--mega2)!important}.pie-mega2{padding-inline-end:var(--mega2)!important}.w-mega3{width:var(--mega3)!important}.h-mega3{height:var(--mega3)!important}.m-mega3{margin:var(--mega3)!important}.mt-mega3{margin-top:var(--mega3)!important}.mb-mega3{margin-bottom:var(--mega3)!important}.ml-mega3{margin-left:var(--mega3)!important}.mr-mega3{margin-right:var(--mega3)!important}.mis-mega3{margin-inline-start:var(--mega3)!important}.mie-mega3{margin-inline-end:var(--mega3)!important}.p-mega3{padding:var(--mega3)!important}.pt-mega3{padding-top:var(--mega3)!important}.pb-mega3{padding-bottom:var(--mega3)!important}.pl-mega3{padding-left:var(--mega3)!important}.pr-mega3{padding-right:var(--mega3)!important}.pis-mega3{padding-inline-start:var(--mega3)!important}.pie-mega3{padding-inline-end:var(--mega3)!important}.w-giga1{width:var(--giga1)!important}.h-giga1{height:var(--giga1)!important}.m-giga1{margin:var(--giga1)!important}.mt-giga1{margin-top:var(--giga1)!important}.mb-giga1{margin-bottom:var(--giga1)!important}.ml-giga1{margin-left:var(--giga1)!important}.mr-giga1{margin-right:var(--giga1)!important}.mis-giga1{margin-inline-start:var(--giga1)!important}.mie-giga1{margin-inline-end:var(--giga1)!important}.p-giga1{padding:var(--giga1)!important}.pt-giga1{padding-top:var(--giga1)!important}.pb-giga1{padding-bottom:var(--giga1)!important}.pl-giga1{padding-left:var(--giga1)!important}.pr-giga1{padding-right:var(--giga1)!important}.pis-giga1{padding-inline-start:var(--giga1)!important}.pie-giga1{padding-inline-end:var(--giga1)!important}.w-giga2{width:var(--giga2)!important}.h-giga2{height:var(--giga2)!important}.m-giga2{margin:var(--giga2)!important}.mt-giga2{margin-top:var(--giga2)!important}.mb-giga2{margin-bottom:var(--giga2)!important}.ml-giga2{margin-left:var(--giga2)!important}.mr-giga2{margin-right:var(--giga2)!important}.mis-giga2{margin-inline-start:var(--giga2)!important}.mie-giga2{margin-inline-end:var(--giga2)!important}.p-giga2{padding:var(--giga2)!important}.pt-giga2{padding-top:var(--giga2)!important}.pb-giga2{padding-bottom:var(--giga2)!important}.pl-giga2{padding-left:var(--giga2)!important}.pr-giga2{padding-right:var(--giga2)!important}.pis-giga2{padding-inline-start:var(--giga2)!important}.pie-giga2{padding-inline-end:var(--giga2)!important}.w-giga3{width:var(--giga3)!important}.h-giga3{height:var(--giga3)!important}.m-giga3{margin:var(--giga3)!important}.mt-giga3{margin-top:var(--giga3)!important}.mb-giga3{margin-bottom:var(--giga3)!important}.ml-giga3{margin-left:var(--giga3)!important}.mr-giga3{margin-right:var(--giga3)!important}.mis-giga3{margin-inline-start:var(--giga3)!important}.mie-giga3{margin-inline-end:var(--giga3)!important}.p-giga3{padding:var(--giga3)!important}.pt-giga3{padding-top:var(--giga3)!important}.pb-giga3{padding-bottom:var(--giga3)!important}.pl-giga3{padding-left:var(--giga3)!important}.pr-giga3{padding-right:var(--giga3)!important}.pis-giga3{padding-inline-start:var(--giga3)!important}.pie-giga3{padding-inline-end:var(--giga3)!important}.w-tera1{width:var(--tera1)!important}.h-tera1{height:var(--tera1)!important}.m-tera1{margin:var(--tera1)!important}.mt-tera1{margin-top:var(--tera1)!important}.mb-tera1{margin-bottom:var(--tera1)!important}.ml-tera1{margin-left:var(--tera1)!important}.mr-tera1{margin-right:var(--tera1)!important}.mis-tera1{margin-inline-start:var(--tera1)!important}.mie-tera1{margin-inline-end:var(--tera1)!important}.p-tera1{padding:var(--tera1)!important}.pt-tera1{padding-top:var(--tera1)!important}.pb-tera1{padding-bottom:var(--tera1)!important}.pl-tera1{padding-left:var(--tera1)!important}.pr-tera1{padding-right:var(--tera1)!important}.pis-tera1{padding-inline-start:var(--tera1)!important}.pie-tera1{padding-inline-end:var(--tera1)!important}.w-tera2{width:var(--tera2)!important}.h-tera2{height:var(--tera2)!important}.m-tera2{margin:var(--tera2)!important}.mt-tera2{margin-top:var(--tera2)!important}.mb-tera2{margin-bottom:var(--tera2)!important}.ml-tera2{margin-left:var(--tera2)!important}.mr-tera2{margin-right:var(--tera2)!important}.mis-tera2{margin-inline-start:var(--tera2)!important}.mie-tera2{margin-inline-end:var(--tera2)!important}.p-tera2{padding:var(--tera2)!important}.pt-tera2{padding-top:var(--tera2)!important}.pb-tera2{padding-bottom:var(--tera2)!important}.pl-tera2{padding-left:var(--tera2)!important}.pr-tera2{padding-right:var(--tera2)!important}.pis-tera2{padding-inline-start:var(--tera2)!important}.pie-tera2{padding-inline-end:var(--tera2)!important}.w-tera3{width:var(--tera3)!important}.h-tera3{height:var(--tera3)!important}.m-tera3{margin:var(--tera3)!important}.mt-tera3{margin-top:var(--tera3)!important}.mb-tera3{margin-bottom:var(--tera3)!important}.ml-tera3{margin-left:var(--tera3)!important}.mr-tera3{margin-right:var(--tera3)!important}.mis-tera3{margin-inline-start:var(--tera3)!important}.mie-tera3{margin-inline-end:var(--tera3)!important}.p-tera3{padding:var(--tera3)!important}.pt-tera3{padding-top:var(--tera3)!important}.pb-tera3{padding-bottom:var(--tera3)!important}.pl-tera3{padding-left:var(--tera3)!important}.pr-tera3{padding-right:var(--tera3)!important}.pis-tera3{padding-inline-start:var(--tera3)!important}.pie-tera3{padding-inline-end:var(--tera3)!important}}@layer helpers{.font-text{font-family:var(--text)!important}.font-display{font-family:var(--display)!important}.font-mono{font-family:var(--mono)!important}.font-italic{font-style:italic!important}.font-normal{font-style:normal!important}.font-extra-light{font-weight:var(--extra-light)!important}.font-light{font-weight:var(--light)!important}.font-book{font-weight:var(--book)!important}.font-semi-bold{font-weight:var(--semi-bold)!important}.font-bold{font-weight:var(--bold)!important}.font-black{font-weight:var(--black)!important}.text-xs{font-size:var(--text-xs)!important}.text-sm{font-size:var(--text-sm)!important}.text-md{font-size:var(--text-md)!important}.text-lg{font-size:var(--text-lg)!important}.text-xl{font-size:var(--text-xl)!important}.display-sm{font-size:var(--display-sm)!important}.display-md{font-size:var(--display-md)!important}.display-lg{font-size:var(--display-lg)!important}.display-xl{font-size:var(--display-xl)!important}.display-mega{font-size:var(--display-mega)!important}.display-giga{font-size:var(--display-giga)!important}.tracking-sm{letter-spacing:var(--tracking-sm)!important}.tracking-md{letter-spacing:var(--tracking-md)!important}.tracking-lg{letter-spacing:var(--tracking-lg)!important}.tracking-xl{letter-spacing:var(--tracking-xl)!important}.tracking-xxl{letter-spacing:var(--tracking-xxl)!important}.leading-xs{line-height:var(--leading-xs)!important}.leading-sm{line-height:var(--leading-sm)!important}.leading-md{line-height:var(--leading-md)!important}.leading-lg{line-height:var(--leading-lg)!important}.leading-xl{line-height:var(--leading-xl)!important}.leading-xxl{line-height:var(--leading-xxl)!important}.text-left{text-align:left!important}.text-center{text-align:center!important}.text-right{text-align:right!important}.text-justify{text-align:justify!important}.text-start{text-align:start!important}.text-end{text-align:end!important}.text-uppercase{text-transform:uppercase!important}.text-lowercase{text-transform:lowercase!important}.text-capitalize{text-transform:capitalize!important}}@layer theme.default{:root{--xs1: 4px;--xs2: 8px;--xs3: 12px;--sm1: 16px;--sm2: 20px;--sm3: 24px;--md1: 28px;--md2: 32px;--md3: 36px;--lg1: 40px;--lg2: 44px;--lg3: 48px;--xl1: 56px;--xl2: 64px;--xl3: 80px;--xxl1: 96px;--xxl2: 112px;--xxl3: 128px;--mega1: 160px;--mega2: 192px;--mega3: 224px;--giga1: 256px;--giga2: 288px;--giga3: 320px;--tera1: 384px;--tera2: 480px;--tera3: 520px;--ar-square: 1;--ar-landscape: 4/3;--ar-portrait: 3/4;--ar-widescreen: 16/9;--ar-golden: 1.618/1;--display: Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, ui-sans-serif, sans-serif;--text: ui-sans-serif, system-ui, sans-serif;--mono: Dank Mono, Inconsolata, Fira Mono, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, ui-monospace, monospace;--text-xs: .694rem;--text-sm: .833rem;--text-md: 1rem;--text-lg: 1.2rem;--text-xl: 1.44rem;--display-sm: 1.728rem;--display-md: 2.074rem;--display-lg: 2.488rem;--display-xl: 2.986rem;--display-mega: 3.583rem;--display-giga: 4.299rem;--extra-light: 200;--light: 300;--book: 400;--semi-bold: 600;--bold: 700;--black: 900;--tracking-sm: -.05em;--tracking-md: .025em;--tracking-lg: .05em;--tracking-xl: .075em;--tracking-xxl: .15em;--leading-xs: 1;--leading-sm: 1.15;--leading-md: 1.375;--leading-lg: 1.5;--leading-xl: 1.75;--leading-xxl: 2;--base-0: #fff;--base-50: #f6f7f9;--base-100: #edeef1;--base-200: #d6dbe1;--base-300: #b2bbc7;--base-400: #8897a8;--base-500: #697a8e;--base-600: #546375;--base-700: #4a5666;--base-800: #3c4550;--base-900: #353c45;--base-950: #23282e;--primary-50: #f0f9ff;--primary-100: #e0f2fe;--primary-200: #bae6fd;--primary-300: #7dd3fc;--primary-400: #38bdf8;--primary-500: #0ea5e9;--primary-600: #0284c7;--primary-700: #0369a1;--primary-800: #075985;--primary-900: #0c4a6e;--primary-950: #082f49;--yes-100: #d5f6e8;--yes-200: #afebd4;--yes-300: #7adbbd;--yes-400: #46c4a0;--yes-500: #13886d;--no-100: #ffe4e6;--no-200: #fecdd3;--no-300: #fda4af;--no-400: #fb7185;--no-500: #e11d48;--maybe-100: #fff7d6;--maybe-200: #fff0b3;--maybe-300: #ffd64a;--maybe-400: #ffc220;--maybe-500: #f9a007;--highlight-500: #ffee00;--border-sm: 1px;--border-md: 2px;--border-lg: 4px;--border-xl: 8px;--border-xxl: 12px;--radius-sm: 3px;--radius-md: 5px;--radius-lg: 8px;--radius-xl: 12px;--radius-xxl: 16px;--radius-round: 1e5px;--shadow-sm: 0 1px 3px 0 var(--ui-shadow-color), 0 1px 2px -1px var(--ui-shadow-color);--shadow-md: 0 4px 6px -1px var(--ui-shadow-color), 0 2px 4px -2px var(--ui-shadow-color);--shadow-lg: 0 8px 13px -3px var(--ui-shadow-color), 0 4px 6px -4px var(--ui-shadow-color);--shadow-xl: 0 20px 20px -5px var(--ui-shadow-color), 0 8px 10px -6px var(--ui-shadow-color);--shadow-xxl: 0px 11px 8px -6px var(--ui-shadow-color), 0 10px 15px 2px var(--ui-shadow-color);--o-0: 0;--o-1: .2;--o-2: .4;--o-3: .6;--o-4: .8;--o-5: 1;--z-bottom: -1000000000;--z-0: 0;--z-1: 10;--z-2: 20;--z-3: 30;--z-4: 40;--z-5: 50;--z-top: 1000000000;--transition: .22s ease-in-out;--transition-fast: .1s ease-in-out}}@layer theme.default{:root{color-scheme:light dark;--ui-border-color: light-dark(var(--base-200), var(--base-500));--ui-shadow-color: light-dark(rgb(0 0 0 / .1), rgb(0 0 0 / .6));--focus-ring-color: light-dark(var(--primary-500), var(--primary-400));--focus-ring-width: 2px;--focus-ring-offset: 2px}:root.theme-light{color-scheme:light}:root.theme-dark{color-scheme:dark}:root{accent-color:var(--primary-500);--body-background-color: light-dark(var(--base-0), var(--base-950));--body-line-height: var(--leading-lg);--input-height: var(--md3);--input-padding: var(--xs3);--input-border-width: var(--border-sm);--input-border-color: var(--ui-border-color);--input-border-radius: var(--radius-md);--input-border-color-invalid: light-dark(var(--no-500), var(--no-400));--label-spacing: var(--xs1);--fieldset-padding: var(--sm3);--fieldset-border-width: var(--border-sm);--fieldset-border-color: var(--ui-border-color);--fieldset-border-radius: var(--radius-lg);--meter-height: var(--sm1);--meter-border-radius: var(--radius-md);--meter-track-color: var(--primary-100);--meter-low-color: var(--no-400);--meter-medium-color: var(--maybe-400);--meter-high-color: var(--yes-400);--progress-height: var(--sm1);--progress-color: var(--primary-500);--progress-track-color: var(--primary-100);--progress-border-radius: var(--radius-md);--select-icon-size: var(--sm3);--select-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");--dialog-min-width: var(--tera1);--dialog-max-width: var(--tera3);--dialog-padding: var(--lg1) var(--md1);--dialog-border-width: var(--border-sm);--dialog-border-color: light-dark(var(--base-200), var(--base-800));--dialog-background-color: light-dark(var(--base-50), var(--base-900));--dialog-border-radius: var(--radius-lg);--dialog-backdrop-color: var(--base-950);--dialog-backdrop-opacity: var(--o-4);--details-padding: var(--sm1);--details-spacing: var(--xs3);--details-border-width: var(--border-sm);--details-border-color: light-dark(var(--base-200), var(--base-800));--details-background-color: light-dark(var(--base-50), var(--base-900));--details-border-radius: var(--radius-lg);--details-icon-size: var(--sm3);--details-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");--table-padding: var(--xs2) var(--sm1);--table-border-width: var(--border-sm);--table-border-color: light-dark(var(--base-100), var(--base-700));--table-border-radius: var(--radius-md);--table-background-color: none;--table-caption-spacing: var(--xs3);--figcaption-spacing: var(--xs2);--heading-font: var(--display);--heading-weight: var(--black);--heading-letter-spacing: normal;--heading-font-size-h1: clamp( var(--display-md), 1.269rem + 2.682vw, var(--display-xl) );--heading-font-size-h2: clamp( var(--display-sm), 1.057rem + 2.235vw, var(--display-lg) );--heading-font-size-h3: clamp( var(--text-xl), .881rem + 1.865vw, var(--display-md) );--heading-font-size-h4: clamp( var(--text-lg), .734rem + 1.553vw, var(--display-sm) );--heading-font-size-h5: clamp( var(--text-lg), .988rem + .706vw, var(--text-xl) );--heading-font-size-h6: clamp( var(--text-md), .824rem + .588vw, var(--text-lg) );--heading-line-height: var(--leading-sm);--heading-line-height-h1: var(--heading-line-height);--heading-line-height-h2: var(--heading-line-height);--heading-line-height-h3: var(--heading-line-height);--heading-line-height-h4: var(--leading-md);--heading-line-height-h5: var(--leading-md);--heading-line-height-h6: var(--leading-md);--heading-spacing-h1: .4em;--heading-spacing-h2: .4em;--heading-spacing-h3: .4em;--heading-spacing-h4: .4em;--heading-spacing-h5: .4em;--heading-spacing-h6: .4em;--heading-spacing-consecutive: .3em;--text-color: light-dark(var(--base-950), var(--base-200));--link-font-weight: var(--semi-bold);--link-color: light-dark(var(--primary-600), var(--primary-400));--link-color-hover: var(--primary-500);--text-code-color: light-dark(var(--primary-600), var(--primary-400));--text-code-background-color: light-dark( var(--primary-100), var(--primary-900) );--text-code-muted-color: light-dark(var(--base-500), var(--base-300));--pre-border-radius: var(--radius-md);--pre-font-size: .9rem;--blockquote-padding-block: var(--sm1);--blockquote-padding-inline: var(--md1) var(--sm3);--blockquote-background-color: light-dark( var(--primary-50), var(--primary-900) );--blockquote-border-radius: var(--radius-md);--blockquote-accent-width: var(--xs2);--blockquote-accent-color: linear-gradient( var(--primary-800), var(--primary-500) );--hr-content: "";--ins-color: var(--base-950);--ins-background-color: var(--yes-200);--marker-color: var(--highlight-500);--selection-color: light-dark(var(--base-950), var(--base-0));--selection-background-color: light-dark( var(--primary-200), var(--primary-700) )}:root{--grid-column-gap: var(--sm1);--grid-row-gap: var(--sm1);@media(width>=768px){--grid-column-gap: var(--sm3);--grid-row-gap: var(--sm3)}--wrap-spacing: var(--sm1);--wrap-md-spacing: var(--sm3);--wrap-lg-spacing: 0;--wrap-width-sm: minmax(0, 55ch);--wrap-width-md: minmax(0, 70ch);--wrap-width-lg: minmax(0, 900px);--wrap-width: var(--wrap-width-md);--layout-content-width: 70ch;--layout-aside-width: 245px;--layout-toc-width: 1fr;--prose-spacing: var(--sm1)}:root{--badge-font-size: var(--text-sm);--badge-border-radius: var(--radius-md);--badge-color: var(--base-0);--badge-background-color: light-dark(var(--base-700), var(--base-600));--badge-primary-color: var(--base-0);--badge-primary-background-color: light-dark( var(--primary-600), var(--primary-500) );--badge-success-color: light-dark(var(--yes-500), var(--base-0));--badge-success-background-color: light-dark(var(--yes-100), var(--yes-500));--badge-danger-color: light-dark(var(--no-500), var(--base-0));--badge-danger-background-color: light-dark(var(--no-100), var(--no-500));--badge-warning-color: light-dark(var(--maybe-500), var(--base-950));--badge-warning-background-color: light-dark( var(--maybe-100), var(--maybe-500) )}:root{--bt-min-width: 101px;--bt-min-width-md: 123px;--bt-min-width-lg: 133px;--bt-font-size: var(--text-sm);--bt-font-size-lg: var(--text-md);--bt-font-weight: var(--semi-bold);--bt-color: var(--text-color);--bt-color-hover: light-dark(var(--text-color), var(--base-0));--bt-background-color: light-dark(var(--base-0), var(--base-800));--bt-background-color-hover: light-dark(var(--base-50), var(--base-900));--bt-border-color: var(--ui-border-color);--bt-border-width: var(--border-sm);--bt-border-radius: var(--radius-lg);--bt-border-radius-lg: var(--radius-xl);--bt-outline-color-hover: light-dark(var(--base-950), var(--base-0));--bt-outline-background-color-hover: light-dark( rgb(0 0 0 / .1), rgb(255 255 255 / .1) );--bt-outline-border-color: light-dark(var(--base-950), var(--base-0));--bt-outline-border-color-hover: light-dark(var(--base-950), var(--base-0));--bt-primary-color: var(--base-0);--bt-primary-color-hover: var(--base-0);--bt-primary-background-color: var(--primary-600);--bt-primary-background-color-hover: var(--primary-500);--bt-primary-border-color: var(--primary-600);--bt-primary-border-color-hover: var(--primary-600)}:root{--avatar-color: var(--base-0);--avatar-background-color: var(--base-400);--avatar-border-color: light-dark(var(--base-0), var(--base-500));--avatar-border-width: var(--border-sm);--avatar-radius: var(--radius-round);--avatar-status-dot-color-offline: var(--base-300);--avatar-status-dot-color-online: var(--yes-400)}:root{--banner-color: var(--base-0);--banner-background-color: light-dark(var(--primary-600), var(--primary-800))}:root{--breadcrumbs-separator: "/";--breadcrumbs-separator-color: light-dark(var(--base-300), var(--base-600));--breadcrumbs-color: light-dark(var(--base-500), var(--base-400));--breadcrumbs-color-current: var(--text-color)}:root{--card-spacing: var(--sm3);--card-color: var(--text-color);--card-secondary-text-color: light-dark(var(--base-400), var(--base-500));--card-bg-color: light-dark(var(--base-100), var(--base-900));--card-border-radius: var(--radius-lg);--card-border-color: var(--ui-border-color);--card-border-width: var(--border-sm);--card-shadow: var(--shadow-md);--card-shadow-hover: var(--shadow-xl);--card-loading-bg: light-dark(var(--base-200), var(--base-900));--card-aspect-ratio: var(--ar-golden)}:root{--toggle-width: 50px;--toggle-height: 28px;--toggle-border-width: 2px;--toggle-track-color: light-dark(var(--base-300), var(--base-700));--toggle-track-color-checked: var(--yes-400);--toggle-thumb-color: var(--body-background-color)}:root{--faq-spacing: var(--xs3)}:root{--field-spacing: var(--xs1);--field-hint-color: light-dark(var(--base-400), var(--base-500));--field-error-color: light-dark(var(--no-500), var(--no-300));--field-message-position: static}:root{--featureItem-icon-box-size: var(--lg3);--featureItem-icon-size: var(--sm3);--featureItem-icon-color: light-dark(var(--primary-600), var(--primary-300));--featureItem-icon-background-color: light-dark( var(--primary-100), var(--primary-900) );--featureItem-icon-border-radius: var(--radius-lg)}:root{--footer-background-color: light-dark(var(--primary-950), var(--base-950));--footer-text-color: light-dark(var(--base-0), var(--base-200));--footer-border-width: var(--border-md);--footer-border-color: light-dark(transparent, var(--base-700));--footer-link-color: light-dark(var(--base-0), var(--base-200));--footer-link-color-hover: light-dark(var(--primary-200), var(--base-0))}:root{--header-height: var(--xl1);--header-padding: var(--sm1);@media(width>=768px){--header-height: var(--xl2);--header-padding: var(--sm3)}--header-background-color: light-dark(var(--base-0), var(--base-950));--header-menu-background-color: var(--base-950);--header-menu-color: var(--base-0);--header-menu-color-current: var(--primary-400);--header-menu-secondary-color: var(--base-300);--header-menu-border-color: var(--base-500)}:root{--hero-radius: var(--radius-xl);--hero-content-padding: var(--md3);--hero-actions-spacing: var(--lg3);--hero-pagination-dot: var(--sm1);--hero-pagination-dot-color: var(--base-0);--hero-pagination-dot-active-color: var(--primary-600);--hero-pagination-opacity: var(--o-4)}:root{--pagination-size: var(--md3);--pagination-border-radius: var(--radius-md);--pagination-color: var(--text-color);--pagination-color-current: var(--base-0);--pagination-background-color-current: light-dark( var(--primary-600), var(--primary-500) );--pagination-background-color-hover: light-dark( var(--base-100), var(--base-800) )}:root{--prevNext-border-color: var(--ui-border-color);--prevNext-border-radius: var(--radius-lg);--prevNext-border-color-hover: var(--link-color);--prevNext-label-color: light-dark(var(--base-400), var(--base-500))}:root{--notice-spacing: var(--sm1);--notice-text-color: light-dark(var(--base-950), var(--base-0));--notice-background-color: light-dark(var(--base-50), var(--base-800));--notice-border-color: light-dark(var(--base-200), var(--base-500));--notice-border-width: var(--border-sm);--notice-border-radius: var(--radius-lg)}:root{--pricingCard-highlight-border-color: light-dark( var(--primary-600), var(--primary-400) );--pricingCard-check-color: light-dark(var(--yes-500), var(--yes-400))}:root{--readProgressBar-height: var(--xs1);--readProgressBar-color: linear-gradient( 90deg, var(--primary-600) 0%, var(--primary-400) 100% )}:root{--section-spacing: var(--xl3);--section-header-spacing: var(--lg3);--section-eyebrow-color: light-dark(var(--primary-600), var(--primary-400));--section-lede-color: light-dark(var(--base-500), var(--base-400));--section-filled-background-color: light-dark( var(--base-50), var(--base-900) );--section-primary-background-color: light-dark( var(--primary-600), var(--primary-900) );--section-primary-text-color: var(--base-0);--section-primary-link-color: var(--primary-100);--section-primary-link-color-hover: var(--base-0);--section-primary-eyebrow-color: var(--primary-200);--section-primary-lede-color: var(--primary-100)}:root{--testimonial-role-color: light-dark(var(--base-400), var(--base-500))}:root{--tags-padding: var(--xs2);--tags-font-size: var(--text-sm);--tags-color: light-dark(var(--base-500), var(--base-400));--tags-background-color: light-dark(var(--base-100), var(--base-800));--tags-background-color-hover: light-dark(var(--base-200), var(--base-950));--tags-radius: var(--radius-md)}:root{--toc-color: var(--link-color);--toc-color-hover: var(--link-color-hover);--toc-spacing: var(--xs1);--toc-indentation: var(--xs3);--toc-icon-size: var(--sm1)}}
diff --git a/package.json b/package.json
index 0c03e0dd..e62123f7 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "astro": "astro",
     "build:css": "node src/tools/build-css.mjs",
     "check": "astro check",
+    "check:layers": "node src/tools/check-layers.mjs",
     "lint:css": "stylelint \"src/styles/**/*.css\"",
     "prepare": "git config core.hooksPath .githooks"
   },
diff --git a/public/_redirects b/public/_redirects
new file mode 100644
index 00000000..17adc004
--- /dev/null
+++ b/public/_redirects
@@ -0,0 +1,33 @@
+# Netlify edge redirects: real HTTP 301s, so they work for every client
+# (browsers, curl, AI agents fetching the .md twins), not just HTML pages.
+# Do NOT also add a rule's source path to astro.config.mjs `redirects`:
+# Astro would emit a stub file at that path, and Netlify serves an existing
+# file instead of applying the redirect.
+
+# Slug lowercased for consistency with the other component docs
+/components/ReadProgressBar  /components/readprogressbar  301
+
+# The template docs page moved twice: components collection -> docs ->
+# a section of the component library's start page (docs restructure)
+/components/template  /docs/components#marketing-template  301
+
+# Tags pages moved under /blog so the Blog nav item highlights on them
+/tags    /blog/tags         301
+/tags/*  /blog/tags/:splat  301
+
+# Docs restructure (2026-08-16): pages merged or split. The .md twins are
+# separate routes fetched cold by AI agents, so each gets its own rule.
+/docs/tokens            /docs/default-theme     301
+/docs/tokens.md         /docs/default-theme.md  301
+/docs/themes            /docs/default-theme     301
+/docs/themes.md         /docs/default-theme.md  301
+/docs/reset             /docs/default-html      301
+/docs/reset.md          /docs/default-html.md   301
+/docs/elements          /docs/default-html      301
+/docs/elements.md       /docs/default-html.md   301
+/docs/global            /docs/layout            301
+/docs/global.md         /docs/layout.md         301
+/docs/media-queries     /docs/layout            301
+/docs/media-queries.md  /docs/layout.md         301
+/docs/template          /docs/components#marketing-template  301
+/docs/template.md       /docs/components.md     301
diff --git a/src/components/NavDocs.astro b/src/components/NavDocs.astro
index 4b92c2b2..f2b7a591 100644
--- a/src/components/NavDocs.astro
+++ b/src/components/NavDocs.astro
@@ -11,7 +11,7 @@ const currentPath = pathname.split('/')[2]; // pathname starts with '/'
     {
       docsNavItems.map((page) => (
         <li>
-          <a class:list={[{ 'is-active': page.id == currentPath }]} href={`/docs/${page.id}`}>
+          <a class:list={[{ 'is-active': page.id == currentPath }]} href={page.href ?? `/docs/${page.id}`}>
             <Fragment set:html={arrow} />
             {page.title}
           </a>
diff --git a/src/components/SiteFooter.astro b/src/components/SiteFooter.astro
index c6cb8251..22ca070e 100644
--- a/src/components/SiteFooter.astro
+++ b/src/components/SiteFooter.astro
@@ -13,9 +13,9 @@ import { VERSION } from '../scripts/globals';
       <h2 class="h5">Documentation</h2>
       <ul>
         <li><a href="/docs/start">mCSS methodology</a></li>
-        <li><a href="/docs/tokens">Tokens</a></li>
-        <li><a href="/docs/media-queries">Responsive design</a></li>
-        <li><a href="/docs/global#grid">Grid system</a></li>
+        <li><a href="/docs/default-theme">Tokens</a></li>
+        <li><a href="/docs/layout">Responsive design</a></li>
+        <li><a href="/docs/layout#grid">Grid system</a></li>
         <li><a href="/docs/helpers">Utility classes</a></li>
         <li><a href="/components/start">Component library</a></li>
       </ul>
diff --git a/src/components/SiteHeader.astro b/src/components/SiteHeader.astro
index d80e3dcb..34d570c3 100644
--- a/src/components/SiteHeader.astro
+++ b/src/components/SiteHeader.astro
@@ -15,7 +15,7 @@ const navItems: NavItem[] = [
   {
     label: 'Docs',
     href: '/docs/start',
-    children: docsNavItems.map((page) => ({ label: page.title, href: `/docs/${page.id}` })),
+    children: docsNavItems.map((page) => ({ label: page.title, href: page.href ?? `/docs/${page.id}` })),
   },
   {
     label: 'Components',
diff --git a/src/content/blog/component-system-that-scales.md b/src/content/blog/component-system-that-scales.md
index 8ac125d9..203cbb27 100644
--- a/src/content/blog/component-system-that-scales.md
+++ b/src/content/blog/component-system-that-scales.md
@@ -88,7 +88,7 @@ Same result, radically different dependency graph. `component.card.css` is once
 
 ### Tokens
 
-mCSS components expose their look through [tokens](/docs/tokens). So if the token exists, you can set the component's styling without targeting any element at all:
+mCSS components expose their look through [tokens](/docs/default-theme). So if the token exists, you can set the component's styling without targeting any element at all:
 
 ```css
 /* component.pricing.css */
@@ -118,7 +118,7 @@ Same pattern, delivered by prop instead of typed by hand.
 
 Sometimes the component has no token and no `<part>Class` prop for what you're after. The answer is still not a descendant selector, nor editing the framework files. You own your copy of mCSS, so you _can_ edit the framework files if you really want to, but I'd recommend these options instead:
 
-1. Override it from your [theme](/docs/themes). The recommended way to override framework classes.
+1. Override it from your [theme](/docs/default-theme). The recommended way to override framework classes.
 2. Override it through classes you mix on from your own `site/` CSS, as above.
 3. If the component genuinely fights what you need, stop bending it: build your own site component and use that instead. A `component.planCard.css` you fully own beats a framework card held together with exceptions.
 
@@ -132,11 +132,13 @@ The rule bans crossing block boundaries, not everything that isn't a class:
 
 **None of these reach into another component.** They describe your own block's markup/state.
 
-### The two exceptions
+### Exceptions
 
-**Theme files.** A theme's entire job is to restyle other people's blocks, deliberately and in one place. That is why `theme.*.css` is the one kind of file allowed to select framework classes, framework globals, and bare elements from outside. The exception is safe because it is bounded: at most one theme is active, and you always know where to look.
+Some CSS legitimately crosses block boundaries. What makes an exception acceptable is that it is bounded and named: one predictable file, one clear reason, so you always know where to look. Two examples:
 
-**The print sheet.** `global.print.css` holds every `@media print` rule in the project, including rules that select other blocks' classes, because a printed page is one design decision that should be readable in one file. The [Getting Started docs](/docs/start#print-styles) cover the reasoning.
+**Theme files.** A theme's entire job is to restyle other people's blocks, deliberately and in one place. That is why `theme.*.css` files are allowed to select framework classes, framework globals, and bare elements from outside. The exception is safe because it is bounded: at most one theme is active.
+
+**A print sheet.** A `global.print.css` holding every `@media print` rule in the project, including rules that select other blocks' classes, because a printed page is one design decision that should be readable in one file, not spread across every component it touches.
 
 ## The self-check
 
diff --git a/src/content/blog/css-select-mask-styling.mdx b/src/content/blog/css-select-mask-styling.mdx
index 900225dd..e3f72c63 100644
--- a/src/content/blog/css-select-mask-styling.mdx
+++ b/src/content/blog/css-select-mask-styling.mdx
@@ -27,7 +27,7 @@ Custom `<select>` styling via CSS [is coming](https://chrome.dev/css-wrapped-202
   mdnUrl="https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select#browser_compatibility"
 />
 
-In the meantime, we're stuck with styling `<select>` elements the old way, which _should_ be simple but never is… The common workarounds are clunky and usually require an extra wrapper. I really wanted [mCSS HTML elements](/docs/elements#form) to be customizable out of the box, without extra markup. Here were my requirements:
+In the meantime, we're stuck with styling `<select>` elements the old way, which _should_ be simple but never is… The common workarounds are clunky and usually require an extra wrapper. I really wanted [mCSS HTML elements](/docs/default-html#form) to be customizable out of the box, without extra markup. Here were my requirements:
 
 1. No wrapper element around the `<select>`.
 2. Custom "chevron" icon that matches the text color in light/dark themes.
@@ -60,7 +60,7 @@ The two values used here:
 
 ### The result
 
-Here's how it looks like (more [examples in mCSS docs](/docs/elements#form)):
+Here's how it looks like (more [examples in mCSS docs](/docs/default-html#form)):
 
 <select class="mt-sm3 mb-md1">
   <option>Native Select…</option>
diff --git a/src/content/blog/mcss-structure.md b/src/content/blog/mcss-structure.md
index 73d9fed7..dc33b960 100644
--- a/src/content/blog/mcss-structure.md
+++ b/src/content/blog/mcss-structure.md
@@ -8,16 +8,16 @@ description: "An overview of how and why mCSS file structure is organized the wa
 
 ## File structure
 
-> **Update (2026):** mCSS now uses native [CSS cascade layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer): each file is imported into a named `@layer`, and the layer name decides priority instead of the import order. The former "atoms" layer was also folded into components for v1 (a badge or a button is just a CSS-only component now). The list below reflects the current structure, and your own unlayered CSS always wins over the framework. See the [Getting Started docs][docs] for the current setup.
+> **Update (2026):** mCSS now uses native [CSS cascade layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer): each file is imported into a named `@layer`, and the layer name decides priority instead of the import order. The former "atoms" layer was also folded into components for v1 (a badge or a button is just a CSS-only component now), and the former settings files later became the **default theme** (`theme.default.tokens.css` + `theme.default.ui.css`): every design value now lives in a theme, activated from your entry point, with your own theme overriding it. The list below reflects the current structure, and your own unlayered CSS always wins over the framework. See the [Getting Started docs][docs] for the current setup.
 
 If you look at the imports in `mcss.css` [on Github][1], you'll get the basic idea behind mCSS structure. Each file belongs to a layer, and the layers keep the cascade working _for_ us as opposed to specificity wars and cascading conflicts. This architecture is based on [ITCSS][itcss]. The basic idea is to organize CSS from least specific/broadest reach to most specific/local override so you get a smooth [specificity graph][graph] trending upward.
 
-- Settings: where all the global variables are set (tokens and interface tokens).
 - Base: your reset and normalize rules.
 - Elements: HTML elements defaults, without any classes.
 - Global: layouts like `.wrap` and `.grid` and global styling like `.prose`.
 - Components: component specific styling, from single-class pieces like `.bt` buttons to full structures.
-- Theme: a swappable theme, one file of token overrides that restyles the whole site.
+- Theme default: the default theme, where every global variable is set (raw tokens and UI tokens).
+- Theme user: your own theme, a file of token overrides that restyles the whole site.
 - Helpers: local overrides (last layer, so they beat everything above).
 - Your own CSS imports unlayered, after the framework, and wins over all of it.
 
diff --git a/src/content/blog/mcss-v.1.0.md b/src/content/blog/mcss-v.1.0.md
index 38395c52..0f4c6223 100644
--- a/src/content/blog/mcss-v.1.0.md
+++ b/src/content/blog/mcss-v.1.0.md
@@ -46,7 +46,7 @@ If you build something with mCSS, I'd love to see it. Come say hi in the [discus
 
 [dist]: https://github.com/minimaldesign/mCSS/blob/main/dist/mcss.css
 [components]: /components/start
-[themes]: /docs/themes
+[themes]: /docs/default-theme
 [template]: /templates/marketing
 [changelog]: https://github.com/minimaldesign/mCSS/blob/main/CHANGELOG.md
 [discussions]: https://github.com/minimaldesign/mCSS/discussions
diff --git a/src/content/blog/postcss-setup-for-mcss.mdx b/src/content/blog/postcss-setup-for-mcss.mdx
index a8f20874..7b4f79a2 100644
--- a/src/content/blog/postcss-setup-for-mcss.mdx
+++ b/src/content/blog/postcss-setup-for-mcss.mdx
@@ -57,7 +57,7 @@ Browsers still can't do that. So we compile it to:
 }
 ```
 
-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.
+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/layout) for the full list of names.
 
 ### Mixins, if you want them
 
@@ -128,11 +128,11 @@ The one that matters. Left enabled, preset-env's cascade-layer polyfill deletes
 
 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.
+Since mCSS only supports browsers that implement `@layer` natively (see [browser support](/docs/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.
+Narrower, and you can skip it unless you use the [wireframe theme](/docs/default-theme). 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
 
diff --git a/src/content/components/avatar.mdx b/src/content/components/avatar.mdx
index de95419d..b7ab99ca 100644
--- a/src/content/components/avatar.mdx
+++ b/src/content/components/avatar.mdx
@@ -93,7 +93,7 @@ Its default size is 56px. (See the [HTML](#html) section below for all options.)
 
 ### Custom properties
 
-The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens):
+The following custom properties are available in [`theme.default.ui.css`](/docs/default-theme#ui-tokens):
 
 <div class="docs_oversizedTable">
 
diff --git a/src/content/components/badge.mdx b/src/content/components/badge.mdx
index fc4af899..b1e4b611 100644
--- a/src/content/components/badge.mdx
+++ b/src/content/components/badge.mdx
@@ -26,12 +26,12 @@ The badge is a small label for statuses, categories, and "new" markers. It is a
 | File                               | Description                    | Source      |
 | ---------------------------------- | ------------------------------ | ----------- |
 | `component.badge.css`              | All badge styles               | [Github][1] |
-| `--badge-*` block in `settings.ui.css` | Interface tokens (see table below) | [Github][2] |
+| `--badge-*` block in `theme.default.ui.css` | UI tokens (see table below) | [Github][2] |
 
 </div>
 
 [1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.badge.css
-[2]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.ui.css
+[2]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/theme.default.ui.css
 
 </section>
 
@@ -88,7 +88,7 @@ One-off colors work like every other variant in mCSS: override the local custom
 
 ### Custom properties
 
-The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens):
+The following custom properties are available in [`theme.default.ui.css`](/docs/default-theme#ui-tokens):
 
 <div class="docs_oversizedTable">
 
diff --git a/src/content/components/banner.mdx b/src/content/components/banner.mdx
index b5127c02..268d0ab1 100644
--- a/src/content/components/banner.mdx
+++ b/src/content/components/banner.mdx
@@ -25,14 +25,14 @@ The `.banner` component is the thin announcement bar at the very top of the page
 | `component.banner.css`              | All banner styles              | [Github][1] |
 | `Banner.astro`                      | The Astro component            | [Github][2] |
 | `icons/x.svg`                       | Dismiss icon                   | [Github][3] |
-| `--banner-*` block in `settings.ui.css` | Interface tokens (see table below) | [Github][4] |
+| `--banner-*` block in `theme.default.ui.css` | UI tokens (see table below) | [Github][4] |
 
 </div>
 
 [1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.banner.css
 [2]: https://github.com/minimaldesign/mCSS/blob/main/src/components/Banner.astro
 [3]: https://github.com/minimaldesign/mCSS/tree/main/src/assets/icons
-[4]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.ui.css
+[4]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/theme.default.ui.css
 
 </section>
 
@@ -82,7 +82,7 @@ Looking for the big closing call-to-action band instead? That's a [Section recip
 
 ### Custom properties
 
-The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens):
+The following custom properties are available in [`theme.default.ui.css`](/docs/default-theme#ui-tokens):
 
 <div class="docs_oversizedTable">
 
diff --git a/src/content/components/breadcrumbs.mdx b/src/content/components/breadcrumbs.mdx
index 92b7292a..64ef6f38 100644
--- a/src/content/components/breadcrumbs.mdx
+++ b/src/content/components/breadcrumbs.mdx
@@ -25,13 +25,13 @@ The `.breadcrumbs` component is a `nav > ol` trail with CSS-only separators, and
 | ---------------------------------------- | ------------------------------ | ----------- |
 | `component.breadcrumbs.css`              | All breadcrumb styles          | [Github][1] |
 | `Breadcrumbs.astro`                      | The Astro component            | [Github][2] |
-| `--breadcrumbs-*` block in `settings.ui.css` | Interface tokens (see table below) | [Github][3] |
+| `--breadcrumbs-*` block in `theme.default.ui.css` | UI tokens (see table below) | [Github][3] |
 
 </div>
 
 [1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.breadcrumbs.css
 [2]: https://github.com/minimaldesign/mCSS/blob/main/src/components/Breadcrumbs.astro
-[3]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.ui.css
+[3]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/theme.default.ui.css
 
 </section>
 
@@ -112,7 +112,7 @@ The last crumb is text, not a link, marked with `aria-current="page"`; the separ
       style="--breadcrumbs-separator: '→'"
       items={[
         { label: "Docs", href: "/docs/start" },
-        { label: "Global Styles", href: "/docs/global" },
+        { label: "Global Styles", href: "/docs/layout" },
         { label: "Grid" },
       ]}
     />
@@ -125,7 +125,7 @@ The last crumb is text, not a link, marked with `aria-current="page"`; the separ
       jsonLd
       items={[
         { label: "Docs", href: "/docs/start" },
-        { label: "Global Styles", href: "/docs/global" },
+        { label: "Global Styles", href: "/docs/layout" },
         { label: "Grid" },
       ]}
     />
diff --git a/src/content/components/button.mdx b/src/content/components/button.mdx
index e97de389..1a744e97 100644
--- a/src/content/components/button.mdx
+++ b/src/content/components/button.mdx
@@ -103,7 +103,7 @@ The `.bt-outline-white` and `.bt-white` (solid, primary text) are special case b
 
 ### Custom properties
 
-The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens):
+The following custom properties are available in [`theme.default.ui.css`](/docs/default-theme#ui-tokens):
 
 <div class="docs_oversizedTable">
 
diff --git a/src/content/components/card.mdx b/src/content/components/card.mdx
index c5584e44..92524f99 100644
--- a/src/content/components/card.mdx
+++ b/src/content/components/card.mdx
@@ -43,14 +43,14 @@ Make sure you check out the [Tiles](/components/tiles) component to see how to l
 | `Card.astro`                          | The Astro component                            | [Github][3] |
 | `Tags.astro`, `Avatar.astro`          | Composed components (dependencies)             | [Github][3] |
 | [Tiles](/components/tiles)            | Equal-height, container-responsive list layout | [Github][2] |
-| `--card-*` block in `settings.ui.css` | Interface tokens (see below)                   | [Github][4] |
+| `--card-*` block in `theme.default.ui.css` | UI tokens (see below)                   | [Github][4] |
 
 </div>
 
 [1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.card.css
 [2]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.tiles.css
 [3]: https://github.com/minimaldesign/mCSS/tree/main/src/components
-[4]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.ui.css
+[4]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/theme.default.ui.css
 
 </section>
 
@@ -265,7 +265,7 @@ A card carries **one** link: put `.card_link` on a real anchor (usually the titl
 
 ### Custom properties
 
-The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens):
+The following custom properties are available in [`theme.default.ui.css`](/docs/default-theme#ui-tokens):
 
 <div class="docs_oversizedTable">
 
@@ -324,7 +324,7 @@ Every part is optional; render only what you pass. Badges and tags can coexist,
 | `data-testid`  | `string`                  | `'card'`       | Test ID for testing frameworks.                                                                                     |
 | `class`        | `string`                  | undefined      | Additional CSS classes, useful for [helper classes](/docs/helpers).                                                 |
 
-[ar]: /docs/tokens#aspect-ratio
+[ar]: /docs/default-theme#aspect-ratio
 
 </div>
 
diff --git a/src/content/components/faq.mdx b/src/content/components/faq.mdx
index 3684a12d..79596931 100644
--- a/src/content/components/faq.mdx
+++ b/src/content/components/faq.mdx
@@ -33,14 +33,14 @@ The `.faq` component groups `details`/`summary` disclosures into the classic FAQ
 | `component.faq.css`              | Group spacing                            | [Github][1] |
 | `elements.interactive.css`       | The `details`/`summary` styling + chevron | [Github][2] |
 | `Faq.astro`, `FaqItem.astro`     | The Astro components                     | [Github][3] |
-| `--faq-spacing` in `settings.ui.css` | Interface token                              | [Github][4] |
+| `--faq-spacing` in `theme.default.ui.css` | UI token                              | [Github][4] |
 
 </div>
 
 [1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.faq.css
 [2]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/elements.interactive.css
 [3]: https://github.com/minimaldesign/mCSS/tree/main/src/components
-[4]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.ui.css
+[4]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/theme.default.ui.css
 
 </section>
 
diff --git a/src/content/components/featuregrid.mdx b/src/content/components/featuregrid.mdx
index e2225db8..f5551280 100644
--- a/src/content/components/featuregrid.mdx
+++ b/src/content/components/featuregrid.mdx
@@ -37,7 +37,7 @@ The feature grid is the classic marketing "three columns of icon + title + text"
 | -------------------------------------------- | ---------------------------------- | ----------- |
 | `component.featureItem.css`                  | Feature item styles                | [Github][1] |
 | `FeatureItem.astro`                          | The Astro component                | [Github][2] |
-| `--featureItem-*` block in `settings.ui.css` | Interface tokens (see table below) | [Github][3] |
+| `--featureItem-*` block in `theme.default.ui.css` | UI tokens (see table below) | [Github][3] |
 | [Tiles](/components/tiles)                   | The container-responsive layout    | [Github][2] |
 
 </div>
@@ -46,7 +46,7 @@ Depends on [Tiles](/components/tiles) for the layout. Icons are yours to bring;
 
 [1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.featureItem.css
 [2]: https://github.com/minimaldesign/mCSS/tree/main/src/components
-[3]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.ui.css
+[3]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/theme.default.ui.css
 
 </section>
 
@@ -124,7 +124,7 @@ The icon box is `aria-hidden`: feature icons are decoration next to a real headi
 
 ### Custom properties
 
-The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens):
+The following custom properties are available in [`theme.default.ui.css`](/docs/default-theme#ui-tokens):
 
 <div class="docs_oversizedTable">
 
diff --git a/src/content/components/field.mdx b/src/content/components/field.mdx
index c11b5410..6cd6e7e3 100644
--- a/src/content/components/field.mdx
+++ b/src/content/components/field.mdx
@@ -11,7 +11,7 @@ import Playground from "../../components/_Playground.jsx";
 
 <section class="prose">
 
-The `.field` component composes the bare [form elements](/docs/elements) into label + control + hint + error message, with validation states driven entirely by CSS.
+The `.field` component composes the bare [form elements](/docs/default-html) into label + control + hint + error message, with validation states driven entirely by CSS.
 
 <form>
   <Field label="Email" name="demo-email" type="email" required hint="We'll never share it." placeholder="you@example.com" error="That doesn't look like an email address." />
@@ -27,14 +27,14 @@ Type something that isn't an email address and tab away: the hint swaps for the
 | `component.fieldRow.css`            | fieldRow composition (own block)         | [Github][5] |
 | `elements.form.css`                 | Bare element styles + `:user-invalid` border | [Github][2] |
 | `Field.astro`                       | The Astro component                      | [Github][3] |
-| `--field-*` block in `settings.ui.css`  | Interface tokens (see table below)           | [Github][4] |
+| `--field-*` block in `theme.default.ui.css`  | UI tokens (see table below)           | [Github][4] |
 
 </div>
 
 [1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.field.css
 [2]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/elements.form.css
 [3]: https://github.com/minimaldesign/mCSS/blob/main/src/components/Field.astro
-[4]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.ui.css
+[4]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/theme.default.ui.css
 [5]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.fieldRow.css
 
 </section>
@@ -147,7 +147,7 @@ To use another control (textarea, select…), put it in the default slot and giv
 
 ### Contact form
 
-Fieldset + the [grid system](/docs/global#grid) for the two-column row:
+Fieldset + the [grid system](/docs/layout#grid) for the two-column row:
 
 <form>
   <fieldset>
diff --git a/src/content/components/footer.mdx b/src/content/components/footer.mdx
index e933a1ae..360fbce1 100644
--- a/src/content/components/footer.mdx
+++ b/src/content/components/footer.mdx
@@ -40,13 +40,13 @@ The `.footer` component is the site-wide bottom section: link columns on the rig
 | ----------------------------------- | ------------------------------ | ----------- |
 | `component.footer.css`              | All footer styles              | [Github][1] |
 | `Footer.astro`                      | The Astro component            | [Github][2] |
-| `--footer-*` block in `settings.ui.css` | Interface tokens (see table below) | [Github][3] |
+| `--footer-*` block in `theme.default.ui.css` | UI tokens (see table below) | [Github][3] |
 
 </div>
 
 [1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.footer.css
 [2]: https://github.com/minimaldesign/mCSS/blob/main/src/components/Footer.astro
-[3]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.ui.css
+[3]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/theme.default.ui.css
 
 </section>
 
@@ -66,7 +66,7 @@ Pick a real heading level for the column titles: the next one in your page's out
         <h2 class="h5">Documentation</h2>
         <ul>
           <li><a href="/docs">Getting started</a></li>
-          <li><a href="/docs/tokens">Tokens</a></li>
+          <li><a href="/docs/default-theme">Tokens</a></li>
         </ul>
       </li>
       <li>
@@ -85,7 +85,7 @@ Pick a real heading level for the column titles: the next one in your page's out
 
 ### Custom properties
 
-The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens):
+The following custom properties are available in [`theme.default.ui.css`](/docs/default-theme#ui-tokens):
 
 <div class="docs_oversizedTable">
 
diff --git a/src/content/components/header.mdx b/src/content/components/header.mdx
index b244a827..a2d56ded 100644
--- a/src/content/components/header.mdx
+++ b/src/content/components/header.mdx
@@ -32,7 +32,7 @@ The `.header` component is the site-wide top bar: logo, primary navigation, opti
 | `component.header.css`              | All header styles                | [Github][1] |
 | `Header.astro`                      | The Astro component              | [Github][2] |
 | `icons/menu.svg`, `icons/x.svg`     | Mobile menu open/close icons     | [Github][3] |
-| `--header-*` block in `settings.ui.css` | Interface tokens (see table below)   | [Github][4] |
+| `--header-*` block in `theme.default.ui.css` | UI tokens (see table below)   | [Github][4] |
 | `scripts/utilities.js` (`throttle`) | Used by the sticky-shadow script | [Github][5] |
 
 </div>
@@ -40,7 +40,7 @@ The `.header` component is the site-wide top bar: logo, primary navigation, opti
 [1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.header.css
 [2]: https://github.com/minimaldesign/mCSS/blob/main/src/components/Header.astro
 [3]: https://github.com/minimaldesign/mCSS/tree/main/src/assets/icons
-[4]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.ui.css
+[4]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/theme.default.ui.css
 [5]: https://github.com/minimaldesign/mCSS/blob/main/src/scripts/utilities.js
 
 </section>
@@ -91,7 +91,7 @@ When using plain HTML you also need the small script that wires the hamburger; c
 
 ### Custom properties
 
-The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens):
+The following custom properties are available in [`theme.default.ui.css`](/docs/default-theme#ui-tokens):
 
 <div class="docs_oversizedTable">
 
diff --git a/src/content/components/hero.mdx b/src/content/components/hero.mdx
index 525ff00c..62fae184 100644
--- a/src/content/components/hero.mdx
+++ b/src/content/components/hero.mdx
@@ -81,7 +81,7 @@ The Slideshow layout features rotating content and background (same options avai
 
 ### Custom properties
 
-The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens):
+The following custom properties are available in [`theme.default.ui.css`](/docs/default-theme#ui-tokens):
 
 <div class="docs_oversizedTable">
 
diff --git a/src/content/components/notice.mdx b/src/content/components/notice.mdx
index 7c4883f8..f99eeebe 100644
--- a/src/content/components/notice.mdx
+++ b/src/content/components/notice.mdx
@@ -90,7 +90,7 @@ When using HTML, you'll need to include the SVG icons "manually." All the icons
 
 ### Custom properties
 
-The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens):
+The following custom properties are available in [`theme.default.ui.css`](/docs/default-theme#ui-tokens):
 
 <div class="docs_oversizedTable">
 
diff --git a/src/content/components/pagination.mdx b/src/content/components/pagination.mdx
index 2ca05db4..86fad993 100644
--- a/src/content/components/pagination.mdx
+++ b/src/content/components/pagination.mdx
@@ -26,7 +26,7 @@ Two navigation patterns for content sites: `.pagination` is the numbered kind fo
 | `component.prevNext.css`                      | Prev/next styles               | [Github][2] |
 | `Pagination.astro`, `PrevNext.astro`          | The Astro components           | [Github][3] |
 | `icons/chevron-down.svg`                      | Arrow icon (rotated in CSS)    | [Github][4] |
-| `--pagination-*`, `--prevNext-*` token blocks | Interface tokens (see table below) | [Github][5] |
+| `--pagination-*`, `--prevNext-*` token blocks | UI tokens (see table below) | [Github][5] |
 
 </div>
 
@@ -34,7 +34,7 @@ Two navigation patterns for content sites: `.pagination` is the numbered kind fo
 [2]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.prevNext.css
 [3]: https://github.com/minimaldesign/mCSS/tree/main/src/components
 [4]: https://github.com/minimaldesign/mCSS/tree/main/src/assets/icons
-[5]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.ui.css
+[5]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/theme.default.ui.css
 
 </section>
 
diff --git a/src/content/components/pricing.mdx b/src/content/components/pricing.mdx
index 26f67dc5..903632ae 100644
--- a/src/content/components/pricing.mdx
+++ b/src/content/components/pricing.mdx
@@ -12,7 +12,7 @@ import checkIcon from "../../assets/icons/check.svg?raw";
 
 <section class="prose">
 
-The `.pricingCard` component is one tier of a pricing table: name, price, feature list, and a CTA pinned to the bottom so a row of tiers lines up. A pricing table is a row of these on the [grid](/docs/global#grid), with `highlighted` marking the recommended tier.
+The `.pricingCard` component is one tier of a pricing table: name, price, feature list, and a CTA pinned to the bottom so a row of tiers lines up. A pricing table is a row of these on the [grid](/docs/layout#grid), with `highlighted` marking the recommended tier.
 
 <div class="grid" col="1" col-md="3">
   <PricingCard name="Starter" price="$0" period="/month" description="For side projects." features={["1 site", "Community support"]} ctaHref="#" />
@@ -28,7 +28,7 @@ The `.pricingCard` component is one tier of a pricing table: name, price, featur
 | `component.card.css`, `component.badge.css`, `component.button.css` | Base visuals (dependencies) | [Github][2] |
 | `PricingCard.astro`                        | The Astro component                 | [Github][3] |
 | `icons/check.svg`                          | Feature list check icon             | [Github][4] |
-| `--pricingCard-*` block in `settings.ui.css`   | Interface tokens (see table below)      | [Github][5] |
+| `--pricingCard-*` block in `theme.default.ui.css`   | UI tokens (see table below)      | [Github][5] |
 
 </div>
 
@@ -38,7 +38,7 @@ It extends the [card](/components/card) and uses the [badge](/components/badge)
 [2]: https://github.com/minimaldesign/mCSS/tree/main/src/styles/framework
 [3]: https://github.com/minimaldesign/mCSS/blob/main/src/components/PricingCard.astro
 [4]: https://github.com/minimaldesign/mCSS/tree/main/src/assets/icons
-[5]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.ui.css
+[5]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/theme.default.ui.css
 
 </section>
 
diff --git a/src/content/components/readprogressbar.mdx b/src/content/components/readprogressbar.mdx
index 672710c1..8f9dcae0 100644
--- a/src/content/components/readprogressbar.mdx
+++ b/src/content/components/readprogressbar.mdx
@@ -40,7 +40,7 @@ import ReadProgressBar from "../../components/ReadProgressBar.astro";
 
 ### Custom properties
 
-The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens):
+The following custom properties are available in [`theme.default.ui.css`](/docs/default-theme#ui-tokens):
 
 | Property                   | Description                    |
 | -------------------------- | ------------------------------ |
diff --git a/src/content/components/section.mdx b/src/content/components/section.mdx
index 662b3037..0683d74c 100644
--- a/src/content/components/section.mdx
+++ b/src/content/components/section.mdx
@@ -28,15 +28,15 @@ The `.section` component is the workhorse wrapper marketing pages are made of: a
 | ---------------------------------------- | ---------------------------------- | ----------- |
 | `component.section.css`                  | All section styles                 | [Github][1] |
 | `Section.astro`                          | The Astro component                | [Github][2] |
-| `--section-*` block in `settings.ui.css` | Interface tokens (see table below) | [Github][3] |
+| `--section-*` block in `theme.default.ui.css` | UI tokens (see table below) | [Github][3] |
 
 </div>
 
-Depends on `.wrap` (`global.wrap.css`), part of the mCSS core: the header and the content each compose `.wrap` with their own [width preset](/docs/global#wrap), so a section pairs a reading-width header (`.wrap-md`) with a wider content column (`.wrap-lg`) by default.
+Depends on `.wrap` (`global.wrap.css`), part of the mCSS core: the header and the content each compose `.wrap` with their own [width preset](/docs/layout#wrap), so a section pairs a reading-width header (`.wrap-md`) with a wider content column (`.wrap-lg`) by default.
 
 [1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.section.css
 [2]: https://github.com/minimaldesign/mCSS/blob/main/src/components/Section.astro
-[3]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.ui.css
+[3]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/theme.default.ui.css
 
 </section>
 
@@ -117,7 +117,7 @@ Depends on `.wrap` (`global.wrap.css`), part of the mCSS core: the header and th
 </section>
 ```
 
-The header and content each compose `.wrap` with a [width preset](/docs/global#wrap) (`.wrap-sm`, `.wrap-md`, `.wrap-lg`), so they can use different column widths. `wrap-md` on the header and `wrap-lg` on the content is the standard pairing; use `wrap-md` on the content too when it is text meant for reading (an FAQ, for example).
+The header and content each compose `.wrap` with a [width preset](/docs/layout#wrap) (`.wrap-sm`, `.wrap-md`, `.wrap-lg`), so they can use different column widths. `wrap-md` on the header and `wrap-lg` on the content is the standard pairing; use `wrap-md` on the content too when it is text meant for reading (an FAQ, for example).
 
 ### Available modifiers
 
@@ -148,7 +148,7 @@ The header and content each compose `.wrap` with a [width preset](/docs/global#w
 
 ### Custom properties
 
-The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens):
+The following custom properties are available in [`theme.default.ui.css`](/docs/default-theme#ui-tokens):
 
 <div class="docs_oversizedTable">
 
diff --git a/src/content/components/start.mdx b/src/content/components/start.mdx
index 2504c4ea..ebd67b3a 100644
--- a/src/content/components/start.mdx
+++ b/src/content/components/start.mdx
@@ -8,14 +8,14 @@ type: "intro"
 
 <section class="prose">
 
-The mCSS component library is entirely built with the [mCSS framework](/docs/start), and you **own the code**: instead of installing a package, you copy the pieces you want into your project and edit them like anything else you wrote. Every component's docs page starts with a table listing exactly which files, dependencies, and interface tokens it needs.
+The mCSS component library is entirely built with the [mCSS framework](/docs/start), and you **own the code**: instead of installing a package, you copy the pieces you want into your project and edit them like anything else you wrote. Every component's docs page starts with a table listing exactly which files, dependencies, and UI tokens it needs.
 
 Each component comes in two flavors:
 
 - **Plain HTML + CSS.** Copy the `component.*.css` file (or grab the compiled version from [`dist/css/`](https://github.com/minimaldesign/mCSS/tree/main/dist/css); the whole library in one file is [`dist/mcss.components.css`](https://github.com/minimaldesign/mCSS/blob/main/dist/mcss.components.css)) and use the documented markup. Works with any framework, or none.
 - **Astro.** Copy the `.astro` file(s) for typed props, slots, and sensible accessibility defaults out of the box.
 
-Components stay as pure HTML/CSS as possible. The exceptions ship only the few lines they need: the [header](/components/header)'s mobile menu, the dismissible [banner](/components/banner), the [hero](/components/hero)'s slideshow, the [table of contents](/components/toc)' scrollspy, and the [read progress bar](/components/readprogressbar)'s fallback for browsers without scroll-driven animations. Styling lives in [cascade layers](/docs/start), so your own unlayered CSS always wins, and every visual knob is a documented `--component-*` [interface token](/docs/tokens#interface-tokens).
+Components stay as pure HTML/CSS as possible. The exceptions ship only the few lines they need: the [header](/components/header)'s mobile menu, the dismissible [banner](/components/banner), the [hero](/components/hero)'s slideshow, the [table of contents](/components/toc)' scrollspy, and the [read progress bar](/components/readprogressbar)'s fallback for browsers without scroll-driven animations. Styling lives in [cascade layers](/docs/start), so your own unlayered CSS always wins, and every visual knob is a documented `--component-*` [UI token](/docs/default-theme#ui-tokens).
 
 You can see some of the Astro components in action on the [Marketing Template](/templates/marketing) ([code](https://github.com/minimaldesign/mCSS/blob/main/src/pages/templates/marketing.astro)).
 
diff --git a/src/content/components/tags.mdx b/src/content/components/tags.mdx
index 3f03599d..90682aa3 100644
--- a/src/content/components/tags.mdx
+++ b/src/content/components/tags.mdx
@@ -56,7 +56,7 @@ import Playground from "../../components/_Playground.jsx";
 
 ### Custom properties
 
-The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens):
+The following custom properties are available in [`theme.default.ui.css`](/docs/default-theme#ui-tokens):
 
 | Property                        | Description                 |
 | ------------------------------- | --------------------------- |
diff --git a/src/content/components/testimonial.mdx b/src/content/components/testimonial.mdx
index 42fa47aa..bb54291c 100644
--- a/src/content/components/testimonial.mdx
+++ b/src/content/components/testimonial.mdx
@@ -27,14 +27,14 @@ The `.testimonial` component is a quote with attribution: a `figure` wrapping mC
 | `component.testimonial.css`                     | Layout + byline styles                | [Github][1] |
 | `elements.text.css`                             | The `blockquote` styling (dependency) | [Github][2] |
 | `Testimonial.astro`, `Avatar.astro`             | The Astro components                  | [Github][3] |
-| `--testimonial-role-color` in `settings.ui.css` | Interface token                       | [Github][4] |
+| `--testimonial-role-color` in `theme.default.ui.css` | UI token                       | [Github][4] |
 
 </div>
 
 [1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.testimonial.css
 [2]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/elements.text.css
 [3]: https://github.com/minimaldesign/mCSS/tree/main/src/components
-[4]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.ui.css
+[4]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/theme.default.ui.css
 
 </section>
 
@@ -141,7 +141,7 @@ The default slot is the quote.
 
 ## Examples
 
-A wall of quotes is just testimonials on the [grid](/docs/global#grid):
+A wall of quotes is just testimonials on the [grid](/docs/layout#grid):
 
 <ul class="docs_examples">
   <li>
diff --git a/src/content/components/tiles.mdx b/src/content/components/tiles.mdx
index 002cc95f..8138dbdc 100644
--- a/src/content/components/tiles.mdx
+++ b/src/content/components/tiles.mdx
@@ -12,7 +12,7 @@ import Playground from "../../components/_Playground.jsx";
 
 <section class="prose">
 
-The `.tiles` component lays out repeated, same-size items (cards, feature items, pricing tiers) in equal-height columns. It is container-responsive: columns appear as the nearest [size container](/docs/global#layouts) crosses the size's thresholds, so the count answers the space the list actually has, not the viewport. The same markup is 2-up in this docs column and 4-up on the wide [blog index](/blog), at the same window size.
+The `.tiles` component lays out repeated, same-size items (cards, feature items, pricing tiers) in equal-height columns. It is container-responsive: columns appear as the nearest [size container](/docs/layout#layouts) crosses the size's thresholds, so the count answers the space the list actually has, not the viewport. The same markup is 2-up in this docs column and 4-up on the wide [blog index](/blog), at the same window size.
 
 <Tiles>
   <li>
@@ -126,7 +126,7 @@ The thresholds are deliberately not the global `--md`/`--lg` viewport breakpoint
 
 ### The container
 
-The column count responds to the nearest size container. Every [layout scaffold](/docs/global#layouts) declares its main column as one, so inside a `.layout` page it just works. Outside a scaffold the wrapper is required: without a container ancestor the queries never match and the list stays single-column.
+The column count responds to the nearest size container. Every [layout scaffold](/docs/layout#layouts) declares its main column as one, so inside a `.layout` page it just works. Outside a scaffold the wrapper is required: without a container ancestor the queries never match and the list stays single-column.
 
 ```html
 <div class="tiles_container">
@@ -153,7 +153,7 @@ The column count responds to the nearest size container. Every [layout scaffold]
 }
 ```
 
-Gaps come from the [grid system](/docs/global#grid)'s `--grid-column-gap` and `--grid-row-gap`, so tiles and grids share the same rhythm.
+Gaps come from the [grid system](/docs/layout#grid)'s `--grid-column-gap` and `--grid-row-gap`, so tiles and grids share the same rhythm.
 
 </section>
 
diff --git a/src/content/components/toc.mdx b/src/content/components/toc.mdx
index 551145f2..08f8e93b 100644
--- a/src/content/components/toc.mdx
+++ b/src/content/components/toc.mdx
@@ -42,7 +42,7 @@ This component's main functionality is to create a table of content via JavaScri
 
 ### Custom properties
 
-The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens):
+The following custom properties are available in [`theme.default.ui.css`](/docs/default-theme#ui-tokens):
 
 | Property            | Color                     |
 | ------------------- | ------------------------- |
diff --git a/src/content/docs/ai.mdx b/src/content/docs/ai.mdx
index 20a60004..f6cfb884 100644
--- a/src/content/docs/ai.mdx
+++ b/src/content/docs/ai.mdx
@@ -40,13 +40,17 @@ Per-page docs: append `.md` to any mcss.dev docs or components URL (e.g. https:/
 
 ### Mental model: layers from default to deliberate
 
-All framework CSS lives in native cascade layers, declared in `mcss.css` in priority order (later wins): `settings, base, elements, global, components, theme, helpers`. `mcss.css` only declares the `components` slot; the component library fills it from a second entry, `mcss.components.css`, imported alongside (skip it in projects that build their own components).
+All framework CSS lives in native cascade layers, declared in `mcss.css` in priority order (later wins): `base, elements, global, components, theme.default, theme.user, external, helpers`. `mcss.css` only declares the `components` and theme slots; the component library fills `components` from a second entry, `mcss.components.css`, imported alongside (skip it in projects that build their own components), and the default theme (`theme.default.css`) fills `theme.default` from YOUR entry, imported right after `mcss.css`: nothing paints without it.
 
-- `settings` through `components` are the framework defaults: what things look like when nobody has an opinion. Never edit these files to restyle; override them from further up the order.
-- `theme` holds at most one theme file: a deliberate opinion about the defaults. An empty theme layer IS the default look.
+- `base` through `components` are the framework's structure. Never edit these files to restyle; override them from further up the order.
+- `theme.default` holds the default theme: every design value (raw tokens + UI tokens). Never edit it either; it is what your overrides fall back to.
+- `theme.user` holds at most one theme of your own: a deliberate opinion about the defaults (copy `theme.starter.css`). A full theme like `theme.wireframe.css` is an entry that composes the default theme and overrides on top; either way, activate exactly one theme entry.
+- `external` ships empty: a slot to demote third-party CSS you import yourself (`@import url(vendor.css) layer(external);`). It beats the framework but loses to all unlayered project CSS at any specificity, so vendor styles stay easy to override. Fixes to vendor CSS go in unlayered `patch.*` files (the one place allowed to select third-party classes). Vendor styles injected from JS cannot be captured this way; they stay unlayered.
 - Your own unlayered CSS is more deliberate still: it beats every layer, by design. Never use `!important` to win against the framework.
 - `helpers` (`help.*` files: spacing, color, typography utilities) are the one exception: every declaration carries `!important`, which inverts the cascade, so they beat even unlayered CSS. Use sparingly. `!important` is banned everywhere else.
 
+The layer order is only the enforced half of the system. mCSS is a methodology (simplified ITCSS) first: selectors stay flat (single class, no specificity stacking) and files are ordered broad to specific everywhere, including unlayered project CSS. `@layer` hard-codes that discipline for the framework's half so it can never fight yours; in your own files, the same flat selectors and deliberate import order make source order the reliable tiebreaker. Don't reason about a mCSS project like arbitrary CSS: a conflict is resolved by putting the rule in the right file, never by escalating specificity.
+
 Inline `style` attributes don't participate in the order at all: they beat every normal declaration in every stylesheet (only a helper's `!important` outranks them). **Never place, size, space, or color anything from a `style` attribute**: a declaration written into markup is one no stylesheet can see, override, or audit, which is the opposite of what the layer order is for. When a value genuinely comes from data, pass it as a custom property and consume it in CSS:
 
 ```html
@@ -55,7 +59,7 @@ Inline `style` attributes don't participate in the order at all: they beat every
 
 ### Restyling, in order of preference
 
-1. **Theme token overrides.** A theme is one file that restyles the whole site: `@layer theme { :root { ... } }` (self-layered, so it slots correctly however it's loaded). Copy `theme.default.css` to start one; activate exactly one from your CSS entry point, after `mcss.css` (which never imports themes itself). Anything the theme doesn't mention falls back to the defaults. Pick the blast radius per override: raw tokens (`--base-*`, `--text`) shift the whole palette or type scale, interface tokens (`--ui-border-color`, `--heading-font`) change every surface that shares the meaning, component tokens (`--bt-border-radius`, `--card-*`) turn one knob.
+1. **Theme token overrides.** A theme is one file that restyles the whole site: `@layer theme.user { :root { ... } }` (self-layered, so it slots correctly however it's loaded). Copy `theme.starter.css` to start one; import it from your CSS entry point after `theme.default.css`, the default theme that carries every design value and that your entry must activate right after `mcss.css` (which never imports themes itself; nothing paints without the default theme). Your theme lands in `theme.user` and beats the default's `theme.default` regardless of import order; anything it doesn't mention falls back to the default theme. Pick the blast radius per override: raw tokens (`--base-*`, `--text`) shift the whole palette or type scale, UI tokens (`--ui-border-color`, `--heading-font`) change every surface that shares the meaning, component tokens (`--bt-border-radius`, `--card-*`) turn one knob.
 2. **Theme style rules**, only if a token doesn't exist for that value, or for what tokens can't express (pseudo-elements, `nth-child` rhythm, etc.). It's ok to override elements like `body` if there is no other way to reliably set it globally. Theme files are the ONE place allowed to select framework classes from outside: component classes, framework globals like `.a11y-skipLink`, and bare element selectors. **A `body` rule belongs here, not in project CSS**. Make sure you keep the ordering general to specific (same as ITCSS). No `!important` in themes.
 3. **Unlayered project CSS** for what belongs to your project rather than to the design: page layouts, one-off blocks.
 
@@ -63,10 +67,9 @@ Do not edit framework files.
 
 ### Tokens
 
-- `settings.tokens.css`: raw primitives (palettes, type scale, spacing, radii).
-- `settings.ui.css`: interface tokens, the public API of every element and component (semantic aliases plus all defaults). Placement is by name: a token named for what it's for (`--heading-*`, `--bt-*`, `--ui-border-color`) goes here; a token named for what it is (`--sm1`, `--base-500`) is a scale token and goes in `settings.tokens.css`. Values prefer another token (a shared-meaning interface token first, else a scale token); raw values only for content (strings, icon URLs), one-off control geometry, or element-relative `em`/`ch` measures.
+- Every token lives in the default theme, split in two: `theme.default.tokens.css` holds the scales (palettes, type scale, spacing, radii), `theme.default.ui.css` holds the UI tokens, the public API of every element and component (semantic aliases plus all defaults). Placement is by name: a token named for what it's for (`--heading-*`, `--bt-*`, `--ui-border-color`) is a UI token; a token named for what it is (`--sm1`, `--base-500`) is a raw token. Values prefer another token (a shared-meaning UI token first, else a raw token); hard-coded values only for content (strings, icon URLs), one-off control geometry, or element-relative `em`/`ch` measures.
 - Grammar: `--component-part-property`, longhand, kebab-case, no abbreviations: `--bt-background-color-hover`, `--notice-border-width`.
-- Feedback colors: use the semantic aliases `--success-*`, `--danger-*`, `--warning-*`, not the raw scales they point at.
+- Feedback colors come straight from the `--yes-*` / `--no-*` / `--maybe-*` palettes; there is no separate success/danger/warning alias tier.
 - The same discipline applies to your own CSS: **no raw color and no raw type size in a `component.*.css` file.** If the theme doesn't name the value you need, add a token to the theme and use that. A `#8a5500` or a `1.0625rem` sitting in a component is a design decision nobody can find, and the second use of it will be a slightly different number.
 
 ### Organizing project CSS: one block per file
@@ -79,11 +82,11 @@ Name each file for the block it holds, and hold one block in it. `component.card
 
 The import list in the entry file is then also the list of blocks in the project, in build order, which makes an unfamiliar codebase readable from one file.
 
-### The print sheet is the one exception
+### Exceptions
 
-Two rules bend for one file: one block per file, and the rule that a selector only contains classes from its own block. `global.print.css` holds **every** `@media print` rule in the project, including rules that select classes belonging to other blocks. Print is not a variation on the screen design, it is a different artifact: one decision about a medium, easier to keep coherent in one place than spread across every component it touches. Reading `global.print.css` top to bottom should tell you what a printed page looks like. Group it by intent rather than by component: the sheet, what paper cannot use, ink instead of tint, where the page may break.
+Some CSS legitimately crosses block boundaries. An acceptable exception is bounded and named: one predictable file, one clear reason, so you always know where to look. Theme files are one (themes restyle other blocks by design, see above). A print sheet is another: a `global.print.css` holding **every** `@media print` rule in the project, including rules that select other blocks' classes, because a printed page is one design decision about a medium, easier to keep coherent in one place than spread across every component it touches. Group a print sheet by intent rather than by component: the sheet, what paper cannot use, ink instead of tint, where the page may break.
 
-**No other media query gets this exception.** `@media (forced-colors: active)`, `prefers-reduced-motion`, and `prefers-color-scheme` stay in the file of the block they concern: those are per-block statements about how one component survives a condition.
+**Media queries about conditions never get this kind of exception.** `@media (forced-colors: active)`, `prefers-reduced-motion`, and `prefers-color-scheme` stay in the file of the block they concern: those are per-block statements about how one component survives a condition.
 
 ### Class naming (BEM-like, different separators)
 
@@ -128,7 +131,7 @@ A selector may only contain classes from its own block. Never write a selector t
 
 When the markup is rendered by a component file (Astro, JSX) instead of HTML you type yourself, its `<part>Class` props (`titleClass`, `iconClass`, ...) mix your class onto the internal part the same way. If the token or `<part>Class` prop you need doesn't exist, don't reach in with a selector and don't edit the framework file: override what you can through mixed classes or your theme, and past that, replace the component with a site component of your own.
 
-Bare HTML tags, `.is-*` states, and ARIA attribute selectors are fine inside your own block. Theme files are the only sanctioned exception to this rule.
+Bare HTML tags, `.is-*` states, and ARIA attribute selectors are fine inside your own block. Selectors only cross block boundaries in the bounded exceptions described above (theme files, a print sheet).
 
 ### Globals lose to components, and that is the point
 
diff --git a/src/content/docs/browser-support.mdx b/src/content/docs/browser-support.mdx
new file mode 100644
index 00000000..14380a95
--- /dev/null
+++ b/src/content/docs/browser-support.mdx
@@ -0,0 +1,23 @@
+---
+title: "Browser Support"
+description: "mCSS targets Baseline 2024: what that means, and how to change the compile floor"
+lastUpdate: 2026-08-16
+version: 1
+---
+
+<section class="prose">
+
+**mCSS targets [Baseline](https://web.dev/baseline) 2024**.
+
+It uses cascade layers (`@layer`), nesting, `:has()`, and other modern CSS features natively, with no polyfills. In practice that means the versions of Chrome, Edge, Firefox, and Safari that shipped late 2024 and after:
+
+| Browser        | Version |
+| -------------- | ------- |
+| Chrome         | 130+    |
+| Edge           | 130+    |
+| Firefox        | 132+    |
+| Safari (+ iOS) | 18.2+   |
+
+If you install mCSS with the [PostCSS option](/docs/installation#option-3-compiled-via-postcss), it is possible to modify mCSS browser support via the `.browserslistrc` file. Using a different target, `postcss-preset-env` will start polyfilling the newer features. But it's not recommended: it will create file bloat and it's not foolproof. Some features can break in the process. (See [this blog post](/blog/postcss-setup-for-mcss) for details on what can break when changing the default browser support.)
+
+</section>
diff --git a/src/content/docs/template.mdx b/src/content/docs/components.mdx
similarity index 53%
rename from src/content/docs/template.mdx
rename to src/content/docs/components.mdx
index 87865e04..f1ebd122 100644
--- a/src/content/docs/template.mdx
+++ b/src/content/docs/components.mdx
@@ -1,17 +1,30 @@
 ---
-title: "Marketing Template"
-description: "A complete marketing one-pager built from nothing but the framework and the component library"
-lastUpdate: 2026-07-21
+title: "Components"
+description: "The component part of mCSS: the built-in component library, your own site components, and the marketing template"
+lastUpdate: 2026-08-16
 version: 1
 ---
 
 <section class="prose">
 
-A complete marketing one-pager built from nothing but the framework and the component library: no site CSS, no custom components, no JavaScript beyond what the components ship with. It is both a working template and the proof that the library composes into a real page.
+Components in a mCSS project come in two kinds:
 
-**[Open the live template](/templates/marketing)**, and use the switcher in its bottom corner to flip the whole page between the default look and the [wireframe theme](/docs/themes): same markup, one stylesheet swapped.
+- **Built-in components**: a [library of ready-made components](/components/start) built on top of mCSS. Like the rest of the framework, you copy the pieces you want into your project and own the code. It ships separately (`mcss.components.css`), so skip it entirely if you don't need it.
+- **Your own components**: mCSS is designed for building your own, one `component.*.css` file per block, in your own CSS folder. The [class syntax](/docs/start#mcss-classes-syntax) and [component conventions](/docs/start#components) from Getting Started are all you need.
 
-The whole page sits on the base [`.layout` scaffold](/docs/global#layouts): `<body class="layout">` wrapping a `.layout_content` main, which gives the header / content / footer app shell with a sticky footer. Inside that shell, from top to bottom:
+The two kinds mix freely: this very site's pages are built from library components, site components, and the occasional page override.
+
+</section>
+
+## Marketing template
+
+<section class="prose">
+
+A complete marketing one-pager built with mCSS and its built-in Astro components: no site CSS, no custom components, no JavaScript beyond what the components ship with.
+
+**[Open the live template](/templates/marketing)**, and use the switcher in its bottom corner to swap between the default theme and the [wireframe theme](/docs/default-theme#full-themes).
+
+The page uses the [base layout scaffold](/docs/layout#layouts) and the following components, from top to bottom:
 
 - [Banner](/components/banner)
 - [Header](/components/header) (sticky, with mobile menu)
@@ -20,51 +33,49 @@ The whole page sits on the base [`.layout` scaffold](/docs/global#layouts): `<bo
 - [Pricing](/components/pricing)
 - [FAQ](/components/faq) with exclusive-open items
 - Closing-CTA [Section](/components/section)
-- [Footer](/components/footer).
+- [Footer](/components/footer)
 
 </section>
 
-## Using it
+### Using it
 
 <section class="prose">
 
-Copy [`marketing.astro`][srcTemplate] into your own `src/pages/` (as `index.astro`, most likely) and definitely swap the copy, links, and pricing for your own. Everything it needs is listed below; if you copied the whole framework and component library per [Getting started](/docs/start), you already have all of it.
+Copy [`marketing.astro`][srcTemplate] into your own `src/pages/` (as `index.astro`, most likely) and definitely swap the copy ;) Everything it needs is listed below. If you copied the whole framework and component library per [Getting started](/docs/start), you should be good to go.
 
-Two blocks in the file exist for the docs demo and are safe to touch:
+Two blocks in the file exist for the docs demo and are safe to remove:
 
-- The **theme switcher** at the bottom (marked with a comment) is just for the demo. Delete it.
-- The **inline `@layer` statement** at the top of `<head>` pins the cascade-layer order before any stylesheet loads. Only needed when a theme is loaded as a separate `<link>` (layer priority is set by first occurrence, and the theme link may parse first). If you activate your theme with an `@import` in your entry CSS instead, you can drop it.
+- The theme switcher at the bottom (marked with a comment) is just for the demo.
+- The inline `@layer` statement at the top of `<head>` sets the cascade-layer order before any stylesheet loads. It's needed when a theme is loaded as a separate `<link>`, which we do here to power the theme switcher.
 
 <div class="docs_oversizedTable">
 
-| What             | Files                                                                                                                                                                                   |
-| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| The page         | `src/pages/templates/marketing.astro` ([source][srcTemplate])                                                                                                                           |
+| What             | Files                                                                                                                                                                             |
+| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| The page         | `src/pages/templates/marketing.astro` ([source][srcTemplate])                                                                                                                     |
 | Astro components | `Banner`, `Header`, `Hero`, `Section`, `Tiles`, `FeatureItem`, `Testimonial`, `Avatar` (used by Testimonial), `PricingCard`, `Faq`, `FaqItem`, `Footer` ([source][srcComponents]) |
-| Framework CSS    | The framework entries `mcss.css` and `mcss.components.css` cover every component and layout style used ([source][srcFramework])                                                         |
-| Theme (optional) | `theme.wireframe.css`, only if you keep the switcher ([source][srcWireframe])                                                                                                           |
-| Icons            | `menu`, `x`, `check`, `circle-check`, `moon-star`, `external-link`, `rotate-ccw`, `mail`, `heart` ([source][srcIcons])                                                                  |
-| Scripts          | `src/scripts/utilities.js` (the Header's scroll throttle) ([source][srcScripts])                                                                                                        |
+| mCSS             | The framework entries `mcss.css`, `mcss.components.css`, and `theme.default.css` cover every style used ([source][srcFramework])                                                  |
+| Icons            | `menu`, `x`, `check`, `circle-check`, `moon-star`, `external-link`, `rotate-ccw`, `mail`, `heart` ([source][srcIcons])                                                            |
+| Scripts          | `src/scripts/utilities.js` (the Header's scroll throttle) ([source][srcScripts])                                                                                                  |
 
 </div>
 
 [srcTemplate]: https://github.com/minimaldesign/mCSS/blob/main/src/pages/templates/marketing.astro
 [srcComponents]: https://github.com/minimaldesign/mCSS/tree/main/src/components
 [srcFramework]: https://github.com/minimaldesign/mCSS/tree/main/src/styles/framework
-[srcWireframe]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/theme.wireframe.css
 [srcIcons]: https://github.com/minimaldesign/mCSS/tree/main/src/assets/icons
 [srcScripts]: https://github.com/minimaldesign/mCSS/blob/main/src/scripts/utilities.js
 
 </section>
 
-## Useful recipes
+### Useful recipes
 
 <section class="prose">
 
-Even if you don't use the whole page, three patterns in it transfer anywhere:
+Even if you don't use the whole page, three patterns in it are useful to know:
 
 - **The closing CTA** is not a component; it is a `Section` with `variant="primary"` and a `.section_actions` row (see the [Section recipes](/components/section)).
-- **The pricing row** is three [PricingCards](/components/pricing) on the plain [grid](/docs/global#grid) (`col="1" col-md="3"`), with `highlighted` on the recommended tier.
+- **The pricing row** is three [PricingCards](/components/pricing) on the plain [grid](/docs/layout#grid) (`col="1" col-md="3"`), with `highlighted` on the recommended tier.
 - **Exclusive-open FAQ** items share a `name`, so the browser closes one when another opens. Native `<details>`, no JavaScript.
 
 </section>
diff --git a/src/content/docs/elements.mdx b/src/content/docs/default-html.mdx
similarity index 94%
rename from src/content/docs/elements.mdx
rename to src/content/docs/default-html.mdx
index 72a8b35e..47b58748 100644
--- a/src/content/docs/elements.mdx
+++ b/src/content/docs/default-html.mdx
@@ -1,10 +1,35 @@
 ---
-title: "HTML Elements"
-description: "Default styles for bare HTML elements: text, forms, media, tables"
-lastUpdate: 2024-08-27
-version: 0.1
+title: "Default HTML"
+description: "The reset, and the default styling of every bare HTML element"
+lastUpdate: 2026-08-16
+version: 1
 ---
 
+<section class="prose">
+
+<div class="docs_oversizedTable">
+
+| File name        | Source        |
+| ---------------- | ------------- |
+| `base.reset.css` | [Github][src] |
+
+</div>
+
+The mCSS reset is kept to a minimum. It does the following:
+
+- It sets the `box-sizing` to `border-box`
+- It removes the default `margin` on all elements
+- It sets the document's `min-height` to 100%.
+
+The rest of the defaults that would traditionally be included in a "reset" or "normalize" file are handled by the `elements.*.css` files. Refer to the [mCSS File structure][structure] section of _Getting Started_ for more details.
+
+You can find an example of all HTML elements default styling in the sections [below](#sectioning).
+
+</section>
+
+[structure]: /docs/start#mcss-file-structure
+[src]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/base.reset.css
+
 import BaseLayout from "../../layouts/BaseLayout.astro";
 import DocsPostLayout from "../../layouts/DocsPostLayout.astro";
 
@@ -49,7 +74,7 @@ import iconX from '../../assets/icons/x.svg?raw';
 
   ### Headings
 
-  Heading sizes are fluid via `clamp()` set on `--heading-font-size-h1`—`--heading-font-size-h6` tokens: each interpolates from a minimum size (at 480px viewports and below) to a maximum (from 1024px up), so the type scale tightens on small screens without media queries. The preferred value mixes `rem` with `vw`, which keeps browser text zoom working. The tokens live in `settings.ui.css` with the rest of the heading family (`--heading-spacing-*`, `--heading-line-height-*`), mapping each level onto the [type scale](/docs/tokens#font-size); override any of them in your theme to change how a heading level scales.
+  Heading sizes are fluid via `clamp()` set on `--heading-font-size-h1`—`--heading-font-size-h6` tokens: each interpolates from a minimum size (at 480px viewports and below) to a maximum (from 1024px up), so the type scale tightens on small screens without media queries. The preferred value mixes `rem` with `vw`, which keeps browser text zoom working. The tokens live in `theme.default.ui.css` with the rest of the heading family (`--heading-spacing-*`, `--heading-line-height-*`), mapping each level onto the [type scale](/docs/default-theme#font-size); override any of them in your theme to change how a heading level scales.
 
 <div class="docs_oversizedTable">
 
diff --git a/src/content/docs/tokens.mdx b/src/content/docs/default-theme.mdx
similarity index 66%
rename from src/content/docs/tokens.mdx
rename to src/content/docs/default-theme.mdx
index 9d8e2143..e1070fe8 100644
--- a/src/content/docs/tokens.mdx
+++ b/src/content/docs/default-theme.mdx
@@ -1,7 +1,7 @@
 ---
-title: "Tokens"
-description: "Design tokens: the CSS custom properties for color, typography, spacing, and more that customize the framework"
-lastUpdate: 2026-07-28
+title: "Default Theme"
+description: "Every design value in mCSS lives in the default theme: raw tokens, UI tokens, and the themes that override them"
+lastUpdate: 2026-08-16
 version: 1
 ---
 
@@ -9,51 +9,142 @@ import Notice from "../../components/Notice.astro";
 
 <section class="prose">
 
-| File name             | Source        |
-| --------------------- | ------------- |
-| `settings.tokens.css` | [Github][src] |
+<div class="docs_oversizedTable">
+
+| File name                  | Description                                 | Source                 |
+| -------------------------- | ------------------------------------------- | ---------------------- |
+| `theme.default.css`        | Default theme entry: imports the next two   | [Github][srcDefault]   |
+| `theme.default.tokens.css` | Raw tokens: colors, type, spacing, etc.     | [Github][src]          |
+| `theme.default.ui.css`     | UI tokens: what elements and components use | [Github][srcUi]        |
+| `theme.starter.css`        | Use it as a start for your own theme        | [Github][srcStarter]   |
+| `theme.wireframe.css`      | Full swappable theme example                | [Github][srcWireframe] |
+
+</div>
 
-[src]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.tokens.css
+[srcDefault]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/theme.default.css
+[src]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/theme.default.tokens.css
+[srcUi]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/theme.default.ui.css
+[srcStarter]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/theme.starter.css
+[srcWireframe]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/theme.wireframe.css
 
-**Design tokens** are the "atoms" of a design system. They define the design elements of a user interface, such as colors, typography, and spacing.
+Every design value in mCSS (colors, fonts, spacing, component styling) lives in the **default theme**. Your own theme should be imported after it and just override what it needs.
 
-In mCSS, tokens are CSS custom properties that provide a flexible, coherent, and harmonious set of values designed to make implementing UI/UX projects fast and easy.
+**Never edit the default theme files.** Keep your design decisions in your own theme, so updating the framework is easy.
 
 </section>
 
-## How to use tokens
+## Activating a theme
 
 <section class="prose">
 
-When you start a new project, open `settings.tokens.css` and change the values of as many tokens as necessary to match the design you're planning to implement. (Things like spacing might not need to change, but you'll almost certainly need to customize your `base` and `primary` colors for instance.) For deviations you want to keep swappable, put the overrides in a [theme](/docs/themes) instead of editing the defaults.
+Activate the default theme right after the framework, then (optionally) your own theme:
+
+```css
+@import url(./framework/mcss.css);
+@import url(./framework/mcss.components.css); /* optional */
+@import url(./framework/theme.default.css);
+@import url(./site/theme.starter.css); /* your theme */
+```
 
-The same discipline applies to the CSS you write on top of the framework: **no raw color and no raw type size in a `component.*.css` file.** If your theme does not name the value you need, add a token to the theme and use that. A `#8a5500` or a `1.0625rem` sitting in a component is a design decision nobody can find, and the second use of it will be a slightly different number. Spacing is more forgiving (a `2px` optical nudge is a property of that component and belongs to it), but color and type size are the design system, and the design system lives in one file.
+Theme files are **self-layered** and your theme goes in the `theme.user` layer:
+
+```css
+/* theme.starter.css */
+@layer theme.user {
+  /* […] */
+}
+```
+
+mCSS is set up so that, regardless of how you load your theme (`@import`, `<link>`, or bundler), it always overrides the default theme.
 
 </section>
 
-## Interface tokens
+## Writing your own theme
 
 <section class="prose">
 
-<div class="docs_oversizedTable">
+Copy [`theme.starter.css`][srcStarter] and start overriding:
 
-| File name         | Source          |
-| ----------------- | --------------- |
-| `settings.ui.css` | [Github][srcUi] |
+- **Tokens first.** Most themes never need a selector: raw tokens for the palette and type, UI tokens for general UI changes, and component tokens for details.
+- **Style rules only for what tokens can't express**: pseudo-elements, `nth-child` rhythm, font smoothing, `text-wrap`, etc. Your theme file is the one place where overriding framework classes and HTML elements from other files is ok.
+- **Check tokens before writing a style rule.** The page is already painted from `--body-background-color`, `--text-color`, and `--text`: set those instead of writing a `body` rule for background, color, or font.
+- **No `!important`.** It will break the layer system. And if you need `!important`, it's a sign you're doing something wrong.
 
-</div>
+</section>
 
-[srcUi]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.ui.css
+## Full themes
 
-Interface tokens are the decisions layer over the raw scales. Every one is named for what it's _for_ (an element, a component, or a shared meaning) and standardizes UI decisions in logical groups: semantic aliases like `--ui-border-color` or `--success-*`, element defaults (`--heading-*`, `--input-*`, ...), plus every component's token defaults (`--bt-*`, `--card-*`, ...). That naming is the whole split between the two files: a token named for what it _is_ (a step on a scale, like `--sm1` or `--base-500`) lives in `settings.tokens.css`; a token named for what it's _for_ lives in `settings.ui.css`. This gives tokens meaning and context, and it's what makes [themes](/docs/themes) powerful: override one interface token and every rule that consumes it follows.
+<section class="prose">
 
-An interface token usually takes another token for value: another interface token when the meaning is shared (`--input-border-color` is `--ui-border-color`), or a scale token when the value should follow the system scales (`--fieldset-padding` is `--sm3`). A raw value is correct only where following the scales would be wrong: content like separator strings and icon URLs, geometry tuned to one control (`--toggle-width`), and element-relative measures like the `em` heading spacing, which tracks each heading's own size instead of the page scale. The test: if a theme retuned the scales, should this value follow?
+A theme can also be a complete, distributable style. mCSS ships with the [`theme.wireframe.css`][srcWireframe] example. (Flip the switcher on the [marketing template](/templates/marketing) to see it live.)
 
-`elements.*` and `global.*` files tend to use interface tokens, while `component.*` files mix them with low level tokens. There are no hard and fast rules about the type of token you should use in your custom component. Just try to think where else this style is used in the design and if it comes up in many places with the same context, a new interface token is probably the best option.
+A full theme is an entry that imports the default theme itself and overrides on top, so you activate it INSTEAD of the default:
+
+```css
+@import url(./framework/mcss.css);
+/* theme.default.css is swapped */
+@import url(./framework/theme.wireframe.css);
+```
+
+The wireframe file is a good read if you're planning a full theme. Token overrides do most of the work (grayscale palette, handwriting font stack, "paper cutout" shadows), a few style rules cover the rest (wavy underlines, tilted cards), and it's deliberate about what it leaves alone: the focus ring stays crisp, and text stays high-contrast.
 
 </section>
 
-## Color
+## Tokens
+
+<section class="prose">
+
+Tokens are CSS custom properties, split in two files:
+
+- **Raw tokens** are named for what they **are**: raw values like colors, type sizes, spacing, radii, etc.
+- **UI tokens** are named for what they're **for**: they map raw tokens to elements and components.
+
+Because components read `var(--ui-border-color)` instead of a raw hex value, one override can have three levels of blast radius:
+
+```css
+@layer theme.user {
+  :root {
+    /* Whole palette shifts */
+    --base-950: #1a1208;
+
+    /* Every bordered surface at once */
+    --ui-border-color: light-dark(var(--base-300), var(--base-600));
+
+    /* Single component override */
+    --bt-border-radius: 0;
+  }
+}
+```
+
+That's why small theme files can go far with a handful of token overrides.
+
+</section>
+
+## How to use tokens
+
+<section class="prose">
+
+When you start a new project, put your design's raw token values in your own theme: your `base` and `primary` colors, your font stacks, and whatever else your design calls for. The defaults are sensible and things like spacing might not need to change.
+
+Then continue overriding UI tokens provided by mCSS as you go, and creating your own when needed. Do not add hard-coded "magic numbers" anywhere else but in your theme's tokens.
+
+</section>
+
+## UI tokens
+
+<section class="prose">
+
+UI tokens are named for what they're for: semantic aliases (`--ui-border-color`), element defaults (`--heading-font`, `--input-padding`, etc.), and every component's defaults (`--badge-color`, `--card-spacing`, etc.).
+
+A UI token usually takes another token for value: a UI token when the meaning is shared (`--input-border-color` is `--ui-border-color`), or a raw token when the value should stay in sync with the rest of the design (`--fieldset-padding` is `--sm3`). Hard-coded values are for the few places where that sync would be wrong: content (separator strings, icon URLs), geometry tuned to one control (`--toggle-width`), and element-relative `em` measures.
+
+For your own components, there's no hard and fast rule about which kind of token to use. If the same style comes up in several places with the same meaning, a new UI token is probably the best option.
+
+</section>
+
+## Raw tokens
+
+### Color
 
 <section class="prose">
 
@@ -61,7 +152,7 @@ Check out [tints.dev](https://www.tints.dev) if you want to make your own palett
 
 <div class="grid" col="1" col-lg="2">
   <div class="grid_item">
-  ### Base
+  #### Base
 
 | Token      | Value   | Demo                                      |
 | ---------- | ------- | ----------------------------------------- |
@@ -80,7 +171,7 @@ Check out [tints.dev](https://www.tints.dev) if you want to make your own palett
 
   </div>
   <div class="grid_item">
-  ### Primary
+  #### Primary
 
 | Token         | Value   | Demo                                         |
 | ------------- | ------- | -------------------------------------------- |
@@ -98,7 +189,7 @@ Check out [tints.dev](https://www.tints.dev) if you want to make your own palett
 
   </div>
   <div class="grid_item">
-  ### Feedback
+  #### Feedback
 
 | Token       | Value   | Demo                                       |
 | ----------- | ------- | ------------------------------------------ |
@@ -118,9 +209,9 @@ Check out [tints.dev](https://www.tints.dev) if you want to make your own palett
 | `maybe-400` | #ffc220 | <div class="docs_box bgc-maybe-400"></div> |
 | `maybe-500` | #f9a007 | <div class="docs_box bgc-maybe-500"></div> |
 
-### Highlight
+#### Highlight
 
-The text marker color, consumed by the `--marker-color` interface token (what `<mark>` uses). Override `--highlight-500` in a theme to restyle every highlight.
+The text marker color, consumed by the `--marker-color` UI token (what `<mark>` uses). Override `--highlight-500` in a theme to restyle every highlight.
 
 | Token           | Value   | Demo                                                                        |
 | --------------- | ------- | --------------------------------------------------------------------------- |
@@ -131,7 +222,7 @@ The text marker color, consumed by the `--marker-color` interface token (what `<
 
 </section>
 
-## Dimension
+### Dimension
 
 <section class="prose">
 
@@ -173,7 +264,7 @@ Dimension tokens can be used anywhere you need to set `margin`, `padding`, `widt
 
 </section>
 
-## Aspect ratio
+### Aspect ratio
 
 <section class="prose">
 
@@ -187,13 +278,13 @@ Dimension tokens can be used anywhere you need to set `margin`, `padding`, `widt
 
 </section>
 
-## Typography
+### Typography
 
 <section class="prose">
 
-### Font stack
+#### Font stack
 
-There are 3 font stacks set up by default for the `font-family` CSS Property.
+There are 3 font stacks set up by default for the `font-family` CSS property.
 
 | Token     | Value                                                                                                                                                           |
 | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -211,9 +302,9 @@ If you'd like to bring in your own fonts or [Google fonts](https://fonts.google.
   `sans-serif` is the browser default.
 </Notice>
 
-### Font size
+#### Font size
 
-Check out [typescale.com ](https://typescale.com) if you need help creating your own sizes.
+Check out [typescale.com](https://typescale.com) if you need help creating your own sizes.
 
 <div class="docs_oversizedTable">
 
@@ -233,9 +324,9 @@ Check out [typescale.com ](https://typescale.com) if you need help creating your
 
 </div>
 
-The heading font sizes (`--heading-font-size-h1`…`-h6`) build on this scale but are [interface tokens](#interface-tokens); they're documented with [the headings themselves](/docs/elements#headings).
+The heading font sizes (`--heading-font-size-h1`…`-h6`) build on this scale but are [UI tokens](#ui-tokens); they're documented with [the headings themselves](/docs/default-html#headings).
 
-### Font weight
+#### Font weight
 
 | Token         | Value | Demo                                                 |
 | ------------- | ----- | ---------------------------------------------------- |
@@ -246,7 +337,7 @@ The heading font sizes (`--heading-font-size-h1`…`-h6`) build on this scale bu
 | `bold`        | 700   | <div class="font-bold">Sample demo text</div>        |
 | `black`       | 900   | <div class="font-black">Sample demo text</div>       |
 
-### Letter spacing
+#### Letter spacing
 
 | Token          | Value   | Demo                                             |
 | -------------- | ------- | ------------------------------------------------ |
@@ -256,7 +347,7 @@ The heading font sizes (`--heading-font-size-h1`…`-h6`) build on this scale bu
 | `tracking-xl`  | 0.075em | <div class="tracking-xl">Sample demo text</div>  |
 | `tracking-xxl` | 0.15em  | <div class="tracking-xxl">Sample demo text</div> |
 
-### Line height
+#### Line height
 
 | Token         | Value | Demo                                                                |
 | ------------- | ----- | ------------------------------------------------------------------- |
@@ -269,13 +360,13 @@ The heading font sizes (`--heading-font-size-h1`…`-h6`) build on this scale bu
 
 </section>
 
-## Borders
+### Borders
 
 <section class="prose">
   <div class="grid" col="1" col-lg="2">
     <div class="grid_item docs_radius">
 
-### Border radius
+#### Border radius
 
 | Token          | Value | Demo        |
 | -------------- | ----- | ----------- |
@@ -286,10 +377,10 @@ The heading font sizes (`--heading-font-size-h1`…`-h6`) build on this scale bu
 | `radius-xxl`   | 16px  | <div></div> |
 | `radius-round` | 1e5px | <div></div> |
 
-    </div>
-    <div class="grid_item docs_border">
+</div>
+<div class="grid_item docs_border">
 
-      ### Border width
+#### Border width
 
 | Token        | Value | Demo        |
 | ------------ | ----- | ----------- |
@@ -304,13 +395,13 @@ The heading font sizes (`--heading-font-size-h1`…`-h6`) build on this scale bu
   </div>
 </section>
 
-## Drop Shadow
+### Drop Shadow
 
 <section class="prose">
 
 It wouldn't be super useful to list the values here. You can look at them [on Github][githubShadows] if you're curious.
 
-[githubShadows]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.tokens.css#L217
+[githubShadows]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/theme.default.tokens.css#L217
 
   <div class="docs_shadow">
 
@@ -325,7 +416,7 @@ It wouldn't be super useful to list the values here. You can look at them [on Gi
   </div>
 </section>
 
-## Opacity
+### Opacity
 
 <section class="prose">
 
@@ -340,7 +431,7 @@ It wouldn't be super useful to list the values here. You can look at them [on Gi
 
 </section>
 
-## Z-index
+### Z-index
 
 <section class="prose">
 
@@ -357,7 +448,7 @@ It wouldn't be super useful to list the values here. You can look at them [on Gi
 
 </section>
 
-## Transition
+### Transition
 
 <section class="prose">
 
diff --git a/src/content/docs/global.mdx b/src/content/docs/global.mdx
deleted file mode 100644
index ff37b87f..00000000
--- a/src/content/docs/global.mdx
+++ /dev/null
@@ -1,358 +0,0 @@
----
-title: "Global Styles"
-description: "Structural patterns: grid, layout, prose, wrap, and accessibility utilities"
-lastUpdate: 2026-07-24
-version: 1.0
----
-
-import Notice from "../../components/Notice.astro";
-import LayoutThumb from "../../components/_LayoutThumb.astro";
-
-## Grid
-
-<section class="docs_section prose">
-
-<div class="docs_oversizedTable">
-
-| File name         | Source            |
-| ----------------- | ----------------- |
-| `global.grid.css` | [Github][srcGrid] |
-
-</div>
-
-[srcGrid]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/global.grid.css
-
-The grid system is extremely easy to use, light weight, and very flexible. It uses the [CSS grid property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid) under the hood, but it lets you set up your layouts directly into your HTML. The implementation is heavily inspired by [Raster](https://github.com/rsms/raster).
-
-### Syntax
-
-It's composed of 2 classes: `.grid` for the container, and `.grid_item` for each grid item.
-
-The default grid gap is defined as a custom property in [`settings.ui.css`](/docs/tokens#interface-tokens) and is responsive: `16px` (`--sm1`) on small screens, stepping up to `24px` (`--sm3`) at the `--md` breakpoint (768px). You can override `--grid-column-gap` and `--grid-row-gap` globally in your own theme, or on a specific `.grid` element. A `grid-flush` modifier is available if you don't want any gap.
-
-Because `.grid` reads its gaps from those two custom properties, overriding a specific grid is just a matter of setting them on the element. Add a class of your own:
-
-```css
-.photoWall {
-  --grid-column-gap: var(--xs2);
-  --grid-row-gap: var(--xs2);
-}
-```
-
-```html
-<ul class="grid photoWall" col="2" col-lg="4">
-  ...
-</ul>
-```
-
-You define the amount of columns of your grid with a custom `col` attribute and the position/width of your grid_items with the custom `span` attribute.
-
-The `span` property syntax follows these 5 patterns:
-
-- `row`: the grid_item spans a full row
-- `3`: the grid_item start in the next column and spans 3 columns.
-- `3-5`: the grid_item starts in column 3 and ends in column 5.
-- `3+5`: the grid_item starts in column 3 and spans for 5 columns.
-- `3..`: the grid_item starts in column 3 and spans the remainder of rows.
-
-Both the `col` and `span` attributes have responsive versions, which use [the "mobile first" approach][1] of the `--*-n-above` media queries. The available tiers are **`-md`, `-lg`, and `-xl`** (`col-md`, `span-lg`, etc.); other suffixes like `col-sm` or `col-xxl` don't exist and are silently ignored. Grids support up to 24 columns. (The file is generated by `src/tools/generate.global.grid.cjs`; add a tier there if you need one.)
-
-[1]: /docs/media-queries#recommended-responsive-setup
-
-<Notice type="info" title="HTML Validation">
-  The custom attribute will not validate. If this is important to you, you'll
-  need to change the attributes to `data-col` and `data-span` in both the CSS
-  and HTML. I personally prefer to use shorter, more legible attributes. Check
-  this thread on Github if you'd like to read more than you've ever wanted to
-  know about [custom attributes and
-  validation](https://github.com/whatwg/html/issues/2271).
-</Notice>
-
-### Examples
-
-#### Different types of spans
-
-9 colum grid, with all types of spans.
-
-{/* prettier-ignore */}
-<div class="grid docs_grid" col="9">
-  <div class="grid_item docs_grid_item" span="2"><span>2</span></div>
-  <div class="grid_item docs_grid_item" span="4-5"><span>4-5</span></div>
-  <div class="grid_item docs_grid_item" span="6..">6..</div>
-  <div class="grid_item docs_grid_item" span="2-3"><span>2-3</span></div>
-  <div class="grid_item docs_grid_item" span="5.."><span>5..</span></div>
-  <div class="grid_item docs_grid_item" span="2+3"><span>2+3</span></div>
-  <div class="grid_item docs_grid_item" span="6+2"><span>6+2</span></div>
-  <div class="grid_item docs_grid_item" span="row"><span>row</span></div>
-  <div class="grid_item docs_grid_item" span="4+2"><span>4+2</span></div>
-</div>
-
-```html
-<div class="grid" col="9">
-  <div class="grid_item" span="2">2</div>
-  <div class="grid_item" span="4-5">4-5</div>
-  <div class="grid_item" span="6..">6..</div>
-  <div class="grid_item" span="2-3">2-3</div>
-  <div class="grid_item" span="5..">5..</div>
-  <div class="grid_item" span="2+3">2+3</div>
-  <div class="grid_item" span="6+2">6+2</div>
-  <div class="grid_item" span="row">row</div>
-  <div class="grid_item" span="4+2">4+2</div>
-</div>
-```
-
-#### Responsive grid
-
-The grid layout follows a "mobile first" approach using `--*-n-above` media queries.
-
-The following example goes from 1 → 4 → 9 → 12 columns. (Resize window to see it in action.)
-
-<div class="grid docs_grid" col="1" col-md="4" col-lg="9" col-xl="12">
-  <div class="grid_item docs_grid_item">1</div>
-  <div class="grid_item docs_grid_item">2</div>
-  <div class="grid_item docs_grid_item">3</div>
-  <div class="grid_item docs_grid_item">4</div>
-  <div class="grid_item docs_grid_item">5</div>
-  <div class="grid_item docs_grid_item">6</div>
-  <div class="grid_item docs_grid_item">7</div>
-  <div class="grid_item docs_grid_item">8</div>
-  <div class="grid_item docs_grid_item">9</div>
-  <div class="grid_item docs_grid_item">10</div>
-  <div class="grid_item docs_grid_item">11</div>
-  <div class="grid_item docs_grid_item">12</div>
-</div>
-
-```html
-<div class="grid" col="1" col-md="4" col-lg="9" col-xl="12">[…]</div>
-```
-
-</section>
-
-## Wrap
-
-<section class="docs_section prose">
-
-<div class="docs_oversizedTable">
-
-| File name         | Source            |
-| ----------------- | ----------------- |
-| `global.wrap.css` | [Github][srcWrap] |
-
-</div>
-
-[srcWrap]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/global.wrap.css
-
-The `.wrap` global class is a simple content wrapper that will center your content on the page and add some left/right padding on small viewports.
-
-The content column comes in three width presets, set with a modifier on the wrapper: `.wrap-sm`, `.wrap-md`, and `.wrap-lg`. A bare `.wrap` uses the `md` width (`minmax(0, 70ch)`). There is also a `.wrap_content-fullBleed` modifier for children that should extend to the full size of the viewport. See [demo](/demos/wrap).
-
-### Syntax
-
-```html
-<div class="wrap">
-  <section class="wrap_content">
-    <!-- Reading width content (md preset) -->
-  </section>
-</div>
-
-<div class="wrap wrap-lg">
-  <section class="wrap_content">
-    <!-- Wider content (up to 900px) -->
-  </section>
-</div>
-
-<div class="wrap">
-  <section class="wrap_content wrap_content-fullBleed">
-    <!-- Viewport width content -->
-  </section>
-</div>
-```
-
-### Settings
-
-You can customize 3 diffent sizes of left/right padding for responsive designs as well as the width of your content. The values below are set in `settings.ui.css`.
-
-<div class="docs_oversizedTable">
-
-| token             | value                  | Description                      |
-| ----------------- | ---------------------- | -------------------------------- |
-| `wrap-spacing`    | `var(--sm1)`           | default left/right padding       |
-| `wrap-md-spacing` | `var(--sm3)`           | left/right padding tablet and up |
-| `wrap-lg-spacing` | `0`                    | left/right padding laptop and up |
-| `wrap-width-sm`   | `minmax(0, 55ch)`      | narrow column (`.wrap-sm`)       |
-| `wrap-width-md`   | `minmax(0, 70ch)`      | reading column (`.wrap-md`)      |
-| `wrap-width-lg`   | `minmax(0, 900px)`     | wide column (`.wrap-lg`)         |
-| `wrap-width`      | `var(--wrap-width-md)` | width of a bare `.wrap`          |
-
-</div>
-
-- More info on [themes](/docs/themes).
-- More info on [responsive setup](/docs/media-queries#recommended-responsive-setup).
-
-</section>
-
-## Layouts
-
-<section class="docs_section prose">
-
-<div class="docs_oversizedTable">
-
-| File name           | Source              |
-| ------------------- | ------------------- |
-| `global.layout.css` | [Github][srcLayout] |
-
-</div>
-
-[srcLayout]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/global.layout.css
-
-Page-level scaffolds: the skeleton between your `body` tag and your content. Every variant extends the same `.layout` base, an app shell with a header, a stretching content area, and a sticky footer.
-
-### Syntax
-
-```html
-<body class="layout layout-sidebar">
-  <header>…</header>
-  <div class="layout_content">
-    <aside class="layout_content_aside">…</aside>
-    <main class="layout_content_main">…</main>
-  </div>
-  <footer>…</footer>
-</body>
-```
-
-The header and footer are optional: a bare `.layout` with only `.layout_content` still gives you a full-height page (that's what `.layout-cover` relies on).
-
-### The layouts
-
-Each thumbnail links to a full-page demo built from labeled color blocks. The demos are the honest version: resize the window to see the breakpoint collapses, sticky footer, and full-viewport behavior that a static diagram can't show.
-
-<div class="grid" col="2" col-lg="3">
-  <div class="grid_item">
-    <LayoutThumb variant="centered" />
-  </div>
-  <div class="grid_item">
-    <LayoutThumb variant="sidebar" />
-  </div>
-  <div class="grid_item">
-    <LayoutThumb variant="sidebar-end" />
-  </div>
-  <div class="grid_item">
-    <LayoutThumb variant="docs" />
-  </div>
-  <div class="grid_item">
-    <LayoutThumb variant="split" />
-  </div>
-  <div class="grid_item">
-    <LayoutThumb variant="cover" />
-  </div>
-</div>
-
-<div class="docs_oversizedTable">
-
-| Class                 | What it's for                                                                                                                                                             |
-| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.layout`             | The base app shell: header / content / footer with a sticky footer. Required by every variant, usable alone.                                                              |
-| `.layout-centered`    | A single centered reading column (articles, blog posts, legal pages). Width capped at `--layout-content-width`.                                                           |
-| `.layout-sidebar`     | Aside + main from the `--md` breakpoint, single column below it (aside follows source order).                                                                             |
-| `.layout-sidebar-end` | Compose with `.layout-sidebar` to move the aside to the reading end. ("End", not "right": columns follow the writing direction.)                                          |
-| `.layout-docs`        | Documentation shell: nav aside + main + TOC aside (`.layout_content_aside-toc`). One column below `--md` with the asides hidden, nav + main from `--md`, TOC from `--lg`. |
-| `.layout-split`       | Two equal full-height panes (the direct children of `.layout_content`), stacked below `--md`. Auth screens, image + content landings.                                     |
-| `.layout-cover`       | Full-viewport (`100dvh`) cover with content centered both ways. Landing, 404, coming-soon pages.                                                                          |
-
-</div>
-
-<Notice type="info" title="Hidden asides need a menu">
-  `.layout-docs` hides both asides below the `--md` breakpoint. That's
-  deliberate: docs navigation belongs in your header menu on small screens
-  (that's how mcss.dev does it). If your aside content has no other way in, use
-  `.layout-sidebar`, which stacks instead of hiding.
-</Notice>
-
-### The main column is a container
-
-Every scaffold's main column (`.layout_content_main`) is a named [size container](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries) (`container: main / inline-size`). Container-responsive components ([Tiles](/components/tiles)) pick their column count from it instead of the viewport, and your own rules can respond to it with `@container main (width >= …)`.
-
-### Settings
-
-Column widths come from three tokens in `settings.ui.css`. `--layout-toc-width` accepts any grid track size; the `1fr` default lets the TOC absorb whatever space the main column doesn't use.
-
-<div class="docs_oversizedTable">
-
-| token                    | value   | Description                                          |
-| ------------------------ | ------- | ---------------------------------------------------- |
-| `--layout-content-width` | `70ch`  | main column cap (`.layout-centered`, `.layout-docs`) |
-| `--layout-aside-width`   | `245px` | aside column (`.layout-sidebar`, `.layout-docs`)     |
-| `--layout-toc-width`     | `1fr`   | TOC column (`.layout-docs`)                          |
-
-</div>
-
-Override them globally in your [theme](/docs/themes), or per-layout with a scoped rule. mcss.dev itself runs its docs on `.layout-docs` and layers its own specifics on top ([source][srcSiteLayout]): a wider `77ch` reading column and sticky side navs. That file is the pattern to copy when a scaffold gets you 90% of the way.
-
-[srcSiteLayout]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/site/global.layout.css
-
-</section>
-
-## Prose
-
-<section class="docs_section prose">
-
-<div class="docs_oversizedTable">
-
-| File name          | Source             |
-| ------------------ | ------------------ |
-| `global.prose.css` | [Github][srcProse] |
-
-</div>
-
-[srcProse]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/global.prose.css
-
-The global `.prose` class can be used anywhere you need basic typography for long form text, like articles, blog posts, etc.
-
-It makes spacing between paragraphs, lists, tables, etc. consistent. This spacing can be modified in your [theme](/docs/themes) via the `--prose-spacing` token.
-
-The `.prose` class also adds extra styling for `ol`, `ul`, and `code` elements.
-
-</section>
-
-## Accessibility
-
-<section class="docs_section prose">
-
-<div class="docs_oversizedTable">
-
-| File name         | Source            |
-| ----------------- | ----------------- |
-| `global.a11y.css` | [Github][srcA11y] |
-
-</div>
-
-[srcA11y]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/global.a11y.css
-
-This is where accessibility specific classes go. Currently a WIP as [components are being created](/components/start).
-
-</section>
-
-## Animation
-
-<section class="docs_section animation">
-
-<div class="docs_oversizedTable">
-
-| File name              | Source                 |
-| ---------------------- | ---------------------- |
-| `global.animation.css` | [Github][srcAnimation] |
-
-</div>
-
-[srcAnimation]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/global.animation.css
-
-Basic fade in/out animations with flexible start/end opacity values. (More info about [forwards](/blog/css-animation-fill-modes))
-
-```css
-.element {
-  opacity: 0.8;
-  animation: fadeToTransparent 1s forwards;
-}
-```
-
-</section>
diff --git a/src/content/docs/helpers.mdx b/src/content/docs/helpers.mdx
index 8166e7f0..c210aa8b 100644
--- a/src/content/docs/helpers.mdx
+++ b/src/content/docs/helpers.mdx
@@ -6,7 +6,7 @@ version: 0.1
 ---
 
 <section class="prose">
-Helpers are classes for very targeted "one-off" local overrides. Every helper declaration uses `!important`, and because they live in an mCSS [cascade layer](/docs/start#mcss-file-structure), that beats everything: all framework layers, your own unlayered CSS, even normal inline styles. They should be used as little as possible, but they're useful for things like:
+Helpers are classes for very targeted "one-off" local overrides. Every helper declaration uses <code>!&#8288;important</code> and overrides everything else. They should be used as little as possible, but they're useful for things like:
 
 - Designer's request to "make an exception"
 - Quick fix until refactor
@@ -20,9 +20,9 @@ Let's say the request is: _"This component just doesn't look right in that conte
 </div>
 ```
 
-Using helpers is optional and mCSS will work just fine without them. None of the mCSS components rely on them. If you do use them in your project, it's recommended to use [PurgeCSS](https://purgecss.com/getting-started.html) to keep your CSS size to a minimum. For Astro users, the [astro-purgecss integration](https://github.com/codiume/orbit/tree/main/packages/astro-purgecss) does everything for you out of the box once you install it.
+Using helpers is optional and mCSS will work just fine without them. None of the mCSS components rely on them.
 
-Below is a list of all the available helpers. mCSS doesn't include every single CSS property like utility classes frameworks do. It only includes the ones you actually need in those "one-off" situations. I've never needed more than that, but I'm open to add anything that would be useful. Just [open an issue on Github](https://github.com/minimaldesign/mCSS/issues) with your use case and I'll add it in.
+Below is a list of all the available helpers. mCSS doesn't include every single CSS property like utility class frameworks do. It only includes the ones you actually need in those "one-off" situations. I've never needed more than that, but I'm open to adding anything that would be useful. Just [open an issue on Github](https://github.com/minimaldesign/mCSS/issues) with your use case and I'll add it in.
 
 </section>
 
@@ -38,7 +38,7 @@ Below is a list of all the available helpers. mCSS doesn't include every single
 
 ### width, height, margin, and padding
 
-You can combine these properties with any [dimension token](/docs/tokens#dimension) as well as `0`:
+You can combine these properties with any [dimension token](/docs/default-theme#dimension) as well as `0`:
 
 | CSS property           | Class prefix |
 | ---------------------- | ------------ |
@@ -59,7 +59,7 @@ You can combine these properties with any [dimension token](/docs/tokens#dimensi
 | `padding-inline-start` | `pis`        |
 | `padding-inline-end`   | `pie`        |
 
-Both directional sets exist on purpose. Use the logical helpers (`mis`, `mie`, `pis`, `pie`) when the spacing follows the reading direction: an icon gap, a list indent, anything that should flip in a right-to-left layout. Use the physical helpers (`ml`, `mr`, `pl`, `pr`) when the offset is a purely visual choice that should stay on the same side no matter the script direction. In a left-to-right layout they resolve identically.
+Both directional sets exist on purpose. Use the logical helpers (`mis`, `mie`, `pis`, `pie`) when the spacing follows the reading direction. Use the physical helpers (`ml`, `mr`, `pl`, `pr`) when the spacing is purely visual and should stay in the same position no matter the script direction.
 
 #### Examples
 
@@ -95,7 +95,7 @@ Both directional sets exist on purpose. Use the logical helpers (`mis`, `mie`, `
 
 ### color, background-color, and border-color
 
-You can combine this properties with any [color token](/docs/tokens#color):
+You can combine these properties with any [color token](/docs/default-theme#color):
 
 | CSS property       | Class prefix |
 | ------------------ | ------------ |
@@ -192,12 +192,13 @@ Helper classes for the `visibility` property.
 
 ### z-index
 
-Helper classes for the `z-index` property. See also the [z-index token docs](docs/tokens#z-index).
+Helper classes for the `z-index` property. See also the [z-index token docs](/docs/default-theme#z-index).
 
 <div class="docs_oversizedTable">
 
 | Custom Property | CSS Value   | Class       |
 | --------------- | ----------- | ----------- |
+| –               | auto        | `.z-auto`   |
 | `--z-bottom`    | -1000000000 | `.z-bottom` |
 | `--z-0`         | 0           | `.z-0`      |
 | `--z-1`         | 10          | `.z-1`      |
@@ -267,7 +268,7 @@ Helper classes for the `z-index` property. See also the [z-index token docs](doc
 
 ### font-family
 
-See the [font stack tokens](/docs/tokens#font-stack) for details.
+See the [font stack tokens](/docs/default-theme#font-stack) for details.
 
 <div class="docs_oversizedTable">
 
@@ -288,7 +289,7 @@ See the [font stack tokens](/docs/tokens#font-stack) for details.
 
 ### font-weight
 
-See the [font weight tokens](/docs/tokens#font-weight) for details.
+See the [font weight tokens](/docs/default-theme#font-weight) for details.
 
 <div class="docs_oversizedTable">
 
@@ -305,23 +306,37 @@ See the [font weight tokens](/docs/tokens#font-weight) for details.
 
 ### font-size
 
-See the [font size tokens](/docs/tokens#font-size) for details.
-
-| Custom Property | Class         |
-| --------------- | ------------- |
-| `--text-xs`     | `.text-xs`    |
-| `--text-sm`     | `.text-sm`    |
-| `--text-md`     | `.text-md`    |
-| `--text-lg`     | `.text-lg`    |
-| `--text-xl`     | `.text-xl`    |
-| `--display-sm`  | `.display-sm` |
-| `--display-md`  | `.display-md` |
-| `--display-lg`  | `.display-lg` |
-| `--display-xl`  | `.display-xl` |
+See the [font size tokens](/docs/default-theme#font-size) for details.
+
+| Custom Property  | Class           |
+| ---------------- | --------------- |
+| `--text-xs`      | `.text-xs`      |
+| `--text-sm`      | `.text-sm`      |
+| `--text-md`      | `.text-md`      |
+| `--text-lg`      | `.text-lg`      |
+| `--text-xl`      | `.text-xl`      |
+| `--display-sm`   | `.display-sm`   |
+| `--display-md`   | `.display-md`   |
+| `--display-lg`   | `.display-lg`   |
+| `--display-xl`   | `.display-xl`   |
+| `--display-mega` | `.display-mega` |
+| `--display-giga` | `.display-giga` |
+
+### letter-spacing
+
+See the [letter spacing tokens](/docs/default-theme#letter-spacing) for details.
+
+| Custom Property  | Class           |
+| ---------------- | --------------- |
+| `--tracking-sm`  | `.tracking-sm`  |
+| `--tracking-md`  | `.tracking-md`  |
+| `--tracking-lg`  | `.tracking-lg`  |
+| `--tracking-xl`  | `.tracking-xl`  |
+| `--tracking-xxl` | `.tracking-xxl` |
 
 ### line-height
 
-See the [line height tokens](/docs/tokens#line-height) for details.
+See the [line height tokens](/docs/default-theme#line-height) for details.
 
 | Custom Property | Class          |
 | --------------- | -------------- |
@@ -343,7 +358,7 @@ See the [line height tokens](/docs/tokens#line-height) for details.
 | `start`   | `.text-start`   |
 | `end`     | `.text-end`     |
 
-Same split as the spacing helpers: `.text-start` and `.text-end` follow the reading direction (they flip in a right-to-left layout), `.text-left` and `.text-right` always mean the visual side.
+Same as the spacing helpers: `.text-start` and `.text-end` follow the reading direction (they flip in a right-to-left layout), `.text-left` and `.text-right` always mean the visual side.
 
 ### text-transform
 
diff --git a/src/content/docs/installation.mdx b/src/content/docs/installation.mdx
new file mode 100644
index 00000000..b55fcea6
--- /dev/null
+++ b/src/content/docs/installation.mdx
@@ -0,0 +1,149 @@
+---
+title: "Installation"
+description: "Three ways to add mCSS to your project: drop-in bundle, individual files, or source + PostCSS"
+lastUpdate: 2026-08-16
+version: 1
+---
+
+## Installation options
+
+### Option 1: easy install
+
+<section class="prose">
+
+Link the [framework file][dist-min] in your `<head>` and optionally the [components styles][dist-components-min] if you want to use mCSS components:
+
+```html
+<!-- index.html -->
+<head>
+  <!-- […] -->
+  <link rel="stylesheet" href="/css/mcss.min.css" />
+  <link rel="stylesheet" href="/css/mcss.components.min.css" />
+</head>
+```
+
+(Unminified versions ([framework][dist-css], [components][dist-components]) are available if you want to read the code.)
+
+
+### Option 2: individual files
+
+The sweet spot between ease of use and customization options: everything is pre-processed, so there is no build step and no PostCSS. But you can pick and choose which file to include depending on what you need.
+
+Every framework and component file is available pre-processed in [`dist/css/`][dist-dir] with the `@import` index at [`dist/css/mcss.css`][dist-index]. The files are not minified so you can read and understand them. (For the smallest size possible, see the third install option.)
+
+```html
+<!-- index.html -->
+<head>
+  <!-- […] -->
+  <link rel="stylesheet" href="/css/mcss.css" />
+</head>
+```
+
+Add/remove/comment out files in `mcss.css` according to what you need ([more info][mcss-layers]) and override the default styles with your own [theme][themes]. **Don't delete the `@layer` statement.**
+
+```css
+/* css/mcss.css */
+@layer base, elements, global, components, theme.default, theme.user, external, helpers;
+@import url(./base.reset.css) layer(base);
+/* […] */
+@import url(./theme.default.css);
+@import url(./theme.starter.css); /* your theme */
+/* […] */
+@import url(./help.typography.css) layer(helpers);
+```
+
+### Option 3: compiled via PostCSS
+
+If you want the most flexibility and full customization, this is the option for you.
+
+#### PostCSS setup
+
+You'll need three things to get PostCSS working (more details in [this blog article][postcss-post] if needed):
+
+#### `postcss-preset-env`
+
+Install [postcss-preset-env][presetEnv] as a dev dependency.
+
+```shell
+npm install -D postcss postcss-preset-env
+```
+
+#### `postcss.config.cjs`
+
+Add this `postcss.config.cjs` at the root of your project.
+
+```cjs
+// postcss.config.cjs
+const postcssPresetEnv = require("postcss-preset-env");
+const config = {
+  plugins: [
+    // Uncomment if you use mixins (needs `npm install -D postcss-mixins`)
+    // require("postcss-mixins"),
+    postcssPresetEnv({
+      stage: 2,
+      features: {
+        "cascade-layers": false,
+        "random-function": false,
+      },
+    }),
+  ],
+};
+module.exports = config;
+```
+
+#### `.browserslistrc`
+
+A [`.browserslistrc`][browserslistrc], at the repo's root. It sets the [compile floor](/docs/browser-support) so preset-env resolves `@custom-media` and leaves other modern features alone.
+
+```ini
+# .browserslistrc
+baseline 2024
+```
+
+If you already use Astro, Vite, Next, or any other bundler, that's it! Otherwise you'll need `postcss-cli` and `postcss-import` to run the build yourself (details in [blog article][postcss-post]).
+
+#### mCSS setup
+
+Once PostCSS is set up, copy [`src/styles/framework/`][framework-src] in your CSS folder. Next to it, add a folder for your own CSS. Finally, add a global import CSS file.
+
+A bare minimum setup will look like this:
+
+```css
+/* global.css */
+@import url(./framework/mcss.css);
+@import url(./framework/theme.default.css);
+
+@import url(./site/theme.starter.css);
+```
+
+A more common full featured setup:
+
+```css
+/* global.css */
+@import url(./framework/mcss.css);
+@import url(./framework/mcss.components.css);
+@import url(./framework/theme.default.css);
+
+@import url(./site/global.layout.css);
+@import url(./site/component.customComponent.css);
+/* etc. */
+@import url(./site/page.home.css);
+/* etc. */
+@import url(./site/theme.starter.css);
+```
+
+</section>
+
+[browserslistrc]: https://github.com/minimaldesign/mCSS/blob/main/.browserslistrc
+[components]: /components/start
+[dist-components-min]: https://github.com/minimaldesign/mCSS/blob/main/dist/mcss.components.min.css
+[dist-components]: https://github.com/minimaldesign/mCSS/blob/main/dist/mcss.components.css
+[dist-css]: https://github.com/minimaldesign/mCSS/blob/main/dist/mcss.css
+[dist-dir]: https://github.com/minimaldesign/mCSS/tree/main/dist/css
+[dist-index]: https://github.com/minimaldesign/mCSS/blob/main/dist/css/mcss.css
+[dist-min]: https://github.com/minimaldesign/mCSS/blob/main/dist/mcss.min.css
+[framework-src]: https://github.com/minimaldesign/mCSS/tree/main/src/styles/framework
+[mcss-layers]: /docs/start#the-layers
+[postcss-post]: /blog/postcss-setup-for-mcss
+[presetEnv]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-preset-env
+[themes]: /docs/default-theme
diff --git a/src/content/docs/layout.mdx b/src/content/docs/layout.mdx
new file mode 100644
index 00000000..7f3d0658
--- /dev/null
+++ b/src/content/docs/layout.mdx
@@ -0,0 +1,571 @@
+---
+title: "Layout"
+description: "Grid, wrap, layout scaffolds, media queries, prose, and the other global styles"
+lastUpdate: 2026-08-16
+version: 1
+---
+
+import Notice from "../../components/Notice.astro";
+import LayoutThumb from "../../components/_LayoutThumb.astro";
+
+<section class="prose">
+
+Everything you need to lay out a page: a [grid](#grid), a content [wrapper](#wrap), full-page [layout scaffolds](#layouts), and the [media queries](#media-queries) they respond to.
+
+</section>
+
+## Grid
+
+<section class="docs_section prose">
+
+<div class="docs_oversizedTable">
+
+| File name         | Source            |
+| ----------------- | ----------------- |
+| `global.grid.css` | [Github][srcGrid] |
+
+</div>
+
+[srcGrid]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/global.grid.css
+
+A lightweight, flexible grid system. It uses the [CSS grid property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid) under the hood, but you set up your layouts directly in your HTML. (The implementation is heavily inspired by [Raster](https://github.com/rsms/raster).)
+
+### Syntax
+
+It's composed of 2 classes: `.grid` for the container, and `.grid_item` for each grid item.
+
+The default grid gap is defined as a custom property in [`theme.default.ui.css`](/docs/default-theme#ui-tokens) and is responsive: `16px` (`--sm1`) on small screens, stepping up to `24px` (`--sm3`) at the `--md` breakpoint (768px). You can override `--grid-column-gap` and `--grid-row-gap` globally in your own theme, or on a specific `.grid` element. A `grid-flush` modifier is available if you don't want any gap.
+
+Because `.grid` reads its gaps from those two custom properties, overriding a specific grid is just a matter of setting them on the element. Add a class of your own:
+
+```css
+.photoWall {
+  --grid-column-gap: var(--xs2);
+  --grid-row-gap: var(--xs2);
+}
+```
+
+```html
+<ul class="grid photoWall" col="2" col-lg="4">
+  ...
+</ul>
+```
+
+You define the number of columns of your grid with a custom `col` attribute and the position/width of your grid items with the custom `span` attribute.
+
+The `span` property syntax follows these 5 patterns:
+
+- `row`: the grid_item spans a full row.
+- `3`: the grid_item starts in the next column and spans 3 columns.
+- `3-5`: the grid_item starts in column 3 and ends in column 5.
+- `3+5`: the grid_item starts in column 3 and spans 5 columns.
+- `3..`: the grid_item starts in column 3 and spans the remainder of the row.
+
+Both the `col` and `span` attributes have responsive versions, which use [the "mobile first" approach][1] of the `--*-n-above` media queries. The available tiers are **`-md`, `-lg`, and `-xl`** (`col-md`, `span-lg`, etc.); other suffixes like `col-sm` or `col-xxl` don't exist and are silently ignored. Grids support up to 24 columns. (The file is generated by `src/tools/generate.global.grid.cjs`; add a tier there if you need one.)
+
+[1]: /docs/layout#recommended-responsive-setup
+
+<Notice type="info" title="HTML Validation">
+  The custom attribute will not validate. If this is important to you, you'll
+  need to change the attributes to `data-col` and `data-span` in both the CSS
+  and HTML. I personally prefer to use shorter, more legible attributes. Check
+  this thread on Github if you'd like to read more than you've ever wanted to
+  know about [custom attributes and
+  validation](https://github.com/whatwg/html/issues/2271).
+</Notice>
+
+### Examples
+
+#### Different types of spans
+
+9 column grid, with all types of spans.
+
+{/* prettier-ignore */}
+<div class="grid docs_grid" col="9">
+  <div class="grid_item docs_grid_item" span="2"><span>2</span></div>
+  <div class="grid_item docs_grid_item" span="4-5"><span>4-5</span></div>
+  <div class="grid_item docs_grid_item" span="6..">6..</div>
+  <div class="grid_item docs_grid_item" span="2-3"><span>2-3</span></div>
+  <div class="grid_item docs_grid_item" span="5.."><span>5..</span></div>
+  <div class="grid_item docs_grid_item" span="2+3"><span>2+3</span></div>
+  <div class="grid_item docs_grid_item" span="6+2"><span>6+2</span></div>
+  <div class="grid_item docs_grid_item" span="row"><span>row</span></div>
+  <div class="grid_item docs_grid_item" span="4+2"><span>4+2</span></div>
+</div>
+
+```html
+<div class="grid" col="9">
+  <div class="grid_item" span="2">2</div>
+  <div class="grid_item" span="4-5">4-5</div>
+  <div class="grid_item" span="6..">6..</div>
+  <div class="grid_item" span="2-3">2-3</div>
+  <div class="grid_item" span="5..">5..</div>
+  <div class="grid_item" span="2+3">2+3</div>
+  <div class="grid_item" span="6+2">6+2</div>
+  <div class="grid_item" span="row">row</div>
+  <div class="grid_item" span="4+2">4+2</div>
+</div>
+```
+
+#### Responsive grid
+
+The grid layout follows a "mobile first" approach using `--*-n-above` media queries.
+
+The following example goes from 1 → 4 → 9 → 12 columns. (Resize window to see it in action.)
+
+<div class="grid docs_grid" col="1" col-md="4" col-lg="9" col-xl="12">
+  <div class="grid_item docs_grid_item">1</div>
+  <div class="grid_item docs_grid_item">2</div>
+  <div class="grid_item docs_grid_item">3</div>
+  <div class="grid_item docs_grid_item">4</div>
+  <div class="grid_item docs_grid_item">5</div>
+  <div class="grid_item docs_grid_item">6</div>
+  <div class="grid_item docs_grid_item">7</div>
+  <div class="grid_item docs_grid_item">8</div>
+  <div class="grid_item docs_grid_item">9</div>
+  <div class="grid_item docs_grid_item">10</div>
+  <div class="grid_item docs_grid_item">11</div>
+  <div class="grid_item docs_grid_item">12</div>
+</div>
+
+```html
+<div class="grid" col="1" col-md="4" col-lg="9" col-xl="12">[…]</div>
+```
+
+</section>
+
+## Wrap
+
+<section class="docs_section prose">
+
+<div class="docs_oversizedTable">
+
+| File name         | Source            |
+| ----------------- | ----------------- |
+| `global.wrap.css` | [Github][srcWrap] |
+
+</div>
+
+[srcWrap]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/global.wrap.css
+
+The `.wrap` global class is a simple content wrapper: it centers your content on the page and adds some left/right padding on small viewports.
+
+The content column comes in three width presets, set with a modifier on the wrapper: `.wrap-sm`, `.wrap-md`, and `.wrap-lg`. A bare `.wrap` uses the `md` width (`minmax(0, 70ch)`). There is also a `.wrap_content-fullBleed` modifier for children that should extend to the full size of the viewport. See [demo](/demos/wrap).
+
+### Syntax
+
+```html
+<div class="wrap">
+  <section class="wrap_content">
+    <!-- Reading width content (md preset) -->
+  </section>
+</div>
+
+<div class="wrap wrap-lg">
+  <section class="wrap_content">
+    <!-- Wider content (up to 900px) -->
+  </section>
+</div>
+
+<div class="wrap">
+  <section class="wrap_content wrap_content-fullBleed">
+    <!-- Viewport width content -->
+  </section>
+</div>
+```
+
+### Settings
+
+Three responsive paddings and the content widths, set in `theme.default.ui.css`. Override them in your [theme](/docs/default-theme).
+
+<div class="docs_oversizedTable">
+
+| Token             | Value                  | Description                      |
+| ----------------- | ---------------------- | -------------------------------- |
+| `wrap-spacing`    | `var(--sm1)`           | default left/right padding       |
+| `wrap-md-spacing` | `var(--sm3)`           | left/right padding tablet and up |
+| `wrap-lg-spacing` | `0`                    | left/right padding laptop and up |
+| `wrap-width-sm`   | `minmax(0, 55ch)`      | narrow column (`.wrap-sm`)       |
+| `wrap-width-md`   | `minmax(0, 70ch)`      | reading column (`.wrap-md`)      |
+| `wrap-width-lg`   | `minmax(0, 900px)`     | wide column (`.wrap-lg`)         |
+| `wrap-width`      | `var(--wrap-width-md)` | width of a bare `.wrap`          |
+
+</div>
+
+The "tablet and up" and "laptop and up" paddings follow the [responsive setup](#recommended-responsive-setup) below.
+
+</section>
+
+## Layouts
+
+<section class="docs_section prose">
+
+<div class="docs_oversizedTable">
+
+| File name           | Source              |
+| ------------------- | ------------------- |
+| `global.layout.css` | [Github][srcLayout] |
+
+</div>
+
+[srcLayout]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/global.layout.css
+
+Page-level scaffolds: the skeleton between your `body` tag and your content. Every variant extends the same `.layout` base, an app shell with a header, a stretching content area, and a sticky footer.
+
+### Syntax
+
+```html
+<body class="layout layout-sidebar">
+  <header>…</header>
+  <div class="layout_content">
+    <aside class="layout_content_aside">…</aside>
+    <main class="layout_content_main">…</main>
+  </div>
+  <footer>…</footer>
+</body>
+```
+
+The header and footer are optional: a bare `.layout` with only `.layout_content` still gives you a full-height page (that's what `.layout-cover` relies on).
+
+### The layouts
+
+Each thumbnail links to a full-page demo built from labeled color blocks. Resize the demo window to see the breakpoints, sticky footer, and full-viewport behavior.
+
+<div class="grid" col="2" col-lg="3">
+  <div class="grid_item">
+    <LayoutThumb variant="centered" />
+  </div>
+  <div class="grid_item">
+    <LayoutThumb variant="sidebar" />
+  </div>
+  <div class="grid_item">
+    <LayoutThumb variant="sidebar-end" />
+  </div>
+  <div class="grid_item">
+    <LayoutThumb variant="docs" />
+  </div>
+  <div class="grid_item">
+    <LayoutThumb variant="split" />
+  </div>
+  <div class="grid_item">
+    <LayoutThumb variant="cover" />
+  </div>
+</div>
+
+<div class="docs_oversizedTable">
+
+| Class                 | What it's for                                                                                                                                                       |
+| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `.layout`             | The base class: header / content / footer with a sticky footer. Required by every variant, usable alone.                                                            |
+| `.layout-centered`    | A single centered reading column (articles, blog posts, legal pages). Width capped at `--layout-content-width`.                                                     |
+| `.layout-sidebar`     | Aside + main from the `--md` breakpoint, single column below it (aside follows source order).                                                                       |
+| `.layout-sidebar-end` | Compose with `.layout-sidebar` to move the aside to the opposite side.                                                                                              |
+| `.layout-docs`        | Documentation: nav aside + main + TOC aside (`.layout_content_aside-toc`). One column below `--md` with the asides hidden, nav + main from `--md`, TOC from `--lg`. |
+| `.layout-split`       | Two equal full-height panes (the direct children of `.layout_content`), stacked below `--md`. Auth screens, image + content landings.                               |
+| `.layout-cover`       | Full-viewport (`100dvh`) cover with content centered both ways. Landing, 404, coming-soon pages.                                                                    |
+
+</div>
+
+<Notice type="info" title="Hidden asides need a menu">
+  `.layout-docs` hides both asides below the `--md` breakpoint. That's
+  deliberate: docs navigation belongs in your header menu on small screens
+  (that's how mcss.dev does it). So make sure everything in your asides is also
+  reachable somewhere else, like the header menu. If it isn't, use
+  `.layout-sidebar` instead: on small screens it keeps the aside on the page,
+  stacked on top of the main content, instead of hiding it.
+</Notice>
+
+### Container queries
+
+Every layout main column (`.layout_content_main`) is a named [size container](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries) (`container: main / inline-size`). You can use it in your container queries:
+
+```css
+@container main (width >= …);
+```
+
+### Settings
+
+Column widths come from three tokens in `theme.default.ui.css`. `--layout-toc-width` accepts any grid track size; the `1fr` default lets the TOC resize to whatever space the main column doesn't use.
+
+<div class="docs_oversizedTable">
+
+| Token                    | Value   | Description                                          |
+| ------------------------ | ------- | ---------------------------------------------------- |
+| `--layout-content-width` | `70ch`  | main column cap (`.layout-centered`, `.layout-docs`) |
+| `--layout-aside-width`   | `245px` | aside column (`.layout-sidebar`, `.layout-docs`)     |
+| `--layout-toc-width`     | `1fr`   | TOC column (`.layout-docs`)                          |
+
+</div>
+
+Override them globally in your [theme](/docs/default-theme), or per-layout with a scoped rule. This very site uses `.layout-docs` and layers its own specifics on top ([source][srcSiteLayout]): a wider `77ch` reading column and sticky side navs.
+
+[srcSiteLayout]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/site/global.layout.css
+
+</section>
+
+## Prose
+
+<section class="docs_section prose">
+
+<div class="docs_oversizedTable">
+
+| File name          | Source             |
+| ------------------ | ------------------ |
+| `global.prose.css` | [Github][srcProse] |
+
+</div>
+
+[srcProse]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/global.prose.css
+
+The global `.prose` class can be used anywhere you need basic typography for long form text, like articles, blog posts, etc.
+
+It makes spacing between paragraphs, lists, tables, etc. consistent. This spacing can be modified in your [theme](/docs/default-theme) via the `--prose-spacing` token.
+
+The `.prose` class also adds extra styling for `ol`, `ul`, and `code` elements.
+
+</section>
+
+## Accessibility
+
+<section class="docs_section prose">
+
+<div class="docs_oversizedTable">
+
+| File name         | Source            |
+| ----------------- | ----------------- |
+| `global.a11y.css` | [Github][srcA11y] |
+
+</div>
+
+[srcA11y]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/global.a11y.css
+
+Accessibility specific styles, used across the framework and the [components](/components/start):
+
+- **`:focus-visible`**: a unified keyboard focus ring on everything. Customizable in your theme via the `--focus-ring-color`, `--focus-ring-width`, and `--focus-ring-offset` tokens.
+- **`.a11y-skipLink`**: skip-to-content link. It stays off-screen until focused.
+- **`.a11y-srOnly`**: hides the element visually, but keeps it accessible to screen readers.
+
+Place the skip link first in your `<body>`, pointing at the id of your main content:
+
+```html
+<body class="layout">
+  <a class="a11y-skipLink" href="#main">Skip to content</a>
+  <header>…</header>
+  <main id="main">…</main>
+</body>
+```
+
+</section>
+
+## Animation
+
+<section class="docs_section prose">
+
+<div class="docs_oversizedTable">
+
+| File name              | Source                 |
+| ---------------------- | ---------------------- |
+| `global.animation.css` | [Github][srcAnimation] |
+
+</div>
+
+[srcAnimation]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/global.animation.css
+
+Basic fade in/out animations with flexible start/end opacity values. Each keyframe only pins one end of the fade; the other end is the element's own `opacity`:
+
+| Keyframes             | What it does                          |
+| --------------------- | ------------------------------------- |
+| `fadeFromTransparent` | fades from 0 to the element's opacity |
+| `fadeFromOpaque`      | fades from 1 to the element's opacity |
+| `fadeToTransparent`   | fades from the element's opacity to 0 |
+| `fadeToOpaque`        | fades from the element's opacity to 1 |
+
+```css
+.element {
+  opacity: 0.8;
+  animation: fadeToTransparent 1s forwards;
+}
+```
+
+(More info about [forwards](/blog/css-animation-fill-modes).)
+
+</section>
+
+## Media queries
+
+<section class="prose">
+
+| File name                    | Source        |
+| ---------------------------- | ------------- |
+| `settings.media-queries.css` | [Github][src] |
+
+[src]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.media-queries.css
+
+All the breakpoints, user preferences, and device capabilities, as named [custom media queries][custom] you can use anywhere in your CSS.
+
+<Notice
+  type="info"
+  title="PostCSS needed for custom media queries"
+  class="mt-sm3 mb-sm3"
+>
+  [Custom media queries][custom] are not yet available without a [PostCSS
+  plugin][postcss]. If you can't or don't want to add a build step to your
+  process, you'll have to hard-code your breakpoints. (You can still use nesting
+  as in the example below though.)
+</Notice>
+
+</section>
+
+### Viewport size
+
+<section class="prose">
+
+#### Dimensions
+
+<div class="docs_oversizedTable">
+
+| Token keyword | Dimension (px) |
+| ------------- | -------------- |
+| `xxs`         | 0-240          |
+| `xs`          | 240-360        |
+| `sm`          | 360-480        |
+| `md`          | 480-768        |
+| `lg`          | 768-1024       |
+| `xl`          | 1024-1440      |
+| `xxl`         | 1440-1920      |
+
+</div>
+
+#### Variations
+
+Using the `md` dimension as an example:
+
+<div class="docs_oversizedTable">
+
+| Token variation | Matches                      |
+| --------------- | ---------------------------- |
+| `--md-only`     | exact range                  |
+| `--md-n-above`  | range top and above          |
+| `--md`          | shorthand for `--md-n-above` |
+| `--md-n-below`  | range top and below          |
+| `--md-phone`    | exact range in portrait only |
+
+</div>
+
+#### Examples
+
+<div class="docs_oversizedTable">
+
+| Custom media query        | Value                           |
+| ------------------------- | ------------------------------- |
+| `@media(--md-only) {}`    | `(480px <= width < 768px);`     |
+| `@media(--md) {}`         | `(width >= 768px);`             |
+| `@media(--md-n-above) {}` | `(width >= 768px);`             |
+| `@media(--md-n-below) {}` | `(width < 768px);`              |
+| `@media(--md-phone) {}`   | `(--md-only) and (--portrait);` |
+
+</div>
+
+The `-phone` variant is available from `xxs` through `lg` (there is no `xl-phone` or `xxl-phone`).
+
+#### Recommended responsive setup
+
+If you search online for the best approach to responsive design and setting up your breakpoints, you'll come across the technically true but useless "it depends" answer.
+
+Unless you have a good reason not to, you should use a mobile-first approach. What that means is your design works great on small screens out of the box, without any media queries, and then you add your tweaks for larger sizes.
+
+This is how the CSS of most responsive components should be set up:
+
+```css
+.exampleComponent {
+  /* default mobile */
+  @media (--lg) {
+    /* responsive tweaks for desktop */
+  }
+}
+```
+
+Without [PostCSS plugins][postcss]:
+
+```css
+.exampleComponent {
+  /* default mobile */
+  @media (width >= 1024px) {
+    /* responsive tweaks for desktop */
+  }
+}
+```
+
+</section>
+
+### User preferences
+
+<section class="prose">
+
+These map to the `prefers-*` and related media features, so you can respect user settings without memorizing the syntax:
+
+<div class="docs_oversizedTable">
+
+| Custom media query | Matches                                         |
+| ------------------ | ----------------------------------------------- |
+| `--motionOK`       | `(prefers-reduced-motion: no-preference)`       |
+| `--motionNotOK`    | `(prefers-reduced-motion: reduce)`              |
+| `--opacityOK`      | `(prefers-reduced-transparency: no-preference)` |
+| `--opacityNotOK`   | `(prefers-reduced-transparency: reduce)`        |
+| `--useDataOK`      | `(prefers-reduced-data: no-preference)`         |
+| `--useDataNotOK`   | `(prefers-reduced-data: reduce)`                |
+| `--OSdark`         | `(prefers-color-scheme: dark)`                  |
+| `--OSlight`        | `(prefers-color-scheme: light)`                 |
+| `--highContrast`   | `(prefers-contrast: more)`                      |
+| `--lowContrast`    | `(prefers-contrast: less)`                      |
+| `--invertedColors` | `(inverted-colors: inverted)`                   |
+| `--forcedColors`   | `(forced-colors: active)`                       |
+
+</div>
+
+</section>
+
+### Device capabilities
+
+<section class="prose">
+
+<div class="docs_oversizedTable">
+
+| Custom media query | Matches                                      |
+| ------------------ | -------------------------------------------- |
+| `--portrait`       | `(orientation: portrait)`                    |
+| `--landscape`      | `(orientation: landscape)`                   |
+| `--HDcolor`        | `(dynamic-range: high) or (color-gamut: p3)` |
+| `--touch`          | `(hover: none) and (pointer: coarse)`        |
+| `--stylus`         | `(hover: none) and (pointer: fine)`          |
+| `--pointer`        | `(hover) and (pointer: coarse)`              |
+| `--mouse`          | `(hover) and (pointer: fine)`                |
+
+</div>
+
+#### Example
+
+These are used like any other custom media query, and they can be combined with each other or with a dimension token:
+
+```css
+.exampleComponent {
+  @media (--landscape) and (--touch) {
+    /* a phone or tablet held sideways */
+  }
+}
+```
+
+Without [PostCSS plugins][postcss], the same thing spelled out:
+
+```css
+.exampleComponent {
+  @media (orientation: landscape) and ((hover: none) and (pointer: coarse)) {
+    /* a phone or tablet held sideways */
+  }
+}
+```
+
+</section>
+
+[custom]: https://drafts.csswg.org/mediaqueries-5/#custom-mq
+[postcss]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-media
diff --git a/src/content/docs/media-queries.mdx b/src/content/docs/media-queries.mdx
deleted file mode 100644
index 752c4635..00000000
--- a/src/content/docs/media-queries.mdx
+++ /dev/null
@@ -1,183 +0,0 @@
----
-title: "Media Queries"
-description: "Breakpoints and custom media queries used across the framework"
-lastUpdate: 2026-07-24
-version: 1
----
-
-import Notice from "../../components/Notice.astro";
-
-<section class="prose">
-
-| File name                    | Source        |
-| ---------------------------- | ------------- |
-| `settings.media-queries.css` | [Github][src] |
-
-[src]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.media-queries.css
-
-<Notice
-  type="info"
-  title="PostCSS needed for custom media queries"
-  class="mt-sm3 mb-sm3"
->
-  [Custom media queries][custom] are not yet available without a [PostCSS
-  plugins][postcss]. If you can't or don't want to add a build step to your
-  process, you'll have to hard code your breakpoints. (You can still use nesting
-  as in the example below though.)
-</Notice>
-
-</section>
-
-## Viewport size
-
-<section class="prose">
-
-### Dimensions
-
-<div class="docs_oversizedTable">
-
-| Token keyword | Dimension (px) |
-| ------------- | -------------- |
-| `xxs`         | 0-240          |
-| `xs`          | 240-360        |
-| `sm`          | 360-480        |
-| `md`          | 480-768        |
-| `lg`          | 768-1024       |
-| `xl`          | 1024-1440      |
-| `xxl`         | 1440-1920      |
-
-</div>
-
-### Variations
-
-Using the `md` dimension as an example:
-
-<div class="docs_oversizedTable">
-
-| Token variation | Matches                      |
-| --------------- | ---------------------------- |
-| `--md-only`     | exact range                  |
-| `--md-n-above`  | range top and above          |
-| `--md`          | shorthand for `--md-n-above` |
-| `--md-n-below`  | range top and below          |
-| `--md-phone`    | exact range in portrait only |
-
-</div>
-
-### Examples
-
-<div class="docs_oversizedTable">
-
-| Custom media query        | Value                           |
-| ------------------------- | ------------------------------- |
-| `@media(--md-only) {}`    | `(480px <= width < 768px);`     |
-| `@media(--md) {}`         | `(width >= 768px);`             |
-| `@media(--md-n-above) {}` | `(width >= 768px);`             |
-| `@media(--md-n-below) {}` | `(width < 768px);`              |
-| `@media(--md-phone) {}`   | `(--md-only) and (--portrait);` |
-
-</div>
-
-The `-phone` variant is available from `xxs` through `lg` (there is no `xl-phone` or `xxl-phone`).
-
-### Recommended responsive setup
-
-If you search online for the best approach to responsive design and setting up your breakpoints, you'll come across the technically true but useless "it depends" answer.
-
-Unless you have a good reason not to, you should use a mobile first approach. What that means is your design will work great on small screens out of the box, without any media queries, and then you add your tweaks for additional sizes.
-
-This is how the CSS of most responsive components should be set up:
-
-```css
-.exampleComponent {
-  /* default mobile */
-  @media (--lg) {
-    /* responsive tweaks for desktop */
-  }
-}
-```
-
-Without [PostCSS plugins][postcss]:
-
-```css
-.exampleComponent {
-  /* default mobile */
-  @media (width >= 1024px) {
-    /* responsive tweaks for desktop */
-  }
-}
-```
-
-</section>
-
-## User preferences
-
-<section class="prose">
-
-These map to the `prefers-*` and related media features, so you can respect user settings without memorizing the syntax:
-
-<div class="docs_oversizedTable">
-
-| Custom media query | Matches                                         |
-| ------------------ | ----------------------------------------------- |
-| `--motionOK`       | `(prefers-reduced-motion: no-preference)`       |
-| `--motionNotOK`    | `(prefers-reduced-motion: reduce)`              |
-| `--opacityOK`      | `(prefers-reduced-transparency: no-preference)` |
-| `--opacityNotOK`   | `(prefers-reduced-transparency: reduce)`        |
-| `--useDataOK`      | `(prefers-reduced-data: no-preference)`         |
-| `--useDataNotOK`   | `(prefers-reduced-data: reduce)`                |
-| `--OSdark`         | `(prefers-color-scheme: dark)`                  |
-| `--OSlight`        | `(prefers-color-scheme: light)`                 |
-| `--highContrast`   | `(prefers-contrast: more)`                      |
-| `--lowContrast`    | `(prefers-contrast: less)`                      |
-| `--invertedColors` | `(inverted-colors: inverted)`                   |
-| `--forcedColors`   | `(forced-colors: active)`                       |
-
-</div>
-
-</section>
-
-## Device capabilities
-
-<section class="prose">
-
-<div class="docs_oversizedTable">
-
-| Custom media query | Matches                                      |
-| ------------------ | -------------------------------------------- |
-| `--portrait`       | `(orientation: portrait)`                    |
-| `--landscape`      | `(orientation: landscape)`                   |
-| `--HDcolor`        | `(dynamic-range: high) or (color-gamut: p3)` |
-| `--touch`          | `(hover: none) and (pointer: coarse)`        |
-| `--stylus`         | `(hover: none) and (pointer: fine)`          |
-| `--pointer`        | `(hover) and (pointer: coarse)`              |
-| `--mouse`          | `(hover) and (pointer: fine)`                |
-
-</div>
-
-### Example
-
-These are used like any other custom media query, and they can be combined with each other or with a dimension token:
-
-```css
-.exampleComponent {
-  @media (--landscape) and (--touch) {
-    /* a phone or tablet held sideways */
-  }
-}
-```
-
-Without [PostCSS plugins][postcss], the same thing spelled out:
-
-```css
-.exampleComponent {
-  @media (orientation: landscape) and ((hover: none) and (pointer: coarse)) {
-    /* a phone or tablet held sideways */
-  }
-}
-```
-
-</section>
-
-[custom]: https://drafts.csswg.org/mediaqueries-5/#custom-mq
-[postcss]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-media
diff --git a/src/content/docs/reset.mdx b/src/content/docs/reset.mdx
deleted file mode 100644
index e890a206..00000000
--- a/src/content/docs/reset.mdx
+++ /dev/null
@@ -1,31 +0,0 @@
----
-title: "Reset"
-description: "The opinionated CSS reset in the base layer"
-lastUpdate: 2024-09-09
-version: 1.0
----
-
-<section class="prose">
-
-<div class="docs_oversizedTable">
-
-| File name        | Source        |
-| ---------------- | ------------- |
-| `base.reset.css` | [Github][src] |
-
-</div>
-
-The mCSS reset is kept to a minimum. It does the following:
-
-- It sets the `box-sizing` to `border-box`
-- It removes the default `margin` on all elements
-- It sets the document's `min-height` to 100%.
-
-The rest of the defaults that would traditionally be included in a "reset" or "normalize" file are handled by the `elements.*.css` files. Refer to the [mCSS File structure][structure] section of _Getting Started_ for more details.
-
-You can find an example of all HTML elements default styling in the [next section](/docs/elements).
-
-</section>
-
-[structure]: /docs/start#mcss-file-structure
-[src]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/base.reset.css
diff --git a/src/content/docs/start.mdx b/src/content/docs/start.mdx
index f8596c60..531048c2 100644
--- a/src/content/docs/start.mdx
+++ b/src/content/docs/start.mdx
@@ -5,6 +5,8 @@ lastUpdate: 2026-07-31
 version: 1
 ---
 
+import Notice from "../../components/Notice.astro";
+
 <section class="prose">
 mCSS is both a CSS framework and a methodology. You need to first understand the methodology to use the framework correctly. There are 3 main parts to the methodology.
 
@@ -12,112 +14,92 @@ mCSS is both a CSS framework and a methodology. You need to first understand the
 1. The CSS syntax
 1. The component architecture
 
-Once you've read through the basics below, the best way to understand how it all comes together is to have a look at the [source code][src]. (Video tutorial coming soon!)
+Once you've read through the basics below, have a look at the [source code][src] to see how it all comes together, and look at [Installation](/docs/installation) to choose the best option for your project.
 
 </section>
 
-## How to install mCSS
-
-<section class="prose">
-
-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.
-
-### Install with PostCSS
-
-Copy [`src/styles/framework/`][framework-src] to wherever your CSS lives, then start your own folder next to it for your unlayered CSS. This site's [`site/`][site-src] is the worked example of that folder, and [`_global.css`][4] is the entry file tying the two together (see [the layers](#mcss-file-structure) below). Copy [`.browserslistrc`][browserslistrc] from the repo root as well: it sets the [compile floor](#browser-support) that keeps postcss-preset-env from polyfilling the features mCSS uses natively.
+## mCSS file structure
 
-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].
+<section class="docs_section prose">
 
-### The easy install
+### Two folders
 
-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:
+**[`framework/`][framework-src]**: the core files you should not edit yourself:
 
-```html
-<link rel="stylesheet" href="/css/mcss.min.css" />
-<!-- optional -->
-<link rel="stylesheet" href="/css/mcss.components.min.css" />
-```
+- Settings
+- Base
+- HTML elements
+- Global styles
+- Components (optional)
+- Themes (the default theme, plus optional swappable themes)
+- Helpers
 
-Everything is pre-processed, so there is no build step and no PostCSS. The unminified [`dist/mcss.css`][dist-css] and [`dist/mcss.components.css`][dist-components] are there if you need them.
+**[`site/`][site-src]**: your own CSS. These files do not use CSS [layers][layers] so **understanding and using [ITCSS][1] methodology there is key**. (The [mCSS own][site-src] `/site` folder is a good reference.)
 
-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).
+- Custom theme
+- Custom layouts
+- Your components
+- Page specific overrides
+- Patches to vendor plugins, packages, etc.
 
-</section>
+### The layers
 
-## mCSS file structure
+mCSS is a modern take on [ITCSS][1]. Files are organized in [layers][layers] going from broad and generic (settings → reset → HTML elements) to specific and local (components → helpers). This methodology addresses all the supposed "shortcomings" of CSS such as [specificity][3] wars and cascading conflicts.
 
-<section class="docs_section prose">
+While ITCSS used specificity for its layers, mCSS upgrades that with native [CSS cascade layers][cascade-layers] priority. Every framework file is imported into a named `@layer`, and the layer order (not the import order, and not specificity) dictates the priority. By default, anything you write _outside_ the layers (in the `/site` folder) has higher priority.
 
-The file structure is a simplified [ITCSS][1]: files are organized in [layers][layers] going from broad and generic (tokens, element defaults) to specific and local (components, one-off helpers). When done right, it takes care of all the common "shortcomings" of CSS such as [specificity][3] wars and cascading conflicts.
+The only exception is [helpers][helpers] which use `!important` to override everything, by design.
 
-mCSS implements this with native [CSS cascade layers][cascade-layers]: every framework file is imported into a named `@layer`, and the layer order (not the import order or specificity) decides who wins. Anything you write _outside_ the layers beats the framework by default, so mCSS always gets out of your way. The only exception is [helper classes][helpers], which use `!important` so they can override anything, including your own CSS.
+Here are all the mCSS layers, from lowest to highest priority:
 
-### Two folders
+<div class="docs_oversizedTable">
 
-The styles live in two folders, and the split is the methodology in miniature:
+| Layer           | Files             | What lives there                                |
+| --------------- | ----------------- | ----------------------------------------------- |
+| `base`          | `base.*`          | Reset/normalize.                                |
+| `elements`      | `elements.*`      | Default styling of bare HTML elements.          |
+| `global`        | `global.*`        | Grid, wrap, layout scaffolds, prose, a11y.      |
+| `components`    | `component.*`     | Self-contained component styles.                |
+| `theme.default` | `theme.default.*` | Default [theme][themes] files.                  |
+| `theme.user`    | `theme.*`         | Custom theme override.                          |
+| `external`      | _(your imports)_  | Code from plugins, npm packages, etc.           |
+| `helpers`       | `help.*`          | Tailwind style utility classes, but done right. |
+| _(unlayered)_   | your own CSS      | Beats every layer above, except helpers.        |
 
-- **[`framework/`][framework-src]**: mCSS itself, every file in a named layer. You copy it and mostly leave it alone: customization goes through the `settings.*` tokens, a [theme](/docs/themes), or your own CSS, not through edits scattered across framework files.
-- **[`site/`][site-src]**: this site's own CSS, imported **unlayered, after the framework**, so it wins without specificity games. Because those files are unlayered, the order you import them in is important so make sure you have a clear mental model of [ITCSS][1] principles before delving in. You can also refer to mCSS [own `/site`'s setup][4] as a reference.
+</div>
 
-### The layers, in order
+Have a look at [`framework/mcss.css`][mcss-entry] to see how it's organized. All layers are _defined_ in this file.
 
-Each layer only ever loses to the ones after it. The sections below detail each one; most have full docs in the sidebar.
+**Notes:**
 
-<div class="docs_oversizedTable">
+- `settings.*` files conceptually occupy the top position of the ITCSS "inverted pyramid" with lowest specificity, but since they're only used at build-time, they don't need their own `@layer`.
+- The `external` layer ships empty. This layer is reserved for third-party CSS (npm packages, plugins, etc.). That way you can use `@import url(…) layer(external);` to import vendor styles and it becomes trivial to override with your own CSS in a `patch.*` file (like this site's `patch.astro.css`).
 
-| Layer         | Files         | What lives there                                         |
-| ------------- | ------------- | -------------------------------------------------------- |
-| `settings`    | `settings.*`  | Tokens, interface tokens, media queries, mixins          |
-| `base`        | `base.*`      | Reset/normalize                                          |
-| `elements`    | `elements.*`  | Default styling of bare HTML elements                    |
-| `global`      | `global.*`    | Grid, wrap, layout scaffolds, prose, a11y                |
-| `components`  | `component.*` | One self-contained block per file                        |
-| `theme`       | `theme.*`     | At most one active theme (token overrides + style rules) |
-| `helpers`     | `help.*`      | `!important` one-off overrides, last resort              |
-| _(unlayered)_ | your own CSS  | Beats every layer above, except helpers                  |
+### The global import
 
-</div>
+The global import ([`_global.css`][4] for this site) is where it all comes together. You import everything used on your site there:
 
-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:
+- The mCSS framework
+- The mCSS components (optional)
+- The default theme
+- Your theme (optional override)
+- Your custom layouts, components, and page overrides
+- Vendor style patches
 
 ```css
-/* framework/mcss.css (abridged) */
-@layer settings, base, elements, global, components, theme, helpers;
-
-/* Build-time only (media queries + mixins definitions) */
-@import url(./settings.media-queries.css);
-@import url(./settings.mixins.css);
-
-@import url(./settings.tokens.css) layer(settings);
-@import url(./settings.ui.css) layer(settings);
-@import url(./base.reset.css) layer(base);
-@import url(./elements.text.css) layer(elements);
-@import url(./global.grid.css) layer(global);
-@import url(./help.spacing.css) layer(helpers);
-/* etc. — note: no component.* and no theme.* imports here */
-```
+/* global.css */
 
-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. */
+/* Optional: the mCSS component library. */
 @import url(./framework/mcss.components.css);
 
-/* Optional: activate ONE theme, a swappable style. Theme files are
-   self-layered (@layer theme inside the file), so no layer()
-   annotation. None imported = the default look. */
-/* @import url(./framework/theme.wireframe.css); */
+/* The default theme. */
+@import url(./framework/theme.default.css);
+/* Optional: your own theme, overriding the default */
+@import url(./site/theme.starter.css);
 
-/* Your own CSS: UNLAYERED, after the framework. Its normal
-   declarations win over every mCSS layer without fighting
-   specificity. One exception: helpers are !important and beat
-   unlayered CSS too. */
+/* Your own CSS: it wins over every mCSS layer (except helpers) */
 @import url(./site/global.layout.css);
 @import url(./site/component.header.css);
 @import url(./site/page.blog.css);
@@ -126,22 +108,19 @@ 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
 
 </section>
 
-## Detailed description of each layer
+## Detailed description of all files
 
 <section class="docs_section prose">
 
 ### Settings
 
-Settings are where all custom properties are set.
+Two `settings.*` files sit outside the `@layer` stack: they're only used at build time.
 
-- [Tokens][5] is where you set default values for sizes, font stacks, colors, transitions, etc. See [the docs][5] for all the values available by default.
-- [Interface tokens][interfaceTokens] are an abstraction level to standardize common values across elements and components. For instance, components use `--ui-border-color` instead of the lower level token `--base-200`, so one override restyles every bordered surface.
 - [Media queries][6] include responsive sizes, as well as user preferences like color schemes, reduced motion, etc. See [media queries docs][6].
-- **Mixins** is optional. It is not used in other parts of mCSS by default but can be useful to streamline your own components' code. It requires a [PostCSS plugin][7] to work.
+- **Mixins** (optional). It is not used in other parts of mCSS by default but can be useful to streamline your own components' code. It requires a [PostCSS plugin][7] to work.
 
 ### Base
 
@@ -172,37 +151,47 @@ Global styles included out of the box:
 
 ### Components
 
-Self-contained styles for single components, one block per file. The mCSS framework is designed to be used on its own, allowing you to create your own components, but a [collection of components][components] built on top of mCSS is included. It ships in its own entry file (`mcss.components.css`, or `dist/mcss.components.css` as a drop-in): `mcss.css` only declares the `components` layer slot, so the library is opt-in.
+Self-contained styles for single components. mCSS is designed to let you to create your own components, but a [collection of components][components] built on top of mCSS is included. It ships separately to keep mCSS nimble as the component library grows.
 
-Some components are **CSS-only**: a single class on a single element, with no Astro component because there is no markup structure to encapsulate. For example, the `.badge` class on a `<span>` is the whole badge, and the `.bt` class can style a `<button>` or an `<a>` (styling that has to be opt-in, since not all links are buttons). Their docs live in the [components section][components] like everything else, marked "CSS-only".
+**Note:** Some components are CSS-only. A single class on a single element, with no associated HTML. For example, the `.badge` class on a `<span>` is the whole badge, and the `.bt` class can style a `<button>` or an `<a>`.
 
 ### Theme
 
-This is the one layer the framework declares but never fills: `mcss.css` imports no theme, and the default look IS the empty theme layer. The theme itself is really part of [your CSS](#your-css-unlayered): one `theme.*.css` file of token overrides plus optional style rules that you activate from your own entry file, whether it's a shipped theme like `theme.wireframe.css` or one you wrote yourself.
+Every design value in mCSS lives in the **default theme** (`theme.default.css`) composed of 2 parts:
+
+- [tokens][5]: Raw design tokens such as dimensions, fonts, colors, etc.
+- [UI tokens][uiTokens]: abstraction layer that maps raw tokens to semantic tokens, e.g. `--ui-border-color`, `--input-padding`, etc.
+
+Use the [starter template][srcStarter] to make your own theme (feel free to rename it to anything you'd like but it's recommended to follow the `theme.*.css` convention). Anything you add to this file will automatically override what's in the default theme.
+
+**Don't edit the default theme files:** keeping your design in your theme makes framework updates easy.
 
-The theme's remit is wider than component classes. Theme files are the ONE place allowed to select framework classes from outside: component classes, framework globals like `.a11y-skipLink`, and bare element selectors. **A `body` rule belongs in the theme, not in your project CSS.** Before adding a declaration to `body`, check whether an interface token already delivers it: the elements layer paints the page from `--body-background-color`, `--text-color`, and `--text`, so a theme that sets those does not also need to set `background-color`, `color`, and `font-family`. See [the theme docs][themes] for how themes work and how to build one.
+If you want to make a self contained mCSS theme you can distribute, see how `theme.wireframe.css` is set up. It basically imports the default theme itself, so you can swap the `@import` in your [global import][4]. More details on that in the [theme docs][themes].
 
 ### Helpers
 
-[Helpers][helpers] provide classes for “one-off” local overrides. They're similar to utility classes from other frameworks, with a critical difference: they're meant to be used as a last resort and as sparingly as possible. Helper declarations use `!important`, and important declarations inside a layer beat unlayered CSS, so a helper class overrides everything on that element, including your own CSS. Read [the docs][helpers] for more info on this.
+[Helpers][helpers] provide classes for “one-off” local overrides. They're similar to utility classes from other frameworks, with a critical difference: they're meant to be used as a last resort and as sparingly as possible. Helper declarations use `!important` and override everything on that element, including your own CSS. Read [the docs][helpers] for more info on this.
 
-### Your CSS (unlayered)
+### Your CSS
 
-Your own CSS (components, page styles, third-party CSS you don't control) is imported after the mCSS framework. Your CSS is unlayered. It wins over all layered mCSS files. You never have to worry about the framework's specificity. The one exception is helper classes: their `!important` declarations win over everything, on purpose.
+Your own CSS is unlayered, which means:
 
-Your CSS goes inside your `site/` folder, in this order:
+- Your CSS has higher priority than mCSS' (except helpers)
+- Using the [ITCSS][1] methodology is **critical**.
 
-- `theme.*.css` is the one file of yours that is **not** unlayered: a theme wraps its own content in `@layer theme`, deliberately dropping into the framework's theme slot so it restyles the framework defaults while the rest of your CSS below still beats it.
+Your `site/` CSS is required to be imported in this order:
+
+- `theme.starter.css` overrides the default mCSS theme.
 - `global.*.css` for site-wide additions to the framework's globals.
-- `component.*.css` for your own blocks (most of your CSS should end up here)
+- `component.*.css` for your own components (most of your CSS should end up here)
 - `page.*.css` for the rare page-specific styles
-- `external.*.css` for CSS you don't control, i.e. plugins
+- `patch.*.css` for patching CSS you don't control, i.e. plugins
 
-Because those files are unlayered, the order you import them in is important. Make sure you have a clear mental model of [ITCSS][1] principles before delving in. You can also refer to mCSS [own `/site`'s setup][4] as a reference.
+**Note:** You can also refer to [mCSS own][4] `/site`'s setup as a reference.
 
-### Pages
+#### Pages
 
-Page files belong to your `/site` folder. They're used sparingly, for the rare page-specific overrides.
+Page files should be used sparingly, for the rare page-specific overrides.
 
 ```css
 /* page.blog.css */
@@ -211,46 +200,12 @@ Page files belong to your `/site` folder. They're used sparingly, for the rare p
 }
 ```
 
-**Note**: page classes should go on the `<body>` in the HTML, at the same level as the [layout scaffold](/docs/global#layouts) classes (not on `<main>`):
+**Note**: page classes should go on the `<body>` in the HTML, at the same level as the [layout scaffold](/docs/layout#layouts) classes (not on `<main>`):
 
 ```html
 <body class="layout layout-centered blog blog-index"></body>
 ```
 
-### Print styles
-
-Two rules bend for one file: one block per file, and the rule that a selector only contains classes from its own block. `global.print.css` holds **every** `@media print` rule in the project, including rules that select classes belonging to other blocks.
-
-Print is not a variation on the screen design, it is a different artifact. It removes the parts of the interface that paper cannot use, flattens tinted surfaces that cost toner and print as nothing, and decides where the page may break. That is a single decision about a medium, and a decision is easier to keep coherent in one place than spread across every component it touches. Reading `global.print.css` top to bottom should tell you what a printed page looks like; you cannot read that out of fourteen `@media print` blocks in fourteen files.
-
-Group it by intent rather than by component: the sheet, what paper cannot use, ink instead of tint, where the page may break. Grouping that way also collapses repeated rules into shared selector lists, which a per-component split cannot do.
-
-```css
-/* site/global.print.css */
-@media print {
-  /* What paper cannot use */
-  .a11y-skipLink,
-  .header,
-  .footer,
-  .signup {
-    display: none;
-  }
-
-  /* Ink instead of tint */
-  .codeBlock_pre,
-  .caveat,
-  .correction {
-    background: none;
-    /* --print-rule is yours to define, in your theme */
-    border: 1pt solid var(--print-rule);
-  }
-}
-```
-
-The cost of the exception is that deleting a component can leave an orphan rule behind. Naming the exception is what makes that affordable: there is one file to scan, not fourteen.
-
-**No other media query gets this exception.** `@media (forced-colors: active)`, `prefers-reduced-motion`, and `prefers-color-scheme` stay in the file of the block they concern. Those are per-block statements about how one component survives a condition: a note on that component, and part of understanding it. A print rule is one line in the design of a printed page, and belongs with the rest of that design.
-
 </section>
 
 ## mCSS classes syntax
@@ -309,24 +264,22 @@ CSS:
 }
 ```
 
-**One gotcha to keep in mind:** nesting a state inside its block compiles to a two-class selector (`.form_submit.is-disabled`), which beats single-class modifiers like `.form_submit-lg`. That's usually what you want: states describe what's happening _right now_, so they should win. But it means a state block is the wrong place to declare default values for custom properties. Declare defaults on the block itself, let modifiers override them, and only _use_ the properties inside the state. Otherwise your size and color modifiers will mysteriously stop working the moment the state class shows up.
+**Note:** State selectors have higher specificity than modifier classes (`.avatar.is-online` = `020` vs. `.avatar-xl` = `010`), so always declare custom properties default values inside the main class and _use_ the properties inside the state.
 
 ```css
 .avatar {
-  /* ✅ defaults live on the block… */
+  /* Defaults on the main class */
   --status-dot-size: 12px;
 
   &.is-online {
-    /* ❌ …not here: this would override .avatar-xl's dot size */
-    &::after {
-      /* ✅ states just consume the properties */
-      width: var(--status-dot-size);
-    }
+    /* ❌ not here: it would override .avatar-xl */
+    /* states just use the properties */
+    width: var(--status-dot-size);
   }
 }
 
 .avatar-xl {
-  /* modifiers can now override the default */
+  /* modifiers override the default */
   --status-dot-size: 20px;
 }
 ```
@@ -341,7 +294,7 @@ CSS:
 
 When using mCSS syntax **within a component**, it's considered overkill to create a class for every single HTML element you need to target.
 
-For example, this is acceptable (and recommended) CSS for the tags component (`component.tags.css`):
+For example, this is acceptable (and recommended) CSS for the [tags][tags] component:
 
 ```css
 .tags {
@@ -360,7 +313,7 @@ For example, this is acceptable (and recommended) CSS for the tags component (`c
 
 ### Modifiers and component variations
 
-When using modifiers to create different variations of a component, it's recommended to use local custom properties if possible instead of overriding the CSS directly.
+When using modifiers to create different variations of a component, it's recommended to use local custom properties if possible instead of overriding the CSS directly. (See the [notice component][notice] for an implementation example.)
 
 ```css
 /* Don't do that */
@@ -383,70 +336,51 @@ When using modifiers to create different variations of a component, it's recomme
 }
 ```
 
-See the [implementation][github] of the [notice component](/components/notice) for a real life example.
-
-### One block per file
-
-This rule governs every file in your `site/` folder, not just `component.*.css`. Name each file for the block it holds, and hold one block in it. `component.card.css` is `.card`, its elements, its modifiers, and its media queries, nothing else. A file carrying a second block is a file you cannot delete when that block dies; a block with no file of its own is a block nobody can find.
-
-- A container's items are elements, not blocks: a step indicator only ever exists inside `.steps`, so it is `.steps_step`, and it lives in `component.steps.css` with the rest of its block. The test is whether the thing has a life of its own: a `.card` that shows up all over the site is its own block, and a `.cardGrid` built to lay cards out is another, each with its own file.
-- A nested component starts its own name, so it gets its own file.
-- `global.*` files are bound by the same rule: one scaffold, one utility, one role family per file. A `global.layout.css` holding the page shell, a section pattern, and nine typography classes is three files.
-
-The import list in your entry file is then also the list of blocks in your project, in build order, which makes an unfamiliar codebase readable from a single file.
-
-Any questions or feedback? Head over to the [Github discussions][discussions]!
-
-</section>
-
-## Browser support
-
-<section class="docs_section prose">
-
-mCSS targets **[Baseline](https://web.dev/baseline) 2024**: it freely uses cascade layers (`@layer`), nesting, `:has()`, `light-dark()`, `@scope`, `text-wrap: balance`, and relative color syntax, all natively, with no polyfills. In practice that means Chrome and Edge 130, Firefox 132, and Safari 18.2 or newer, the versions that shipped by late 2024.
+### One class per file
 
-How things degrade in older browsers:
+<Notice
+  type="warning"
+  title="This is the most common error I see"
+  class="mb-md1"
+>
+  CSS files must only contain one CSS class, its modifiers, and its elements.
+  **Nothing else.**
+</Notice>
 
-- **Cascade layers, nesting, `:has()`, `light-dark()`**: load-bearing. Browsers without them are not supported. `light-dark()` deserves a specific warning: every color token stores it in a custom property, and a custom property holding an unsupported function does not fall back, it makes the properties that consume it invalid at computed-value time. Browsers older than mid-2024 get unset colors (`currentColor` borders, transparent backgrounds), not the light palette.
-- **`@scope`** (mid-2024): only affects `.prose` internals; spacing between prose blocks and headings loses one refinement.
-- **Scroll-driven animations**: the [ReadProgressBar](/components/readprogressbar) component detects support and falls back to JavaScript automatically.
-- **`sibling-index()`, CSS `random()`, SVG displacement filters**: used only by the [wireframe theme](/docs/themes) for per-element sketch variation; without them the theme keeps its fixed hand-drawn look.
+For example, the `component.card.css` should only contain:
 
-The exact compile floor lives in `.browserslistrc` (`baseline 2024`). Keep it: with a broader target, postcss-preset-env starts polyfilling the features above, which costs real weight (a `light-dark()` polyfill alone added 23% to a measured build) and quietly rewrites CSS the framework's layer model depends on.
+- `.card` and nested HTML elements.
+- `.card_*` descendants.
+- `.card-*` modifiers.
+- State classes
+- **Nothing else.** See [this blog article][system-that-scales] for more details.
 
 </section>
 
 [1]: /blog/what-is-itcss
-[2]: https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax#css_rulesets
 [3]: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
 [4]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/_global.css
-[5]: /docs/tokens
-[6]: /docs/media-queries
+[5]: /docs/default-theme
+[6]: /docs/layout
 [7]: https://github.com/postcss/postcss-mixins
-[a11y]: /docs/global#accessibility
+[a11y]: /docs/layout#accessibility
 [bem]: /blog/what-is-bem
 [bemit]: https://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/
-[browserslistrc]: https://github.com/minimaldesign/mCSS/blob/main/.browserslistrc
 [components]: /components/start
 [coupling]: /blog/component-system-that-scales
-[discussions]: https://github.com/minimaldesign/mCSS/discussions
-[dist-components-min]: https://github.com/minimaldesign/mCSS/blob/main/dist/mcss.components.min.css
-[dist-components]: https://github.com/minimaldesign/mCSS/blob/main/dist/mcss.components.css
-[dist-css]: https://github.com/minimaldesign/mCSS/blob/main/dist/mcss.css
-[dist-dir]: https://github.com/minimaldesign/mCSS/tree/main/dist/css
-[dist-index]: https://github.com/minimaldesign/mCSS/blob/main/dist/css/mcss.css
-[dist-min]: https://github.com/minimaldesign/mCSS/blob/main/dist/mcss.min.css
 [framework-src]: https://github.com/minimaldesign/mCSS/tree/main/src/styles/framework
-[github]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.notice.css
-[grid]: /docs/global#grid
+[srcStarter]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/theme.starter.css
+[notice]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.notice.css
+[grid]: /docs/layout#grid
 [helpers]: /docs/helpers
-[interfaceTokens]: /docs/tokens#interface-tokens
+[uiTokens]: /docs/default-theme#ui-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
+[layout]: /docs/layout#layouts
+[prose]: /docs/layout#prose
 [site-src]: https://github.com/minimaldesign/mCSS/tree/main/src/styles/site
 [src]: https://github.com/minimaldesign/mCSS/tree/main/src/styles
-[themes]: /docs/themes
-[wrap]: /docs/global#wrap
+[system-that-scales]: /blog/component-system-that-scales
+[release]: https://github.com/minimaldesign/mCSS/releases/latest
+[tags]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.tags.css
+[themes]: /docs/default-theme
+[wrap]: /docs/layout#wrap
diff --git a/src/content/docs/themes.mdx b/src/content/docs/themes.mdx
deleted file mode 100644
index bf2442d0..00000000
--- a/src/content/docs/themes.mdx
+++ /dev/null
@@ -1,99 +0,0 @@
----
-title: "Themes"
-description: "Themes: swappable styles made of token overrides plus optional style rules"
-lastUpdate: 2026-07-28
-version: 1
----
-
-<section class="prose">
-
-<div class="docs_oversizedTable">
-
-| File name             | Description                                     | Source                 |
-| --------------------- | ----------------------------------------------- | ---------------------- |
-| `theme.default.css`   | Empty template: copy it to start your own theme | [Github][srcDefault]   |
-| `theme.wireframe.css` | Example theme with a hand-drawn wireframe look  | [Github][srcWireframe] |
-
-</div>
-
-[srcDefault]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/theme.default.css
-[srcWireframe]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/theme.wireframe.css
-
-A theme is **one CSS file that restyles your whole site**. It contains [token](/docs/tokens) overrides, plus optional style rules for the few things tokens can't express. Swap which theme file your entry point imports and everything changes; anything the theme doesn't mention falls back to the framework defaults.
-
-mCSS ships with **no theme active**: the default look is simply the framework's own token defaults with an empty `theme` layer.
-
-</section>
-
-## Activating a theme
-
-<section class="prose">
-
-Import exactly one theme file from your own entry point, after the framework:
-
-```css
-@import url(./framework/mcss.css);
-@import url(./framework/mcss.components.css); /* optional */
-@import url(./framework/theme.wireframe.css);
-```
-
-That's the entire swap. Theme files are **self-layered**: each one wraps its own content in `@layer theme`, so it lands in the right cascade slot no matter how you load it (plain `@import`, a `<link>` tag on `dist/css/theme.wireframe.css`, or a bundler). No `layer()` annotation needed.
-
-The `theme` layer sits after `components` and before `helpers`, so a theme beats every framework default but still loses to your own unlayered CSS and to [helpers](/docs/helpers). The layer order runs from default to deliberate: the framework's layers are what things look like when nobody has an opinion, a theme is a deliberate opinion about those defaults, and your unlayered CSS is more deliberate still.
-
-</section>
-
-## Why small theme files go far
-
-<section class="prose">
-
-Themes work because of the two token tiers below them:
-
-1. **Raw tokens** (`settings.tokens.css`) hold raw values: palettes, type scale, spacing, etc.
-2. **[Interface tokens](/docs/tokens#interface-tokens)** (`settings.ui.css`) map those primitives onto meaning: semantic aliases like `--ui-border-color`, element defaults (`--heading-*`, `--input-*`, ...), plus every component's token defaults (`--bt-*`, `--card-*`, ...). Interface tokens usually take another token for value; raw values appear only where following the scales would be wrong (content, one-off control geometry, `em`-relative measures).
-
-Because components read `var(--ui-border-color)` instead of a raw hex, a theme gets three levels of blast radius from a single override:
-
-```css
-@layer theme {
-  :root {
-    /* Whole palette shifts */
-    --base-950: #1a1208;
-
-    /* Every bordered surface at once */
-    --ui-border-color: light-dark(var(--base-300), var(--base-600));
-
-    /* Single component override */
-    --bt-border-radius: 0;
-  }
-}
-```
-
-</section>
-
-## Example: the wireframe theme
-
-<section class="prose">
-
-[`theme.wireframe.css`][srcWireframe] turns the whole site into a hand-drawn wireframe and shows both halves of a theme in action. To see it applied to a real page, flip the switcher on the [marketing template](/templates/marketing).
-
-**The token half** does most of the work: a grayscale palette (`--base-*`, `--primary-*`, and the feedback scales, because in a wireframe success and danger are annotations, not colors), a marker-style handwriting stack for text, headings, and `--display`, pen-weight borders (`--border-sm: 2px`), and hard-offset "paper cutout" shadows replacing the soft blur scale. On/off states (toggle, avatar status dot) get explicit ink-on-paper overrides since the green they normally lean on is gone. For wobbly sketch borders it defines three oversized asymmetric radii (`--wobble-1/2/3`) and remaps each component's radius token to a different one, so cards, buttons, and inputs don't all wobble identically. It deliberately does NOT override the raw `--radius-*` scale: uniform wobble reads as a bug, not a hand.
-
-**The style-rule half** covers what tokens can't express: wavy link underlines (only the `text-decoration-style` longhand, so un-underlined links stay clean), tiny alternating tilts on cards via the independent `rotate` property (which composes with the transforms components animate instead of fighting them), drawn-panel borders on filled and primary sections, and a traced-twice pencil stroke drawn by a pseudo-element with the same border color, a different wobble, and a 1px offset. Progressive enhancements ride on top for browsers that support them: an SVG displacement filter roughens the traced card stroke; `sibling-index()` (all current engines) seeds per-element variation through `sin()` so every box gets its own tilt, stroke offset, and corner radii, with a registered inherited seed keeping a card's corners in sync with its media; and CSS `random()` (Safari 26.5+) upgrades tilts and stroke offsets to true randomness. Everything degrades to the fixed sketch silently.
-
-Also worth copying: what it leaves alone. The focus ring stays crisp and high-contrast, `--radius-round` consumers (avatars, toggles) stay round, and text stays at the near-black end of the gray scale.
-
-</section>
-
-## Writing your own theme
-
-<section class="prose">
-
-Copy [`theme.default.css`][srcDefault] and start overriding. Guidelines:
-
-- **Tokens first.** Most themes never need a selector: raw tokens for the palette and type, interface tokens for cross-cutting changes, component tokens for details.
-- **Style rules for the rest**, only for what tokens can't express. Pseudo-elements, `nth-child` rhythm, `text-decoration`, and text rendering on `body` such as font smoothing, `font-synthesis`, or `text-wrap` have no token hooks, so themes may style them directly. Theme files are the one place in mCSS allowed to select framework classes from outside: component classes, framework globals like `.a11y-skipLink`, and bare element selectors (see [`theme.wireframe.css`][srcWireframe] for a real example). **A `body` rule belongs here, not in your project CSS.**
-- **Check tokens before writing a `body` rule.** Most of what people write into one is already an interface token. The elements layer paints the page from `--body-background-color`, `--text-color`, and `--text`, so a theme that sets those does not also need to set `background-color`, `color`, and `font-family`. What is left over (the text-rendering properties the framework exposes no token for) is exactly what a theme style rule is for.
-- **No `!important`.** A theme is meant to be overridable by your page CSS; the last word belongs to [helpers](/docs/helpers).
-
-</section>
diff --git a/src/data/docsNav.js b/src/data/docsNav.js
index ac7e24a8..80e15290 100644
--- a/src/data/docsNav.js
+++ b/src/data/docsNav.js
@@ -1,16 +1,16 @@
 // Single source of truth for the docs sub-navigation, shared by the docs
 // sidebar (NavDocs.astro) and the site header's Docs dropdown/mobile menu
 // (SiteHeader.astro). Keep this the only place these pages are listed.
+// Entries link to /docs/<id> unless they carry an explicit href.
 
 export const docsNavItems = [
-  { id: 'start', title: 'Getting Started' },
-  { id: 'tokens', title: 'Tokens' },
-  { id: 'media-queries', title: 'Media Queries' },
-  { id: 'themes', title: 'Themes' },
-  { id: 'reset', title: 'Reset' },
-  { id: 'elements', title: 'HTML Elements' },
-  { id: 'global', title: 'Global Styles' },
-  { id: 'helpers', title: 'Helpers' },
-  { id: 'ai', title: 'AI Agents' },
-  { id: 'template', title: 'Marketing Template' },
+  { id: "start", title: "Getting Started" },
+  { id: "installation", title: "Installation" },
+  { id: "default-html", title: "Default HTML" },
+  { id: "default-theme", title: "Default Theme" },
+  { id: "layout", title: "Layout" },
+  { id: "components", title: "Components" },
+  { id: "helpers", title: "Helpers" },
+  { id: "browser-support", title: "Browser Support" },
+  { id: "ai", title: "AI Agents" },
 ];
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 22388739..7f4e19e6 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -54,7 +54,7 @@ const headImage = `${Astro.url.origin}${logoImg.src.split('?')[0]}`;
     {markdownHref && <link rel="alternate" type="text/markdown" href={markdownHref} />}
     <meta name="msapplication-TileColor" content="#0ea5e9" />
     {/* Values mirror --body-background-color (--base-0 / --base-950 in
-        settings.tokens.css). ThemeToggle.astro re-syncs them when the
+        theme.default.tokens.css). ThemeToggle.astro re-syncs them when the
         visitor overrides the OS color scheme. */}
     <meta name="theme-color" media="(prefers-color-scheme: light)" content="#fff" />
     <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#23282e" />
diff --git a/src/layouts/DocsPostLayout.astro b/src/layouts/DocsPostLayout.astro
index da4f4def..68d0ba15 100644
--- a/src/layouts/DocsPostLayout.astro
+++ b/src/layouts/DocsPostLayout.astro
@@ -14,7 +14,7 @@ const markdownHref = Astro.url.pathname.replace(/\/$/, '') + '.md';
     <NavDocs />
   </aside>
   <aside class="layout_content_aside layout_content_aside-toc">
-    <Toc selector=".docs" headings={['h2', 'h3']} scrollOffset={80} description={'On this page'} icon={arrow} />
+    <Toc selector=".docs" headings={['h2', 'h3', 'h4']} scrollOffset={80} description={'On this page'} icon={arrow} />
   </aside>
   <main class="layout_content_main">
     <h1 class="h3">{`Docs :: ${frontmatter.title}`}</h1>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 2937d5bb..61057bf8 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -36,7 +36,7 @@ const mcssComponentsMinGzipKb = Math.round(gzipSync(mcssComponentsMinCss).length
 // Section 4's diff panes, rendered with Shiki (github-dark) at build time.
 // Each list matches the overrides in page.home.css line for line.
 const themeDiffs = {
-  default: `/* settings.ui.css defaults (excerpt) */
+  default: `/* theme.default.ui.css defaults (excerpt) */
 :root {
   --heading-font: var(--display);
   --text: ui-sans-serif, system-ui, sans-serif;
@@ -353,7 +353,7 @@ const themeDiffs = {
     <ul class="home_own_facts home_reveal">
       <li><strong>MIT License</strong><span>Use it anywhere. Keep it forever.</span></li>
       <li><strong>Versioned releases</strong><span>Pull updates when you choose to.</span></li>
-      <li><strong>One token file</strong><span>Edit <code>settings.tokens.css</code>, not <code>node_modules</code>.</span></li>
+      <li><strong>One theme file</strong><span>Your design lives in your theme, not <code>node_modules</code>.</span></li>
     </ul>
   </Section>
 
diff --git a/src/pages/llms.txt.js b/src/pages/llms.txt.js
index bf5a005d..9a7be39b 100644
--- a/src/pages/llms.txt.js
+++ b/src/pages/llms.txt.js
@@ -24,9 +24,9 @@ export async function GET(context) {
   const text = [
     "# mCSS",
     "",
-    "> mCSS is a modern CSS framework and component library for websites: real CSS, real markup, zero build step, built on native cascade layers. It is not a dependency; you copy the files into your project and own them, editing them directly (starting with settings.tokens.css).",
+    "> mCSS is a modern CSS framework and component library for websites: real CSS, real markup, zero build step, built on native cascade layers. It is not a dependency; you copy the files into your project and own them, putting your design in a theme of your own (copy theme.starter.css).",
     "",
-    "Every docs and components page has a markdown twin at the same URL with `.md` appended (e.g. /docs/tokens.md). Fetch those instead of the HTML pages. The complete reference in a single file is at /llms-full.txt.",
+    "Every docs and components page has a markdown twin at the same URL with `.md` appended (e.g. /docs/default-theme.md). Fetch those instead of the HTML pages. The complete reference in a single file is at /llms-full.txt.",
     "",
     "## Docs",
     "",
diff --git a/src/pages/templates/marketing.astro b/src/pages/templates/marketing.astro
index eec88fe5..d2e14bdf 100644
--- a/src/pages/templates/marketing.astro
+++ b/src/pages/templates/marketing.astro
@@ -6,6 +6,8 @@
 // joke: the structure is the standard landing-page structure, and the
 // words point at it while it happens. Replace them with yours.
 import '../../styles/framework/mcss.css';
+import '../../styles/framework/mcss.components.css';
+import '../../styles/framework/theme.default.css';
 import wireframeThemeUrl from '../../styles/framework/theme.wireframe.css?url';
 
 import Banner from '../../components/Banner.astro';
@@ -41,7 +43,7 @@ const navItems = [
       /* Pin the cascade-layer order before any stylesheet loads: layer
          priority is set by first occurrence, and the theme <link> below
          may be parsed before the framework's own @layer statement. */
-      @layer settings, base, elements, global, components, theme, helpers;
+      @layer base, elements, global, components, theme.default, theme.user, external, helpers;
     </style>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
@@ -64,7 +66,7 @@ const navItems = [
     </Header>
 
     <main class="layout_content">
-      <Hero variant="full" height={55} media={{ type: 'gradient', src: 'var(--gradient-primary)' }} textColor="--base-0">
+      <Hero variant="full" height={55} media={{ type: 'gradient', src: 'linear-gradient(90deg, var(--primary-950) 0%, var(--primary-400) 100%)' }} textColor="--base-0">
         <h1>The landing page you already know how to read</h1>
         <p>Big headline, reassuring sentence underneath, two buttons where the bright one is the one we want. You've scanned this exact page four hundred times, so we won't pretend it's a surprise.</p>
         <div class="hero_actions">
diff --git a/src/styles/_global.css b/src/styles/_global.css
index def32c81..ba259654 100644
--- a/src/styles/_global.css
+++ b/src/styles/_global.css
@@ -3,25 +3,10 @@
 /* mCSS component library (fills the `components` layer slot) */
 @import url(./framework/mcss.components.css);
 
-/*
-  Theme activation. A theme is part of this site's CSS, not the framework's:
-  mcss.css declares the `theme` layer slot but never fills it. Import at
-  most one theme.*.css file here to restyle the whole site. No layer()
-  annotation: themes self-layer (@layer theme inside the file), and adding
-  one would nest a redundant theme.theme sub-layer. The layer order
-  declared in mcss.css decides priority, which is why the unlayered
-  site styles below beat the theme no matter where this line sits.
-  None imported = the default look.
-*/
-/* @import url(./framework/theme.wireframe.css); */
+@import url(./framework/theme.default.css);
+/* Your custom theme would go here */
 
-/*
-  Site-only styles (docs site chrome, internal components, pages).
-  UNLAYERED: their normal declarations beat the framework layers and match
-  the cascade of other unlayered site CSS (expressive-code, Astro scoped
-  styles). Helpers still win everywhere: their !important declarations beat
-  unlayered CSS too.
-*/
+/* Site-only styles (mCSS specific) */
 @import url(./site/global.layout.css);
 
 @import url(./site/component.header.css);
@@ -43,10 +28,10 @@
 @import url(./site/component.selectMask.css);
 
 /*  Page specific styles */
-/* (Use sparingly. Component is probably the way to go) */
+/* (Use sparingly. Components are usually the way to go) */
 @import url(./site/page.blog.css);
 @import url(./site/page.docs.css);
 @import url(./site/page.home.css);
 
-/* Plugins, etc. */
-@import url(./site/external.astro.css);
+/* Patches to third-party CSS (plugins, etc.) */
+@import url(./site/patch.astro.css);
diff --git a/src/styles/framework/component.fieldRow.css b/src/styles/framework/component.fieldRow.css
index ef985592..09908787 100644
--- a/src/styles/framework/component.fieldRow.css
+++ b/src/styles/framework/component.fieldRow.css
@@ -3,7 +3,7 @@
 /* Inline composition: fields and buttons on one wrapping row
    (newsletter signup, search bar…). Mix .fieldRow_field onto each field:
    fieldRow never reaches into the field block itself, it only sets the
-   --field-message-position interface token so hints and errors overlay
+   --field-message-position ui token so hints and errors overlay
    below the row instead of pushing bottom-aligned buttons out of line.
    Leave a little vertical room under the row for them. */
 .fieldRow {
diff --git a/src/styles/framework/component.toggle.css b/src/styles/framework/component.toggle.css
index 8ba2b420..bc3f26eb 100644
--- a/src/styles/framework/component.toggle.css
+++ b/src/styles/framework/component.toggle.css
@@ -1,5 +1,5 @@
 .toggle {
-  /* Themable via the --toggle-* tokens in settings.ui.css */
+  /* Themable via the --toggle-* tokens in theme.default.ui.css */
   --toggle-w: var(--toggle-width);
   --toggle-h: var(--toggle-height);
   --toggle-bd: var(--toggle-border-width);
diff --git a/src/styles/framework/elements.text.css b/src/styles/framework/elements.text.css
index f4308d3e..a1a93f06 100644
--- a/src/styles/framework/elements.text.css
+++ b/src/styles/framework/elements.text.css
@@ -145,7 +145,7 @@ dd + dt {
 }
 
 del {
-  text-decoration-color: var(--danger-500);
+  text-decoration-color: var(--no-500);
   text-decoration-style: wavy;
 }
 
diff --git a/src/styles/framework/global.grid.css b/src/styles/framework/global.grid.css
index c50ad4eb..4f5393a0 100644
--- a/src/styles/framework/global.grid.css
+++ b/src/styles/framework/global.grid.css
@@ -16,7 +16,7 @@
 }
 
 /* DEFAULT */
-.grid > .grid_item { display: block; -moz-appearance: none; appearance: none; -webkit-appearance: none }
+.grid > .grid_item { display: block; appearance: none; }
 .grid[col="1"] { --grid-tc: repeat(1, 1fr) }
 .grid[col="2"] { --grid-tc: repeat(2, 1fr) }
 .grid[col="3"] { --grid-tc: repeat(3, 1fr) }
diff --git a/src/styles/framework/global.layout.css b/src/styles/framework/global.layout.css
index 0321d2fd..0b82081e 100644
--- a/src/styles/framework/global.layout.css
+++ b/src/styles/framework/global.layout.css
@@ -10,7 +10,7 @@
       <footer>…</footer>
     </body>
 
-  Widths come from the layout tokens in settings.ui.css:
+  Widths come from the layout tokens in theme.default.ui.css:
   --layout-content-width, --layout-aside-width, --layout-toc-width.
 */
 
diff --git a/src/styles/framework/help.devtools.css b/src/styles/framework/help.devtools.css
index 93915580..b376ea1d 100644
--- a/src/styles/framework/help.devtools.css
+++ b/src/styles/framework/help.devtools.css
@@ -22,8 +22,8 @@ body.dev {
   z-index: var(--z-top) !important;
   padding: var(--sm1) !important;
   font-size: 1rem !important;
-  color: var(--danger-500) !important;
-  background: var(--danger-100) !important;
-  border: 1px solid var(--danger-500) !important;
+  color: var(--no-500) !important;
+  background: var(--no-100) !important;
+  border: 1px solid var(--no-500) !important;
   border-radius: var(--radius-md) !important;
 }
diff --git a/src/styles/framework/mcss.css b/src/styles/framework/mcss.css
index a8c307aa..e5fb656b 100644
--- a/src/styles/framework/mcss.css
+++ b/src/styles/framework/mcss.css
@@ -1,31 +1,22 @@
 /*
   mCSS framework entry point.
 
-  The framework lives in named cascade layers, declared here in priority
-  order (later wins). The layer name, not import order, decides priority.
-  Anything a consumer writes OUTSIDE these layers beats the framework by
-  default, with one exception: helpers use !important, and important layered
-  declarations beat unlayered CSS. Helpers are element-level overrides that
-  win everywhere, like inline styling.
+  mCSS recreates the ITCSS specificity strategy using modern CSS layers.
+  Anything outside these layers has higher specificity, except helpers which use
+  `!important` to override everything, by design.
 */
-@layer settings, base, elements, global, components, theme, helpers;
+@layer base, elements, global, components, theme.default, theme.user, external, helpers;
 
-/* Build-time only (@custom-media + mixin definitions, no runtime output) */
 @import url(./settings.media-queries.css);
 @import url(./settings.mixins.css);
 
-/* Settings */
-@import url(./settings.tokens.css) layer(settings);
-@import url(./settings.ui.css) layer(settings);
-
 /*
-  No theme is imported here, ever: the framework only declares the empty
-  `theme` slot above. A theme (theme.*.css) is part of YOUR css: a swappable
-  theme of token overrides plus optional style rules that you activate, at
-  most one, from your own entry point (see _global.css for this site's).
-  Theme files self-layer (@layer theme inside the file), so wherever that
-  import sits it lands in this slot.
-  None imported = the default look (settings.* holds every default).
+  Your theme is not imported here, but at the same level as mCSS:
+
+    @import url(./framework/mcss.css);
+    @import url(./framework/theme.default.css);
+
+  See the default theme for how to create your own.
 */
 
 /* Reset & Normalize */
@@ -50,16 +41,27 @@
 @import url(./global.wrap.css) layer(global);
 
 /*
-  No component is imported here either: this entry only declares the empty
-  `components` slot above. The component library lives in its own entry,
-  mcss.components.css, so consumers who build their own components can skip
-  it entirely. Import it alongside this file (any order: the slot declared
-  here decides priority) to get the full library.
+  Components are optional and not imported here
+  You import them at the same level as mCSS:
+
+    @import url(./framework/mcss.css);
+    @import url(./framework/mcss.components.css);
+
+  See the default theme for how to create your own.
+*/
+
+/*
+  `external` is an empty slot for third-party CSS (npm packages, plugins).
+  Import vendor stylesheets into it from your own global import:
+
+    @import url(../node_modules/some-package/widget.css) layer(external);
+
+  Vendor CSS in the layer loses to all your unlayered CSS, so it stays
+  easy to override. Write those overrides in a patch.* file (e.g.
+  patch.datepicker.css) in your own CSS folder.
 */
 
-/* Helpers for local overrides. Every declaration is !important on purpose: */
-/* important layered declarations beat unlayered CSS, so helpers win over */
-/* everything, including consumer CSS. */
+/* Helpers for local overrides. Every declaration is !important */
 /* (Use VERY sparingly, or you might as well use Tailwind…) */
 @import url(./help.colors.css) layer(helpers);
 @import url(./help.devtools.css) layer(helpers);
diff --git a/src/styles/framework/settings.media-queries.css b/src/styles/framework/settings.media-queries.css
index 406f61af..c5476245 100644
--- a/src/styles/framework/settings.media-queries.css
+++ b/src/styles/framework/settings.media-queries.css
@@ -6,7 +6,7 @@ https://open-props.style/#media-queries
 
 Can't use var() inside media queries 🤦‍♂️
 https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
-so breakpoints are not in settings.tokens.css
+so breakpoints are not in theme.default.tokens.css
 
 xxs: 240px
 xs: 360px
diff --git a/src/styles/framework/theme.default.css b/src/styles/framework/theme.default.css
index 9f6ca450..56c22a17 100644
--- a/src/styles/framework/theme.default.css
+++ b/src/styles/framework/theme.default.css
@@ -1,44 +1,25 @@
-/* DEFAULT THEME (template) */
+/* DEFAULT THEME */
 
 /*
-  A theme is a file of token overrides, plus optional rules for what
-  tokens can't express. Swap which theme file your entry point imports and
-  the whole site restyles; everything a theme doesn't mention falls back to
-  the framework defaults (settings.tokens.css + settings.ui.css).
-
-  Themes are self-layered: the @layer theme block below slots this file
-  into the layer order declared in mcss.css no matter how it's loaded
-  (plain @import, link tag, bundler). Import exactly one theme from your
-  own entry point, after mcss.css:
+  Basic design tokens and UI abstractions
+  Import it next to mcss.css
 
     @import url(./framework/mcss.css);
-    @import url(./framework/theme.wireframe.css);
+    @import url(./framework/theme.default.css);
+
+  mcss.css imports no theme itself; without this file every token is unset
+  and the page will look broken..
 
-  mCSS imports no theme by default: an empty theme layer IS the default
-  look. Copy this file to start your own theme.
+  Don't edit the  default theme.
 
-  Guidelines:
-  - Prefer token overrides. Override raw tokens (--base-*, --text) to shift
-    the whole palette or type, interface tokens (--ui-border-color,
-    --heading-font) for cross-cutting changes, or component tokens
-    (--bt-border-radius) for surgical ones.
-  - Rules are for what tokens can't express (pseudo-elements,
-    nth-child rhythm, text-decoration). Theme files are the one place
-    allowed to style component classes from outside; they still lose
-    to your unlayered CSS and to helpers, by design.
-  - No !important: that privilege is reserved for the helpers layer.
+  To make your own theme,  either duplicate/rename the 2 files below and
+  import theme instead of the default, or just override the bits you want
+  to change and imported that AFTER the defaults. There is `theme.starter.css`
+  to get you started if you want to go that road (recommended)).
 */
 
-@layer theme {
-  :root {
-    /* A new palette usually gets you 80% of the way:              */
-    /* --base-0: #fff;                                             */
-    /* --primary-500: rebeccapurple;                               */
-    /* Then reach for interface and component tokens as needed:    */
-    /* --heading-font: Georgia, serif;                             */
-    /* --card-border-radius: 0;                                    */
-    /* A theme may also add scales the framework doesn't ship,     */
-    /* e.g. a second accent, and use them in its own style rules:  */
-    /* --secondary-500: teal;                                      */
-  }
-}
+/* Defensive redundancy - Same layers as in mcss.css */
+@layer base, elements, global, components, theme.default, theme.user, external, helpers;
+
+@import url(./theme.default.tokens.css) layer(theme.default);
+@import url(./theme.default.ui.css) layer(theme.default);
diff --git a/src/styles/framework/settings.tokens.css b/src/styles/framework/theme.default.tokens.css
similarity index 80%
rename from src/styles/framework/settings.tokens.css
rename to src/styles/framework/theme.default.tokens.css
index df7cc22e..af8afdf0 100644
--- a/src/styles/framework/settings.tokens.css
+++ b/src/styles/framework/theme.default.tokens.css
@@ -1,10 +1,13 @@
-/* SETTINGS TOKENS */
+/* DEFAULT THEME: TOKENS */
 
 /*
-Can't use var() inside media queries, so breakpoints are hard coded in
-settings.media-queries.css
+  Raw design tokens. Part of the default theme (see theme.default.css);
+  Don't edit this file directly. Thee best way is to Override it with your
+  own theme (see theme.starter.css).
 
-xxs: 240px xs: 360px sm: 480px md: 768px lg: 1024px xl: 1440px xxl: 1920px
+  Can't use var() inside media queries, so breakpoints are hard coded in
+  settings.media-queries.css instead of custom properties
+  xxs: 240px xs: 360px sm: 480px md: 768px lg: 1024px xl: 1440px xxl: 1920px
 */
 
 /*
@@ -21,19 +24,23 @@ xxs: 240px xs: 360px sm: 480px md: 768px lg: 1024px xl: 1440px xxl: 1920px
 
 • Colors
 
-• Box shadows
-• Border radius
 • Border width
+• Border radius
+
+• Box shadows
+
 • Opacity
+
+• Z-index
+
+• Transitions
+
 */
 
 :root {
-  /* GLOBALS */
 
   /* DIMENSIONS */
 
-  /* Sizes */
-
   --xs1: 4px;
   --xs2: 8px;
   --xs3: 12px;
@@ -70,18 +77,20 @@ xxs: 240px xs: 360px sm: 480px md: 768px lg: 1024px xl: 1440px xxl: 1920px
   --tera2: 480px;
   --tera3: 520px;
 
-  /* Aspect Ratios */
+  /* ASPECT RATIOS */
+
   --ar-square: 1;
   --ar-landscape: 4/3;
   --ar-portrait: 3/4;
   --ar-widescreen: 16/9;
   --ar-golden: 1.618/1;
 
-  /* TYPOGRAPHY */
-  /* See also elements.text & help.text */
+  /*  */
+
+  /* (More typography in elements.text & help.text)  */
+
+  /* FONT FAMILIES (https://modernfontstacks.com) */
 
-  /* Font Families */
-  /* Local font stacks - More options @ https://modernfontstacks.com */
   --display:
     Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, ui-sans-serif,
     sans-serif;
@@ -91,8 +100,8 @@ xxs: 240px xs: 360px sm: 480px md: 768px lg: 1024px xl: 1440px xxl: 1920px
     Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono,
     ui-monospace, monospace;
 
-  /* Font Sizes */
-  /* Create your own sizes @ https://typescale.com */
+  /* FONT SIZES (https://typescale.com) */
+
   --text-xs: 0.694rem;
   --text-sm: 0.833rem;
   --text-md: 1rem;
@@ -105,11 +114,8 @@ xxs: 240px xs: 360px sm: 480px md: 768px lg: 1024px xl: 1440px xxl: 1920px
   --display-mega: 3.583rem;
   --display-giga: 4.299rem;
 
-  /* Heading font sizes are decisions, not scale steps: they map each
-     heading level onto this scale. See --heading-font-size-* in
-     settings.ui.css. */
+  /* FONT WEIGHTS */
 
-  /* Font Weights */
   --extra-light: 200;
   --light: 300;
   --book: 400;
@@ -117,14 +123,16 @@ xxs: 240px xs: 360px sm: 480px md: 768px lg: 1024px xl: 1440px xxl: 1920px
   --bold: 700;
   --black: 900;
 
-  /* Letter Spacing */
+  /* LETTER SPACING */
+
   --tracking-sm: -0.05em;
   --tracking-md: 0.025em;
   --tracking-lg: 0.05em;
   --tracking-xl: 0.075em;
   --tracking-xxl: 0.15em;
 
-  /* Line Height */
+  /* LINE HEIGHT */
+
   --leading-xs: 1;
   --leading-sm: 1.15;
   --leading-md: 1.375;
@@ -132,8 +140,7 @@ xxs: 240px xs: 360px sm: 480px md: 768px lg: 1024px xl: 1440px xxl: 1920px
   --leading-xl: 1.75;
   --leading-xxl: 2;
 
-  /* COLORS */
-  /* Make your own palettes programmatically: https://www.tints.dev */
+  /* COLORS (https://www.tints.dev) */
 
   /* Base */
 
@@ -164,8 +171,6 @@ xxs: 240px xs: 360px sm: 480px md: 768px lg: 1024px xl: 1440px xxl: 1920px
   --primary-900: #0c4a6e;
   --primary-950: #082f49;
 
-  /* Secondary and/or Highlight goes here */
-
   /* Feedback */
 
   --yes-100: #d5f6e8;
@@ -190,14 +195,6 @@ xxs: 240px xs: 360px sm: 480px md: 768px lg: 1024px xl: 1440px xxl: 1920px
 
   --highlight-500: #ffee00;
 
-  /* GRADIENTS */
-
-  --gradient-primary: linear-gradient(
-    90deg,
-    var(--primary-950) 0%,
-    var(--primary-400) 100%
-  );
-
   /* BORDERS */
 
   --border-sm: 1px;
diff --git a/src/styles/framework/settings.ui.css b/src/styles/framework/theme.default.ui.css
similarity index 82%
rename from src/styles/framework/settings.ui.css
rename to src/styles/framework/theme.default.ui.css
index 3a8a3f2d..3aca19a2 100644
--- a/src/styles/framework/settings.ui.css
+++ b/src/styles/framework/theme.default.ui.css
@@ -1,65 +1,36 @@
-/* INTERFACE TOKENS */
+/* DEFAULT THEME: UI */
 
 /*
-  The decisions layer. Every token here is named for what it's FOR (an
-  element, a component, or a shared meaning) and answers "what does this
-  thing use by default". Tokens named for what they ARE (--sm1, --base-500,
-  --bold) are scale tokens and live in settings.tokens.css. That's the
-  whole split: a name that mentions a UI thing belongs here; a name that
-  labels a step on a scale belongs there.
+  Tokens here are one abstraction level above raw tokens
+  They define styling for elements, components, or a shared style.
 
   Values, in order of preference:
-  1. Another interface token, when the meaning is shared
-     (--input-border-color: var(--ui-border-color)).
-  2. A scale token, when the value should follow the system scales
-     (--fieldset-padding: var(--sm3)).
-  3. A raw value, only where following the scales would be wrong:
-     content (separator strings, icon URLs), geometry tuned to one
-     control (--toggle-width), or element-relative measures that track
-     the element's own type instead of the page (em heading spacing).
-     The test: "if a theme retuned the scales, should this follow?"
-
-  Deliberate deviations from these defaults live in a theme file
-  (see theme.default.css).
+  1. Another ui token, when the meaning is shared
+     `--input-border-color: var(--ui-border-color)`
+  2. A raw token: `--fieldset-padding: var(--sm3)`
+  3. A raw value, only when it's not supposed to match a raw token
+     or when it's relative to the the element's own value (em heading spacing).
+
+  Part of the default theme (see theme.default.css); don't edit it,
+  override from your own theme (see theme.starter.css).
 */
 
 :root {
   /* Color scheme (light/dark), toggled by the .theme-light / .theme-dark
-     classes below. Unrelated to theme files, which are full themes. */
+     classes below. */
   color-scheme: light dark;
 
   --ui-border-color: light-dark(var(--base-200), var(--base-500));
-  /* Also consumed by the --shadow-* scale in settings.tokens.css: the one
-     reference between the files that runs upward, so shadows can switch
-     with the color scheme. Raw alpha colors: the palettes have no alpha
-     steps. */
+  /* Also used by the --shadow-*  in theme.default.tokens.css, The one reference
+     between the files that runs upward, so shadows can switch with the color
+     scheme. Raw alpha colors: the palettes have no alpha steps. */
   --ui-shadow-color: light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.6));
 
-  /* Keyboard focus ring (consumed by :focus-visible in global.a11y.css).
-     Raw 2px on purpose: an accessibility affordance that shouldn't move
-     when a theme retunes the decorative border scale. */
+  /* Keyboard focus ring (used by :focus-visible in global.a11y.css).
+     Raw 2px on purpose: an accessibility shouldn't change with the theme. */
   --focus-ring-color: light-dark(var(--primary-500), var(--primary-400));
   --focus-ring-width: 2px;
   --focus-ring-offset: 2px;
-
-  /* Semantic feedback aliases over the raw feedback palettes.
-     Prefer these in components and themes; a theme can restyle feedback by
-     overriding the aliases without touching the raw scales. */
-  --success-100: var(--yes-100);
-  --success-200: var(--yes-200);
-  --success-300: var(--yes-300);
-  --success-400: var(--yes-400);
-  --success-500: var(--yes-500);
-  --danger-100: var(--no-100);
-  --danger-200: var(--no-200);
-  --danger-300: var(--no-300);
-  --danger-400: var(--no-400);
-  --danger-500: var(--no-500);
-  --warning-100: var(--maybe-100);
-  --warning-200: var(--maybe-200);
-  --warning-300: var(--maybe-300);
-  --warning-400: var(--maybe-400);
-  --warning-500: var(--maybe-500);
 }
 
 :root.theme-light {
@@ -83,10 +54,7 @@
   --input-border-width: var(--border-sm);
   --input-border-color: var(--ui-border-color);
   --input-border-radius: var(--radius-md);
-  --input-border-color-invalid: light-dark(
-    var(--danger-500),
-    var(--danger-400)
-  );
+  --input-border-color-invalid: light-dark(var(--no-500), var(--no-400));
 
   /* Gap under a label that precedes its control */
   --label-spacing: var(--xs1);
@@ -101,16 +69,16 @@
   --meter-height: var(--sm1);
   --meter-border-radius: var(--radius-md);
   --meter-track-color: var(--primary-100);
-  --meter-low-color: var(--danger-400);
-  --meter-medium-color: var(--warning-400);
-  --meter-high-color: var(--success-400);
+  --meter-low-color: var(--no-400);
+  --meter-medium-color: var(--maybe-400);
+  --meter-high-color: var(--yes-400);
 
   --progress-height: var(--sm1);
   --progress-color: var(--primary-500);
   --progress-track-color: var(--primary-100);
   --progress-border-radius: var(--radius-md);
 
-  /* select's chevron, applied as a mask painted with the text color;
+  /* select's chevron, applied as a mask using  text color;
      any url() works here, data URL or file */
   --select-icon-size: var(--sm3);
   --select-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");
@@ -125,9 +93,8 @@
   --dialog-backdrop-color: var(--base-950);
   --dialog-backdrop-opacity: var(--o-4);
 
-  /* details: same surface as dialog by default, on purpose but
-     independently overridable. Spacing is the gap between an open
-     summary and its content. */
+  /* details: same as dialog by default, on purpose, to be  independently
+     overridable. Spacing is the gap between an open summary and its content. */
   --details-padding: var(--sm1);
   --details-spacing: var(--xs3);
   --details-border-width: var(--border-sm);
@@ -241,7 +208,7 @@
 
   /* ins: background stays light in both light/dark modes */
   --ins-color: var(--base-950);
-  --ins-background-color: var(--success-200);
+  --ins-background-color: var(--yes-200);
 
   --marker-color: var(--highlight-500);
 
@@ -294,20 +261,14 @@
     var(--primary-600),
     var(--primary-500)
   );
-  --badge-success-color: light-dark(var(--success-500), var(--base-0));
-  --badge-success-background-color: light-dark(
-    var(--success-100),
-    var(--success-500)
-  );
-  --badge-danger-color: light-dark(var(--danger-500), var(--base-0));
-  --badge-danger-background-color: light-dark(
-    var(--danger-100),
-    var(--danger-500)
-  );
-  --badge-warning-color: light-dark(var(--warning-500), var(--base-950));
+  --badge-success-color: light-dark(var(--yes-500), var(--base-0));
+  --badge-success-background-color: light-dark(var(--yes-100), var(--yes-500));
+  --badge-danger-color: light-dark(var(--no-500), var(--base-0));
+  --badge-danger-background-color: light-dark(var(--no-100), var(--no-500));
+  --badge-warning-color: light-dark(var(--maybe-500), var(--base-950));
   --badge-warning-background-color: light-dark(
-    var(--warning-100),
-    var(--warning-500)
+    var(--maybe-100),
+    var(--maybe-500)
   );
 }
 
@@ -420,7 +381,7 @@
 :root {
   --field-spacing: var(--xs1);
   --field-hint-color: light-dark(var(--base-400), var(--base-500));
-  --field-error-color: light-dark(var(--danger-500), var(--danger-300));
+  --field-error-color: light-dark(var(--no-500), var(--no-300));
   /*Field's hint/error position. Use `static` to reflow under, use `absolute`
   (and leave enough space below) if you don't want any shift on errors */
   --field-message-position: static;
@@ -525,7 +486,7 @@
     var(--primary-600),
     var(--primary-400)
   );
-  --pricingCard-check-color: light-dark(var(--success-500), var(--success-400));
+  --pricingCard-check-color: light-dark(var(--yes-500), var(--yes-400));
 }
 
 /* Read Progress Bar */
diff --git a/src/styles/framework/theme.starter.css b/src/styles/framework/theme.starter.css
new file mode 100644
index 00000000..8fdac0eb
--- /dev/null
+++ b/src/styles/framework/theme.starter.css
@@ -0,0 +1,45 @@
+/* STARTER USER THEME */
+
+/*
+  A theme is a file of token overrides, plus optional style rules for what
+  tokens can't express. This file is where your theme starts: import it
+  from your own entry point after the default theme:
+
+    @import url(./framework/mcss.css);
+    @import url(./framework/theme.default.css);
+    @import url(./theme.starter.css);
+
+  MAKE SURE you put all your overrides inside `@layer theme.user`
+
+  Guidelines:
+
+  - Override values in `theme.default.tokens.css` for low level stuff
+    like colors, sizes, fonts, etc.
+  - For UI related stuff like button radius or component specific styles,
+    override values in `theme.default.ui.css`
+  - Add your own rules if a token can't do what you need (pseudo-elements,
+  nth-child,, text-decoration, etc.)
+  - Don't use !important. If you need to, you're doing something wrong.
+    Email me and I'll help you out.
+  - For a full swappable theme, look at `theme.wireframe.css` to see
+    how it's done.
+*/
+
+/* Pin the layer order before declaring into it: priority is set by
+   first declaration, so this file slots correctly even if it loads
+   before mcss.css. */
+@layer base, elements, global, components, theme.default, theme.user, external, helpers;
+
+@layer theme.user {
+  :root {
+    /* A new palette usually gets you 80% of the way:              */
+    /* --base-0: #fff;                                             */
+    /* --primary-500: rebeccapurple;                               */
+    /* Then reach for ui and component tokens as needed:           */
+    /* --heading-font: Georgia, serif;                             */
+    /* --card-border-radius: 0;                                    */
+    /* A theme may also add tokens the framework doesn't ship,     */
+    /* e.g. a second accent, and use them in its own style rules:  */
+    /* --secondary-500: teal;                                      */
+  }
+}
diff --git a/src/styles/framework/theme.wireframe.css b/src/styles/framework/theme.wireframe.css
index 33576838..f4dff00b 100644
--- a/src/styles/framework/theme.wireframe.css
+++ b/src/styles/framework/theme.wireframe.css
@@ -4,10 +4,24 @@
   A hand-drawn wireframe theme: grayscale palette, rounded type, wobbly
   borders, paper-cutout shadows, and a traced-twice pencil stroke on
   cards and buttons. Mostly token overrides; the style rules at the
-  bottom cover what tokens can't express. See theme.default.css for how
-  themes work and how to activate one.
+  bottom cover what tokens can't express.
+
+  A full theme is an entry that composes the default theme and overrides
+  on top. This file contains ONLY this theme's deviations; everything it
+  doesn't mention comes from theme.default.css, which the @import below
+  makes the browser load alongside this file. The rules here land in
+  `theme.user`, which wins over the default theme's `theme.default`
+  layer. Activate exactly one theme entry from your own entry point
+  (see theme.default.css).
 */
 
+/* Pin the layer order before anything else in this file: priority is
+   set by first declaration, so this theme slots correctly even if it
+   loads before mcss.css. */
+@layer base, elements, global, components, theme.default, theme.user, external, helpers;
+
+@import url(./theme.default.css);
+
 /* Registered so it computes on the element that declares it and then
    inherits as a plain integer: a card and its media resolve the SAME
    seed and can derive matching corners. Property registrations are
@@ -18,7 +32,7 @@
   initial-value: 1;
 }
 
-@layer theme {
+@layer theme.user {
   :root {
     /* COLORS: everything goes grayscale, including the primary scale */
 
@@ -72,7 +86,9 @@
        Comic Sans ships on macOS and Windows, Chalkboard SE on iOS,
        casual is the Android generic. */
 
-    --text: 'Comic Sans MS', 'Chalkboard SE', Chalkboard, 'Comic Neue', 'Segoe Print', 'Bradley Hand', casual, cursive;
+    --text:
+      "Comic Sans MS", "Chalkboard SE", Chalkboard, "Comic Neue", "Segoe Print",
+      "Bradley Hand", casual, cursive;
     --display: var(--text);
     --heading-font: var(--text);
     --heading-weight: var(--bold);
@@ -131,7 +147,10 @@
        against paper, not one gray against another. */
 
     --toggle-track-color-checked: light-dark(var(--base-800), var(--base-200));
-    --avatar-status-dot-color-online: light-dark(var(--base-800), var(--base-200));
+    --avatar-status-dot-color-online: light-dark(
+      var(--base-800),
+      var(--base-200)
+    );
 
     /* WAYFINDING STAYS CRISP: the focus ring is not part of the sketch,
        and --marker-color is already highlighter yellow. */
@@ -247,8 +266,7 @@
        Corner pattern mirrors --wobble-2 (short/long alternation). */
     .card,
     .card_media {
-      border-radius:
-        calc(9px + sin(var(--sketch-seed) * 9.1) * 2px)
+      border-radius: calc(9px + sin(var(--sketch-seed) * 9.1) * 2px)
         calc(105px + sin(var(--sketch-seed) * 4.7) * 18px)
         calc(7px + sin(var(--sketch-seed) * 3.1) * 2px)
         calc(120px + sin(var(--sketch-seed) * 5.5) * 18px) /
@@ -260,13 +278,10 @@
 
     /* Flush media bleeds to the card's top edge only */
     .card_media-flush {
-      border-radius:
-        calc(9px + sin(var(--sketch-seed) * 9.1) * 2px)
-        calc(105px + sin(var(--sketch-seed) * 4.7) * 18px)
-        0 0 /
+      border-radius: calc(9px + sin(var(--sketch-seed) * 9.1) * 2px)
+        calc(105px + sin(var(--sketch-seed) * 4.7) * 18px) 0 0 /
         calc(115px + sin(var(--sketch-seed) * 5.9) * 18px)
-        calc(8px + sin(var(--sketch-seed) * 7.7) * 2px)
-        0 0;
+        calc(8px + sin(var(--sketch-seed) * 7.7) * 2px) 0 0;
     }
 
     .card::after,
@@ -274,8 +289,7 @@
       rotate: calc(sin(var(--sketch-seed) * 7.3) * 0.6deg);
       translate: calc(sin(var(--sketch-seed) * 3.7) * 1.5px)
         calc(cos(var(--sketch-seed) * 5.3) * 1.5px);
-      border-radius:
-        calc(100px + sin(var(--sketch-seed) * 5.1) * 20px)
+      border-radius: calc(100px + sin(var(--sketch-seed) * 5.1) * 20px)
         calc(8px + sin(var(--sketch-seed) * 2.3) * 3px)
         calc(110px + sin(var(--sketch-seed) * 4.9) * 20px)
         calc(9px + sin(var(--sketch-seed) * 4.3) * 3px) /
diff --git a/src/styles/site/global.layout.css b/src/styles/site/global.layout.css
index 5ec80d3e..135c2caf 100644
--- a/src/styles/site/global.layout.css
+++ b/src/styles/site/global.layout.css
@@ -5,6 +5,12 @@
   unlayered on top.
 */
 
+/* The site header is sticky, so scrolling to an anchor needs an offset or the
+   target heading lands hidden underneath it. */
+html {
+  scroll-padding-block-start: calc(var(--header-height) + var(--sm1));
+}
+
 .layout-docs {
   /* Docs pages read a little wider than the 70ch default */
   --layout-content-width: 77ch;
diff --git a/src/styles/site/external.astro.css b/src/styles/site/patch.astro.css
similarity index 100%
rename from src/styles/site/external.astro.css
rename to src/styles/site/patch.astro.css
diff --git a/src/tools/build-css.mjs b/src/tools/build-css.mjs
index 937ac4f8..93f7c3cc 100644
--- a/src/tools/build-css.mjs
+++ b/src/tools/build-css.mjs
@@ -4,18 +4,21 @@
  * Outputs (all with @custom-media resolved and mixins expanded, so they work
  * with zero tooling; cascade layers are kept intact):
  *   dist/mcss.css                — single-file bundle of the framework core
- *                                  (declares the components/theme layer
- *                                  slots, imports neither)
+ *                                  WITH the default theme baked in, so it
+ *                                  stays a working drop-in on its own
+ *                                  (declares the components slot, imports
+ *                                  no component)
  *   dist/mcss.min.css            — minified core bundle
  *   dist/mcss.components.css     — single-file bundle of the component
  *                                  library (@layer components)
  *   dist/mcss.components.min.css — minified components bundle
  *   dist/css/<file>.css — every framework file processed individually,
- *                         wrapped in its cascade layer (theme.* files ship
- *                         their own @layer theme block and aren't re-wrapped)
- *   dist/css/mcss.css   — @import index over the per-file outputs; theme
- *                         imports are commented out (activating one is the
- *                         consumer's move)
+ *                         wrapped in its cascade layer (theme.* files
+ *                         self-layer and aren't re-wrapped)
+ *   dist/css/mcss.css   — @import index over the per-file outputs; the
+ *                         default theme import is active (the framework
+ *                         doesn't paint without it), other themes are
+ *                         commented out (swap which one is active)
  *
  * Run: npm run build:css
  */
@@ -65,7 +68,6 @@ function layerOf(file) {
   const prefix = file.split(".")[0];
   return (
     {
-      settings: "settings",
       base: "base",
       elements: "elements",
       global: "global",
@@ -76,8 +78,15 @@ function layerOf(file) {
   );
 }
 
+// The canonical layer statement is the one in mcss.css; derive it so dist
+// can never disagree with source. check-layers.mjs guards the other copies
+// (theme file pins, docs code blocks).
 const LAYER_STATEMENT =
-  "@layer settings, base, elements, global, components, theme, helpers;\n";
+  (await readFile(join(SRC, "mcss.css"), "utf8")).match(
+    /^@layer [^;{]+;/m,
+  )?.[0] + "\n";
+if (LAYER_STATEMENT.startsWith("undefined"))
+  throw new Error("No @layer statement found in mcss.css");
 
 // Rebuild dist/css from scratch so renamed or deleted source files can't
 // leave stale outputs behind.
@@ -85,11 +94,17 @@ await rm(join(OUT, "css"), { recursive: true, force: true });
 await mkdir(join(OUT, "css"), { recursive: true });
 
 // 1. Single-file bundles, core + component library (postcss-import inlines
-//    the layer() imports), each with a minified variant.
+//    the layer() imports), each with a minified variant. The core bundle
+//    bakes the default theme in so dist/mcss.css works as a one-file
+//    drop-in; source consumers activate the theme themselves.
+const coreEntry =
+  "@import url(./mcss.css);\n@import url(./theme.default.css);\n";
 const bundles = {};
 for (const name of ["mcss.css", "mcss.components.css"]) {
   const entry = join(SRC, name);
-  const bundled = await process(await readFile(entry, "utf8"), entry, true);
+  const source =
+    name === "mcss.css" ? coreEntry : await readFile(entry, "utf8");
+  const bundled = await process(source, join(SRC, `_entry-${name}`), true);
   await writeFile(join(OUT, name), BANNER + bundled);
 
   const { code: minified } = await esbuildTransform(bundled, {
@@ -102,21 +117,43 @@ for (const name of ["mcss.css", "mcss.components.css"]) {
 }
 
 // 2. Per-file outputs for copy-paste consumers.
-const buildTimeOnly = new Set(["settings.media-queries.css", "settings.mixins.css"]);
+const buildTimeOnly = new Set([
+  "settings.media-queries.css",
+  "settings.mixins.css",
+]);
 const settingsPrelude = [
   await readFile(join(SRC, "settings.media-queries.css"), "utf8"),
   await readFile(join(SRC, "settings.mixins.css"), "utf8"),
 ].join("\n");
 
+// The index reads best in cascade-layer order (matching the layer
+// statement), alphabetical within each layer. Theme files split in two:
+// the default theme and its parts (theme.default slot), then the starter
+// and full themes (theme.user slot). theme.default.css sorts before its parts
+// alphabetically, keeping the active import first.
+const LAYER_RANK = {
+  base: 0,
+  elements: 1,
+  global: 2,
+  components: 3,
+  helpers: 6,
+};
+const rankOf = (f) =>
+  layerOf(f) === "theme"
+    ? f.startsWith("theme.default")
+      ? 4
+      : 5
+    : LAYER_RANK[layerOf(f)];
+
 const files = (await readdir(SRC))
   .filter(
     (f) =>
       f.endsWith(".css") &&
       f !== "mcss.css" &&
       f !== "mcss.components.css" &&
-      !buildTimeOnly.has(f)
+      !buildTimeOnly.has(f),
   )
-  .sort();
+  .sort((a, b) => rankOf(a) - rankOf(b) || a.localeCompare(b));
 
 const indexImports = [];
 for (const file of files) {
@@ -124,26 +161,43 @@ for (const file of files) {
   const css = await readFile(join(SRC, file), "utf8");
   // Prepend the build-time settings so @custom-media/@mixin resolve, then
   // wrap the file's own rules in its layer. preset-env removes the
-  // @custom-media definitions from the output. Theme files already carry
-  // their own @layer theme block, so they're not re-wrapped, and the index
-  // leaves them commented: activating a theme is the consumer's move.
-  const selfLayered = layer === "theme";
-  const wrapped = selfLayered
-    ? `${settingsPrelude}\n${css}`
-    : `${settingsPrelude}\n@layer ${layer} {\n${css}\n}`;
+  // @custom-media definitions from the output. Standalone theme files
+  // (starter, full themes) self-layer, so they're not re-wrapped; the default
+  // theme's parts are plain CSS layered by their entry in source, so the
+  // dist copies get wrapped here so a lone <link> still slots correctly.
+  // In the index the default theme import is active (the framework
+  // doesn't paint without a theme); other theme entries are commented.
+  // Full themes genuinely replace the default import (they compose the default
+  // themselves); the starter doesn't: it's imported after the default,
+  // which stays active.
+  const importsOnly = file === "theme.default.css";
+  const isDefaultPart = file.startsWith("theme.default.") && !importsOnly;
+  const selfLayered = layer === "theme" && !isDefaultPart;
+  const wrapLayer = isDefaultPart ? "theme.default" : layer;
+  const wrapped = importsOnly
+    ? css
+    : selfLayered
+      ? `${settingsPrelude}\n${css}`
+      : `${settingsPrelude}\n@layer ${wrapLayer} {\n${css}\n}`;
   const processed = await process(wrapped, join(SRC, file));
   await writeFile(join(OUT, "css", file), BANNER + processed.trim() + "\n");
   indexImports.push(
-    selfLayered
-      ? `/* @import url(./${file}); */ /* theme: activate at most one */`
-      : `@import url(./${file}) layer(${layer});`
+    importsOnly
+      ? `@import url(./${file}); /* the default theme */`
+      : isDefaultPart
+        ? `/* @import url(./${file}); */ /* imported by theme.default.css */`
+        : selfLayered
+          ? file === "theme.starter.css"
+            ? `/* @import url(./${file}); */ /* your theme's starting point: keep the default active */`
+            : `/* @import url(./${file}); */ /* full theme: use instead of the default (it imports it itself) */`
+          : `@import url(./${file}) layer(${layer});`,
   );
 }
 
 // 3. @import index (usable in the browser with no build step).
 await writeFile(
   join(OUT, "css", "mcss.css"),
-  BANNER + LAYER_STATEMENT + indexImports.join("\n") + "\n"
+  BANNER + LAYER_STATEMENT + indexImports.join("\n") + "\n",
 );
 
 console.log(
@@ -151,7 +205,7 @@ console.log(
     .map(
       ([name, { bundled, minified, minName }]) =>
         `Built dist/${name} (${(bundled.length / 1024).toFixed(1)} kB), ` +
-        `dist/${minName} (${(minified.length / 1024).toFixed(1)} kB)`
+        `dist/${minName} (${(minified.length / 1024).toFixed(1)} kB)`,
     )
-    .join("\n") + `\n${files.length} files in dist/css/`
+    .join("\n") + `\n${files.length} files in dist/css/`,
 );
diff --git a/src/tools/check-layers.mjs b/src/tools/check-layers.mjs
new file mode 100644
index 00000000..2450a2b0
--- /dev/null
+++ b/src/tools/check-layers.mjs
@@ -0,0 +1,94 @@
+/**
+ * Verifies that every copy of the cascade-layer statement agrees with the
+ * canonical one in src/styles/framework/mcss.css.
+ *
+ * The statement is deliberately duplicated: the self-layered theme files
+ * pin the order so they work when loaded alone, dist must work with zero
+ * tooling, and the docs quote the code. Each copy has to stand on its own,
+ * so the invariant "they all agree" is enforced here instead of removed
+ * with an abstraction.
+ *
+ * Run:  npm run check:layers            # verify, exit 1 on drift
+ *       npm run check:layers -- --fix   # rewrite stale copies in place
+ *
+ * Extra file paths can be passed as arguments to check files outside the
+ * repo (e.g. a local agent-instructions copy of the rules block).
+ */
+import { readFile, writeFile } from "node:fs/promises";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const ROOT = resolve(dirname(fileURLToPath(import.meta.url)), "../..");
+const CANONICAL_FILE = "src/styles/framework/mcss.css";
+
+// Every file that carries a copy of the statement (or of its bare layer
+// list, e.g. inline code in the docs). Dist files are included on purpose:
+// they only agree after `npm run build:css`, so a stale dist fails here.
+const CARRIERS = [
+  "src/styles/framework/theme.default.css",
+  "src/styles/framework/theme.starter.css",
+  "src/styles/framework/theme.wireframe.css",
+  "src/pages/templates/marketing.astro",
+  "src/content/docs/installation.mdx",
+  "src/content/docs/ai.mdx",
+  "dist/mcss.css",
+  "dist/css/mcss.css",
+  "dist/css/theme.default.css",
+  "dist/css/theme.starter.css",
+  "dist/css/theme.wireframe.css",
+];
+
+const args = process.argv.slice(2);
+const fix = args.includes("--fix");
+const extras = args.filter((a) => a !== "--fix");
+
+const canonicalSource = await readFile(join(ROOT, CANONICAL_FILE), "utf8");
+const statement = canonicalSource.match(/^@layer ([^;{]+);/m);
+if (!statement) {
+  console.error(`No @layer statement found in ${CANONICAL_FILE}`);
+  process.exit(1);
+}
+const LIST = statement[1].trim().replace(/\s+/g, " ");
+
+// A "run" is any occurrence of the layer list: it starts at "base," and
+// ends at a terminator (";" in CSS, a backtick in docs prose, or the end
+// of the line). Every run in a carrier must equal the canonical list.
+const RUN = /base,\s*elements[^;`\n]*/g;
+const normalize = (run) => run.trim().replace(/\s+/g, " ");
+
+let failed = false;
+for (const file of [...CARRIERS, ...extras]) {
+  const path = file.startsWith("/") ? file : join(ROOT, file);
+  let content;
+  try {
+    content = await readFile(path, "utf8");
+  } catch {
+    console.error(`✗ ${file}: cannot read`);
+    failed = true;
+    continue;
+  }
+  const runs = content.match(RUN) ?? [];
+  if (runs.length === 0) {
+    console.error(`✗ ${file}: no layer list found`);
+    failed = true;
+    continue;
+  }
+  const stale = runs.filter((run) => normalize(run) !== LIST);
+  if (stale.length === 0) {
+    console.log(`✓ ${file}`);
+  } else if (fix) {
+    await writeFile(path, content.replace(RUN, LIST));
+    console.log(`✎ ${file}: rewrote ${stale.length} stale of ${runs.length}`);
+  } else {
+    failed = true;
+    console.error(`✗ ${file}:`);
+    console.error(`    expected  ${LIST}`);
+    for (const run of stale) console.error(`    found     ${normalize(run)}`);
+  }
+}
+
+if (failed) {
+  console.error(`\nLayer statements disagree with ${CANONICAL_FILE}.`);
+  console.error("Run `npm run check:layers -- --fix` to rewrite them.");
+  process.exit(1);
+}