kuinetic 0.1.1 → 0.1.2

package/dist/kuinetic.all.js

@@ -1536,7 +1536,7 @@ var kuinetic = (() => {
       "animation-timeline": config.timeline === "scroll" ? "scroll()" : "view()"
     };
     if (capabilities.animationRange) {
-      properties["animation-range"] = config.range || "entry 0% cover 60%";
+      properties["animation-range"] = config.range || (config.timeline === "scroll" ? "0% 100%" : "entry 0% cover 60%");
     }
     return properties;
   }
@@ -2028,7 +2028,8 @@ var kuinetic = (() => {
   };
   var pulse = {
     duration: { type: "time", default: "2.2s", cssProperty: "--kui-duration" },
-    ease: { type: "easing", default: "ease-in-out", cssProperty: "--kui-ease" }
+    ease: { type: "easing", default: "ease-in-out", cssProperty: "--kui-ease" },
+    scale: { type: "number", default: "1.15", cssProperty: "--kui-pulse-scale", finite: true, minimum: 1 }
   };
   var AMBIENT_PRIMITIVES = [
     cssPrimitive("ambient-gradient", [CHANNEL.background], {
@@ -2131,7 +2132,8 @@ var kuinetic = (() => {
   };
   var dotPulse = {
     duration: { type: "time", default: "1.2s", cssProperty: "--kui-duration" },
-    ease: { type: "easing", default: "ease-in-out", cssProperty: "--kui-ease" }
+    ease: { type: "easing", default: "ease-in-out", cssProperty: "--kui-ease" },
+    dotSize: { type: "length", default: "8px", cssProperty: "--kui-dot-size" }
   };
   var progressTrack = {
     duration: { type: "time", default: "1.4s", cssProperty: "--kui-duration" },
@@ -2148,7 +2150,8 @@ var kuinetic = (() => {
   };
   var pop = {
     duration: { type: "time", default: "420ms", cssProperty: "--kui-duration" },
-    ease: { type: "easing", default: "back-out", cssProperty: "--kui-ease" }
+    ease: { type: "easing", default: "back-out", cssProperty: "--kui-ease" },
+    scale: { type: "number", default: "1.18", cssProperty: "--kui-pop-scale", finite: true, minimum: 1 }
   };
   var ripple = {
     duration: { type: "time", default: "600ms", cssProperty: "--kui-duration" },
@@ -2159,6 +2162,9 @@ var kuinetic = (() => {
     duration: { type: "time", default: "1400ms", cssProperty: "--kui-duration" },
     ease: { type: "easing", default: "linear", cssProperty: "--kui-ease" }
   };
+  var pull = {
+    distance: { type: "length", default: "36px", cssProperty: "--kui-pull-distance" }
+  };
   var FEEDBACK_PRIMITIVES = [
     cssPrimitive("feedback-shimmer", [CHANNEL.background], {
       parameters: loop,
@@ -2230,6 +2236,7 @@ var kuinetic = (() => {
       defaultActivation: "click"
     }),
     cssPrimitive("feedback-pull", [CHANNEL.translate], {
+      parameters: pull,
       defaultActivation: "manual"
     })
   ];
@@ -2260,18 +2267,23 @@ var kuinetic = (() => {
     },
     { name: "ripple", primitive: "feedback-ripple", keyframes: "kui-ripple" },
     { name: "badge-pop", primitive: "feedback-pop", keyframes: "kui-badge-pop" },
-    { name: "count-bump", primitive: "feedback-pop", keyframes: "kui-count-bump", params: { duration: "280ms" } },
+    {
+      name: "count-bump",
+      primitive: "feedback-pop",
+      keyframes: "kui-count-bump",
+      params: { duration: "280ms", scale: "1.3" }
+    },
     {
       name: "heart-burst",
       primitive: "feedback-burst",
       keyframes: "kui-heart-burst",
-      params: { duration: "700ms" }
+      params: { duration: "700ms", scale: "1.4" }
     },
     {
       name: "confetti-burst",
       primitive: "feedback-burst",
       keyframes: "kui-confetti-burst",
-      params: { duration: "900ms" }
+      params: { duration: "900ms", scale: "1.15" }
     },
     { name: "copy-confirm", primitive: "feedback-confirm", keyframes: "kui-copy-confirm" },
     {
@@ -2416,12 +2428,15 @@ var kuinetic = (() => {
     duration: { type: "time", default: "220ms", cssProperty: "--kui-duration" },
     ease: { type: "easing", default: "ease-out", cssProperty: "--kui-ease" }
   };
-  function hoverPrimitive(id, channels) {
+  var liftParams = {
+    distance: { type: "length", default: "6px", cssProperty: "--kui-lift-distance" }
+  };
+  function hoverPrimitive(id, channels, extraParams = {}) {
     return {
       id,
       renderer: "javascript",
       channels,
-      parameters: hoverTiming,
+      parameters: { ...hoverTiming, ...extraParams },
       supportedTimelines: ["time"],
       supportedActivations: ["load"],
       defaultActivation: "load",
@@ -2436,8 +2451,8 @@ var kuinetic = (() => {
     };
   }
   var HOVER_PRIMITIVES = [
-    hoverPrimitive("lift", ["translate"]),
-    hoverPrimitive("lift-shadow", ["translate", "shadow"]),
+    hoverPrimitive("lift", ["translate"], liftParams),
+    hoverPrimitive("lift-shadow", ["translate", "shadow"], liftParams),
     hoverPrimitive("shine-sweep", ["sweep"]),
     hoverPrimitive("split-flap", ["rotate"]),
     hoverPrimitive("border-draw", ["border"]),
@@ -2486,6 +2501,13 @@ var kuinetic = (() => {
       finite: true,
       minimum: 0.1,
       maximum: 1e3
+    },
+    mass: {
+      type: "number",
+      default: "1",
+      cssProperty: "--kui-mass",
+      finite: true,
+      minimum: 0.1
     }
   };
   function pointerPrimitive(id, channels, parameters, prepare) {
@@ -2509,7 +2531,8 @@ var kuinetic = (() => {
     return {
       ...DEFAULT_SPRING,
       stiffness: params.num("stiffness", DEFAULT_SPRING.stiffness),
-      damping: params.num("damping", DEFAULT_SPRING.damping)
+      damping: params.num("damping", DEFAULT_SPRING.damping),
+      mass: params.num("mass", DEFAULT_SPRING.mass)
     };
   }
   function springDepsFor(ctx) {
@@ -2766,7 +2789,7 @@ var kuinetic = (() => {
       perfClass: "paint"
     }),
     cssPrimitive("media-blur-up", [CHANNEL.translate, CHANNEL.filter], {
-      parameters: geometry,
+      parameters: { ...geometry, blur: { type: "length", default: "16px", cssProperty: "--kui-blur" } },
       perfClass: "paint"
     }),
     cssPrimitive("media-parallax-frame", [CHANNEL.translate], {
@@ -3329,11 +3352,18 @@ var kuinetic = (() => {
   };
   var fontSlantParams = {
     from: { type: "angle", default: "0deg", cssProperty: "--kui-from-slant" },
-    to: { type: "angle", default: "-10deg", cssProperty: "--kui-to-slant" }
+    to: { type: "angle", default: "10deg", cssProperty: "--kui-to-slant" }
+  };
+  var textSweepParams = {
+    color: { type: "color", default: "currentColor", cssProperty: "--kui-sweep-color" }
+  };
+  var extrudeParams = {
+    angle: { type: "angle", default: "-20deg", cssProperty: "--kui-from-angle" },
+    distance: { type: "length", default: "32px", cssProperty: "--kui-distance" }
   };
   var TEXT_CSS_PRIMITIVES = [
     cssPrimitive("text-shimmer", [CHANNEL.background], { reducedMotion: "disable" }),
-    cssPrimitive("text-sweep", [CHANNEL.background]),
+    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 }),
@@ -3343,12 +3373,17 @@ var kuinetic = (() => {
       reducedMotion: "disable"
     }),
     cssPrimitive("redaction-reveal", [CHANNEL.clip]),
-    cssPrimitive("text-3d-extrude", [CHANNEL.rotate, CHANNEL.translate])
+    cssPrimitive("text-3d-extrude", [CHANNEL.rotate, CHANNEL.translate], { parameters: extrudeParams })
   ];
   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: "highlight-sweep", primitive: "text-sweep", keyframes: "kui-highlight-sweep" },
+    {
+      name: "highlight-sweep",
+      primitive: "text-sweep",
+      keyframes: "kui-highlight-sweep",
+      params: { color: "gold" }
+    },
     { name: "underline-draw", primitive: "text-sweep", keyframes: "kui-underline-draw" },
     { name: "text-outline-fill", primitive: "text-outline-fill", keyframes: "kui-text-outline-fill" },
     { name: "var-weight", primitive: "var-weight", keyframes: "kui-var-weight" },
@@ -3822,6 +3857,29 @@ var kuinetic = (() => {
     reducedMotion: "disable",
     prepare: () => inertInstance()
   };
+  function prepareSiblingScale(cssProperty) {
+    return (el, params) => {
+      const sibling = el.nextElementSibling;
+      sibling?.style.setProperty(cssProperty, String(params.num("scale", 1)));
+      return () => sibling?.style.removeProperty(cssProperty);
+    };
+  }
+  function siblingScalePrimitive(id, cssProperty) {
+    return {
+      id,
+      renderer: "javascript",
+      channels: [CHANNEL.translate, CHANNEL.scale, CHANNEL.opacity, CHANNEL.stroke, CHANNEL.color],
+      parameters: { scale: { type: "number", default: "1", cssProperty } },
+      supportedTimelines: ["time"],
+      supportedActivations: ["load"],
+      defaultActivation: "load",
+      perfClass: "compositor",
+      reducedMotion: "disable",
+      prepare: deferPrepare(prepareSiblingScale(cssProperty))
+    };
+  }
+  var TOGGLE_MORPH_PRIMITIVE = siblingScalePrimitive("toggle-morph", "--kui-toggle-scale");
+  var RADIO_FILL_PRIMITIVE = siblingScalePrimitive("radio-fill", "--kui-radio-scale");
   var FOCUS_RING_PRIMITIVE = cssPrimitive("focus-ring", ["shadow"], {
     activations: ["focus", "manual"],
     defaultActivation: "focus"
@@ -3914,7 +3972,7 @@ var kuinetic = (() => {
   var STEP_PROGRESS_PRIMITIVE = jsInputPrimitive(
     "step-progress",
     ["state"],
-    { steps: { type: "number", default: "4", cssProperty: "--kui-steps", minimum: 1, integer: true } },
+    { steps: { type: "number", default: "4", cssProperty: "--kui-steps", minimum: 1, maximum: 20, integer: true } },
     deferPrepare(prepareStepProgress)
   );
   function nextSubmitStage(stage) {
@@ -3968,6 +4026,8 @@ var kuinetic = (() => {
     VALIDATE_SHAKE_PRIMITIVE,
     VALIDATE_CHECK_PRIMITIVE,
     STRENGTH_METER_PRIMITIVE,
+    TOGGLE_MORPH_PRIMITIVE,
+    RADIO_FILL_PRIMITIVE,
     RANGE_FILL_PRIMITIVE,
     STEP_PROGRESS_PRIMITIVE,
     SUBMIT_FLOW_PRIMITIVE
@@ -3979,9 +4039,9 @@ var kuinetic = (() => {
     { name: "validate-shake", primitive: "validate-shake", keyframes: "kui-validate-shake" },
     { name: "validate-check", primitive: "validate-check", keyframes: "kui-validate-check" },
     { name: "strength-meter", primitive: "strength-meter" },
-    { name: "toggle-morph", primitive: "native-state" },
+    { name: "toggle-morph", primitive: "toggle-morph" },
     { name: "checkbox-draw", primitive: "native-state" },
-    { name: "radio-fill", primitive: "native-state" },
+    { name: "radio-fill", primitive: "radio-fill" },
     { name: "range-fill", primitive: "range-fill" },
     { name: "submit-to-spinner-to-check", primitive: "submit-flow" },
     { name: "step-progress", primitive: "step-progress" }
@@ -4022,6 +4082,7 @@ var kuinetic = (() => {
     let origin = null;
     let active = false;
     let longPressTimer = null;
+    let longPressFired = false;
     function sampleOf(event) {
       return { x: event.clientX, y: event.clientY, time: deps.now() };
     }
@@ -4038,9 +4099,13 @@ var kuinetic = (() => {
       origin = sampleOf(event);
       samples = [origin];
       active = false;
+      longPressFired = false;
       el.setPointerCapture?.(event.pointerId);
       if (longPressMs > 0) {
-        longPressTimer = deps.setTimer(() => handlers.onLongPress?.(origin), longPressMs);
+        longPressTimer = deps.setTimer(() => {
+          longPressFired = true;
+          handlers.onLongPress?.(origin);
+        }, longPressMs);
       }
     }
     function onMove(event) {
@@ -4068,9 +4133,12 @@ var kuinetic = (() => {
         handlers.onEnd?.(vector, sample);
         const direction = swipeDirection(vector, swipeVelocity);
         if (direction) handlers.onSwipe?.(direction, vector);
+      } else if (longPressFired) {
+        handlers.onEnd?.(vector, sample);
       }
       origin = null;
       active = false;
+      longPressFired = false;
       samples = [];
     }
     el.addEventListener("pointerdown", onDown);
@@ -4116,6 +4184,13 @@ var kuinetic = (() => {
       finite: true,
       minimum: 0.1,
       maximum: 1e3
+    },
+    mass: {
+      type: "number",
+      default: "1",
+      cssProperty: "--kui-mass",
+      finite: true,
+      minimum: 0.1
     }
   };
   function gesturePrimitive(id, channels, parameters, prepare) {
@@ -4136,7 +4211,8 @@ var kuinetic = (() => {
     return {
       ...DEFAULT_SPRING,
       stiffness: params.num("stiffness", DEFAULT_SPRING.stiffness),
-      damping: params.num("damping", DEFAULT_SPRING.damping)
+      damping: params.num("damping", DEFAULT_SPRING.damping),
+      mass: params.num("mass", DEFAULT_SPRING.mass)
     };
   }
   function springDeps(ctx) {
@@ -4150,6 +4226,8 @@ var kuinetic = (() => {
     const bounds = params.num("bounds", 0);
     const returns = params.is("return");
     const inertia = params.is("inertia");
+    const resistance = params.num("resistance", 0.55);
+    const momentum = params.num("momentum", 0.2);
     const offset = { x: 0, y: 0 };
     const deps = springDeps(ctx);
     const runners = {
@@ -4170,11 +4248,11 @@ var kuinetic = (() => {
           el.setAttribute("data-kui-dragging", "true");
         },
         onMove(vector) {
-          write({ x: resist(vector.dx, bounds), y: resist(vector.dy, bounds) });
+          write({ x: resist(vector.dx, bounds, resistance), y: resist(vector.dy, bounds, resistance) });
         },
         onEnd(vector) {
           el.setAttribute("data-kui-dragging", "false");
-          settle(runners, offset, vector, { returns, inertia });
+          settle(runners, offset, vector, { returns, inertia, momentum });
         }
       },
       { axis: params.text("axis", "both") }
@@ -4187,8 +4265,8 @@ var kuinetic = (() => {
       el.removeAttribute("data-kui-dragging");
     };
   }
-  function resist(delta, bounds) {
-    return bounds > 0 ? rubberBand(delta, bounds) : delta;
+  function resist(delta, bounds, tension) {
+    return bounds > 0 ? rubberBand(delta, bounds, tension) : delta;
   }
   function settle(runners, offset, vector, mode) {
     runners.x.set(offset.x, mode.inertia ? vector.vx : 0);
@@ -4198,8 +4276,8 @@ var kuinetic = (() => {
       runners.y.to(0);
       return;
     }
-    runners.x.to(offset.x + vector.vx * 0.2);
-    runners.y.to(offset.y + vector.vy * 0.2);
+    runners.x.to(offset.x + vector.vx * mode.momentum);
+    runners.y.to(offset.y + vector.vy * mode.momentum);
   }
   function prepareSwipeable(el, params) {
     const stop = recognise(
@@ -4286,7 +4364,16 @@ var kuinetic = (() => {
           default: "false",
           cssProperty: "--kui-inertia",
           values: ["true", "false"]
-        }
+        },
+        resistance: {
+          type: "number",
+          default: "0.55",
+          cssProperty: "--kui-resistance",
+          finite: true,
+          minimum: 0,
+          maximum: 1
+        },
+        momentum: { type: "number", default: "0.2", cssProperty: "--kui-momentum", finite: true }
       },
       deferPrepare(prepareDraggable)
     ),
@@ -5284,7 +5371,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  }\n  [data-kui-fx~=count-bump] {\n    --kui-feedback-pop-duration: 280ms;\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  }\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(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, 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, gold 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(currentColor, 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  [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: #111;\n    clip-path: inset(0 0 0 0);\n  }\n  @keyframes kui-redaction-reveal {\n    to {\n      clip-path: inset(0 0 0 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: -6deg;\n      translate: 0 12px;\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    opacity: 1;\n    background: var(--kui-meter-on, #2e9e5b);\n  }\n  [data-kui-fx~=toggle-morph] ~ .kui-track {\n    display: inline-block;\n    width: 40px;\n    height: 22px;\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: 2px;\n    left: 2px;\n    width: 18px;\n    height: 18px;\n    border-radius: 50%;\n    background: #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: 18px 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: 10px;\n    height: 10px;\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    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: 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: 8px;\n    height: 8px;\n    border-radius: 50%;\n    background: currentColor;\n    box-shadow: -16px 0 currentColor, 16px 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: 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: 1.3;\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: 1.4;\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        #f43f5e 0 3px,\n        transparent 3px),\n      radial-gradient(\n        circle at 75% 15%,\n        #fbbf24 0 3px,\n        transparent 3px),\n      radial-gradient(\n        circle at 50% 75%,\n        #34d399 0 3px,\n        transparent 3px),\n      radial-gradient(\n        circle at 85% 65%,\n        #60a5fa 0 3px,\n        transparent 3px),\n      radial-gradient(\n        circle at 15% 65%,\n        #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: 1.15;\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 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 -6px;\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 -6px;\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        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 -6px;\n    }\n    [data-kui-fx~=lift-shadow]:hover {\n      translate: 0 -6px;\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: #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: #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;\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"
     document.head.appendChild(style)
   }
   window.__kuinetic = kuinetic.kuinetic({ observe: true }).start()