kuinetic 0.1.2 → 0.1.4

package/dist/kuinetic.all.js

@@ -61,7 +61,7 @@ var kuinetic = (() => {
 
   // src/core/element-config.ts
   var ACTIVATIONS = /* @__PURE__ */ new Set(["load", "enter", "hover", "focus", "click", "manual"]);
-  var TIMELINES = /* @__PURE__ */ new Set(["time", "view", "scroll", "pointer"]);
+  var TIMELINES = /* @__PURE__ */ new Set(["time", "view", "scroll", "pointer", "pin"]);
   function readAttributes(el) {
     return {
       source: el.getAttribute(ATTR.source) ?? "",
@@ -243,7 +243,7 @@ var kuinetic = (() => {
   var HEX_COLOR = /^#[0-9a-f]{3,8}$/i;
   var COLOR_FUNCTIONS = /^(?:rgba?|hsla?|okl(?:ch|ab)|l(?:ch|ab)|color)\([^()]*\)$/i;
   var COLOR_KEYWORD = /^[a-z]+$/i;
-  var EASING_KEYWORD = /^(?:linear|ease|step-start|step-end|spring|[a-z]+-(?:in|out|in-out))$/i;
+  var EASING_KEYWORD = /^(?:linear|ease|step-start|step-end|spring|bounce|[a-z]+-(?:in|out|in-out))$/i;
   var EASING_FUNCTION = /^(?:cubic-bezier|steps|linear)\([^()]*\)$/i;
   var CALC_TYPES = /* @__PURE__ */ new Set(["length", "percentage", "number"]);
   var CALC_CHARACTER = /^[\d.\s+\-*/%a-z,]$/i;
@@ -530,7 +530,7 @@ var kuinetic = (() => {
         plan.vars,
         resolveParams(entry.spec.params, primitive.parameters, (m) => warnings.push(m))
       );
-      if (primitive.renderer === "css-keyframes") pushTrack(tracks, entry);
+      if (primitive.renderer === "css-keyframes") pushTrack(tracks, entry, timeline);
       else plan.jsEffects.push(entry);
     }
     Object.assign(plan.declarations, declarationsFor(tracks));
@@ -546,12 +546,13 @@ var kuinetic = (() => {
   function iterationCountProperty(presetName) {
     return `--kui-fx-${presetName}-iterations`;
   }
-  function pushTrack(tracks, entry) {
+  function pushTrack(tracks, entry, timeline) {
     const { spec, resolved } = entry;
     const id = resolved.primitive.id;
     tracks.names.push(resolved.preset.keyframes ?? `kui-${resolved.preset.name}`);
-    tracks.durations.push(spec.duration ?? `var(${timingProperty(id, "duration")}, 600ms)`);
-    tracks.delays.push(staggerDelay(spec.delay, id));
+    const duration = spec.duration ?? `var(${timingProperty(id, "duration")}, 600ms)`;
+    tracks.durations.push(duration);
+    tracks.delays.push(staggerDelay(spec.delay, id, timeline, duration));
     tracks.easings.push(easingValue(spec.easing, id));
     tracks.iterationCounts.push(`var(${iterationCountProperty(resolved.preset.name)}, 1)`);
   }
@@ -575,9 +576,12 @@ var kuinetic = (() => {
       `"${name}" does not support timeline "${timeline}" (supports: ${supported.join(", ")})`
     );
   }
-  function staggerDelay(delay, primitiveId) {
+  function staggerDelay(delay, primitiveId, timeline, duration) {
     const base = delay ?? `var(${timingProperty(primitiveId, "delay")}, 0ms)`;
-    return `calc(${base} + var(--kui-i, 0) * var(--kui-stagger, 0ms))`;
+    const staggered = `${base} + var(--kui-i, 0) * var(--kui-stagger, 0ms)`;
+    if (timeline !== "pin") return `calc(${staggered})`;
+    const span = `${duration} + (var(--kui-stagger-count, 1) - 1) * var(--kui-stagger, 0ms)`;
+    return `calc(${staggered} - var(--kui-progress, 0) * (${span}))`;
   }
   function easingValue(easing, primitiveId) {
     if (!easing) return `var(${timingProperty(primitiveId, "ease")}, ease-out)`;
@@ -860,7 +864,8 @@ var kuinetic = (() => {
     "back-in-out",
     "quart-out",
     "circ-out",
-    "spring"
+    "spring",
+    "bounce"
   ]);
   function splitTopLevel(input, delimiter, warnings = []) {
     const parts = [];
@@ -1095,7 +1100,22 @@ var kuinetic = (() => {
         viewportLeft: 0
       }),
       onScroll: (handler) => listen(win, "scroll", handler),
-      onResize: (handler) => listen(win, "resize", handler)
+      /*
+       * The document's own height counts as a resize, not just the window's.
+       *
+       * `elementScrollRoot` has observed its element's size since it was written, for the reason
+       * stated three doc comments down: "images loading, fonts swapping, a container changing size,
+       * or content being inserted". Every one of those applies at least as strongly to the page
+       * itself, and the page root was the one that only listened for `window.resize` — so on any
+       * document with lazy-loaded media below the fold, every cached content offset silently drifted
+       * by however much the page grew after it was measured, with no epoch bump to correct it.
+       *
+       * Measured on `demo/scroll.html` (32,000px of lazy screenshots): the horizontal track's stage
+       * moved ~840px between page load and reaching it, which is a third of that effect's whole
+       * scroll range. Nothing was wrong with the maths; the number it was doing the maths on was
+       * taken before forty images existed.
+       */
+      onResize: (handler) => observeSize(win.document.documentElement, win, handler)
     };
   }
   function elementScrollRoot(el, win) {
@@ -1322,7 +1342,7 @@ var kuinetic = (() => {
     flushComputedAnimationName(el);
     ledger.set("animation-name", name);
   }
-  function createCssInstance(el, ledger, animationNames) {
+  function createCssInstance(el, ledger, animationNames, scrubbed = false) {
     const ownedNames = new Set(animationNames);
     let settle2;
     let finished = new Promise((resolve) => {
@@ -1341,6 +1361,10 @@ var kuinetic = (() => {
         finished = new Promise((resolve) => {
           settle2 = resolve;
         });
+        if (scrubbed) {
+          settle2?.();
+          return;
+        }
         let animations = ownedAnimationsOf(el, ownedNames);
         if (!activatedBefore) {
           restartCssAnimation(el, ledger);
@@ -1373,6 +1397,9 @@ var kuinetic = (() => {
       }
     };
   }
+  function continuousSetup(cleanup) {
+    return { cleanup, continuous: true };
+  }
   function cleanupOf(result) {
     if (result === void 0) return void 0;
     return typeof result === "function" ? result : result.cleanup;
@@ -1389,7 +1416,7 @@ var kuinetic = (() => {
     return createJsInstance({
       activate() {
         running = setup();
-        if (typeof running === "function") return;
+        if (typeof running === "function" || "continuous" in running) return;
         const work = running.finished;
         finished = new Promise((resolve) => {
           settle2 = resolve;
@@ -1398,11 +1425,14 @@ var kuinetic = (() => {
       },
       cancel: teardown,
       finish() {
-        if (typeof running === "object") running.finish?.();
+        if (typeof running === "object" && "finish" in running) running.finish?.();
         settle2?.();
       },
       destroy: teardown,
-      finished: () => finished
+      finished: () => finished,
+      // Only an explicit marker counts. A bare `Cleanup` deliberately does not — see
+      // `ContinuousSetup` above for why the two cannot be told apart by shape.
+      continuous: () => typeof running === "object" && "continuous" in running
     });
   }
   function deferPrepare(setup) {
@@ -1426,6 +1456,9 @@ var kuinetic = (() => {
       get finished() {
         return hooks.finished?.() ?? Promise.resolve();
       },
+      get continuous() {
+        return hooks.continuous?.() ?? false;
+      },
       destroy() {
         active = false;
         hooks.destroy();
@@ -1437,6 +1470,7 @@ var kuinetic = (() => {
   function createStyleLedger(el) {
     const style = el.style;
     const previous = /* @__PURE__ */ new Map();
+    const authoredStyleAttribute = el.hasAttribute("style");
     function remember(property) {
       if (previous.has(property)) return;
       const existing = style.getPropertyValue(property);
@@ -1454,6 +1488,8 @@ var kuinetic = (() => {
           else style.setProperty(property, value);
         }
         previous.clear();
+        if (!authoredStyleAttribute && style.length === 0 && !el.getAttribute("style"))
+          el.removeAttribute("style");
       },
       owned: () => [...previous.keys()]
     };
@@ -1487,6 +1523,8 @@ var kuinetic = (() => {
         index++;
       }
     }
+    ;
+    group.style.setProperty("--kui-stagger-count", String(Math.max(index, 1)));
   }
   function applyStagger(root) {
     const selector = `[${ATTR.stagger}]`;
@@ -1498,12 +1536,14 @@ var kuinetic = (() => {
   function planStyles(input) {
     const { plan, config, capabilities, respectReducedMotion } = input;
     const reduce = respectReducedMotion && capabilities.reducedMotion;
-    const useNativeTimeline = supportsTimeline(config.timeline, capabilities) && plan.supportedTimelines.includes(config.timeline);
+    const scrubbed = config.timeline === "pin" && plan.supportedTimelines.includes("pin");
+    const useNativeTimeline = !scrubbed && supportsTimeline(config.timeline, capabilities) && plan.supportedTimelines.includes(config.timeline);
     const properties = { ...plan.vars, ...plan.declarations };
     Object.assign(properties, timelineProperties(config, capabilities, useNativeTimeline));
     const hasCssAnimation = Object.keys(plan.declarations).length > 0;
     const gate = resolveGate({
       useNativeTimeline,
+      scrubbed: scrubbed && hasCssAnimation,
       reduce,
       activation: config.activation,
       // JS effects are gated too. They emit no `animation` declaration, so only the play-state
@@ -1518,7 +1558,7 @@ var kuinetic = (() => {
       // already applied under reduced motion.
       unsupportedTransform: needsIndividualTransforms(plan.channels, capabilities)
     });
-    if (gate === "deferred") properties["animation-play-state"] = "paused";
+    if (gate === "deferred" || gate === "scrubbed") properties["animation-play-state"] = "paused";
     return {
       properties,
       attributes: {
@@ -1542,6 +1582,7 @@ var kuinetic = (() => {
   }
   function resolveGate(input) {
     if (input.useNativeTimeline) return "native-timeline";
+    if (input.scrubbed) return "scrubbed";
     if (!input.hasWork) return "immediate";
     if (input.reduce || input.activation === "load" || input.unsupportedTransform) return "immediate";
     return "deferred";
@@ -1722,7 +1763,9 @@ var kuinetic = (() => {
       this.liveElements.add(el);
       if (Object.keys(stylePlan.properties).some((property) => property.startsWith("animation-"))) {
         const animationNames = (plan.declarations["animation-name"] ?? "").split(",").map((name) => name.trim()).filter(Boolean);
-        state.instances.push(createCssInstance(el, ledger, animationNames));
+        state.instances.push(
+          createCssInstance(el, ledger, animationNames, stylePlan.gate === "scrubbed")
+        );
       }
       state.instances.push(
         ...this.jsEffectPreparer.prepare({ el, plan, signal: controller.signal, ledger })
@@ -1752,10 +1795,20 @@ var kuinetic = (() => {
         this.activate(el);
         return;
       }
-      state.controller.signal.addEventListener(
-        "abort",
-        this.binder.bind(el, stylePlan.activation, config.threshold, () => this.activate(el))
+      const releaseBinding = this.binder.bind(
+        el,
+        stylePlan.activation,
+        config.threshold,
+        () => this.activate(el)
       );
+      let released = false;
+      const releaseOnce = () => {
+        if (released) return;
+        released = true;
+        releaseBinding();
+      };
+      state.controller.signal.addEventListener("abort", releaseOnce);
+      if (stylePlan.activation === "enter") state.releaseActivation = releaseOnce;
     }
     /**
      * Start a deferred animation.
@@ -1775,6 +1828,8 @@ var kuinetic = (() => {
     activate(el) {
       const state = this.states.get(el);
       if (!state || state.status === "running") return;
+      state.releaseActivation?.();
+      state.releaseActivation = void 0;
       state.status = "running";
       state.attributes.set(ATTR.state, "running");
       const started = state.instances.filter((instance) => this.startInstance(instance, el));
@@ -1783,7 +1838,9 @@ var kuinetic = (() => {
         state.attributes.set(ATTR.state, "failed");
         return;
       }
-      void Promise.all(started.map((instance) => instance.finished)).then(() => {
+      const timed = started.filter((instance) => !instance.continuous);
+      if (timed.length === 0 && started.length > 0) return;
+      void Promise.all(timed.map((instance) => instance.finished)).then(() => {
         if (this.states.get(el) !== state || state.status !== "running") return;
         state.status = "finished";
         state.attributes.set(ATTR.state, "finished");
@@ -1972,7 +2029,18 @@ var kuinetic = (() => {
     background: "background",
     color: "color",
     stroke: "stroke",
-    text: "text"
+    text: "text",
+    /**
+     * Skew is the one transform CSS never gave an independent property to — there is no `skew:`
+     * beside `translate:`/`rotate:`/`scale:`, so it can only be written through the `transform`
+     * shorthand. That makes it its own channel: anything writing `transform` clobbers the whole
+     * shorthand, so every primitive that does is on this channel, whatever the transform is for.
+     * `scroll-skew` is one member; `flip-face` (`effects/three-d`) and `flip-3d`
+     * (`effects/catalog/core`, the `flip-in-*`/`flip-out-*` family) are the other two — both need
+     * the `perspective()` transform *function* for an element to have depth on itself, which
+     * likewise only exists inside `transform`.
+     */
+    skew: "skew"
   };
   function inertInstance(destroy = () => {
   }) {
@@ -1989,9 +2057,13 @@ var kuinetic = (() => {
   }
 
   // src/effects/shared.ts
+  var TRIGGER_DELAY_PARAM = {
+    delay: { type: "time", default: "0ms", cssProperty: "--kui-delay" }
+  };
+  var TIMELINE_AGNOSTIC = ["time", "view", "scroll", "pin"];
   var COMMON = {
     duration: { type: "time", default: "600ms", cssProperty: "--kui-duration" },
-    delay: { type: "time", default: "0ms", cssProperty: "--kui-delay" },
+    ...TRIGGER_DELAY_PARAM,
     ease: { type: "easing", default: "ease-out", cssProperty: "--kui-ease" },
     stagger: { type: "time", default: "0ms", cssProperty: "--kui-stagger" }
   };
@@ -2019,13 +2091,27 @@ var kuinetic = (() => {
   // src/effects/catalog/ambient.ts
   var drift = {
     duration: { type: "time", default: "10s", cssProperty: "--kui-duration" },
-    ease: { type: "easing", default: "ease-in-out", cssProperty: "--kui-ease" }
+    ease: { type: "easing", default: "ease-in-out", cssProperty: "--kui-ease" },
+    from: { type: "color", default: "", cssProperty: "--kui-ambient-c1" },
+    to: { type: "color", default: "", cssProperty: "--kui-ambient-c2" }
+  };
+  var tint = {
+    duration: { type: "time", default: "10s", cssProperty: "--kui-duration" },
+    ease: { type: "easing", default: "ease-in-out", cssProperty: "--kui-ease" },
+    from: { type: "color", default: "", cssProperty: "--kui-ambient-c1" }
   };
   var float = {
     duration: { type: "time", default: "4s", cssProperty: "--kui-duration" },
     ease: { type: "easing", default: "ease-in-out", cssProperty: "--kui-ease" },
     distance: { type: "length", default: "14px", cssProperty: "--kui-distance" }
   };
+  var orbit = {
+    duration: { type: "time", default: "3.5s", cssProperty: "--kui-duration" },
+    // `linear` by default, unlike every other ambient primitive: a continuous rotation that eases
+    // visibly stutters once per revolution, because the ease restarts at each iteration boundary.
+    ease: { type: "easing", default: "linear", cssProperty: "--kui-ease" },
+    angle: { type: "angle", default: "360deg", cssProperty: "--kui-to-angle" }
+  };
   var pulse = {
     duration: { type: "time", default: "2.2s", cssProperty: "--kui-duration" },
     ease: { type: "easing", default: "ease-in-out", cssProperty: "--kui-ease" },
@@ -2038,12 +2124,46 @@ var kuinetic = (() => {
       reducedMotion: "disable",
       perfClass: "continuous"
     }),
+    /*
+     * `gradient-rotate-border` and `gradient-border` are not background fills, and a second
+     * primitive is how this catalog says so — the same reason `ambient-tint` exists beside
+     * `ambient-gradient` above. Channels are per-primitive, so a different channel set means a
+     * different primitive; folding these into `ambient-gradient` would make `gradient-mesh` and
+     * `aurora` claim a mask and a box they never touch, and `aurora, pin` would start reporting a
+     * conflict that isn't there.
+     *
+     * What the ring rules actually write (`ambient.css`) beyond the gradient: `mask` +
+     * `mask-composite`, which subtract the element's own content box to leave a ring — the same
+     * physical property `media-mask` claims under the `'mask'` channel — and `position: relative`
+     * plus a `padding` that *is* the ring's thickness, which is a claim on the host's box in the
+     * sense `pin` and `background-media` already use `'layout'` for. Declared only as
+     * `background`, a `gradient-border, pin-section` pair composed silently while both decided the
+     * host's `position`, and `gradient-border, mask-reveal` while both wrote `mask`.
+     */
+    cssPrimitive("ambient-gradient-ring", [CHANNEL.background, "mask", "layout"], {
+      parameters: drift,
+      defaultActivation: "load",
+      reducedMotion: "disable",
+      perfClass: "continuous"
+    }),
+    cssPrimitive("ambient-tint", [CHANNEL.background], {
+      parameters: tint,
+      defaultActivation: "load",
+      reducedMotion: "disable",
+      perfClass: "continuous"
+    }),
     cssPrimitive("ambient-float", [CHANNEL.translate], {
       parameters: float,
       defaultActivation: "load",
       reducedMotion: "disable",
       perfClass: "continuous"
     }),
+    cssPrimitive("ambient-orbit", [CHANNEL.rotate], {
+      parameters: orbit,
+      defaultActivation: "load",
+      reducedMotion: "disable",
+      perfClass: "continuous"
+    }),
     cssPrimitive("ambient-pulse", [CHANNEL.scale, CHANNEL.opacity], {
       parameters: pulse,
       defaultActivation: "load",
@@ -2056,49 +2176,58 @@ var kuinetic = (() => {
     { name: "aurora", primitive: "ambient-gradient", keyframes: "kui-aurora" },
     {
       name: "gradient-rotate-border",
-      primitive: "ambient-gradient",
+      primitive: "ambient-gradient-ring",
       keyframes: "kui-gradient-rotate-border",
       params: { duration: "6s", ease: "linear" }
     },
+    {
+      // Not `gradient`: this rule masks its own content box away (`mask-composite: exclude`) to leave
+      // a ring, so putting the name on real content deletes the content. `-border` says that out loud,
+      // matching `gradient-rotate-border` and `beam-border`.
+      name: "gradient-border",
+      primitive: "ambient-gradient-ring",
+      keyframes: "kui-gradient-border",
+      params: { duration: "6s", ease: "linear" }
+    },
     {
       name: "noise-overlay",
-      primitive: "ambient-gradient",
+      primitive: "ambient-tint",
       keyframes: "kui-noise-overlay",
       params: { duration: "650ms", ease: "steps(6)" }
     },
     {
       name: "scanline",
-      primitive: "ambient-gradient",
+      primitive: "ambient-tint",
       keyframes: "kui-scanline",
       params: { duration: "3.5s", ease: "linear" }
     },
     {
       name: "dot-grid-drift",
-      primitive: "ambient-gradient",
+      primitive: "ambient-tint",
       keyframes: "kui-dot-grid-drift",
       params: { duration: "16s", ease: "linear" }
     },
     {
       name: "line-grid-drift",
-      primitive: "ambient-gradient",
+      primitive: "ambient-tint",
       keyframes: "kui-line-grid-drift",
       params: { duration: "16s", ease: "linear" }
     },
     {
       name: "starfield",
-      primitive: "ambient-gradient",
+      primitive: "ambient-tint",
       keyframes: "kui-starfield",
       params: { duration: "40s", ease: "linear" }
     },
     {
       name: "spotlight-follow",
-      primitive: "ambient-gradient",
+      primitive: "ambient-tint",
       keyframes: "kui-spotlight-follow",
       params: { duration: "9s" }
     },
     {
       name: "wave-blob",
-      primitive: "ambient-gradient",
+      primitive: "ambient-tint",
       keyframes: "kui-wave-blob",
       params: { duration: "12s" }
     },
@@ -2115,6 +2244,7 @@ var kuinetic = (() => {
       keyframes: "kui-floating-shapes",
       params: { duration: "6s", distance: "10px" }
     },
+    { name: "orbit", primitive: "ambient-orbit", keyframes: "kui-orbit" },
     { name: "glow-pulse", primitive: "ambient-pulse", keyframes: "kui-glow-pulse" }
   ];
   function registerAmbient(registry) {
@@ -2431,6 +2561,13 @@ var kuinetic = (() => {
   var liftParams = {
     distance: { type: "length", default: "6px", cssProperty: "--kui-lift-distance" }
   };
+  var popParams = {
+    scale: { type: "number", default: "1.06", cssProperty: "--kui-pop-scale", finite: true, minimum: 0 }
+  };
+  var beamParams = {
+    color: { type: "color", default: "", cssProperty: "--kui-beam-border-c1" },
+    outset: { type: "length", default: "", cssProperty: "--kui-beam-border-outset" }
+  };
   function hoverPrimitive(id, channels, extraParams = {}) {
     return {
       id,
@@ -2452,12 +2589,13 @@ var kuinetic = (() => {
   }
   var HOVER_PRIMITIVES = [
     hoverPrimitive("lift", ["translate"], liftParams),
+    hoverPrimitive("pop", ["scale"], popParams),
     hoverPrimitive("lift-shadow", ["translate", "shadow"], liftParams),
     hoverPrimitive("shine-sweep", ["sweep"]),
     hoverPrimitive("split-flap", ["rotate"]),
     hoverPrimitive("border-draw", ["border"]),
     hoverPrimitive("border-glow", ["shadow"]),
-    hoverPrimitive("beam-border", ["border"]),
+    hoverPrimitive("beam-border", ["border"], beamParams),
     hoverPrimitive("underline-slide", ["scale"]),
     hoverPrimitive("underline-center", ["scale"]),
     hoverPrimitive("icon-wiggle", ["rotate"]),
@@ -2473,7 +2611,7 @@ var kuinetic = (() => {
       id: "beam-border-auto",
       renderer: "javascript",
       channels: ["border"],
-      parameters: hoverTiming,
+      parameters: { ...hoverTiming, ...beamParams },
       supportedTimelines: ["time"],
       supportedActivations: ["load"],
       defaultActivation: "load",
@@ -2762,12 +2900,344 @@ var kuinetic = (() => {
     return registry.registerPrimitives(INTERACTION_PRIMITIVES).registerPresets(INTERACTION_PRESETS);
   }
 
+  // src/effects/catalog/background-media.ts
+  var VIDEO_EXTENSIONS = /* @__PURE__ */ new Set(["mp4", "webm", "mov", "m4v", "ogv"]);
+  var VIDEO_PAGE_HOSTS = /* @__PURE__ */ new Set([
+    "youtube.com",
+    "www.youtube.com",
+    "m.youtube.com",
+    "youtube-nocookie.com",
+    "www.youtube-nocookie.com",
+    "youtu.be",
+    "www.youtu.be"
+  ]);
+  function normalizeUrl(value) {
+    const stripped = value.replace(/[\t\n\r]/g, "");
+    let start = 0;
+    while (start < stripped.length && stripped.charCodeAt(start) <= 32) start += 1;
+    return stripped.slice(start);
+  }
+  function hostOf(value) {
+    const withoutScheme = normalizeUrl(value).replace(/^[a-z][a-z0-9+.-]*:/i, "").replace(/^\/\//, "");
+    const end = withoutScheme.search(/[/?#]/);
+    const authority = end === -1 ? withoutScheme : withoutScheme.slice(0, end);
+    return authority.slice(authority.lastIndexOf("@") + 1).toLowerCase();
+  }
+  function isVideoPageUrl(value) {
+    return VIDEO_PAGE_HOSTS.has(hostOf(value));
+  }
+  var FOCAL_POINTS = {
+    center: "50% 50%",
+    top: "50% 0%",
+    bottom: "50% 100%",
+    left: "0% 50%",
+    right: "100% 50%",
+    "top-left": "0% 0%",
+    "top-right": "100% 0%",
+    "bottom-left": "0% 100%",
+    "bottom-right": "100% 100%"
+  };
+  var FOCAL_POINT_NAMES = Object.keys(FOCAL_POINTS);
+  function focalPosition(focus) {
+    return FOCAL_POINTS[focus] ?? FOCAL_POINTS.center;
+  }
+  function paintsOverlay(options) {
+    return options.overlay !== "transparent" && options.overlayOpacity > 0;
+  }
+  function isVideoSource(src) {
+    const path = src.split("?")[0].split("#")[0];
+    const dot = path.lastIndexOf(".");
+    if (dot <= path.lastIndexOf("/")) return false;
+    return VIDEO_EXTENSIONS.has(path.slice(dot + 1).toLowerCase());
+  }
+  var ALLOWED_SCHEMES = /* @__PURE__ */ new Set(["http", "https"]);
+  function schemeOf(value) {
+    const match = /^([a-z][a-z0-9+.-]*):/i.exec(normalizeUrl(value));
+    return match ? match[1].toLowerCase() : "";
+  }
+  function mediaSource(authored, name, ctx) {
+    if (!authored) return authored;
+    if (isVideoPageUrl(authored)) {
+      ctx.warn(
+        `background-media "${name}": "${authored}" is a video *page*, not a media file \u2014 a YouTube URL cannot be played by <video> and needs an iframe embed instead. Point "${name}" at an .mp4/.webm file, or use a YouTube facade alongside this effect.`
+      );
+      return "";
+    }
+    const scheme = schemeOf(authored);
+    if (!scheme || ALLOWED_SCHEMES.has(scheme)) return authored;
+    ctx.warn(
+      `background-media "${name}": "${scheme}:" URLs are not allowed \u2014 use https:, http:, or a path such as "/media/hero.mp4".`
+    );
+    return "";
+  }
+  function styleLayer(node) {
+    const { style } = node;
+    style.setProperty("position", "absolute");
+    style.setProperty("top", "0");
+    style.setProperty("left", "0");
+    style.setProperty("width", "100%");
+    style.setProperty("height", "100%");
+    style.setProperty("border-radius", "inherit");
+    style.setProperty("pointer-events", "none");
+    style.setProperty("z-index", "-1");
+  }
+  function createOverlay(doc, options) {
+    const scrim = doc.createElement("div");
+    styleLayer(scrim);
+    scrim.style.setProperty("background", options.overlay);
+    scrim.style.setProperty("opacity", String(options.overlayOpacity));
+    scrim.setAttribute("aria-hidden", "true");
+    return scrim;
+  }
+  function createVideo(doc, options) {
+    const video = doc.createElement("video");
+    video.muted = true;
+    video.setAttribute("muted", "");
+    video.playsInline = true;
+    video.setAttribute("playsinline", "");
+    video.loop = options.loop;
+    video.defaultPlaybackRate = options.rate;
+    video.playbackRate = options.rate;
+    video.preload = "metadata";
+    if (options.poster) video.poster = options.poster;
+    video.src = options.src;
+    return video;
+  }
+  function play2(video) {
+    const started = video.play();
+    if (started) void started.catch(() => {
+    });
+  }
+  function startPlayback(video, win, options) {
+    if (options.reducedMotion || options.autoplay === "never") return () => {
+    };
+    if (options.autoplay === "always") {
+      play2(video);
+      return () => {
+        if (!video.paused) video.pause();
+      };
+    }
+    return autoplayInView(video, win);
+  }
+  function createImage(doc, options) {
+    const image = doc.createElement("img");
+    image.alt = "";
+    image.decoding = "async";
+    image.src = options.src;
+    return image;
+  }
+  function autoplayInView(video, win) {
+    const Observer = win.IntersectionObserver;
+    if (!Observer) return () => {
+    };
+    const observer = new Observer(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) play2(video);
+          else if (!video.paused) video.pause();
+        }
+      },
+      { threshold: 0 }
+    );
+    observer.observe(video);
+    return () => {
+      observer.disconnect();
+      if (!video.paused) video.pause();
+    };
+  }
+  function installBackgroundMedia(el, ctx, options) {
+    const doc = el.ownerDocument;
+    const video = isVideoSource(options.src) ? createVideo(doc, options) : null;
+    const node = video ?? createImage(doc, options);
+    styleLayer(node);
+    node.style.setProperty("object-fit", options.fit);
+    node.style.setProperty("object-position", options.position);
+    node.setAttribute("aria-hidden", "true");
+    node.setAttribute("data-kui-background", "");
+    el.append(node);
+    const overlay = paintsOverlay(options) ? createOverlay(doc, options) : null;
+    if (overlay) {
+      overlay.setAttribute("data-kui-background-overlay", "");
+      el.append(overlay);
+    }
+    const stopPlayback = video ? startPlayback(video, ctx.win, options) : () => {
+    };
+    return {
+      remove: () => {
+        stopPlayback();
+        node.remove();
+        overlay?.remove();
+      }
+    };
+  }
+
+  // src/effects/catalog/media-shared.ts
+  var AXIS_DEGREES = { vertical: 0, horizontal: 90 };
+  var UNIT_DEGREES = { deg: 1, grad: 0.9, rad: 180 / Math.PI, turn: 360 };
+  var BAND_OVERLAP_PX = 1;
+  var STAGE_CLASS = "kui-slat-stage";
+  var SLAT_CLASS = "kui-slat-item";
+  var GOLDEN_RATIO_CONJUGATE = 0.6180339887498949;
+  function slatOrder(index, count, from) {
+    if (count <= 1) return 0;
+    switch (from) {
+      case "start":
+        return index;
+      case "end":
+        return count - 1 - index;
+      case "edges":
+        return Math.min(index, count - 1 - index);
+      case "random-ish":
+        return Math.floor(index * GOLDEN_RATIO_CONJUGATE % 1 * count);
+      case "alternate":
+      default:
+        return zigzagRank(index, count);
+    }
+  }
+  function zigzagRank(index, count) {
+    const fromStart = index;
+    const fromEnd = count - 1 - index;
+    const pair = Math.min(fromStart, fromEnd);
+    return fromStart <= fromEnd ? pair * 2 : pair * 2 + 1;
+  }
+  function slatAngleDegrees(authored, axis) {
+    const trimmed = authored.trim();
+    if (!trimmed) return AXIS_DEGREES[axis];
+    const match = /^(-?(?:\d+(?:\.\d+)?|\.\d+))(deg|rad|grad|turn)?$/.exec(trimmed);
+    if (!match) return AXIS_DEGREES[axis];
+    const value = Number(match[1]);
+    if (!Number.isFinite(value)) return AXIS_DEGREES[axis];
+    const unit = match[2] ?? "deg";
+    const degrees = value * UNIT_DEGREES[unit];
+    return (degrees % 180 + 180) % 180;
+  }
+  function slatTravelVector(angleDegrees) {
+    const theta = angleDegrees * Math.PI / 180;
+    return { x: -Math.sin(theta), y: Math.cos(theta) };
+  }
+  function slatBandClip(index, count, angleDegrees, box) {
+    const { width, height } = box;
+    const theta = angleDegrees * Math.PI / 180;
+    const nx = Math.cos(theta);
+    const ny = Math.sin(theta);
+    const { x: dx, y: dy } = slatTravelVector(angleDegrees);
+    const span = Math.abs(nx) * width + Math.abs(ny) * height;
+    const centreX = width / 2;
+    const centreY = height / 2;
+    const step = span / count;
+    const near = index * step - span / 2 - BAND_OVERLAP_PX;
+    const far = (index + 1) * step - span / 2 + BAND_OVERLAP_PX;
+    const reach = width + height;
+    const corner = (along, across) => `${(centreX + along * nx + across * dx).toFixed(2)}px ${(centreY + along * ny + across * dy).toFixed(2)}px`;
+    return `polygon(${corner(near, reach)}, ${corner(near, -reach)}, ${corner(far, -reach)}, ${corner(far, reach)})`;
+  }
+  function axisLabel(angleDegrees) {
+    if (angleDegrees === 0) return "vertical";
+    if (angleDegrees === 90) return "horizontal";
+    return "diagonal";
+  }
+  function syncStageToImage(stage, img, bands) {
+    const { slats, angleDegrees } = bands;
+    const width = img.offsetWidth;
+    const height = img.offsetHeight;
+    stage.style.top = `${img.offsetTop}px`;
+    stage.style.left = `${img.offsetLeft}px`;
+    stage.style.width = `${width}px`;
+    stage.style.height = `${height}px`;
+    slats.forEach((slat, index) => {
+      slat.style.clipPath = slatBandClip(index, slats.length, angleDegrees, { width, height });
+    });
+  }
+  function watchImageBox(stage, img, win, bands) {
+    const handler = () => syncStageToImage(stage, img, bands);
+    win.addEventListener("resize", handler, { passive: true });
+    const stopWindow = () => win.removeEventListener("resize", handler);
+    const ResizeObserverCtor = win.ResizeObserver;
+    if (!ResizeObserverCtor) return stopWindow;
+    const observer = new ResizeObserverCtor(handler);
+    observer.observe(img);
+    return () => {
+      stopWindow();
+      observer.disconnect();
+    };
+  }
+  function imagePaintStyle(img, win) {
+    const computed = win.getComputedStyle(img);
+    const position = computed.objectPosition || "50% 50%";
+    const fit = computed.objectFit;
+    if (fit === "cover") return { size: "cover", position };
+    if (fit === "contain" || fit === "scale-down") return { size: "contain", position };
+    if (fit === "none") return { size: "auto", position };
+    return { size: "100% 100%", position };
+  }
+  function installSlatStage(el, doc, win, options) {
+    const img = el.querySelector("img");
+    if (!img) return null;
+    const url = img.currentSrc || img.getAttribute("src") || "";
+    if (!url) return null;
+    const { count, angleDegrees, from, fold } = options;
+    const travel = slatTravelVector(angleDegrees);
+    const stage = doc.createElement("div");
+    stage.className = STAGE_CLASS;
+    stage.setAttribute("aria-hidden", "true");
+    stage.dataset.kuiSlatAxis = axisLabel(angleDegrees);
+    stage.dataset.kuiSlatAngle = String(angleDegrees);
+    stage.dataset.kuiSlatFold = String(fold);
+    stage.style.setProperty("--kui-slat-count", String(count));
+    stage.style.setProperty("--kui-slat-dx", travel.x.toFixed(4));
+    stage.style.setProperty("--kui-slat-dy", travel.y.toFixed(4));
+    const paint = imagePaintStyle(img, win);
+    const slats = [];
+    for (let index = 0; index < count; index++) {
+      const slat = doc.createElement("div");
+      slat.className = SLAT_CLASS;
+      slat.style.setProperty("--kui-slat-index", String(index));
+      slat.style.setProperty("--kui-i", String(slatOrder(index, count, from)));
+      slat.style.backgroundImage = `url("${url}")`;
+      slat.style.backgroundSize = paint.size;
+      slat.style.backgroundPosition = paint.position;
+      stage.append(slat);
+      slats.push(slat);
+    }
+    el.append(stage);
+    const bands = { slats, angleDegrees };
+    syncStageToImage(stage, img, bands);
+    const stopWatching = watchImageBox(stage, img, win, bands);
+    const imageStyles = createStyleLedger(img);
+    imageStyles.set("visibility", "hidden");
+    return {
+      stage,
+      slats,
+      restore: () => {
+        stopWatching();
+        imageStyles.restore();
+        stage.remove();
+      }
+    };
+  }
+  function applySlatTimingVars(stage, params) {
+    const { durationMs, delayMs, easing } = params.timing;
+    const duration = durationMs === void 0 ? params.text("duration", "500ms") : `${durationMs}ms`;
+    const delay = delayMs === void 0 ? params.text("delay", "0ms") : `${delayMs}ms`;
+    stage.style.setProperty("--kui-duration", duration);
+    stage.style.setProperty("--kui-delay", delay);
+    stage.style.setProperty("--kui-ease", easing ?? params.text("ease", "ease-out"));
+    stage.style.setProperty("--kui-stagger", params.text("stagger", "60ms"));
+  }
+  function slatAssembleFinishMs(params, count) {
+    if (count === 0) return 0;
+    const durationMs = params.timing.durationMs ?? params.ms("duration", 500);
+    const delayMs = params.timing.delayMs ?? params.ms("delay", 0);
+    const staggerMs = params.ms("stagger", 60);
+    return delayMs + (count - 1) * staggerMs + durationMs;
+  }
+
   // src/effects/catalog/media.ts
   var geometry = {
     distance: { type: "length", default: "24px", cssProperty: "--kui-distance" },
     scale: { type: "number", default: "1.12", cssProperty: "--kui-to-scale" }
   };
-  var MEDIA_PRIMITIVES = [
+  var MEDIA_CSS_PRIMITIVES = [
     cssPrimitive("media-wipe", [CHANNEL.clip]),
     cssPrimitive("media-mask", ["mask"], { perfClass: "paint" }),
     // Not `reducedMotion: 'disable'` — that policy means "no finite duration would make sense,
@@ -2788,33 +3258,66 @@ var kuinetic = (() => {
       defaultActivation: "hover",
       perfClass: "paint"
     }),
+    // `geometry.distance` only, not `...geometry`: `kui-blur-up` (media.css) reads `--kui-distance`
+    // and `--kui-blur` but never `--kui-to-scale` — this primitive doesn't even declare
+    // `CHANNEL.scale`. Spreading the whole shared object used to expose `scale:` as an
+    // apparently-valid, silently-inert parameter, the same shape `flip-3d`'s dead `perspective`
+    // parameter was (`entrance.css`'s comment on `kui-flip-in-x`).
     cssPrimitive("media-blur-up", [CHANNEL.translate, CHANNEL.filter], {
-      parameters: { ...geometry, blur: { type: "length", default: "16px", cssProperty: "--kui-blur" } },
+      parameters: {
+        distance: geometry.distance,
+        blur: { type: "length", default: "16px", cssProperty: "--kui-blur" }
+      },
       perfClass: "paint"
     }),
+    // No `defaultActivation` — same convention `core.ts`'s `parallax`/`parallax-scale`/
+    // `parallax-rotate`/`scroll-fade`/`desaturate`/`skew`/`progress`/`progress-stroke` already use
+    // for every other `timelines: ['view', 'scroll', ...]` primitive. `resolveActivation`
+    // (`animator.ts`) only consults `defaultActivation` when the author named no activation, and
+    // falls through to `element-config.ts`'s hardcoded `'enter'` when a primitive declares none.
+    // Setting it to `'manual'` here (matching `activations: ['manual']`) looked like the obviously
+    // correct pairing, but it is what actually broke the effect: `effectiveActivation`
+    // (`style-plan.ts`) only converts a stuck `'manual'` into `'enter'` when `config.timeline !==
+    // 'time'` — i.e. only once the author has actually written `timeline:view`/`timeline:scroll`.
+    // Authored bare (no `timeline:`, the sweep's own probe and the likely first thing anyone
+    // tries), `config.timeline` stays the default `'time'`, that conversion never fires, and the
+    // element sits at `data-kui-state="ready"` forever — which is also the state
+    // `entrance.css`'s `[data-kui-state='ready'] { --kui-distance: 0px !important; }` targets, so
+    // every sample read the same permanently-zeroed `--kui-distance`: not a paused animation, a
+    // zeroed one. `timeline:view`/`timeline:scroll` usage is unaffected either way, since a native
+    // timeline resolves to the `'native-timeline'` gate before activation is even consulted.
+    // `geometry.distance` only: `kui-image-parallax-frame` never reads `--kui-to-scale` and this
+    // primitive doesn't declare `CHANNEL.scale` — same dead-parameter shape as `media-blur-up` above.
     cssPrimitive("media-parallax-frame", [CHANNEL.translate], {
-      parameters: geometry,
+      parameters: { distance: geometry.distance },
       timelines: ["view", "scroll"],
       activations: ["manual"],
-      defaultActivation: "manual",
       reducedMotion: "disable"
     }),
+    // Its own `scale` parameter, not `geometry`: `kui-lightbox-open` opens from a fixed 0.92, never
+    // reading `--kui-to-scale` (or any `distance`, since this primitive doesn't animate position at
+    // all) — the whole shared object was dead weight here. Unlike `media-blur-up`/
+    // `media-parallax-frame`, this primitive *does* declare `CHANNEL.scale`, so the fix is to wire
+    // the keyframe up to a real parameter rather than remove the promise: `--kui-from-scale`, the
+    // same name and "starts at this scale, animates to 1" meaning `scale`/`scale-move`
+    // (`catalog/core.ts`) already use, so `lightbox-open scale:0.8` now does what it looks like it
+    // should. See `kui-lightbox-open` in `media.css`.
     cssPrimitive("media-lightbox", [CHANNEL.opacity, CHANNEL.scale], {
-      parameters: geometry
+      parameters: { scale: { type: "number", default: "0.92", cssProperty: "--kui-from-scale" } }
     })
   ];
-  var MEDIA_PRESETS = [
-    { name: "wipe-up", primitive: "media-wipe", keyframes: "kui-wipe-up" },
-    { name: "wipe-down", primitive: "media-wipe", keyframes: "kui-wipe-down" },
-    { name: "wipe-left", primitive: "media-wipe", keyframes: "kui-wipe-left" },
-    { name: "wipe-right", primitive: "media-wipe", keyframes: "kui-wipe-right" },
-    { name: "wipe-circle", primitive: "media-wipe", keyframes: "kui-wipe-circle" },
-    { name: "wipe-diagonal", primitive: "media-wipe", keyframes: "kui-wipe-diagonal" },
-    { name: "mask-reveal", primitive: "media-mask", keyframes: "kui-mask-reveal" },
-    { name: "curtain-reveal", primitive: "media-wipe", keyframes: "kui-curtain-reveal" },
+  var MEDIA_CSS_PRESETS = [
+    { name: "wipe-up", primitive: "media-wipe", keyframes: "kui-wipe-up", cloak: true },
+    { name: "wipe-down", primitive: "media-wipe", keyframes: "kui-wipe-down", cloak: true },
+    { name: "wipe-left", primitive: "media-wipe", keyframes: "kui-wipe-left", cloak: true },
+    { name: "wipe-right", primitive: "media-wipe", keyframes: "kui-wipe-right", cloak: true },
+    { name: "wipe-circle", primitive: "media-wipe", keyframes: "kui-wipe-circle", cloak: true },
+    { name: "wipe-diagonal", primitive: "media-wipe", keyframes: "kui-wipe-diagonal", cloak: true },
+    { name: "mask-reveal", primitive: "media-mask", keyframes: "kui-mask-reveal", cloak: true },
+    { name: "curtain-reveal", primitive: "media-wipe", keyframes: "kui-curtain-reveal", cloak: true },
     { name: "ken-burns", primitive: "media-ken-burns", keyframes: "kui-ken-burns" },
     { name: "ken-burns-out", primitive: "media-ken-burns", keyframes: "kui-ken-burns-out" },
-    { name: "blur-up", primitive: "media-blur-up", keyframes: "kui-blur-up" },
+    { name: "blur-up", primitive: "media-blur-up", keyframes: "kui-blur-up", cloak: true },
     { name: "duotone-hover", primitive: "media-filter", keyframes: "kui-duotone-hover" },
     { name: "grayscale-hover", primitive: "media-filter", keyframes: "kui-grayscale-hover" },
     { name: "saturate-hover", primitive: "media-filter", keyframes: "kui-saturate-hover" },
@@ -2826,14 +3329,316 @@ var kuinetic = (() => {
     { name: "before-after-wipe", primitive: "media-wipe", keyframes: "kui-before-after-wipe" },
     { name: "lightbox-open", primitive: "media-lightbox", keyframes: "kui-lightbox-open" }
   ];
+  var slatParams = {
+    slats: {
+      type: "number",
+      default: "8",
+      cssProperty: "--kui-slats",
+      minimum: 2,
+      maximum: 24,
+      integer: true
+    },
+    axis: {
+      type: "keyword",
+      default: "vertical",
+      cssProperty: "--kui-axis",
+      values: ["vertical", "horizontal"]
+    },
+    /*
+     * The general form of `axis:`, in degrees: `0deg` is `axis:vertical`, `90deg` is
+     * `axis:horizontal`, and anything between cuts the picture into diagonal bands. An authored
+     * angle wins; leaving it off reads `axis:`, so every existing attribute keeps its meaning.
+     *
+     * `text`, not `angle`, for one reason: `readParams` pre-fills every declared parameter with its
+     * schema default, so a typed default is indistinguishable from an authored value and there would
+     * be no way to tell `angle:0deg` from "no angle, use the axis". An empty default is only possible
+     * on a type that is never written to a stylesheet, which is exactly what `text` is for — and this
+     * value never reaches CSS anyway. `slatAngleDegrees` does the parsing and the range clamp.
+     */
+    angle: { type: "text", default: "", cssProperty: "--kui-slat-angle" },
+    from: {
+      type: "keyword",
+      default: "alternate",
+      cssProperty: "--kui-from",
+      values: ["alternate", "start", "end", "edges", "random-ish"]
+    },
+    fold: { type: "keyword", default: "false", cssProperty: "--kui-fold", values: ["true", "false"] },
+    duration: { type: "time", default: "500ms", cssProperty: "--kui-duration" },
+    ...TRIGGER_DELAY_PARAM,
+    ease: { type: "easing", default: "ease-out", cssProperty: "--kui-ease" },
+    stagger: { type: "time", default: "60ms", cssProperty: "--kui-stagger" }
+  };
+  function prepareSlatAssemble(el, params, ctx) {
+    const doc = el.ownerDocument;
+    const count = Math.min(24, Math.max(2, Math.round(params.num("slats", 8))));
+    const axis = params.text("axis", "vertical");
+    const angleDegrees = slatAngleDegrees(params.text("angle", ""), axis);
+    const from = params.text("from", "alternate");
+    const fold = params.is("fold");
+    const node = el;
+    if (ctx.win.getComputedStyle(node).position === "static") ctx.style.set("position", "relative");
+    const built = installSlatStage(el, doc, ctx.win, { count, angleDegrees, from, fold });
+    if (!built) return () => {
+    };
+    const { stage } = built;
+    applySlatTimingVars(stage, params);
+    stage.classList.add("kui-slat-animating");
+    let settle2;
+    const finished = new Promise((resolve) => {
+      settle2 = resolve;
+    });
+    let landed = false;
+    const land = () => {
+      if (landed) return;
+      landed = true;
+      stage.classList.remove("kui-slat-animating");
+      built.restore();
+      settle2();
+    };
+    const timer = ctx.win.setTimeout(land, slatAssembleFinishMs(params, count));
+    return {
+      cleanup: () => {
+        ctx.win.clearTimeout(timer);
+        if (landed) return;
+        landed = true;
+        built.restore();
+      },
+      finished,
+      finish: () => {
+        ctx.win.clearTimeout(timer);
+        land();
+      }
+    };
+  }
+  var backgroundMediaParams = {
+    /*
+     * `text`, and same-origin-checked at the point of use rather than by the type — identical
+     * shape and identical reasoning to `media-scrub`'s own `src` (`scroll-mechanics/primitives.ts`).
+     * A URL has no lexical shape to validate against, and `type: 'text'` is the one type that never
+     * reaches a stylesheet, which is what makes accepting arbitrary path characters safe.
+     */
+    src: { type: "text", default: "", cssProperty: "--kui-src" },
+    /*
+     * The still a `<video>` shows before its first frame decodes. Not optional polish: without it a
+     * background clip paints as an empty box for as long as the network takes, and that box is the
+     * backdrop to the author's text — the one place on the page where a flash of nothing is most
+     * visible. Every background video in this repo's own demo pages is authored with one.
+     */
+    poster: { type: "text", default: "", cssProperty: "--kui-poster" },
+    /*
+     * `fill`, `none` and `scale-down` are deliberately absent. `fill` is the only `object-fit` value
+     * that distorts — it stretches the picture to the box rather than cropping it — and the standing
+     * rule for imagery in this project is to crop, never stretch. The other two leave the media at
+     * its intrinsic size inside a box sized to something else, which for a *backdrop* is a gap, not
+     * a layout. Adding them would be offering three ways to get a broken background.
+     */
+    fit: {
+      type: "keyword",
+      default: "cover",
+      cssProperty: "--kui-fit",
+      values: ["cover", "contain"]
+    },
+    /*
+     * Which part of the picture a `cover` crop keeps. Nine named points rather than a free
+     * `object-position` string, because a free string would have to be `type: 'text'` — the one type
+     * that is explicitly never written to a stylesheet (see `core/params.ts`) — and this value is
+     * written to one. A keyword list is validated against its own `values`, so the author gets real
+     * focal control and the CSS surface stays closed.
+     */
+    focus: {
+      type: "keyword",
+      default: "center",
+      cssProperty: "--kui-focus",
+      values: FOCAL_POINT_NAMES
+    },
+    /*
+     * The scrim. This is the parameter that makes the whole effect usable, because the point of a
+     * backdrop here is animated text on top of it, and text over unmodified footage is illegible
+     * about half the time — a light frame arrives and the headline vanishes for those seconds.
+     *
+     * `type: 'color'` so it goes through the same validator every other colour does. `transparent`
+     * as the default rather than an empty string for the same reason: `''` is not a colour, and a
+     * default that its own type would reject is a lie the schema cannot catch. It is also the honest
+     * spelling of "no scrim", and no scrim node is created for it.
+     */
+    overlay: { type: "color", default: "transparent", cssProperty: "--kui-overlay" },
+    /*
+     * Separate from the colour rather than folded into it. `overlay:rgb(0 0 0 / 45%)` does parse —
+     * the tokenizer is paren-aware — but `overlay:black overlay-opacity:45%` is the spelling someone
+     * reaches for while tuning legibility, and tuning is exactly what this value is for.
+     */
+    "overlay-opacity": { type: "percentage", default: "100%", cssProperty: "--kui-overlay-opacity" },
+    /*
+     * The opt-out for the play-while-visible behaviour. `in-view` pairs the clip with the viewport
+     * and is right for a long section. `always` is for a short hero clip that must never be caught
+     * mid-stall by a visibility heuristic. `never` installs the clip and leaves it on its poster,
+     * which is also where any mode lands under a reduced-motion preference.
+     */
+    autoplay: {
+      type: "keyword",
+      default: "in-view",
+      cssProperty: "--kui-autoplay",
+      values: ["in-view", "always", "never"]
+    },
+    /*
+     * Bounded at both ends: `0` is a clip that is loaded, decoding, and permanently frozen — worse
+     * than `autoplay:never`, which at least says so — and browsers stop honouring rates past roughly
+     * 4 anyway, so a larger number is a silent no-op rather than a faster clip.
+     */
+    rate: {
+      type: "number",
+      default: "1",
+      cssProperty: "--kui-rate",
+      finite: true,
+      minimum: 0.25,
+      maximum: 4
+    },
+    loop: { type: "keyword", default: "true", cssProperty: "--kui-loop", values: ["true", "false"] }
+    /*
+     * There is deliberately no `controls:`. The layer this primitive builds paints at `z-index: -1`
+     * behind the author's own children, so a native control bar there is focusable by keyboard and
+     * occluded by whatever the page happens to put over it — a player you can tab into and cannot
+     * see. A clip meant to be controlled is a content `<video controls>` the author writes, not a
+     * background one.
+     */
+  };
+  function prepareBackgroundMedia(el, params, ctx) {
+    const authored = params.text("src");
+    if (!authored) {
+      ctx.warn('background-media needs a "src:" \u2014 nothing installed');
+      return () => {
+      };
+    }
+    const src = mediaSource(authored, "src", ctx);
+    if (!src) return () => {
+    };
+    const node = el;
+    if (ctx.win.getComputedStyle(node).position === "static") ctx.style.set("position", "relative");
+    ctx.style.set("isolation", "isolate");
+    const layer = installBackgroundMedia(el, ctx, {
+      src,
+      poster: mediaSource(params.text("poster"), "poster", ctx),
+      fit: params.is("fit", "contain") ? "contain" : "cover",
+      position: focalPosition(params.text("focus", "center")),
+      overlay: params.text("overlay", "transparent"),
+      // `num` returns a percentage as a 0–1 ratio, which is exactly what `opacity` takes.
+      overlayOpacity: Math.min(1, Math.max(0, params.num("overlay-opacity", 1))),
+      autoplay: params.text("autoplay", "in-view"),
+      rate: params.num("rate", 1),
+      // `!is('loop', 'false')`, not `is('loop')`. Every other read here names its own fallback, and
+      // this one has to as well: `is()` takes no fallback argument, so a bare `is('loop')` is only
+      // true when something already filled the schema default in. That holds on the animator's path
+      // (`readEffectParams` pre-fills every declared parameter) and not on `createParams`, so the
+      // positive spelling silently defaulted a true-by-default parameter to false for any caller
+      // handing over raw values. Reading it as "loop unless explicitly told not to" states the
+      // default at the point of use, where it cannot drift.
+      loop: !params.is("loop", "false"),
+      reducedMotion: ctx.reducedMotion
+    });
+    return continuousSetup(layer.remove);
+  }
+  var MEDIA_JS_PRIMITIVES = [
+    {
+      id: "slat-assemble",
+      renderer: "javascript",
+      channels: [CHANNEL.opacity, CHANNEL.translate, CHANNEL.rotate],
+      parameters: slatParams,
+      supportedTimelines: ["time"],
+      supportedActivations: ["load", "enter", "hover", "focus", "click", "manual"],
+      defaultActivation: "enter",
+      perfClass: "dom-transform",
+      // Same reasoning as every JS-rendered primitive in `text.ts`: nothing here declares a CSS
+      // `animation-duration` the reduced-motion policy layer could shorten, and `disable` is what
+      // stops `installSlatStage`'s DOM surgery from ever running at all under reduced motion — the
+      // animator never calls `activate()`, so the wrapped `<img>` is simply left exactly as authored.
+      reducedMotion: "disable",
+      // Land()ing hands the picture back to the real `<img>` and tears down every slat — see
+      // `prepareSlatAssemble`'s `land()`. Declared, not assumed: see `restoresOnFinish`'s own comment
+      // in `core/types.ts` for why the catalog's default is the opposite of this.
+      restoresOnFinish: true,
+      prepare: deferPrepare(prepareSlatAssemble)
+    },
+    {
+      id: "background-media",
+      /*
+       * `media` is the same word `media-scrub` uses for "this effect owns what the element shows",
+       * and it is what makes `background-media, video-scrub` on one element a reported conflict
+       * rather than two effects silently fighting over the same picture.
+       *
+       * `layout` is claimed for the same reason `pin` claims it: preparation writes `position` and
+       * `isolation` on the *host*, which is a stacking-context claim on someone else's element. Left
+       * undeclared, `background-media, pin-section` composed silently while both decided what
+       * `position` the host has — the conflict detector cannot report a claim it was never told about.
+       */
+      channels: ["media", "layout"],
+      renderer: "javascript",
+      parameters: backgroundMediaParams,
+      // Not a claim to support four timelines — an abstention. A backdrop is not driven by progress
+      // of any kind and this primitive never reads `Timeline`; the list exists only so that
+      // `data-kui="background-media src:/hero.mp4, parallax"` plus a `timeline:view` survives
+      // `compile.ts`'s `intersect`. See `TIMELINE_AGNOSTIC` (`effects/shared.ts`), shared with the
+      // scroll-mechanics drivers, which abstain for the same reason.
+      supportedTimelines: TIMELINE_AGNOSTIC,
+      supportedActivations: ["load", "enter", "manual"],
+      /*
+       * `'load'`, not the catalog's usual `'enter'`, and this is the difference between working and
+       * not. A backdrop is the element's appearance, so gating it on an IntersectionObserver means a
+       * section that is already on screen at page load, one in a background tab (no IO callbacks
+       * fire at all until the tab is foregrounded), or one whose own box is still zero-area waits an
+       * unbounded time to have any background — and unlike a missed reveal, that is a visibly broken
+       * page. An author who *wants* a heavy clip deferred can still write `on:enter`.
+       */
+      defaultActivation: "load",
+      perfClass: "paint",
+      /*
+       * `'shorten'`, unlike every other JS-rendered primitive in this file and in `text.ts`, and
+       * deliberately so. `'disable'` means the animator never calls `activate()` under a reduced
+       * motion preference, which for an animation is exactly right and for this is not: it would
+       * leave the element with no backdrop at all rather than a calmer one. There is no CSS duration
+       * here for `'shorten'` to shorten, so the policy is inert and the effect installs normally;
+       * `ctx.reducedMotion` is then read inside, where it suppresses the one genuinely motion-y part
+       * — a clip's autoplay — and leaves the poster frame standing. See `autoplayInView`.
+       */
+      reducedMotion: "shorten",
+      prepare: deferPrepare(prepareBackgroundMedia)
+    }
+  ];
+  var MEDIA_JS_PRESETS = [
+    { name: "slat-assemble", primitive: "slat-assemble", cloak: true },
+    /*
+     * Two names, one primitive — the alias shape the catalog already uses everywhere (`pin-until`,
+     * `pin-spacer` and `stacking-cards` are three names over the one `pin` primitive; six `wipe-*`
+     * names share `media-wipe`). A preset row is the alias mechanism, so a second spelling costs a
+     * table entry and nothing else: no duplicated implementation to keep in sync, and both names
+     * resolve to the same `prepare`.
+     *
+     * No `cloak` on either: the pre-JS cloak rule hides an element until the runtime installs the
+     * effect's from-state, and this element is the author's own content. Cloaking it would blank
+     * their text for as long as the bundle takes to arrive, to hide a backdrop that has no
+     * from-state at all.
+     */
+    { name: "bg", primitive: "background-media" },
+    { name: "background", primitive: "background-media" }
+  ];
+  var MEDIA_PRIMITIVES = [...MEDIA_CSS_PRIMITIVES, ...MEDIA_JS_PRIMITIVES];
+  var MEDIA_PRESETS = [...MEDIA_CSS_PRESETS, ...MEDIA_JS_PRESETS];
   function registerMedia(registry) {
     return registry.registerPrimitives(MEDIA_PRIMITIVES).registerPresets(MEDIA_PRESETS);
   }
 
+  // src/effects/catalog/subtree-capture.ts
+  function captureChildren(el) {
+    const authored = Array.from(el.childNodes);
+    return () => {
+      el.replaceChildren(...authored);
+    };
+  }
+
   // src/effects/catalog/numbers-shared.ts
   var SR_ONLY_CLASS = "kui-sr-only";
   var DECORATIVE_CLASS = "kui-count-decorative";
   function installCountLayers(el, doc) {
+    const restoreChildren = captureChildren(el);
     const decorative = doc.createElement("span");
     decorative.setAttribute("aria-hidden", "true");
     decorative.className = DECORATIVE_CLASS;
@@ -2845,9 +3650,7 @@ var kuinetic = (() => {
     return {
       decorative,
       srOnly,
-      restore: () => {
-        el.textContent = srOnly.textContent;
-      }
+      restore: restoreChildren
     };
   }
   function easeOutCubic(t) {
@@ -2958,6 +3761,7 @@ var kuinetic = (() => {
   var REDUCED_MOTION_DURATION_MS = 1;
   var countParams = {
     duration: { type: "time", default: "1600ms", cssProperty: "--kui-duration" },
+    ...TRIGGER_DELAY_PARAM,
     from: { type: "number", default: "0", cssProperty: "--kui-from" },
     to: { type: "number", default: "100", cssProperty: "--kui-to" },
     decimals: {
@@ -2978,6 +3782,7 @@ var kuinetic = (() => {
   };
   var odometerParams = {
     duration: { type: "time", default: "1600ms", cssProperty: "--kui-duration" },
+    ...TRIGGER_DELAY_PARAM,
     from: { type: "number", default: "0", cssProperty: "--kui-from" },
     to: { type: "number", default: "100", cssProperty: "--kui-to" }
   };
@@ -3004,7 +3809,9 @@ var kuinetic = (() => {
   function tweenTimingFor(params, ctx) {
     return {
       durationMs: tweenDurationMs(params, ctx),
-      delayMs: Math.max(0, params.timing.delayMs ?? 0),
+      // Positional first, then the same-named parameter — the two-spellings rule `effectDurationMs`
+      // applies to `duration` just above, now applied to `delay` as well.
+      delayMs: Math.max(0, params.timing.delayMs ?? params.ms("delay", 0)),
       easing: resolveEasing(params.timing.easing, ctx.warn)
     };
   }
@@ -3157,7 +3964,12 @@ var kuinetic = (() => {
   ];
   var METER_PRIMITIVES = [
     cssPrimitive("stroke-sweep", [CHANNEL.stroke]),
-    cssPrimitive("meter-bar", [CHANNEL.scale]),
+    // `from` gives `progress-bar` a real knob on its start scale — it had none before. `--kui-bar-from`
+    // is also what the `[data-kui-fx~='progress-bar'][data-kui-state='ready']` gate in numbers.css
+    // neutralizes; see that rule's comment for the on:enter fix this parameter doubles as.
+    cssPrimitive("meter-bar", [CHANNEL.scale], {
+      parameters: { from: { type: "number", default: "0", cssProperty: "--kui-bar-from" } }
+    }),
     cssPrimitive("meter-segments", [CHANNEL.opacity]),
     cssPrimitive("meter-stars", [CHANNEL.clip])
   ];
@@ -3166,7 +3978,13 @@ var kuinetic = (() => {
     { name: "gauge-sweep", primitive: "stroke-sweep", keyframes: "kui-gauge-sweep" },
     { name: "donut-sweep", primitive: "stroke-sweep", keyframes: "kui-donut-sweep" },
     { name: "sparkline-draw", primitive: "stroke-sweep", keyframes: "kui-sparkline-draw" },
-    { name: "progress-bar", primitive: "meter-bar", keyframes: "kui-progress-bar" },
+    // `cloak: true`: `kui-progress-bar`'s `from { scale: 0 1 }` (numbers.css) is a zero-width box
+    // while paused, not just an invisible one — so while it waits it occupies no space in layout at
+    // all. Not, despite the tidier story, because an observer refuses to fire on it: Chromium was
+    // measured resolving a zero-area target's `intersectionRatio` to `1`. See numbers.css's
+    // `[data-kui-fx~='progress-bar'][data-kui-state='ready']` rule for the geometry half of the fix;
+    // `cloak` keeps the pre-JS and post-JS "waiting" look the same (invisible) either side of it.
+    { name: "progress-bar", primitive: "meter-bar", keyframes: "kui-progress-bar", cloak: true },
     { name: "progress-segments", primitive: "meter-segments", keyframes: "kui-progress-segments" },
     { name: "star-rating-fill", primitive: "meter-stars", keyframes: "kui-star-rating-fill" }
   ];
@@ -3181,6 +3999,7 @@ var kuinetic = (() => {
   var DECORATIVE_CLASS2 = "kui-split-decorative";
   function installSplitLayers(el, doc) {
     const originalText = el.textContent.trim();
+    const restoreChildren = captureChildren(el);
     const decorative = doc.createElement("span");
     decorative.setAttribute("aria-hidden", "true");
     decorative.className = DECORATIVE_CLASS2;
@@ -3192,9 +4011,7 @@ var kuinetic = (() => {
     return {
       decorative,
       originalText,
-      restore: () => {
-        el.textContent = originalText;
-      }
+      restore: restoreChildren
     };
   }
   function segmentGraphemes(text) {
@@ -3254,15 +4071,22 @@ var kuinetic = (() => {
   function appendCharSpans(container, doc, text) {
     const spans = [];
     let index = 0;
+    let wordWrapper = null;
     for (const grapheme of segmentGraphemes(text)) {
       if (grapheme.trim() === "") {
         container.append(doc.createTextNode(grapheme));
+        wordWrapper = null;
         continue;
       }
+      if (!wordWrapper) {
+        wordWrapper = doc.createElement("span");
+        wordWrapper.className = "kui-split-word";
+        container.append(wordWrapper);
+      }
       const span = doc.createElement("span");
       markItem(span, index);
       span.textContent = grapheme;
-      container.append(span);
+      wordWrapper.append(span);
       spans.push(span);
       index++;
     }
@@ -3309,7 +4133,13 @@ var kuinetic = (() => {
     return buckets.map((nodes, index) => {
       const line = doc.createElement("span");
       markItem(line, index, "kui-split-line");
-      for (const node of nodes) line.append(node);
+      for (const node of nodes) {
+        if (node instanceof HTMLElement) {
+          node.removeAttribute("class");
+          node.style.removeProperty("--kui-i");
+        }
+        line.append(node);
+      }
       container.append(line);
       return line;
     });
@@ -3362,14 +4192,43 @@ var kuinetic = (() => {
     distance: { type: "length", default: "32px", cssProperty: "--kui-distance" }
   };
   var TEXT_CSS_PRIMITIVES = [
-    cssPrimitive("text-shimmer", [CHANNEL.background], { reducedMotion: "disable" }),
+    // `color`, alongside `background`: both presets' unconditional rule sets `-webkit-text-fill-color:
+    // transparent` so the `background-image` gradient shows through the glyphs (the standard
+    // gradient-text technique). That is a real claim on the glyph fill, the same physical property
+    // `text-outline-fill` animates on its own `color` channel below — without this, the two looked
+    // disjoint to the compiler (`background` vs `stroke`+`color`) and composing them would let
+    // whichever applied last silently win the glyph fill instead of being flagged as a conflict.
+    cssPrimitive("text-shimmer", [CHANNEL.background, CHANNEL.color], { reducedMotion: "disable" }),
+    // `gradient-sweep` is the only one of the three `text-sweep`-family presets whose keyframe
+    // touches `-webkit-text-fill-color` (see text.css) — `highlight-sweep` and `underline-draw` only
+    // paint a `background-image`. Claiming `color` for all three made the compiler reject compositions
+    // like `underline-draw, text-outline-fill` as a glyph-fill conflict even though they touch disjoint
+    // properties. Split so only the preset that actually claims the fill declares the channel.
+    cssPrimitive("text-gradient-sweep", [CHANNEL.background, CHANNEL.color], { parameters: textSweepParams }),
     cssPrimitive("text-sweep", [CHANNEL.background], { parameters: textSweepParams }),
     cssPrimitive("text-outline-fill", [CHANNEL.stroke, CHANNEL.color]),
     cssPrimitive("var-weight", ["font"], { parameters: fontWeightParams }),
     cssPrimitive("var-width", ["font"], { parameters: fontWidthParams }),
     cssPrimitive("var-slant", ["font"], { parameters: fontSlantParams }),
+    /*
+     * `defaultActivation: 'load'` for the same reason every ambient primitive declares it, and it
+     * was missing here: a marquee is continuous motion, so `reducedMotion: 'disable'` is only half
+     * the rule `ambient.ts` spells out — the other half is starting on `load` rather than waiting on
+     * a scroll-triggered `enter`.
+     *
+     * Without it, a bare `data-kui="marquee 42s"` resolved to `enter`, which `style-plan.ts`'s
+     * `resolveGate` sends down the `deferred` path and stamps `animation-play-state: paused`. It
+     * compiled correctly, reported `data-kui-state="ready"`, and never ran — measured on a marquee
+     * fully in view, so this was not an observer that had simply not fired yet. Every page carrying
+     * one had to know to write `on:load`, which is exactly the kind of thing an author cannot be
+     * expected to guess.
+     *
+     * `marquee-scroll-linked` is unaffected: its position comes from `animation-timeline: scroll()`,
+     * not from an activation.
+     */
     cssPrimitive("text-marquee", [CHANNEL.translate], {
       timelines: ["time", "scroll"],
+      defaultActivation: "load",
       reducedMotion: "disable"
     }),
     cssPrimitive("redaction-reveal", [CHANNEL.clip]),
@@ -3377,7 +4236,7 @@ var kuinetic = (() => {
   ];
   var TEXT_CSS_PRESETS = [
     { name: "gradient-shimmer", primitive: "text-shimmer", keyframes: "kui-gradient-shimmer" },
-    { name: "gradient-sweep", primitive: "text-sweep", keyframes: "kui-gradient-sweep" },
+    { name: "gradient-sweep", primitive: "text-gradient-sweep", keyframes: "kui-gradient-sweep" },
     {
       name: "highlight-sweep",
       primitive: "text-sweep",
@@ -3414,7 +4273,7 @@ var kuinetic = (() => {
   }
   var splitTiming = {
     duration: { type: "time", default: "500ms", cssProperty: "--kui-duration" },
-    delay: { type: "time", default: "0ms", cssProperty: "--kui-delay" },
+    ...TRIGGER_DELAY_PARAM,
     ease: { type: "easing", default: "ease-out", cssProperty: "--kui-ease" },
     stagger: { type: "time", default: "30ms", cssProperty: "--kui-stagger" },
     unit: {
@@ -3432,6 +4291,11 @@ var kuinetic = (() => {
   };
   var motionParams = {
     stagger: { type: "time", default: "40ms", cssProperty: "--kui-stagger" },
+    // `duration`/`ease` are deliberately *not* declared beside the delay: text.css pins both for
+    // wave and jitter on a higher-specificity `[data-kui-split-fx='wave'] .kui-split-item` rule, so
+    // declaring them would advertise two knobs that the stylesheet then overrides. `animation-delay`
+    // is the one the phase-start rule leaves alone, which is what lets `applyStaggerVars` honour it.
+    ...TRIGGER_DELAY_PARAM,
     motion: {
       type: "keyword",
       default: "wave",
@@ -3441,10 +4305,15 @@ var kuinetic = (() => {
   };
   var typewriterParams = {
     step: { type: "time", default: "55ms", cssProperty: "--kui-step" },
-    loop: { type: "keyword", default: "false", cssProperty: "--kui-loop", values: ["true", "false"] }
+    loop: { type: "keyword", default: "false", cssProperty: "--kui-loop", values: ["true", "false"] },
+    ...TRIGGER_DELAY_PARAM
   };
   var scrambleParams = {
     step: { type: "time", default: "40ms", cssProperty: "--kui-step" },
+    // `duration` gets no such shared declaration: `stepMsFor` reads its authored-or-not distinction
+    // to decide between a whole-effect time and a per-tick `step:`, and a schema default would erase
+    // that distinction. A `0ms` delay default has no equivalent problem.
+    ...TRIGGER_DELAY_PARAM,
     revealEvery: {
       type: "number",
       default: "2",
@@ -3461,7 +4330,11 @@ var kuinetic = (() => {
   };
   var wordCyclerParams = {
     words: { type: "text", default: "", cssProperty: "--kui-words" },
-    interval: { type: "time", default: "2200ms", cssProperty: "--kui-interval" }
+    interval: { type: "time", default: "2200ms", cssProperty: "--kui-interval" },
+    // Load-bearing here, not just for symmetry: a cycler has no authored `duration` — `interval:`
+    // paces it — so the positional "duration then delay" slot only reached a delay when the author
+    // wrote a throwaway first value, `word-cycler 0ms 300ms`.
+    ...TRIGGER_DELAY_PARAM
   };
   function prepareSplitText(el, params, ctx) {
     const doc = el.ownerDocument;
@@ -3507,7 +4380,7 @@ var kuinetic = (() => {
       layers.decorative.textContent = graphemes.slice(0, count).join("");
     };
     const run = createStepRunner(ctx.win, {
-      delayMs: params.timing.delayMs ?? 0,
+      delayMs: params.timing.delayMs ?? params.ms("delay", 0),
       stepMs: stepMsFor(params, graphemes.length, 55),
       tick: () => {
         const step = nextTypeState(state, graphemes.length, loop2);
@@ -3531,6 +4404,16 @@ var kuinetic = (() => {
   function prepareScramble(el, params, ctx) {
     const charset = SCRAMBLE_CHARSETS[params.text("charset", "upper")];
     const revealEvery = Math.max(1, Math.round(params.num("revealEvery", 2)));
+    const node = el;
+    const authoredMinWidth = node.style.getPropertyValue("min-width");
+    const authoredMinHeight = node.style.getPropertyValue("min-height");
+    const restRect = el.getBoundingClientRect();
+    ctx.style.set("min-width", `${restRect.width}px`);
+    ctx.style.set("min-height", `${restRect.height}px`);
+    const releaseSizeLock = () => {
+      ctx.style.set("min-width", authoredMinWidth);
+      ctx.style.set("min-height", authoredMinHeight);
+    };
     const layers = installSplitLayers(el, el.ownerDocument);
     layers.decorative.classList.add("kui-scramble");
     const graphemes = segmentGraphemes(layers.originalText);
@@ -3540,26 +4423,31 @@ var kuinetic = (() => {
       layers.decorative.textContent = scrambledFrame(graphemes, resolved, charset, Math.random);
     };
     render();
+    const totalTicks = Math.max(1, graphemes.length * revealEvery);
     const run = createStepRunner(ctx.win, {
-      delayMs: params.timing.delayMs ?? 0,
-      stepMs: stepMsFor(params, graphemes.length * revealEvery, 40),
+      delayMs: params.timing.delayMs ?? params.ms("delay", 0),
+      stepMs: stepMsFor(params, totalTicks, Math.max(1, 700 / totalTicks)),
       tick: () => {
         ticks++;
         if (ticks % revealEvery === 0) resolved++;
         render();
-        return resolved >= graphemes.length;
+        const done = resolved >= graphemes.length;
+        if (done) releaseSizeLock();
+        return done;
       }
     });
     return {
       cleanup: () => {
         run.stop();
         layers.restore();
+        releaseSizeLock();
       },
       finished: run.finished,
       finish: () => {
         run.stop();
         resolved = graphemes.length;
         render();
+        releaseSizeLock();
       }
     };
   }
@@ -3567,12 +4455,12 @@ var kuinetic = (() => {
     const words = params.text("words", "").split("|").map((word) => word.trim()).filter(Boolean);
     if (words.length === 0) return () => {
     };
-    const original = el.textContent;
+    const restoreChildren = captureChildren(el);
     const swapMs = 150;
     let index = 0;
     el.textContent = words[0];
     const run = createStepRunner(ctx.win, {
-      delayMs: params.timing.delayMs ?? 0,
+      delayMs: params.timing.delayMs ?? params.ms("delay", 0),
       stepMs: params.ms("interval", 2200),
       tick: () => {
         el.classList.add("kui-word-cycler-swap");
@@ -3588,7 +4476,7 @@ var kuinetic = (() => {
       cleanup: () => {
         run.stop();
         el.classList.remove("kui-word-cycler-swap");
-        el.textContent = original;
+        restoreChildren();
       },
       finished: run.finished,
       finish: () => run.stop()
@@ -3620,13 +4508,16 @@ var kuinetic = (() => {
       perfClass: "continuous"
     })
   ];
+  var CHARS_STAGGER = "30ms";
+  var WORDS_STAGGER = "90ms";
+  var LINES_STAGGER = "160ms";
   var TEXT_JS_PRESETS = [
-    { name: "split-chars", primitive: "split-text", params: { unit: "chars", direction: "fade" } },
-    { name: "split-words", primitive: "split-text", params: { unit: "words", direction: "fade" } },
-    { name: "split-lines", primitive: "split-text", params: { unit: "lines", direction: "fade" } },
-    { name: "text-reveal-up", primitive: "split-text", params: { unit: "words", direction: "up" } },
-    { name: "text-reveal-down", primitive: "split-text", params: { unit: "words", direction: "down" } },
-    { name: "text-reveal-mask", primitive: "split-text", params: { unit: "lines", direction: "mask" } },
+    { name: "split-chars", primitive: "split-text", params: { unit: "chars", direction: "fade", stagger: CHARS_STAGGER } },
+    { name: "split-words", primitive: "split-text", params: { unit: "words", direction: "fade", stagger: WORDS_STAGGER } },
+    { name: "split-lines", primitive: "split-text", params: { unit: "lines", direction: "fade", stagger: LINES_STAGGER } },
+    { name: "text-reveal-up", primitive: "split-text", params: { unit: "words", direction: "up", stagger: WORDS_STAGGER }, cloak: true },
+    { name: "text-reveal-down", primitive: "split-text", params: { unit: "words", direction: "down", stagger: WORDS_STAGGER }, cloak: true },
+    { name: "text-reveal-mask", primitive: "split-text", params: { unit: "lines", direction: "mask", stagger: LINES_STAGGER }, cloak: true },
     { name: "text-wave", primitive: "split-text-motion", params: { motion: "wave" } },
     { name: "text-jitter", primitive: "split-text-motion", params: { motion: "jitter" } },
     { name: "typewriter", primitive: "typewriter", params: { loop: "false" } },
@@ -3658,66 +4549,130 @@ var kuinetic = (() => {
     distance: { type: "length", default: "24px", cssProperty: "--kui-distance" },
     opacity: { type: "number", default: "0", cssProperty: "--kui-from-opacity" }
   };
+  var ENTRANCE_TIMELINES = ["time", "view", "scroll", "pin"];
   var PRIMITIVES = [
     // --- entrance / exit -------------------------------------------------------------------
-    cssPrimitive("reveal", [CHANNEL.opacity, CHANNEL.translate], { parameters: distance2 }),
+    cssPrimitive("reveal", [CHANNEL.opacity, CHANNEL.translate], { timelines: ENTRANCE_TIMELINES, parameters: distance2 }),
     cssPrimitive("scale", [CHANNEL.scale], {
+      timelines: ENTRANCE_TIMELINES,
       parameters: { scale: { type: "number", default: "0.92", cssProperty: "--kui-from-scale" } }
     }),
     // Separate from `scale` because it claims translate as well and so composes differently.
+    // `distance.distance` only, not `...distance`: `kui-zoom-in-up`/`-down` (entrance.css) read
+    // `--kui-distance` and `--kui-from-scale` but never `--kui-from-opacity` — this primitive
+    // doesn't declare `CHANNEL.opacity`. Spreading the whole shared `distance` object used to expose
+    // `opacity:` as an apparently-valid, silently-inert parameter (same dead-parameter shape as
+    // `flip-3d`'s old `perspective`, fixed above).
     cssPrimitive("scale-move", [CHANNEL.scale, CHANNEL.translate], {
+      timelines: ENTRANCE_TIMELINES,
       parameters: {
-        ...distance2,
+        distance: distance2.distance,
         scale: { type: "number", default: "0.92", cssProperty: "--kui-from-scale" }
       }
     }),
     cssPrimitive("rotate", [CHANNEL.rotate], {
+      timelines: ENTRANCE_TIMELINES,
       parameters: { angle: { type: "angle", default: "-8deg", cssProperty: "--kui-from-angle" } }
     }),
+    // `distance.distance` only, not `...distance`: `kui-roll-in`/`-out` (entrance.css) write
+    // `rotate`/`translate`, never `opacity` — this primitive doesn't declare `CHANNEL.opacity`. Same
+    // dead-parameter shape as `scale-move` above.
     cssPrimitive("roll", [CHANNEL.rotate, CHANNEL.translate], {
+      timelines: ENTRANCE_TIMELINES,
       parameters: {
-        ...distance2,
+        distance: distance2.distance,
         angle: { type: "angle", default: "-120deg", cssProperty: "--kui-from-angle" }
       }
     }),
-    cssPrimitive("flip-3d", [CHANNEL.rotate], {
+    // `skew`, not `rotate`: entrance.css's keyframes write `transform: perspective(...)
+    // rotateX/Y(...)`, not the individual `rotate:` property — the `perspective` parameter below
+    // used to compile cleanly and do nothing, because nothing read it. See entrance.css's own
+    // comment on `kui-flip-in-x` for the fix; `CHANNEL.skew` is this catalog's name for "claims the
+    // whole `transform` shorthand" (`core/types.ts`), shared with `scroll-skew` and `flip-face`.
+    cssPrimitive("flip-3d", [CHANNEL.skew], {
+      timelines: ENTRANCE_TIMELINES,
       parameters: {
         angle: { type: "angle", default: "90deg", cssProperty: "--kui-from-angle" },
         perspective: { type: "length", default: "1200px", cssProperty: "--kui-perspective" }
       }
     }),
     cssPrimitive("blur", [CHANNEL.filter], {
+      timelines: ENTRANCE_TIMELINES,
       parameters: { blur: { type: "length", default: "12px", cssProperty: "--kui-blur" } }
     }),
     // Purpose-built combination: one keyframe, so opacity is written once instead of twice.
     cssPrimitive("reveal-blur", [CHANNEL.opacity, CHANNEL.translate, CHANNEL.filter], {
+      timelines: ENTRANCE_TIMELINES,
       parameters: { ...distance2, blur: { type: "length", default: "12px", cssProperty: "--kui-blur" } }
     }),
     // --- scroll-linked ---------------------------------------------------------------------
     // These are progress-linked, not time-triggered: they reverse as the user scrolls back.
     // That is by design and is why `timeline:` is a different axis from `on:`.
+    // `distance.distance` only, not the whole `distance` object: `kui-parallax-y`/`-x` (scroll.css)
+    // write only `translate` — this primitive doesn't declare `CHANNEL.opacity`. Same dead-parameter
+    // shape as `scale-move`/`roll` above; `parallax-y`/`parallax-x`/`depth-layer` never read
+    // `--kui-from-opacity`.
     cssPrimitive("parallax", [CHANNEL.translate], {
-      parameters: distance2,
-      timelines: ["view", "scroll"],
+      parameters: { distance: distance2.distance },
+      timelines: ["view", "scroll", "pin"],
       activations: ["manual"],
       reducedMotion: "disable",
       perfClass: "compositor"
     }),
+    // `from` exists because the resting end was hardcoded (scale 1 / rotate 0deg), which fixed
+    // these to "grow slightly" and "tilt slightly" — a scroll-driven element that should sweep in
+    // from a quarter-size or from half a turn away had no way to say so. Same `--kui-from-*`
+    // properties the entrance primitives already use, so the two stay spellable the same way.
     cssPrimitive("parallax-scale", [CHANNEL.scale], {
-      parameters: { scale: { type: "number", default: "1.2", cssProperty: "--kui-to-scale" } },
-      timelines: ["view", "scroll"],
+      parameters: {
+        scale: { type: "number", default: "1.2", cssProperty: "--kui-to-scale" },
+        from: { type: "number", default: "1", cssProperty: "--kui-from-scale" }
+      },
+      timelines: ["view", "scroll", "pin"],
       activations: ["manual"],
       reducedMotion: "disable"
     }),
     cssPrimitive("parallax-rotate", [CHANNEL.rotate], {
-      parameters: { angle: { type: "angle", default: "12deg", cssProperty: "--kui-to-angle" } },
-      timelines: ["view", "scroll"],
+      parameters: {
+        angle: { type: "angle", default: "12deg", cssProperty: "--kui-to-angle" },
+        from: { type: "angle", default: "0deg", cssProperty: "--kui-from-angle" }
+      },
+      timelines: ["view", "scroll", "pin"],
       activations: ["manual"],
       reducedMotion: "disable"
     }),
     cssPrimitive("scroll-fade", [CHANNEL.opacity], {
       parameters: { opacity: { type: "number", default: "0", cssProperty: "--kui-from-opacity" } },
-      timelines: ["view", "scroll"],
+      timelines: ["view", "scroll", "pin"],
+      activations: ["manual"],
+      reducedMotion: "disable"
+    }),
+    // `filter`, not `opacity` — it collides with `blur`, and declaring the real channel is what
+    // makes `channels.ts` say so instead of letting the two silently overwrite each other's
+    // `filter` declaration.
+    cssPrimitive("desaturate", [CHANNEL.filter], {
+      parameters: {
+        from: { type: "percentage", default: "100%", cssProperty: "--kui-from-grayscale" },
+        to: { type: "percentage", default: "0%", cssProperty: "--kui-to-grayscale" }
+      },
+      timelines: ["view", "scroll", "pin"],
+      activations: ["manual"],
+      reducedMotion: "disable",
+      perfClass: "paint"
+    }),
+    /*
+     * `transform`, not one of the independent transform properties, because CSS never shipped a
+     * standalone `skew:`. That is also why `skew` is its own channel rather than folded in with
+     * `rotate`: writing `transform` replaces the entire shorthand, so a skew composed with anything
+     * else that wrote `transform` would silently win. Nothing else in the catalog does — every other
+     * transform in the library goes through `translate`/`rotate`/`scale` — so the shorthand is free.
+     */
+    cssPrimitive("skew", [CHANNEL.skew], {
+      parameters: {
+        from: { type: "angle", default: "8deg", cssProperty: "--kui-from-skew" },
+        to: { type: "angle", default: "0deg", cssProperty: "--kui-to-skew" }
+      },
+      timelines: ["view", "scroll", "pin"],
       activations: ["manual"],
       reducedMotion: "disable"
     }),
@@ -3737,13 +4692,14 @@ var kuinetic = (() => {
     })
   ];
   var p = (name, primitive, keyframes, params) => ({ name, primitive, keyframes, ...params ? { params } : {} });
+  var pIn = (name, primitive, keyframes, params) => ({ ...p(name, primitive, keyframes, params), cloak: true });
   var FADE = [
-    p("fade-in", "reveal", "kui-in"),
+    pIn("fade-in", "reveal", "kui-in"),
     p("fade-out", "reveal", "kui-out"),
-    p("fade-up", "reveal", "kui-in-up"),
-    p("fade-down", "reveal", "kui-in-down"),
-    p("fade-left", "reveal", "kui-in-left"),
-    p("fade-right", "reveal", "kui-in-right"),
+    pIn("fade-up", "reveal", "kui-in-up"),
+    pIn("fade-down", "reveal", "kui-in-down"),
+    pIn("fade-left", "reveal", "kui-in-left"),
+    pIn("fade-right", "reveal", "kui-in-right"),
     p("fade-out-up", "reveal", "kui-out-up"),
     p("fade-out-down", "reveal", "kui-out-down"),
     p("fade-out-left", "reveal", "kui-out-left"),
@@ -3751,56 +4707,56 @@ var kuinetic = (() => {
   ];
   var SLIDE_PARAMS = { distance: "100px", opacity: "1" };
   var SLIDE = [
-    p("slide-up", "reveal", "kui-in-up", SLIDE_PARAMS),
-    p("slide-down", "reveal", "kui-in-down", SLIDE_PARAMS),
-    p("slide-left", "reveal", "kui-in-left", SLIDE_PARAMS),
-    p("slide-right", "reveal", "kui-in-right", SLIDE_PARAMS),
+    pIn("slide-up", "reveal", "kui-in-up", SLIDE_PARAMS),
+    pIn("slide-down", "reveal", "kui-in-down", SLIDE_PARAMS),
+    pIn("slide-left", "reveal", "kui-in-left", SLIDE_PARAMS),
+    pIn("slide-right", "reveal", "kui-in-right", SLIDE_PARAMS),
     p("slide-out-up", "reveal", "kui-out-up", SLIDE_PARAMS),
     p("slide-out-down", "reveal", "kui-out-down", SLIDE_PARAMS),
     p("slide-out-left", "reveal", "kui-out-left", SLIDE_PARAMS),
     p("slide-out-right", "reveal", "kui-out-right", SLIDE_PARAMS)
   ];
   var LOGICAL = [
-    p("slide-inline-start", "reveal", "kui-in-inline-start", SLIDE_PARAMS),
-    p("slide-inline-end", "reveal", "kui-in-inline-end", SLIDE_PARAMS),
-    p("slide-block-start", "reveal", "kui-in-up", SLIDE_PARAMS),
-    p("slide-block-end", "reveal", "kui-in-down", SLIDE_PARAMS)
+    pIn("slide-inline-start", "reveal", "kui-in-inline-start", SLIDE_PARAMS),
+    pIn("slide-inline-end", "reveal", "kui-in-inline-end", SLIDE_PARAMS),
+    pIn("slide-block-start", "reveal", "kui-in-up", SLIDE_PARAMS),
+    pIn("slide-block-end", "reveal", "kui-in-down", SLIDE_PARAMS)
   ];
   var ZOOM = [
-    p("zoom-in", "scale", "kui-zoom-in"),
+    pIn("zoom-in", "scale", "kui-zoom-in"),
     p("zoom-out", "scale", "kui-zoom-out"),
-    p("pop-in", "scale", "kui-zoom-in", { scale: "0.6", ease: "back-out" }),
+    pIn("pop-in", "scale", "kui-zoom-in", { scale: "0.6", ease: "back-out" }),
     p("pop-out", "scale", "kui-zoom-out", { scale: "0.6", ease: "back-in" }),
-    p("zoom-in-up", "scale-move", "kui-zoom-in-up"),
-    p("zoom-in-down", "scale-move", "kui-zoom-in-down")
+    pIn("zoom-in-up", "scale-move", "kui-zoom-in-up"),
+    pIn("zoom-in-down", "scale-move", "kui-zoom-in-down")
   ];
   var FLIP = [
-    p("flip-in-x", "flip-3d", "kui-flip-in-x"),
-    p("flip-in-y", "flip-3d", "kui-flip-in-y"),
+    pIn("flip-in-x", "flip-3d", "kui-flip-in-x"),
+    pIn("flip-in-y", "flip-3d", "kui-flip-in-y"),
     p("flip-out-x", "flip-3d", "kui-flip-out-x"),
     p("flip-out-y", "flip-3d", "kui-flip-out-y")
   ];
   var ROTATE = [
-    p("rotate-in", "rotate", "kui-rotate-in"),
+    pIn("rotate-in", "rotate", "kui-rotate-in"),
     p("rotate-out", "rotate", "kui-rotate-out"),
-    p("rotate-in-left", "rotate", "kui-rotate-in", { angle: "-45deg" }),
-    p("rotate-in-right", "rotate", "kui-rotate-in", { angle: "45deg" }),
-    p("roll-in", "roll", "kui-roll-in"),
+    pIn("rotate-in-left", "rotate", "kui-rotate-in", { angle: "-45deg" }),
+    pIn("rotate-in-right", "rotate", "kui-rotate-in", { angle: "45deg" }),
+    pIn("roll-in", "roll", "kui-roll-in"),
     p("roll-out", "roll", "kui-roll-out"),
-    p("swing-in", "rotate", "kui-swing-in", { angle: "-15deg", ease: "back-out" })
+    pIn("swing-in", "rotate", "kui-swing-in", { angle: "-15deg", ease: "back-out" })
   ];
   var BLUR = [
-    p("blur-in", "blur", "kui-blur-in"),
+    pIn("blur-in", "blur", "kui-blur-in"),
     p("blur-out", "blur", "kui-blur-out"),
-    p("fade-blur-up", "reveal-blur", "kui-fade-blur-up"),
-    p("fade-blur-in", "reveal-blur", "kui-fade-blur-in")
+    pIn("fade-blur-up", "reveal-blur", "kui-fade-blur-up"),
+    pIn("fade-blur-in", "reveal-blur", "kui-fade-blur-in")
   ];
   var CHARACTER = [
-    p("bounce-in", "scale", "kui-zoom-in", { scale: "0.3", ease: "back-out" }),
-    p("bounce-in-up", "reveal", "kui-in-up", { distance: "60px", ease: "back-out" }),
-    p("bounce-in-down", "reveal", "kui-in-down", { distance: "60px", ease: "back-out" }),
-    p("back-in-up", "reveal", "kui-in-up", { distance: "120px", ease: "expo-out" }),
-    p("back-in-down", "reveal", "kui-in-down", { distance: "120px", ease: "expo-out" })
+    pIn("bounce-in", "scale", "kui-zoom-in", { scale: "0.3", ease: "bounce" }),
+    pIn("bounce-in-up", "reveal", "kui-in-up", { distance: "60px", ease: "back-out" }),
+    pIn("bounce-in-down", "reveal", "kui-in-down", { distance: "60px", ease: "back-out" }),
+    pIn("back-in-up", "reveal", "kui-in-up", { distance: "120px", ease: "expo-out" }),
+    pIn("back-in-down", "reveal", "kui-in-down", { distance: "120px", ease: "expo-out" })
   ];
   var SCROLL = [
     p("parallax-y", "parallax", "kui-parallax-y"),
@@ -3809,11 +4765,14 @@ var kuinetic = (() => {
     p("parallax-rotate", "parallax-rotate", "kui-parallax-rotate"),
     p("depth-layer", "parallax", "kui-parallax-y", { distance: "200px" }),
     p("scroll-fade", "scroll-fade", "kui-scroll-fade"),
+    p("scroll-desaturate", "desaturate", "kui-desaturate"),
+    p("scroll-skew", "skew", "kui-scroll-skew"),
     p("scroll-progress-bar", "progress", "kui-progress-x"),
+    p("scroll-progress-bar-y", "progress", "kui-progress-y"),
     p("scroll-progress-ring", "progress-stroke", "kui-progress-ring"),
     // `reveal-repeat` was removed: it was byte-identical to `reveal-once`, and the activation
     // binder unobserves after first entry, so a repeating reveal is not implementable yet.
-    p("reveal-once", "reveal", "kui-in-up")
+    pIn("reveal-once", "reveal", "kui-in-up")
   ];
   var PRESETS = [
     ...FADE,
@@ -3836,10 +4795,63 @@ var kuinetic = (() => {
     return registry;
   }
 
+  // src/effects/step-marking.ts
+  var STEP_STATE_ATTR = "data-kui-step-state";
+  function selectorBreadth(selector, doc) {
+    try {
+      if (doc.documentElement.matches(selector)) return "document-wide";
+      if (doc.body?.matches(selector)) return "document-wide";
+      return "ok";
+    } catch {
+      return "invalid";
+    }
+  }
+  function resolveTarget(selector, ctx, effect) {
+    if (!selector) return selector;
+    const breadth = selectorBreadth(selector, ctx.doc);
+    if (breadth === "invalid") {
+      ctx.warn(`${effect} target "${selector}" is not a valid selector and will be ignored`);
+      return "";
+    }
+    if (breadth === "document-wide") {
+      ctx.warn(`${effect} target "${selector}" matches the whole document and will be ignored`);
+      return "";
+    }
+    return selector;
+  }
+  function createStepMarker(resolve) {
+    const ledgers = /* @__PURE__ */ new Map();
+    return {
+      mark(index) {
+        const seen = /* @__PURE__ */ new Map();
+        for (const node of resolve()) {
+          const parent = node.parentElement;
+          const position = seen.get(parent) ?? 0;
+          seen.set(parent, position + 1);
+          let ledger = ledgers.get(node);
+          if (!ledger) {
+            ledger = createAttributeLedger(node);
+            ledgers.set(node, ledger);
+          }
+          ledger.set(STEP_STATE_ATTR, stepStateFor(position, index));
+        }
+      },
+      restore() {
+        for (const ledger of ledgers.values()) ledger.restore();
+        ledgers.clear();
+      }
+    };
+  }
+  function stepStateFor(position, index) {
+    if (position < index) return "before";
+    if (position === index) return "active";
+    return "after";
+  }
+
   // src/effects/forms/primitives.ts
   var timing = {
     duration: { type: "time", default: "400ms", cssProperty: "--kui-duration" },
-    delay: { type: "time", default: "0ms", cssProperty: "--kui-delay" },
+    ...TRIGGER_DELAY_PARAM,
     ease: { type: "easing", default: "ease-out", cssProperty: "--kui-ease" }
   };
   var NATIVE_STATE_PRIMITIVE = {
@@ -3954,10 +4966,18 @@ var kuinetic = (() => {
   function nextStep(step, total) {
     return total > 0 ? (step + 1) % total : 0;
   }
-  function prepareStepProgress(el, params) {
+  function prepareStepProgress(el, params, ctx) {
     const total = Math.max(1, Math.round(params.num("steps", 4)));
+    const selector = resolveTarget(params.text("target"), ctx, "step-progress");
+    const marker = createStepMarker(
+      () => selector ? ctx.doc.querySelectorAll(selector) : el.children
+    );
+    const self = createAttributeLedger(el);
     let step = 0;
-    const render = () => el.setAttribute("data-kui-step", String(step));
+    const render = () => {
+      self.set("data-kui-step", String(step));
+      marker.mark(step);
+    };
     const advance = () => {
       step = nextStep(step, total);
       render();
@@ -3966,13 +4986,17 @@ var kuinetic = (() => {
     render();
     return () => {
       el.removeEventListener("click", advance);
-      el.removeAttribute("data-kui-step");
+      self.restore();
+      marker.restore();
     };
   }
   var STEP_PROGRESS_PRIMITIVE = jsInputPrimitive(
     "step-progress",
     ["state"],
-    { steps: { type: "number", default: "4", cssProperty: "--kui-steps", minimum: 1, maximum: 20, integer: true } },
+    {
+      steps: { type: "number", default: "4", cssProperty: "--kui-steps", minimum: 1, maximum: 20, integer: true },
+      target: { type: "text", default: "", cssProperty: "--kui-target" }
+    },
     deferPrepare(prepareStepProgress)
   );
   function nextSubmitStage(stage) {
@@ -4229,6 +5253,7 @@ var kuinetic = (() => {
     const resistance = params.num("resistance", 0.55);
     const momentum = params.num("momentum", 0.2);
     const offset = { x: 0, y: 0 };
+    const pickup = { x: 0, y: 0 };
     const deps = springDeps(ctx);
     const runners = {
       x: createSpringRunner(config, (value) => write({ ...offset, x: value }), deps),
@@ -4245,10 +5270,15 @@ var kuinetic = (() => {
         onStart() {
           runners.x.stop();
           runners.y.stop();
+          pickup.x = offset.x;
+          pickup.y = offset.y;
           el.setAttribute("data-kui-dragging", "true");
         },
         onMove(vector) {
-          write({ x: resist(vector.dx, bounds, resistance), y: resist(vector.dy, bounds, resistance) });
+          write({
+            x: resist(pickup.x + vector.dx, bounds, resistance),
+            y: resist(pickup.y + vector.dy, bounds, resistance)
+          });
         },
         onEnd(vector) {
           el.setAttribute("data-kui-dragging", "false");
@@ -4276,8 +5306,9 @@ var kuinetic = (() => {
       runners.y.to(0);
       return;
     }
-    runners.x.to(offset.x + vector.vx * mode.momentum);
-    runners.y.to(offset.y + vector.vy * mode.momentum);
+    const carry = mode.inertia ? mode.momentum : 0;
+    runners.x.to(offset.x + vector.vx * carry);
+    runners.y.to(offset.y + vector.vy * carry);
   }
   function prepareSwipeable(el, params) {
     const stop = recognise(
@@ -4561,9 +5592,12 @@ var kuinetic = (() => {
     ctx.style.claim("height");
     const duration = effectDurationMs(params, 400);
     let animation = null;
+    let previous = node.getBoundingClientRect().height;
     const observer = watchAttribute(node, params.text("attribute"), () => {
       animation?.cancel();
-      animation = animateHeight(node, duration, params.text("ease"));
+      const endpoints = heightEndpoints(node, previous);
+      previous = endpoints.to;
+      animation = animateHeight(node, endpoints, duration, params.text("ease"));
     });
     ctx.invalidate();
     return () => {
@@ -4571,13 +5605,19 @@ var kuinetic = (() => {
       animation?.cancel();
     };
   }
-  function animateHeight(node, duration, easing) {
-    const from = `${node.getBoundingClientRect().height}px`;
+  function heightEndpoints(node, previous) {
     node.style.removeProperty("height");
-    const to = `${node.scrollHeight}px`;
+    const to = node.getBoundingClientRect().height;
+    return { from: previous, to };
+  }
+  function animateHeight(node, endpoints, duration, easing) {
     const animate = node.animate;
     if (typeof animate !== "function") return null;
-    return animate.call(node, [{ height: from }, { height: to }], { duration, easing, fill: "none" });
+    return animate.call(
+      node,
+      [{ height: `${endpoints.from}px` }, { height: `${endpoints.to}px` }],
+      { duration, easing, fill: "none" }
+    );
   }
   function prepareIndicator(el, params, ctx) {
     const node = el;
@@ -4707,27 +5747,42 @@ var kuinetic = (() => {
   }
   function prepareHeaderShrink(el, params, ctx) {
     const offset = params.num("offset", 120);
-    return subscribeScrollTop(el, ctx, (top) => {
+    const state = createAttributeLedger(el);
+    const unsubscribe = subscribeScrollTop(el, ctx, (top) => {
       const progress = offset > 0 ? Math.min(1, Math.max(0, top / offset)) : 1;
       ctx.style.set("--kui-shrink", progress.toFixed(4));
-      el.setAttribute("data-kui-shrunk", String(progress >= 1));
+      state.set("data-kui-shrunk", String(progress >= 1));
     });
+    return () => {
+      unsubscribe();
+      state.restore();
+    };
   }
   function prepareHeaderHide(el, params, ctx) {
     const minDelta = params.num("offset", 8);
     let last = 0;
-    return subscribeScrollTop(el, ctx, (top) => {
+    const state = createAttributeLedger(el);
+    const unsubscribe = subscribeScrollTop(el, ctx, (top) => {
       const delta = top - last;
       if (Math.abs(delta) < minDelta) return;
-      el.setAttribute("data-kui-hidden", String(delta > 0 && top > minDelta));
+      state.set("data-kui-hidden", String(delta > 0 && top > minDelta));
       last = top;
     });
+    return () => {
+      unsubscribe();
+      state.restore();
+    };
   }
   function prepareBackToTop(el, params, ctx) {
     const offset = params.num("offset", 400);
-    return subscribeScrollTop(el, ctx, (top) => {
-      el.setAttribute("data-kui-visible", String(top > offset));
+    const state = createAttributeLedger(el);
+    const unsubscribe = subscribeScrollTop(el, ctx, (top) => {
+      state.set("data-kui-visible", String(top > offset));
     });
+    return () => {
+      unsubscribe();
+      state.restore();
+    };
   }
   var NAV_JS_PRIMITIVES = [
     navPrimitive(
@@ -4765,13 +5820,38 @@ var kuinetic = (() => {
     const rect = el.getBoundingClientRect();
     return { top: rect.top, height: rect.height };
   };
+  var domPosition = (el) => {
+    const view = el.ownerDocument?.defaultView;
+    return view ? view.getComputedStyle(el).position : "static";
+  };
+  var domOffsetTop = (el) => {
+    const view = el.ownerDocument?.defaultView;
+    if (!view) return 0;
+    const parsed = Number.parseFloat(view.getComputedStyle(el).top);
+    return Number.isFinite(parsed) ? parsed : 0;
+  };
+  function geometrySource(el, positionOf) {
+    let outermostSticky = null;
+    for (let node = el; node; node = node.parentElement) {
+      if (positionOf(node) === "sticky") outermostSticky = node;
+    }
+    return outermostSticky?.parentElement ?? el;
+  }
+  function sourceTop(el, box, measure, positionOf) {
+    const source = geometrySource(el, positionOf);
+    return source === el ? box.top : measure(source).top;
+  }
   function trackProgress(el, ctx, options, onProgress) {
     const measure = options.measure ?? domGeometry;
+    const positionOf = options.positionOf ?? domPosition;
+    const offsetOf = options.offsetOf ?? domOffsetTop;
     let scrollTop = 0;
     let scrollportTop = 0;
     const geometry2 = createMeasureCache(() => {
       const box = measure(el);
-      return { contentTop: box.top - scrollportTop + scrollTop, height: box.height };
+      const top = options.contentAnchor ? measure(options.contentAnchor).top - box.height : sourceTop(el, box, measure, positionOf);
+      const stickyOffset = options.stickyEl ? offsetOf(options.stickyEl) : 0;
+      return { contentTop: top - stickyOffset - scrollportTop + scrollTop, height: box.height };
     });
     return ctx.scheduler.subscribe(ctx.rootFor(el), (frame) => {
       scrollTop = frame.metrics.scrollTop;
@@ -4797,11 +5877,167 @@ var kuinetic = (() => {
     return clamp01(-top / span);
   }
 
+  // src/effects/scroll-mechanics/scroll-spy.ts
+  function prepareScrollSpy(el, params, ctx) {
+    const sectionsAuthored = params.text("sections");
+    if (sectionsAuthored) {
+      const sectionsSelector = resolveTarget(sectionsAuthored, ctx, "scroll-spy sections");
+      return prepareScrollSpyContainer(el, params, ctx, sectionsSelector);
+    }
+    return prepareScrollSpySingle(el, params, ctx);
+  }
+  function prepareScrollSpySingle(el, params, ctx) {
+    if (params.text("offset-top", "0px") !== "0px") {
+      ctx.warn('scroll-spy "offset-top" has no effect without sections: and is ignored here');
+    }
+    const selector = resolveTarget(params.text("target"), ctx, "scroll-spy");
+    const links = /* @__PURE__ */ new Map();
+    const self = createAttributeLedger(el);
+    let last;
+    const untrack = trackProgress(el, ctx, { distance: params.text("distance") }, (progress) => {
+      const active = progress > 0 && progress < 1;
+      if (active === last) return;
+      last = active;
+      self.set("data-kui-active", String(active));
+      if (selector) markLinks(ctx.doc, selector, active, links);
+    });
+    return continuousSetup(() => {
+      untrack();
+      self.restore();
+      for (const ledger of links.values()) ledger.restore();
+    });
+  }
+  function markLinks(doc, selector, active, links) {
+    for (const link of doc.querySelectorAll(selector)) {
+      let ledger = links.get(link);
+      if (!ledger) {
+        ledger = createAttributeLedger(link);
+        links.set(link, ledger);
+      }
+      ledger.set("data-kui-active", String(active));
+    }
+  }
+  function hrefHash(link) {
+    const href = link.getAttribute("href") ?? "";
+    const at = href.indexOf("#");
+    return at === -1 ? "" : href.slice(at);
+  }
+  function pairSectionsWithLinks(sections, links, ctx, sectionsSelector) {
+    const linksByHash = /* @__PURE__ */ new Map();
+    for (const link of links) {
+      const hash = hrefHash(link);
+      if (hash) linksByHash.set(hash, link);
+    }
+    const claimed = /* @__PURE__ */ new Set();
+    const pairs = sections.map((section) => {
+      if (!section.id) {
+        ctx.warn(
+          `scroll-spy: a section matched by sections:"${sectionsSelector}" has no id and cannot be paired with a link`
+        );
+        return { section, link: null };
+      }
+      const hash = `#${section.id}`;
+      const link = linksByHash.get(hash) ?? null;
+      if (link) claimed.add(hash);
+      return { section, link };
+    });
+    for (const [hash, link] of linksByHash) {
+      if (!claimed.has(hash)) {
+        ctx.warn(`scroll-spy: link "${link.getAttribute("href")}" matches no section id in sections:"${sectionsSelector}"`);
+      }
+    }
+    return pairs;
+  }
+  function offsetTopPixels(authored, frame) {
+    return toPixels(
+      authored,
+      {
+        viewportWidth: frame.metrics.viewportWidth,
+        viewportHeight: frame.metrics.viewportHeight,
+        percentBasis: 0,
+        fontSize: 16,
+        rootFontSize: 16
+      },
+      0
+    );
+  }
+  function highestReachedIndex(tops, scrollTop, line) {
+    let index = -1;
+    for (let i = 0; i < tops.length; i++) {
+      if (tops[i] - scrollTop - line <= 0) index = i;
+    }
+    return index;
+  }
+  function prepareScrollSpyContainer(el, params, ctx, sectionsSelector) {
+    if (params.text("distance", "100vh") !== "100vh") {
+      ctx.warn('scroll-spy "distance" has no effect with sections: \u2014 each section measures its own height');
+    }
+    const linksSelector = resolveTarget(params.text("target"), ctx, "scroll-spy target");
+    const sections = sectionsSelector ? [...el.querySelectorAll(sectionsSelector)] : [];
+    if (sectionsSelector && sections.length === 0) {
+      ctx.warn(`scroll-spy sections:"${sectionsSelector}" matched nothing inside this element`);
+    }
+    const links = linksSelector ? [...el.querySelectorAll(linksSelector)] : [];
+    const pairs = pairSectionsWithLinks(sections, links, ctx, sectionsSelector);
+    const sectionLedgers = pairs.map((pair) => createAttributeLedger(pair.section));
+    const linkLedgers = /* @__PURE__ */ new Map();
+    for (const { link } of pairs) {
+      if (link && !linkLedgers.has(link)) linkLedgers.set(link, createAttributeLedger(link));
+    }
+    const offsetAuthored = params.text("offset-top", "0px");
+    let scrollTop = 0;
+    let scrollportTop = 0;
+    const contentTops = createMeasureCache(
+      () => pairs.map(({ section }) => domGeometry(section).top - scrollportTop + scrollTop)
+    );
+    let active = -1;
+    function setActive(index, value) {
+      const pair = pairs[index];
+      sectionLedgers[index].set("data-kui-active", String(value));
+      if (pair.link) linkLedgers.get(pair.link).set("data-kui-active", String(value));
+    }
+    const untrack = ctx.scheduler.subscribe(ctx.rootFor(el), (frame) => {
+      scrollTop = frame.metrics.scrollTop;
+      scrollportTop = frame.metrics.viewportTop;
+      const tops = contentTops.read(frame.epoch);
+      const line = offsetTopPixels(offsetAuthored, frame);
+      const next = highestReachedIndex(tops, scrollTop, line);
+      if (next === active) return;
+      if (active !== -1) setActive(active, false);
+      if (next !== -1) setActive(next, true);
+      active = next;
+    });
+    return continuousSetup(() => {
+      untrack();
+      for (const ledger of sectionLedgers) ledger.restore();
+      for (const ledger of linkLedgers.values()) ledger.restore();
+    });
+  }
+
   // src/effects/scroll-mechanics/primitives.ts
   var PROGRESS_VAR = "--kui-progress";
   var distanceParam = {
     distance: { type: "length", default: "100vh", cssProperty: "--kui-distance" }
   };
+  var stickyParams = {
+    "offset-top": {
+      type: "length",
+      default: "var(--kui-pin-offset, 0px)",
+      cssProperty: "--kui-offset-top"
+    },
+    spacer: {
+      type: "keyword",
+      default: "false",
+      cssProperty: "--kui-spacer",
+      values: ["true", "false"]
+    }
+  };
+  function installSticky(node, params, ctx) {
+    ctx.style.set("position", "sticky");
+    ctx.style.set("top", params.text("offset-top", "var(--kui-pin-offset, 0px)"));
+    const inserted = params.is("spacer") ? insertSpacer(node, params.text("distance"), ctx) : null;
+    return { spacer: inserted?.spacer ?? null, dispose: () => inserted?.remove() };
+  }
   function scrollPrimitive(spec) {
     const { id, channels, parameters, prepare, perfClass = "compositor" } = spec;
     return {
@@ -4809,7 +6045,13 @@ var kuinetic = (() => {
       renderer: "javascript",
       channels,
       parameters,
-      supportedTimelines: ["time", "view", "scroll"],
+      // Accepted, never read: these primitives read scroll position themselves and are never driven
+      // by an `animation-timeline`. The list exists so that composing the driver with the effects it
+      // drives — `data-kui="pin-section distance:200vh, parallax-rotate ... "` plus `timeline:pin` —
+      // survives `compile.ts`'s `intersect`. Without it the intersection empties, `style-plan.ts`
+      // refuses the timeline, and the scrub silently degrades to a one-shot. See `TIMELINE_AGNOSTIC`
+      // (`effects/shared.ts`) for why the name says abstention rather than support.
+      supportedTimelines: TIMELINE_AGNOSTIC,
       supportedActivations: ["manual", "load", "enter"],
       defaultActivation: "load",
       perfClass,
@@ -4822,19 +6064,17 @@ var kuinetic = (() => {
   }
   function preparePin(el, params, ctx) {
     const node = el;
-    ctx.style.set("position", "sticky");
-    ctx.style.set("top", params.text("offset", "0px"));
-    const removeSpacer = params.is("spacer") ? insertSpacer(node, params.text("distance"), ctx) : null;
+    const { dispose: unstick } = installSticky(node, params, ctx);
     const tracked = node.parentElement ?? el;
-    const untrack = trackProgress(tracked, ctx, { distance: params.text("distance") }, (progress) => {
+    const untrack = trackProgress(tracked, ctx, { distance: params.text("distance"), stickyEl: node }, (progress) => {
       writeProgress(ctx, progress);
       el.setAttribute("data-kui-pinned", progress > 0 && progress < 1 ? "true" : "false");
     });
-    return () => {
+    return continuousSetup(() => {
       untrack();
-      removeSpacer?.();
+      unstick();
       el.removeAttribute("data-kui-pinned");
-    };
+    });
   }
   function insertSpacer(node, distance3, ctx) {
     const spacer = ctx.doc.createElement("div");
@@ -4844,34 +6084,81 @@ var kuinetic = (() => {
     spacer.style.pointerEvents = "none";
     node.after(spacer);
     ctx.invalidate();
-    return () => {
-      spacer.remove();
-      ctx.invalidate();
+    return {
+      spacer,
+      remove: () => {
+        spacer.remove();
+        ctx.invalidate();
+      }
     };
   }
   function prepareProgress(el, params, ctx) {
     const steps = Math.max(0, Math.round(params.num("steps", 0)));
+    const selector = resolveTarget(params.text("target"), ctx, "scrollytelling-step");
+    const marker = createStepMarker(() => ctx.doc.querySelectorAll(selector));
+    const self = createAttributeLedger(el);
+    let lastIndex;
     const untrack = trackProgress(el, ctx, { distance: params.text("distance") }, (progress) => {
       writeProgress(ctx, progress);
-      if (steps > 0) {
-        const index = Math.min(steps - 1, Math.floor(progress * steps));
-        el.setAttribute("data-kui-step", String(index));
-      }
+      if (steps === 0) return;
+      const index = Math.min(steps - 1, Math.floor(progress * steps));
+      if (index === lastIndex) return;
+      lastIndex = index;
+      self.set("data-kui-step", String(index));
+      ctx.style.set("--kui-step", String(index));
+      if (selector) marker.mark(index);
     });
-    return () => {
+    return continuousSetup(() => {
       untrack();
-      el.removeAttribute("data-kui-step");
-    };
+      self.restore();
+      marker.restore();
+    });
   }
   function prepareHorizontal(el, params, ctx) {
-    const node = el;
+    const selector = resolveTarget(params.text("target"), ctx, "horizontal-scroll");
+    if (!selector) return prepareBareTrack(el, params, ctx);
+    const track = el.querySelector(selector);
+    if (!track) {
+      ctx.warn(`horizontal-scroll target "${selector}" matched nothing inside this element`);
+      return () => {
+      };
+    }
+    return prepareManagedTrack(el, track, params, ctx);
+  }
+  function prepareBareTrack(node, params, ctx) {
     const authored = params.text("travel", "auto");
     const travel = createMeasureCache(() => trackTravel(node, authored, node.ownerDocument));
-    const untrack = trackProgress(el, ctx, { distance: params.text("distance") }, (progress, frame) => {
-      ctx.style.set("translate", `${-progress * travel.read(frame.epoch)}px 0`);
+    return continuousSetup(
+      trackProgress(node, ctx, { distance: params.text("distance") }, (progress, frame) => {
+        ctx.style.set("translate", `${-progress * travel.read(frame.epoch)}px 0`);
+        writeProgress(ctx, progress);
+      })
+    );
+  }
+  function prepareManagedTrack(host, track, params, ctx) {
+    const offsetTop = params.text("offset-top", "var(--kui-pin-offset, 0px)");
+    ctx.style.set("position", "sticky");
+    ctx.style.set("top", offsetTop);
+    ctx.style.set("height", `calc(100vh - ${offsetTop})`);
+    ctx.style.set("overflow", "hidden");
+    ctx.style.set("display", "grid");
+    ctx.style.set("align-content", "center");
+    const { remove: removeSpacer } = insertSpacer(host, params.text("distance"), ctx);
+    const rail = createStyleLedger(track);
+    rail.set("display", "flex");
+    rail.set("width", "max-content");
+    const authored = params.text("travel", "auto");
+    const travel = createMeasureCache(() => trackTravel(track, authored, track.ownerDocument));
+    const tracked = host.parentElement ?? host;
+    const untrack = trackProgress(tracked, ctx, { distance: params.text("distance"), stickyEl: host }, (progress, frame) => {
+      rail.set("translate", `${-progress * travel.read(frame.epoch)}px 0`);
       writeProgress(ctx, progress);
     });
-    return untrack;
+    return continuousSetup(() => {
+      untrack();
+      rail.restore();
+      removeSpacer();
+    });
   }
   function trackTravel(node, authored, doc) {
     if (authored && authored !== "auto") return toPixels(authored, ABSOLUTE_BASIS, 0);
@@ -4881,11 +6168,41 @@ var kuinetic = (() => {
     return Math.max(0, node.scrollWidth - viewportWidth);
   }
   function prepareMediaScrub(el, params, ctx) {
+    const managed = params.is("spacer") ? installSticky(el, params, ctx) : null;
+    const contentAnchor = managed?.spacer ?? void 0;
+    const stickyEl = managed ? el : void 0;
+    const selector = resolveTarget(params.text("target"), ctx, "media-scrub");
+    const scrub = selector ? prepareTargetScrub(el, params, ctx, { selector, contentAnchor, stickyEl }) : prepareSrcScrub(el, params, ctx, { contentAnchor, stickyEl });
+    return continuousSetup(() => {
+      scrub();
+      managed?.dispose();
+    });
+  }
+  function prepareTargetScrub(el, params, ctx, authored) {
+    const { selector, contentAnchor, stickyEl } = authored;
+    const marker = createStepMarker(() => ctx.doc.querySelectorAll(selector));
+    const frames = Math.max(1, ctx.doc.querySelectorAll(selector).length);
+    let lastIndex;
+    const untrack = trackProgress(el, ctx, { distance: params.text("distance"), contentAnchor, stickyEl }, (progress) => {
+      writeProgress(ctx, progress);
+      const index = Math.min(frames - 1, Math.floor(progress * frames));
+      if (index === lastIndex) return;
+      lastIndex = index;
+      marker.mark(index);
+    });
+    marker.mark(0);
+    return () => {
+      untrack();
+      marker.restore();
+    };
+  }
+  function prepareSrcScrub(el, params, ctx, anchors) {
+    const { contentAnchor, stickyEl } = anchors;
     const frames = Math.max(1, Math.round(params.num("frames", 1)));
     const pattern = mediaSrcPattern(params.text("src"), ctx);
     const media = el;
     let lastIndex = -1;
-    const untrack = trackProgress(el, ctx, { distance: params.text("distance") }, (progress) => {
+    const untrack = trackProgress(el, ctx, { distance: params.text("distance"), contentAnchor, stickyEl }, (progress) => {
       writeProgress(ctx, progress);
       const index = Math.min(frames - 1, Math.floor(progress * frames));
       if (index === lastIndex) return;
@@ -4909,80 +6226,37 @@ var kuinetic = (() => {
     if (media.tagName !== "IMG") return;
     if (pattern) media.src = pattern.replace("{i}", String(index).padStart(String(frames).length, "0"));
   }
-  function prepareScrollSpy(el, params, ctx) {
-    const selector = spyTarget(params.text("target"), ctx);
-    const links = /* @__PURE__ */ new Map();
-    const self = createAttributeLedger(el);
-    let last;
-    const untrack = trackProgress(el, ctx, { distance: params.text("distance") }, (progress) => {
-      const active = progress > 0 && progress < 1;
-      if (active === last) return;
-      last = active;
-      self.set("data-kui-active", String(active));
-      if (selector) markLinks(ctx.doc, selector, active, links);
-    });
+  function prepareSmoothScroll(el, params, ctx) {
+    ctx.style.set("scroll-behavior", params.text("behavior", "smooth"));
     return () => {
-      untrack();
-      self.restore();
-      for (const ledger of links.values()) ledger.restore();
     };
   }
-  function spyTarget(selector, ctx) {
-    if (!selector) return selector;
-    const breadth = selectorBreadth(selector, ctx.doc);
-    if (breadth === "invalid") {
-      ctx.warn(`scroll-spy target "${selector}" is not a valid selector and will be ignored`);
-      return "";
-    }
-    if (breadth === "document-wide") {
-      ctx.warn(`scroll-spy target "${selector}" matches the whole document and will be ignored`);
-      return "";
-    }
-    return selector;
-  }
-  function selectorBreadth(selector, doc) {
-    try {
-      if (doc.documentElement.matches(selector)) return "document-wide";
-      if (doc.body?.matches(selector)) return "document-wide";
-      return "ok";
-    } catch {
-      return "invalid";
-    }
-  }
-  function markLinks(doc, selector, active, links) {
-    for (const link of doc.querySelectorAll(selector)) {
-      let ledger = links.get(link);
-      if (!ledger) {
-        ledger = createAttributeLedger(link);
-        links.set(link, ledger);
-      }
-      ledger.set("data-kui-active", String(active));
-    }
-  }
   function prepareSnap(el, params, ctx) {
-    ctx.style.set(
-      "scroll-snap-type",
-      `${params.is("axis", "x") ? "x" : "y"} ${params.text("strictness", "mandatory")}`
-    );
-    const childLedgers = [...el.children].map((child) => createStyleLedger(child));
+    const axis = params.is("axis", "x") ? "x" : "y";
+    ctx.style.set("scroll-snap-type", `${axis} ${params.text("strictness", "mandatory")}`);
+    const selector = resolveTarget(params.text("target"), ctx, "scroll-snap");
+    const items = selector ? [...el.querySelectorAll(selector)] : [...el.children];
+    if (selector && items.length === 0) {
+      ctx.warn(`scroll-snap target "${selector}" matched nothing inside this element`);
+    }
+    if (selector) installSnapContainer(axis, ctx);
+    const childLedgers = items.map((child) => createStyleLedger(child));
     for (const ledger of childLedgers) ledger.set("scroll-snap-align", params.text("align", "start"));
     return () => {
       for (const ledger of childLedgers) ledger.restore();
     };
   }
+  function installSnapContainer(axis, ctx) {
+    ctx.style.set(axis === "x" ? "overflow-x" : "overflow-y", "auto");
+    if (axis === "x") ctx.style.set("display", "flex");
+  }
   var SCROLL_PRIMITIVES = [
     scrollPrimitive({
       id: "pin",
       channels: ["layout", "progress"],
       parameters: {
         ...distanceParam,
-        offset: { type: "length", default: "0px", cssProperty: "--kui-offset" },
-        spacer: {
-          type: "keyword",
-          default: "false",
-          cssProperty: "--kui-spacer",
-          values: ["true", "false"]
-        }
+        ...stickyParams
       },
       prepare: deferPrepare(preparePin),
       perfClass: "layout"
@@ -4992,7 +6266,10 @@ var kuinetic = (() => {
       channels: ["progress"],
       parameters: {
         ...distanceParam,
-        steps: { type: "number", default: "0", cssProperty: "--kui-steps" }
+        steps: { type: "number", default: "0", cssProperty: "--kui-steps" },
+        // Same name, same shape and the same validation as scroll-spy's: one `target:` convention
+        // across the library rather than a second word for "the elements this effect marks".
+        target: { type: "text", default: "", cssProperty: "--kui-target" }
       },
       prepare: deferPrepare(prepareProgress)
     }),
@@ -5001,7 +6278,16 @@ var kuinetic = (() => {
       channels: ["translate", "progress"],
       parameters: {
         ...distanceParam,
-        travel: { type: "text", default: "auto", cssProperty: "--kui-travel" }
+        travel: { type: "text", default: "auto", cssProperty: "--kui-travel" },
+        // Same name, same shape and the same validation as scroll-spy's and media-scrub's: one
+        // `target:` convention across the library. Naming the row that moves is also what opts this
+        // primitive into owning the stage, the sticky window and the row's layout itself.
+        target: { type: "text", default: "", cssProperty: "--kui-target" },
+        "offset-top": {
+          type: "length",
+          default: "var(--kui-pin-offset, 0px)",
+          cssProperty: "--kui-offset-top"
+        }
       },
       prepare: deferPrepare(prepareHorizontal)
     }),
@@ -5010,8 +6296,13 @@ var kuinetic = (() => {
       channels: ["media", "progress"],
       parameters: {
         ...distanceParam,
+        // A scrub is a hold, so it needs the same two knobs a pin does. Declaring them here is what
+        // lets `sequence-scrub` become one attribute with no wrapper at all.
+        ...stickyParams,
         frames: { type: "number", default: "1", cssProperty: "--kui-frames" },
-        src: { type: "text", default: "", cssProperty: "--kui-src" }
+        src: { type: "text", default: "", cssProperty: "--kui-src" },
+        // The preferred form. `frames:`/`src:` remain for sequences too long to author as tags.
+        target: { type: "text", default: "", cssProperty: "--kui-target" }
       },
       prepare: deferPrepare(prepareMediaScrub),
       perfClass: "paint"
@@ -5020,11 +6311,44 @@ var kuinetic = (() => {
       id: "scroll-spy",
       channels: ["state"],
       parameters: {
+        // `distance`: the per-section form only. `offset-top`: the container form only. Each is a
+        // no-op — warned, not silent — in the other; see `prepareScrollSpySingle` and
+        // `prepareScrollSpyContainer`.
         ...distanceParam,
-        target: { type: "text", default: "", cssProperty: "--kui-target" }
+        // Same name and meaning in both forms: the link(s) this instance marks. Per-section, the
+        // one link this section names; with `sections:`, every link `target:` matches, each paired
+        // to its own section by `href`. See `prepareScrollSpyContainer`.
+        target: { type: "text", default: "", cssProperty: "--kui-target" },
+        // Presence, not value, selects the container form: authoring this at all switches
+        // `prepareScrollSpy` from one-section-per-instance to one-instance-on-the-shared-ancestor.
+        sections: { type: "text", default: "", cssProperty: "--kui-sections" },
+        "offset-top": { type: "length", default: "0px", cssProperty: "--kui-offset-top" }
       },
       prepare: deferPrepare(prepareScrollSpy)
     }),
+    scrollPrimitive({
+      id: "smooth-scroll",
+      /*
+       * Its own channel, not the `'layout'` it used to share with `pin`, `stacking-cards` and
+       * `scroll-snap`. The channel model exists to stop two effects fighting over the same CSS
+       * property, and this one writes exactly `scroll-behavior` — a property that describes how a
+       * *user-or-script-initiated* scroll is performed, and that no other primitive touches.
+       *
+       * On `'layout'` it made a legitimate pairing impossible. Both `smooth-scroll` and
+       * `scroll-snap` have to sit on the document element to have any effect at all — neither
+       * `scroll-behavior` nor `scroll-snap-type` is propagated to the viewport from `<body>` — so
+       * "apply them to nested elements", the advice the conflict message gives, has no valid
+       * nesting to offer here. `data-kui="smooth-scroll-to, scroll-snap-y"` on `<html>` is the
+       * ordinary way to ask for smooth anchor jumps on a page that also snaps, and it was refused
+       * for a collision that cannot happen: the two write disjoint properties.
+       */
+      channels: ["scroll-behavior"],
+      parameters: {
+        behavior: { type: "keyword", default: "smooth", cssProperty: "--kui-scroll-behavior", values: ["smooth", "auto"] }
+      },
+      prepare: deferPrepare(prepareSmoothScroll),
+      perfClass: "layout"
+    }),
     scrollPrimitive({
       id: "scroll-snap",
       channels: ["layout"],
@@ -5041,7 +6365,11 @@ var kuinetic = (() => {
           default: "start",
           cssProperty: "--kui-snap-align",
           values: ["start", "center", "end"]
-        }
+        },
+        // Names the snap items. Also what opts this primitive into owning the scroll container
+        // itself — see `installSnapContainer`. Without it, the direct children are the items and
+        // the page keeps its own `overflow`, exactly as before.
+        target: { type: "text", default: "", cssProperty: "--kui-target" }
       },
       prepare: deferPrepare(prepareSnap),
       perfClass: "layout"
@@ -5064,11 +6392,28 @@ var kuinetic = (() => {
     // --- travel ------------------------------------------------------------------------------
     { name: "horizontal-scroll", primitive: "horizontal-track" },
     // --- media -------------------------------------------------------------------------------
-    { name: "sequence-scrub", primitive: "media-scrub" },
+    /*
+     * `spacer:true` is what deletes the `.scrub-stage` wrapper a page used to hand-write.
+     *
+     * It could not be switched on until the tracker stopped measuring against the parent. A scrub
+     * makes itself sticky, and `geometrySource` escapes a sticky subtree by taking its parent — so
+     * with the wrapper gone the scrub was measured against whatever section contained it. Measured
+     * on `demo/scroll.html`: the parent started 926px above the scrub against a 1817px distance, so
+     * progress reached 51% before the element had even stuck and half the sequence played off
+     * screen. The wrapper was not ceremony; it was the tight box that made the parent honest.
+     *
+     * `trackProgress`'s `contentAnchor` is the fix. Progress is read from the spacer, which the
+     * library inserts, is exactly `distance` tall, is never sticky, and moves with the content — so
+     * there is no wrapper to write and nothing to disagree with.
+     *
+     * `video-scrub` stays off: a video positioned by the page is not asking the library for a box.
+     */
+    { name: "sequence-scrub", primitive: "media-scrub", params: { spacer: "true" } },
     { name: "video-scrub", primitive: "media-scrub" },
     // --- navigation --------------------------------------------------------------------------
     { name: "scroll-spy", primitive: "scroll-spy" },
     // --- native CSS passthroughs ---------------------------------------------------------------
+    { name: "smooth-scroll-to", primitive: "smooth-scroll" },
     { name: "scroll-snap-x", primitive: "scroll-snap", params: { axis: "x" } },
     { name: "scroll-snap-y", primitive: "scroll-snap", params: { axis: "y" } }
   ];
@@ -5083,11 +6428,16 @@ var kuinetic = (() => {
   var UNSUPPORTED = /[AaSsQqTt]/;
   function parsePath(d) {
     if (UNSUPPORTED.test(d)) {
-      return { segments: [], reason: "arc and shorthand commands (A S Q T) are not supported" };
+      return {
+        segments: [],
+        subpaths: [],
+        reason: "arc and shorthand commands (A S Q T) are not supported"
+      };
     }
     const tokens = [...d.matchAll(COMMAND)].map((m) => m[1] ?? m[2]);
     const state = {
-      segments: [],
+      subpaths: [],
+      open: void 0,
       current: { x: 0, y: 0 },
       start: { x: 0, y: 0 },
       command: ""
@@ -5101,18 +6451,33 @@ var kuinetic = (() => {
         index++;
         continue;
       }
-      if (!state.command) return { segments: [], reason: "path must start with a command letter" };
+      if (!state.command) {
+        return { segments: [], subpaths: [], reason: "path must start with a command letter" };
+      }
       index = consume(tokens, index, state);
     }
-    if (state.segments.length === 0) return { segments: [], reason: "no drawable segments" };
-    return { segments: state.segments };
+    if (state.subpaths.length === 0) {
+      return { segments: [], subpaths: [], reason: "no drawable segments" };
+    }
+    return { segments: state.subpaths.flatMap((sub) => sub.segments), subpaths: state.subpaths };
+  }
+  function pushSegment(state, segment) {
+    if (!state.open) {
+      state.open = { segments: [], closed: false };
+      state.subpaths.push(state.open);
+    }
+    state.open.segments.push(segment);
   }
   var ARITY = { m: 2, l: 2, h: 1, v: 1, c: 6, z: 0 };
   function closeSubpath(state) {
-    const { current, start } = state;
-    if (Math.abs(current.x - start.x) < 1e-6 && Math.abs(current.y - start.y) < 1e-6) return;
-    state.segments.push(lineToCubic(current, start));
+    const { current, start, open } = state;
+    if (!open) return;
+    if (Math.abs(current.x - start.x) >= 1e-6 || Math.abs(current.y - start.y) >= 1e-6) {
+      open.segments.push(lineToCubic(current, start));
+    }
+    open.closed = true;
     state.current = { ...start };
+    state.open = void 0;
   }
   function consume(tokens, index, state) {
     const key = state.command.toLowerCase();
@@ -5124,10 +6489,11 @@ var kuinetic = (() => {
     if (key === "m") {
       state.current = next;
       state.start = next;
+      state.open = void 0;
       state.command = relative ? "l" : "L";
       return index + arity;
     }
-    state.segments.push(straightOrCubic({ key, args, from: state.current, relative }, next));
+    pushSegment(state, straightOrCubic({ key, args, from: state.current, relative }, next));
     state.current = next;
     return index + arity;
   }
@@ -5190,34 +6556,78 @@ var kuinetic = (() => {
   function chordLength(segment) {
     return Math.hypot(segment.to.x - segment.from.x, segment.to.y - segment.from.y);
   }
-  function toPathData(segments) {
-    if (segments.length === 0) return "";
-    const head = segments[0];
-    const parts = [`M${round(head.from.x)},${round(head.from.y)}`];
-    for (const s of segments) {
-      parts.push(
-        `C${round(s.c1.x)},${round(s.c1.y)} ${round(s.c2.x)},${round(s.c2.y)} ${round(s.to.x)},${round(s.to.y)}`
-      );
+  function round(value) {
+    return Math.round(value * 100) / 100;
+  }
+  function subpathsToPathData(subpaths) {
+    const parts = [];
+    for (const sub of subpaths) {
+      const head = sub.segments[0];
+      parts.push(`M${round(head.from.x)},${round(head.from.y)}`);
+      for (const s of sub.segments) {
+        parts.push(
+          `C${round(s.c1.x)},${round(s.c1.y)} ${round(s.c2.x)},${round(s.c2.y)} ${round(s.to.x)},${round(s.to.y)}`
+        );
+      }
+      if (sub.closed) parts.push("Z");
     }
     return parts.join(" ");
   }
-  function round(value) {
-    return Math.round(value * 100) / 100;
+  function centroidOf(subpath) {
+    let x = 0;
+    let y = 0;
+    for (const s of subpath.segments) {
+      x += s.from.x;
+      y += s.from.y;
+    }
+    return { x: x / subpath.segments.length, y: y / subpath.segments.length };
+  }
+  function collapsedLike(partner) {
+    const at = centroidOf(partner);
+    return {
+      segments: partner.segments.map(() => ({
+        from: { ...at },
+        c1: { ...at },
+        c2: { ...at },
+        to: { ...at }
+      })),
+      closed: partner.closed
+    };
+  }
+  function normaliseSubpaths(a, b) {
+    const count = Math.max(a.length, b.length);
+    const from = [];
+    const to = [];
+    for (let i = 0; i < count; i++) {
+      const left = a[i] ?? collapsedLike(b[i]);
+      const right = b[i] ?? collapsedLike(a[i]);
+      const target = Math.max(left.segments.length, right.segments.length);
+      const closed = left.closed && right.closed;
+      from.push({ segments: normaliseCount(left.segments, target), closed });
+      to.push({ segments: normaliseCount(right.segments, target), closed });
+    }
+    return { from, to };
   }
   function createMorph(fromPath, toPath) {
     const a = parsePath(fromPath);
     const b = parsePath(toPath);
     if (a.reason) return { reason: `start path: ${a.reason}` };
     if (b.reason) return { reason: `end path: ${b.reason}` };
-    const count = Math.max(a.segments.length, b.segments.length);
-    const from = normaliseCount(a.segments, count);
-    const to = normaliseCount(b.segments, count);
+    const { from, to } = normaliseSubpaths(a.subpaths, b.subpaths);
+    const count = from.reduce((total, sub) => total + sub.segments.length, 0);
     return {
       morph: {
         segmentCount: count,
         at(t) {
           const clamped = Math.min(1, Math.max(0, t));
-          return toPathData(from.map((segment, i) => lerpCubic(segment, to[i], clamped)));
+          return subpathsToPathData(
+            from.map((sub, i) => ({
+              segments: sub.segments.map(
+                (segment, j) => lerpCubic(segment, to[i].segments[j], clamped)
+              ),
+              closed: sub.closed
+            }))
+          );
         }
       }
     };
@@ -5274,6 +6684,35 @@ var kuinetic = (() => {
       path.setAttribute("d", startPath);
     };
   }
+  var PATH_DRAW_PRIMITIVE = cssPrimitive("path-draw", [CHANNEL.stroke], {
+    parameters: {
+      length: { type: "number", default: "100", cssProperty: "--kui-path-length", finite: true }
+    }
+  });
+  var SHAPE_FILL_PRIMITIVE = cssPrimitive("shape-fill", [CHANNEL.clip]);
+  var BAR_GROW_PRIMITIVE = cssPrimitive("bar-grow", [CHANNEL.scale], {
+    parameters: { from: { type: "number", default: "0", cssProperty: "--kui-bar-from" } }
+  });
+  var LOGO_BUILD_PRIMITIVE = cssPrimitive("logo-assemble", [
+    CHANNEL.opacity,
+    CHANNEL.scale,
+    CHANNEL.rotate
+  ]);
+  var ICON_TOGGLE_PRIMITIVE = {
+    id: "icon-toggle",
+    renderer: "javascript",
+    channels: [CHANNEL.translate, CHANNEL.rotate, CHANNEL.scale, CHANNEL.opacity, CHANNEL.clip],
+    parameters: {
+      duration: { type: "time", default: "260ms", cssProperty: "--kui-duration" },
+      ease: { type: "easing", default: "ease-out", cssProperty: "--kui-ease" }
+    },
+    supportedTimelines: ["time"],
+    supportedActivations: ["load"],
+    defaultActivation: "load",
+    perfClass: "compositor",
+    reducedMotion: "disable",
+    prepare: () => inertInstance()
+  };
   var SVG_PRIMITIVES = [
     {
       id: "path-morph",
@@ -5293,19 +6732,109 @@ var kuinetic = (() => {
       perfClass: "paint",
       reducedMotion: "disable",
       prepare: deferPrepare(prepareMorph)
-    }
+    },
+    PATH_DRAW_PRIMITIVE,
+    SHAPE_FILL_PRIMITIVE,
+    BAR_GROW_PRIMITIVE,
+    LOGO_BUILD_PRIMITIVE,
+    ICON_TOGGLE_PRIMITIVE
   ];
   var SVG_PRESETS = [
     { name: "icon-morph", primitive: "path-morph" },
-    { name: "blob-morph", primitive: "path-morph", params: { duration: "800ms" } }
+    { name: "blob-morph", primitive: "path-morph", params: { duration: "800ms" } },
+    // Stroke draws. One keyframe block each rather than one shared block, matching the
+    // progress-ring/gauge-sweep/donut-sweep/sparkline-draw group in numbers.ts: identical bodies
+    // today, but each name is free to diverge and a consumer can restyle one without the others.
+    { name: "draw-stroke", primitive: "path-draw", keyframes: "kui-draw-stroke", params: { duration: "800ms", ease: "ease-in-out" } },
+    { name: "draw-signature", primitive: "path-draw", keyframes: "kui-draw-signature", params: { duration: "1600ms", ease: "ease-in-out" } },
+    { name: "draw-underline", primitive: "path-draw", keyframes: "kui-draw-underline", params: { duration: "420ms" } },
+    { name: "checkmark-draw", primitive: "path-draw", keyframes: "kui-checkmark-draw", params: { duration: "320ms" } },
+    { name: "cross-draw", primitive: "path-draw", keyframes: "kui-cross-draw", params: { duration: "260ms" } },
+    { name: "chart-line-draw", primitive: "path-draw", keyframes: "kui-chart-line-draw", params: { duration: "1200ms", ease: "ease-in-out" } },
+    { name: "gradient-stroke", primitive: "path-draw", keyframes: "kui-gradient-stroke", params: { duration: "2400ms", ease: "ease-in-out" } },
+    // Fills.
+    { name: "heart-fill", primitive: "shape-fill", keyframes: "kui-heart-fill", params: { duration: "420ms" } },
+    { name: "bookmark-fill", primitive: "shape-fill", keyframes: "kui-bookmark-fill", params: { duration: "360ms" } },
+    { name: "chart-area-fill", primitive: "shape-fill", keyframes: "kui-chart-area-fill", params: { duration: "900ms" } },
+    // `cloak: true`: `kui-chart-bar-grow`'s `from { scale: 1 0 }` (svg.css) is a zero-height box
+    // while paused, not just an invisible one — so it occupies no space in layout for the whole
+    // wait. Same defect `fold-panel` has, and the same fix shape: see svg.css's
+    // `[data-kui-fx~='chart-bar-grow'][data-kui-state='ready']` rule.
+    {
+      name: "chart-bar-grow",
+      primitive: "bar-grow",
+      keyframes: "kui-chart-bar-grow",
+      params: { duration: "700ms", ease: "back-out" },
+      cloak: true
+    },
+    { name: "logo-build", primitive: "logo-assemble", keyframes: "kui-logo-build", params: { duration: "520ms", ease: "back-out" } },
+    // Icon toggles — no `keyframes`, because their motion is a CSS transition in svg.css keyed off
+    // aria state, not a compiled animation. Same shape as forms.ts's native-state presets.
+    { name: "hamburger-to-x", primitive: "icon-toggle" },
+    { name: "play-to-pause", primitive: "icon-toggle" },
+    { name: "plus-to-minus", primitive: "icon-toggle" }
   ];
   function registerSvg(registry) {
     return registry.registerPrimitives(SVG_PRIMITIVES).registerPresets(SVG_PRESETS);
   }
 
   // src/effects/three-d/index.ts
+  var FLIP_CONTROL_SELECTOR = ":scope > .kui-flip-control";
+  function prepareCardToggle(el, params, ctx) {
+    const trigger = params.text("trigger", "click");
+    if (trigger === "click") return () => {
+    };
+    if (!supportsFineHover(ctx.win)) return () => {
+    };
+    const control = el.querySelector(FLIP_CONTROL_SELECTOR);
+    if (!control) {
+      ctx.warn(`flip-card trigger:${trigger} found no direct-child .kui-flip-control \u2014 the card will not flip`);
+      return () => {
+      };
+    }
+    const set = (flipped) => control.setAttribute("aria-pressed", String(flipped));
+    const isFlipped = () => control.getAttribute("aria-pressed") === "true";
+    const onEnter = () => {
+      set(trigger === "hover-toggle" ? !isFlipped() : true);
+    };
+    const onLeave = () => set(false);
+    el.addEventListener("pointerenter", onEnter, { passive: true });
+    if (trigger === "hover") el.addEventListener("pointerleave", onLeave, { passive: true });
+    return () => {
+      el.removeEventListener("pointerenter", onEnter);
+      el.removeEventListener("pointerleave", onLeave);
+    };
+  }
+  var CARD_TOGGLE_PRIMITIVE = {
+    id: "card-toggle",
+    renderer: "javascript",
+    channels: [CHANNEL.rotate],
+    parameters: {
+      duration: { type: "time", default: "700ms", cssProperty: "--kui-duration" },
+      ease: { type: "easing", default: "ease-in-out", cssProperty: "--kui-ease" },
+      perspective: { type: "length", default: "1600px", cssProperty: "--kui-perspective" },
+      trigger: {
+        type: "keyword",
+        default: "click",
+        cssProperty: "--kui-flip-trigger",
+        values: ["click", "hover", "hover-latch", "hover-toggle"]
+      }
+    },
+    supportedTimelines: ["time"],
+    supportedActivations: ["load"],
+    defaultActivation: "load",
+    perfClass: "compositor",
+    reducedMotion: "disable",
+    prepare: deferPrepare(prepareCardToggle)
+  };
   var THREE_D_PRIMITIVES = [
-    cssPrimitive("flip-face", [CHANNEL.rotate], {
+    // `skew`, not `rotate`: the keyframes in three-d.css write `transform: perspective(...)
+    // rotateX/Y(...)`, not the individual `rotate:` property — `perspective` only creates depth for
+    // an element's *children*, so giving one of these effects its own depth means reaching for the
+    // `perspective()` transform *function*, which only exists inside the `transform` shorthand.
+    // `CHANNEL.skew` is this catalog's name for "claims the whole `transform` shorthand"; see the
+    // comment on it in `core/types.ts`.
+    cssPrimitive("flip-face", [CHANNEL.skew], {
       parameters: {
         angle: { type: "angle", default: "180deg", cssProperty: "--kui-from-angle" },
         perspective: { type: "length", default: "1200px", cssProperty: "--kui-perspective" }
@@ -5315,12 +6844,19 @@ var kuinetic = (() => {
       parameters: { distance: { type: "length", default: "40px", cssProperty: "--kui-distance" } }
     }),
     cssPrimitive("wipe", [CHANNEL.clip]),
-    cssPrimitive("bar", [CHANNEL.scale])
+    // `from` gives `loading-bar` a real knob on its start scale — it had none before, unlike
+    // `flip-face`'s `angle:` two rows up. `--kui-bar-from` is also what the fold-panel-style
+    // `[data-kui-fx~='loading-bar'][data-kui-state='ready']` gate neutralizes in three-d.css; see
+    // that rule's comment for the on:enter fix this parameter doubles as.
+    cssPrimitive("bar", [CHANNEL.scale], {
+      parameters: { from: { type: "number", default: "0", cssProperty: "--kui-bar-from" } }
+    }),
+    CARD_TOGGLE_PRIMITIVE
   ];
   var THREE_D_PRESETS = [
     // --- 3D & perspective ---
-    { name: "card-flip-y", primitive: "flip-face", keyframes: "kui-card-flip-y" },
-    { name: "card-flip-x", primitive: "flip-face", keyframes: "kui-card-flip-x" },
+    { name: "card-flip-y", primitive: "flip-face", keyframes: "kui-card-flip-y", cloak: true },
+    { name: "card-flip-x", primitive: "flip-face", keyframes: "kui-card-flip-x", cloak: true },
     { name: "cube-rotate", primitive: "flip-face", keyframes: "kui-cube-rotate", params: { angle: "90deg" } },
     {
       name: "book-page-turn",
@@ -5328,17 +6864,32 @@ var kuinetic = (() => {
       keyframes: "kui-book-page-turn",
       params: { angle: "-160deg", duration: "900ms" }
     },
+    // `cloak: true`, unlike its `flip-face` siblings above: those are `to`-only keyframes, so their
+    // paused/waiting box is the ordinary, untransformed rest state. `fold-panel` is `from`-only —
+    // its `rotateX(-90deg)` (three-d.css) *is* the paused box, edge-on and zero-height, so it holds
+    // no space in layout for the whole wait; see the
+    // `[data-kui-fx~='fold-panel'][data-kui-state='ready']` rule in three-d.css for the other half
+    // of that fix. `cloak` only ever hid the pre-JS flash, not this, but adding it here keeps the
+    // pre-JS and post-JS "ready" appearances the same (invisible) instead of trading one flash for
+    // the other.
     {
       name: "fold-panel",
       primitive: "flip-face",
       keyframes: "kui-fold-panel",
-      params: { angle: "-90deg" }
+      params: { angle: "-90deg" },
+      cloak: true
     },
     // --- page transitions ---
     { name: "page-fade", primitive: "page-reveal", keyframes: "kui-page-fade" },
     { name: "page-slide", primitive: "page-reveal", keyframes: "kui-page-slide" },
     { name: "curtain-wipe", primitive: "wipe", keyframes: "kui-curtain-wipe", params: { duration: "800ms" } },
-    { name: "loading-bar", primitive: "bar", keyframes: "kui-loading-bar" }
+    // `cloak: true` for the same reason as `fold-panel`: `kui-loading-bar`'s `from { scale: 0 1 }`
+    // (three-d.css) is a zero-width box, not just an invisible one — see that file's
+    // `[data-kui-fx~='loading-bar'][data-kui-state='ready']` rule.
+    { name: "loading-bar", primitive: "bar", keyframes: "kui-loading-bar", cloak: true },
+    // No `keyframes`: its motion is a CSS transition in three-d.css keyed off the control's
+    // aria-pressed, not a compiled animation. Same shape as the icon toggles in svg.ts.
+    { name: "flip-card", primitive: "card-toggle" }
   ];
   function registerThreeD(registry) {
     return registry.registerPrimitives(THREE_D_PRIMITIVES).registerPresets(THREE_D_PRESETS);
@@ -5371,7 +6922,7 @@ var kuinetic = (() => {
   if (!document.getElementById('kuinetic-styles')) {
     var style = document.createElement('style')
     style.id = 'kuinetic-styles'
-    style.textContent = "/* src/css/base.css */\n@layer kui.tokens, kui.presets, kui.effects, kui.policy;\n@layer kui.tokens {\n  :root {\n    --kui-ease-expo-in: cubic-bezier(0.7, 0, 0.84, 0);\n    --kui-ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1);\n    --kui-ease-expo-in-out: cubic-bezier(0.87, 0, 0.13, 1);\n    --kui-ease-back-in: cubic-bezier(0.36, 0, 0.66, -0.56);\n    --kui-ease-back-out: cubic-bezier(0.34, 1.56, 0.64, 1);\n    --kui-ease-back-in-out: cubic-bezier(0.68, -0.6, 0.32, 1.6);\n    --kui-ease-quart-out: cubic-bezier(0.25, 1, 0.5, 1);\n    --kui-ease-circ-out: cubic-bezier(0, 0.55, 0.45, 1);\n    --kui-ease-spring: linear(0, 0.4 12%, 0.9 25%, 1.06 38%, 1.01 62%, 1);\n  }\n  [data-kui-fx] {\n    --kui-dir: 1;\n  }\n  :dir(rtl) [data-kui-fx] {\n    --kui-dir: -1;\n  }\n}\n@layer kui.policy {\n  html[data-kui-cloak] [data-kui][data-kui-reveal]:not([data-kui-state]) {\n    opacity: 0 !important;\n  }\n  @media (prefers-reduced-motion: reduce) {\n    [data-kui-rm],\n    [data-kui-rm]::before,\n    [data-kui-rm]::after,\n    [data-kui-rm] .kui-odometer-strip,\n    [data-kui-rm][data-kui-fx~=label-float] ~ label,\n    [data-kui-rm][data-kui-fx~=input-underline-grow] ~ .kui-underline,\n    [data-kui-rm][data-kui-fx~=toggle-morph] ~ .kui-track,\n    [data-kui-rm][data-kui-fx~=toggle-morph] ~ .kui-track .kui-thumb,\n    [data-kui-rm][data-kui-fx~=checkbox-draw] ~ svg path,\n    [data-kui-rm][data-kui-fx~=radio-fill] ~ .kui-dot,\n    [data-kui-rm][data-kui-fx~=strength-meter] ~ .kui-meter > * {\n      transition-duration: 1ms !important;\n      transition-delay: 0ms !important;\n    }\n    [data-kui-rm=shorten],\n    [data-kui-rm=shorten]::before,\n    [data-kui-rm=shorten]::after {\n      animation-duration: 1ms !important;\n      animation-delay: 0ms !important;\n    }\n    [data-kui-rm=crossfade] {\n      animation-name: kui-in !important;\n      animation-duration: 200ms !important;\n    }\n    [data-kui-rm=disable] {\n      animation: none !important;\n      opacity: 1 !important;\n      translate: none !important;\n      scale: none !important;\n      rotate: none !important;\n      filter: none !important;\n    }\n  }\n  @media print {\n    [data-kui-fx],\n    [data-kui-reveal] {\n      animation: none !important;\n      opacity: 1 !important;\n      translate: none !important;\n      scale: none !important;\n      rotate: none !important;\n      filter: none !important;\n    }\n  }\n}\n\n/* src/css/presets.generated.css */\n@layer kui.presets {\n  [data-kui-fx~=back-in-down] {\n    --kui-distance: 120px;\n    --kui-reveal-ease: expo-out;\n  }\n  [data-kui-fx~=back-in-up] {\n    --kui-distance: 120px;\n    --kui-reveal-ease: expo-out;\n  }\n  [data-kui-fx~=blob-morph] {\n    --kui-path-morph-duration: 800ms;\n  }\n  [data-kui-fx~=bob] {\n    --kui-ambient-float-duration: 2s;\n    --kui-distance: 8px;\n  }\n  [data-kui-fx~=book-page-turn] {\n    --kui-from-angle: -160deg;\n    --kui-flip-face-duration: 900ms;\n  }\n  [data-kui-fx~=bounce-in] {\n    --kui-from-scale: 0.3;\n    --kui-scale-ease: back-out;\n  }\n  [data-kui-fx~=bounce-in-down] {\n    --kui-distance: 60px;\n    --kui-reveal-ease: back-out;\n  }\n  [data-kui-fx~=bounce-in-up] {\n    --kui-distance: 60px;\n    --kui-reveal-ease: back-out;\n  }\n  [data-kui-fx~=confetti-burst] {\n    --kui-feedback-burst-duration: 900ms;\n    --kui-pop-scale: 1.15;\n  }\n  [data-kui-fx~=count-bump] {\n    --kui-feedback-pop-duration: 280ms;\n    --kui-pop-scale: 1.3;\n  }\n  [data-kui-fx~=count-compact] {\n    --kui-from: 0;\n    --kui-to: 128400;\n    --kui-format: compact;\n  }\n  [data-kui-fx~=count-currency] {\n    --kui-from: 0;\n    --kui-to: 4820;\n    --kui-format: currency;\n    --kui-decimals: 0;\n  }\n  [data-kui-fx~=count-down] {\n    --kui-from: 100;\n    --kui-to: 0;\n  }\n  [data-kui-fx~=count-percent] {\n    --kui-from: 0;\n    --kui-to: 0.82;\n    --kui-format: percent;\n    --kui-decimals: 0;\n  }\n  [data-kui-fx~=count-up] {\n    --kui-from: 0;\n    --kui-to: 100;\n  }\n  [data-kui-fx~=cube-rotate] {\n    --kui-from-angle: 90deg;\n  }\n  [data-kui-fx~=cursor-follow] {\n    --kui-stiffness: 300;\n    --kui-damping: 30;\n  }\n  [data-kui-fx~=cursor-invert] {\n    --kui-stiffness: 260;\n    --kui-damping: 26;\n  }\n  [data-kui-fx~=cursor-label] {\n    --kui-stiffness: 260;\n    --kui-damping: 26;\n  }\n  [data-kui-fx~=cursor-lag] {\n    --kui-stiffness: 80;\n    --kui-damping: 14;\n  }\n  [data-kui-fx~=curtain-wipe] {\n    --kui-wipe-duration: 800ms;\n  }\n  [data-kui-fx~=decode] {\n    --kui-charset: binary;\n  }\n  [data-kui-fx~=depth-layer] {\n    --kui-distance: 200px;\n  }\n  [data-kui-fx~=dot-grid-drift] {\n    --kui-ambient-gradient-duration: 16s;\n    --kui-ambient-gradient-ease: linear;\n  }\n  [data-kui-fx~=drag-inertia] {\n    --kui-inertia: true;\n  }\n  [data-kui-fx~=drag-x] {\n    --kui-axis: x;\n  }\n  [data-kui-fx~=drag-y] {\n    --kui-axis: y;\n  }\n  [data-kui-fx~=elastic-pull] {\n    --kui-return: true;\n    --kui-bounds: 80;\n  }\n  [data-kui-fx~=expand-to-modal] {\n    --kui-flip-scale: true;\n    --kui-flip-container-duration: 500ms;\n  }\n  [data-kui-fx~=floating-shapes] {\n    --kui-ambient-float-duration: 6s;\n    --kui-distance: 10px;\n  }\n  [data-kui-fx~=fold-panel] {\n    --kui-from-angle: -90deg;\n  }\n  [data-kui-fx~=glitch] {\n    --kui-charset: symbols;\n  }\n  [data-kui-fx~=gradient-rotate-border] {\n    --kui-ambient-gradient-duration: 6s;\n    --kui-ambient-gradient-ease: linear;\n  }\n  [data-kui-fx~=grid-to-list] {\n    --kui-flip-scale: true;\n  }\n  [data-kui-fx~=heart-burst] {\n    --kui-feedback-burst-duration: 700ms;\n    --kui-pop-scale: 1.4;\n  }\n  [data-kui-fx~=highlight-sweep] {\n    --kui-sweep-color: gold;\n  }\n  [data-kui-fx~=line-grid-drift] {\n    --kui-ambient-gradient-duration: 16s;\n    --kui-ambient-gradient-ease: linear;\n  }\n  [data-kui-fx~=magnetic-snap] {\n    --kui-strength: 0.6;\n    --kui-radius: 160;\n  }\n  [data-kui-fx~=mega-menu-drop] {\n    --kui-panel-reveal-duration: 550ms;\n  }\n  [data-kui-fx~=noise-overlay] {\n    --kui-ambient-gradient-duration: 650ms;\n    --kui-ambient-gradient-ease: steps(6);\n  }\n  [data-kui-fx~=odometer-roll] {\n    --kui-from: 0;\n    --kui-to: 4820;\n  }\n  [data-kui-fx~=pin-section] {\n    --kui-distance: 100vh;\n    --kui-spacer: true;\n  }\n  [data-kui-fx~=pin-spacer] {\n    --kui-spacer: true;\n  }\n  [data-kui-fx~=pin-until] {\n    --kui-spacer: false;\n  }\n  [data-kui-fx~=pop-in] {\n    --kui-from-scale: 0.6;\n    --kui-scale-ease: back-out;\n  }\n  [data-kui-fx~=pop-out] {\n    --kui-from-scale: 0.6;\n    --kui-scale-ease: back-in;\n  }\n  [data-kui-fx~=pull-to-refresh] {\n    --kui-feedback-pull-duration: 900ms;\n    --kui-feedback-pull-ease: ease-out;\n  }\n  [data-kui-fx~=rotate-in-left] {\n    --kui-from-angle: -45deg;\n  }\n  [data-kui-fx~=rotate-in-right] {\n    --kui-from-angle: 45deg;\n  }\n  [data-kui-fx~=rubber-band] {\n    --kui-return: true;\n    --kui-bounds: 120;\n  }\n  [data-kui-fx~=scanline] {\n    --kui-ambient-gradient-duration: 3.5s;\n    --kui-ambient-gradient-ease: linear;\n  }\n  [data-kui-fx~=scramble] {\n    --kui-charset: upper;\n  }\n  [data-kui-fx~=scroll-snap-x] {\n    --kui-axis: x;\n  }\n  [data-kui-fx~=scroll-snap-y] {\n    --kui-axis: y;\n  }\n  [data-kui-fx~=scrollytelling-step] {\n    --kui-steps: 4;\n  }\n  [data-kui-fx~=slide-block-end] {\n    --kui-distance: 100px;\n    --kui-from-opacity: 1;\n  }\n  [data-kui-fx~=slide-block-start] {\n    --kui-distance: 100px;\n    --kui-from-opacity: 1;\n  }\n  [data-kui-fx~=slide-down] {\n    --kui-distance: 100px;\n    --kui-from-opacity: 1;\n  }\n  [data-kui-fx~=slide-inline-end] {\n    --kui-distance: 100px;\n    --kui-from-opacity: 1;\n  }\n  [data-kui-fx~=slide-inline-start] {\n    --kui-distance: 100px;\n    --kui-from-opacity: 1;\n  }\n  [data-kui-fx~=slide-left] {\n    --kui-distance: 100px;\n    --kui-from-opacity: 1;\n  }\n  [data-kui-fx~=slide-out-down] {\n    --kui-distance: 100px;\n    --kui-from-opacity: 1;\n  }\n  [data-kui-fx~=slide-out-left] {\n    --kui-distance: 100px;\n    --kui-from-opacity: 1;\n  }\n  [data-kui-fx~=slide-out-right] {\n    --kui-distance: 100px;\n    --kui-from-opacity: 1;\n  }\n  [data-kui-fx~=slide-out-up] {\n    --kui-distance: 100px;\n    --kui-from-opacity: 1;\n  }\n  [data-kui-fx~=slide-right] {\n    --kui-distance: 100px;\n    --kui-from-opacity: 1;\n  }\n  [data-kui-fx~=slide-up] {\n    --kui-distance: 100px;\n    --kui-from-opacity: 1;\n  }\n  [data-kui-fx~=snap-back] {\n    --kui-return: true;\n    --kui-stiffness: 260;\n  }\n  [data-kui-fx~=split-chars] {\n    --kui-unit: chars;\n    --kui-direction: fade;\n  }\n  [data-kui-fx~=split-lines] {\n    --kui-unit: lines;\n    --kui-direction: fade;\n  }\n  [data-kui-fx~=split-words] {\n    --kui-unit: words;\n    --kui-direction: fade;\n  }\n  [data-kui-fx~=spotlight-follow] {\n    --kui-ambient-gradient-duration: 9s;\n  }\n  [data-kui-fx~=stacking-cards] {\n    --kui-spacer: false;\n  }\n  [data-kui-fx~=starfield] {\n    --kui-ambient-gradient-duration: 40s;\n    --kui-ambient-gradient-ease: linear;\n  }\n  [data-kui-fx~=swing-in] {\n    --kui-from-angle: -15deg;\n    --kui-rotate-ease: back-out;\n  }\n  [data-kui-fx~=swipe-x] {\n    --kui-axis: x;\n  }\n  [data-kui-fx~=tab-indicator-slide] {\n    --kui-flip-indicator-duration: 300ms;\n  }\n  [data-kui-fx~=text-jitter] {\n    --kui-motion: jitter;\n  }\n  [data-kui-fx~=text-reveal-down] {\n    --kui-unit: words;\n    --kui-direction: down;\n  }\n  [data-kui-fx~=text-reveal-mask] {\n    --kui-unit: lines;\n    --kui-direction: mask;\n  }\n  [data-kui-fx~=text-reveal-up] {\n    --kui-unit: words;\n    --kui-direction: up;\n  }\n  [data-kui-fx~=text-wave] {\n    --kui-motion: wave;\n  }\n  [data-kui-fx~=throwable] {\n    --kui-inertia: true;\n    --kui-damping: 18;\n  }\n  [data-kui-fx~=toast-slide-out] {\n    --kui-feedback-toast-ease: ease-in;\n  }\n  [data-kui-fx~=typewriter] {\n    --kui-loop: false;\n  }\n  [data-kui-fx~=typewriter-loop] {\n    --kui-loop: true;\n  }\n  [data-kui-fx~=wave-blob] {\n    --kui-ambient-gradient-duration: 12s;\n  }\n  [data-kui-fx~=wobble] {\n    --kui-feedback-wobble-duration: 600ms;\n    --kui-feedback-wobble-ease: ease-in-out;\n  }\n}\n\n/* src/css/entrance.css */\n@layer kui.effects {\n  @keyframes kui-in {\n    from {\n      opacity: var(--kui-from-opacity, 0);\n    }\n  }\n  @keyframes kui-out {\n    to {\n      opacity: 0;\n    }\n  }\n  @keyframes kui-in-up {\n    from {\n      opacity: var(--kui-from-opacity, 0);\n      translate: 0 var(--kui-distance, 24px);\n    }\n  }\n  @keyframes kui-in-down {\n    from {\n      opacity: var(--kui-from-opacity, 0);\n      translate: 0 calc(var(--kui-distance, 24px) * -1);\n    }\n  }\n  @keyframes kui-in-left {\n    from {\n      opacity: var(--kui-from-opacity, 0);\n      translate: var(--kui-distance, 24px) 0;\n    }\n  }\n  @keyframes kui-in-right {\n    from {\n      opacity: var(--kui-from-opacity, 0);\n      translate: calc(var(--kui-distance, 24px) * -1) 0;\n    }\n  }\n  @keyframes kui-out-up {\n    to {\n      opacity: 0;\n      translate: 0 calc(var(--kui-distance, 24px) * -1);\n    }\n  }\n  @keyframes kui-out-down {\n    to {\n      opacity: 0;\n      translate: 0 var(--kui-distance, 24px);\n    }\n  }\n  @keyframes kui-out-left {\n    to {\n      opacity: 0;\n      translate: calc(var(--kui-distance, 24px) * -1) 0;\n    }\n  }\n  @keyframes kui-out-right {\n    to {\n      opacity: 0;\n      translate: var(--kui-distance, 24px) 0;\n    }\n  }\n  @keyframes kui-in-inline-start {\n    from {\n      opacity: var(--kui-from-opacity, 0);\n      translate: calc(var(--kui-distance, 24px) * var(--kui-dir, 1) * -1) 0;\n    }\n  }\n  @keyframes kui-in-inline-end {\n    from {\n      opacity: var(--kui-from-opacity, 0);\n      translate: calc(var(--kui-distance, 24px) * var(--kui-dir, 1)) 0;\n    }\n  }\n  @keyframes kui-zoom-in {\n    from {\n      scale: var(--kui-from-scale, 0.92);\n    }\n  }\n  @keyframes kui-zoom-out {\n    to {\n      scale: var(--kui-from-scale, 0.92);\n    }\n  }\n  @keyframes kui-zoom-in-up {\n    from {\n      scale: var(--kui-from-scale, 0.92);\n      translate: 0 var(--kui-distance, 24px);\n    }\n  }\n  @keyframes kui-zoom-in-down {\n    from {\n      scale: var(--kui-from-scale, 0.92);\n      translate: 0 calc(var(--kui-distance, 24px) * -1);\n    }\n  }\n  @keyframes kui-flip-in-x {\n    from {\n      rotate: x var(--kui-from-angle, 90deg);\n    }\n  }\n  @keyframes kui-flip-in-y {\n    from {\n      rotate: y var(--kui-from-angle, 90deg);\n    }\n  }\n  @keyframes kui-flip-out-x {\n    to {\n      rotate: x var(--kui-from-angle, 90deg);\n    }\n  }\n  @keyframes kui-flip-out-y {\n    to {\n      rotate: y var(--kui-from-angle, 90deg);\n    }\n  }\n  @keyframes kui-rotate-in {\n    from {\n      rotate: var(--kui-from-angle, -8deg);\n    }\n  }\n  @keyframes kui-rotate-out {\n    to {\n      rotate: var(--kui-from-angle, -8deg);\n    }\n  }\n  @keyframes kui-swing-in {\n    from {\n      rotate: var(--kui-from-angle, -15deg);\n    }\n  }\n  @keyframes kui-roll-in {\n    from {\n      rotate: var(--kui-from-angle, -120deg);\n      translate: calc(var(--kui-distance, 24px) * -1) 0;\n    }\n  }\n  @keyframes kui-roll-out {\n    to {\n      rotate: var(--kui-from-angle, -120deg);\n      translate: var(--kui-distance, 24px) 0;\n    }\n  }\n  @keyframes kui-blur-in {\n    from {\n      filter: blur(var(--kui-blur, 12px));\n    }\n  }\n  @keyframes kui-blur-out {\n    to {\n      filter: blur(var(--kui-blur, 12px));\n    }\n  }\n  @keyframes kui-fade-blur-up {\n    from {\n      opacity: var(--kui-from-opacity, 0);\n      translate: 0 var(--kui-distance, 24px);\n      filter: blur(var(--kui-blur, 12px));\n    }\n  }\n  @keyframes kui-fade-blur-in {\n    from {\n      opacity: var(--kui-from-opacity, 0);\n      filter: blur(var(--kui-blur, 12px));\n    }\n  }\n  [data-kui-fx*=flip-] {\n    transform-style: preserve-3d;\n  }\n}\n\n/* src/css/scroll.css */\n@layer kui.effects {\n  @keyframes kui-parallax-y {\n    from {\n      translate: 0 calc(var(--kui-distance, 100px) * -1);\n    }\n    to {\n      translate: 0 var(--kui-distance, 100px);\n    }\n  }\n  @keyframes kui-parallax-x {\n    from {\n      translate: calc(var(--kui-distance, 100px) * -1) 0;\n    }\n    to {\n      translate: var(--kui-distance, 100px) 0;\n    }\n  }\n  @keyframes kui-parallax-scale {\n    from {\n      scale: 1;\n    }\n    to {\n      scale: var(--kui-to-scale, 1.2);\n    }\n  }\n  @keyframes kui-parallax-rotate {\n    from {\n      rotate: 0deg;\n    }\n    to {\n      rotate: var(--kui-to-angle, 12deg);\n    }\n  }\n  @keyframes kui-scroll-fade {\n    from {\n      opacity: var(--kui-from-opacity, 0);\n    }\n    to {\n      opacity: 1;\n    }\n  }\n  @keyframes kui-progress-x {\n    from {\n      scale: 0 1;\n    }\n    to {\n      scale: 1 1;\n    }\n  }\n  @keyframes kui-progress-ring {\n    from {\n      stroke-dashoffset: var(--kui-path-length, 100);\n    }\n    to {\n      stroke-dashoffset: 0;\n    }\n  }\n  [data-kui-fx~=scroll-progress-bar] {\n    transform-origin: left center;\n  }\n  [data-kui-fx~=scroll-progress-ring] {\n    stroke-dasharray: var(--kui-path-length, 100);\n  }\n  @supports (animation-timeline: view()) {\n    [data-kui-timeline] {\n      animation-range: var(--kui-range, entry 0% cover 60%);\n    }\n  }\n}\n\n/* src/css/three-d.css */\n@layer kui.effects {\n  @keyframes kui-card-flip-y {\n    to {\n      rotate: y var(--kui-from-angle, 180deg);\n    }\n  }\n  @keyframes kui-card-flip-x {\n    to {\n      rotate: x var(--kui-from-angle, 180deg);\n    }\n  }\n  @keyframes kui-cube-rotate {\n    to {\n      rotate: y var(--kui-from-angle, 90deg);\n    }\n  }\n  @keyframes kui-book-page-turn {\n    to {\n      rotate: y var(--kui-from-angle, -160deg);\n    }\n  }\n  @keyframes kui-fold-panel {\n    from {\n      rotate: x var(--kui-from-angle, -90deg);\n    }\n  }\n  [data-kui-fx~=card-flip-x],\n  [data-kui-fx~=card-flip-y],\n  [data-kui-fx~=cube-rotate],\n  [data-kui-fx~=book-page-turn],\n  [data-kui-fx~=fold-panel] {\n    transform-style: preserve-3d;\n    perspective: var(--kui-perspective, 1200px);\n  }\n  [data-kui-fx~=book-page-turn] {\n    transform-origin: left center;\n  }\n  [data-kui-fx~=fold-panel] {\n    transform-origin: top center;\n  }\n  @keyframes kui-page-fade {\n    from {\n      opacity: 0;\n    }\n  }\n  @keyframes kui-page-slide {\n    from {\n      opacity: 0;\n      translate: 0 var(--kui-distance, 40px);\n    }\n  }\n  @keyframes kui-curtain-wipe {\n    from {\n      clip-path: inset(0 0 100% 0);\n    }\n  }\n  @keyframes kui-loading-bar {\n    from {\n      scale: 0 1;\n    }\n  }\n  [data-kui-fx~=loading-bar] {\n    transform-origin: left center;\n  }\n}\n\n/* src/css/media.css */\n@layer kui.effects {\n  @keyframes kui-wipe-up {\n    from {\n      clip-path: inset(100% 0 0);\n    }\n  }\n  @keyframes kui-wipe-down {\n    from {\n      clip-path: inset(0 0 100%);\n    }\n  }\n  @keyframes kui-wipe-left {\n    from {\n      clip-path: inset(0 100% 0 0);\n    }\n  }\n  @keyframes kui-wipe-right {\n    from {\n      clip-path: inset(0 0 0 100%);\n    }\n  }\n  @keyframes kui-wipe-circle {\n    from {\n      clip-path: circle(0 at 50% 50%);\n    }\n  }\n  @keyframes kui-wipe-diagonal {\n    from {\n      clip-path: polygon(0 0, 0 0, 0 0);\n    }\n    to {\n      clip-path: polygon(0 0, 200% 0, 0 200%);\n    }\n  }\n  @keyframes kui-curtain-reveal {\n    from {\n      clip-path: inset(0 50%);\n    }\n  }\n  @keyframes kui-before-after-wipe {\n    from {\n      clip-path: inset(0 100% 0 0);\n    }\n  }\n  @keyframes kui-mask-reveal {\n    from {\n      mask-position: 100% 0;\n    }\n    to {\n      mask-position: 0 0;\n    }\n  }\n  [data-kui-fx~=mask-reveal] {\n    mask-image:\n      linear-gradient(\n        90deg,\n        #000 0 45%,\n        transparent 55% 100%);\n    mask-size: 220% 100%;\n  }\n  @keyframes kui-ken-burns {\n    from {\n      scale: 1;\n      translate: 0 0;\n    }\n    to {\n      scale: var(--kui-to-scale, 1.12);\n      translate: var(--kui-distance, 24px) calc(var(--kui-distance, 24px) * -0.5);\n    }\n  }\n  @keyframes kui-ken-burns-out {\n    from {\n      scale: var(--kui-to-scale, 1.12);\n      translate: calc(var(--kui-distance, 24px) * -1) 0;\n    }\n    to {\n      scale: 1;\n      translate: 0 0;\n    }\n  }\n  @keyframes kui-blur-up {\n    from {\n      translate: 0 var(--kui-distance, 24px);\n      filter: blur(var(--kui-blur, 16px));\n    }\n    to {\n      translate: 0 0;\n      filter: blur(0);\n    }\n  }\n  @keyframes kui-duotone-hover {\n    from {\n      filter: grayscale(1) sepia(0.7) hue-rotate(330deg) saturate(2);\n    }\n    to {\n      filter: none;\n    }\n  }\n  @keyframes kui-grayscale-hover {\n    from {\n      filter: grayscale(1);\n    }\n    to {\n      filter: grayscale(0);\n    }\n  }\n  @keyframes kui-saturate-hover {\n    from {\n      filter: saturate(0.45);\n    }\n    to {\n      filter: saturate(1.35);\n    }\n  }\n  @keyframes kui-image-parallax-frame {\n    from {\n      translate: 0 calc(var(--kui-distance, 24px) * -1);\n    }\n    to {\n      translate: 0 var(--kui-distance, 24px);\n    }\n  }\n  @keyframes kui-lightbox-open {\n    from {\n      opacity: 0;\n      scale: 0.92;\n    }\n    to {\n      opacity: 1;\n      scale: 1;\n    }\n  }\n  @media (pointer: coarse) {\n    [data-kui-fx~=duotone-hover]:active,\n    [data-kui-fx~=grayscale-hover]:active,\n    [data-kui-fx~=saturate-hover]:active {\n      filter: none;\n    }\n  }\n}\n\n/* src/css/text.css */\n@layer kui.effects {\n  .kui-sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border: 0;\n  }\n  .kui-split-decorative {\n    display: inline;\n  }\n  .kui-split-item {\n    display: inline-block;\n    animation-duration: var(--kui-duration, 500ms);\n    animation-delay: calc(var(--kui-delay, 0ms) + var(--kui-i, 0) * var(--kui-stagger, 30ms));\n    animation-timing-function: var(--kui-ease, ease-out);\n    animation-fill-mode: both;\n  }\n  .kui-split-line {\n    display: block;\n  }\n  [data-kui-split-fx=fade] .kui-split-item {\n    animation-name: kui-split-reveal-fade;\n  }\n  [data-kui-split-fx=up] .kui-split-item {\n    animation-name: kui-split-reveal-up;\n  }\n  [data-kui-split-fx=down] .kui-split-item {\n    animation-name: kui-split-reveal-down;\n  }\n  [data-kui-split-fx=mask] .kui-split-item {\n    animation-name: kui-split-reveal-mask;\n  }\n  @keyframes kui-split-reveal-fade {\n    from {\n      opacity: 0;\n    }\n  }\n  @keyframes kui-split-reveal-up {\n    from {\n      opacity: 0;\n      translate: 0 0.6em;\n    }\n  }\n  @keyframes kui-split-reveal-down {\n    from {\n      opacity: 0;\n      translate: 0 -0.6em;\n    }\n  }\n  @keyframes kui-split-reveal-mask {\n    from {\n      opacity: 0;\n      clip-path: inset(0 0 100% 0);\n    }\n  }\n  [data-kui-split-fx=wave] .kui-split-item {\n    animation-name: kui-split-wave;\n    animation-duration: 1400ms;\n    animation-iteration-count: infinite;\n    animation-timing-function: ease-in-out;\n  }\n  [data-kui-split-fx=jitter] .kui-split-item {\n    animation-name: kui-split-jitter;\n    animation-duration: 220ms;\n    animation-iteration-count: infinite;\n    animation-timing-function: ease-in-out;\n    animation-direction: alternate;\n  }\n  @keyframes kui-split-wave {\n    0%, 100% {\n      translate: 0 0;\n    }\n    50% {\n      translate: 0 -0.35em;\n    }\n  }\n  @keyframes kui-split-jitter {\n    from {\n      translate: 0 0;\n      rotate: 0deg;\n    }\n    to {\n      translate: 0 0.08em;\n      rotate: 3deg;\n    }\n  }\n  .kui-typewriter::after {\n    content: \"\";\n    display: inline-block;\n    width: 0.08em;\n    margin-inline-start: 0.05em;\n    height: 1em;\n    vertical-align: -0.15em;\n    background: currentColor;\n    animation: kui-caret-blink 1s steps(1) infinite;\n  }\n  @keyframes kui-caret-blink {\n    50% {\n      opacity: 0;\n    }\n  }\n  .kui-scramble {\n    font-variant-numeric: tabular-nums;\n  }\n  [data-kui-fx~=word-cycler] {\n    display: inline-block;\n    transition: opacity 150ms ease-out;\n  }\n  [data-kui-fx~=word-cycler].kui-word-cycler-swap {\n    opacity: 0;\n  }\n  [data-kui-fx~=gradient-shimmer] {\n    background-image:\n      linear-gradient(\n        100deg,\n        currentColor 40%,\n        color-mix(in srgb, currentColor 35%, transparent) 50%,\n        currentColor 60%);\n    background-size: 220% 100%;\n    -webkit-background-clip: text;\n    background-clip: text;\n    -webkit-text-fill-color: transparent;\n    --kui-fx-gradient-shimmer-iterations: infinite;\n  }\n  @keyframes kui-gradient-shimmer {\n    from {\n      background-position: 200% 0;\n    }\n    to {\n      background-position: -200% 0;\n    }\n  }\n  [data-kui-fx~=gradient-sweep] {\n    background-image:\n      linear-gradient(\n        100deg,\n        transparent 30%,\n        color-mix(in srgb, var(--kui-sweep-color, currentColor) 70%, transparent) 50%,\n        transparent 70%);\n    background-size: 260% 100%;\n    -webkit-background-clip: text;\n    background-clip: text;\n    -webkit-text-fill-color: transparent;\n  }\n  @keyframes kui-gradient-sweep {\n    from {\n      background-position: 220% 0;\n    }\n    to {\n      background-position: -60% 0;\n    }\n  }\n  [data-kui-fx~=highlight-sweep] {\n    background-image: linear-gradient(90deg, color-mix(in srgb, var(--kui-sweep-color, currentColor) 55%, transparent) 0 100%);\n    background-repeat: no-repeat;\n    background-size: 0% 100%;\n    padding: 0 0.05em;\n  }\n  @keyframes kui-highlight-sweep {\n    to {\n      background-size: 100% 100%;\n    }\n  }\n  [data-kui-fx~=underline-draw] {\n    background-image: linear-gradient(var(--kui-sweep-color, currentColor), var(--kui-sweep-color, currentColor));\n    background-repeat: no-repeat;\n    background-position: 0 100%;\n    background-size: 0% 2px;\n    padding-bottom: 0.15em;\n  }\n  @keyframes kui-underline-draw {\n    to {\n      background-size: 100% 2px;\n    }\n  }\n  [data-kui-fx~=text-outline-fill] {\n    -webkit-text-stroke: 1px currentColor;\n    color: transparent;\n  }\n  @keyframes kui-text-outline-fill {\n    to {\n      color: currentColor;\n    }\n  }\n  @keyframes kui-var-weight {\n    from {\n      font-weight: var(--kui-from-weight, 100);\n    }\n    to {\n      font-weight: var(--kui-to-weight, 800);\n    }\n  }\n  @keyframes kui-var-width {\n    from {\n      font-stretch: var(--kui-from-width, 75%);\n    }\n    to {\n      font-stretch: var(--kui-to-width, 125%);\n    }\n  }\n  @keyframes kui-var-slant {\n    from {\n      font-style: oblique var(--kui-from-slant, 0deg);\n    }\n    to {\n      font-style: oblique var(--kui-to-slant, 10deg);\n    }\n  }\n  [data-kui-fx~=marquee],\n  [data-kui-fx~=marquee-scroll-linked] {\n    display: flex;\n    width: max-content;\n    will-change: translate;\n  }\n  [data-kui-fx~=marquee] {\n    --kui-fx-marquee-iterations: infinite;\n  }\n  @keyframes kui-marquee {\n    to {\n      translate: -50% 0;\n    }\n  }\n  @property --kui-redaction-x { syntax: \"<percentage>\"; inherits: true; initial-value: 0%; }\n  [data-kui-fx~=redaction-reveal] {\n    position: relative;\n    display: inline-block;\n  }\n  [data-kui-fx~=redaction-reveal]::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    background: var(--kui-bar-color, #111);\n    clip-path: inset(0 0 0 var(--kui-redaction-x));\n  }\n  @keyframes kui-redaction-reveal {\n    to {\n      --kui-redaction-x: 100%;\n    }\n  }\n  [data-kui-fx~=text-3d-extrude] {\n    display: inline-block;\n    text-shadow:\n      1px 1px 0 color-mix(in srgb, currentColor 70%, transparent),\n      2px 2px 0 color-mix(in srgb, currentColor 60%, transparent),\n      3px 3px 0 color-mix(in srgb, currentColor 50%, transparent),\n      4px 4px 0 color-mix(in srgb, currentColor 40%, transparent),\n      5px 5px 0 color-mix(in srgb, currentColor 30%, transparent),\n      6px 6px 8px rgb(0 0 0 / 0.35);\n  }\n  @keyframes kui-text-3d-extrude {\n    from {\n      rotate: var(--kui-from-angle, -20deg);\n      translate: 0 var(--kui-distance, 32px);\n    }\n    to {\n      rotate: 0deg;\n      translate: 0 0;\n    }\n  }\n}\n\n/* src/css/navigation.css */\n@layer kui.effects {\n  @keyframes kui-nav-reveal {\n    from {\n      opacity: 0;\n      translate: 0 var(--kui-distance, 16px);\n    }\n  }\n  @keyframes kui-menu-fullscreen {\n    from {\n      opacity: 0;\n      clip-path: circle(0% at var(--kui-origin, 100% 0%));\n    }\n    to {\n      opacity: 1;\n      clip-path: circle(150% at var(--kui-origin, 100% 0%));\n    }\n  }\n  @keyframes kui-panel-reveal {\n    from {\n      opacity: 0;\n      translate: 0 calc(var(--kui-distance, 10px) * -1);\n    }\n  }\n  @keyframes kui-drawer-slide-right {\n    from {\n      translate: 100% 0;\n    }\n  }\n  [data-kui-fx~=header-shrink] {\n    --kui-shrink: 0;\n    padding-block: calc(1.4rem - 0.7rem * var(--kui-shrink, 0));\n    font-size: calc(1rem - 0.15rem * var(--kui-shrink, 0));\n    transition:\n      padding-block 200ms ease-out,\n      font-size 200ms ease-out,\n      box-shadow 200ms ease-out;\n  }\n  [data-kui-fx~=header-shrink][data-kui-shrunk=true] {\n    box-shadow: 0 2px 10px rgb(0 0 0 / 0.12);\n  }\n  [data-kui-fx~=header-hide-on-scroll] {\n    transition: translate 220ms ease-out;\n  }\n  [data-kui-fx~=header-hide-on-scroll][data-kui-hidden=true] {\n    translate: 0 -100%;\n  }\n  [data-kui-fx~=back-to-top-fade] {\n    opacity: 0;\n    translate: 0 12px;\n    pointer-events: none;\n    transition: opacity 200ms ease-out, translate 200ms ease-out;\n  }\n  [data-kui-fx~=back-to-top-fade][data-kui-visible=true] {\n    opacity: 1;\n    translate: 0 0;\n    pointer-events: auto;\n  }\n}\n\n/* src/css/forms.css */\n@layer kui.effects {\n  [data-kui-fx~=label-float] ~ label {\n    transition: translate 180ms ease-out, scale 180ms ease-out;\n    transform-origin: left center;\n  }\n  [data-kui-fx~=label-float]:focus ~ label,\n  [data-kui-fx~=label-float]:not(:placeholder-shown) ~ label {\n    translate: 0 -1.35rem;\n    scale: 0.82;\n  }\n  [data-kui-fx~=input-underline-grow] ~ .kui-underline {\n    display: block;\n    height: 2px;\n    background: currentColor;\n    scale: 0 1;\n    transform-origin: left center;\n    transition: scale 220ms ease-out;\n  }\n  [data-kui-fx~=input-underline-grow]:focus ~ .kui-underline {\n    scale: 1 1;\n  }\n  @keyframes kui-focus-ring-grow {\n    from {\n      box-shadow: 0 0 0 0 var(--kui-ring-color, rgb(210 105 30 / 0.55));\n    }\n    to {\n      box-shadow: 0 0 0 5px var(--kui-ring-color, rgb(210 105 30 / 0.55));\n    }\n  }\n  @keyframes kui-validate-shake {\n    10%, 90% {\n      translate: -1px 0;\n    }\n    20%, 80% {\n      translate: 2px 0;\n    }\n    30%, 50%, 70% {\n      translate: -4px 0;\n    }\n    40%, 60% {\n      translate: 4px 0;\n    }\n  }\n  [data-kui-fx~=validate-check] {\n    stroke-dasharray: 24;\n    stroke-dashoffset: 24;\n  }\n  @keyframes kui-validate-check {\n    to {\n      stroke-dashoffset: 0;\n    }\n  }\n  [data-kui-fx~=strength-meter] ~ .kui-meter > * {\n    background: var(--kui-meter-off, currentColor);\n    opacity: 0.2;\n    transition: opacity 200ms ease-out, background-color 200ms ease-out;\n  }\n  [data-kui-fx~=strength-meter][data-kui-strength-level=\"1\"] ~ .kui-meter > *:nth-child(-n+1),\n  [data-kui-fx~=strength-meter][data-kui-strength-level=\"2\"] ~ .kui-meter > *:nth-child(-n+2),\n  [data-kui-fx~=strength-meter][data-kui-strength-level=\"3\"] ~ .kui-meter > *:nth-child(-n+3),\n  [data-kui-fx~=strength-meter][data-kui-strength-level=\"4\"] ~ .kui-meter > *:nth-child(-n+4),\n  [data-kui-fx~=strength-meter][data-kui-strength-level=\"5\"] ~ .kui-meter > *:nth-child(-n+5),\n  [data-kui-fx~=strength-meter][data-kui-strength-level=\"6\"] ~ .kui-meter > *:nth-child(-n+6),\n  [data-kui-fx~=strength-meter][data-kui-strength-level=\"7\"] ~ .kui-meter > *:nth-child(-n+7),\n  [data-kui-fx~=strength-meter][data-kui-strength-level=\"8\"] ~ .kui-meter > *:nth-child(-n+8),\n  [data-kui-fx~=strength-meter][data-kui-strength-level=\"9\"] ~ .kui-meter > *:nth-child(-n+9),\n  [data-kui-fx~=strength-meter][data-kui-strength-level=\"10\"] ~ .kui-meter > *:nth-child(-n+10),\n  [data-kui-fx~=strength-meter][data-kui-strength-level=\"11\"] ~ .kui-meter > *:nth-child(-n+11),\n  [data-kui-fx~=strength-meter][data-kui-strength-level=\"12\"] ~ .kui-meter > *:nth-child(-n+12),\n  [data-kui-fx~=strength-meter][data-kui-strength-level=\"13\"] ~ .kui-meter > *:nth-child(-n+13),\n  [data-kui-fx~=strength-meter][data-kui-strength-level=\"14\"] ~ .kui-meter > *:nth-child(-n+14),\n  [data-kui-fx~=strength-meter][data-kui-strength-level=\"15\"] ~ .kui-meter > *:nth-child(-n+15),\n  [data-kui-fx~=strength-meter][data-kui-strength-level=\"16\"] ~ .kui-meter > *:nth-child(-n+16),\n  [data-kui-fx~=strength-meter][data-kui-strength-level=\"17\"] ~ .kui-meter > *:nth-child(-n+17),\n  [data-kui-fx~=strength-meter][data-kui-strength-level=\"18\"] ~ .kui-meter > *:nth-child(-n+18),\n  [data-kui-fx~=strength-meter][data-kui-strength-level=\"19\"] ~ .kui-meter > *:nth-child(-n+19),\n  [data-kui-fx~=strength-meter][data-kui-strength-level=\"20\"] ~ .kui-meter > *:nth-child(-n+20) {\n    opacity: 1;\n    background: var(--kui-meter-on, #2e9e5b);\n  }\n  [data-kui-fx~=toggle-morph] ~ .kui-track {\n    display: inline-block;\n    width: calc(40px * var(--kui-toggle-scale, 1));\n    height: calc(22px * var(--kui-toggle-scale, 1));\n    border-radius: 999px;\n    background: var(--dim, #9a8d80);\n    transition: background-color 200ms ease-out;\n    position: relative;\n  }\n  [data-kui-fx~=toggle-morph] ~ .kui-track .kui-thumb {\n    position: absolute;\n    top: calc(2px * var(--kui-toggle-scale, 1));\n    left: calc(2px * var(--kui-toggle-scale, 1));\n    width: calc(18px * var(--kui-toggle-scale, 1));\n    height: calc(18px * var(--kui-toggle-scale, 1));\n    border-radius: 50%;\n    background: var(--kui-thumb-color, #fff);\n    translate: 0 0;\n    transition: translate 200ms ease-out;\n  }\n  [data-kui-fx~=toggle-morph]:checked ~ .kui-track {\n    background: var(--accent, #d2691e);\n  }\n  [data-kui-fx~=toggle-morph]:checked ~ .kui-track .kui-thumb {\n    translate: calc(18px * var(--kui-toggle-scale, 1)) 0;\n  }\n  [data-kui-fx~=checkbox-draw] ~ svg path {\n    stroke-dasharray: 24;\n    stroke-dashoffset: 24;\n    transition: stroke-dashoffset 220ms ease-out;\n  }\n  [data-kui-fx~=checkbox-draw]:checked ~ svg path {\n    stroke-dashoffset: 0;\n  }\n  [data-kui-fx~=radio-fill] ~ .kui-dot {\n    display: inline-block;\n    width: calc(10px * var(--kui-radio-scale, 1));\n    height: calc(10px * var(--kui-radio-scale, 1));\n    border-radius: 50%;\n    background: var(--accent, #d2691e);\n    scale: 0;\n    transition: scale 180ms ease-out;\n  }\n  [data-kui-fx~=radio-fill]:checked ~ .kui-dot {\n    scale: 1;\n  }\n  [data-kui-fx~=range-fill] {\n    --kui-fill: 0%;\n    accent-color: var(--accent, #d2691e);\n    background:\n      linear-gradient(\n        to right,\n        var(--accent, #d2691e) var(--kui-fill, 0%),\n        var(--line, #2a2422) var(--kui-fill, 0%));\n    height: 4px;\n    border-radius: 999px;\n    appearance: none;\n    outline: none;\n  }\n  [data-kui-fx~=submit-to-spinner-to-check] .kui-stage-idle,\n  [data-kui-fx~=submit-to-spinner-to-check] .kui-stage-loading,\n  [data-kui-fx~=submit-to-spinner-to-check] .kui-stage-done {\n    display: none;\n  }\n  [data-kui-fx~=submit-to-spinner-to-check][data-kui-stage=idle] .kui-stage-idle,\n  [data-kui-fx~=submit-to-spinner-to-check][data-kui-stage=loading] .kui-stage-loading,\n  [data-kui-fx~=submit-to-spinner-to-check][data-kui-stage=done] .kui-stage-done {\n    display: inline-flex;\n  }\n  [data-kui-fx~=submit-to-spinner-to-check] .kui-spinner {\n    width: 1em;\n    height: 1em;\n    border-radius: 50%;\n    border: 2px solid currentColor;\n    border-top-color: transparent;\n    animation: kui-spin 700ms linear infinite;\n  }\n  @keyframes kui-spin {\n    to {\n      rotate: 360deg;\n    }\n  }\n  [data-kui-fx~=step-progress] {\n    cursor: pointer;\n  }\n  [data-kui-fx~=step-progress] > * {\n    background: var(--dim, #9a8d80);\n    opacity: 0.35;\n    transition: opacity 200ms ease-out, background-color 200ms ease-out;\n  }\n  [data-kui-fx~=step-progress][data-kui-step=\"0\"] > *:nth-child(-n+1),\n  [data-kui-fx~=step-progress][data-kui-step=\"1\"] > *:nth-child(-n+2),\n  [data-kui-fx~=step-progress][data-kui-step=\"2\"] > *:nth-child(-n+3),\n  [data-kui-fx~=step-progress][data-kui-step=\"3\"] > *:nth-child(-n+4),\n  [data-kui-fx~=step-progress][data-kui-step=\"4\"] > *:nth-child(-n+5),\n  [data-kui-fx~=step-progress][data-kui-step=\"5\"] > *:nth-child(-n+6),\n  [data-kui-fx~=step-progress][data-kui-step=\"6\"] > *:nth-child(-n+7),\n  [data-kui-fx~=step-progress][data-kui-step=\"7\"] > *:nth-child(-n+8),\n  [data-kui-fx~=step-progress][data-kui-step=\"8\"] > *:nth-child(-n+9),\n  [data-kui-fx~=step-progress][data-kui-step=\"9\"] > *:nth-child(-n+10),\n  [data-kui-fx~=step-progress][data-kui-step=\"10\"] > *:nth-child(-n+11),\n  [data-kui-fx~=step-progress][data-kui-step=\"11\"] > *:nth-child(-n+12),\n  [data-kui-fx~=step-progress][data-kui-step=\"12\"] > *:nth-child(-n+13),\n  [data-kui-fx~=step-progress][data-kui-step=\"13\"] > *:nth-child(-n+14),\n  [data-kui-fx~=step-progress][data-kui-step=\"14\"] > *:nth-child(-n+15),\n  [data-kui-fx~=step-progress][data-kui-step=\"15\"] > *:nth-child(-n+16),\n  [data-kui-fx~=step-progress][data-kui-step=\"16\"] > *:nth-child(-n+17),\n  [data-kui-fx~=step-progress][data-kui-step=\"17\"] > *:nth-child(-n+18),\n  [data-kui-fx~=step-progress][data-kui-step=\"18\"] > *:nth-child(-n+19),\n  [data-kui-fx~=step-progress][data-kui-step=\"19\"] > *:nth-child(-n+20) {\n    opacity: 1;\n    background: var(--accent, #d2691e);\n  }\n}\n\n/* src/css/ambient.css */\n@layer kui.effects {\n  [data-kui-fx~=gradient-mesh] {\n    background-image:\n      radial-gradient(\n        at 15% 20%,\n        color-mix(in srgb, var(--kui-c1, #7c3aed) 55%, transparent),\n        transparent 55%),\n      radial-gradient(\n        at 85% 15%,\n        color-mix(in srgb, var(--kui-c2, #06b6d4) 50%, transparent),\n        transparent 55%),\n      radial-gradient(\n        at 50% 85%,\n        color-mix(in srgb, var(--kui-c3, #f97316) 45%, transparent),\n        transparent 55%);\n    background-size: 200% 200%;\n    --kui-fx-gradient-mesh-iterations: infinite;\n  }\n  @keyframes kui-gradient-mesh {\n    0%, 100% {\n      background-position:\n        0% 0%,\n        100% 0%,\n        50% 100%;\n    }\n    50% {\n      background-position:\n        25% 35%,\n        75% 30%,\n        35% 70%;\n    }\n  }\n  [data-kui-fx~=aurora] {\n    background-image:\n      linear-gradient(\n        120deg,\n        color-mix(in srgb, var(--kui-c1, #34d399) 45%, transparent),\n        transparent 45%),\n      linear-gradient(\n        240deg,\n        color-mix(in srgb, var(--kui-c2, #60a5fa) 45%, transparent),\n        transparent 45%),\n      linear-gradient(\n        0deg,\n        color-mix(in srgb, var(--kui-c3, #c084fc) 40%, transparent),\n        transparent 50%);\n    background-size: 260% 260%;\n    --kui-fx-aurora-iterations: infinite;\n  }\n  @keyframes kui-aurora {\n    0%, 100% {\n      background-position:\n        0% 50%,\n        100% 50%,\n        50% 0%;\n    }\n    50% {\n      background-position:\n        60% 30%,\n        40% 70%,\n        55% 60%;\n    }\n  }\n  [data-kui-fx~=wave-blob] {\n    background-image:\n      radial-gradient(\n        circle,\n        color-mix(in srgb, var(--kui-c1, #22d3ee) 50%, transparent),\n        transparent 60%);\n    background-size: 140% 140%;\n    background-repeat: no-repeat;\n    --kui-fx-wave-blob-iterations: infinite;\n  }\n  @keyframes kui-wave-blob {\n    0%, 100% {\n      background-position: 20% 30%;\n      background-size: 140% 140%;\n    }\n    33% {\n      background-position: 70% 20%;\n      background-size: 160% 160%;\n    }\n    66% {\n      background-position: 50% 75%;\n      background-size: 120% 120%;\n    }\n  }\n  [data-kui-fx~=spotlight-follow] {\n    background-image:\n      radial-gradient(\n        circle,\n        color-mix(in srgb, var(--kui-c1, #fde68a) 65%, transparent),\n        transparent 65%);\n    background-size: 55% 55%;\n    background-repeat: no-repeat;\n    --kui-fx-spotlight-follow-iterations: infinite;\n  }\n  @keyframes kui-spotlight-follow {\n    0%, 100% {\n      background-position: 10% 15%;\n    }\n    25% {\n      background-position: 85% 20%;\n    }\n    50% {\n      background-position: 80% 80%;\n    }\n    75% {\n      background-position: 15% 75%;\n    }\n  }\n  [data-kui-fx~=gradient-rotate-border] {\n    position: relative;\n    background-image:\n      linear-gradient(\n        90deg,\n        var(--kui-c1, #f472b6),\n        var(--kui-c2, #60a5fa),\n        var(--kui-c3, #34d399),\n        var(--kui-c4, #fbbf24),\n        var(--kui-c1, #f472b6));\n    background-size: 300% 100%;\n    padding: 3px;\n    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);\n    mask-composite: exclude;\n    -webkit-mask-composite: xor;\n    --kui-fx-gradient-rotate-border-iterations: infinite;\n  }\n  @keyframes kui-gradient-rotate-border {\n    from {\n      background-position: 0% 50%;\n    }\n    to {\n      background-position: 300% 50%;\n    }\n  }\n  [data-kui-fx~=noise-overlay] {\n    background-image:\n      repeating-radial-gradient(\n        circle at 0 0,\n        color-mix(in srgb, var(--kui-c1, currentColor) 30%, transparent) 0,\n        transparent 1.4px,\n        transparent 3px);\n    background-size: 5px 5px;\n    --kui-fx-noise-overlay-iterations: infinite;\n  }\n  @keyframes kui-noise-overlay {\n    0% {\n      background-position: 0 0;\n    }\n    20% {\n      background-position: -3px 1px;\n    }\n    40% {\n      background-position: 2px -2px;\n    }\n    60% {\n      background-position: -1px 3px;\n    }\n    80% {\n      background-position: 3px 2px;\n    }\n    100% {\n      background-position: 0 0;\n    }\n  }\n  [data-kui-fx~=scanline] {\n    background-image:\n      linear-gradient(\n        to bottom,\n        transparent,\n        color-mix(in srgb, var(--kui-c1, currentColor) 35%, transparent) 50%,\n        transparent);\n    background-size: 100% 220%;\n    background-repeat: no-repeat;\n    --kui-fx-scanline-iterations: infinite;\n  }\n  @keyframes kui-scanline {\n    from {\n      background-position: 0 -120%;\n    }\n    to {\n      background-position: 0 120%;\n    }\n  }\n  [data-kui-fx~=dot-grid-drift] {\n    background-image:\n      radial-gradient(\n        circle,\n        color-mix(in srgb, var(--kui-c1, currentColor) 45%, transparent) 1.5px,\n        transparent 1.5px);\n    background-size: 22px 22px;\n    --kui-fx-dot-grid-drift-iterations: infinite;\n  }\n  @keyframes kui-dot-grid-drift {\n    from {\n      background-position: 0 0;\n    }\n    to {\n      background-position: 22px 22px;\n    }\n  }\n  [data-kui-fx~=line-grid-drift] {\n    background-image:\n      repeating-linear-gradient(\n        0deg,\n        color-mix(in srgb, var(--kui-c1, currentColor) 30%, transparent) 0 1px,\n        transparent 1px 26px),\n      repeating-linear-gradient(\n        90deg,\n        color-mix(in srgb, var(--kui-c1, currentColor) 30%, transparent) 0 1px,\n        transparent 1px 26px);\n    --kui-fx-line-grid-drift-iterations: infinite;\n  }\n  @keyframes kui-line-grid-drift {\n    from {\n      background-position: 0 0, 0 0;\n    }\n    to {\n      background-position: 0 26px, 26px 0;\n    }\n  }\n  [data-kui-fx~=starfield] {\n    background-image:\n      radial-gradient(\n        1px 1px at 10% 20%,\n        color-mix(in srgb, var(--kui-c1, #ffffff) 90%, transparent),\n        transparent),\n      radial-gradient(\n        1px 1px at 70% 60%,\n        color-mix(in srgb, var(--kui-c1, #ffffff) 70%, transparent),\n        transparent),\n      radial-gradient(\n        1.5px 1.5px at 40% 80%,\n        color-mix(in srgb, var(--kui-c1, #ffffff) 85%, transparent),\n        transparent),\n      radial-gradient(\n        1px 1px at 90% 30%,\n        color-mix(in srgb, var(--kui-c1, #ffffff) 60%, transparent),\n        transparent),\n      radial-gradient(\n        1.5px 1.5px at 25% 55%,\n        color-mix(in srgb, var(--kui-c1, #ffffff) 80%, transparent),\n        transparent);\n    background-size: 220px 220px;\n    background-repeat: repeat;\n    --kui-fx-starfield-iterations: infinite;\n  }\n  @keyframes kui-starfield {\n    from {\n      background-position:\n        0 0,\n        0 0,\n        0 0,\n        0 0,\n        0 0;\n    }\n    to {\n      background-position:\n        220px 90px,\n        -160px 220px,\n        90px -140px,\n        -220px -90px,\n        140px 160px;\n    }\n  }\n  [data-kui-fx~=float] {\n    --kui-fx-float-iterations: infinite;\n  }\n  @keyframes kui-float {\n    0%, 100% {\n      translate: 0 0;\n    }\n    50% {\n      translate: 0 calc(var(--kui-distance, 14px) * -1);\n    }\n  }\n  [data-kui-fx~=bob] {\n    --kui-fx-bob-iterations: infinite;\n  }\n  @keyframes kui-bob {\n    0%, 100% {\n      translate: 0 0;\n    }\n    50% {\n      translate: 0 calc(var(--kui-distance, 8px) * -1);\n    }\n  }\n  [data-kui-fx~=floating-shapes] {\n    --kui-fx-floating-shapes-iterations: infinite;\n  }\n  @keyframes kui-floating-shapes {\n    0%, 100% {\n      translate: 0 0;\n    }\n    33% {\n      translate: calc(var(--kui-distance, 10px) * 0.6) calc(var(--kui-distance, 10px) * -1);\n    }\n    66% {\n      translate: calc(var(--kui-distance, 10px) * -0.6) calc(var(--kui-distance, 10px) * -0.4);\n    }\n  }\n  [data-kui-fx~=glow-pulse] {\n    --kui-fx-glow-pulse-iterations: infinite;\n  }\n  @keyframes kui-glow-pulse {\n    0%, 100% {\n      scale: 1;\n      opacity: 0.6;\n    }\n    50% {\n      scale: var(--kui-pulse-scale, 1.15);\n      opacity: 1;\n    }\n  }\n}\n\n/* src/css/feedback.css */\n@layer kui.effects {\n  [data-kui-fx~=skeleton-shimmer] {\n    background-color: var(--kui-skeleton-base, #2a2422);\n    background-image:\n      linear-gradient(\n        100deg,\n        transparent 30%,\n        color-mix(in srgb, var(--kui-skeleton-highlight, #ffffff) 18%, transparent) 50%,\n        transparent 70%);\n    background-size: 200% 100%;\n    --kui-fx-skeleton-shimmer-iterations: infinite;\n  }\n  @keyframes kui-skeleton-shimmer {\n    from {\n      background-position: 150% 0;\n    }\n    to {\n      background-position: -50% 0;\n    }\n  }\n  @keyframes kui-skeleton-to-content {\n    from {\n      opacity: 0;\n    }\n  }\n  [data-kui-fx~=spinner] {\n    display: inline-block;\n    width: var(--kui-spinner-size, 28px);\n    height: var(--kui-spinner-size, 28px);\n    border-radius: 50%;\n    border: 3px solid color-mix(in srgb, currentColor 20%, transparent);\n    border-top-color: currentColor;\n    --kui-fx-spinner-iterations: infinite;\n  }\n  @keyframes kui-spinner-spin {\n    to {\n      rotate: 360deg;\n    }\n  }\n  [data-kui-fx~=spinner-ring] {\n    display: inline-block;\n    width: var(--kui-spinner-size, 28px);\n    height: var(--kui-spinner-size, 28px);\n    border-radius: 50%;\n    border: 3px dashed color-mix(in srgb, currentColor 55%, transparent);\n    --kui-fx-spinner-ring-iterations: infinite;\n  }\n  @keyframes kui-spinner-ring-spin {\n    to {\n      rotate: 360deg;\n    }\n  }\n  [data-kui-fx~=spinner-dots] {\n    display: inline-block;\n    width: var(--kui-dot-size, 8px);\n    height: var(--kui-dot-size, 8px);\n    border-radius: 50%;\n    background: currentColor;\n    box-shadow: calc(var(--kui-dot-size, 8px) * -2) 0 currentColor, calc(var(--kui-dot-size, 8px) * 2) 0 currentColor;\n    --kui-fx-spinner-dots-iterations: infinite;\n  }\n  @keyframes kui-spinner-dots {\n    0%, 80%, 100% {\n      scale: 0.7;\n      opacity: 0.5;\n    }\n    40% {\n      scale: 1.15;\n      opacity: 1;\n    }\n  }\n  [data-kui-fx~=progress-indeterminate] {\n    transform-origin: 0% 50%;\n    background: currentColor;\n    border-radius: inherit;\n    --kui-fx-progress-indeterminate-iterations: infinite;\n  }\n  @keyframes kui-progress-indeterminate {\n    0% {\n      translate: -100% 0;\n      scale: 0.4 1;\n    }\n    50% {\n      scale: 1 1;\n    }\n    100% {\n      translate: 100% 0;\n      scale: 0.4 1;\n    }\n  }\n  @keyframes kui-toast-slide-in {\n    from {\n      opacity: 0;\n      translate: 0 var(--kui-distance, 24px);\n    }\n    to {\n      opacity: 1;\n      translate: 0 0;\n    }\n  }\n  @keyframes kui-toast-slide-out {\n    from {\n      opacity: 1;\n      translate: 0 0;\n    }\n    to {\n      opacity: 0;\n      translate: 0 var(--kui-distance, 24px);\n    }\n  }\n  @keyframes kui-shake-error {\n    10%, 90% {\n      translate: -1px 0;\n    }\n    20%, 80% {\n      translate: 2px 0;\n    }\n    30%, 50%, 70% {\n      translate: -4px 0;\n    }\n    40%, 60% {\n      translate: 4px 0;\n    }\n  }\n  @keyframes kui-wobble {\n    0% {\n      translate: 0 0;\n      rotate: 0deg;\n    }\n    15% {\n      translate: -6px 0;\n      rotate: -6deg;\n    }\n    30% {\n      translate: 4px 0;\n      rotate: 4deg;\n    }\n    45% {\n      translate: -3px 0;\n      rotate: -3deg;\n    }\n    60% {\n      translate: 2px 0;\n      rotate: 2deg;\n    }\n    75% {\n      translate: -1px 0;\n      rotate: -1deg;\n    }\n    100% {\n      translate: 0 0;\n      rotate: 0deg;\n    }\n  }\n  [data-kui-fx~=ripple] {\n    border-radius: 50%;\n    background: currentColor;\n    transform-origin: center;\n  }\n  @keyframes kui-ripple {\n    from {\n      scale: 0.2;\n      opacity: 0.6;\n    }\n    to {\n      scale: var(--kui-ripple-scale, 4);\n      opacity: 0;\n    }\n  }\n  @keyframes kui-badge-pop {\n    0% {\n      scale: 0.4;\n    }\n    60% {\n      scale: var(--kui-pop-scale, 1.18);\n    }\n    100% {\n      scale: 1;\n    }\n  }\n  @keyframes kui-count-bump {\n    0%, 100% {\n      scale: 1;\n    }\n    50% {\n      scale: var(--kui-pop-scale, 1.18);\n    }\n  }\n  [data-kui-fx~=heart-burst] {\n    color: var(--kui-heart-color, #f43f5e);\n  }\n  @keyframes kui-heart-burst {\n    0% {\n      scale: 1;\n    }\n    30% {\n      scale: var(--kui-pop-scale, 1.18);\n    }\n    55% {\n      scale: 0.9;\n    }\n    100% {\n      scale: 1;\n    }\n  }\n  [data-kui-fx~=confetti-burst] {\n    background-image:\n      radial-gradient(\n        circle at 20% 20%,\n        var(--kui-c1, #f43f5e) 0 3px,\n        transparent 3px),\n      radial-gradient(\n        circle at 75% 15%,\n        var(--kui-c2, #fbbf24) 0 3px,\n        transparent 3px),\n      radial-gradient(\n        circle at 50% 75%,\n        var(--kui-c3, #34d399) 0 3px,\n        transparent 3px),\n      radial-gradient(\n        circle at 85% 65%,\n        var(--kui-c4, #60a5fa) 0 3px,\n        transparent 3px),\n      radial-gradient(\n        circle at 15% 65%,\n        var(--kui-c5, #c084fc) 0 3px,\n        transparent 3px);\n    background-repeat: no-repeat;\n  }\n  @keyframes kui-confetti-burst {\n    0% {\n      scale: 0.6;\n      opacity: 0;\n    }\n    40% {\n      scale: var(--kui-pop-scale, 1.18);\n      opacity: 1;\n    }\n    100% {\n      scale: 1;\n      opacity: 1;\n    }\n  }\n  @keyframes kui-copy-confirm {\n    0% {\n      opacity: 0;\n    }\n    15% {\n      opacity: 1;\n    }\n    85% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n    }\n  }\n  @keyframes kui-pull-to-refresh {\n    0% {\n      translate: 0 0;\n    }\n    45% {\n      translate: 0 var(--kui-pull-distance, 36px);\n    }\n    100% {\n      translate: 0 0;\n    }\n  }\n}\n\n/* src/css/numbers.css */\n@layer kui.effects {\n  @keyframes kui-progress-ring {\n    from {\n      stroke-dashoffset: var(--kui-path-length, 100);\n    }\n    to {\n      stroke-dashoffset: 0;\n    }\n  }\n  @keyframes kui-gauge-sweep {\n    from {\n      stroke-dashoffset: var(--kui-path-length, 100);\n    }\n    to {\n      stroke-dashoffset: 0;\n    }\n  }\n  @keyframes kui-donut-sweep {\n    from {\n      stroke-dashoffset: var(--kui-path-length, 100);\n    }\n    to {\n      stroke-dashoffset: 0;\n    }\n  }\n  @keyframes kui-sparkline-draw {\n    from {\n      stroke-dashoffset: var(--kui-path-length, 1000);\n    }\n    to {\n      stroke-dashoffset: 0;\n    }\n  }\n  [data-kui-fx~=progress-ring],\n  [data-kui-fx~=gauge-sweep],\n  [data-kui-fx~=donut-sweep],\n  [data-kui-fx~=sparkline-draw] {\n    stroke-dasharray: var(--kui-path-length, 100);\n    fill: none;\n  }\n  @keyframes kui-progress-bar {\n    from {\n      scale: 0 1;\n    }\n    to {\n      scale: 1 1;\n    }\n  }\n  [data-kui-fx~=progress-bar] {\n    transform-origin: left center;\n  }\n  @keyframes kui-progress-segments {\n    from {\n      opacity: 0.18;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n  @keyframes kui-star-rating-fill {\n    from {\n      clip-path: inset(0 100% 0 0);\n    }\n    to {\n      clip-path: inset(0 calc(100% - var(--kui-fill, 100%)) 0 0);\n    }\n  }\n  .kui-count-decorative {\n    display: inline-flex;\n    align-items: baseline;\n  }\n  .kui-odometer-col {\n    display: inline-block;\n    overflow: hidden;\n    height: 1em;\n    line-height: 1;\n    vertical-align: baseline;\n  }\n  .kui-odometer-strip {\n    display: flex;\n    flex-direction: column;\n    translate: 0 calc(var(--kui-o, 0) * -1em);\n    transition: translate 220ms ease-out;\n  }\n  .kui-odometer-strip > span {\n    height: 1em;\n    line-height: 1;\n  }\n}\n\n/* src/css/interaction.css */\n@layer kui.effects {\n  @property --kui-border-angle { syntax: \"<angle>\"; inherits: false; initial-value: 0deg; }\n  @property --kui-border-pct { syntax: \"<percentage>\"; inherits: false; initial-value: 0%; }\n  [data-kui-fx~=lift] {\n    transition: translate var(--kui-lift-duration, 220ms) var(--kui-lift-ease, ease-out);\n  }\n  [data-kui-fx~=lift]:focus-visible {\n    translate: 0 calc(var(--kui-lift-distance, 6px) * -1);\n  }\n  [data-kui-fx~=lift-shadow] {\n    transition: translate var(--kui-lift-shadow-duration, 220ms) var(--kui-lift-shadow-ease, ease-out), box-shadow var(--kui-lift-shadow-duration, 220ms) var(--kui-lift-shadow-ease, ease-out);\n  }\n  [data-kui-fx~=lift-shadow]:focus-visible {\n    translate: 0 calc(var(--kui-lift-distance, 6px) * -1);\n    box-shadow: 0 14px 28px -12px rgb(0 0 0 / 0.45);\n  }\n  [data-kui-fx~=shine-sweep] {\n    position: relative;\n    overflow: hidden;\n  }\n  [data-kui-fx~=shine-sweep]::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    background:\n      linear-gradient(\n        115deg,\n        transparent 40%,\n        var(--kui-c1, rgb(255 255 255 / 0.35)) 50%,\n        transparent 60%);\n    background-size: 220% 100%;\n    background-position: 120% 0;\n    pointer-events: none;\n  }\n  [data-kui-fx~=shine-sweep]:focus-visible::after {\n    animation: kui-shine-sweep var(--kui-shine-sweep-duration, 700ms) var(--kui-shine-sweep-ease, ease-out);\n  }\n  @keyframes kui-shine-sweep {\n    from {\n      background-position: 120% 0;\n    }\n    to {\n      background-position: -20% 0;\n    }\n  }\n  [data-kui-fx~=split-flap] {\n    display: inline-block;\n    perspective: 600px;\n    backface-visibility: hidden;\n  }\n  [data-kui-fx~=split-flap]:focus-visible {\n    animation: kui-split-flap var(--kui-split-flap-duration, 600ms) var(--kui-split-flap-ease, ease-in-out);\n  }\n  @keyframes kui-split-flap {\n    from {\n      rotate: x 0deg;\n    }\n    to {\n      rotate: x 360deg;\n    }\n  }\n  [data-kui-fx~=border-draw] {\n    border: 2px solid transparent;\n    border-image-slice: 1;\n    border-image-source:\n      conic-gradient(\n        from -90deg,\n        var(--kui-border-draw-color, var(--accent, #d2691e)) 0 var(--kui-border-pct, 0%),\n        transparent 0);\n    transition: --kui-border-pct var(--kui-border-draw-duration, 500ms) var(--kui-border-draw-ease, ease-out);\n  }\n  [data-kui-fx~=border-draw]:focus-visible {\n    --kui-border-pct: 100%;\n  }\n  [data-kui-fx~=border-glow] {\n    transition: box-shadow var(--kui-border-glow-duration, 260ms) var(--kui-border-glow-ease, ease-out);\n  }\n  [data-kui-fx~=border-glow]:focus-visible {\n    box-shadow: 0 0 0 3px var(--kui-border-glow-color, var(--accent, #d2691e));\n  }\n  [data-kui-fx~=beam-border],\n  [data-kui-fx~=beam-border-auto] {\n    position: relative;\n  }\n  [data-kui-fx~=beam-border]::before,\n  [data-kui-fx~=beam-border-auto]::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    padding: var(--kui-beam-border-width, 3px);\n    background:\n      conic-gradient(\n        from var(--kui-border-angle, 0deg),\n        transparent 0deg,\n        transparent 260deg,\n        var(--kui-beam-border-c1, #ff5f6d) 282deg,\n        var(--kui-beam-border-c2, #ffc371) 306deg,\n        var(--kui-beam-border-c3, #4facfe) 330deg,\n        var(--kui-beam-border-c4, #a855f7) 354deg,\n        transparent 360deg);\n    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n    -webkit-mask-composite: xor;\n    mask-composite: exclude;\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity var(--kui-beam-border-fade-duration, 200ms) ease-out;\n  }\n  [data-kui-fx~=beam-border]:focus-visible::before {\n    opacity: 1;\n    animation: kui-beam-rotate var(--kui-beam-border-duration, 4260ms) linear infinite;\n  }\n  [data-kui-fx~=beam-border-auto]::before {\n    opacity: 1;\n    animation: kui-beam-rotate var(--kui-beam-border-duration, 4260ms) linear infinite;\n  }\n  @keyframes kui-beam-rotate {\n    to {\n      --kui-border-angle: 360deg;\n    }\n  }\n  @media (prefers-reduced-motion: reduce) {\n    [data-kui-fx~=beam-border]:focus-visible::before,\n    [data-kui-fx~=beam-border-auto]::before {\n      animation: none;\n      --kui-border-angle: 45deg;\n    }\n  }\n  [data-kui-fx~=underline-slide] {\n    position: relative;\n    text-decoration: none;\n  }\n  [data-kui-fx~=underline-slide]::after {\n    content: \"\";\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: -0.15em;\n    height: 0.08em;\n    background: currentcolor;\n    scale: 0 1;\n    transform-origin: left center;\n    transition: scale var(--kui-underline-slide-duration, 260ms) var(--kui-underline-slide-ease, ease-out);\n  }\n  [data-kui-fx~=underline-slide]:focus-visible::after {\n    scale: 1 1;\n  }\n  [data-kui-fx~=underline-center] {\n    position: relative;\n    text-decoration: none;\n  }\n  [data-kui-fx~=underline-center]::after {\n    content: \"\";\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: -0.15em;\n    height: 0.08em;\n    background: currentcolor;\n    scale: 0 1;\n    transform-origin: center;\n    transition: scale var(--kui-underline-center-duration, 260ms) var(--kui-underline-center-ease, ease-out);\n  }\n  [data-kui-fx~=underline-center]:focus-visible::after {\n    scale: 1 1;\n  }\n  [data-kui-fx~=icon-wiggle]:focus-visible {\n    animation: kui-icon-wiggle var(--kui-icon-wiggle-duration, 500ms) var(--kui-icon-wiggle-ease, ease-in-out);\n  }\n  @keyframes kui-icon-wiggle {\n    0%, 100% {\n      rotate: 0deg;\n    }\n    20% {\n      rotate: -12deg;\n    }\n    40% {\n      rotate: 10deg;\n    }\n    60% {\n      rotate: -6deg;\n    }\n    80% {\n      rotate: 4deg;\n    }\n  }\n  [data-kui-fx~=icon-spin]:focus-visible {\n    animation: kui-icon-spin var(--kui-icon-spin-duration, 700ms) linear;\n  }\n  @keyframes kui-icon-spin {\n    from {\n      rotate: 0deg;\n    }\n    to {\n      rotate: 360deg;\n    }\n  }\n  [data-kui-fx~=icon-bounce]:focus-visible {\n    animation: kui-icon-bounce var(--kui-icon-bounce-duration, 500ms) var(--kui-icon-bounce-ease, ease-out);\n  }\n  @keyframes kui-icon-bounce {\n    0%, 100% {\n      translate: 0 0;\n    }\n    30% {\n      translate: 0 -7px;\n    }\n    55% {\n      translate: 0 1px;\n    }\n    75% {\n      translate: 0 -3px;\n    }\n  }\n  @media (hover: hover) and (pointer: fine) {\n    [data-kui-fx~=lift]:hover {\n      translate: 0 calc(var(--kui-lift-distance, 6px) * -1);\n    }\n    [data-kui-fx~=lift-shadow]:hover {\n      translate: 0 calc(var(--kui-lift-distance, 6px) * -1);\n      box-shadow: 0 14px 28px -12px rgb(0 0 0 / 0.45);\n    }\n    [data-kui-fx~=shine-sweep]:hover::after {\n      animation: kui-shine-sweep var(--kui-shine-sweep-duration, 700ms) var(--kui-shine-sweep-ease, ease-out);\n    }\n    [data-kui-fx~=split-flap]:hover {\n      animation: kui-split-flap var(--kui-split-flap-duration, 600ms) var(--kui-split-flap-ease, ease-in-out);\n    }\n    [data-kui-fx~=border-draw]:hover {\n      --kui-border-pct: 100%;\n    }\n    [data-kui-fx~=border-glow]:hover {\n      box-shadow: 0 0 0 3px var(--kui-border-glow-color, var(--accent, #d2691e));\n    }\n    [data-kui-fx~=beam-border]:hover::before {\n      opacity: 1;\n      animation: kui-beam-rotate var(--kui-beam-border-duration, 4260ms) linear infinite;\n    }\n    [data-kui-fx~=underline-slide]:hover::after {\n      scale: 1 1;\n    }\n    [data-kui-fx~=underline-center]:hover::after {\n      scale: 1 1;\n    }\n    [data-kui-fx~=icon-wiggle]:hover {\n      animation: kui-icon-wiggle var(--kui-icon-wiggle-duration, 500ms) var(--kui-icon-wiggle-ease, ease-in-out);\n    }\n    [data-kui-fx~=icon-spin]:hover {\n      animation: kui-icon-spin var(--kui-icon-spin-duration, 700ms) linear;\n    }\n    [data-kui-fx~=icon-bounce]:hover {\n      animation: kui-icon-bounce var(--kui-icon-bounce-duration, 500ms) var(--kui-icon-bounce-ease, ease-out);\n    }\n  }\n  [data-kui-fx~=tilt-3d],\n  [data-kui-fx~=tilt-parallax] {\n    transform-style: preserve-3d;\n  }\n  [data-kui-fx~=cursor-spotlight]::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    pointer-events: none;\n    opacity: var(--kui-spotlight-opacity, 0);\n    transition: opacity 200ms ease-out;\n    background:\n      radial-gradient(\n        circle 160px at var(--kui-x, 50%) var(--kui-y, 50%),\n        color-mix(in srgb, var(--accent, #d2691e) 30%, transparent),\n        transparent 70%);\n  }\n  .kui-cursor-dot {\n    position: fixed;\n    top: 0;\n    left: 0;\n    z-index: 9999;\n    display: grid;\n    place-items: center;\n    pointer-events: none;\n    opacity: 0;\n    transition: opacity 160ms ease-out;\n  }\n  .kui-cursor-dot-active {\n    opacity: 1;\n  }\n  .kui-cursor-dot-follow,\n  .kui-cursor-dot-lag,\n  .kui-cursor-dot-invert {\n    width: 14px;\n    height: 14px;\n    margin: -7px 0 0 -7px;\n    border-radius: 50%;\n    background: var(--accent, #d2691e);\n  }\n  .kui-cursor-dot-invert {\n    background: var(--kui-invert-color, #fff);\n    mix-blend-mode: difference;\n  }\n  .kui-cursor-dot-label {\n    margin: -1.4em 0 0 -1.4em;\n    padding: 0.4em 0.8em;\n    border-radius: 999px;\n    background: var(--accent, #d2691e);\n    color: var(--kui-label-color, #fff);\n    font-size: 0.75rem;\n    font-family:\n      ui-monospace,\n      Menlo,\n      monospace;\n    white-space: nowrap;\n  }\n  @media (pointer: coarse) {\n    .kui-cursor-dot {\n      display: none;\n    }\n  }\n}\n\n/* src/css/index.css */\n"
+    style.textContent = "/* src/css/base.css */\n@layer kui.tokens, kui.presets, kui.effects, kui.policy, kui.cloak;\n@layer kui.tokens {\n  :root {\n    --kui-ease-expo-in: cubic-bezier(0.7, 0, 0.84, 0);\n    --kui-ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1);\n    --kui-ease-expo-in-out: cubic-bezier(0.87, 0, 0.13, 1);\n    --kui-ease-back-in: cubic-bezier(0.36, 0, 0.66, -0.56);\n    --kui-ease-back-out: cubic-bezier(0.34, 1.56, 0.64, 1);\n    --kui-ease-back-in-out: cubic-bezier(0.68, -0.6, 0.32, 1.6);\n    --kui-ease-quart-out: cubic-bezier(0.25, 1, 0.5, 1);\n    --kui-ease-circ-out: cubic-bezier(0, 0.55, 0.45, 1);\n    --kui-ease-spring: linear(0, 0.4 12%, 0.9 25%, 1.06 38%, 1.01 62%, 1);\n    --kui-ease-bounce: linear(0, 0.5 10%, 1.2 30%, 0.9 50%, 1.08 68%, 0.97 82%, 1.02 92%, 1);\n  }\n  [data-kui-fx] {\n    --kui-dir: 1;\n    --kui-i: 0;\n  }\n  :dir(rtl) [data-kui-fx] {\n    --kui-dir: -1;\n  }\n}\n@layer kui.policy {\n  html[data-kui-cloak] [data-kui][data-kui-reveal]:not([data-kui-state]) {\n    opacity: 0 !important;\n  }\n  @media (prefers-reduced-motion: reduce) {\n    [data-kui-rm],\n    [data-kui-rm]::before,\n    [data-kui-rm]::after,\n    [data-kui-rm] .kui-odometer-strip,\n    [data-kui-rm][data-kui-fx~=label-float] ~ label,\n    [data-kui-rm][data-kui-fx~=input-underline-grow] ~ .kui-underline,\n    [data-kui-rm][data-kui-fx~=toggle-morph] ~ .kui-track,\n    [data-kui-rm][data-kui-fx~=toggle-morph] ~ .kui-track .kui-thumb,\n    [data-kui-rm][data-kui-fx~=checkbox-draw] ~ svg path,\n    [data-kui-rm][data-kui-fx~=radio-fill] ~ .kui-dot,\n    [data-kui-rm][data-kui-fx~=strength-meter] ~ .kui-meter > *,\n    [data-kui-rm][data-kui-fx~=hamburger-to-x] .kui-bar,\n    [data-kui-rm][data-kui-fx~=play-to-pause] .kui-bar,\n    [data-kui-rm][data-kui-fx~=plus-to-minus] .kui-bar,\n    [data-kui-rm][data-kui-fx~=flip-card] > .kui-face-front,\n    [data-kui-rm][data-kui-fx~=flip-card] > .kui-face-back {\n      transition-duration: 1ms !important;\n      transition-delay: 0ms !important;\n    }\n    [data-kui-rm=shorten],\n    [data-kui-rm=shorten]::before,\n    [data-kui-rm=shorten]::after {\n      animation-duration: 1ms !important;\n      animation-delay: 0ms !important;\n    }\n    [data-kui-rm=crossfade] {\n      animation-name: kui-in !important;\n      animation-duration: 200ms !important;\n    }\n    [data-kui-rm=disable] {\n      animation: none !important;\n      opacity: 1 !important;\n      translate: none !important;\n      scale: none !important;\n      rotate: none !important;\n      filter: none !important;\n    }\n  }\n  @media print {\n    [data-kui-fx],\n    [data-kui-reveal] {\n      animation: none !important;\n      opacity: 1 !important;\n      translate: none !important;\n      scale: none !important;\n      rotate: none !important;\n      filter: none !important;\n    }\n  }\n}\n\n/* src/css/presets.generated.css */\n@layer kui.presets {\n  [data-kui-fx~=accordion-height] {\n    --kui-auto-height-duration: 400ms;\n    --kui-auto-height-ease: ease-out;\n  }\n  [data-kui-fx~=aurora] {\n    --kui-ambient-gradient-duration: 10s;\n    --kui-ambient-gradient-delay: 0ms;\n    --kui-ambient-gradient-ease: ease-in-out;\n  }\n  [data-kui-fx~=back-in-down] {\n    --kui-distance: 120px;\n    --kui-reveal-ease: var(--kui-ease-expo-out, ease-out);\n    --kui-reveal-duration: 600ms;\n    --kui-reveal-delay: 0ms;\n  }\n  [data-kui-fx~=back-in-up] {\n    --kui-distance: 120px;\n    --kui-reveal-ease: var(--kui-ease-expo-out, ease-out);\n    --kui-reveal-duration: 600ms;\n    --kui-reveal-delay: 0ms;\n  }\n  [data-kui-fx~=badge-pop] {\n    --kui-feedback-pop-duration: 420ms;\n    --kui-feedback-pop-delay: 0ms;\n    --kui-feedback-pop-ease: var(--kui-ease-back-out, ease-out);\n  }\n  [data-kui-fx~=beam-border] {\n    --kui-beam-border-duration: 220ms;\n    --kui-beam-border-ease: ease-out;\n  }\n  [data-kui-fx~=beam-border-auto] {\n    --kui-beam-border-auto-duration: 220ms;\n    --kui-beam-border-auto-ease: ease-out;\n  }\n  [data-kui-fx~=before-after-wipe] {\n    --kui-media-wipe-duration: 600ms;\n    --kui-media-wipe-delay: 0ms;\n    --kui-media-wipe-ease: ease-out;\n  }\n  [data-kui-fx~=blob-morph] {\n    --kui-path-morph-duration: 800ms;\n  }\n  [data-kui-fx~=blur-in] {\n    --kui-blur-duration: 600ms;\n    --kui-blur-delay: 0ms;\n    --kui-blur-ease: ease-out;\n  }\n  [data-kui-fx~=blur-out] {\n    --kui-blur-duration: 600ms;\n    --kui-blur-delay: 0ms;\n    --kui-blur-ease: ease-out;\n  }\n  [data-kui-fx~=blur-up] {\n    --kui-media-blur-up-duration: 600ms;\n    --kui-media-blur-up-delay: 0ms;\n    --kui-media-blur-up-ease: ease-out;\n  }\n  [data-kui-fx~=bob] {\n    --kui-ambient-float-duration: 2s;\n    --kui-distance: 8px;\n    --kui-ambient-float-delay: 0ms;\n    --kui-ambient-float-ease: ease-in-out;\n  }\n  [data-kui-fx~=book-page-turn] {\n    --kui-from-angle: -160deg;\n    --kui-flip-face-duration: 900ms;\n    --kui-flip-face-delay: 0ms;\n    --kui-flip-face-ease: ease-out;\n  }\n  [data-kui-fx~=bookmark-fill] {\n    --kui-shape-fill-duration: 360ms;\n    --kui-shape-fill-delay: 0ms;\n    --kui-shape-fill-ease: ease-out;\n  }\n  [data-kui-fx~=border-draw] {\n    --kui-border-draw-duration: 220ms;\n    --kui-border-draw-ease: ease-out;\n  }\n  [data-kui-fx~=border-glow] {\n    --kui-border-glow-duration: 220ms;\n    --kui-border-glow-ease: ease-out;\n  }\n  [data-kui-fx~=bounce-in] {\n    --kui-from-scale: 0.3;\n    --kui-scale-ease: var(--kui-ease-bounce, ease-out);\n    --kui-scale-duration: 600ms;\n    --kui-scale-delay: 0ms;\n  }\n  [data-kui-fx~=bounce-in-down] {\n    --kui-distance: 60px;\n    --kui-reveal-ease: var(--kui-ease-back-out, ease-out);\n    --kui-reveal-duration: 600ms;\n    --kui-reveal-delay: 0ms;\n  }\n  [data-kui-fx~=bounce-in-up] {\n    --kui-distance: 60px;\n    --kui-reveal-ease: var(--kui-ease-back-out, ease-out);\n    --kui-reveal-duration: 600ms;\n    --kui-reveal-delay: 0ms;\n  }\n  [data-kui-fx~=card-flip-x] {\n    --kui-flip-face-duration: 600ms;\n    --kui-flip-face-delay: 0ms;\n    --kui-flip-face-ease: ease-out;\n  }\n  [data-kui-fx~=card-flip-y] {\n    --kui-flip-face-duration: 600ms;\n    --kui-flip-face-delay: 0ms;\n    --kui-flip-face-ease: ease-out;\n  }\n  [data-kui-fx~=chart-area-fill] {\n    --kui-shape-fill-duration: 900ms;\n    --kui-shape-fill-delay: 0ms;\n    --kui-shape-fill-ease: ease-out;\n  }\n  [data-kui-fx~=chart-bar-grow] {\n    --kui-bar-grow-duration: 700ms;\n    --kui-bar-grow-ease: var(--kui-ease-back-out, ease-out);\n    --kui-bar-grow-delay: 0ms;\n  }\n  [data-kui-fx~=chart-line-draw] {\n    --kui-path-draw-duration: 1200ms;\n    --kui-path-draw-ease: ease-in-out;\n    --kui-path-draw-delay: 0ms;\n  }\n  [data-kui-fx~=checkmark-draw] {\n    --kui-path-draw-duration: 320ms;\n    --kui-path-draw-delay: 0ms;\n    --kui-path-draw-ease: ease-out;\n  }\n  [data-kui-fx~=confetti-burst] {\n    --kui-feedback-burst-duration: 900ms;\n    --kui-pop-scale: 1.15;\n    --kui-feedback-burst-delay: 0ms;\n    --kui-feedback-burst-ease: var(--kui-ease-back-out, ease-out);\n  }\n  [data-kui-fx~=copy-confirm] {\n    --kui-feedback-confirm-duration: 1400ms;\n    --kui-feedback-confirm-delay: 0ms;\n    --kui-feedback-confirm-ease: linear;\n  }\n  [data-kui-fx~=count-bump] {\n    --kui-feedback-pop-duration: 280ms;\n    --kui-pop-scale: 1.3;\n    --kui-feedback-pop-delay: 0ms;\n    --kui-feedback-pop-ease: var(--kui-ease-back-out, ease-out);\n  }\n  [data-kui-fx~=count-compact] {\n    --kui-from: 0;\n    --kui-to: 128400;\n    --kui-format: compact;\n    --kui-count-duration: 1600ms;\n    --kui-count-delay: 0ms;\n  }\n  [data-kui-fx~=count-currency] {\n    --kui-from: 0;\n    --kui-to: 4820;\n    --kui-format: currency;\n    --kui-decimals: 0;\n    --kui-count-duration: 1600ms;\n    --kui-count-delay: 0ms;\n  }\n  [data-kui-fx~=count-down] {\n    --kui-from: 100;\n    --kui-to: 0;\n    --kui-count-duration: 1600ms;\n    --kui-count-delay: 0ms;\n  }\n  [data-kui-fx~=count-percent] {\n    --kui-from: 0;\n    --kui-to: 0.82;\n    --kui-format: percent;\n    --kui-decimals: 0;\n    --kui-count-duration: 1600ms;\n    --kui-count-delay: 0ms;\n  }\n  [data-kui-fx~=count-up] {\n    --kui-from: 0;\n    --kui-to: 100;\n    --kui-count-duration: 1600ms;\n    --kui-count-delay: 0ms;\n  }\n  [data-kui-fx~=cross-draw] {\n    --kui-path-draw-duration: 260ms;\n    --kui-path-draw-delay: 0ms;\n    --kui-path-draw-ease: ease-out;\n  }\n  [data-kui-fx~=cube-rotate] {\n    --kui-from-angle: 90deg;\n    --kui-flip-face-duration: 600ms;\n    --kui-flip-face-delay: 0ms;\n    --kui-flip-face-ease: ease-out;\n  }\n  [data-kui-fx~=cursor-follow] {\n    --kui-stiffness: 300;\n    --kui-damping: 30;\n  }\n  [data-kui-fx~=cursor-invert] {\n    --kui-stiffness: 260;\n    --kui-damping: 26;\n  }\n  [data-kui-fx~=cursor-label] {\n    --kui-stiffness: 260;\n    --kui-damping: 26;\n  }\n  [data-kui-fx~=cursor-lag] {\n    --kui-stiffness: 80;\n    --kui-damping: 14;\n  }\n  [data-kui-fx~=curtain-reveal] {\n    --kui-media-wipe-duration: 600ms;\n    --kui-media-wipe-delay: 0ms;\n    --kui-media-wipe-ease: ease-out;\n  }\n  [data-kui-fx~=curtain-wipe] {\n    --kui-wipe-duration: 800ms;\n    --kui-wipe-delay: 0ms;\n    --kui-wipe-ease: ease-out;\n  }\n  [data-kui-fx~=decode] {\n    --kui-charset: binary;\n    --kui-scramble-text-delay: 0ms;\n  }\n  [data-kui-fx~=depth-layer] {\n    --kui-distance: 200px;\n    --kui-parallax-duration: 600ms;\n    --kui-parallax-delay: 0ms;\n    --kui-parallax-ease: ease-out;\n  }\n  [data-kui-fx~=donut-sweep] {\n    --kui-stroke-sweep-duration: 600ms;\n    --kui-stroke-sweep-delay: 0ms;\n    --kui-stroke-sweep-ease: ease-out;\n  }\n  [data-kui-fx~=dot-grid-drift] {\n    --kui-ambient-tint-duration: 16s;\n    --kui-ambient-tint-ease: linear;\n    --kui-ambient-tint-delay: 0ms;\n  }\n  [data-kui-fx~=drag-inertia] {\n    --kui-inertia: true;\n  }\n  [data-kui-fx~=drag-x] {\n    --kui-axis: x;\n  }\n  [data-kui-fx~=drag-y] {\n    --kui-axis: y;\n  }\n  [data-kui-fx~=draw-signature] {\n    --kui-path-draw-duration: 1600ms;\n    --kui-path-draw-ease: ease-in-out;\n    --kui-path-draw-delay: 0ms;\n  }\n  [data-kui-fx~=draw-stroke] {\n    --kui-path-draw-duration: 800ms;\n    --kui-path-draw-ease: ease-in-out;\n    --kui-path-draw-delay: 0ms;\n  }\n  [data-kui-fx~=draw-underline] {\n    --kui-path-draw-duration: 420ms;\n    --kui-path-draw-delay: 0ms;\n    --kui-path-draw-ease: ease-out;\n  }\n  [data-kui-fx~=drawer-slide] {\n    --kui-drawer-slide-duration: 600ms;\n    --kui-drawer-slide-delay: 0ms;\n    --kui-drawer-slide-ease: ease-out;\n  }\n  [data-kui-fx~=dropdown-open] {\n    --kui-panel-reveal-duration: 600ms;\n    --kui-panel-reveal-delay: 0ms;\n    --kui-panel-reveal-ease: ease-out;\n  }\n  [data-kui-fx~=duotone-hover] {\n    --kui-media-filter-duration: 600ms;\n    --kui-media-filter-delay: 0ms;\n    --kui-media-filter-ease: ease-out;\n  }\n  [data-kui-fx~=elastic-pull] {\n    --kui-return: true;\n    --kui-bounds: 80;\n  }\n  [data-kui-fx~=expand-to-modal] {\n    --kui-flip-scale: true;\n    --kui-flip-container-duration: 500ms;\n    --kui-flip-container-ease: ease-out;\n  }\n  [data-kui-fx~=fade-blur-in] {\n    --kui-reveal-blur-duration: 600ms;\n    --kui-reveal-blur-delay: 0ms;\n    --kui-reveal-blur-ease: ease-out;\n  }\n  [data-kui-fx~=fade-blur-up] {\n    --kui-reveal-blur-duration: 600ms;\n    --kui-reveal-blur-delay: 0ms;\n    --kui-reveal-blur-ease: ease-out;\n  }\n  [data-kui-fx~=fade-down] {\n    --kui-reveal-duration: 600ms;\n    --kui-reveal-delay: 0ms;\n    --kui-reveal-ease: ease-out;\n  }\n  [data-kui-fx~=fade-in] {\n    --kui-reveal-duration: 600ms;\n    --kui-reveal-delay: 0ms;\n    --kui-reveal-ease: ease-out;\n  }\n  [data-kui-fx~=fade-left] {\n    --kui-reveal-duration: 600ms;\n    --kui-reveal-delay: 0ms;\n    --kui-reveal-ease: ease-out;\n  }\n  [data-kui-fx~=fade-out] {\n    --kui-reveal-duration: 600ms;\n    --kui-reveal-delay: 0ms;\n    --kui-reveal-ease: ease-out;\n  }\n  [data-kui-fx~=fade-out-down] {\n    --kui-reveal-duration: 600ms;\n    --kui-reveal-delay: 0ms;\n    --kui-reveal-ease: ease-out;\n  }\n  [data-kui-fx~=fade-out-left] {\n    --kui-reveal-duration: 600ms;\n    --kui-reveal-delay: 0ms;\n    --kui-reveal-ease: ease-out;\n  }\n  [data-kui-fx~=fade-out-right] {\n    --kui-reveal-duration: 600ms;\n    --kui-reveal-delay: 0ms;\n    --kui-reveal-ease: ease-out;\n  }\n  [data-kui-fx~=fade-out-up] {\n    --kui-reveal-duration: 600ms;\n    --kui-reveal-delay: 0ms;\n    --kui-reveal-ease: ease-out;\n  }\n  [data-kui-fx~=fade-right] {\n    --kui-reveal-duration: 600ms;\n    --kui-reveal-delay: 0ms;\n    --kui-reveal-ease: ease-out;\n  }\n  [data-kui-fx~=fade-up] {\n    --kui-reveal-duration: 600ms;\n    --kui-reveal-delay: 0ms;\n    --kui-reveal-ease: ease-out;\n  }\n  [data-kui-fx~=flip-card] {\n    --kui-card-toggle-duration: 700ms;\n    --kui-card-toggle-ease: ease-in-out;\n  }\n  [data-kui-fx~=flip-filter] {\n    --kui-flip-container-duration: 400ms;\n    --kui-flip-container-ease: ease-out;\n  }\n  [data-kui-fx~=flip-in-x] {\n    --kui-flip-3d-duration: 600ms;\n    --kui-flip-3d-delay: 0ms;\n    --kui-flip-3d-ease: ease-out;\n  }\n  [data-kui-fx~=flip-in-y] {\n    --kui-flip-3d-duration: 600ms;\n    --kui-flip-3d-delay: 0ms;\n    --kui-flip-3d-ease: ease-out;\n  }\n  [data-kui-fx~=flip-out-x] {\n    --kui-flip-3d-duration: 600ms;\n    --kui-flip-3d-delay: 0ms;\n    --kui-flip-3d-ease: ease-out;\n  }\n  [data-kui-fx~=flip-out-y] {\n    --kui-flip-3d-duration: 600ms;\n    --kui-flip-3d-delay: 0ms;\n    --kui-flip-3d-ease: ease-out;\n  }\n  [data-kui-fx~=flip-reorder] {\n    --kui-flip-container-duration: 400ms;\n    --kui-flip-container-ease: ease-out;\n  }\n  [data-kui-fx~=flip-shuffle] {\n    --kui-flip-container-duration: 400ms;\n    --kui-flip-container-ease: ease-out;\n  }\n  [data-kui-fx~=flip-sort] {\n    --kui-flip-container-duration: 400ms;\n    --kui-flip-container-ease: ease-out;\n  }\n  [data-kui-fx~=float] {\n    --kui-ambient-float-duration: 4s;\n    --kui-ambient-float-delay: 0ms;\n    --kui-ambient-float-ease: ease-in-out;\n  }\n  [data-kui-fx~=floating-shapes] {\n    --kui-ambient-float-duration: 6s;\n    --kui-distance: 10px;\n    --kui-ambient-float-delay: 0ms;\n    --kui-ambient-float-ease: ease-in-out;\n  }\n  [data-kui-fx~=focus-ring-grow] {\n    --kui-focus-ring-duration: 600ms;\n    --kui-focus-ring-delay: 0ms;\n    --kui-focus-ring-ease: ease-out;\n  }\n  [data-kui-fx~=fold-panel] {\n    --kui-from-angle: -90deg;\n    --kui-flip-face-duration: 600ms;\n    --kui-flip-face-delay: 0ms;\n    --kui-flip-face-ease: ease-out;\n  }\n  [data-kui-fx~=gauge-sweep] {\n    --kui-stroke-sweep-duration: 600ms;\n    --kui-stroke-sweep-delay: 0ms;\n    --kui-stroke-sweep-ease: ease-out;\n  }\n  [data-kui-fx~=glitch] {\n    --kui-charset: symbols;\n    --kui-scramble-text-delay: 0ms;\n  }\n  [data-kui-fx~=glow-pulse] {\n    --kui-ambient-pulse-duration: 2.2s;\n    --kui-ambient-pulse-delay: 0ms;\n    --kui-ambient-pulse-ease: ease-in-out;\n  }\n  [data-kui-fx~=gradient-border] {\n    --kui-ambient-gradient-ring-duration: 6s;\n    --kui-ambient-gradient-ring-ease: linear;\n    --kui-ambient-gradient-ring-delay: 0ms;\n  }\n  [data-kui-fx~=gradient-mesh] {\n    --kui-ambient-gradient-duration: 10s;\n    --kui-ambient-gradient-delay: 0ms;\n    --kui-ambient-gradient-ease: ease-in-out;\n  }\n  [data-kui-fx~=gradient-rotate-border] {\n    --kui-ambient-gradient-ring-duration: 6s;\n    --kui-ambient-gradient-ring-ease: linear;\n    --kui-ambient-gradient-ring-delay: 0ms;\n  }\n  [data-kui-fx~=gradient-shimmer] {\n    --kui-text-shimmer-duration: 600ms;\n    --kui-text-shimmer-delay: 0ms;\n    --kui-text-shimmer-ease: ease-out;\n  }\n  [data-kui-fx~=gradient-stroke] {\n    --kui-path-draw-duration: 2400ms;\n    --kui-path-draw-ease: ease-in-out;\n    --kui-path-draw-delay: 0ms;\n  }\n  [data-kui-fx~=gradient-sweep] {\n    --kui-text-gradient-sweep-duration: 600ms;\n    --kui-text-gradient-sweep-delay: 0ms;\n    --kui-text-gradient-sweep-ease: ease-out;\n  }\n  [data-kui-fx~=grayscale-hover] {\n    --kui-media-filter-duration: 600ms;\n    --kui-media-filter-delay: 0ms;\n    --kui-media-filter-ease: ease-out;\n  }\n  [data-kui-fx~=grid-to-list] {\n    --kui-flip-scale: true;\n    --kui-flip-container-duration: 400ms;\n    --kui-flip-container-ease: ease-out;\n  }\n  [data-kui-fx~=hamburger-to-x] {\n    --kui-icon-toggle-duration: 260ms;\n    --kui-icon-toggle-ease: ease-out;\n  }\n  [data-kui-fx~=heart-burst] {\n    --kui-feedback-burst-duration: 700ms;\n    --kui-pop-scale: 1.4;\n    --kui-feedback-burst-delay: 0ms;\n    --kui-feedback-burst-ease: var(--kui-ease-back-out, ease-out);\n  }\n  [data-kui-fx~=heart-fill] {\n    --kui-shape-fill-duration: 420ms;\n    --kui-shape-fill-delay: 0ms;\n    --kui-shape-fill-ease: ease-out;\n  }\n  [data-kui-fx~=highlight-sweep] {\n    --kui-sweep-color: gold;\n    --kui-text-sweep-duration: 600ms;\n    --kui-text-sweep-delay: 0ms;\n    --kui-text-sweep-ease: ease-out;\n  }\n  [data-kui-fx~=icon-bounce] {\n    --kui-icon-bounce-duration: 220ms;\n    --kui-icon-bounce-ease: ease-out;\n  }\n  [data-kui-fx~=icon-morph] {\n    --kui-path-morph-duration: 300ms;\n  }\n  [data-kui-fx~=icon-spin] {\n    --kui-icon-spin-duration: 220ms;\n    --kui-icon-spin-ease: ease-out;\n  }\n  [data-kui-fx~=icon-wiggle] {\n    --kui-icon-wiggle-duration: 220ms;\n    --kui-icon-wiggle-ease: ease-out;\n  }\n  [data-kui-fx~=image-parallax-frame] {\n    --kui-media-parallax-frame-duration: 600ms;\n    --kui-media-parallax-frame-delay: 0ms;\n    --kui-media-parallax-frame-ease: ease-out;\n  }\n  [data-kui-fx~=ken-burns] {\n    --kui-media-ken-burns-duration: 600ms;\n    --kui-media-ken-burns-delay: 0ms;\n    --kui-media-ken-burns-ease: ease-out;\n  }\n  [data-kui-fx~=ken-burns-out] {\n    --kui-media-ken-burns-duration: 600ms;\n    --kui-media-ken-burns-delay: 0ms;\n    --kui-media-ken-burns-ease: ease-out;\n  }\n  [data-kui-fx~=lift] {\n    --kui-lift-duration: 220ms;\n    --kui-lift-ease: ease-out;\n  }\n  [data-kui-fx~=lift-shadow] {\n    --kui-lift-shadow-duration: 220ms;\n    --kui-lift-shadow-ease: ease-out;\n  }\n  [data-kui-fx~=lightbox-open] {\n    --kui-media-lightbox-duration: 600ms;\n    --kui-media-lightbox-delay: 0ms;\n    --kui-media-lightbox-ease: ease-out;\n  }\n  [data-kui-fx~=line-grid-drift] {\n    --kui-ambient-tint-duration: 16s;\n    --kui-ambient-tint-ease: linear;\n    --kui-ambient-tint-delay: 0ms;\n  }\n  [data-kui-fx~=loading-bar] {\n    --kui-bar-duration: 600ms;\n    --kui-bar-delay: 0ms;\n    --kui-bar-ease: ease-out;\n  }\n  [data-kui-fx~=logo-build] {\n    --kui-logo-assemble-duration: 520ms;\n    --kui-logo-assemble-ease: var(--kui-ease-back-out, ease-out);\n    --kui-logo-assemble-delay: 0ms;\n  }\n  [data-kui-fx~=long-press] {\n    --kui-pressable-duration: 500ms;\n  }\n  [data-kui-fx~=magnetic-snap] {\n    --kui-strength: 0.6;\n    --kui-radius: 160;\n  }\n  [data-kui-fx~=marquee] {\n    --kui-text-marquee-duration: 600ms;\n    --kui-text-marquee-delay: 0ms;\n    --kui-text-marquee-ease: ease-out;\n  }\n  [data-kui-fx~=marquee-scroll-linked] {\n    --kui-text-marquee-duration: 600ms;\n    --kui-text-marquee-delay: 0ms;\n    --kui-text-marquee-ease: ease-out;\n  }\n  [data-kui-fx~=mask-reveal] {\n    --kui-media-mask-duration: 600ms;\n    --kui-media-mask-delay: 0ms;\n    --kui-media-mask-ease: ease-out;\n  }\n  [data-kui-fx~=masonry-reflow] {\n    --kui-flip-container-duration: 400ms;\n    --kui-flip-container-ease: ease-out;\n  }\n  [data-kui-fx~=mega-menu-drop] {\n    --kui-panel-reveal-duration: 550ms;\n    --kui-panel-reveal-delay: 0ms;\n    --kui-panel-reveal-ease: ease-out;\n  }\n  [data-kui-fx~=menu-fullscreen] {\n    --kui-menu-fullscreen-duration: 600ms;\n    --kui-menu-fullscreen-delay: 0ms;\n    --kui-menu-fullscreen-ease: ease-out;\n  }\n  [data-kui-fx~=menu-stagger-open] {\n    --kui-nav-reveal-duration: 600ms;\n    --kui-nav-reveal-delay: 0ms;\n    --kui-nav-reveal-ease: ease-out;\n  }\n  [data-kui-fx~=noise-overlay] {\n    --kui-ambient-tint-duration: 650ms;\n    --kui-ambient-tint-ease: steps(6);\n    --kui-ambient-tint-delay: 0ms;\n  }\n  [data-kui-fx~=odometer-roll] {\n    --kui-from: 0;\n    --kui-to: 4820;\n    --kui-count-odometer-duration: 1600ms;\n    --kui-count-odometer-delay: 0ms;\n  }\n  [data-kui-fx~=orbit] {\n    --kui-ambient-orbit-duration: 3.5s;\n    --kui-ambient-orbit-delay: 0ms;\n    --kui-ambient-orbit-ease: linear;\n  }\n  [data-kui-fx~=page-fade] {\n    --kui-page-reveal-duration: 600ms;\n    --kui-page-reveal-delay: 0ms;\n    --kui-page-reveal-ease: ease-out;\n  }\n  [data-kui-fx~=page-slide] {\n    --kui-page-reveal-duration: 600ms;\n    --kui-page-reveal-delay: 0ms;\n    --kui-page-reveal-ease: ease-out;\n  }\n  [data-kui-fx~=parallax-rotate] {\n    --kui-parallax-rotate-duration: 600ms;\n    --kui-parallax-rotate-delay: 0ms;\n    --kui-parallax-rotate-ease: ease-out;\n  }\n  [data-kui-fx~=parallax-scale] {\n    --kui-parallax-scale-duration: 600ms;\n    --kui-parallax-scale-delay: 0ms;\n    --kui-parallax-scale-ease: ease-out;\n  }\n  [data-kui-fx~=parallax-x] {\n    --kui-parallax-duration: 600ms;\n    --kui-parallax-delay: 0ms;\n    --kui-parallax-ease: ease-out;\n  }\n  [data-kui-fx~=parallax-y] {\n    --kui-parallax-duration: 600ms;\n    --kui-parallax-delay: 0ms;\n    --kui-parallax-ease: ease-out;\n  }\n  [data-kui-fx~=pin-section] {\n    --kui-distance: 100vh;\n    --kui-spacer: true;\n  }\n  [data-kui-fx~=pin-spacer] {\n    --kui-spacer: true;\n  }\n  [data-kui-fx~=pin-until] {\n    --kui-spacer: false;\n  }\n  [data-kui-fx~=play-to-pause] {\n    --kui-icon-toggle-duration: 260ms;\n    --kui-icon-toggle-ease: ease-out;\n  }\n  [data-kui-fx~=plus-to-minus] {\n    --kui-icon-toggle-duration: 260ms;\n    --kui-icon-toggle-ease: ease-out;\n  }\n  [data-kui-fx~=pop] {\n    --kui-pop-duration: 220ms;\n    --kui-pop-ease: ease-out;\n  }\n  [data-kui-fx~=pop-in] {\n    --kui-from-scale: 0.6;\n    --kui-scale-ease: var(--kui-ease-back-out, ease-out);\n    --kui-scale-duration: 600ms;\n    --kui-scale-delay: 0ms;\n  }\n  [data-kui-fx~=pop-out] {\n    --kui-from-scale: 0.6;\n    --kui-scale-ease: var(--kui-ease-back-in, ease-out);\n    --kui-scale-duration: 600ms;\n    --kui-scale-delay: 0ms;\n  }\n  [data-kui-fx~=progress-bar] {\n    --kui-meter-bar-duration: 600ms;\n    --kui-meter-bar-delay: 0ms;\n    --kui-meter-bar-ease: ease-out;\n  }\n  [data-kui-fx~=progress-indeterminate] {\n    --kui-feedback-progress-track-duration: 1.4s;\n    --kui-feedback-progress-track-delay: 0ms;\n    --kui-feedback-progress-track-ease: ease-in-out;\n  }\n  [data-kui-fx~=progress-ring] {\n    --kui-stroke-sweep-duration: 600ms;\n    --kui-stroke-sweep-delay: 0ms;\n    --kui-stroke-sweep-ease: ease-out;\n  }\n  [data-kui-fx~=progress-segments] {\n    --kui-meter-segments-duration: 600ms;\n    --kui-meter-segments-delay: 0ms;\n    --kui-meter-segments-ease: ease-out;\n  }\n  [data-kui-fx~=pull-to-refresh] {\n    --kui-feedback-pull-duration: 900ms;\n    --kui-feedback-pull-ease: ease-out;\n    --kui-feedback-pull-delay: 0ms;\n  }\n  [data-kui-fx~=range-fill] {\n    --kui-range-fill-duration: 400ms;\n    --kui-range-fill-delay: 0ms;\n    --kui-range-fill-ease: ease-out;\n  }\n  [data-kui-fx~=redaction-reveal] {\n    --kui-redaction-reveal-duration: 600ms;\n    --kui-redaction-reveal-delay: 0ms;\n    --kui-redaction-reveal-ease: ease-out;\n  }\n  [data-kui-fx~=reveal-once] {\n    --kui-reveal-duration: 600ms;\n    --kui-reveal-delay: 0ms;\n    --kui-reveal-ease: ease-out;\n  }\n  [data-kui-fx~=ripple] {\n    --kui-feedback-ripple-duration: 600ms;\n    --kui-feedback-ripple-delay: 0ms;\n    --kui-feedback-ripple-ease: ease-out;\n  }\n  [data-kui-fx~=roll-in] {\n    --kui-roll-duration: 600ms;\n    --kui-roll-delay: 0ms;\n    --kui-roll-ease: ease-out;\n  }\n  [data-kui-fx~=roll-out] {\n    --kui-roll-duration: 600ms;\n    --kui-roll-delay: 0ms;\n    --kui-roll-ease: ease-out;\n  }\n  [data-kui-fx~=rotate-in] {\n    --kui-rotate-duration: 600ms;\n    --kui-rotate-delay: 0ms;\n    --kui-rotate-ease: ease-out;\n  }\n  [data-kui-fx~=rotate-in-left] {\n    --kui-from-angle: -45deg;\n    --kui-rotate-duration: 600ms;\n    --kui-rotate-delay: 0ms;\n    --kui-rotate-ease: ease-out;\n  }\n  [data-kui-fx~=rotate-in-right] {\n    --kui-from-angle: 45deg;\n    --kui-rotate-duration: 600ms;\n    --kui-rotate-delay: 0ms;\n    --kui-rotate-ease: ease-out;\n  }\n  [data-kui-fx~=rotate-out] {\n    --kui-rotate-duration: 600ms;\n    --kui-rotate-delay: 0ms;\n    --kui-rotate-ease: ease-out;\n  }\n  [data-kui-fx~=rubber-band] {\n    --kui-return: true;\n    --kui-bounds: 120;\n  }\n  [data-kui-fx~=saturate-hover] {\n    --kui-media-filter-duration: 600ms;\n    --kui-media-filter-delay: 0ms;\n    --kui-media-filter-ease: ease-out;\n  }\n  [data-kui-fx~=scanline] {\n    --kui-ambient-tint-duration: 3.5s;\n    --kui-ambient-tint-ease: linear;\n    --kui-ambient-tint-delay: 0ms;\n  }\n  [data-kui-fx~=scramble] {\n    --kui-charset: upper;\n    --kui-scramble-text-delay: 0ms;\n  }\n  [data-kui-fx~=scroll-desaturate] {\n    --kui-desaturate-duration: 600ms;\n    --kui-desaturate-delay: 0ms;\n    --kui-desaturate-ease: ease-out;\n  }\n  [data-kui-fx~=scroll-fade] {\n    --kui-scroll-fade-duration: 600ms;\n    --kui-scroll-fade-delay: 0ms;\n    --kui-scroll-fade-ease: ease-out;\n  }\n  [data-kui-fx~=scroll-progress-bar] {\n    --kui-progress-duration: 600ms;\n    --kui-progress-delay: 0ms;\n    --kui-progress-ease: ease-out;\n  }\n  [data-kui-fx~=scroll-progress-bar-y] {\n    --kui-progress-duration: 600ms;\n    --kui-progress-delay: 0ms;\n    --kui-progress-ease: ease-out;\n  }\n  [data-kui-fx~=scroll-progress-ring] {\n    --kui-progress-stroke-duration: 600ms;\n    --kui-progress-stroke-delay: 0ms;\n    --kui-progress-stroke-ease: ease-out;\n  }\n  [data-kui-fx~=scroll-skew] {\n    --kui-skew-duration: 600ms;\n    --kui-skew-delay: 0ms;\n    --kui-skew-ease: ease-out;\n  }\n  [data-kui-fx~=scroll-snap-x] {\n    --kui-axis: x;\n  }\n  [data-kui-fx~=scroll-snap-y] {\n    --kui-axis: y;\n  }\n  [data-kui-fx~=scrollytelling-step] {\n    --kui-steps: 4;\n  }\n  [data-kui-fx~=sequence-scrub] {\n    --kui-spacer: true;\n  }\n  [data-kui-fx~=shake-error] {\n    --kui-feedback-shake-duration: 500ms;\n    --kui-feedback-shake-delay: 0ms;\n    --kui-feedback-shake-ease: linear;\n  }\n  [data-kui-fx~=shine-sweep] {\n    --kui-shine-sweep-duration: 220ms;\n    --kui-shine-sweep-ease: ease-out;\n  }\n  [data-kui-fx~=skeleton-shimmer] {\n    --kui-feedback-shimmer-duration: 1.6s;\n    --kui-feedback-shimmer-delay: 0ms;\n    --kui-feedback-shimmer-ease: linear;\n  }\n  [data-kui-fx~=skeleton-to-content] {\n    --kui-feedback-fade-duration: 600ms;\n    --kui-feedback-fade-delay: 0ms;\n    --kui-feedback-fade-ease: ease-out;\n  }\n  [data-kui-fx~=slat-assemble] {\n    --kui-slat-assemble-duration: 500ms;\n    --kui-slat-assemble-delay: 0ms;\n    --kui-slat-assemble-ease: ease-out;\n  }\n  [data-kui-fx~=slide-block-end] {\n    --kui-distance: 100px;\n    --kui-from-opacity: 1;\n    --kui-reveal-duration: 600ms;\n    --kui-reveal-delay: 0ms;\n    --kui-reveal-ease: ease-out;\n  }\n  [data-kui-fx~=slide-block-start] {\n    --kui-distance: 100px;\n    --kui-from-opacity: 1;\n    --kui-reveal-duration: 600ms;\n    --kui-reveal-delay: 0ms;\n    --kui-reveal-ease: ease-out;\n  }\n  [data-kui-fx~=slide-down] {\n    --kui-distance: 100px;\n    --kui-from-opacity: 1;\n    --kui-reveal-duration: 600ms;\n    --kui-reveal-delay: 0ms;\n    --kui-reveal-ease: ease-out;\n  }\n  [data-kui-fx~=slide-inline-end] {\n    --kui-distance: 100px;\n    --kui-from-opacity: 1;\n    --kui-reveal-duration: 600ms;\n    --kui-reveal-delay: 0ms;\n    --kui-reveal-ease: ease-out;\n  }\n  [data-kui-fx~=slide-inline-start] {\n    --kui-distance: 100px;\n    --kui-from-opacity: 1;\n    --kui-reveal-duration: 600ms;\n    --kui-reveal-delay: 0ms;\n    --kui-reveal-ease: ease-out;\n  }\n  [data-kui-fx~=slide-left] {\n    --kui-distance: 100px;\n    --kui-from-opacity: 1;\n    --kui-reveal-duration: 600ms;\n    --kui-reveal-delay: 0ms;\n    --kui-reveal-ease: ease-out;\n  }\n  [data-kui-fx~=slide-out-down] {\n    --kui-distance: 100px;\n    --kui-from-opacity: 1;\n    --kui-reveal-duration: 600ms;\n    --kui-reveal-delay: 0ms;\n    --kui-reveal-ease: ease-out;\n  }\n  [data-kui-fx~=slide-out-left] {\n    --kui-distance: 100px;\n    --kui-from-opacity: 1;\n    --kui-reveal-duration: 600ms;\n    --kui-reveal-delay: 0ms;\n    --kui-reveal-ease: ease-out;\n  }\n  [data-kui-fx~=slide-out-right] {\n    --kui-distance: 100px;\n    --kui-from-opacity: 1;\n    --kui-reveal-duration: 600ms;\n    --kui-reveal-delay: 0ms;\n    --kui-reveal-ease: ease-out;\n  }\n  [data-kui-fx~=slide-out-up] {\n    --kui-distance: 100px;\n    --kui-from-opacity: 1;\n    --kui-reveal-duration: 600ms;\n    --kui-reveal-delay: 0ms;\n    --kui-reveal-ease: ease-out;\n  }\n  [data-kui-fx~=slide-right] {\n    --kui-distance: 100px;\n    --kui-from-opacity: 1;\n    --kui-reveal-duration: 600ms;\n    --kui-reveal-delay: 0ms;\n    --kui-reveal-ease: ease-out;\n  }\n  [data-kui-fx~=slide-up] {\n    --kui-distance: 100px;\n    --kui-from-opacity: 1;\n    --kui-reveal-duration: 600ms;\n    --kui-reveal-delay: 0ms;\n    --kui-reveal-ease: ease-out;\n  }\n  [data-kui-fx~=snap-back] {\n    --kui-return: true;\n    --kui-stiffness: 260;\n  }\n  [data-kui-fx~=sparkline-draw] {\n    --kui-stroke-sweep-duration: 600ms;\n    --kui-stroke-sweep-delay: 0ms;\n    --kui-stroke-sweep-ease: ease-out;\n  }\n  [data-kui-fx~=spinner] {\n    --kui-feedback-spin-duration: 900ms;\n    --kui-feedback-spin-delay: 0ms;\n    --kui-feedback-spin-ease: linear;\n  }\n  [data-kui-fx~=spinner-dots] {\n    --kui-feedback-dot-pulse-duration: 1.2s;\n    --kui-feedback-dot-pulse-delay: 0ms;\n    --kui-feedback-dot-pulse-ease: ease-in-out;\n  }\n  [data-kui-fx~=spinner-ring] {\n    --kui-feedback-spin-duration: 900ms;\n    --kui-feedback-spin-delay: 0ms;\n    --kui-feedback-spin-ease: linear;\n  }\n  [data-kui-fx~=split-chars] {\n    --kui-unit: chars;\n    --kui-direction: fade;\n    --kui-stagger: 30ms;\n    --kui-split-text-duration: 500ms;\n    --kui-split-text-delay: 0ms;\n    --kui-split-text-ease: ease-out;\n  }\n  [data-kui-fx~=split-flap] {\n    --kui-split-flap-duration: 220ms;\n    --kui-split-flap-ease: ease-out;\n  }\n  [data-kui-fx~=split-lines] {\n    --kui-unit: lines;\n    --kui-direction: fade;\n    --kui-stagger: 160ms;\n    --kui-split-text-duration: 500ms;\n    --kui-split-text-delay: 0ms;\n    --kui-split-text-ease: ease-out;\n  }\n  [data-kui-fx~=split-words] {\n    --kui-unit: words;\n    --kui-direction: fade;\n    --kui-stagger: 90ms;\n    --kui-split-text-duration: 500ms;\n    --kui-split-text-delay: 0ms;\n    --kui-split-text-ease: ease-out;\n  }\n  [data-kui-fx~=spotlight-follow] {\n    --kui-ambient-tint-duration: 9s;\n    --kui-ambient-tint-delay: 0ms;\n    --kui-ambient-tint-ease: ease-in-out;\n  }\n  [data-kui-fx~=stacking-cards] {\n    --kui-spacer: false;\n  }\n  [data-kui-fx~=star-rating-fill] {\n    --kui-meter-stars-duration: 600ms;\n    --kui-meter-stars-delay: 0ms;\n    --kui-meter-stars-ease: ease-out;\n  }\n  [data-kui-fx~=starfield] {\n    --kui-ambient-tint-duration: 40s;\n    --kui-ambient-tint-ease: linear;\n    --kui-ambient-tint-delay: 0ms;\n  }\n  [data-kui-fx~=step-progress] {\n    --kui-step-progress-duration: 400ms;\n    --kui-step-progress-delay: 0ms;\n    --kui-step-progress-ease: ease-out;\n  }\n  [data-kui-fx~=strength-meter] {\n    --kui-strength-meter-duration: 400ms;\n    --kui-strength-meter-delay: 0ms;\n    --kui-strength-meter-ease: ease-out;\n  }\n  [data-kui-fx~=submit-to-spinner-to-check] {\n    --kui-submit-flow-duration: 400ms;\n    --kui-submit-flow-delay: 0ms;\n    --kui-submit-flow-ease: ease-out;\n  }\n  [data-kui-fx~=swing-in] {\n    --kui-from-angle: -15deg;\n    --kui-rotate-ease: var(--kui-ease-back-out, ease-out);\n    --kui-rotate-duration: 600ms;\n    --kui-rotate-delay: 0ms;\n  }\n  [data-kui-fx~=swipe-x] {\n    --kui-axis: x;\n  }\n  [data-kui-fx~=tab-indicator-slide] {\n    --kui-flip-indicator-duration: 300ms;\n    --kui-flip-indicator-ease: ease-out;\n  }\n  [data-kui-fx~=text-3d-extrude] {\n    --kui-text-3d-extrude-duration: 600ms;\n    --kui-text-3d-extrude-delay: 0ms;\n    --kui-text-3d-extrude-ease: ease-out;\n  }\n  [data-kui-fx~=text-jitter] {\n    --kui-motion: jitter;\n    --kui-split-text-motion-delay: 0ms;\n  }\n  [data-kui-fx~=text-outline-fill] {\n    --kui-text-outline-fill-duration: 600ms;\n    --kui-text-outline-fill-delay: 0ms;\n    --kui-text-outline-fill-ease: ease-out;\n  }\n  [data-kui-fx~=text-reveal-down] {\n    --kui-unit: words;\n    --kui-direction: down;\n    --kui-stagger: 90ms;\n    --kui-split-text-duration: 500ms;\n    --kui-split-text-delay: 0ms;\n    --kui-split-text-ease: ease-out;\n  }\n  [data-kui-fx~=text-reveal-mask] {\n    --kui-unit: lines;\n    --kui-direction: mask;\n    --kui-stagger: 160ms;\n    --kui-split-text-duration: 500ms;\n    --kui-split-text-delay: 0ms;\n    --kui-split-text-ease: ease-out;\n  }\n  [data-kui-fx~=text-reveal-up] {\n    --kui-unit: words;\n    --kui-direction: up;\n    --kui-stagger: 90ms;\n    --kui-split-text-duration: 500ms;\n    --kui-split-text-delay: 0ms;\n    --kui-split-text-ease: ease-out;\n  }\n  [data-kui-fx~=text-wave] {\n    --kui-motion: wave;\n    --kui-split-text-motion-delay: 0ms;\n  }\n  [data-kui-fx~=throwable] {\n    --kui-inertia: true;\n    --kui-damping: 18;\n  }\n  [data-kui-fx~=toast-slide-in] {\n    --kui-feedback-toast-duration: 420ms;\n    --kui-feedback-toast-delay: 0ms;\n    --kui-feedback-toast-ease: var(--kui-ease-back-out, ease-out);\n  }\n  [data-kui-fx~=toast-slide-out] {\n    --kui-feedback-toast-ease: ease-in;\n    --kui-feedback-toast-duration: 420ms;\n    --kui-feedback-toast-delay: 0ms;\n  }\n  [data-kui-fx~=typewriter] {\n    --kui-loop: false;\n    --kui-typewriter-delay: 0ms;\n  }\n  [data-kui-fx~=typewriter-loop] {\n    --kui-loop: true;\n    --kui-typewriter-delay: 0ms;\n  }\n  [data-kui-fx~=underline-center] {\n    --kui-underline-center-duration: 220ms;\n    --kui-underline-center-ease: ease-out;\n  }\n  [data-kui-fx~=underline-draw] {\n    --kui-text-sweep-duration: 600ms;\n    --kui-text-sweep-delay: 0ms;\n    --kui-text-sweep-ease: ease-out;\n  }\n  [data-kui-fx~=underline-slide] {\n    --kui-underline-slide-duration: 220ms;\n    --kui-underline-slide-ease: ease-out;\n  }\n  [data-kui-fx~=validate-check] {\n    --kui-validate-check-duration: 600ms;\n    --kui-validate-check-delay: 0ms;\n    --kui-validate-check-ease: ease-out;\n  }\n  [data-kui-fx~=validate-shake] {\n    --kui-validate-shake-duration: 600ms;\n    --kui-validate-shake-delay: 0ms;\n    --kui-validate-shake-ease: ease-out;\n  }\n  [data-kui-fx~=var-slant] {\n    --kui-var-slant-duration: 600ms;\n    --kui-var-slant-delay: 0ms;\n    --kui-var-slant-ease: ease-out;\n  }\n  [data-kui-fx~=var-weight] {\n    --kui-var-weight-duration: 600ms;\n    --kui-var-weight-delay: 0ms;\n    --kui-var-weight-ease: ease-out;\n  }\n  [data-kui-fx~=var-width] {\n    --kui-var-width-duration: 600ms;\n    --kui-var-width-delay: 0ms;\n    --kui-var-width-ease: ease-out;\n  }\n  [data-kui-fx~=wave-blob] {\n    --kui-ambient-tint-duration: 12s;\n    --kui-ambient-tint-delay: 0ms;\n    --kui-ambient-tint-ease: ease-in-out;\n  }\n  [data-kui-fx~=wipe-circle] {\n    --kui-media-wipe-duration: 600ms;\n    --kui-media-wipe-delay: 0ms;\n    --kui-media-wipe-ease: ease-out;\n  }\n  [data-kui-fx~=wipe-diagonal] {\n    --kui-media-wipe-duration: 600ms;\n    --kui-media-wipe-delay: 0ms;\n    --kui-media-wipe-ease: ease-out;\n  }\n  [data-kui-fx~=wipe-down] {\n    --kui-media-wipe-duration: 600ms;\n    --kui-media-wipe-delay: 0ms;\n    --kui-media-wipe-ease: ease-out;\n  }\n  [data-kui-fx~=wipe-left] {\n    --kui-media-wipe-duration: 600ms;\n    --kui-media-wipe-delay: 0ms;\n    --kui-media-wipe-ease: ease-out;\n  }\n  [data-kui-fx~=wipe-right] {\n    --kui-media-wipe-duration: 600ms;\n    --kui-media-wipe-delay: 0ms;\n    --kui-media-wipe-ease: ease-out;\n  }\n  [data-kui-fx~=wipe-up] {\n    --kui-media-wipe-duration: 600ms;\n    --kui-media-wipe-delay: 0ms;\n    --kui-media-wipe-ease: ease-out;\n  }\n  [data-kui-fx~=wobble] {\n    --kui-feedback-wobble-duration: 600ms;\n    --kui-feedback-wobble-ease: ease-in-out;\n    --kui-feedback-wobble-delay: 0ms;\n  }\n  [data-kui-fx~=word-cycler] {\n    --kui-word-cycler-delay: 0ms;\n  }\n  [data-kui-fx~=zoom-in] {\n    --kui-scale-duration: 600ms;\n    --kui-scale-delay: 0ms;\n    --kui-scale-ease: ease-out;\n  }\n  [data-kui-fx~=zoom-in-down] {\n    --kui-scale-move-duration: 600ms;\n    --kui-scale-move-delay: 0ms;\n    --kui-scale-move-ease: ease-out;\n  }\n  [data-kui-fx~=zoom-in-up] {\n    --kui-scale-move-duration: 600ms;\n    --kui-scale-move-delay: 0ms;\n    --kui-scale-move-ease: ease-out;\n  }\n  [data-kui-fx~=zoom-out] {\n    --kui-scale-duration: 600ms;\n    --kui-scale-delay: 0ms;\n    --kui-scale-ease: ease-out;\n  }\n}\n@layer kui.cloak {\n  html[data-kui-cloak] [data-kui~=back-in-down]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=back-in-up]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=blur-in]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=blur-up]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=bounce-in]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=bounce-in-down]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=bounce-in-up]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=card-flip-x]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=card-flip-y]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=chart-bar-grow]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=curtain-reveal]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=fade-blur-in]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=fade-blur-up]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=fade-down]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=fade-in]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=fade-left]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=fade-right]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=fade-up]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=flip-in-x]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=flip-in-y]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=fold-panel]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=loading-bar]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=mask-reveal]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=pop-in]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=progress-bar]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=reveal-once]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=roll-in]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=rotate-in]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=rotate-in-left]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=rotate-in-right]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=slat-assemble]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=slide-block-end]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=slide-block-start]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=slide-down]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=slide-inline-end]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=slide-inline-start]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=slide-left]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=slide-right]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=slide-up]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=swing-in]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=text-reveal-down]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=text-reveal-mask]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=text-reveal-up]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=wipe-circle]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=wipe-diagonal]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=wipe-down]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=wipe-left]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=wipe-right]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=wipe-up]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=zoom-in]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=zoom-in-down]:not([data-kui-state]),\n  html[data-kui-cloak] [data-kui~=zoom-in-up]:not([data-kui-state]) {\n    opacity: 0;\n    animation: kui-cloak-release 1ms linear 2s forwards;\n  }\n  @keyframes kui-cloak-release {\n    to {\n      opacity: 1;\n    }\n  }\n  @media (prefers-reduced-motion: reduce) {\n    html[data-kui-cloak] [data-kui~=back-in-down]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=back-in-up]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=blur-in]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=blur-up]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=bounce-in]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=bounce-in-down]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=bounce-in-up]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=card-flip-x]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=card-flip-y]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=chart-bar-grow]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=curtain-reveal]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=fade-blur-in]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=fade-blur-up]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=fade-down]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=fade-in]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=fade-left]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=fade-right]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=fade-up]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=flip-in-x]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=flip-in-y]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=fold-panel]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=loading-bar]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=mask-reveal]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=pop-in]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=progress-bar]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=reveal-once]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=roll-in]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=rotate-in]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=rotate-in-left]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=rotate-in-right]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=slat-assemble]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=slide-block-end]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=slide-block-start]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=slide-down]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=slide-inline-end]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=slide-inline-start]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=slide-left]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=slide-right]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=slide-up]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=swing-in]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=text-reveal-down]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=text-reveal-mask]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=text-reveal-up]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=wipe-circle]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=wipe-diagonal]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=wipe-down]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=wipe-left]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=wipe-right]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=wipe-up]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=zoom-in]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=zoom-in-down]:not([data-kui-state]),\n    html[data-kui-cloak] [data-kui~=zoom-in-up]:not([data-kui-state]) {\n      opacity: 1;\n      animation: none;\n    }\n  }\n}\n\n/* src/css/entrance.css */\n@layer kui.effects {\n  @keyframes kui-in {\n    from {\n      opacity: var(--kui-from-opacity, 0);\n    }\n  }\n  @keyframes kui-out {\n    to {\n      opacity: 0;\n    }\n  }\n  @keyframes kui-in-up {\n    from {\n      opacity: var(--kui-from-opacity, 0);\n      translate: 0 var(--kui-distance, 24px);\n    }\n  }\n  @keyframes kui-in-down {\n    from {\n      opacity: var(--kui-from-opacity, 0);\n      translate: 0 calc(var(--kui-distance, 24px) * -1);\n    }\n  }\n  @keyframes kui-in-left {\n    from {\n      opacity: var(--kui-from-opacity, 0);\n      translate: var(--kui-distance, 24px) 0;\n    }\n  }\n  @keyframes kui-in-right {\n    from {\n      opacity: var(--kui-from-opacity, 0);\n      translate: calc(var(--kui-distance, 24px) * -1) 0;\n    }\n  }\n  @keyframes kui-out-up {\n    to {\n      opacity: 0;\n      translate: 0 calc(var(--kui-distance, 24px) * -1);\n    }\n  }\n  @keyframes kui-out-down {\n    to {\n      opacity: 0;\n      translate: 0 var(--kui-distance, 24px);\n    }\n  }\n  @keyframes kui-out-left {\n    to {\n      opacity: 0;\n      translate: calc(var(--kui-distance, 24px) * -1) 0;\n    }\n  }\n  @keyframes kui-out-right {\n    to {\n      opacity: 0;\n      translate: var(--kui-distance, 24px) 0;\n    }\n  }\n  @keyframes kui-in-inline-start {\n    from {\n      opacity: var(--kui-from-opacity, 0);\n      translate: calc(var(--kui-distance, 24px) * var(--kui-dir, 1)) 0;\n    }\n  }\n  @keyframes kui-in-inline-end {\n    from {\n      opacity: var(--kui-from-opacity, 0);\n      translate: calc(var(--kui-distance, 24px) * var(--kui-dir, 1) * -1) 0;\n    }\n  }\n  [data-kui-state=ready] {\n    --kui-distance: 0px !important;\n  }\n  @keyframes kui-zoom-in {\n    from {\n      scale: var(--kui-from-scale, 0.92);\n    }\n  }\n  @keyframes kui-zoom-out {\n    to {\n      scale: var(--kui-from-scale, 0.92);\n    }\n  }\n  @keyframes kui-zoom-in-up {\n    from {\n      scale: var(--kui-from-scale, 0.92);\n      translate: 0 var(--kui-distance, 24px);\n    }\n  }\n  @keyframes kui-zoom-in-down {\n    from {\n      scale: var(--kui-from-scale, 0.92);\n      translate: 0 calc(var(--kui-distance, 24px) * -1);\n    }\n  }\n  @keyframes kui-flip-in-x {\n    from {\n      transform: perspective(var(--kui-perspective, 1200px)) rotateX(var(--kui-from-angle, 90deg));\n    }\n  }\n  @keyframes kui-flip-in-y {\n    from {\n      transform: perspective(var(--kui-perspective, 1200px)) rotateY(var(--kui-from-angle, 90deg));\n    }\n  }\n  @keyframes kui-flip-out-x {\n    to {\n      transform: perspective(var(--kui-perspective, 1200px)) rotateX(var(--kui-from-angle, 90deg));\n    }\n  }\n  @keyframes kui-flip-out-y {\n    to {\n      transform: perspective(var(--kui-perspective, 1200px)) rotateY(var(--kui-from-angle, 90deg));\n    }\n  }\n  @keyframes kui-rotate-in {\n    from {\n      rotate: var(--kui-from-angle, -8deg);\n    }\n  }\n  @keyframes kui-rotate-out {\n    to {\n      rotate: var(--kui-from-angle, -8deg);\n    }\n  }\n  @keyframes kui-swing-in {\n    from {\n      rotate: var(--kui-from-angle, -15deg);\n    }\n  }\n  @keyframes kui-roll-in {\n    from {\n      rotate: var(--kui-from-angle, -120deg);\n      translate: calc(var(--kui-distance, 24px) * -1) 0;\n    }\n  }\n  @keyframes kui-roll-out {\n    to {\n      rotate: var(--kui-from-angle, -120deg);\n      translate: var(--kui-distance, 24px) 0;\n    }\n  }\n  @keyframes kui-blur-in {\n    from {\n      filter: blur(var(--kui-blur, 12px));\n    }\n  }\n  @keyframes kui-blur-out {\n    to {\n      filter: blur(var(--kui-blur, 12px));\n    }\n  }\n  @keyframes kui-fade-blur-up {\n    from {\n      opacity: var(--kui-from-opacity, 0);\n      translate: 0 var(--kui-distance, 24px);\n      filter: blur(var(--kui-blur, 12px));\n    }\n  }\n  @keyframes kui-fade-blur-in {\n    from {\n      opacity: var(--kui-from-opacity, 0);\n      filter: blur(var(--kui-blur, 12px));\n    }\n  }\n  [data-kui-fx*=flip-] {\n    transform-style: preserve-3d;\n  }\n  [data-kui-fx~=flip-in-x][data-kui-state=ready],\n  [data-kui-fx~=flip-in-y][data-kui-state=ready] {\n    --kui-from-angle: 0deg !important;\n    opacity: 0;\n  }\n  [data-kui-fx~=rotate-in][data-kui-state=ready],\n  [data-kui-fx~=rotate-in-left][data-kui-state=ready],\n  [data-kui-fx~=rotate-in-right][data-kui-state=ready],\n  [data-kui-fx~=swing-in][data-kui-state=ready],\n  [data-kui-fx~=roll-in][data-kui-state=ready] {\n    --kui-from-angle: 0deg !important;\n    opacity: 0;\n  }\n}\n\n/* src/css/scroll.css */\n@layer kui.effects {\n  @keyframes kui-parallax-y {\n    from {\n      translate: 0 calc(var(--kui-distance, 100px) * -1);\n    }\n    to {\n      translate: 0 var(--kui-distance, 100px);\n    }\n  }\n  @keyframes kui-parallax-x {\n    from {\n      translate: calc(var(--kui-distance, 100px) * -1) 0;\n    }\n    to {\n      translate: var(--kui-distance, 100px) 0;\n    }\n  }\n  @keyframes kui-parallax-scale {\n    from {\n      scale: var(--kui-from-scale, 1);\n    }\n    to {\n      scale: var(--kui-to-scale, 1.2);\n    }\n  }\n  @keyframes kui-parallax-rotate {\n    from {\n      rotate: var(--kui-from-angle, 0deg);\n    }\n    to {\n      rotate: var(--kui-to-angle, 12deg);\n    }\n  }\n  @keyframes kui-scroll-fade {\n    from {\n      opacity: var(--kui-from-opacity, 0);\n    }\n    to {\n      opacity: 1;\n    }\n  }\n  @keyframes kui-desaturate {\n    from {\n      filter: grayscale(var(--kui-from-grayscale, 100%));\n    }\n    to {\n      filter: grayscale(var(--kui-to-grayscale, 0%));\n    }\n  }\n  @keyframes kui-scroll-skew {\n    from {\n      transform: skewY(var(--kui-from-skew, 8deg));\n    }\n    to {\n      transform: skewY(var(--kui-to-skew, 0deg));\n    }\n  }\n  @keyframes kui-progress-x {\n    from {\n      scale: 0 1;\n    }\n    to {\n      scale: 1 1;\n    }\n  }\n  @keyframes kui-progress-y {\n    from {\n      scale: 1 0;\n    }\n    to {\n      scale: 1 1;\n    }\n  }\n  @keyframes kui-progress-ring {\n    from {\n      stroke-dashoffset: var(--kui-path-length, 100);\n    }\n    to {\n      stroke-dashoffset: 0;\n    }\n  }\n  [data-kui-fx~=scroll-progress-bar] {\n    transform-origin: left center;\n  }\n  [data-kui-fx~=scroll-progress-ring] {\n    stroke-dasharray: var(--kui-path-length, 100);\n  }\n  [data-kui-fx~=sequence-scrub]:has(> [data-kui-step-state]),\n  [data-kui-fx~=video-scrub]:has(> [data-kui-step-state]),\n  .kui-frame-stack {\n    position: relative;\n  }\n  [data-kui-fx~=sequence-scrub] > [data-kui-step-state],\n  [data-kui-fx~=video-scrub] > [data-kui-step-state],\n  .kui-frame-stack > [data-kui-step-state] {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    opacity: 0;\n  }\n  [data-kui-fx~=sequence-scrub] > [data-kui-step-state=active],\n  [data-kui-fx~=video-scrub] > [data-kui-step-state=active],\n  .kui-frame-stack > [data-kui-step-state=active] {\n    opacity: 1;\n  }\n  @supports (animation-timeline: view()) {\n    [data-kui-timeline] {\n      animation-range: var(--kui-range, entry 0% cover 60%);\n    }\n  }\n}\n\n/* src/css/three-d.css */\n@layer kui.effects {\n  @keyframes kui-card-flip-y {\n    to {\n      transform: perspective(var(--kui-perspective, 1200px)) rotateY(var(--kui-from-angle, 180deg));\n    }\n  }\n  @keyframes kui-card-flip-x {\n    to {\n      transform: perspective(var(--kui-perspective, 1200px)) rotateX(var(--kui-from-angle, 180deg));\n    }\n  }\n  @keyframes kui-cube-rotate {\n    to {\n      transform: perspective(var(--kui-perspective, 1200px)) rotateY(var(--kui-from-angle, 90deg));\n    }\n  }\n  @keyframes kui-book-page-turn {\n    to {\n      transform: perspective(var(--kui-perspective, 1200px)) rotateY(var(--kui-from-angle, -160deg));\n    }\n  }\n  @keyframes kui-fold-panel {\n    from {\n      transform: perspective(var(--kui-perspective, 1200px)) rotateX(var(--kui-from-angle, -90deg));\n    }\n  }\n  [data-kui-fx~=card-flip-x],\n  [data-kui-fx~=card-flip-y],\n  [data-kui-fx~=cube-rotate],\n  [data-kui-fx~=book-page-turn],\n  [data-kui-fx~=fold-panel] {\n    transform-style: preserve-3d;\n    perspective: var(--kui-perspective, 1200px);\n  }\n  [data-kui-fx~=card-flip-x]:not(:has(> :nth-child(2))),\n  [data-kui-fx~=card-flip-y]:not(:has(> :nth-child(2))) {\n    --kui-from-angle: 360deg;\n  }\n  [data-kui-fx~=card-flip-x]:has(> :nth-child(2)),\n  [data-kui-fx~=card-flip-y]:has(> :nth-child(2)) {\n    display: grid;\n  }\n  [data-kui-fx~=card-flip-x]:has(> :nth-child(2)) > :first-child,\n  [data-kui-fx~=card-flip-x]:has(> :nth-child(2)) > :nth-child(2),\n  [data-kui-fx~=card-flip-y]:has(> :nth-child(2)) > :first-child,\n  [data-kui-fx~=card-flip-y]:has(> :nth-child(2)) > :nth-child(2) {\n    grid-area: 1 / 1;\n    backface-visibility: hidden;\n  }\n  [data-kui-fx~=card-flip-x]:has(> :nth-child(2)) > :nth-child(2) {\n    rotate: x 180deg;\n  }\n  [data-kui-fx~=card-flip-y]:has(> :nth-child(2)) > :nth-child(2) {\n    rotate: y 180deg;\n  }\n  [data-kui-fx~=book-page-turn] {\n    transform-origin: left center;\n  }\n  [data-kui-fx~=fold-panel] {\n    transform-origin: top center;\n  }\n  [data-kui-fx~=fold-panel][data-kui-state=ready] {\n    --kui-from-angle: 0deg !important;\n    opacity: 0;\n  }\n  @keyframes kui-page-fade {\n    from {\n      opacity: 0;\n    }\n  }\n  @keyframes kui-page-slide {\n    from {\n      opacity: 0;\n      translate: 0 var(--kui-distance, 40px);\n    }\n  }\n  @keyframes kui-curtain-wipe {\n    from {\n      clip-path: inset(0 0 100% 0);\n    }\n    to {\n      clip-path: inset(0 0 0 0);\n    }\n  }\n  @keyframes kui-loading-bar {\n    from {\n      scale: var(--kui-bar-from, 0) 1;\n    }\n  }\n  [data-kui-fx~=loading-bar] {\n    transform-origin: left center;\n  }\n  [data-kui-fx~=loading-bar][data-kui-state=ready] {\n    --kui-bar-from: 1 !important;\n    opacity: 0;\n  }\n  [data-kui-fx~=flip-card] {\n    display: grid;\n    perspective: var(--kui-perspective, 1600px);\n  }\n  [data-kui-fx~=flip-card] > .kui-face-front,\n  [data-kui-fx~=flip-card] > .kui-face-back {\n    grid-area: 1 / 1;\n    backface-visibility: hidden;\n    transition: rotate var(--kui-card-toggle-duration, 700ms) var(--kui-card-toggle-ease, ease-in-out);\n  }\n  [data-kui-fx~=flip-card] > .kui-face-front {\n    rotate: y 0deg;\n  }\n  [data-kui-fx~=flip-card] > .kui-face-back {\n    rotate: y 180deg;\n  }\n  [data-kui-fx~=flip-card]:has(> .kui-flip-control[aria-pressed=true]) > .kui-face-front {\n    rotate: y -180deg;\n  }\n  [data-kui-fx~=flip-card]:has(> .kui-flip-control[aria-pressed=true]) > .kui-face-back {\n    rotate: y 0deg;\n  }\n  [data-kui~=flip-card] {\n    display: grid;\n    perspective: var(--kui-perspective, 1600px);\n  }\n  [data-kui~=flip-card] > .kui-face-front,\n  [data-kui~=flip-card] > .kui-face-back {\n    grid-area: 1 / 1;\n    backface-visibility: hidden;\n  }\n  [data-kui~=flip-card] > .kui-face-front {\n    rotate: y 0deg;\n  }\n  [data-kui~=flip-card] > .kui-face-back {\n    rotate: y 180deg;\n  }\n}\n\n/* src/css/media.css */\n@layer kui.effects {\n  @keyframes kui-wipe-up {\n    from {\n      clip-path: inset(100% 0 0);\n    }\n    to {\n      clip-path: inset(0 0 0);\n    }\n  }\n  @keyframes kui-wipe-down {\n    from {\n      clip-path: inset(0 0 100%);\n    }\n    to {\n      clip-path: inset(0 0 0);\n    }\n  }\n  @keyframes kui-wipe-left {\n    from {\n      clip-path: inset(0 100% 0 0);\n    }\n    to {\n      clip-path: inset(0 0 0 0);\n    }\n  }\n  @keyframes kui-wipe-right {\n    from {\n      clip-path: inset(0 0 0 100%);\n    }\n    to {\n      clip-path: inset(0 0 0 0);\n    }\n  }\n  @keyframes kui-wipe-circle {\n    from {\n      clip-path: circle(0 at 50% 50%);\n    }\n    to {\n      clip-path: circle(75% at 50% 50%);\n    }\n  }\n  @keyframes kui-wipe-diagonal {\n    from {\n      clip-path: polygon(0 0, 0 0, 0 0);\n    }\n    to {\n      clip-path: polygon(0 0, 200% 0, 0 200%);\n    }\n  }\n  @keyframes kui-curtain-reveal {\n    from {\n      clip-path: inset(0 50%);\n    }\n    to {\n      clip-path: inset(0 0);\n    }\n  }\n  @keyframes kui-before-after-wipe {\n    from {\n      clip-path: inset(0 100% 0 0);\n    }\n    to {\n      clip-path: inset(0 0 0 0);\n    }\n  }\n  @keyframes kui-mask-reveal {\n    from {\n      mask-position: 100% 0;\n    }\n    to {\n      mask-position: 0 0;\n    }\n  }\n  [data-kui-fx~=mask-reveal] {\n    mask-image:\n      linear-gradient(\n        90deg,\n        #000 0 45%,\n        transparent 55% 100%);\n    mask-size: 220% 100%;\n  }\n  @keyframes kui-ken-burns {\n    from {\n      scale: 1;\n      translate: 0 0;\n    }\n    to {\n      scale: var(--kui-to-scale, 1.12);\n      translate: var(--kui-distance, 24px) calc(var(--kui-distance, 24px) * -0.5);\n    }\n  }\n  @keyframes kui-ken-burns-out {\n    from {\n      scale: var(--kui-to-scale, 1.12);\n      translate: calc(var(--kui-distance, 24px) * -1) 0;\n    }\n    to {\n      scale: 1;\n      translate: 0 0;\n    }\n  }\n  @keyframes kui-blur-up {\n    from {\n      translate: 0 var(--kui-distance, 24px);\n      filter: blur(var(--kui-blur, 16px));\n    }\n    to {\n      translate: 0 0;\n      filter: blur(0);\n    }\n  }\n  @keyframes kui-duotone-hover {\n    from {\n      filter: grayscale(1) sepia(0.7) hue-rotate(330deg) saturate(2);\n    }\n    to {\n      filter: none;\n    }\n  }\n  @keyframes kui-grayscale-hover {\n    from {\n      filter: grayscale(1);\n    }\n    to {\n      filter: grayscale(0);\n    }\n  }\n  @keyframes kui-saturate-hover {\n    from {\n      filter: saturate(0.45);\n    }\n    to {\n      filter: saturate(1.35);\n    }\n  }\n  @keyframes kui-image-parallax-frame {\n    from {\n      translate: 0 calc(var(--kui-distance, 24px) * -1);\n    }\n    to {\n      translate: 0 var(--kui-distance, 24px);\n    }\n  }\n  @keyframes kui-lightbox-open {\n    from {\n      opacity: 0;\n      scale: var(--kui-from-scale, 0.92);\n    }\n    to {\n      opacity: 1;\n      scale: 1;\n    }\n  }\n  @media (pointer: coarse) {\n    [data-kui-fx~=duotone-hover]:active,\n    [data-kui-fx~=grayscale-hover]:active,\n    [data-kui-fx~=saturate-hover]:active {\n      filter: none;\n    }\n  }\n  .kui-slat-stage {\n    position: absolute;\n    overflow: clip;\n  }\n  .kui-slat-item {\n    position: absolute;\n    inset: 0;\n    background-repeat: no-repeat;\n    background-size: 100% 100%;\n    animation-duration: var(--kui-duration, 500ms);\n    animation-delay: calc(var(--kui-delay, 0ms) + var(--kui-i, 0) * var(--kui-stagger, 60ms));\n    animation-timing-function: var(--kui-ease, ease-out);\n    animation-fill-mode: both;\n  }\n  .kui-slat-stage.kui-slat-animating .kui-slat-item {\n    will-change: transform;\n  }\n  .kui-slat-item:nth-child(odd) {\n    --kui-slat-sign: -1;\n  }\n  .kui-slat-item:nth-child(even) {\n    --kui-slat-sign: 1;\n  }\n  .kui-slat-stage[data-kui-slat-fold=true] {\n    perspective: 1200px;\n  }\n  .kui-slat-stage:not([data-kui-slat-fold=true]) .kui-slat-item {\n    animation-name: kui-slat-assemble;\n  }\n  .kui-slat-stage[data-kui-slat-fold=true] .kui-slat-item {\n    animation-name: kui-slat-assemble-fold;\n  }\n  @keyframes kui-slat-assemble {\n    from {\n      opacity: 0;\n      translate: calc(var(--kui-slat-sign, 1) * var(--kui-slat-dx, 0) * 38%) calc(var(--kui-slat-sign, 1) * var(--kui-slat-dy, 1) * 38%);\n    }\n    12% {\n      opacity: 1;\n    }\n    to {\n      opacity: 1;\n      translate: 0 0;\n    }\n  }\n  @keyframes kui-slat-assemble-fold {\n    from {\n      opacity: 0;\n      translate: calc(var(--kui-slat-sign, 1) * var(--kui-slat-dx, 0) * 38%) calc(var(--kui-slat-sign, 1) * var(--kui-slat-dy, 1) * 38%);\n      rotate: var(--kui-slat-dx, 0) var(--kui-slat-dy, 1) 0 calc(var(--kui-slat-sign, 1) * 38deg);\n    }\n    12% {\n      opacity: 1;\n    }\n    to {\n      opacity: 1;\n      translate: 0 0;\n      rotate: var(--kui-slat-dx, 0) var(--kui-slat-dy, 1) 0 0deg;\n    }\n  }\n}\n\n/* src/css/text.css */\n@layer kui.effects {\n  .kui-sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border: 0;\n  }\n  .kui-split-decorative {\n    display: inline;\n  }\n  .kui-split-item {\n    display: inline-block;\n    animation-duration: var(--kui-duration, 500ms);\n    animation-delay: calc(var(--kui-delay, 0ms) + var(--kui-i, 0) * var(--kui-stagger, 30ms));\n    animation-timing-function: var(--kui-ease, ease-out);\n    animation-fill-mode: both;\n  }\n  .kui-split-word {\n    display: inline-block;\n  }\n  .kui-split-line {\n    display: block;\n  }\n  [data-kui-split-fx=fade] .kui-split-item {\n    animation-name: kui-split-reveal-fade;\n  }\n  [data-kui-split-fx=up] .kui-split-item {\n    animation-name: kui-split-reveal-up;\n  }\n  [data-kui-split-fx=down] .kui-split-item {\n    animation-name: kui-split-reveal-down;\n  }\n  [data-kui-split-fx=mask] .kui-split-item {\n    animation-name: kui-split-reveal-mask;\n    padding-block: var(--kui-mask-bleed, 0px);\n    margin-block: calc(-1 * var(--kui-mask-bleed, 0px));\n  }\n  @keyframes kui-split-reveal-fade {\n    from {\n      opacity: 0;\n    }\n  }\n  @keyframes kui-split-reveal-up {\n    from {\n      opacity: 0;\n      translate: 0 0.6em;\n    }\n  }\n  @keyframes kui-split-reveal-down {\n    from {\n      opacity: 0;\n      translate: 0 -0.6em;\n    }\n  }\n  @keyframes kui-split-reveal-mask {\n    from {\n      opacity: 0;\n      clip-path: inset(0 0 100% 0);\n    }\n    to {\n      clip-path: inset(0 0 0 0);\n    }\n  }\n  [data-kui-split-fx=wave] .kui-split-item {\n    animation-name: kui-split-wave;\n    animation-duration: 1400ms;\n    animation-iteration-count: infinite;\n    animation-timing-function: ease-in-out;\n  }\n  [data-kui-split-fx=jitter] .kui-split-item {\n    animation-name: kui-split-jitter;\n    animation-duration: 220ms;\n    animation-iteration-count: infinite;\n    animation-timing-function: ease-in-out;\n    animation-direction: alternate;\n  }\n  @keyframes kui-split-wave {\n    0%, 100% {\n      translate: 0 0;\n    }\n    50% {\n      translate: 0 -0.35em;\n    }\n  }\n  @keyframes kui-split-jitter {\n    from {\n      translate: 0 0;\n      rotate: 0deg;\n    }\n    to {\n      translate: 0 0.08em;\n      rotate: 3deg;\n    }\n  }\n  .kui-typewriter::after {\n    content: \"\";\n    display: inline-block;\n    width: 0.08em;\n    margin-inline-start: 0.05em;\n    height: 1em;\n    vertical-align: -0.15em;\n    background: currentColor;\n    animation: kui-caret-blink 1s steps(1) infinite;\n  }\n  @keyframes kui-caret-blink {\n    50% {\n      opacity: 0;\n    }\n  }\n  .kui-scramble {\n    font-variant-numeric: tabular-nums;\n  }\n  [data-kui-fx~=word-cycler] {\n    display: inline-block;\n    transition: opacity 150ms ease-out;\n  }\n  [data-kui-fx~=word-cycler].kui-word-cycler-swap {\n    opacity: 0;\n  }\n  [data-kui-fx~=gradient-shimmer] {\n    background-image:\n      linear-gradient(\n        100deg,\n        currentColor 40%,\n        color-mix(in srgb, currentColor 35%, transparent) 50%,\n        currentColor 60%);\n    background-size: 220% 100%;\n    -webkit-background-clip: text;\n    background-clip: text;\n    -webkit-text-fill-color: transparent;\n    --kui-fx-gradient-shimmer-iterations: infinite;\n  }\n  @keyframes kui-gradient-shimmer {\n    from {\n      background-position: 200% 0;\n    }\n    to {\n      background-position: -200% 0;\n    }\n  }\n  [data-kui-fx~=gradient-sweep] {\n    background-image:\n      linear-gradient(\n        100deg,\n        transparent 30%,\n        color-mix(in srgb, var(--kui-sweep-color, currentColor) 70%, transparent) 50%,\n        transparent 70%);\n    background-size: 260% 100%;\n    -webkit-background-clip: text;\n    background-clip: text;\n    -webkit-text-fill-color: transparent;\n  }\n  @keyframes kui-gradient-sweep {\n    from {\n      background-position: 220% 0;\n    }\n    to {\n      background-position: -60% 0;\n    }\n  }\n  [data-kui-fx~=highlight-sweep] {\n    background-image: linear-gradient(90deg, color-mix(in srgb, var(--kui-sweep-color, currentColor) 55%, transparent) 0 100%);\n    background-repeat: no-repeat;\n    background-size: 0% 100%;\n    padding: 0 0.05em;\n  }\n  @keyframes kui-highlight-sweep {\n    to {\n      background-size: 100% 100%;\n    }\n  }\n  [data-kui-fx~=underline-draw] {\n    background-image: linear-gradient(var(--kui-sweep-color, currentColor), var(--kui-sweep-color, currentColor));\n    background-repeat: no-repeat;\n    background-position: 0 100%;\n    background-size: 0% 2px;\n    padding-bottom: 0.15em;\n  }\n  @keyframes kui-underline-draw {\n    to {\n      background-size: 100% 2px;\n    }\n  }\n  [data-kui-fx~=text-outline-fill] {\n    -webkit-text-stroke: 1px currentColor;\n    -webkit-text-fill-color: transparent;\n  }\n  @keyframes kui-text-outline-fill {\n    to {\n      -webkit-text-fill-color: currentColor;\n    }\n  }\n  @keyframes kui-var-weight {\n    from {\n      font-weight: var(--kui-from-weight, 100);\n    }\n    to {\n      font-weight: var(--kui-to-weight, 800);\n    }\n  }\n  @keyframes kui-var-width {\n    from {\n      font-stretch: var(--kui-from-width, 75%);\n    }\n    to {\n      font-stretch: var(--kui-to-width, 125%);\n    }\n  }\n  @keyframes kui-var-slant {\n    from {\n      font-style: oblique var(--kui-from-slant, 0deg);\n    }\n    to {\n      font-style: oblique var(--kui-to-slant, 10deg);\n    }\n  }\n  [data-kui-fx~=marquee],\n  [data-kui-fx~=marquee-scroll-linked] {\n    display: flex;\n    width: max-content;\n    will-change: translate;\n  }\n  [data-kui-fx~=marquee] {\n    --kui-fx-marquee-iterations: infinite;\n  }\n  @keyframes kui-marquee {\n    to {\n      translate: -50% 0;\n    }\n  }\n  @property --kui-redaction-x { syntax: \"<percentage>\"; inherits: true; initial-value: 0%; }\n  [data-kui-fx~=redaction-reveal] {\n    position: relative;\n    display: inline-block;\n  }\n  [data-kui-fx~=redaction-reveal]::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    background: var(--kui-bar-color, #111);\n    clip-path: inset(0 0 0 var(--kui-redaction-x));\n  }\n  @keyframes kui-redaction-reveal {\n    to {\n      --kui-redaction-x: 100%;\n    }\n  }\n  [data-kui-fx~=text-3d-extrude] {\n    display: inline-block;\n    text-shadow:\n      1px 1px 0 color-mix(in srgb, currentColor 70%, transparent),\n      2px 2px 0 color-mix(in srgb, currentColor 60%, transparent),\n      3px 3px 0 color-mix(in srgb, currentColor 50%, transparent),\n      4px 4px 0 color-mix(in srgb, currentColor 40%, transparent),\n      5px 5px 0 color-mix(in srgb, currentColor 30%, transparent),\n      6px 6px 8px rgb(0 0 0 / 0.35);\n  }\n  @keyframes kui-text-3d-extrude {\n    from {\n      rotate: var(--kui-from-angle, -20deg);\n      translate: 0 var(--kui-distance, 32px);\n    }\n    to {\n      rotate: 0deg;\n      translate: 0 0;\n    }\n  }\n}\n\n/* src/css/navigation.css */\n@layer kui.effects {\n  @keyframes kui-nav-reveal {\n    from {\n      opacity: 0;\n      translate: 0 var(--kui-distance, 16px);\n    }\n  }\n  @keyframes kui-menu-fullscreen {\n    from {\n      opacity: 0;\n      clip-path: circle(0% at var(--kui-origin, 100% 0%));\n    }\n    to {\n      opacity: 1;\n      clip-path: circle(150% at var(--kui-origin, 100% 0%));\n    }\n  }\n  @keyframes kui-panel-reveal {\n    from {\n      opacity: 0;\n      translate: 0 calc(var(--kui-distance, 10px) * -1);\n    }\n  }\n  @keyframes kui-drawer-slide-right {\n    from {\n      translate: 100% 0;\n    }\n  }\n  [data-kui-fx~=header-shrink] {\n    --kui-shrink: 0;\n    padding-block: calc(1.4rem - 0.7rem * var(--kui-shrink, 0));\n    font-size: calc(1rem - 0.15rem * var(--kui-shrink, 0));\n    transition:\n      padding-block 200ms ease-out,\n      font-size 200ms ease-out,\n      box-shadow 200ms ease-out;\n  }\n  [data-kui-fx~=header-shrink][data-kui-shrunk=true] {\n    box-shadow: 0 2px 10px rgb(0 0 0 / 0.12);\n  }\n  [data-kui-fx~=header-hide-on-scroll] {\n    transition: translate 220ms ease-out;\n  }\n  [data-kui-fx~=header-hide-on-scroll][data-kui-hidden=true] {\n    translate: 0 -100%;\n  }\n  [data-kui-fx~=back-to-top-fade] {\n    opacity: 0;\n    translate: 0 12px;\n    pointer-events: none;\n    transition: opacity 200ms ease-out, translate 200ms ease-out;\n  }\n  [data-kui-fx~=back-to-top-fade][data-kui-visible=true] {\n    opacity: 1;\n    translate: 0 0;\n    pointer-events: auto;\n  }\n}\n\n/* src/css/forms.css */\n@layer kui.effects {\n  [data-kui-fx~=label-float] ~ label {\n    transition: translate 180ms ease-out, scale 180ms ease-out;\n    transform-origin: left center;\n  }\n  [data-kui-fx~=label-float]:focus ~ label,\n  [data-kui-fx~=label-float]:not(:placeholder-shown) ~ label {\n    translate: 0 -1.35rem;\n    scale: 0.82;\n  }\n  [data-kui-fx~=input-underline-grow] ~ .kui-underline {\n    display: block;\n    height: 2px;\n    background: currentColor;\n    scale: 0 1;\n    transform-origin: left center;\n    transition: scale 220ms ease-out;\n  }\n  [data-kui-fx~=input-underline-grow]:focus ~ .kui-underline {\n    scale: 1 1;\n  }\n  @keyframes kui-focus-ring-grow {\n    from {\n      box-shadow: 0 0 0 0 var(--kui-ring-color, rgb(210 105 30 / 0.55));\n    }\n    to {\n      box-shadow: 0 0 0 5px var(--kui-ring-color, rgb(210 105 30 / 0.55));\n    }\n  }\n  @keyframes kui-validate-shake {\n    10%, 90% {\n      translate: -1px 0;\n    }\n    20%, 80% {\n      translate: 2px 0;\n    }\n    30%, 50%, 70% {\n      translate: -4px 0;\n    }\n    40%, 60% {\n      translate: 4px 0;\n    }\n  }\n  [data-kui-fx~=validate-check] {\n    stroke-dasharray: 24;\n    stroke-dashoffset: 24;\n  }\n  @keyframes kui-validate-check {\n    to {\n      stroke-dashoffset: 0;\n    }\n  }\n  [data-kui-fx~=strength-meter] ~ .kui-meter > * {\n    background: var(--kui-meter-off, currentColor);\n    opacity: 0.2;\n    transition: opacity 200ms ease-out, background-color 200ms ease-out;\n  }\n  [data-kui-fx~=strength-meter][data-kui-strength-level=\"1\"] ~ .kui-meter > *:nth-child(-n+1),\n  [data-kui-fx~=strength-meter][data-kui-strength-level=\"2\"] ~ .kui-meter > *:nth-child(-n+2),\n  [data-kui-fx~=strength-meter][data-kui-strength-level=\"3\"] ~ .kui-meter > *:nth-child(-n+3),\n  [data-kui-fx~=strength-meter][data-kui-strength-level=\"4\"] ~ .kui-meter > *:nth-child(-n+4),\n  [data-kui-fx~=strength-meter][data-kui-strength-level=\"5\"] ~ .kui-meter > *:nth-child(-n+5),\n  [data-kui-fx~=strength-meter][data-kui-strength-level=\"6\"] ~ .kui-meter > *:nth-child(-n+6),\n  [data-kui-fx~=strength-meter][data-kui-strength-level=\"7\"] ~ .kui-meter > *:nth-child(-n+7),\n  [data-kui-fx~=strength-meter][data-kui-strength-level=\"8\"] ~ .kui-meter > *:nth-child(-n+8),\n  [data-kui-fx~=strength-meter][data-kui-strength-level=\"9\"] ~ .kui-meter > *:nth-child(-n+9),\n  [data-kui-fx~=strength-meter][data-kui-strength-level=\"10\"] ~ .kui-meter > *:nth-child(-n+10),\n  [data-kui-fx~=strength-meter][data-kui-strength-level=\"11\"] ~ .kui-meter > *:nth-child(-n+11),\n  [data-kui-fx~=strength-meter][data-kui-strength-level=\"12\"] ~ .kui-meter > *:nth-child(-n+12),\n  [data-kui-fx~=strength-meter][data-kui-strength-level=\"13\"] ~ .kui-meter > *:nth-child(-n+13),\n  [data-kui-fx~=strength-meter][data-kui-strength-level=\"14\"] ~ .kui-meter > *:nth-child(-n+14),\n  [data-kui-fx~=strength-meter][data-kui-strength-level=\"15\"] ~ .kui-meter > *:nth-child(-n+15),\n  [data-kui-fx~=strength-meter][data-kui-strength-level=\"16\"] ~ .kui-meter > *:nth-child(-n+16),\n  [data-kui-fx~=strength-meter][data-kui-strength-level=\"17\"] ~ .kui-meter > *:nth-child(-n+17),\n  [data-kui-fx~=strength-meter][data-kui-strength-level=\"18\"] ~ .kui-meter > *:nth-child(-n+18),\n  [data-kui-fx~=strength-meter][data-kui-strength-level=\"19\"] ~ .kui-meter > *:nth-child(-n+19),\n  [data-kui-fx~=strength-meter][data-kui-strength-level=\"20\"] ~ .kui-meter > *:nth-child(-n+20) {\n    opacity: 1;\n    background: var(--kui-meter-on, #2e9e5b);\n  }\n  [data-kui-fx~=toggle-morph] ~ .kui-track {\n    display: inline-block;\n    width: calc(40px * var(--kui-toggle-scale, 1));\n    height: calc(22px * var(--kui-toggle-scale, 1));\n    border-radius: 999px;\n    background: var(--muted, #9a8d80);\n    transition: background-color 200ms ease-out;\n    position: relative;\n  }\n  [data-kui-fx~=toggle-morph] ~ .kui-track .kui-thumb {\n    position: absolute;\n    top: calc(2px * var(--kui-toggle-scale, 1));\n    left: calc(2px * var(--kui-toggle-scale, 1));\n    width: calc(18px * var(--kui-toggle-scale, 1));\n    height: calc(18px * var(--kui-toggle-scale, 1));\n    border-radius: 50%;\n    background: var(--kui-thumb-color, #fff);\n    translate: 0 0;\n    transition: translate 200ms ease-out;\n  }\n  [data-kui-fx~=toggle-morph]:checked ~ .kui-track {\n    background: var(--accent, #d2691e);\n  }\n  [data-kui-fx~=toggle-morph]:checked ~ .kui-track .kui-thumb {\n    translate: calc(18px * var(--kui-toggle-scale, 1)) 0;\n  }\n  [data-kui-fx~=checkbox-draw] ~ svg path {\n    stroke-dasharray: 24;\n    stroke-dashoffset: 24;\n    transition: stroke-dashoffset 220ms ease-out;\n  }\n  [data-kui-fx~=checkbox-draw]:checked ~ svg path {\n    stroke-dashoffset: 0;\n  }\n  [data-kui-fx~=radio-fill] ~ .kui-dot {\n    display: inline-block;\n    width: calc(10px * var(--kui-radio-scale, 1));\n    height: calc(10px * var(--kui-radio-scale, 1));\n    border-radius: 50%;\n    background: var(--accent, #d2691e);\n    scale: 0;\n    transition: scale 180ms ease-out;\n  }\n  [data-kui-fx~=radio-fill]:checked ~ .kui-dot {\n    scale: 1;\n  }\n  [data-kui-fx~=range-fill] {\n    --kui-fill: 0%;\n    accent-color: var(--accent, #d2691e);\n    background:\n      linear-gradient(\n        to right,\n        var(--accent, #d2691e) var(--kui-fill, 0%),\n        var(--border, #2a2422) var(--kui-fill, 0%));\n    height: 4px;\n    border-radius: 999px;\n    appearance: none;\n    outline: none;\n  }\n  [data-kui-fx~=submit-to-spinner-to-check] .kui-stage-idle,\n  [data-kui-fx~=submit-to-spinner-to-check] .kui-stage-loading,\n  [data-kui-fx~=submit-to-spinner-to-check] .kui-stage-done {\n    display: none;\n  }\n  [data-kui-fx~=submit-to-spinner-to-check][data-kui-stage=idle] .kui-stage-idle,\n  [data-kui-fx~=submit-to-spinner-to-check][data-kui-stage=loading] .kui-stage-loading,\n  [data-kui-fx~=submit-to-spinner-to-check][data-kui-stage=done] .kui-stage-done {\n    display: inline-flex;\n  }\n  [data-kui-fx~=submit-to-spinner-to-check] .kui-spinner {\n    width: 1em;\n    height: 1em;\n    border-radius: 50%;\n    border: 2px solid currentColor;\n    border-top-color: transparent;\n    animation: kui-spin 700ms linear infinite;\n  }\n  @keyframes kui-spin {\n    to {\n      rotate: 360deg;\n    }\n  }\n  [data-kui-fx~=step-progress] {\n    cursor: pointer;\n  }\n  [data-kui-fx~=step-progress] > [data-kui-step-state],\n  .kui-step-track > [data-kui-step-state] {\n    background: var(--muted, #9a8d80);\n    opacity: 0.35;\n    transition: opacity 200ms ease-out, background-color 200ms ease-out;\n  }\n  [data-kui-fx~=step-progress] > [data-kui-step-state=before],\n  [data-kui-fx~=step-progress] > [data-kui-step-state=active],\n  .kui-step-track > [data-kui-step-state=before],\n  .kui-step-track > [data-kui-step-state=active] {\n    opacity: 1;\n    background: var(--accent, #d2691e);\n  }\n}\n\n/* src/css/ambient.css */\n@layer kui.effects {\n  [data-kui-fx~=gradient-mesh] {\n    background-image:\n      radial-gradient(\n        at 15% 20%,\n        color-mix(in srgb, var(--kui-ambient-c1, var(--kui-c1, #7c3aed)) 55%, transparent),\n        transparent 55%),\n      radial-gradient(\n        at 85% 15%,\n        color-mix(in srgb, var(--kui-ambient-c2, var(--kui-c2, #06b6d4)) 50%, transparent),\n        transparent 55%),\n      radial-gradient(\n        at 50% 85%,\n        color-mix(in srgb, var(--kui-ambient-c3, var(--kui-c3, #f97316)) 45%, transparent),\n        transparent 55%);\n    background-size: 200% 200%;\n    --kui-fx-gradient-mesh-iterations: infinite;\n  }\n  @keyframes kui-gradient-mesh {\n    0%, 100% {\n      background-position:\n        0% 0%,\n        100% 0%,\n        50% 100%;\n    }\n    50% {\n      background-position:\n        25% 35%,\n        75% 30%,\n        35% 70%;\n    }\n  }\n  [data-kui-fx~=aurora] {\n    background-image:\n      linear-gradient(\n        120deg,\n        color-mix(in srgb, var(--kui-ambient-c1, var(--kui-c1, #34d399)) 45%, transparent),\n        transparent 45%),\n      linear-gradient(\n        240deg,\n        color-mix(in srgb, var(--kui-ambient-c2, var(--kui-c2, #60a5fa)) 45%, transparent),\n        transparent 45%),\n      linear-gradient(\n        0deg,\n        color-mix(in srgb, var(--kui-ambient-c3, var(--kui-c3, #c084fc)) 40%, transparent),\n        transparent 50%);\n    background-size: 260% 260%;\n    --kui-fx-aurora-iterations: infinite;\n  }\n  @keyframes kui-aurora {\n    0%, 100% {\n      background-position:\n        0% 50%,\n        100% 50%,\n        50% 0%;\n    }\n    50% {\n      background-position:\n        60% 30%,\n        40% 70%,\n        55% 60%;\n    }\n  }\n  [data-kui-fx~=wave-blob] {\n    background-image:\n      radial-gradient(\n        circle,\n        color-mix(in srgb, var(--kui-ambient-c1, var(--kui-c1, #22d3ee)) 50%, transparent),\n        transparent 60%);\n    background-size: 140% 140%;\n    background-repeat: no-repeat;\n    --kui-fx-wave-blob-iterations: infinite;\n  }\n  @keyframes kui-wave-blob {\n    0%, 100% {\n      background-position: 20% 30%;\n      background-size: 140% 140%;\n    }\n    33% {\n      background-position: 70% 20%;\n      background-size: 160% 160%;\n    }\n    66% {\n      background-position: 50% 75%;\n      background-size: 120% 120%;\n    }\n  }\n  [data-kui-fx~=spotlight-follow] {\n    background-image:\n      radial-gradient(\n        circle,\n        color-mix(in srgb, var(--kui-ambient-c1, var(--kui-c1, #fde68a)) 65%, transparent),\n        transparent 65%);\n    background-size: 55% 55%;\n    background-repeat: no-repeat;\n    --kui-fx-spotlight-follow-iterations: infinite;\n  }\n  @keyframes kui-spotlight-follow {\n    0%, 100% {\n      background-position: 10% 15%;\n    }\n    25% {\n      background-position: 85% 20%;\n    }\n    50% {\n      background-position: 80% 80%;\n    }\n    75% {\n      background-position: 15% 75%;\n    }\n  }\n  [data-kui-fx~=gradient-rotate-border] {\n    position: relative;\n    background-image:\n      linear-gradient(\n        90deg,\n        var(--kui-ambient-c1, var(--kui-c1, #f472b6)),\n        var(--kui-ambient-c2, var(--kui-c2, #60a5fa)),\n        var(--kui-ambient-c3, var(--kui-c3, #34d399)),\n        var(--kui-ambient-c4, var(--kui-c4, #fbbf24)),\n        var(--kui-ambient-c1, var(--kui-c1, #f472b6)));\n    background-size: 300% 100%;\n    padding: 3px;\n    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);\n    mask-composite: exclude;\n    -webkit-mask-composite: xor;\n    --kui-fx-gradient-rotate-border-iterations: infinite;\n  }\n  @keyframes kui-gradient-rotate-border {\n    from {\n      background-position: 0% 50%;\n    }\n    to {\n      background-position: 300% 50%;\n    }\n  }\n  [data-kui-fx~=gradient-border] {\n    position: relative;\n    background-image:\n      linear-gradient(\n        90deg,\n        var(--kui-ambient-c1, var(--kui-c1, #7c3aed)),\n        var(--kui-ambient-c2, var(--kui-c2, #fbbf24)),\n        var(--kui-ambient-c1, var(--kui-c1, #7c3aed)));\n    background-size: 300% 100%;\n    padding: var(--kui-gradient-border-width, 3px);\n    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);\n    mask-composite: exclude;\n    -webkit-mask-composite: xor;\n    --kui-fx-gradient-border-iterations: infinite;\n  }\n  @keyframes kui-gradient-border {\n    from {\n      background-position: 0% 50%;\n    }\n    to {\n      background-position: 300% 50%;\n    }\n  }\n  [data-kui-fx~=noise-overlay] {\n    background-image:\n      repeating-radial-gradient(\n        circle at 0 0,\n        color-mix(in srgb, var(--kui-ambient-c1, var(--kui-c1, currentColor)) 30%, transparent) 0,\n        transparent 1.4px,\n        transparent 3px);\n    background-size: 5px 5px;\n    --kui-fx-noise-overlay-iterations: infinite;\n  }\n  @keyframes kui-noise-overlay {\n    0% {\n      background-position: 0 0;\n    }\n    20% {\n      background-position: -3px 1px;\n    }\n    40% {\n      background-position: 2px -2px;\n    }\n    60% {\n      background-position: -1px 3px;\n    }\n    80% {\n      background-position: 3px 2px;\n    }\n    100% {\n      background-position: 0 0;\n    }\n  }\n  [data-kui-fx~=scanline] {\n    background-image:\n      linear-gradient(\n        to bottom,\n        transparent,\n        color-mix(in srgb, var(--kui-ambient-c1, var(--kui-c1, currentColor)) 35%, transparent) 50%,\n        transparent);\n    background-size: 100% 220%;\n    background-repeat: no-repeat;\n    --kui-fx-scanline-iterations: infinite;\n  }\n  @keyframes kui-scanline {\n    from {\n      background-position: 0 -120%;\n    }\n    to {\n      background-position: 0 120%;\n    }\n  }\n  [data-kui-fx~=dot-grid-drift] {\n    background-image:\n      radial-gradient(\n        circle,\n        color-mix(in srgb, var(--kui-ambient-c1, var(--kui-c1, currentColor)) 45%, transparent) 1.5px,\n        transparent 1.5px);\n    background-size: 22px 22px;\n    --kui-fx-dot-grid-drift-iterations: infinite;\n  }\n  @keyframes kui-dot-grid-drift {\n    from {\n      background-position: 0 0;\n    }\n    to {\n      background-position: 22px 22px;\n    }\n  }\n  [data-kui-fx~=line-grid-drift] {\n    background-image:\n      repeating-linear-gradient(\n        0deg,\n        color-mix(in srgb, var(--kui-ambient-c1, var(--kui-c1, currentColor)) 30%, transparent) 0 1px,\n        transparent 1px 26px),\n      repeating-linear-gradient(\n        90deg,\n        color-mix(in srgb, var(--kui-ambient-c1, var(--kui-c1, currentColor)) 30%, transparent) 0 1px,\n        transparent 1px 26px);\n    --kui-fx-line-grid-drift-iterations: infinite;\n  }\n  @keyframes kui-line-grid-drift {\n    from {\n      background-position: 0 0, 0 0;\n    }\n    to {\n      background-position: 0 26px, 26px 0;\n    }\n  }\n  [data-kui-fx~=starfield] {\n    background-image:\n      radial-gradient(\n        1px 1px at 10% 20%,\n        color-mix(in srgb, var(--kui-ambient-c1, var(--kui-c1, #ffffff)) 90%, transparent),\n        transparent),\n      radial-gradient(\n        1px 1px at 70% 60%,\n        color-mix(in srgb, var(--kui-ambient-c1, var(--kui-c1, #ffffff)) 70%, transparent),\n        transparent),\n      radial-gradient(\n        1.5px 1.5px at 40% 80%,\n        color-mix(in srgb, var(--kui-ambient-c1, var(--kui-c1, #ffffff)) 85%, transparent),\n        transparent),\n      radial-gradient(\n        1px 1px at 90% 30%,\n        color-mix(in srgb, var(--kui-ambient-c1, var(--kui-c1, #ffffff)) 60%, transparent),\n        transparent),\n      radial-gradient(\n        1.5px 1.5px at 25% 55%,\n        color-mix(in srgb, var(--kui-ambient-c1, var(--kui-c1, #ffffff)) 80%, transparent),\n        transparent);\n    background-size: 220px 220px;\n    background-repeat: repeat;\n    --kui-fx-starfield-iterations: infinite;\n  }\n  @keyframes kui-starfield {\n    from {\n      background-position:\n        0 0,\n        0 0,\n        0 0,\n        0 0,\n        0 0;\n    }\n    to {\n      background-position:\n        220px 90px,\n        -160px 220px,\n        90px -140px,\n        -220px -90px,\n        140px 160px;\n    }\n  }\n  [data-kui-fx~=orbit] {\n    --kui-fx-orbit-iterations: infinite;\n  }\n  @keyframes kui-orbit {\n    to {\n      rotate: var(--kui-to-angle, 360deg);\n    }\n  }\n  [data-kui-fx~=float] {\n    --kui-fx-float-iterations: infinite;\n  }\n  @keyframes kui-float {\n    0%, 100% {\n      translate: 0 0;\n    }\n    50% {\n      translate: 0 calc(var(--kui-distance, 14px) * -1);\n    }\n  }\n  [data-kui-fx~=bob] {\n    --kui-fx-bob-iterations: infinite;\n  }\n  @keyframes kui-bob {\n    0%, 100% {\n      translate: 0 0;\n    }\n    50% {\n      translate: 0 calc(var(--kui-distance, 8px) * -1);\n    }\n  }\n  [data-kui-fx~=floating-shapes] {\n    --kui-fx-floating-shapes-iterations: infinite;\n  }\n  @keyframes kui-floating-shapes {\n    0%, 100% {\n      translate: 0 0;\n    }\n    33% {\n      translate: calc(var(--kui-distance, 10px) * 0.6) calc(var(--kui-distance, 10px) * -1);\n    }\n    66% {\n      translate: calc(var(--kui-distance, 10px) * -0.6) calc(var(--kui-distance, 10px) * -0.4);\n    }\n  }\n  [data-kui-fx~=glow-pulse] {\n    --kui-fx-glow-pulse-iterations: infinite;\n  }\n  @keyframes kui-glow-pulse {\n    0%, 100% {\n      scale: 1;\n      opacity: 0.6;\n    }\n    50% {\n      scale: var(--kui-pulse-scale, 1.15);\n      opacity: 1;\n    }\n  }\n}\n\n/* src/css/feedback.css */\n@layer kui.effects {\n  [data-kui-fx~=skeleton-shimmer] {\n    background-color: var(--kui-skeleton-base, #2a2422);\n    background-image:\n      linear-gradient(\n        100deg,\n        transparent 30%,\n        color-mix(in srgb, var(--kui-skeleton-highlight, #ffffff) 18%, transparent) 50%,\n        transparent 70%);\n    background-size: 200% 100%;\n    --kui-fx-skeleton-shimmer-iterations: infinite;\n  }\n  @keyframes kui-skeleton-shimmer {\n    from {\n      background-position: 150% 0;\n    }\n    to {\n      background-position: -50% 0;\n    }\n  }\n  @keyframes kui-skeleton-to-content {\n    from {\n      opacity: 0;\n    }\n  }\n  [data-kui-fx~=spinner] {\n    display: inline-block;\n    width: var(--kui-spinner-size, 28px);\n    height: var(--kui-spinner-size, 28px);\n    border-radius: 50%;\n    border: 3px solid color-mix(in srgb, currentColor 20%, transparent);\n    border-top-color: currentColor;\n    --kui-fx-spinner-iterations: infinite;\n  }\n  @keyframes kui-spinner-spin {\n    to {\n      rotate: 360deg;\n    }\n  }\n  [data-kui-fx~=spinner-ring] {\n    display: inline-block;\n    width: var(--kui-spinner-size, 28px);\n    height: var(--kui-spinner-size, 28px);\n    border-radius: 50%;\n    border: 3px dashed color-mix(in srgb, currentColor 55%, transparent);\n    --kui-fx-spinner-ring-iterations: infinite;\n  }\n  @keyframes kui-spinner-ring-spin {\n    to {\n      rotate: 360deg;\n    }\n  }\n  [data-kui-fx~=spinner-dots] {\n    display: inline-block;\n    width: var(--kui-dot-size, 8px);\n    height: var(--kui-dot-size, 8px);\n    border-radius: 50%;\n    background: currentColor;\n    box-shadow: calc(var(--kui-dot-size, 8px) * -2) 0 currentColor, calc(var(--kui-dot-size, 8px) * 2) 0 currentColor;\n    --kui-fx-spinner-dots-iterations: infinite;\n  }\n  @keyframes kui-spinner-dots {\n    0%, 80%, 100% {\n      scale: 0.7;\n      opacity: 0.5;\n    }\n    40% {\n      scale: 1.15;\n      opacity: 1;\n    }\n  }\n  [data-kui-fx~=progress-indeterminate] {\n    transform-origin: 0% 50%;\n    background: currentColor;\n    border-radius: inherit;\n    --kui-fx-progress-indeterminate-iterations: infinite;\n  }\n  @keyframes kui-progress-indeterminate {\n    0% {\n      translate: -100% 0;\n      scale: 0.4 1;\n    }\n    50% {\n      scale: 1 1;\n    }\n    100% {\n      translate: 100% 0;\n      scale: 0.4 1;\n    }\n  }\n  @keyframes kui-toast-slide-in {\n    from {\n      opacity: 0;\n      translate: 0 var(--kui-distance, 24px);\n    }\n    to {\n      opacity: 1;\n      translate: 0 0;\n    }\n  }\n  @keyframes kui-toast-slide-out {\n    from {\n      opacity: 1;\n      translate: 0 0;\n    }\n    to {\n      opacity: 0;\n      translate: 0 var(--kui-distance, 24px);\n    }\n  }\n  @keyframes kui-shake-error {\n    10%, 90% {\n      translate: -1px 0;\n    }\n    20%, 80% {\n      translate: 2px 0;\n    }\n    30%, 50%, 70% {\n      translate: -4px 0;\n    }\n    40%, 60% {\n      translate: 4px 0;\n    }\n  }\n  @keyframes kui-wobble {\n    0% {\n      translate: 0 0;\n      rotate: 0deg;\n    }\n    15% {\n      translate: -6px 0;\n      rotate: -6deg;\n    }\n    30% {\n      translate: 4px 0;\n      rotate: 4deg;\n    }\n    45% {\n      translate: -3px 0;\n      rotate: -3deg;\n    }\n    60% {\n      translate: 2px 0;\n      rotate: 2deg;\n    }\n    75% {\n      translate: -1px 0;\n      rotate: -1deg;\n    }\n    100% {\n      translate: 0 0;\n      rotate: 0deg;\n    }\n  }\n  [data-kui-fx~=ripple] {\n    border-radius: 50%;\n    background: currentColor;\n    transform-origin: center;\n  }\n  @keyframes kui-ripple {\n    from {\n      scale: 0.2;\n      opacity: 0.6;\n    }\n    to {\n      scale: var(--kui-ripple-scale, 4);\n      opacity: 0;\n    }\n  }\n  @keyframes kui-badge-pop {\n    0% {\n      scale: 0.4;\n    }\n    60% {\n      scale: var(--kui-pop-scale, 1.18);\n    }\n    100% {\n      scale: 1;\n    }\n  }\n  @keyframes kui-count-bump {\n    0%, 100% {\n      scale: 1;\n    }\n    50% {\n      scale: var(--kui-pop-scale, 1.18);\n    }\n  }\n  [data-kui-fx~=heart-burst] {\n    color: var(--kui-heart-color, #f43f5e);\n  }\n  @keyframes kui-heart-burst {\n    0% {\n      scale: 1;\n    }\n    30% {\n      scale: var(--kui-pop-scale, 1.18);\n    }\n    55% {\n      scale: 0.9;\n    }\n    100% {\n      scale: 1;\n    }\n  }\n  [data-kui-fx~=confetti-burst] {\n    background-image:\n      radial-gradient(\n        circle at 20% 20%,\n        var(--kui-c1, #f43f5e) 0 3px,\n        transparent 3px),\n      radial-gradient(\n        circle at 75% 15%,\n        var(--kui-c2, #fbbf24) 0 3px,\n        transparent 3px),\n      radial-gradient(\n        circle at 50% 75%,\n        var(--kui-c3, #34d399) 0 3px,\n        transparent 3px),\n      radial-gradient(\n        circle at 85% 65%,\n        var(--kui-c4, #60a5fa) 0 3px,\n        transparent 3px),\n      radial-gradient(\n        circle at 15% 65%,\n        var(--kui-c5, #c084fc) 0 3px,\n        transparent 3px);\n    background-repeat: no-repeat;\n  }\n  @keyframes kui-confetti-burst {\n    0% {\n      scale: 0.6;\n      opacity: 0;\n    }\n    40% {\n      scale: var(--kui-pop-scale, 1.18);\n      opacity: 1;\n    }\n    100% {\n      scale: 1;\n      opacity: 1;\n    }\n  }\n  @keyframes kui-copy-confirm {\n    0% {\n      opacity: 0;\n    }\n    15% {\n      opacity: 1;\n    }\n    85% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n    }\n  }\n  @keyframes kui-pull-to-refresh {\n    0% {\n      translate: 0 0;\n    }\n    45% {\n      translate: 0 var(--kui-pull-distance, 36px);\n    }\n    100% {\n      translate: 0 0;\n    }\n  }\n}\n\n/* src/css/numbers.css */\n@layer kui.effects {\n  @keyframes kui-progress-ring {\n    from {\n      stroke-dashoffset: var(--kui-path-length, 100);\n    }\n    to {\n      stroke-dashoffset: 0;\n    }\n  }\n  @keyframes kui-gauge-sweep {\n    from {\n      stroke-dashoffset: var(--kui-path-length, 100);\n    }\n    to {\n      stroke-dashoffset: 0;\n    }\n  }\n  @keyframes kui-donut-sweep {\n    from {\n      stroke-dashoffset: var(--kui-path-length, 100);\n    }\n    to {\n      stroke-dashoffset: 0;\n    }\n  }\n  @keyframes kui-sparkline-draw {\n    from {\n      stroke-dashoffset: var(--kui-path-length, 1000);\n    }\n    to {\n      stroke-dashoffset: 0;\n    }\n  }\n  [data-kui-fx~=progress-ring],\n  [data-kui-fx~=gauge-sweep],\n  [data-kui-fx~=donut-sweep],\n  [data-kui-fx~=sparkline-draw] {\n    stroke-dasharray: var(--kui-path-length, 100);\n    fill: none;\n  }\n  @keyframes kui-progress-bar {\n    from {\n      scale: var(--kui-bar-from, 0) 1;\n    }\n    to {\n      scale: 1 1;\n    }\n  }\n  [data-kui-fx~=progress-bar] {\n    transform-origin: left center;\n  }\n  [data-kui-fx~=progress-bar][data-kui-state=ready] {\n    --kui-bar-from: 1 !important;\n    opacity: 0;\n  }\n  @keyframes kui-progress-segments {\n    from {\n      opacity: 0.18;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n  @keyframes kui-star-rating-fill {\n    from {\n      clip-path: inset(0 100% 0 0);\n    }\n    to {\n      clip-path: inset(0 calc(100% - var(--kui-fill, 100%)) 0 0);\n    }\n  }\n  .kui-count-decorative {\n    display: inline-flex;\n    align-items: baseline;\n  }\n  .kui-odometer-col {\n    display: inline-block;\n    overflow: hidden;\n    height: 1em;\n    line-height: 1;\n    vertical-align: baseline;\n  }\n  .kui-odometer-strip {\n    display: flex;\n    flex-direction: column;\n    translate: 0 calc(var(--kui-o, 0) * -1em);\n    transition: translate 220ms ease-out;\n  }\n  .kui-odometer-strip > span {\n    height: 1em;\n    line-height: 1;\n  }\n}\n\n/* src/css/interaction.css */\n@layer kui.effects {\n  @property --kui-border-angle { syntax: \"<angle>\"; inherits: false; initial-value: 0deg; }\n  @property --kui-border-pct { syntax: \"<percentage>\"; inherits: false; initial-value: 0%; }\n  [data-kui-fx~=lift] {\n    transition: translate var(--kui-lift-duration, 220ms) var(--kui-lift-ease, ease-out);\n  }\n  [data-kui-fx~=lift]:focus-visible {\n    translate: 0 calc(var(--kui-lift-distance, 6px) * -1);\n  }\n  [data-kui-fx~=pop] {\n    transition: scale var(--kui-pop-duration, 220ms) var(--kui-pop-ease, ease-out);\n  }\n  [data-kui-fx~=pop]:focus-visible {\n    scale: var(--kui-pop-scale, 1.06);\n  }\n  [data-kui-fx~=lift-shadow] {\n    transition: translate var(--kui-lift-shadow-duration, 220ms) var(--kui-lift-shadow-ease, ease-out), box-shadow var(--kui-lift-shadow-duration, 220ms) var(--kui-lift-shadow-ease, ease-out);\n  }\n  [data-kui-fx~=lift-shadow]:focus-visible {\n    translate: 0 calc(var(--kui-lift-distance, 6px) * -1);\n    box-shadow: 0 14px 28px -12px rgb(0 0 0 / 0.45);\n  }\n  [data-kui-fx~=shine-sweep] {\n    position: relative;\n    overflow: hidden;\n  }\n  [data-kui-fx~=shine-sweep]::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    background:\n      linear-gradient(\n        115deg,\n        transparent 40%,\n        var(--kui-c1, rgb(255 255 255 / 0.35)) 50%,\n        transparent 60%);\n    background-size: 220% 100%;\n    background-position: 120% 0;\n    pointer-events: none;\n  }\n  [data-kui-fx~=shine-sweep]:focus-visible::after {\n    animation: kui-shine-sweep var(--kui-shine-sweep-duration, 700ms) var(--kui-shine-sweep-ease, ease-out);\n  }\n  @keyframes kui-shine-sweep {\n    from {\n      background-position: 120% 0;\n    }\n    to {\n      background-position: -20% 0;\n    }\n  }\n  [data-kui-fx~=split-flap] {\n    display: inline-block;\n    perspective: 600px;\n    backface-visibility: hidden;\n  }\n  [data-kui-fx~=split-flap]:focus-visible {\n    animation: kui-split-flap var(--kui-split-flap-duration, 600ms) var(--kui-split-flap-ease, ease-in-out);\n  }\n  @keyframes kui-split-flap {\n    from {\n      rotate: x 0deg;\n    }\n    to {\n      rotate: x 360deg;\n    }\n  }\n  [data-kui-fx~=border-draw] {\n    border: 2px solid transparent;\n    border-image-slice: 1;\n    border-image-source:\n      conic-gradient(\n        from -90deg,\n        var(--kui-border-draw-color, var(--accent, #d2691e)) 0 var(--kui-border-pct, 0%),\n        transparent 0);\n    transition: --kui-border-pct var(--kui-border-draw-duration, 500ms) var(--kui-border-draw-ease, ease-out);\n  }\n  [data-kui-fx~=border-draw]:focus-visible {\n    --kui-border-pct: 100%;\n  }\n  [data-kui-fx~=border-glow] {\n    transition: box-shadow var(--kui-border-glow-duration, 260ms) var(--kui-border-glow-ease, ease-out);\n  }\n  [data-kui-fx~=border-glow]:focus-visible {\n    box-shadow: 0 0 0 3px var(--kui-border-glow-color, var(--accent, #d2691e));\n  }\n  [data-kui-fx~=beam-border],\n  [data-kui-fx~=beam-border-auto] {\n    position: relative;\n  }\n  [data-kui-fx~=beam-border]::before,\n  [data-kui-fx~=beam-border-auto]::before {\n    content: \"\";\n    position: absolute;\n    inset: calc(-1 * var(--kui-beam-border-outset, 0px));\n    border-radius: inherit;\n    padding: var(--kui-beam-border-width, 3px);\n    background:\n      conic-gradient(\n        from var(--kui-border-angle, 0deg),\n        transparent 0deg,\n        transparent 260deg,\n        var(--kui-beam-border-c1, #ff5f6d) 282deg,\n        var(--kui-beam-border-c2, var(--kui-beam-border-c1, #ffc371)) 306deg,\n        var(--kui-beam-border-c3, var(--kui-beam-border-c1, #4facfe)) 330deg,\n        var(--kui-beam-border-c4, var(--kui-beam-border-c1, #a855f7)) 354deg,\n        transparent 360deg);\n    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n    -webkit-mask-composite: xor;\n    mask-composite: exclude;\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity var(--kui-beam-border-fade-duration, 200ms) ease-out;\n  }\n  [data-kui-fx~=beam-border]:focus-visible::before {\n    opacity: 1;\n    animation: kui-beam-rotate var(--kui-beam-border-duration, 4260ms) linear infinite;\n  }\n  [data-kui-fx~=beam-border-auto]::before {\n    opacity: 1;\n    animation: kui-beam-rotate var(--kui-beam-border-auto-duration, 4260ms) linear infinite;\n  }\n  @keyframes kui-beam-rotate {\n    to {\n      --kui-border-angle: 360deg;\n    }\n  }\n  @media (prefers-reduced-motion: reduce) {\n    [data-kui-fx~=beam-border]:focus-visible::before,\n    [data-kui-fx~=beam-border-auto]::before {\n      animation: none;\n      --kui-border-angle: 45deg;\n    }\n  }\n  [data-kui-fx~=underline-slide] {\n    position: relative;\n    text-decoration: none;\n  }\n  [data-kui-fx~=underline-slide]::after {\n    content: \"\";\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: -0.15em;\n    height: 0.08em;\n    background: currentcolor;\n    scale: 0 1;\n    transform-origin: left center;\n    transition: scale var(--kui-underline-slide-duration, 260ms) var(--kui-underline-slide-ease, ease-out);\n  }\n  [data-kui-fx~=underline-slide]:focus-visible::after {\n    scale: 1 1;\n  }\n  [data-kui-fx~=underline-center] {\n    position: relative;\n    text-decoration: none;\n  }\n  [data-kui-fx~=underline-center]::after {\n    content: \"\";\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: -0.15em;\n    height: 0.08em;\n    background: currentcolor;\n    scale: 0 1;\n    transform-origin: center;\n    transition: scale var(--kui-underline-center-duration, 260ms) var(--kui-underline-center-ease, ease-out);\n  }\n  [data-kui-fx~=underline-center]:focus-visible::after {\n    scale: 1 1;\n  }\n  [data-kui-fx~=icon-wiggle]:focus-visible {\n    animation: kui-icon-wiggle var(--kui-icon-wiggle-duration, 500ms) var(--kui-icon-wiggle-ease, ease-in-out);\n  }\n  @keyframes kui-icon-wiggle {\n    0%, 100% {\n      rotate: 0deg;\n    }\n    20% {\n      rotate: -12deg;\n    }\n    40% {\n      rotate: 10deg;\n    }\n    60% {\n      rotate: -6deg;\n    }\n    80% {\n      rotate: 4deg;\n    }\n  }\n  [data-kui-fx~=icon-spin]:focus-visible {\n    animation: kui-icon-spin var(--kui-icon-spin-duration, 700ms) linear;\n  }\n  @keyframes kui-icon-spin {\n    from {\n      rotate: 0deg;\n    }\n    to {\n      rotate: 360deg;\n    }\n  }\n  [data-kui-fx~=icon-bounce]:focus-visible {\n    animation: kui-icon-bounce var(--kui-icon-bounce-duration, 500ms) var(--kui-icon-bounce-ease, ease-out);\n  }\n  @keyframes kui-icon-bounce {\n    0%, 100% {\n      translate: 0 0;\n    }\n    30% {\n      translate: 0 -7px;\n    }\n    55% {\n      translate: 0 1px;\n    }\n    75% {\n      translate: 0 -3px;\n    }\n  }\n  @media (hover: hover) and (pointer: fine) {\n    [data-kui-fx~=lift]:hover {\n      translate: 0 calc(var(--kui-lift-distance, 6px) * -1);\n    }\n    [data-kui-fx~=pop]:hover {\n      scale: var(--kui-pop-scale, 1.06);\n    }\n    [data-kui-fx~=lift-shadow]:hover {\n      translate: 0 calc(var(--kui-lift-distance, 6px) * -1);\n      box-shadow: 0 14px 28px -12px rgb(0 0 0 / 0.45);\n    }\n    [data-kui-fx~=shine-sweep]:hover::after {\n      animation: kui-shine-sweep var(--kui-shine-sweep-duration, 700ms) var(--kui-shine-sweep-ease, ease-out);\n    }\n    [data-kui-fx~=split-flap]:hover {\n      animation: kui-split-flap var(--kui-split-flap-duration, 600ms) var(--kui-split-flap-ease, ease-in-out);\n    }\n    [data-kui-fx~=border-draw]:hover {\n      --kui-border-pct: 100%;\n    }\n    [data-kui-fx~=border-glow]:hover {\n      box-shadow: 0 0 0 3px var(--kui-border-glow-color, var(--accent, #d2691e));\n    }\n    [data-kui-fx~=beam-border]:hover::before {\n      opacity: 1;\n      animation: kui-beam-rotate var(--kui-beam-border-duration, 4260ms) linear infinite;\n    }\n    [data-kui-fx~=underline-slide]:hover::after {\n      scale: 1 1;\n    }\n    [data-kui-fx~=underline-center]:hover::after {\n      scale: 1 1;\n    }\n    [data-kui-fx~=icon-wiggle]:hover {\n      animation: kui-icon-wiggle var(--kui-icon-wiggle-duration, 500ms) var(--kui-icon-wiggle-ease, ease-in-out);\n    }\n    [data-kui-fx~=icon-spin]:hover {\n      animation: kui-icon-spin var(--kui-icon-spin-duration, 700ms) linear;\n    }\n    [data-kui-fx~=icon-bounce]:hover {\n      animation: kui-icon-bounce var(--kui-icon-bounce-duration, 500ms) var(--kui-icon-bounce-ease, ease-out);\n    }\n  }\n  [data-kui-fx~=tilt-3d],\n  [data-kui-fx~=tilt-parallax] {\n    transform-style: preserve-3d;\n  }\n  [data-kui-fx~=cursor-spotlight]::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    pointer-events: none;\n    opacity: var(--kui-spotlight-opacity, 0);\n    transition: opacity 200ms ease-out;\n    background:\n      radial-gradient(\n        circle 160px at var(--kui-x, 50%) var(--kui-y, 50%),\n        color-mix(in srgb, var(--accent, #d2691e) 30%, transparent),\n        transparent 70%);\n  }\n  .kui-cursor-dot {\n    position: fixed;\n    top: 0;\n    left: 0;\n    z-index: 9999;\n    display: grid;\n    place-items: center;\n    pointer-events: none;\n    opacity: 0;\n    transition: opacity 160ms ease-out;\n  }\n  .kui-cursor-dot-active {\n    opacity: 1;\n  }\n  .kui-cursor-dot-follow,\n  .kui-cursor-dot-lag,\n  .kui-cursor-dot-invert {\n    width: 14px;\n    height: 14px;\n    margin: -7px 0 0 -7px;\n    border-radius: 50%;\n    background: var(--accent, #d2691e);\n  }\n  .kui-cursor-dot-invert {\n    background: var(--kui-invert-color, #fff);\n    mix-blend-mode: difference;\n  }\n  .kui-cursor-dot-label {\n    margin: -1.4em 0 0 -1.4em;\n    padding: 0.4em 0.8em;\n    border-radius: 999px;\n    background: var(--accent, #d2691e);\n    color: var(--kui-label-color, #fff);\n    font-size: 0.75rem;\n    font-family:\n      ui-monospace,\n      Menlo,\n      monospace;\n    white-space: nowrap;\n  }\n  @media (pointer: coarse) {\n    .kui-cursor-dot {\n      display: none;\n    }\n  }\n}\n\n/* src/css/layout.css */\n@layer kui.effects {\n  [data-kui-fx~=accordion-height] {\n    overflow: hidden;\n  }\n  [data-kui-fx~=accordion-height]:not([data-open]) {\n    height: 0;\n  }\n}\n\n/* src/css/svg.css */\n@layer kui.effects {\n  @keyframes kui-draw-stroke {\n    from {\n      stroke-dashoffset: var(--kui-path-length, 100);\n    }\n    to {\n      stroke-dashoffset: 0;\n    }\n  }\n  @keyframes kui-draw-signature {\n    from {\n      stroke-dashoffset: var(--kui-path-length, 100);\n    }\n    to {\n      stroke-dashoffset: 0;\n    }\n  }\n  @keyframes kui-draw-underline {\n    from {\n      stroke-dashoffset: var(--kui-path-length, 100);\n    }\n    to {\n      stroke-dashoffset: 0;\n    }\n  }\n  @keyframes kui-checkmark-draw {\n    from {\n      stroke-dashoffset: var(--kui-path-length, 100);\n    }\n    to {\n      stroke-dashoffset: 0;\n    }\n  }\n  @keyframes kui-cross-draw {\n    from {\n      stroke-dashoffset: var(--kui-path-length, 100);\n    }\n    to {\n      stroke-dashoffset: 0;\n    }\n  }\n  @keyframes kui-chart-line-draw {\n    from {\n      stroke-dashoffset: var(--kui-path-length, 100);\n    }\n    to {\n      stroke-dashoffset: 0;\n    }\n  }\n  [data-kui-fx~=draw-stroke],\n  [data-kui-fx~=draw-signature],\n  [data-kui-fx~=draw-underline],\n  [data-kui-fx~=checkmark-draw],\n  [data-kui-fx~=cross-draw],\n  [data-kui-fx~=chart-line-draw] {\n    stroke-dasharray: var(--kui-path-length, 100);\n    fill: none;\n  }\n  @keyframes kui-gradient-stroke {\n    from {\n      stroke: var(--kui-stroke-from, currentColor);\n    }\n    50% {\n      stroke: var(--kui-stroke-via, currentColor);\n    }\n    to {\n      stroke: var(--kui-stroke-to, currentColor);\n    }\n  }\n  [data-kui-fx~=gradient-stroke] {\n    --kui-fx-gradient-stroke-iterations: infinite;\n  }\n  @keyframes kui-heart-fill {\n    from {\n      clip-path: inset(100% 0 0 0);\n    }\n    to {\n      clip-path: inset(0 0 0 0);\n    }\n  }\n  @keyframes kui-bookmark-fill {\n    from {\n      clip-path: inset(100% 0 0 0);\n    }\n    to {\n      clip-path: inset(0 0 0 0);\n    }\n  }\n  @keyframes kui-chart-area-fill {\n    from {\n      clip-path: inset(0 100% 0 0);\n    }\n    to {\n      clip-path: inset(0 0 0 0);\n    }\n  }\n  @keyframes kui-chart-bar-grow {\n    from {\n      scale: 1 var(--kui-bar-from, 0);\n    }\n    to {\n      scale: 1 1;\n    }\n  }\n  [data-kui-fx~=chart-bar-grow] {\n    transform-origin: bottom center;\n  }\n  [data-kui-fx~=chart-bar-grow][data-kui-state=ready] {\n    --kui-bar-from: 1 !important;\n    opacity: 0;\n  }\n  @keyframes kui-logo-build {\n    from {\n      opacity: 0;\n      scale: 0.62;\n      rotate: -8deg;\n    }\n    to {\n      opacity: 1;\n      scale: 1;\n      rotate: 0deg;\n    }\n  }\n  [data-kui-fx~=hamburger-to-x] .kui-bar {\n    transition:\n      translate var(--kui-icon-toggle-duration, 260ms) var(--kui-icon-toggle-ease, ease-out),\n      rotate var(--kui-icon-toggle-duration, 260ms) var(--kui-icon-toggle-ease, ease-out),\n      opacity var(--kui-icon-toggle-duration, 260ms) var(--kui-icon-toggle-ease, ease-out);\n  }\n  [data-kui-fx~=hamburger-to-x][aria-expanded=true] .kui-bar:nth-child(1) {\n    translate: 0 var(--kui-bar-gap, 6px);\n    rotate: 45deg;\n  }\n  [data-kui-fx~=hamburger-to-x][aria-expanded=true] .kui-bar:nth-child(2) {\n    opacity: 0;\n  }\n  [data-kui-fx~=hamburger-to-x][aria-expanded=true] .kui-bar:nth-child(3) {\n    translate: 0 calc(var(--kui-bar-gap, 6px) * -1);\n    rotate: -45deg;\n  }\n  [data-kui-fx~=play-to-pause] .kui-bar {\n    transition: translate var(--kui-icon-toggle-duration, 260ms) var(--kui-icon-toggle-ease, ease-out), clip-path var(--kui-icon-toggle-duration, 260ms) var(--kui-icon-toggle-ease, ease-out);\n  }\n  [data-kui-fx~=play-to-pause]:not([aria-pressed=true]) .kui-bar:nth-child(1) {\n    translate: var(--kui-bar-gap, 4px) 0;\n    clip-path: polygon(0 0, 100% 25%, 100% 75%, 0 100%);\n  }\n  [data-kui-fx~=play-to-pause]:not([aria-pressed=true]) .kui-bar:nth-child(2) {\n    translate: calc(var(--kui-bar-gap, 4px) * -1) 0;\n    clip-path: polygon(0 25%, 100% 50%, 100% 50%, 0 75%);\n  }\n  [data-kui-fx~=plus-to-minus] {\n    transition: rotate var(--kui-icon-toggle-duration, 260ms) var(--kui-icon-toggle-ease, ease-out);\n  }\n  [data-kui-fx~=plus-to-minus] .kui-bar {\n    transition: scale var(--kui-icon-toggle-duration, 260ms) var(--kui-icon-toggle-ease, ease-out);\n  }\n  [data-kui-fx~=plus-to-minus] .kui-bar:nth-child(2) {\n    rotate: 90deg;\n  }\n  [data-kui-fx~=plus-to-minus][aria-expanded=true] {\n    rotate: 90deg;\n  }\n  [data-kui-fx~=plus-to-minus][aria-expanded=true] .kui-bar:nth-child(1) {\n    scale: 0;\n  }\n}\n\n/* src/css/index.css */\n"
     document.head.appendChild(style)
   }
   window.__kuinetic = kuinetic.kuinetic({ observe: true }).start()