material-plus-ui 0.0.1 → 1.1.0

package/dist/tailwind.css

@@ -12,20 +12,31 @@
  * is this file plus the compiled utilities, built by `scripts/build-styles.mjs`
  * from `src/standalone.css`. The tokens below are the same in both.
  *
- * ## What is deliberately not here
+ * ## The vocabulary is Material Design 3's, not Material UI's
+ *
+ * This library implements the Material Design specification rather than wrapping
+ * an implementation of it, so the token names here are the ones the spec uses —
+ * `primary`, `on-surface-variant`, `outline`, `corner-extra-small`,
+ * `body-large`. They are not `main`/`light`/`dark`/`contrastText`, which is
+ * Material UI's own palette model and a different (earlier) colour system.
+ *
+ * ## Only what a component reads
  *
- * **Colour, typography and dark mode.** Material UI owns all three. A component
- * in this library takes its palette from the surrounding `ThemeProvider`, the
- * same as the `@mui/material` component beside it, so a token family here would
- * be a second theme that could disagree with the first. Anything a component
- * needs from the theme it reads through MUI, not from a custom property.
+ * A token nobody uses is a promise to keep supporting a name, so the roles below
+ * are exactly the ones the components actually resolve, and nothing else. MD3
+ * defines around fifty colour roles; an outlined text field reads five of them,
+ * and the components in this library between them read twenty-nine. The rest
+ * are absent on purpose and get added as components need them.
  *
- * **A reset.** MUI's `CssBaseline` is one, and every application using this
- * library already has it. See `src/standalone.css`.
+ * This is also why the library does not try to reproduce MD3 completely. It has
+ * to *coexist* with whatever Material implementation a page already runs, not
+ * replace it — so the surface it claims stays as small as the components make
+ * necessary.
+ *
+ * ## What is deliberately not here
  *
- * What Tailwind is for here is layout and the handful of structural utilities a
- * component needs that `sx` would express less clearly — so the tokens below
- * stay to that job, and the file is short on purpose.
+ * **A reset.** Material Plus adds no page-level styling of any kind. See
+ * `src/standalone.css` for why Tailwind's Preflight is left out too.
  */
 
 /*
@@ -48,16 +59,1856 @@
 @source '.';
 
 /* ---------------------------------------------------------------------------
- * Tokens
+ * System tokens
+ *
+ * Everything in this block is layered. A cascade layer loses to every unlayered
+ * rule, so a consumer's plain `:root { --mp-source-color: … }` wins over these
+ * defaults *regardless of source order* — they do not have to reason about
+ * whether their override sits before or after the `@import`.
+ *
+ * Note that the *public* names are `--mp-sys-*`, not `--md-sys-*`. The spec's
+ * names are what a role is *called*, but the `--md-sys-*` namespace belongs to
+ * the page: a project running Material Web Components already defines those, and
+ * writing to them would overwrite a theme this library has no business touching.
+ * So each role *reads* `--md-sys-color-*` and falls back to its own derivation,
+ * which gives three levels of control without a single conflict:
+ *
+ *   --mp-sys-color-primary set by the consumer   →  wins outright
+ *   --md-sys-color-primary already on the page   →  picked up, zero config
+ *   neither                                      →  derived from the source colour
+ *
+ * ## Why the derived colours are declared on `*` and not on `:root`
+ *
+ * A custom property's value is not *parsed* until it is used, but its `var()`
+ * references are substituted at the element the property is **declared on**, and
+ * descendants inherit the already-substituted result. A role declared once on
+ * `:root` therefore freezes there: setting `--mp-source-color` further down the
+ * tree — on a section, on a wrapper, from an inline style at runtime — could not
+ * reach back and change it, and neither could a `.dark` on `<body>` rather than
+ * on `<html>`.
+ *
+ * Declaring them on every element instead makes each one re-substitute against
+ * whatever is in scope where it sits, which is what actually makes scoped and
+ * runtime theming work. This is the same technique Tailwind uses for its own
+ * composed variables.
+ *
+ * Only the *derived* colours need it. Everything else here is a literal value
+ * with no `var()` to freeze, so plain inheritance from `:root` is enough.
+ *
+ * The computed results are `--_mp-*`: private, read by the components, and not
+ * a name to set. Material Web marks its own internal tokens the same way. The
+ * indirection is load-bearing — it is what keeps a consumer's
+ * `--mp-sys-color-primary` on a wrapper from being clobbered by the `*` rule on
+ * the wrapper's own children.
+ * ------------------------------------------------------------------------- */
+
+@layer theme {
+  :root {
+    /*
+     * The one value most consumers ever set. MD3 calls it the source colour: a
+     * single seed that the tonal palettes — and therefore every role below —
+     * are generated from.
+     *
+     * ## Why this blue rather than MD3's baseline purple
+     *
+     * The specification's own baseline source is `#6750a4`, and a library that
+     * defaults to it is making a louder statement than it looks: purple is the
+     * one hue nobody arrives at by accident, so an application that has not
+     * chosen a colour yet ends up looking like it chose that one.
+     *
+     * A deep azure is the quieter default. It is also picked for its *chroma*
+     * rather than only its hue — 0.118, close to the baseline's 0.130 — because
+     * every role derives its saturation from here. A more vivid blue (Google's
+     * `#0b57d0` sits at 0.199) pulls the whole scheme brighter than any
+     * reference Material palette, which reads as a brand rather than as
+     * Material.
+     *
+     * The one thing a source colour must not be is near-grey. At a chroma below
+     * roughly 0.05 the derived `primary` stops being distinguishable from
+     * `outline`, and a focus ring then reads as no change at all.
+     */
+    --mp-source-color: #00639b;
+
+    /*
+     * Tone stops.
+     *
+     * MD3's light and dark schemes are not two palettes. They are the *same*
+     * tonal palettes read at different tones — light `primary` is tone 40, dark
+     * `primary` is tone 80, light `outline` is neutral-variant 50, dark is 60.
+     * Keeping them in variables is what lets the dark scheme below be a
+     * reassignment rather than a second copy of every colour, and it is why
+     * overriding `--mp-source-color` moves both schemes at once.
+     *
+     * These are private. The supported way to disagree with a colour is to set
+     * the role — `--mp-sys-color-outline` — not to retune the ramp. They are also
+     * specific to *this* approximation of MD3's palette generation, and would go
+     * away if that were ever replaced with real HCT.
+     *
+     * ## Where the numbers come from
+     *
+     * Read off MD3's own baseline ref palette, converted to OKLCh, rather than
+     * chosen by eye: light is (primary40, neutral10, neutral-variant30,
+     * neutral-variant50, error40) and dark is (primary80, neutral90,
+     * neutral-variant80, neutral-variant60, error80).
+     *
+     * The check that fixed these numbers is therefore run against `#6750a4`, not
+     * against the default above: fed the baseline source, the derivation lands on
+     * the baseline scheme — `primary` and `error` on its exact hex in both
+     * schemes, the near-grey roles within a ΔE of 0.008. What the default source
+     * changes is the hue and chroma the ramp is applied *to*, never the ramp.
+     *
+     * The lightnesses are OKLCh L, not MD3 tone numbers — tone is CIE L*, which
+     * OKLCh's L does not equal. Chroma is absolute for the near-grey roles, which
+     * are near-grey whatever the source is, and a multiplier of the source's own
+     * chroma for `primary`, so a deliberately muted brand colour stays muted.
+     *
+     * One known and accepted divergence: every derived role keeps the source
+     * colour's hue, while MD3's neutral palettes sit 10–20° off it. At a chroma
+     * of 0.01–0.02 that is a difference of a couple of thousandths in a/b — below
+     * anything visible, and chasing it would be fitting to noise, since hue is
+     * barely determined at all that close to grey.
+     *
+     * ## The accent tones are shared, the chroma is not
+     *
+     * `primary`, `secondary` and `tertiary` are one palette generation read three
+     * times: MD3 takes all three at the *same* tones and differs only in how much
+     * chroma the palette carries and, for `tertiary`, in its hue. So there is one
+     * `--_mp-tone-accent` rather than three, and a `--_mp-chroma-*` per family.
+     */
+    --_mp-tone-accent: 0.496;
+    --_mp-tone-on-accent: 1;
+    --_mp-tone-accent-container: 0.918;
+    --_mp-tone-on-accent-container: 0.242;
+
+    --_mp-chroma-primary: 1;
+    --_mp-chroma-secondary: 0.274;
+    --_mp-chroma-tertiary: 0.464;
+    /* MD3 puts `tertiary` 60° round the wheel in HCT, which lands at about 65°
+       in OKLCh near the default source. Measured rather than converted, because
+       the two spaces do not agree on where a hue is by a constant. */
+    --_mp-hue-tertiary: 64.7;
+
+    --_mp-tone-on-surface: 0.227;
+    --_mp-chroma-on-surface: 0.01;
+    --_mp-tone-on-surface-variant: 0.398;
+    --_mp-chroma-on-surface-variant: 0.0174;
+    --_mp-tone-outline: 0.567;
+    --_mp-chroma-outline: 0.0163;
+    --_mp-tone-outline-variant: 0.829;
+    --_mp-chroma-outline-variant: 0.0178;
+
+    /* The page's own surface — neutral 98 in the light scheme and neutral 6 in
+       the dark one. Read by exactly one thing, `MPOverlay`'s `solid` tone,
+       whose job is to put the page's own background over the page. */
+    --_mp-tone-surface: 0.984;
+    --_mp-chroma-surface: 0.0128;
+
+    /* The four surface containers, which are one neutral palette read at four
+       tones. MD3 has five; a menu (`surface-container`), an elevated button
+       (`-low`), a dialog (`-high`) and a switch's track (`-highest`) are the
+       four anything here actually asks for. */
+    --_mp-tone-surface-container-low: 0.967;
+    --_mp-chroma-surface-container-low: 0.0118;
+    --_mp-tone-surface-container: 0.954;
+    --_mp-chroma-surface-container: 0.0147;
+    --_mp-tone-surface-container-high: 0.933;
+    --_mp-chroma-surface-container-high: 0.0148;
+    --_mp-tone-surface-container-highest: 0.914;
+    --_mp-chroma-surface-container-highest: 0.0137;
+
+    /* `inverse-primary`, which is the accent palette read at the *other*
+       scheme's tone — light takes the dark scheme's stop and vice versa. That
+       is not an approximation of MD3's role, it is the definition of it, which
+       is why these two numbers are the accent stops above and below swapped.
+       One thing reads it: a snackbar's action label, which sits on the inverse
+       surface and would be unreadable in the accent proper. */
+    --_mp-tone-inverse-accent: 0.835;
+    --_mp-chroma-inverse-primary: 0.725;
+
+    /* The inverted pair, which is the same neutral palette read at the *other*
+       end: neutral 20 under neutral 95 in the light scheme, and the two swapped
+       in the dark one. MD3 gives it to exactly one thing, and so does this
+       library — a plain tooltip, whose whole job is to be legible over content
+       it was not designed against. A surface that inverts with the scheme is
+       readable on either. */
+    --_mp-tone-inverse-surface: 0.313;
+    --_mp-chroma-inverse-surface: 0.0118;
+    --_mp-tone-inverse-on-surface: 0.96;
+    --_mp-chroma-inverse-on-surface: 0.0118;
+
+    /* `error` carries its own hue as well, because it is not derived from the
+       source colour at all — see the role below. */
+    --_mp-tone-error: 0.501;
+    --_mp-chroma-error: 0.1783;
+    --_mp-hue-error: 28.7;
+
+    /*
+     * The chroma a whole palette carries, as opposed to the chroma one role of it
+     * came out at. Deliberately *not* reassigned for the dark scheme below, and
+     * the only stops here that are not.
+     *
+     * MD3 holds a palette's chroma constant across its tones and lets the sRGB
+     * boundary take back whatever will not fit — which is why `primary` at tone 40
+     * is vivid and `primary-container` at tone 90 is a pale wash, from one number.
+     * The container and `on-` roles are written the same way: the palette's chroma
+     * goes in unmodified and the browser's own gamut mapping does the clipping, at
+     * constant lightness and hue, exactly as HCT's does.
+     *
+     * Fed the baseline source, that lands the twelve container and `on-` roles
+     * within 0.01 of MD3's own — bar the two `error` containers, which come out up
+     * to 0.025 more chromatic because sRGB's boundary is a blunter clip than HCT's
+     * and the error palette is the only one saturated enough to notice.
+     *
+     * `error` is an absolute chroma rather than a multiplier, because it is not
+     * derived from the source colour at all.
+     */
+    --_mp-palette-primary: 1;
+    --_mp-palette-secondary: 0.274;
+    --_mp-palette-tertiary: 0.464;
+    --_mp-palette-error: 0.1783;
+  }
+
+  /* The dark scheme, by tone reassignment. Two ways in: the page's own signal
+     (`prefers-color-scheme`), and an explicit attribute or class for a project
+     that switches schemes itself. `.dark` is included because it is what
+     Tailwind's own `dark:` variant keys on by default.
+     Declared twice rather than pulled into a shared rule: a media query and a
+     selector cannot be combined without either nesting the selector list twice
+     over or inventing a third indirection for values that are read off a table
+     anyway. */
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-mp-scheme='light']) {
+      --_mp-tone-accent: 0.835;
+      --_mp-tone-on-accent: 0.325;
+      --_mp-tone-accent-container: 0.41;
+      --_mp-tone-on-accent-container: 0.918;
+      --_mp-chroma-primary: 0.725;
+      --_mp-chroma-secondary: 0.287;
+      --_mp-chroma-tertiary: 0.51;
+      --_mp-hue-tertiary: 65.7;
+      --_mp-tone-on-surface: 0.914;
+      --_mp-chroma-on-surface: 0.0137;
+      --_mp-tone-on-surface-variant: 0.829;
+      --_mp-chroma-on-surface-variant: 0.0178;
+      --_mp-tone-outline: 0.657;
+      --_mp-chroma-outline: 0.0153;
+      --_mp-tone-outline-variant: 0.398;
+      --_mp-chroma-outline-variant: 0.0174;
+      --_mp-tone-surface: 0.187;
+      --_mp-chroma-surface: 0.0124;
+      --_mp-tone-surface-container-low: 0.227;
+      --_mp-chroma-surface-container-low: 0.01;
+      --_mp-tone-surface-container: 0.245;
+      --_mp-chroma-surface-container: 0.0134;
+      --_mp-tone-surface-container-high: 0.286;
+      --_mp-chroma-surface-container-high: 0.0129;
+      --_mp-tone-surface-container-highest: 0.33;
+      --_mp-chroma-surface-container-highest: 0.0125;
+      --_mp-tone-inverse-accent: 0.496;
+      --_mp-chroma-inverse-primary: 1;
+      --_mp-tone-inverse-surface: 0.914;
+      --_mp-chroma-inverse-surface: 0.0137;
+      --_mp-tone-inverse-on-surface: 0.313;
+      --_mp-chroma-inverse-on-surface: 0.0118;
+      --_mp-tone-error: 0.834;
+      --_mp-chroma-error: 0.0677;
+      --_mp-hue-error: 22;
+    }
+  }
+
+  [data-mp-scheme='dark'],
+  .dark {
+    --_mp-tone-accent: 0.835;
+    --_mp-tone-on-accent: 0.325;
+    --_mp-tone-accent-container: 0.41;
+    --_mp-tone-on-accent-container: 0.918;
+    --_mp-chroma-primary: 0.725;
+    --_mp-chroma-secondary: 0.287;
+    --_mp-chroma-tertiary: 0.51;
+    --_mp-hue-tertiary: 65.7;
+    --_mp-tone-on-surface: 0.914;
+    --_mp-chroma-on-surface: 0.0137;
+    --_mp-tone-on-surface-variant: 0.829;
+    --_mp-chroma-on-surface-variant: 0.0178;
+    --_mp-tone-outline: 0.657;
+    --_mp-chroma-outline: 0.0153;
+    --_mp-tone-outline-variant: 0.398;
+    --_mp-chroma-outline-variant: 0.0174;
+    --_mp-tone-surface: 0.187;
+    --_mp-chroma-surface: 0.0124;
+    --_mp-tone-surface-container-low: 0.227;
+    --_mp-chroma-surface-container-low: 0.01;
+    --_mp-tone-surface-container: 0.245;
+    --_mp-chroma-surface-container: 0.0134;
+    --_mp-tone-surface-container-high: 0.286;
+    --_mp-chroma-surface-container-high: 0.0129;
+    --_mp-tone-surface-container-highest: 0.33;
+    --_mp-chroma-surface-container-highest: 0.0125;
+    --_mp-tone-inverse-accent: 0.496;
+    --_mp-chroma-inverse-primary: 1;
+    --_mp-tone-inverse-surface: 0.914;
+    --_mp-chroma-inverse-surface: 0.0137;
+    --_mp-tone-inverse-on-surface: 0.313;
+    --_mp-chroma-inverse-on-surface: 0.0118;
+    --_mp-tone-error: 0.834;
+    --_mp-chroma-error: 0.0677;
+    --_mp-hue-error: 22;
+  }
+
+  /*
+   * Colour roles.
+   *
+   * Twenty-five, and every one of them is resolved by a component in this
+   * library. Checked against the spec's own component token maps rather than
+   * assumed — an outlined text field reads five, a filled button four, a switch
+   * six, a plain tooltip two nothing else touches.
+   *
+   * The three source-derived families are written out rather than generated. CSS
+   * has no way to build a custom property's *name* from another one, so a family
+   * is four declarations wherever it appears; what is shared between them lives
+   * in the tone stops above, which is the part that would otherwise drift.
+   *
+   * `oklch(from … h)` keeps the source colour's hue and replaces lightness and
+   * chroma. See the note above for why this is on `*` rather than `:root`.
+   */
+  *,
+  ::before,
+  ::after,
+  ::backdrop {
+    --_mp-color-primary: var(
+      --mp-sys-color-primary,
+      var(
+        --md-sys-color-primary,
+        oklch(
+          from var(--mp-source-color) var(--_mp-tone-accent) calc(c * var(--_mp-chroma-primary)) h
+        )
+      )
+    );
+    --_mp-color-on-primary: var(
+      --mp-sys-color-on-primary,
+      var(
+        --md-sys-color-on-primary,
+        oklch(
+          from var(--mp-source-color) var(--_mp-tone-on-accent) calc(c * var(--_mp-palette-primary))
+            h
+        )
+      )
+    );
+    --_mp-color-primary-container: var(
+      --mp-sys-color-primary-container,
+      var(
+        --md-sys-color-primary-container,
+        oklch(
+          from var(--mp-source-color) var(--_mp-tone-accent-container)
+            calc(c * var(--_mp-palette-primary)) h
+        )
+      )
+    );
+    --_mp-color-on-primary-container: var(
+      --mp-sys-color-on-primary-container,
+      var(
+        --md-sys-color-on-primary-container,
+        oklch(
+          from var(--mp-source-color) var(--_mp-tone-on-accent-container)
+            calc(c * var(--_mp-palette-primary)) h
+        )
+      )
+    );
+
+    --_mp-color-secondary: var(
+      --mp-sys-color-secondary,
+      var(
+        --md-sys-color-secondary,
+        oklch(
+          from var(--mp-source-color) var(--_mp-tone-accent) calc(c * var(--_mp-chroma-secondary)) h
+        )
+      )
+    );
+    --_mp-color-on-secondary: var(
+      --mp-sys-color-on-secondary,
+      var(
+        --md-sys-color-on-secondary,
+        oklch(
+          from var(--mp-source-color) var(--_mp-tone-on-accent)
+            calc(c * var(--_mp-palette-secondary)) h
+        )
+      )
+    );
+    --_mp-color-secondary-container: var(
+      --mp-sys-color-secondary-container,
+      var(
+        --md-sys-color-secondary-container,
+        oklch(
+          from var(--mp-source-color) var(--_mp-tone-accent-container)
+            calc(c * var(--_mp-palette-secondary)) h
+        )
+      )
+    );
+    --_mp-color-on-secondary-container: var(
+      --mp-sys-color-on-secondary-container,
+      var(
+        --md-sys-color-on-secondary-container,
+        oklch(
+          from var(--mp-source-color) var(--_mp-tone-on-accent-container)
+            calc(c * var(--_mp-palette-secondary)) h
+        )
+      )
+    );
+
+    /* The one family that moves off the source colour's hue. */
+    --_mp-color-tertiary: var(
+      --mp-sys-color-tertiary,
+      var(
+        --md-sys-color-tertiary,
+        oklch(
+          from var(--mp-source-color) var(--_mp-tone-accent) calc(c * var(--_mp-chroma-tertiary))
+            calc(h + var(--_mp-hue-tertiary))
+        )
+      )
+    );
+    --_mp-color-on-tertiary: var(
+      --mp-sys-color-on-tertiary,
+      var(
+        --md-sys-color-on-tertiary,
+        oklch(
+          from var(--mp-source-color) var(--_mp-tone-on-accent)
+            calc(c * var(--_mp-palette-tertiary)) calc(h + var(--_mp-hue-tertiary))
+        )
+      )
+    );
+    --_mp-color-tertiary-container: var(
+      --mp-sys-color-tertiary-container,
+      var(
+        --md-sys-color-tertiary-container,
+        oklch(
+          from var(--mp-source-color) var(--_mp-tone-accent-container)
+            calc(c * var(--_mp-palette-tertiary)) calc(h + var(--_mp-hue-tertiary))
+        )
+      )
+    );
+    --_mp-color-on-tertiary-container: var(
+      --mp-sys-color-on-tertiary-container,
+      var(
+        --md-sys-color-on-tertiary-container,
+        oklch(
+          from var(--mp-source-color) var(--_mp-tone-on-accent-container)
+            calc(c * var(--_mp-palette-tertiary)) calc(h + var(--_mp-hue-tertiary))
+        )
+      )
+    );
+
+    /* The page's own surface. Only `MPOverlay`'s `solid` tone reads it — a sheet
+       that hides the page by being the page. */
+    --_mp-color-surface: var(
+      --mp-sys-color-surface,
+      var(
+        --md-sys-color-surface,
+        oklch(from var(--mp-source-color) var(--_mp-tone-surface) var(--_mp-chroma-surface) h)
+      )
+    );
+
+    --_mp-color-surface-container-low: var(
+      --mp-sys-color-surface-container-low,
+      var(
+        --md-sys-color-surface-container-low,
+        oklch(
+          from var(--mp-source-color) var(--_mp-tone-surface-container-low)
+            var(--_mp-chroma-surface-container-low) h
+        )
+      )
+    );
+    --_mp-color-surface-container: var(
+      --mp-sys-color-surface-container,
+      var(
+        --md-sys-color-surface-container,
+        oklch(
+          from var(--mp-source-color) var(--_mp-tone-surface-container)
+            var(--_mp-chroma-surface-container) h
+        )
+      )
+    );
+    /* One step above `surface-container`, and the tone MD3 puts a dialog on: a
+       sheet that has taken the page has to sit above the menus that did not. */
+    --_mp-color-surface-container-high: var(
+      --mp-sys-color-surface-container-high,
+      var(
+        --md-sys-color-surface-container-high,
+        oklch(
+          from var(--mp-source-color) var(--_mp-tone-surface-container-high)
+            var(--_mp-chroma-surface-container-high) h
+        )
+      )
+    );
+    --_mp-color-surface-container-highest: var(
+      --mp-sys-color-surface-container-highest,
+      var(
+        --md-sys-color-surface-container-highest,
+        oklch(
+          from var(--mp-source-color) var(--_mp-tone-surface-container-highest)
+            var(--_mp-chroma-surface-container-highest) h
+        )
+      )
+    );
+
+    /* The two inverted roles, read by a plain tooltip and by nothing else. */
+    --_mp-color-inverse-surface: var(
+      --mp-sys-color-inverse-surface,
+      var(
+        --md-sys-color-inverse-surface,
+        oklch(
+          from var(--mp-source-color) var(--_mp-tone-inverse-surface)
+            var(--_mp-chroma-inverse-surface) h
+        )
+      )
+    );
+    --_mp-color-inverse-on-surface: var(
+      --mp-sys-color-inverse-on-surface,
+      var(
+        --md-sys-color-inverse-on-surface,
+        oklch(
+          from var(--mp-source-color) var(--_mp-tone-inverse-on-surface)
+            var(--_mp-chroma-inverse-on-surface) h
+        )
+      )
+    );
+    /* The accent read at the other scheme's tone, for the one label that sits on
+       the inverse surface: a snackbar's action. `primary` proper is derived to
+       contrast with the *page*, so on a plate that inverts the page it is the
+       one colour guaranteed not to read. */
+    --_mp-color-inverse-primary: var(
+      --mp-sys-color-inverse-primary,
+      var(
+        --md-sys-color-inverse-primary,
+        oklch(
+          from var(--mp-source-color) var(--_mp-tone-inverse-accent)
+            calc(c * var(--_mp-chroma-inverse-primary)) h
+        )
+      )
+    );
+
+    --_mp-color-on-surface: var(
+      --mp-sys-color-on-surface,
+      var(
+        --md-sys-color-on-surface,
+        oklch(from var(--mp-source-color) var(--_mp-tone-on-surface) var(--_mp-chroma-on-surface) h)
+      )
+    );
+    --_mp-color-on-surface-variant: var(
+      --mp-sys-color-on-surface-variant,
+      var(
+        --md-sys-color-on-surface-variant,
+        oklch(
+          from var(--mp-source-color) var(--_mp-tone-on-surface-variant)
+            var(--_mp-chroma-on-surface-variant) h
+        )
+      )
+    );
+    --_mp-color-outline: var(
+      --mp-sys-color-outline,
+      var(
+        --md-sys-color-outline,
+        oklch(from var(--mp-source-color) var(--_mp-tone-outline) var(--_mp-chroma-outline) h)
+      )
+    );
+    /* The quieter of the two outlines: a divider, or a line that is not the edge
+       of a control. A slider's inactive track and a dropzone's dashed rectangle
+       are both this rather than `outline`. */
+    --_mp-color-outline-variant: var(
+      --mp-sys-color-outline-variant,
+      var(
+        --md-sys-color-outline-variant,
+        oklch(
+          from var(--mp-source-color) var(--_mp-tone-outline-variant)
+            var(--_mp-chroma-outline-variant) h
+        )
+      )
+    );
+
+    /*
+     * The scrim, and the one colour in the sheet that is the same in both
+     * schemes.
+     *
+     * MD3 puts it at neutral tone 0 — black — and it stays black in the dark
+     * scheme, because a scrim is not a surface that has to be legible against
+     * the page: it is the absence of the page. A scrim that lightened with the
+     * scheme would fail to dim anything on the theme that needs dimming most.
+     * The alpha is the component's, not the token's: MD3 draws it at 32%.
+     */
+    --_mp-color-scrim: var(--mp-sys-color-scrim, var(--md-sys-color-scrim, #000000));
+
+    /* Not derived from the source colour. MD3's error palette is a fixed red
+       regardless of the seed — an error that shifted hue with the brand would
+       stop reading as an error. It still tracks the scheme, so it belongs here
+       rather than with the literals below. */
+    --_mp-color-error: var(
+      --mp-sys-color-error,
+      var(
+        --md-sys-color-error,
+        oklch(var(--_mp-tone-error) var(--_mp-chroma-error) var(--_mp-hue-error))
+      )
+    );
+    --_mp-color-on-error: var(
+      --mp-sys-color-on-error,
+      var(
+        --md-sys-color-on-error,
+        oklch(var(--_mp-tone-on-accent) var(--_mp-palette-error) var(--_mp-hue-error))
+      )
+    );
+    --_mp-color-error-container: var(
+      --mp-sys-color-error-container,
+      var(
+        --md-sys-color-error-container,
+        oklch(var(--_mp-tone-accent-container) var(--_mp-palette-error) var(--_mp-hue-error))
+      )
+    );
+    --_mp-color-on-error-container: var(
+      --mp-sys-color-on-error-container,
+      var(
+        --md-sys-color-on-error-container,
+        oklch(var(--_mp-tone-on-accent-container) var(--_mp-palette-error) var(--_mp-hue-error))
+      )
+    );
+
+    /*
+     * The names Tailwind's utilities actually read, aliased here as well as in
+     * the `@theme` block at the end of the file.
+     *
+     * Both are needed, and for different reasons. `@theme` is the *registration*:
+     * Tailwind only emits `border-mp-outline` for a name declared there. But what
+     * it emits alongside is a `:root` declaration, and a `:root` declaration
+     * freezes its `var()` references at the document root — which would put the
+     * whole cascade back where it started, one level up. A field inside a section
+     * with its own source colour would read the root's colour and quietly ignore
+     * its own.
+     *
+     * So the aliases are repeated here, where `*` re-resolves them per element.
+     * Only the alias is duplicated: the derivation above it lives in one place.
+     */
+    --color-mp-primary: var(--_mp-color-primary);
+    --color-mp-on-primary: var(--_mp-color-on-primary);
+    --color-mp-primary-container: var(--_mp-color-primary-container);
+    --color-mp-on-primary-container: var(--_mp-color-on-primary-container);
+    --color-mp-secondary: var(--_mp-color-secondary);
+    --color-mp-on-secondary: var(--_mp-color-on-secondary);
+    --color-mp-secondary-container: var(--_mp-color-secondary-container);
+    --color-mp-on-secondary-container: var(--_mp-color-on-secondary-container);
+    --color-mp-tertiary: var(--_mp-color-tertiary);
+    --color-mp-on-tertiary: var(--_mp-color-on-tertiary);
+    --color-mp-tertiary-container: var(--_mp-color-tertiary-container);
+    --color-mp-on-tertiary-container: var(--_mp-color-on-tertiary-container);
+    --color-mp-surface: var(--_mp-color-surface);
+    --color-mp-surface-container-low: var(--_mp-color-surface-container-low);
+    --color-mp-surface-container: var(--_mp-color-surface-container);
+    --color-mp-surface-container-high: var(--_mp-color-surface-container-high);
+    --color-mp-surface-container-highest: var(--_mp-color-surface-container-highest);
+    --color-mp-inverse-surface: var(--_mp-color-inverse-surface);
+    --color-mp-inverse-on-surface: var(--_mp-color-inverse-on-surface);
+    --color-mp-inverse-primary: var(--_mp-color-inverse-primary);
+    --color-mp-scrim: var(--_mp-color-scrim);
+    --color-mp-on-surface: var(--_mp-color-on-surface);
+    --color-mp-on-surface-variant: var(--_mp-color-on-surface-variant);
+    --color-mp-outline: var(--_mp-color-outline);
+    --color-mp-outline-variant: var(--_mp-color-outline-variant);
+    --color-mp-error: var(--_mp-color-error);
+    --color-mp-on-error: var(--_mp-color-on-error);
+    --color-mp-error-container: var(--_mp-color-error-container);
+    --color-mp-on-error-container: var(--_mp-color-on-error-container);
+
+    /* Literals rather than derivations, but resolved through a variable all the
+       same, so they freeze at `:root` in exactly the same way. A consumer setting
+       a typescale on a wrapper should see it apply inside that wrapper. */
+    --text-mp-display-small: var(--mp-sys-typescale-display-small-size);
+    --text-mp-display-small--line-height: var(--mp-sys-typescale-display-small-line-height);
+    --text-mp-display-small--letter-spacing: var(--mp-sys-typescale-display-small-tracking);
+    --text-mp-display-small--font-weight: var(--mp-sys-typescale-display-small-weight);
+
+    --text-mp-headline-large: var(--mp-sys-typescale-headline-large-size);
+    --text-mp-headline-large--line-height: var(--mp-sys-typescale-headline-large-line-height);
+    --text-mp-headline-large--letter-spacing: var(--mp-sys-typescale-headline-large-tracking);
+    --text-mp-headline-large--font-weight: var(--mp-sys-typescale-headline-large-weight);
+
+    --text-mp-headline-medium: var(--mp-sys-typescale-headline-medium-size);
+    --text-mp-headline-medium--line-height: var(--mp-sys-typescale-headline-medium-line-height);
+    --text-mp-headline-medium--letter-spacing: var(--mp-sys-typescale-headline-medium-tracking);
+    --text-mp-headline-medium--font-weight: var(--mp-sys-typescale-headline-medium-weight);
+
+    --text-mp-headline-small: var(--mp-sys-typescale-headline-small-size);
+    --text-mp-headline-small--line-height: var(--mp-sys-typescale-headline-small-line-height);
+    --text-mp-headline-small--letter-spacing: var(--mp-sys-typescale-headline-small-tracking);
+    --text-mp-headline-small--font-weight: var(--mp-sys-typescale-headline-small-weight);
+
+    --text-mp-title-large: var(--mp-sys-typescale-title-large-size);
+    --text-mp-title-large--line-height: var(--mp-sys-typescale-title-large-line-height);
+    --text-mp-title-large--letter-spacing: var(--mp-sys-typescale-title-large-tracking);
+    --text-mp-title-large--font-weight: var(--mp-sys-typescale-title-large-weight);
+
+    --text-mp-title-small: var(--mp-sys-typescale-title-small-size);
+    --text-mp-title-small--line-height: var(--mp-sys-typescale-title-small-line-height);
+    --text-mp-title-small--letter-spacing: var(--mp-sys-typescale-title-small-tracking);
+    --text-mp-title-small--font-weight: var(--mp-sys-typescale-title-small-weight);
+
+    --text-mp-label-medium: var(--mp-sys-typescale-label-medium-size);
+    --text-mp-label-medium--line-height: var(--mp-sys-typescale-label-medium-line-height);
+    --text-mp-label-medium--letter-spacing: var(--mp-sys-typescale-label-medium-tracking);
+    --text-mp-label-medium--font-weight: var(--mp-sys-typescale-label-medium-weight);
+
+    --text-mp-label-small: var(--mp-sys-typescale-label-small-size);
+    --text-mp-label-small--line-height: var(--mp-sys-typescale-label-small-line-height);
+    --text-mp-label-small--letter-spacing: var(--mp-sys-typescale-label-small-tracking);
+    --text-mp-label-small--font-weight: var(--mp-sys-typescale-label-small-weight);
+
+    --text-mp-body-large: var(--mp-sys-typescale-body-large-size);
+    --text-mp-body-large--line-height: var(--mp-sys-typescale-body-large-line-height);
+    --text-mp-body-large--letter-spacing: var(--mp-sys-typescale-body-large-tracking);
+    --text-mp-body-large--font-weight: var(--mp-sys-typescale-body-large-weight);
+
+    --text-mp-body-medium: var(--mp-sys-typescale-body-medium-size);
+    --text-mp-body-medium--line-height: var(--mp-sys-typescale-body-medium-line-height);
+    --text-mp-body-medium--letter-spacing: var(--mp-sys-typescale-body-medium-tracking);
+    --text-mp-body-medium--font-weight: var(--mp-sys-typescale-body-medium-weight);
+
+    --text-mp-body-small: var(--mp-sys-typescale-body-small-size);
+    --text-mp-body-small--line-height: var(--mp-sys-typescale-body-small-line-height);
+    --text-mp-body-small--letter-spacing: var(--mp-sys-typescale-body-small-tracking);
+    --text-mp-body-small--font-weight: var(--mp-sys-typescale-body-small-weight);
+
+    --text-mp-label-large: var(--mp-sys-typescale-label-large-size);
+    --text-mp-label-large--line-height: var(--mp-sys-typescale-label-large-line-height);
+    --text-mp-label-large--letter-spacing: var(--mp-sys-typescale-label-large-tracking);
+    --text-mp-label-large--font-weight: var(--mp-sys-typescale-label-large-weight);
+
+    --text-mp-title-medium: var(--mp-sys-typescale-title-medium-size);
+    --text-mp-title-medium--line-height: var(--mp-sys-typescale-title-medium-line-height);
+    --text-mp-title-medium--letter-spacing: var(--mp-sys-typescale-title-medium-tracking);
+    --text-mp-title-medium--font-weight: var(--mp-sys-typescale-title-medium-weight);
+
+    --radius-mp-xs: var(--mp-sys-shape-corner-extra-small);
+    --radius-mp-sm: var(--mp-sys-shape-corner-small);
+    --radius-mp-md: var(--mp-sys-shape-corner-medium);
+    --radius-mp-lg: var(--mp-sys-shape-corner-large);
+    --radius-mp-xl: var(--mp-sys-shape-corner-extra-large);
+    --radius-mp-full: var(--mp-sys-shape-corner-full);
+
+    --shadow-mp-1: var(--mp-sys-elevation-level1);
+    --shadow-mp-2: var(--mp-sys-elevation-level2);
+    --shadow-mp-3: var(--mp-sys-elevation-level3);
+
+    --ease-mp-standard: var(--mp-sys-motion-easing-standard);
+  }
+
+  :root {
+    /*
+     * No state opacities here. The spec's disabled treatment — content at 38%,
+     * an outline at 12% — is expressed where it is used, as `/38` and `/12` on
+     * the colour a component was already naming. A token would be a third name
+     * for a number nothing would read.
+     */
+
+    /*
+     * Typescale. Thirteen of MD3's fifteen roles, and each one is read by
+     * something: a text field's input is `body-large` at `md` and above and
+     * `body-medium` at `sm` and `xs`, its notched label and supporting text are
+     * `body-small`. A button's label is `label-large` at `xs` and `sm` and
+     * `title-medium` from `md` up, which is what MD3 sets its own small and
+     * medium buttons in.
+     *
+     * The display and headline half of the scale arrived with `MPTypography`,
+     * which is the component whose whole subject is the ladder — before it, a
+     * heading role was a token nothing read. `display-large` and
+     * `display-medium` are still absent for exactly that reason: at 57px and
+     * 45px they are hero type, and nothing in the library sets any.
+     *
+     * All three values are the spec's. The size ladder is ours — see `MPSize` in
+     * `src/types.ts` — but what it selects between is not: a smaller control
+     * moves *down the Material type scale* rather than to some interpolated size
+     * of the library's own invention.
+     *
+     * `--mp-sys-typescale-*-font` is left pointing at whatever the page uses
+     * rather than naming a typeface. Shipping a font stack would be a page-level
+     * decision, and this library does not make those.
+     */
+    /* The five roles above body, at MD3's own sizes and — this is the part that
+       looks like a mistake and is not — at MD3's own **weight 400**. Material
+       headings are not bold. A 32px line at regular weight is what the
+       specification draws, and the single fastest way to make a Material page
+       look like a Bootstrap one is to set its headings in 600. */
+    --mp-sys-typescale-display-small-font: inherit;
+    --mp-sys-typescale-display-small-size: 2.25rem;
+    --mp-sys-typescale-display-small-line-height: 2.75rem;
+    --mp-sys-typescale-display-small-tracking: 0rem;
+    --mp-sys-typescale-display-small-weight: 400;
+
+    --mp-sys-typescale-headline-large-font: inherit;
+    --mp-sys-typescale-headline-large-size: 2rem;
+    --mp-sys-typescale-headline-large-line-height: 2.5rem;
+    --mp-sys-typescale-headline-large-tracking: 0rem;
+    --mp-sys-typescale-headline-large-weight: 400;
+
+    --mp-sys-typescale-headline-medium-font: inherit;
+    --mp-sys-typescale-headline-medium-size: 1.75rem;
+    --mp-sys-typescale-headline-medium-line-height: 2.25rem;
+    --mp-sys-typescale-headline-medium-tracking: 0rem;
+    --mp-sys-typescale-headline-medium-weight: 400;
+
+    --mp-sys-typescale-headline-small-font: inherit;
+    --mp-sys-typescale-headline-small-size: 1.5rem;
+    --mp-sys-typescale-headline-small-line-height: 2rem;
+    --mp-sys-typescale-headline-small-tracking: 0rem;
+    --mp-sys-typescale-headline-small-weight: 400;
+
+    --mp-sys-typescale-title-large-font: inherit;
+    --mp-sys-typescale-title-large-size: 1.375rem;
+    --mp-sys-typescale-title-large-line-height: 1.75rem;
+    --mp-sys-typescale-title-large-tracking: 0rem;
+    --mp-sys-typescale-title-large-weight: 400;
+
+    --mp-sys-typescale-body-large-font: inherit;
+    --mp-sys-typescale-body-large-size: 1rem;
+    --mp-sys-typescale-body-large-line-height: 1.5rem;
+    --mp-sys-typescale-body-large-tracking: 0.03125rem;
+    --mp-sys-typescale-body-large-weight: 400;
+
+    --mp-sys-typescale-body-medium-font: inherit;
+    --mp-sys-typescale-body-medium-size: 0.875rem;
+    --mp-sys-typescale-body-medium-line-height: 1.25rem;
+    --mp-sys-typescale-body-medium-tracking: 0.015625rem;
+    --mp-sys-typescale-body-medium-weight: 400;
+
+    --mp-sys-typescale-body-small-font: inherit;
+    --mp-sys-typescale-body-small-size: 0.75rem;
+    --mp-sys-typescale-body-small-line-height: 1rem;
+    --mp-sys-typescale-body-small-tracking: 0.025rem;
+    --mp-sys-typescale-body-small-weight: 400;
+
+    /* The label and small-title roles. All of them are 500 rather than 400: MD3
+       sets a control's own text one weight up from prose, which is what keeps a
+       button's label from reading as a paragraph that happens to be inside a
+       box. `label-small` at 11px is the smallest type in the specification and
+       is why a badge's count is legible at all. */
+    --mp-sys-typescale-label-large-font: inherit;
+    --mp-sys-typescale-label-large-size: 0.875rem;
+    --mp-sys-typescale-label-large-line-height: 1.25rem;
+    --mp-sys-typescale-label-large-tracking: 0.00625rem;
+    --mp-sys-typescale-label-large-weight: 500;
+
+    --mp-sys-typescale-label-medium-font: inherit;
+    --mp-sys-typescale-label-medium-size: 0.75rem;
+    --mp-sys-typescale-label-medium-line-height: 1rem;
+    --mp-sys-typescale-label-medium-tracking: 0.03125rem;
+    --mp-sys-typescale-label-medium-weight: 500;
+
+    --mp-sys-typescale-label-small-font: inherit;
+    --mp-sys-typescale-label-small-size: 0.6875rem;
+    --mp-sys-typescale-label-small-line-height: 1rem;
+    --mp-sys-typescale-label-small-tracking: 0.03125rem;
+    --mp-sys-typescale-label-small-weight: 500;
+
+    --mp-sys-typescale-title-small-font: inherit;
+    --mp-sys-typescale-title-small-size: 0.875rem;
+    --mp-sys-typescale-title-small-line-height: 1.25rem;
+    --mp-sys-typescale-title-small-tracking: 0.00625rem;
+    --mp-sys-typescale-title-small-weight: 500;
+
+    --mp-sys-typescale-title-medium-font: inherit;
+    --mp-sys-typescale-title-medium-size: 1rem;
+    --mp-sys-typescale-title-medium-line-height: 1.5rem;
+    --mp-sys-typescale-title-medium-tracking: 0.009375rem;
+    --mp-sys-typescale-title-medium-weight: 500;
+
+    /*
+     * Shape. Four corner sizes, and which one a component takes is a statement
+     * about what kind of object it is rather than a size to taste: a text field
+     * is a well (`extra-small`), a button is a pill (`full`), a dropzone is a
+     * sheet (`medium`), and the tiles inside one are `small`.
+     *
+     * `full` is a length rather than `50%` deliberately. A percentage radius on a
+     * box whose width and height differ draws an ellipse, so a wide button would
+     * bow along its top edge instead of ending in two half-circles.
+     */
+    --mp-sys-shape-corner-extra-small: 4px;
+    --mp-sys-shape-corner-small: 8px;
+    --mp-sys-shape-corner-medium: 12px;
+    /* `large` is read by exactly one thing, and it arrived with it: a drawer's
+       free edge. MD3 gives the navigation drawer `corner-large` on the side that
+       faces the page and leaves the side against the window square, and neither
+       neighbour is a substitute — 12px on a 360dp panel is barely a corner, and
+       28px is the bottom sheet's, which is a different object. */
+    --mp-sys-shape-corner-large: 16px;
+    /* `extra-large` is here for the dialog, which is the spec's own corner for
+       it and the loudest radius in the system: a sheet that has taken the page
+       is allowed to look like an object rather than like a panel. It is also the
+       bottom sheet's, which is the same claim made along one edge. */
+    --mp-sys-shape-corner-extra-large: 28px;
+    --mp-sys-shape-corner-full: 9999px;
+
+    /*
+     * Elevation. Three of MD3's six levels, because three are what gets read: an
+     * elevated button rests at level 1 and rises to 2 under the pointer, a menu
+     * floats at level 2, and a dialog — which has taken the page rather than
+     * merely covered part of it — sits at level 3.
+     *
+     * Both are the spec's own two-shadow recipe — a tight key shadow plus a wider
+     * ambient one — rather than one blurred box shadow. The pair is what makes a
+     * raised surface read as lit from above instead of as a sticker with a halo.
+     */
+    --mp-sys-elevation-level1: 0 1px 2px 0 rgb(0 0 0 / 0.3), 0 1px 3px 1px rgb(0 0 0 / 0.15);
+    --mp-sys-elevation-level2: 0 1px 2px 0 rgb(0 0 0 / 0.3), 0 2px 6px 2px rgb(0 0 0 / 0.15);
+    --mp-sys-elevation-level3: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 4px 8px 3px rgb(0 0 0 / 0.15);
+
+    /*
+     * Motion.
+     *
+     * Six of MD3's sixteen duration tokens and six of its seven easing curves —
+     * the ones something in the library actually reads, on the rule every other
+     * token here follows. `short4` is what a text field's label and outline
+     * transition on; the rest arrived with the `MPAnimate*` components, which
+     * take these as their defaults rather than numbers of their own.
+     *
+     * Worth knowing if these controls sit beside another library's: 250ms is a
+     * common default elsewhere, and a field from here will settle slightly
+     * sooner unless `short4` is set to match.
+     */
+    --mp-sys-motion-duration-short4: 200ms;
+    --mp-sys-motion-duration-medium2: 300ms;
+    --mp-sys-motion-duration-medium4: 400ms;
+    --mp-sys-motion-duration-long2: 500ms;
+    --mp-sys-motion-duration-extra-long4: 1000ms;
+
+    /* The spec's `standard` curve: quick to leave, slow to arrive. Read by the
+       one thing in the library that actually travels, a switch's thumb. */
+    --mp-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+    --mp-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
+    --mp-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
+    /*
+     * The emphasized set, which is what MD3 asks a *transition* to use — a
+     * standard curve is for a control changing state, an emphasized one for
+     * something arriving on or leaving the screen.
+     *
+     * `emphasized` itself is two curves joined in the middle in the
+     * specification, and CSS has no single value that is both. This is the
+     * one-curve stand-in MD3's own web implementation publishes. Where the
+     * halves genuinely matter — a line rising as another leaves — the two below
+     * are the halves, and they are what the components reach for.
+     */
+    --mp-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
+    --mp-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
+    --mp-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
+    /* CSS's own `linear` is a keyword rather than a curve, and a token that
+       cannot be interpolated with the other six is a token that breaks the one
+       place they are swapped. The identity bezier is the same line. */
+    --mp-sys-motion-easing-linear: cubic-bezier(0, 0, 1, 1);
+  }
+
+  /*
+   * Two shape presets, on the same model as `data-mp-scheme`: say nothing and
+   * you get the specification's corners, name one and the whole subtree moves.
+   *
+   *   <html data-mp-shape="rounded">
+   *   <section data-mp-shape="sharp">   <!-- a subtree, same as the scheme -->
+   *
+   * These only set the four tokens above, so anything a consumer sets themselves
+   * still wins: the block is inside `@layer theme`, and unlayered CSS beats a
+   * layered rule whatever order the two are imported in.
+   *
+   * Named presets rather than a `--mp-shape-scale` multiplier, because the corner
+   * ladder is not linear and should not be scaled as if it were. Going rounder,
+   * `extra-small` wants to double and `extra-large` wants to move by a sixth — a
+   * dialog whose corner has doubled to 56px is not a rounder dialog, it is a
+   * lozenge. The numbers below are chosen per rung for that reason.
+   */
+  [data-mp-shape='rounded'] {
+    --mp-sys-shape-corner-extra-small: 8px;
+    --mp-sys-shape-corner-small: 12px;
+    --mp-sys-shape-corner-medium: 20px;
+    --mp-sys-shape-corner-large: 24px;
+    --mp-sys-shape-corner-extra-large: 32px;
+    /* `full` is not here, and cannot be: a button is already a pill at 9999px,
+       so there is no rounder to go. This preset moves the four rungs that have
+       somewhere to move, which is why it reads on fields, chips, sheets and
+       dialogs and is invisible on buttons and sliders. */
+  }
+
+  [data-mp-shape='sharp'] {
+    --mp-sys-shape-corner-extra-small: 0;
+    --mp-sys-shape-corner-small: 0;
+    --mp-sys-shape-corner-medium: 0;
+    --mp-sys-shape-corner-large: 0;
+    --mp-sys-shape-corner-extra-large: 0;
+    /* `full` *is* here, unlike above, and for the same reason: this is the one
+       direction a pill can travel. Leaving it round would make `sharp` a theme
+       where every corner is square except the buttons, which is not a theme. */
+    --mp-sys-shape-corner-full: 0;
+  }
+}
+
+/* ---------------------------------------------------------------------------
+ * Utility generation
+ *
+ * The block above is the input side: values a consumer sets, in a plain `:root`,
+ * where Tailwind will not touch them. This block is the output side — Tailwind
+ * only generates `bg-mp-primary`, `text-mp-body-large` and friends for names
+ * declared in `@theme`, and it prunes the ones no utility ends up using.
+ *
+ * The split is what keeps the input side safe from that pruning: a variable only
+ * ever referenced from inside another custom property's value has no utility
+ * pointing at it, and would be a candidate for removal if it lived here.
+ *
+ * Every name is prefixed. `@theme` registers globally, so an unprefixed
+ * `--color-primary` would generate a `bg-primary` that collides with the
+ * consumer's own.
+ *
+ * What this block does *not* do is supply the values the utilities end up using.
+ * It registers the names; the `*` rule above resolves them, and has to, because a
+ * `:root` declaration would freeze the cascade at the document root. Every name
+ * here is therefore also declared there — deliberately, not by oversight.
+ * ------------------------------------------------------------------------- */
+
+@theme {
+  --color-mp-primary: var(--_mp-color-primary);
+  --color-mp-on-primary: var(--_mp-color-on-primary);
+  --color-mp-primary-container: var(--_mp-color-primary-container);
+  --color-mp-on-primary-container: var(--_mp-color-on-primary-container);
+  --color-mp-secondary: var(--_mp-color-secondary);
+  --color-mp-on-secondary: var(--_mp-color-on-secondary);
+  --color-mp-secondary-container: var(--_mp-color-secondary-container);
+  --color-mp-on-secondary-container: var(--_mp-color-on-secondary-container);
+  --color-mp-tertiary: var(--_mp-color-tertiary);
+  --color-mp-on-tertiary: var(--_mp-color-on-tertiary);
+  --color-mp-tertiary-container: var(--_mp-color-tertiary-container);
+  --color-mp-on-tertiary-container: var(--_mp-color-on-tertiary-container);
+  --color-mp-surface: var(--_mp-color-surface);
+  --color-mp-surface-container-low: var(--_mp-color-surface-container-low);
+  --color-mp-surface-container: var(--_mp-color-surface-container);
+  --color-mp-surface-container-high: var(--_mp-color-surface-container-high);
+  --color-mp-surface-container-highest: var(--_mp-color-surface-container-highest);
+  --color-mp-inverse-surface: var(--_mp-color-inverse-surface);
+  --color-mp-inverse-on-surface: var(--_mp-color-inverse-on-surface);
+  --color-mp-inverse-primary: var(--_mp-color-inverse-primary);
+  --color-mp-scrim: var(--_mp-color-scrim);
+  --color-mp-on-surface: var(--_mp-color-on-surface);
+  --color-mp-on-surface-variant: var(--_mp-color-on-surface-variant);
+  --color-mp-outline: var(--_mp-color-outline);
+  --color-mp-outline-variant: var(--_mp-color-outline-variant);
+  --color-mp-error: var(--_mp-color-error);
+  --color-mp-on-error: var(--_mp-color-on-error);
+  --color-mp-error-container: var(--_mp-color-error-container);
+  --color-mp-on-error-container: var(--_mp-color-on-error-container);
+
+  --text-mp-display-small: var(--mp-sys-typescale-display-small-size);
+  --text-mp-display-small--line-height: var(--mp-sys-typescale-display-small-line-height);
+  --text-mp-display-small--letter-spacing: var(--mp-sys-typescale-display-small-tracking);
+  --text-mp-display-small--font-weight: var(--mp-sys-typescale-display-small-weight);
+
+  --text-mp-headline-large: var(--mp-sys-typescale-headline-large-size);
+  --text-mp-headline-large--line-height: var(--mp-sys-typescale-headline-large-line-height);
+  --text-mp-headline-large--letter-spacing: var(--mp-sys-typescale-headline-large-tracking);
+  --text-mp-headline-large--font-weight: var(--mp-sys-typescale-headline-large-weight);
+
+  --text-mp-headline-medium: var(--mp-sys-typescale-headline-medium-size);
+  --text-mp-headline-medium--line-height: var(--mp-sys-typescale-headline-medium-line-height);
+  --text-mp-headline-medium--letter-spacing: var(--mp-sys-typescale-headline-medium-tracking);
+  --text-mp-headline-medium--font-weight: var(--mp-sys-typescale-headline-medium-weight);
+
+  --text-mp-headline-small: var(--mp-sys-typescale-headline-small-size);
+  --text-mp-headline-small--line-height: var(--mp-sys-typescale-headline-small-line-height);
+  --text-mp-headline-small--letter-spacing: var(--mp-sys-typescale-headline-small-tracking);
+  --text-mp-headline-small--font-weight: var(--mp-sys-typescale-headline-small-weight);
+
+  --text-mp-title-large: var(--mp-sys-typescale-title-large-size);
+  --text-mp-title-large--line-height: var(--mp-sys-typescale-title-large-line-height);
+  --text-mp-title-large--letter-spacing: var(--mp-sys-typescale-title-large-tracking);
+  --text-mp-title-large--font-weight: var(--mp-sys-typescale-title-large-weight);
+
+  --text-mp-title-small: var(--mp-sys-typescale-title-small-size);
+  --text-mp-title-small--line-height: var(--mp-sys-typescale-title-small-line-height);
+  --text-mp-title-small--letter-spacing: var(--mp-sys-typescale-title-small-tracking);
+  --text-mp-title-small--font-weight: var(--mp-sys-typescale-title-small-weight);
+
+  --text-mp-label-medium: var(--mp-sys-typescale-label-medium-size);
+  --text-mp-label-medium--line-height: var(--mp-sys-typescale-label-medium-line-height);
+  --text-mp-label-medium--letter-spacing: var(--mp-sys-typescale-label-medium-tracking);
+  --text-mp-label-medium--font-weight: var(--mp-sys-typescale-label-medium-weight);
+
+  --text-mp-label-small: var(--mp-sys-typescale-label-small-size);
+  --text-mp-label-small--line-height: var(--mp-sys-typescale-label-small-line-height);
+  --text-mp-label-small--letter-spacing: var(--mp-sys-typescale-label-small-tracking);
+  --text-mp-label-small--font-weight: var(--mp-sys-typescale-label-small-weight);
+
+  --text-mp-body-large: var(--mp-sys-typescale-body-large-size);
+  --text-mp-body-large--line-height: var(--mp-sys-typescale-body-large-line-height);
+  --text-mp-body-large--letter-spacing: var(--mp-sys-typescale-body-large-tracking);
+  --text-mp-body-large--font-weight: var(--mp-sys-typescale-body-large-weight);
+
+  --text-mp-body-medium: var(--mp-sys-typescale-body-medium-size);
+  --text-mp-body-medium--line-height: var(--mp-sys-typescale-body-medium-line-height);
+  --text-mp-body-medium--letter-spacing: var(--mp-sys-typescale-body-medium-tracking);
+  --text-mp-body-medium--font-weight: var(--mp-sys-typescale-body-medium-weight);
+
+  --text-mp-body-small: var(--mp-sys-typescale-body-small-size);
+  --text-mp-body-small--line-height: var(--mp-sys-typescale-body-small-line-height);
+  --text-mp-body-small--letter-spacing: var(--mp-sys-typescale-body-small-tracking);
+  --text-mp-body-small--font-weight: var(--mp-sys-typescale-body-small-weight);
+
+  --text-mp-label-large: var(--mp-sys-typescale-label-large-size);
+  --text-mp-label-large--line-height: var(--mp-sys-typescale-label-large-line-height);
+  --text-mp-label-large--letter-spacing: var(--mp-sys-typescale-label-large-tracking);
+  --text-mp-label-large--font-weight: var(--mp-sys-typescale-label-large-weight);
+
+  --text-mp-title-medium: var(--mp-sys-typescale-title-medium-size);
+  --text-mp-title-medium--line-height: var(--mp-sys-typescale-title-medium-line-height);
+  --text-mp-title-medium--letter-spacing: var(--mp-sys-typescale-title-medium-tracking);
+  --text-mp-title-medium--font-weight: var(--mp-sys-typescale-title-medium-weight);
+
+  --radius-mp-xs: var(--mp-sys-shape-corner-extra-small);
+  --radius-mp-sm: var(--mp-sys-shape-corner-small);
+  --radius-mp-md: var(--mp-sys-shape-corner-medium);
+  --radius-mp-lg: var(--mp-sys-shape-corner-large);
+  --radius-mp-xl: var(--mp-sys-shape-corner-extra-large);
+  --radius-mp-full: var(--mp-sys-shape-corner-full);
+
+  --shadow-mp-1: var(--mp-sys-elevation-level1);
+  --shadow-mp-2: var(--mp-sys-elevation-level2);
+  --shadow-mp-3: var(--mp-sys-elevation-level3);
+
+  --ease-mp-standard: var(--mp-sys-motion-easing-standard);
+}
+
+/* ---------------------------------------------------------------------------
+ * The layout grid
+ *
+ * A column is `(100% + gutter) * span / columns - gutter`, and the arithmetic
+ * lives here for the reason the keyframes below do: Tailwind finds classes by
+ * scanning source text, and `columns` is a number the caller picks at runtime.
+ * A class name assembled in JavaScript is a class name Tailwind never sees, so
+ * the per-instance numbers arrive as inline `--_mp-*` slots — exactly as a
+ * `color` reaches a background — and the rules that read them are written once,
+ * here.
+ *
+ * `min(span, columns)` is the clamp: `span={99}` fills its row instead of
+ * running off the page, which is what the caller meant.
+ *
+ * Every slot cascades upward — each window size class falls back through the
+ * ones below it — so `span={{ expanded: 6 }}` sets one custom property and not
+ * five. The chains get long at `extra-large`; that is the cost of keeping the
+ * DOM lean, and it is paid once here rather than on every grid item in a
+ * consumer's application.
+ *
+ * The widths are **MD3's window size classes** — 600, 840, 1200 and 1600dp —
+ * and not Tailwind's breakpoints. See `MPWindowClass` in `src/types.ts`.
+ *
+ * Unlayered, like the two animation classes below and for the same reason: a
+ * layered rule loses to every unlayered one, and a consumer's own page styling
+ * is unlayered. A grid whose widths could be cancelled by a stray `div { }` in
+ * an application's stylesheet is not a grid.
+ * ------------------------------------------------------------------------- */
+
+.mp-grid {
+  --_mp-cols: var(--_mp-cols-compact, 12);
+  --_mp-gap-x: var(--_mp-gap-x-compact, 0px);
+  --_mp-gap-y: var(--_mp-gap-y-compact, 0px);
+}
+
+.mp-grid-item {
+  --_mp-span: var(--_mp-span-compact, var(--_mp-cols, 12));
+  --_mp-offset: var(--_mp-offset-compact, 0);
+
+  /* One column plus one gutter. `--_mp-cols` and `--_mp-gap-x` are inherited
+     from the grid, so this re-resolves on its own at every window class. */
+  --_mp-track: calc((100% + var(--_mp-gap-x, 0px)) / var(--_mp-cols, 12));
+
+  /* Inseparable from the width under them: `flex` stops the row resizing the
+     item, `min-width` stops a long unbroken word doing the same, and
+     `box-sizing` is what makes the percentage mean the whole item. */
+  box-sizing: border-box;
+  flex: 0 0 auto;
+  min-width: 0;
+  width: calc(var(--_mp-track) * min(var(--_mp-span), var(--_mp-cols, 12)) - var(--_mp-gap-x, 0px));
+  margin-inline-start: calc(var(--_mp-track) * min(var(--_mp-offset), var(--_mp-cols, 12)));
+}
+
+@media (width >= 600px) {
+  .mp-grid {
+    --_mp-cols: var(--_mp-cols-medium, var(--_mp-cols-compact, 12));
+    --_mp-gap-x: var(--_mp-gap-x-medium, var(--_mp-gap-x-compact, 0px));
+    --_mp-gap-y: var(--_mp-gap-y-medium, var(--_mp-gap-y-compact, 0px));
+  }
+
+  .mp-grid-item {
+    --_mp-span: var(--_mp-span-medium, var(--_mp-span-compact, var(--_mp-cols, 12)));
+    --_mp-offset: var(--_mp-offset-medium, var(--_mp-offset-compact, 0));
+  }
+}
+
+@media (width >= 840px) {
+  .mp-grid {
+    --_mp-cols: var(--_mp-cols-expanded, var(--_mp-cols-medium, var(--_mp-cols-compact, 12)));
+    --_mp-gap-x: var(--_mp-gap-x-expanded, var(--_mp-gap-x-medium, var(--_mp-gap-x-compact, 0px)));
+    --_mp-gap-y: var(--_mp-gap-y-expanded, var(--_mp-gap-y-medium, var(--_mp-gap-y-compact, 0px)));
+  }
+
+  .mp-grid-item {
+    --_mp-span: var(
+      --_mp-span-expanded,
+      var(--_mp-span-medium, var(--_mp-span-compact, var(--_mp-cols, 12)))
+    );
+    --_mp-offset: var(
+      --_mp-offset-expanded,
+      var(--_mp-offset-medium, var(--_mp-offset-compact, 0))
+    );
+  }
+}
+
+@media (width >= 1200px) {
+  .mp-grid {
+    --_mp-cols: var(
+      --_mp-cols-large,
+      var(--_mp-cols-expanded, var(--_mp-cols-medium, var(--_mp-cols-compact, 12)))
+    );
+    --_mp-gap-x: var(
+      --_mp-gap-x-large,
+      var(--_mp-gap-x-expanded, var(--_mp-gap-x-medium, var(--_mp-gap-x-compact, 0px)))
+    );
+    --_mp-gap-y: var(
+      --_mp-gap-y-large,
+      var(--_mp-gap-y-expanded, var(--_mp-gap-y-medium, var(--_mp-gap-y-compact, 0px)))
+    );
+  }
+
+  .mp-grid-item {
+    --_mp-span: var(
+      --_mp-span-large,
+      var(--_mp-span-expanded, var(--_mp-span-medium, var(--_mp-span-compact, var(--_mp-cols, 12))))
+    );
+    --_mp-offset: var(
+      --_mp-offset-large,
+      var(--_mp-offset-expanded, var(--_mp-offset-medium, var(--_mp-offset-compact, 0)))
+    );
+  }
+}
+
+@media (width >= 1600px) {
+  .mp-grid {
+    --_mp-cols: var(
+      --_mp-cols-extra-large,
+      var(
+        --_mp-cols-large,
+        var(--_mp-cols-expanded, var(--_mp-cols-medium, var(--_mp-cols-compact, 12)))
+      )
+    );
+    --_mp-gap-x: var(
+      --_mp-gap-x-extra-large,
+      var(
+        --_mp-gap-x-large,
+        var(--_mp-gap-x-expanded, var(--_mp-gap-x-medium, var(--_mp-gap-x-compact, 0px)))
+      )
+    );
+    --_mp-gap-y: var(
+      --_mp-gap-y-extra-large,
+      var(
+        --_mp-gap-y-large,
+        var(--_mp-gap-y-expanded, var(--_mp-gap-y-medium, var(--_mp-gap-y-compact, 0px)))
+      )
+    );
+  }
+
+  .mp-grid-item {
+    --_mp-span: var(
+      --_mp-span-extra-large,
+      var(
+        --_mp-span-large,
+        var(
+          --_mp-span-expanded,
+          var(--_mp-span-medium, var(--_mp-span-compact, var(--_mp-cols, 12)))
+        )
+      )
+    );
+    --_mp-offset: var(
+      --_mp-offset-extra-large,
+      var(
+        --_mp-offset-large,
+        var(--_mp-offset-expanded, var(--_mp-offset-medium, var(--_mp-offset-compact, 0)))
+      )
+    );
+  }
+}
+
+/* ---------------------------------------------------------------------------
+ * Keyframes
+ *
+ * The one part of the library that cannot be written as a utility, and the only
+ * CSS here that draws rather than declares.
+ *
+ * Four of them belong to the progress indicators and the fifth is shared with
+ * `MPChatBubble`'s typing dots, and they exist for a reason Tailwind cannot
+ * answer: an indeterminate indicator is a *loop*, and a loop is a `@keyframes`
+ * rule. Everything else about those components — their colours, their ladders,
+ * their shapes — is classes and inline slots, exactly as it is everywhere else.
  *
- * Only what a component actually reads. A token nobody uses is a promise to
- * keep supporting a name, so they are added here as components need them
- * rather than in anticipation.
+ * Unlayered on purpose. `@keyframes` does not take part in the cascade, but the
+ * two classes below do, and a layered class would lose to any unlayered rule a
+ * consumer's own stylesheet happens to have.
+ *
+ * `prefers-reduced-motion` stops all of them. An indeterminate indicator that has
+ * stopped moving still says "something is happening" — it is on screen, and it
+ * was not before — and for a reader who asked for less motion that is the whole
+ * of the message. The determinate transitions are left alone: they are a value
+ * changing, not decoration.
  * ------------------------------------------------------------------------- */
 
-:root {
-  /* How long a Material Plus transition runs. Matches MUI's own `short`
-     duration so a control from this library and one from `@mui/material`
-     settle together rather than a frame apart. */
-  --mp-duration: 250ms;
+/*
+ * The linear indicator, which is two bars rather than one.
+ *
+ * MD3's indeterminate bar is a long sweep followed by a short one that catches
+ * up — the second is what keeps the track from being empty for most of the
+ * cycle. Both are written as `inset-inline-*` rather than as a translate so
+ * that the whole thing runs the other way under RTL without a second rule.
+ */
+@keyframes mp-progress-linear-lead {
+  0% {
+    inset-inline-start: -35%;
+    inset-inline-end: 100%;
+  }
+
+  60% {
+    inset-inline-start: 100%;
+    inset-inline-end: -90%;
+  }
+
+  100% {
+    inset-inline-start: 100%;
+    inset-inline-end: -90%;
+  }
+}
+
+@keyframes mp-progress-linear-trail {
+  0% {
+    inset-inline-start: -200%;
+    inset-inline-end: 100%;
+  }
+
+  60% {
+    inset-inline-start: 107%;
+    inset-inline-end: -8%;
+  }
+
+  100% {
+    inset-inline-start: 107%;
+    inset-inline-end: -8%;
+  }
+}
+
+/*
+ * The circular indicator: the ring turns while the arc it draws grows and
+ * shrinks. Two animations rather than one, on two elements, because the turn is
+ * linear and the arc is eased — a single timing function cannot be both, and a
+ * spinner whose arc pulses on the same curve it rotates on reads as a stutter.
+ *
+ * The dash values are in the circle's own `pathLength` units, which the
+ * component pins to 100. That is what lets one keyframe rule serve every
+ * diameter on the size ladder: without it each rung would need its own
+ * arithmetic in a stylesheet that cannot do arithmetic.
+ */
+@keyframes mp-progress-circular-turn {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes mp-progress-circular-arc {
+  0% {
+    stroke-dasharray: 1 100;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 70 100;
+    stroke-dashoffset: -8;
+  }
+
+  100% {
+    stroke-dasharray: 1 100;
+    stroke-dashoffset: -70;
+  }
+}
+
+/*
+ * A wave of light running along a row of marks, and the one loop two components
+ * turned out to want.
+ *
+ * `MPProgressBox` runs it along its segments and `MPChatBubble` runs it along
+ * the three dots that say somebody is writing. The two differ only in how fast
+ * and how far apart, which is what the classes below set — a second keyframe
+ * saying the same thing is a second chance for the two to drift apart.
+ *
+ * Opacity rather than colour, so one rule covers all four accent families, and
+ * each mark reads its own index out of `--_mp-index` for its delay — which is
+ * what makes a row one class and one custom property instead of N generated
+ * keyframe names.
+ */
+@keyframes mp-wave {
+  0%,
+  100% {
+    opacity: 0.24;
+  }
+
+  40% {
+    opacity: 1;
+  }
+}
+
+.mp-progress-linear-lead {
+  animation: mp-progress-linear-lead 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+}
+
+.mp-progress-linear-trail {
+  animation: mp-progress-linear-trail 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+  animation-delay: 1.15s;
+}
+
+.mp-progress-circular-turn {
+  animation: mp-progress-circular-turn 1.4s linear infinite;
+}
+
+.mp-progress-circular-arc {
+  animation: mp-progress-circular-arc 1.4s ease-in-out infinite;
+}
+
+.mp-progress-segment-wave {
+  animation: mp-wave 1.2s ease-in-out infinite;
+  animation-delay: calc(var(--_mp-index, 0) * 120ms);
+}
+
+/* Faster and tighter than the progress row: three dots at conversational pace,
+   which is roughly a beat a second. The dots never move — a bubble that bounced
+   while somebody typed would bounce in a thread another reader is scrolling. */
+.mp-chat-typing {
+  animation: mp-wave 1s ease-in-out infinite;
+  animation-delay: calc(var(--_mp-index, 0) * 160ms);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mp-progress-linear-lead,
+  .mp-progress-linear-trail,
+  .mp-progress-circular-turn,
+  .mp-progress-circular-arc,
+  .mp-progress-segment-wave,
+  .mp-chat-typing {
+    animation: none;
+  }
+
+  /* Stopping the animation is not enough on its own: three of the five draw
+     nothing at all outside a keyframe, so each is given the frame it should
+     rest on. A partial bar and a partial arc, never a full one — an indicator
+     that has stopped must not read as an indicator that has finished. */
+  .mp-progress-linear-lead {
+    inset-inline-start: 0;
+    inset-inline-end: 65%;
+  }
+
+  .mp-progress-linear-trail {
+    display: none;
+  }
+
+  .mp-progress-circular-arc {
+    stroke-dasharray: 25 100;
+    stroke-dashoffset: 0;
+  }
+
+  .mp-progress-segment-wave,
+  .mp-chat-typing {
+    opacity: 0.6;
+  }
+}
+
+/* ---------------------------------------------------------------------------
+ * Animation
+ *
+ * The `MPAnimate*` components. Real CSS for the reason the loading indicators
+ * above are: a keyframe is not a Tailwind variant, so there is nothing to
+ * express one with.
+ *
+ * The whole set is built on one idea. An effect is a single `@keyframes` that
+ * runs from a state written entirely in `--_mp-anim-*` custom properties to the
+ * element's natural one — so `src/internal/animate.ts` never generates CSS, it
+ * only fills slots, and running an effect backwards is `animation-direction:
+ * reverse` rather than a second keyframe. That is what makes `mode="out"` cost
+ * nothing, and it is also what makes it *correct*: CSS mirrors the timing
+ * function along with the keyframes, so an entrance eased on
+ * `emphasized-decelerate` comes back accelerating. MD3 asks for exactly that
+ * pair; the browser supplies the second half of it.
+ *
+ * `fill-mode` is `both` throughout, which is what lets an animation that has
+ * not been triggered yet sit paused on its own first frame. Without it, an
+ * element waiting to be scrolled into view would be fully drawn and then blink
+ * out the moment it arrived.
+ *
+ * This is also where the library's rule against transforms is at its narrowest.
+ * A *control* never moves — that rule is about a button resampling its own
+ * label under the pointer, and it holds without exception. An `MPAnimate*`
+ * moves content the caller asked to have moved, and it moves it with the
+ * independent `translate`, `scale` and `rotate` properties rather than the
+ * `transform` shorthand, so a caller's own transform on the same element
+ * survives.
+ *
+ * Unlayered, like the keyframes above: `@keyframes` takes no part in the
+ * cascade, but the classes do, and a layered class would lose to any unlayered
+ * rule a consumer's own stylesheet happens to have.
+ * ------------------------------------------------------------------------- */
+
+.mp-anim {
+  animation-duration: var(--_mp-anim-duration, var(--mp-sys-motion-duration-medium4));
+  animation-delay: var(--_mp-anim-delay, 0ms);
+  animation-timing-function: var(
+    --_mp-anim-ease,
+    var(--mp-sys-motion-easing-emphasized-decelerate)
+  );
+  animation-iteration-count: var(--_mp-anim-repeat, 1);
+  animation-direction: var(--_mp-anim-direction, normal);
+  animation-fill-mode: both;
+  animation-play-state: var(--_mp-anim-state, running);
+}
+
+@keyframes mp-anim-fade {
+  from {
+    opacity: var(--_mp-anim-opacity, 0);
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.mp-anim-fade {
+  animation-name: mp-anim-fade;
+}
+
+/* Grow and Zoom share this one: they are the same arithmetic at two strengths,
+   separated by their defaults and by their origin rather than by their maths. */
+@keyframes mp-anim-scale {
+  from {
+    opacity: var(--_mp-anim-opacity, 0);
+    scale: var(--_mp-anim-scale, 0.8);
+  }
+
+  to {
+    opacity: 1;
+    scale: 1;
+  }
+}
+
+.mp-anim-scale {
+  animation-name: mp-anim-scale;
+}
+
+@keyframes mp-anim-slide {
+  from {
+    opacity: var(--_mp-anim-opacity, 0);
+    translate: var(--_mp-anim-x, 0px) var(--_mp-anim-y, 0px);
+  }
+
+  to {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+
+.mp-anim-slide {
+  animation-name: mp-anim-slide;
+}
+
+/* Two angles rather than one, so the same keyframe covers both the quarter turn
+   something arrives on and the endless one a decorative mark spins through. */
+@keyframes mp-anim-rotate {
+  from {
+    opacity: var(--_mp-anim-opacity, 0);
+    rotate: var(--_mp-anim-angle, -180deg);
+  }
+
+  to {
+    opacity: 1;
+    rotate: var(--_mp-anim-angle-to, 0deg);
+  }
+}
+
+.mp-anim-rotate {
+  animation-name: mp-anim-rotate;
+}
+
+/* Symmetric on purpose: a blink that ended anywhere but where it started would
+   leave the element half drawn whenever the count ran out. */
+@keyframes mp-anim-blink {
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: var(--_mp-anim-opacity, 0);
+  }
+}
+
+.mp-anim-blink {
+  animation-name: mp-anim-blink;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /*
+   * The Animate components go the other way from the indicators above, and the
+   * difference is what each of them is saying. A spinner that stops is lying
+   * about whether anything is happening; an entrance that does not play has
+   * still delivered its content, which is the only thing it was ever carrying.
+   *
+   * `animation: none` rather than a zero duration, because the shorthand also
+   * clears `fill-mode` — and it is the fill that was holding an untriggered
+   * element on its own first frame at `opacity: 0`. Left in place, respecting a
+   * reader's preference would blank the page.
+   */
+  .mp-anim {
+    animation: none;
+  }
+}
+
+/*
+ * Lighting: a light travelling around the outside of something.
+ *
+ * The arc is a conic gradient and what moves is its `from` angle, which is only
+ * animatable because the angle is a registered custom property with a type. The
+ * alternative — rotating the pseudo-element itself — swings its corners out
+ * past the element on every quarter turn.
+ *
+ * `z-index: -1` inside an isolated stacking context puts the glow behind the
+ * content but still inside the component, so it reads as light escaping from
+ * under a sheet rather than as a border drawn around one. Nothing inside is
+ * overlaid and nothing is tinted, which is what lets it go around a card or a
+ * button without touching how either is drawn.
+ */
+@property --mp-glow-angle {
+  syntax: '<angle>';
+  initial-value: 0deg;
+  inherits: false;
+}
+
+@keyframes mp-anim-lighting {
+  to {
+    --mp-glow-angle: 360deg;
+  }
+}
+
+.mp-anim-lighting {
+  position: relative;
+  isolation: isolate;
+}
+
+.mp-anim-lighting::before {
+  content: '';
+  position: absolute;
+  z-index: -1;
+  inset: calc(-1 * var(--_mp-anim-glow-width, 3px));
+  border-radius: inherit;
+  background: conic-gradient(
+    from var(--mp-glow-angle),
+    transparent 0deg,
+    var(--_mp-anim-glow, var(--_mp-accent)) var(--_mp-anim-glow-arc, 50deg),
+    transparent calc(var(--_mp-anim-glow-arc, 50deg) * 2),
+    transparent 360deg
+  );
+  filter: blur(var(--_mp-anim-glow-blur, 4px));
+  animation-name: mp-anim-lighting;
+  animation-duration: var(--_mp-anim-duration, 3s);
+  animation-delay: var(--_mp-anim-delay, 0ms);
+  /* Linear, and not a token: a loop with no beginning has nothing to
+     decelerate into, and an eased revolution reads as the light hesitating at
+     an arbitrary point on a circle that has no arbitrary points. */
+  animation-timing-function: linear;
+  animation-iteration-count: var(--_mp-anim-repeat, infinite);
+  animation-direction: var(--_mp-anim-direction, normal);
+  animation-fill-mode: both;
+  animation-play-state: var(--_mp-anim-state, running);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* The arc stops travelling and becomes an even glow. The same trade the
+     skeleton makes: the decoration survives, the motion does not — a light
+     that marked the live row still marks it while holding still. */
+  .mp-anim-lighting::before {
+    background: var(--_mp-anim-glow, var(--_mp-accent));
+    animation: none;
+  }
+}
+
+/*
+ * Marquee: two identical copies, both moving by exactly one copy plus the gap.
+ *
+ * Which is the whole trick — when the first copy has travelled its own width,
+ * the second is standing precisely where the first began, so there is no seam
+ * and no frame where the strip is empty. A percentage `translate` resolves
+ * against the element's own box, so neither copy has to be measured for this to
+ * hold; measuring only ever decides how *fast* it goes.
+ */
+@keyframes mp-anim-marquee-x {
+  from {
+    translate: 0 0;
+  }
+
+  to {
+    translate: calc(-100% - var(--_mp-anim-gap, 0px)) 0;
+  }
+}
+
+@keyframes mp-anim-marquee-y {
+  from {
+    translate: 0 0;
+  }
+
+  to {
+    translate: 0 calc(-100% - var(--_mp-anim-gap, 0px));
+  }
+}
+
+.mp-marquee {
+  display: flex;
+  overflow: hidden;
+  gap: var(--_mp-anim-gap, 0px);
+}
+
+.mp-marquee-vertical {
+  flex-direction: column;
+}
+
+.mp-marquee-track {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: var(--_mp-anim-gap, 0px);
+  animation-name: mp-anim-marquee-x;
+  animation-duration: var(--_mp-anim-duration, 12s);
+  animation-delay: var(--_mp-anim-delay, 0ms);
+  /* Linear unless a caller insists otherwise. An eased marquee slows at both
+     ends of a loop that has no ends, which reads as the page stuttering. */
+  animation-timing-function: var(--_mp-anim-ease, linear);
+  animation-iteration-count: var(--_mp-anim-repeat, infinite);
+  animation-direction: var(--_mp-anim-direction, normal);
+  animation-fill-mode: both;
+  animation-play-state: var(--_mp-anim-state, running);
+}
+
+.mp-marquee-vertical .mp-marquee-track {
+  flex-direction: column;
+  animation-name: mp-anim-marquee-y;
+}
+
+.mp-marquee[data-mp-pause-on-hover]:hover .mp-marquee-track {
+  animation-play-state: paused;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* Stopped, not slowed. A strip of logos that has stopped scrolling is a strip
+     of logos, and the first copy is fully in frame — which is more than the
+     moving version guarantees at any given moment. */
+  .mp-marquee-track {
+    animation: none;
+  }
+}
+
+/*
+ * Headline: one line replacing another from below.
+ *
+ * Every item is in the same grid cell, so the box is as tall as the tallest of
+ * them from the first frame and never resizes as the reel turns. The ones not
+ * on screen keep their space with `visibility` rather than `display`, which is
+ * what makes that true.
+ *
+ * The two halves take the two halves of MD3's emphasized curve — the line
+ * arriving decelerates into place, the line leaving accelerates away — which is
+ * the one place in the library where both are written out rather than one being
+ * a reversed run of the other. Here they genuinely are two animations on two
+ * elements at the same moment.
+ */
+@keyframes mp-anim-headline-in {
+  from {
+    translate: 0 var(--_mp-anim-rise, 100%);
+    opacity: 0;
+  }
+
+  to {
+    translate: 0 0;
+    opacity: 1;
+  }
+}
+
+@keyframes mp-anim-headline-out {
+  from {
+    translate: 0 0;
+    opacity: 1;
+  }
+
+  to {
+    translate: 0 calc(-1 * var(--_mp-anim-rise, 100%));
+    opacity: 0;
+  }
+}
+
+.mp-headline {
+  display: grid;
+  overflow: hidden;
+}
+
+.mp-headline-item {
+  grid-area: 1 / 1;
+  visibility: hidden;
+  animation-duration: var(--_mp-anim-duration, var(--mp-sys-motion-duration-long2));
+  animation-fill-mode: both;
+}
+
+.mp-headline-item[data-mp-state='active'] {
+  visibility: visible;
+  animation-name: mp-anim-headline-in;
+  animation-timing-function: var(
+    --_mp-anim-ease,
+    var(--mp-sys-motion-easing-emphasized-decelerate)
+  );
+}
+
+.mp-headline-item[data-mp-state='leaving'] {
+  visibility: visible;
+  animation-name: mp-anim-headline-out;
+  animation-timing-function: var(
+    --_mp-anim-ease,
+    var(--mp-sys-motion-easing-emphasized-accelerate)
+  );
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* The reel still turns — it is a set of phrases and stopping on the first
+     would be a different message — but the lines swap rather than travel. */
+  .mp-headline-item {
+    animation: none;
+  }
+}
+
+/* The block after a typewriter. `step-end` rather than a fade, because a caret
+   that eases is a caret that looks like it is being rendered slowly. */
+@keyframes mp-anim-caret {
+  0%,
+  45% {
+    opacity: 1;
+  }
+
+  55%,
+  100% {
+    opacity: 0;
+  }
+}
+
+.mp-typing-caret {
+  display: inline-block;
+  animation: mp-anim-caret 1s step-end infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* The whole string is already there under this preference — the caret would
+     be a cursor blinking after text nobody is typing. */
+  .mp-typing-caret {
+    animation: none;
+  }
 }