lively-mascot 0.2.0

package/dist/lively-mascot.min.css

@@ -0,0 +1,3115 @@
+/* ============================================================
+ * lively-mascot · Base Styles (shared across all characters)
+ *
+ * Zero dependencies, pure CSS. Visual language: solid fill + 2px
+ * ink outline + hard-edge offset shadow (sticker / neo-brutalist).
+ *
+ * Theme vars (set via JS inline style or override):
+ *   --lively-body    Body fill, default #48ff42
+ *   --lively-outline Outline / eyes / shadow ink, default #080808
+ *   --lively-accent  Blush accent, default #ff9fb6
+ *
+ * Structure (DOM):
+ *   .lively-mascot (root, cursor-follow class)
+ *     .lively-mascot__rig (JS applies tilt/translate via transform)
+ *       .lively-body          -> idle sway
+ *       .lively-face-wrap > svg > .lively-face -> blink
+ *     .lively__feet           -> step / happy kick / hopping tuck
+ * ============================================================ */
+
+/* --- Root --- */
+.lively-mascot {
+  --lively-body: #48ff42;
+  --lively-outline: #080808;
+  --lively-accent: #ff9fb6;
+  --lively-depth-transform: rotateX(0deg) rotateY(0deg);
+  --lively-gloss-x: 25%;
+  --lively-gloss-y: 18%;
+  position: relative;
+  display: inline-block;
+  width: 106px;
+  height: 106px;
+  container-type: inline-size;
+  cursor: pointer;
+  user-select: none;
+}
+
+/* 2D view keeps the original flat, sticker-like rendering. */
+.lively-mascot--2d {
+  perspective: none;
+}
+
+/* Lightweight depth treatment: the same SVG character gains a shallow
+   camera angle, layered parts, and directional shading without WebGL. */
+.lively-mascot--3d {
+  --lively-depth-transform: rotateX(2deg) rotateY(-2.8deg);
+  perspective: 680px;
+  perspective-origin: 50% 50%;
+}
+
+.lively-mascot--3d .lively-mascot__rig,
+.lively-mascot--3d .lively-mascot__gaze,
+.lively-mascot.lively-mascot--3d .lively-body,
+.lively-mascot--3d .lively-face-wrap {
+  transform-style: preserve-3d;
+}
+
+.lively-mascot--3d .lively-mascot__gaze {
+  transform-origin: 50% 58%;
+}
+
+.lively-mascot__gaze { transform: var(--lively-depth-transform); }
+
+.lively-mascot.lively-mascot--3d .lively-body {
+  box-shadow:
+    0 16px 24px rgba(15, 17, 18, .24),
+    0 4px 7px rgba(15, 17, 18, .16),
+    inset -12px -14px 22px rgba(10, 15, 20, .22),
+    inset 7px 7px 14px rgba(255,255,255,.21);
+  filter: saturate(1.03) contrast(1.02);
+  backface-visibility: hidden;
+}
+
+.lively-mascot--3d .lively-body::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background:
+    radial-gradient(ellipse at var(--lively-gloss-x) var(--lively-gloss-y), rgba(255,255,255,.34) 0%, rgba(255,255,255,.17) 16%, transparent 43%),
+    linear-gradient(145deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,0) 43%),
+    linear-gradient(325deg, rgba(10,15,20,.20) 0%, rgba(10,15,20,0) 46%);
+  opacity: .92;
+  pointer-events: none;
+  transform: translateZ(6px);
+  filter: blur(.65px);
+}
+
+.lively-mascot--3d .lively-body::after {
+  content: "";
+  position: absolute;
+  inset: 2px;
+  border-radius: inherit;
+  border: 1px solid rgba(255,255,255,.13);
+  box-shadow: inset -4px -5px 7px rgba(8,13,18,.10), inset 2px 2px 5px rgba(255,255,255,.08);
+  pointer-events: none;
+  transform: translateZ(2px);
+  opacity: .82;
+}
+
+.lively-mascot--3d .lively-face-wrap {
+  transform: translateZ(11px);
+  filter: drop-shadow(0 3px 3px rgba(0,0,0,.14));
+}
+.lively-mascot--3d .lively__leaf,
+.lively-mascot--3d .lively__ears,
+.lively-mascot--3d .lively__antenna {
+  filter: drop-shadow(2px 4px 3px rgba(0,0,0,.18));
+}
+.lively-mascot--3d .lively__leaf svg,
+.lively-mascot--3d .lively__ears svg,
+.lively-mascot--3d .lively__antenna svg {
+  transform: translateZ(13px);
+  filter: drop-shadow(3px 5px 4px rgba(0,0,0,.19));
+}
+
+/* Solid accessories use their own depth planes so they do not read as flat decals. */
+.lively-mascot--3d .lively__tail {
+  transform-style: preserve-3d;
+  filter: drop-shadow(2px 4px 3px rgba(0,0,0,.16));
+}
+.lively-mascot--3d .lively__tail svg { transform: translateZ(-3px); }
+.lively-mascot--3d .lively__feet {
+  transform: translateZ(5px);
+  filter: var(--lively-state-filter, brightness(1)) drop-shadow(0 5px 4px rgba(0,0,0,.20));
+}
+.lively-mascot--3d .lively__foot svg {
+  transform: translateZ(10px);
+  filter: drop-shadow(1px 3px 3px rgba(0,0,0,.20));
+}
+
+/* Shared foot lighting: a softbox reflection sits on the upper-left of
+   every foot shape, including rectangular robot feet. */
+.lively-mascot--3d .lively__foot::after {
+  content: "";
+  position: absolute;
+  left: 16%;
+  top: 13%;
+  width: 52%;
+  height: 30%;
+  border-radius: 50%;
+  background: radial-gradient(ellipse, rgba(255,255,255,.48) 0%, rgba(255,255,255,.16) 45%, transparent 76%);
+  filter: blur(.45px);
+  pointer-events: none;
+  z-index: 2;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .lively-mascot--3d .lively-body::before { transform: none; }
+}
+
+/* --- Static mode: no cursor-follow, no idle / loop animations ---
+   Used for thumbnail previews (e.g. the emotion gallery). The visible face is
+   still driven by the `is-emotion-XX` class; only motion is disabled. */
+.lively-mascot--static {
+  cursor: default;
+  pointer-events: none;
+}
+
+.lively-mascot--static * {
+  animation: none !important;
+}
+
+/* --- Loading ring overlay (28) — shared by all characters ---
+   A bold, clearly-visible spinner for the live mascot; hidden in static
+   thumbnails so the emotion gallery stays purely iconic. */
+.lively__loading-overlay {
+  display: none;
+}
+
+.lively-mascot.is-emotion-28 .lively__loading-overlay {
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 50%;
+  height: 50%;
+  transform: translate(-50%, -50%);
+  box-sizing: border-box;
+  border-radius: 50%;
+  border: 2.5px solid color-mix(in srgb, var(--lively-outline) 22%, transparent);
+  pointer-events: none;
+  z-index: 10;
+}
+
+.lively-mascot.is-emotion-28 .lively__loading-overlay::before {
+  content: "";
+  position: absolute;
+  inset: -5px;
+  box-sizing: border-box;
+  border: 4px solid transparent;
+  border-top-color: var(--lively-outline);
+  border-right-color: var(--lively-outline);
+  border-radius: inherit;
+  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--lively-outline) 35%, transparent));
+  animation: lively-loading-orbit 1s linear infinite;
+}
+
+/* Static thumbnails (emotion gallery) keep the same loading ring but frozen */
+.lively-mascot--static.is-emotion-28 .lively__loading-overlay {
+  display: block;
+  width: 44%;
+  height: 44%;
+  border-width: 2px;
+}
+
+.lively-mascot--static.is-emotion-28 .lively__loading-overlay::before {
+  animation: none;
+  inset: -4px;
+  border-width: 3px;
+  /* freeze the arc at about 2 o'clock so it still reads as "loading" */
+  transform: rotate(45deg);
+}
+
+/* Rig layer: outer posture layer (hop / refresh rotation) */
+.lively-mascot__rig {
+  position: absolute;
+  inset: 0;
+  will-change: transform;
+}
+
+/* Gaze layer: JS applies cursor-follow tilt; wraps all parts so the whole
+   face leans/turns together with the body posture. */
+.lively-mascot__gaze {
+  position: absolute;
+  inset: 0;
+  will-change: transform;
+}
+
+/* ============================================================
+ * Body
+ * ============================================================ */
+.lively-body {
+  position: absolute;
+  inset: 0;
+  border: 2px solid var(--lively-outline);
+  border-radius: 50%;
+  background: var(--lively-body);
+  box-shadow: 3px 3px 0 color-mix(in srgb, var(--lively-outline) 70%, transparent);
+  transform-origin: 50% 92%;
+  /* Default idle posture: body + nested face + ears sway together */
+  animation: lively-sway 3.6s ease-in-out infinite;
+}
+
+/* These characters read best when their head/body rests upright. They retain
+   a quiet idle lift, while their attached ears, leaf, and antenna keep their
+   own independent motion. */
+.lively-mascot--sprout .lively-body,
+.lively-mascot--cat .lively-body,
+.lively-mascot--robot .lively-body {
+  animation-name: lively-upright-sway;
+}
+
+/* Immersive mode keeps internal facial detail readable while removing the
+   sticker-like silhouette ink from the body and exposed outer accessories. */
+.lively-mascot.lively-mascot--outline-hidden .lively-body {
+  border-width: 0;
+}
+
+.lively-mascot.lively-mascot--2d.lively-mascot--outline-hidden .lively-body {
+  box-shadow: none;
+}
+
+/* With the ink geometry removed, the shared light pass fills the entire body
+   edge instead of forming a separate rim around the silhouette. */
+.lively-mascot.lively-mascot--3d.lively-mascot--outline-hidden .lively-body::before {
+  inset: 0;
+}
+
+.lively-mascot.lively-mascot--3d.lively-mascot--outline-hidden .lively-body::after {
+  display: none;
+}
+
+.lively-mascot--outline-hidden .lively-sprout__leaf,
+.lively-mascot--outline-hidden .lively__ear,
+.lively-mascot--outline-hidden .lively-cat__tail-outline,
+.lively-mascot--outline-hidden .lively-ghost__hem-stroke {
+  stroke-opacity: 0;
+}
+
+.lively-mascot.is-happy .lively-body {
+  animation: lively-squish 0.6s cubic-bezier(.3, 1.6, .4, 1);
+}
+
+/* ============================================================
+ * Face
+ * ============================================================ */
+.lively-face-wrap {
+  position: absolute;
+  inset: 4px;
+}
+
+.lively-face-accessory {
+  visibility: hidden;
+}
+
+.lively-face-accessory.is-active {
+  visibility: visible;
+}
+
+.lively-face-wrap svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  transform-origin: 50% 50%;
+  animation: lively-breathe 3.8s ease-in-out infinite;
+}
+
+.lively-face {
+  transform-box: fill-box;
+  transform-origin: center;
+}
+
+/* --- Eyes --- */
+.lively-face__eye {
+  transform-box: fill-box;
+  transform-origin: center;
+  transition: transform 90ms ease-out;
+}
+
+.lively-face__eye.is-blinking {
+  transform: scaleY(0.08);
+}
+
+.lively-face__eye>ellipse {
+  fill: #fff;
+  stroke: var(--lively-outline);
+  stroke-width: 2.4;
+}
+
+.lively-face__pupil {
+  fill: var(--lively-outline);
+}
+
+.lively-face__shine {
+  fill: #fff;
+}
+
+/* --- Blush --- */
+.lively-face__blush {
+  fill: var(--lively-accent);
+  fill-opacity: 0.75;
+}
+
+/* --- Mouth variants --- */
+.lively-face__mouth,
+.lively-face__happy {
+  fill: none;
+  stroke: var(--lively-outline);
+  stroke-width: 2.6;
+  stroke-linecap: round;
+}
+
+.lively-face__happy-mouth {
+  fill: var(--lively-outline);
+}
+
+.lively-face__happy,
+.lively-face__happy-mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-happy .lively-face__eye>ellipse,
+.lively-mascot.is-happy .lively-face__pupil,
+.lively-mascot.is-happy .lively-face__shine,
+.lively-mascot.is-happy .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-happy .lively-face__happy,
+.lively-mascot.is-happy .lively-face__happy-mouth {
+  visibility: visible;
+}
+
+/* --- Alt face elements: hidden by default --- */
+.lively-face__sad-mouth,
+.lively-face__open-mouth,
+.lively-face__flat-mouth,
+.lively-face__bored-mouth,
+.lively-face__sleep-eye,
+.lively-face__angry-brow,
+.lively-face__x-eye,
+.lively-face__heart-eye {
+  visibility: hidden;
+}
+
+.lively-face__sad-mouth,
+.lively-face__flat-mouth,
+.lively-face__bored-mouth {
+  fill: none;
+  stroke: var(--lively-outline);
+  stroke-width: 2.6;
+  stroke-linecap: round;
+}
+
+.lively-face__open-mouth {
+  fill: var(--lively-outline);
+  stroke: var(--lively-outline);
+  stroke-width: 1.5;
+}
+
+.lively-face__sleep-eye {
+  fill: none;
+  stroke: var(--lively-outline);
+  stroke-width: 2.4;
+  stroke-linecap: round;
+}
+
+.lively-face__angry-brow {
+  fill: none;
+  stroke: var(--lively-outline);
+  stroke-width: 2.8;
+  stroke-linecap: round;
+}
+
+.lively-face__x-eye line {
+  fill: none;
+  stroke: var(--lively-outline);
+  stroke-width: 2.6;
+  stroke-linecap: round;
+}
+
+.lively-face__heart-eye {
+  fill: var(--lively-accent);
+  stroke: var(--lively-outline);
+  stroke-width: 1.2;
+}
+
+/* ============================================================
+ * Emotion Face Behaviors (40 emotions)
+ * ============================================================ */
+
+/* 00 Sleep */
+.lively-mascot.is-emotion-00 .lively-face__eye>ellipse,
+.lively-mascot.is-emotion-00 .lively-face__pupil,
+.lively-mascot.is-emotion-00 .lively-face__shine,
+.lively-mascot.is-emotion-00 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-00 .lively-face__sleep-eye {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-00 .lively-face__flat-mouth {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-00 .lively-face__blush {
+  fill-opacity: 0.3;
+}
+
+/* 01 Wake */
+.lively-mascot.is-emotion-01 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-01 .lively-face__open-mouth {
+  visibility: visible;
+  rx: 3;
+  ry: 4;
+}
+
+/* 02 Idle: default face */
+
+/* 03 Breathe: default face */
+
+/* 04 Ready */
+.lively-mascot.is-emotion-04 .lively-face__eye>ellipse {
+  ry: 13;
+}
+
+/* 05 Pause */
+.lively-mascot.is-emotion-05 .lively-face__eye>ellipse {
+  ry: 5;
+}
+
+.lively-mascot.is-emotion-05 .lively-face__pupil,
+.lively-mascot.is-emotion-05 .lively-face__shine {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-05 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-05 .lively-face__flat-mouth {
+  visibility: visible;
+}
+
+/* 06 Refresh: normal face */
+
+/* 07 LowBattery */
+.lively-mascot.is-emotion-07 .lively-face__eye {
+  transform: translateY(2px) scaleY(0.8);
+}
+
+.lively-mascot.is-emotion-07 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-07 .lively-face__sad-mouth {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-07 .lively-face__blush {
+  fill-opacity: 0.3;
+}
+
+/* 08 Offline */
+.lively-mascot.is-emotion-08 .lively-face__eye>ellipse,
+.lively-mascot.is-emotion-08 .lively-face__pupil,
+.lively-mascot.is-emotion-08 .lively-face__shine,
+.lively-mascot.is-emotion-08 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-08 .lively-face__x-eye {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-08 .lively-face__flat-mouth {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-08 .lively-face__blush {
+  fill-opacity: 0;
+}
+
+/* 09 Boot */
+.lively-mascot.is-emotion-09 .lively-face__eye>ellipse {
+  ry: 13;
+  rx: 11;
+}
+
+.lively-mascot.is-emotion-09 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-09 .lively-face__open-mouth {
+  visibility: visible;
+}
+
+/* 10 Happy */
+.lively-mascot.is-emotion-10 .lively-face__eye>ellipse,
+.lively-mascot.is-emotion-10 .lively-face__pupil,
+.lively-mascot.is-emotion-10 .lively-face__shine,
+.lively-mascot.is-emotion-10 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-10 .lively-face__happy {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-10 .lively-face__happy-mouth {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-10 .lively-face__blush {
+  fill-opacity: 1;
+}
+
+/* 11 Excited */
+.lively-mascot.is-emotion-11 .lively-face__eye>ellipse,
+.lively-mascot.is-emotion-11 .lively-face__pupil,
+.lively-mascot.is-emotion-11 .lively-face__shine,
+.lively-mascot.is-emotion-11 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-11 .lively-face__happy {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-11 .lively-face__happy-mouth {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-11 .lively-face__blush {
+  fill-opacity: 1;
+  rx: 9;
+}
+
+/* 12 Sad */
+.lively-mascot.is-emotion-12 .lively-face__eye {
+  transform: translateY(2px) scaleY(0.85);
+}
+
+.lively-mascot.is-emotion-12 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-12 .lively-face__sad-mouth {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-12 .lively-face__blush {
+  fill-opacity: 0.3;
+}
+
+/* 13 Angry */
+.lively-mascot.is-emotion-13 .lively-face__eye>ellipse {
+  ry: 9;
+}
+
+.lively-mascot.is-emotion-13 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-13 .lively-face__sad-mouth {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-13 .lively-face__angry-brow {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-13 .lively-face__blush {
+  fill: #ff6b6b;
+  fill-opacity: 0.7;
+}
+
+/* 14 Surprised */
+.lively-mascot.is-emotion-14 .lively-face__eye>ellipse {
+  ry: 14;
+  rx: 12;
+}
+
+.lively-mascot.is-emotion-14 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-14 .lively-face__open-mouth {
+  visibility: visible;
+  rx: 6;
+  ry: 7;
+}
+
+.lively-mascot.is-emotion-14 .lively-face__blush {
+  fill-opacity: 0.9;
+}
+
+/* 15 Shy */
+.lively-mascot.is-emotion-15 .lively-face__eye {
+  transform: translateY(3px);
+}
+
+.lively-mascot.is-emotion-15 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-15 .lively-face__happy {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-15 .lively-face__happy-mouth {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-15 .lively-face__blush {
+  fill-opacity: 1;
+  rx: 9;
+  ry: 5;
+}
+
+/* 16 Love */
+.lively-mascot.is-emotion-16 .lively-face__eye>ellipse,
+.lively-mascot.is-emotion-16 .lively-face__pupil,
+.lively-mascot.is-emotion-16 .lively-face__shine,
+.lively-mascot.is-emotion-16 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-16 .lively-face__heart-eye {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-16 .lively-face__happy-mouth {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-16 .lively-face__blush {
+  fill-opacity: 1;
+  rx: 9;
+}
+
+/* 17 Confused */
+.lively-mascot.is-emotion-17 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-17 .lively-face__sad-mouth {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-17 .lively-face__blush {
+  fill-opacity: 0.4;
+}
+
+/* 18 Cool */
+.lively-mascot.is-emotion-18 .lively-face__eye>ellipse {
+  ry: 6;
+}
+
+.lively-mascot.is-emotion-18 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-18 .lively-face__happy {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-18 .lively-face__blush {
+  fill-opacity: 0.5;
+}
+
+/* 19 Smug */
+.lively-mascot.is-emotion-19 .lively-face__eye>ellipse {
+  ry: 7;
+}
+
+.lively-mascot.is-emotion-19 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-19 .lively-face__happy {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-19 .lively-face__happy-mouth {
+  visibility: visible;
+}
+
+/* 20 Thinking */
+.lively-mascot.is-emotion-20 .lively-face__eye {
+  transform: translateY(-3px);
+}
+
+.lively-mascot.is-emotion-20 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-20 .lively-face__flat-mouth {
+  visibility: visible;
+}
+
+/* 21 Listening */
+.lively-mascot.is-emotion-21 .lively-face__eye>ellipse {
+  ry: 13;
+}
+
+/* 22 Talking */
+.lively-mascot.is-emotion-22 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-22 .lively-face__open-mouth {
+  visibility: visible;
+  rx: 4;
+  ry: 5;
+}
+
+/* 23 Searching: default face (JS gaze handles eye direction) */
+
+/* 24 Reading */
+.lively-mascot.is-emotion-24 .lively-face__eye {
+  transform: translateY(3px);
+}
+
+.lively-mascot.is-emotion-24 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-24 .lively-face__happy {
+  visibility: visible;
+}
+
+/* 25 Writing */
+.lively-mascot.is-emotion-25 .lively-face__eye {
+  transform: translateY(2px) translateX(1px);
+}
+
+/* 26 Coding */
+.lively-mascot.is-emotion-26 .lively-face__eye>ellipse {
+  ry: 8;
+}
+
+.lively-mascot.is-emotion-26 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-26 .lively-face__flat-mouth {
+  visibility: visible;
+}
+
+/* 27 Designing: default face */
+
+/* 28 Loading */
+.lively-mascot.is-emotion-28 .lively-face__eye {
+  animation: lively-loading-eye-drift 3s ease-in-out infinite;
+}
+
+.lively-mascot.is-emotion-28 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-28 .lively-face__flat-mouth {
+  visibility: visible;
+}
+
+/* 29 Processing */
+.lively-mascot.is-emotion-29 .lively-face__eye>ellipse {
+  ry: 9;
+}
+
+.lively-mascot.is-emotion-29 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-29 .lively-face__flat-mouth {
+  visibility: visible;
+}
+
+/* 30 Success */
+.lively-mascot.is-emotion-30 .lively-face__eye>ellipse,
+.lively-mascot.is-emotion-30 .lively-face__pupil,
+.lively-mascot.is-emotion-30 .lively-face__shine,
+.lively-mascot.is-emotion-30 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-30 .lively-face__happy {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-30 .lively-face__happy-mouth {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-30 .lively-face__blush {
+  fill-opacity: 1;
+}
+
+/* 31 Error */
+.lively-mascot.is-emotion-31 .lively-face__eye>ellipse,
+.lively-mascot.is-emotion-31 .lively-face__pupil,
+.lively-mascot.is-emotion-31 .lively-face__shine,
+.lively-mascot.is-emotion-31 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-31 .lively-face__x-eye {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-31 .lively-face__sad-mouth {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-31 .lively-face__blush {
+  fill: #ff6b6b;
+  fill-opacity: 0.7;
+}
+
+/* 32 Grateful */
+.lively-mascot.is-emotion-32 .lively-face__eye>ellipse,
+.lively-mascot.is-emotion-32 .lively-face__pupil,
+.lively-mascot.is-emotion-32 .lively-face__shine,
+.lively-mascot.is-emotion-32 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-32 .lively-face__happy {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-32 .lively-face__happy-mouth {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-32 .lively-face__blush {
+  fill: #ffb37a;
+  fill-opacity: 0.85;
+}
+
+/* 33 Retrying */
+.lively-mascot.is-emotion-33 .lively-face__pupil {
+  rx: 3;
+  ry: 4;
+}
+
+.lively-mascot.is-emotion-33 .lively-face__mouth {
+  d: path("M44 63 Q50 63 56 63");
+}
+
+/* 34 Cancelled */
+.lively-mascot.is-emotion-34 .lively-face__pupil {
+  cy: 47;
+  ry: 3;
+}
+
+.lively-mascot.is-emotion-34 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-34 .lively-face__sad-mouth {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-34 .lively-face__blush {
+  fill-opacity: 0.3;
+}
+
+/* 35 Crying */
+.lively-mascot.is-emotion-35 .lively-face__eye>ellipse,
+.lively-mascot.is-emotion-35 .lively-face__pupil,
+.lively-mascot.is-emotion-35 .lively-face__shine,
+.lively-mascot.is-emotion-35 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-35 .lively-face__cry-eye {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-35 .lively-face__sad-mouth {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-35 .lively-face__tear {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-35 .lively-face__blush {
+  fill: #6ec7ff;
+  fill-opacity: 0.6;
+}
+
+/* 36 Bored */
+.lively-mascot.is-emotion-36 .lively-face__eye {
+  transform: translateY(4px) scaleY(.5);
+}
+
+.lively-mascot.is-emotion-36 .lively-face__pupil,
+.lively-mascot.is-emotion-36 .lively-face__shine {
+  transform: translateY(2px);
+}
+
+.lively-mascot.is-emotion-36 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-36 .lively-face__bored-mouth {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-36 .lively-face__blush {
+  fill-opacity: .36;
+}
+
+/* 37 Nervous */
+.lively-mascot.is-emotion-37 .lively-face__sweat {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-37 .lively-face__pupil {
+  animation: lively-nervous-eyes 0.4s ease-in-out infinite;
+}
+
+/* 38 Eureka */
+.lively-mascot.is-emotion-38 .lively-face__eye>ellipse,
+.lively-mascot.is-emotion-38 .lively-face__pupil,
+.lively-mascot.is-emotion-38 .lively-face__shine,
+.lively-mascot.is-emotion-38 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-38 .lively-face__star-eye {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-38 .lively-face__happy {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-38 .lively-face__happy-mouth {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-38 .lively-face__sparkle {
+  visibility: visible;
+}
+
+/* 39 Waiting */
+.lively-mascot.is-emotion-39 .lively-face__pupil {
+  cy: 47;
+}
+
+.lively-mascot.is-emotion-39 .lively-face__mouth {
+  d: path("M44 64 Q50 64 56 64");
+}
+
+.lively-mascot.is-emotion-39 .lively-face__waiting-dots {
+  visibility: visible;
+}
+
+/* ============================================================
+ * SVG Element Base Styles
+ * ============================================================ */
+
+/* --- Tear drops --- */
+.lively-face__tear {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-35 .lively-face__tear--l {
+  animation: lively-tear-fall 0.8s ease-in infinite;
+}
+
+.lively-mascot.is-emotion-35 .lively-face__tear--r {
+  animation: lively-tear-fall 0.8s ease-in 0.3s infinite;
+}
+
+@keyframes lively-tear-fall {
+  0% {
+    transform: translate(var(--tx, 40px), 52px);
+    opacity: 0.9;
+  }
+
+  100% {
+    transform: translate(var(--tx, 40px), 72px);
+    opacity: 0;
+  }
+}
+
+/* --- Sweat drop --- */
+.lively-face__sweat {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-37 .lively-face__sweat {
+  animation: lively-sweat-drip 1.2s ease-in infinite;
+}
+
+@keyframes lively-sweat-drip {
+  0% {
+    transform: translate(82px, 30px);
+    opacity: 0.8;
+  }
+
+  100% {
+    transform: translate(82px, 48px);
+    opacity: 0;
+  }
+}
+
+/* --- Star eyes --- */
+.lively-face__star-eye {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-38 .lively-face__star-eye {
+  animation: lively-star-pulse 0.6s ease-in-out infinite;
+}
+
+@keyframes lively-star-pulse {
+
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.2);
+  }
+}
+
+/* --- Sparkles --- */
+.lively-face__sparkle {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-38 .lively-face__sparkle--1 {
+  animation: lively-sparkle-twinkle 0.8s ease-in-out infinite;
+}
+
+.lively-mascot.is-emotion-38 .lively-face__sparkle--2 {
+  animation: lively-sparkle-twinkle 0.8s ease-in-out 0.4s infinite;
+}
+
+@keyframes lively-sparkle-twinkle {
+
+  0%,
+  100% {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+
+  50% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* --- Cry eyes --- */
+.lively-face__cry-eye {
+  visibility: hidden;
+}
+
+/* --- Waiting dots --- */
+.lively-face__waiting-dots {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-39 .lively-face__waiting-dots circle:nth-child(1) {
+  animation: lively-dot-bounce 1.2s ease-in-out infinite;
+}
+
+.lively-mascot.is-emotion-39 .lively-face__waiting-dots circle:nth-child(2) {
+  animation: lively-dot-bounce 1.2s ease-in-out 0.2s infinite;
+}
+
+.lively-mascot.is-emotion-39 .lively-face__waiting-dots circle:nth-child(3) {
+  animation: lively-dot-bounce 1.2s ease-in-out 0.4s infinite;
+}
+
+@keyframes lively-dot-bounce {
+
+  0%,
+  60%,
+  100% {
+    transform: translateY(0);
+    opacity: 0.4;
+  }
+
+  30% {
+    transform: translateY(-4px);
+    opacity: 1;
+  }
+}
+
+/* ============================================================
+ * Feet
+ * ============================================================ */
+.lively__feet {
+  --lively-state-filter: brightness(1);
+  position: absolute;
+  bottom: -7cqw;
+  left: 0;
+  width: 100%;
+  filter: var(--lively-state-filter);
+}
+
+.lively__foot {
+  position: absolute;
+  bottom: 0;
+  width: 22cqw;
+  height: 16cqw;
+  transform-origin: 50% 0;
+  animation: lively-foot-tap 1.6s ease-in-out infinite;
+}
+
+.lively__foot svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+/* Default foot positions (characters override via their own CSS) */
+.lively__foot--l {
+  left: 18cqw;
+}
+
+.lively__foot--r {
+  left: 60cqw;
+  animation-delay: 0.8s;
+}
+
+.lively-foot__body {
+  fill: var(--lively-outline);
+  stroke: var(--lively-outline);
+  stroke-width: 1;
+  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.12));
+}
+
+.lively-foot__shine {
+  fill: #fff;
+  opacity: 0.85;
+}
+
+/* Happy foot kicks */
+.lively-mascot.is-happy .lively__foot--l {
+  animation: lively-foot-kick-l 0.6s cubic-bezier(.3, 1.5, .5, 1);
+}
+
+.lively-mascot.is-happy .lively__foot--r {
+  animation: lively-foot-kick-r 0.6s cubic-bezier(.3, 1.5, .5, 1);
+}
+
+/* Hopping: feet tuck */
+.lively-mascot.is-hopping .lively-mascot__rig {
+  animation: lively-hop 0.9s cubic-bezier(.3, .7, .4, 1);
+}
+
+.lively-mascot.is-hopping .lively__foot {
+  animation: lively-foot-tuck 0.9s ease-in-out;
+}
+
+/* ============================================================
+ * Reduced Motion
+ * ============================================================ */
+@media (prefers-reduced-motion: reduce) {
+
+  .lively-body,
+  .lively__leaf,
+  .lively__ears,
+  .lively__antenna,
+  .lively__tail,
+  .lively-cat__whiskers,
+  .lively-cat__whisker,
+  .lively__foot,
+  .lively__ghost-hem,
+  .lively-face-wrap svg,
+  .lively__loading-overlay::before {
+    animation: none !important;
+  }
+}
+
+/* ============================================================
+ * Keyframes: Base
+ * ============================================================ */
+@keyframes lively-breathe {
+
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.035);
+  }
+}
+
+@keyframes lively-squish {
+  0% {
+    transform: scale(1, 1);
+  }
+
+  30% {
+    transform: scale(1.12, 0.86);
+  }
+
+  60% {
+    transform: scale(0.94, 1.08);
+  }
+
+  100% {
+    transform: scale(1, 1);
+  }
+}
+
+@keyframes lively-sway {
+
+  0%,
+  100% {
+    transform: rotate(6deg);
+  }
+
+  50% {
+    transform: rotate(10deg) translateY(-2px);
+  }
+}
+
+@keyframes lively-upright-sway {
+
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-2px);
+  }
+}
+
+@keyframes lively-hop {
+  0% {
+    transform: translateY(0);
+  }
+
+  18% {
+    transform: translateY(3px) scale(1.07, 0.88);
+  }
+
+  45% {
+    transform: translateY(-13px) scale(0.95, 1.07);
+  }
+
+  72% {
+    transform: translateY(0) scale(1.05, 0.93);
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes lively-leaf-sway {
+
+  0%,
+  100% {
+    transform: rotate(8deg);
+  }
+
+  50% {
+    transform: rotate(20deg) translateY(-1px);
+  }
+}
+
+@keyframes lively-leaf-spin {
+  0% {
+    transform: rotate(8deg);
+  }
+
+  100% {
+    transform: rotate(368deg);
+  }
+}
+
+@keyframes lively-foot-tap {
+
+  0%,
+  100% {
+    transform: rotate(0deg) translateY(0);
+  }
+
+  30% {
+    transform: rotate(-11deg) translateY(-2px);
+  }
+
+  60% {
+    transform: rotate(5deg) translateY(0);
+  }
+}
+
+@keyframes lively-foot-kick-l {
+
+  0%,
+  100% {
+    transform: rotate(0deg) translateY(0);
+  }
+
+  40% {
+    transform: rotate(-26deg) translateY(-5px);
+  }
+}
+
+@keyframes lively-foot-kick-r {
+
+  0%,
+  100% {
+    transform: rotate(0deg) translateY(0);
+  }
+
+  40% {
+    transform: rotate(26deg) translateY(-5px);
+  }
+}
+
+@keyframes lively-foot-tuck {
+
+  0%,
+  100% {
+    transform: rotate(0deg) translateY(0);
+  }
+
+  40% {
+    transform: rotate(0deg) translateY(-4px) scaleY(0.6);
+  }
+}
+
+/* ============================================================
+ * Keyframes: Emotion Body Animations
+ * ============================================================ */
+
+/* --- Lifecycle --- */
+@keyframes lively-wake {
+  0% {
+    transform: scale(0.9) rotate(-3deg);
+    opacity: 0.6;
+  }
+
+  50% {
+    transform: scale(1.05) rotate(2deg);
+    opacity: 1;
+  }
+
+  100% {
+    transform: scale(1) rotate(0);
+    opacity: 1;
+  }
+}
+
+@keyframes lively-deep-breathe {
+
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.06);
+  }
+}
+
+@keyframes lively-ready {
+
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-3px);
+  }
+}
+
+@keyframes lively-refresh {
+  0% {
+    transform: rotate(0);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes lively-lowbatt {
+
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.7;
+  }
+}
+
+@keyframes lively-boot {
+  0% {
+    transform: scale(0.3);
+    opacity: 0;
+  }
+
+  60% {
+    transform: scale(1.1);
+    opacity: 1;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/* --- Reactions --- */
+@keyframes lively-happy-bounce {
+  0% {
+    transform: translateY(0) scale(1);
+  }
+
+  30% {
+    transform: translateY(-12px) scale(1.05, 0.95);
+  }
+
+  50% {
+    transform: translateY(-16px) scale(0.95, 1.05);
+  }
+
+  80% {
+    transform: translateY(2px) scale(1.02, 0.98);
+  }
+
+  100% {
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes lively-excited {
+
+  0%,
+  100% {
+    transform: translateY(0) rotate(0);
+  }
+
+  25% {
+    transform: translateY(-6px) rotate(-4deg);
+  }
+
+  75% {
+    transform: translateY(-6px) rotate(4deg);
+  }
+}
+
+@keyframes lively-sad {
+
+  0%,
+  100% {
+    transform: translateY(0) rotate(0);
+  }
+
+  50% {
+    transform: translateY(3px) rotate(-2deg);
+  }
+}
+
+@keyframes lively-bored {
+
+  0%,
+  100% {
+    transform: translateY(1px) rotate(-1deg) scale(1, .99);
+  }
+
+  50% {
+    transform: translateY(4px) rotate(-2.2deg) scale(1.012, .972);
+  }
+}
+
+@keyframes lively-surprise {
+  0% {
+    transform: scale(1);
+  }
+
+  30% {
+    transform: scale(1.15, 0.88);
+  }
+
+  60% {
+    transform: scale(0.92, 1.1);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes lively-love-pulse {
+
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.08);
+  }
+}
+
+@keyframes lively-confused {
+
+  0%,
+  100% {
+    transform: rotate(0);
+  }
+
+  25% {
+    transform: rotate(-5deg);
+  }
+
+  75% {
+    transform: rotate(5deg);
+  }
+}
+
+@keyframes lively-smug {
+
+  0%,
+  100% {
+    transform: translateY(0) rotate(0);
+  }
+
+  50% {
+    transform: translateY(-2px) rotate(3deg);
+  }
+}
+
+@keyframes lively-shy {
+
+  0%,
+  100% {
+    transform: translateX(0) rotate(0);
+  }
+
+  30% {
+    transform: translateX(3px) rotate(1deg);
+  }
+
+  70% {
+    transform: translateX(-2px) rotate(-0.5deg);
+  }
+}
+
+/* --- Work States --- */
+@keyframes lively-thinking {
+
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+
+  30% {
+    transform: translateY(-4px);
+  }
+
+  60% {
+    transform: translateY(-2px);
+  }
+}
+
+@keyframes lively-listening {
+
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.04, 0.96);
+  }
+}
+
+@keyframes lively-talking {
+
+  0%,
+  100% {
+    transform: scaleY(1);
+  }
+
+  50% {
+    transform: scaleY(1.03);
+  }
+}
+
+@keyframes lively-searching {
+
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+
+  25% {
+    transform: translateX(-4px);
+  }
+
+  75% {
+    transform: translateX(4px);
+  }
+}
+
+@keyframes lively-reading {
+
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(2px);
+  }
+}
+
+@keyframes lively-writing {
+
+  0%,
+  100% {
+    transform: translateX(0) rotate(0);
+  }
+
+  25% {
+    transform: translateX(-2px) rotate(-1deg);
+  }
+
+  75% {
+    transform: translateX(2px) rotate(1deg);
+  }
+}
+
+@keyframes lively-coding {
+
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-2px);
+  }
+}
+
+@keyframes lively-designing {
+
+  0%,
+  100% {
+    transform: rotate(0);
+  }
+
+  33% {
+    transform: rotate(-3deg);
+  }
+
+  66% {
+    transform: rotate(3deg);
+  }
+}
+
+@keyframes lively-loading {
+  0% {
+    transform: rotate(0);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes lively-processing {
+
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(0.95);
+  }
+}
+
+@keyframes lively-success {
+  0% {
+    transform: scale(1);
+  }
+
+  30% {
+    transform: scale(1.12, 0.88);
+  }
+
+  60% {
+    transform: scale(0.95, 1.08);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+/* --- Loading keyframes --- */
+@keyframes lively-loading-eye-drift {
+
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+
+  25% {
+    transform: translateX(-2px);
+  }
+
+  75% {
+    transform: translateX(2px);
+  }
+}
+
+@keyframes lively-leaf-spin-slow {
+  0% {
+    transform: rotate(8deg) scale(1);
+  }
+
+  50% {
+    transform: rotate(188deg) scale(1.08);
+  }
+
+  100% {
+    transform: rotate(368deg) scale(1);
+  }
+}
+
+@keyframes lively-loading-orbit {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes lively-loading-bounce {
+  0%, 100% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-5px);
+  }
+}
+
+/* ============================================================
+ * Keyframes: Leaf Emotion Animations
+ * ============================================================ */
+@keyframes lively-leaf-sleep {
+
+  0%,
+  100% {
+    transform: rotate(8deg) scaleY(0.9);
+  }
+
+  50% {
+    transform: rotate(12deg) scaleY(0.85);
+  }
+}
+
+@keyframes lively-leaf-wake {
+  0% {
+    transform: rotate(5deg) scale(0.9);
+  }
+
+  50% {
+    transform: rotate(25deg) scale(1.1);
+  }
+
+  100% {
+    transform: rotate(10deg) scale(1);
+  }
+}
+
+@keyframes lively-leaf-breathe {
+
+  0%,
+  100% {
+    transform: rotate(8deg);
+  }
+
+  50% {
+    transform: rotate(16deg) scaleY(1.05);
+  }
+}
+
+@keyframes lively-leaf-ready {
+
+  0%,
+  100% {
+    transform: rotate(10deg);
+  }
+
+  50% {
+    transform: rotate(18deg) translateY(-2px);
+  }
+}
+
+@keyframes lively-leaf-pause {
+
+  0%,
+  100% {
+    transform: rotate(8deg);
+    opacity: 0.6;
+  }
+
+  50% {
+    transform: rotate(10deg);
+    opacity: 0.5;
+  }
+}
+
+@keyframes lively-leaf-refresh {
+  0% {
+    transform: rotate(8deg);
+  }
+
+  100% {
+    transform: rotate(368deg);
+  }
+}
+
+@keyframes lively-leaf-droop {
+
+  0%,
+  100% {
+    transform: rotate(5deg) translateY(2px) scaleY(0.85);
+  }
+
+  50% {
+    transform: rotate(3deg) translateY(4px) scaleY(0.8);
+  }
+}
+
+@keyframes lively-leaf-boot {
+  0% {
+    transform: scale(0.5) rotate(0);
+  }
+
+  60% {
+    transform: scale(1.15) rotate(15deg);
+  }
+
+  100% {
+    transform: scale(1) rotate(10deg);
+  }
+}
+
+@keyframes lively-leaf-spin-fast {
+  0% {
+    transform: rotate(8deg);
+  }
+
+  100% {
+    transform: rotate(368deg);
+  }
+}
+
+@keyframes lively-leaf-flap {
+
+  0%,
+  100% {
+    transform: rotate(8deg);
+  }
+
+  25% {
+    transform: rotate(28deg);
+  }
+
+  75% {
+    transform: rotate(-10deg);
+  }
+}
+
+@keyframes lively-leaf-angry {
+
+  0%,
+  100% {
+    transform: rotate(8deg);
+  }
+
+  25% {
+    transform: rotate(-5deg);
+  }
+
+  75% {
+    transform: rotate(20deg);
+  }
+}
+
+@keyframes lively-leaf-jump {
+  0% {
+    transform: rotate(8deg) translateY(0);
+  }
+
+  50% {
+    transform: rotate(20deg) translateY(-6px);
+  }
+
+  100% {
+    transform: rotate(8deg) translateY(0);
+  }
+}
+
+@keyframes lively-leaf-shy {
+
+  0%,
+  100% {
+    transform: rotate(12deg) scaleX(1);
+  }
+
+  50% {
+    transform: rotate(6deg) scaleX(-1);
+  }
+}
+
+@keyframes lively-leaf-love {
+
+  0%,
+  100% {
+    transform: rotate(10deg) scale(1);
+  }
+
+  50% {
+    transform: rotate(15deg) scale(1.15);
+  }
+}
+
+@keyframes lively-leaf-confused {
+
+  0%,
+  100% {
+    transform: rotate(8deg);
+  }
+
+  25% {
+    transform: rotate(-8deg);
+  }
+
+  75% {
+    transform: rotate(22deg);
+  }
+}
+
+@keyframes lively-leaf-cool {
+
+  0%,
+  100% {
+    transform: rotate(8deg);
+  }
+
+  50% {
+    transform: rotate(14deg) translateY(-1px);
+  }
+}
+
+@keyframes lively-leaf-smug {
+
+  0%,
+  100% {
+    transform: rotate(8deg) translateY(0);
+  }
+
+  50% {
+    transform: rotate(16deg) translateY(-2px);
+  }
+}
+
+@keyframes lively-leaf-think {
+
+  0%,
+  100% {
+    transform: rotate(8deg);
+  }
+
+  50% {
+    transform: rotate(20deg) translateY(-2px);
+  }
+}
+
+@keyframes lively-leaf-perk {
+
+  0%,
+  100% {
+    transform: rotate(8deg) scaleY(1);
+  }
+
+  50% {
+    transform: rotate(14deg) scaleY(1.1);
+  }
+}
+
+@keyframes lively-leaf-talk {
+
+  0%,
+  100% {
+    transform: rotate(10deg);
+  }
+
+  50% {
+    transform: rotate(18deg);
+  }
+}
+
+@keyframes lively-leaf-search {
+
+  0%,
+  100% {
+    transform: rotate(5deg) translateX(0);
+  }
+
+  25% {
+    transform: rotate(12deg) translateX(-3px);
+  }
+
+  75% {
+    transform: rotate(12deg) translateX(3px);
+  }
+}
+
+@keyframes lively-leaf-read {
+
+  0%,
+  100% {
+    transform: rotate(6deg) translateY(0);
+  }
+
+  50% {
+    transform: rotate(4deg) translateY(2px);
+  }
+}
+
+@keyframes lively-leaf-write {
+
+  0%,
+  100% {
+    transform: rotate(8deg) translateX(0);
+  }
+
+  25% {
+    transform: rotate(5deg) translateX(-2px);
+  }
+
+  75% {
+    transform: rotate(12deg) translateX(2px);
+  }
+}
+
+@keyframes lively-leaf-code {
+
+  0%,
+  100% {
+    transform: rotate(8deg);
+  }
+
+  50% {
+    transform: rotate(16deg);
+  }
+}
+
+@keyframes lively-leaf-design {
+
+  0%,
+  100% {
+    transform: rotate(8deg);
+  }
+
+  33% {
+    transform: rotate(4deg);
+  }
+
+  66% {
+    transform: rotate(14deg);
+  }
+}
+
+@keyframes lively-leaf-pulse {
+
+  0%,
+  100% {
+    transform: rotate(8deg) scale(1);
+  }
+
+  50% {
+    transform: rotate(8deg) scale(1.1);
+  }
+}
+
+@keyframes lively-leaf-celebrate {
+  0% {
+    transform: rotate(8deg) scale(1);
+  }
+
+  30% {
+    transform: rotate(25deg) scale(1.15);
+  }
+
+  60% {
+    transform: rotate(-5deg) scale(1.05);
+  }
+
+  100% {
+    transform: rotate(8deg) scale(1);
+  }
+}
+
+@keyframes lively-leaf-error {
+
+  0%,
+  100% {
+    transform: rotate(8deg);
+    opacity: 1;
+  }
+
+  50% {
+    transform: rotate(-3deg);
+    opacity: 0.5;
+  }
+}
+
+/* ============================================================
+ * Keyframes: Foot Emotion Animations
+ * ============================================================ */
+@keyframes lively-foot-rest {
+
+  0%,
+  100% {
+    transform: rotate(0deg) translateY(0);
+  }
+
+  50% {
+    transform: rotate(0deg) translateY(-1px);
+  }
+}
+
+@keyframes lively-foot-wake {
+  0% {
+    transform: rotate(0deg) scaleY(0.6);
+  }
+
+  60% {
+    transform: rotate(0deg) scaleY(1.1);
+  }
+
+  100% {
+    transform: rotate(0deg) scaleY(1);
+  }
+}
+
+@keyframes lively-foot-ready {
+
+  0%,
+  100% {
+    transform: rotate(0deg) translateY(0);
+  }
+
+  50% {
+    transform: rotate(0deg) translateY(-2px);
+  }
+}
+
+@keyframes lively-foot-boot {
+  0% {
+    transform: rotate(0deg) scaleY(0.3);
+  }
+
+  60% {
+    transform: rotate(0deg) scaleY(1.1);
+  }
+
+  100% {
+    transform: rotate(0deg) scaleY(1);
+  }
+}
+
+@keyframes lively-foot-kick {
+
+  0%,
+  100% {
+    transform: rotate(0deg) translateY(0);
+  }
+
+  40% {
+    transform: rotate(-30deg) translateY(-6px);
+  }
+}
+
+@keyframes lively-foot-jump {
+
+  0%,
+  100% {
+    transform: rotate(0deg) translateY(0) scaleY(1);
+  }
+
+  30% {
+    transform: rotate(0deg) translateY(2px) scaleY(0.7);
+  }
+
+  50% {
+    transform: rotate(0deg) translateY(-8px) scaleY(1);
+  }
+}
+
+@keyframes lively-foot-drag {
+
+  0%,
+  100% {
+    transform: rotate(0deg) translateY(0);
+  }
+
+  50% {
+    transform: rotate(3deg) translateY(2px);
+  }
+}
+
+@keyframes lively-foot-stomp {
+
+  0%,
+  100% {
+    transform: rotate(0deg) translateY(0);
+  }
+
+  30% {
+    transform: rotate(0deg) translateY(-3px);
+  }
+
+  60% {
+    transform: rotate(0deg) translateY(2px);
+  }
+}
+
+@keyframes lively-foot-tap-slow {
+
+  0%,
+  100% {
+    transform: rotate(0deg) translateY(0);
+  }
+
+  50% {
+    transform: rotate(-5deg) translateY(-1px);
+  }
+}
+
+@keyframes lively-foot-tap-fast {
+
+  0%,
+  100% {
+    transform: rotate(0deg) translateY(0);
+  }
+
+  30% {
+    transform: rotate(-10deg) translateY(-2px);
+  }
+
+  60% {
+    transform: rotate(6deg) translateY(0);
+  }
+}
+
+@keyframes lively-foot-cross {
+
+  0%,
+  100% {
+    transform: rotate(0deg) translateX(0);
+  }
+
+  50% {
+    transform: rotate(0deg) translateX(4px);
+  }
+}
+
+@keyframes lively-foot-pose {
+
+  0%,
+  100% {
+    transform: rotate(0deg) translateY(0);
+  }
+
+  30% {
+    transform: rotate(5deg) translateY(-2px);
+  }
+
+  70% {
+    transform: rotate(-3deg) translateY(-1px);
+  }
+}
+
+@keyframes lively-foot-pace {
+
+  0%,
+  100% {
+    transform: rotate(0deg) translateY(0);
+  }
+
+  25% {
+    transform: rotate(-6deg) translateY(-2px);
+  }
+
+  75% {
+    transform: rotate(6deg) translateY(-2px);
+  }
+}
+
+/* ============================================================
+ * Keyframes: Extended Emotions (35-39)
+ * ============================================================ */
+@keyframes lively-nervous {
+
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+
+  20% {
+    transform: translateX(-1.5px);
+  }
+
+  40% {
+    transform: translateX(1.5px);
+  }
+
+  60% {
+    transform: translateX(-1px);
+  }
+
+  80% {
+    transform: translateX(1px);
+  }
+}
+
+@keyframes lively-leaf-nervous {
+
+  0%,
+  100% {
+    transform: rotate(8deg);
+  }
+
+  25% {
+    transform: rotate(2deg);
+  }
+
+  75% {
+    transform: rotate(14deg);
+  }
+}
+
+@keyframes lively-foot-nervous {
+
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-2px);
+  }
+}
+
+@keyframes lively-nervous-eyes {
+
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+
+  25% {
+    transform: translateX(-1.5px);
+  }
+
+  75% {
+    transform: translateX(1.5px);
+  }
+}
+
+@keyframes lively-eureka {
+  0% {
+    transform: scale(1);
+  }
+
+  20% {
+    transform: scale(1.12, 0.9);
+  }
+
+  40% {
+    transform: scale(0.95, 1.08);
+  }
+
+  60% {
+    transform: scale(1.04, 0.97);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes lively-leaf-eureka {
+  0% {
+    transform: rotate(8deg) scale(1);
+  }
+
+  50% {
+    transform: rotate(35deg) scale(1.15);
+  }
+
+  100% {
+    transform: rotate(10deg) scale(1);
+  }
+}
+
+@keyframes lively-waiting {
+
+  0%,
+  100% {
+    transform: translateX(0) rotate(0);
+  }
+
+  30% {
+    transform: translateX(-2px) rotate(-1deg);
+  }
+
+  60% {
+    transform: translateX(2px) rotate(1deg);
+  }
+}
+
+@keyframes lively-leaf-waiting {
+
+  0%,
+  100% {
+    transform: rotate(8deg);
+  }
+
+  50% {
+    transform: rotate(14deg);
+  }
+}
+/* ============================================================
+ * lively-mascot · Sprout Character Styles
+ *
+ * The leafy sprout character: round body with a small plant
+ * growing from the top of its head.
+ * ============================================================ */
+
+/* --- Body shape override --- */
+.lively-mascot--sprout .lively-body {
+  border-radius: 50% 50% 46% 49%;
+}
+
+/* --- Leaf: sits on top of the head --- */
+.lively__leaf {
+  position: absolute;
+  top: -34cqw;
+  left: 50%;
+  width: 37cqw;
+  height: 40cqw;
+  margin-left: -18.5cqw;
+  transform-origin: 50% 100%;
+  animation: lively-leaf-sway 2.6s ease-in-out infinite;
+}
+
+.lively__leaf svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  filter: drop-shadow(1.2cqw 1.4cqw 0 color-mix(in srgb, var(--lively-outline) 55%, transparent));
+}
+
+.lively-sprout__stem {
+  fill: none;
+  stroke: var(--lively-outline);
+  stroke-width: 3;
+  stroke-linecap: round;
+}
+
+.lively-sprout__leaf {
+  fill: var(--lively-body);
+  stroke: var(--lively-outline);
+  stroke-width: 2;
+  stroke-linejoin: round;
+}
+
+.lively-sprout__vein {
+  fill: none;
+  stroke: var(--lively-outline);
+  stroke-width: 1.6;
+  stroke-linecap: round;
+}
+
+.lively-sprout__shine {
+  fill: none;
+  stroke: #fff;
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  opacity: 0.9;
+}
+
+/* Happy click: leaf spins */
+.lively-mascot.is-happy .lively__leaf {
+  animation: lively-leaf-spin 0.7s cubic-bezier(.3, 1.4, .4, 1);
+}
+
+/* --- Foot positioning for sprout --- */
+.lively-mascot--sprout .lively__foot--l { left: 18cqw; }
+.lively-mascot--sprout .lively__foot--r { left: 60cqw; animation-delay: 0.8s; }
+/* ============================================================
+ * lively-mascot · Cat Character Styles
+ *
+ * An original charcoal cat with pointed ears, a curled tail, and floating whiskers.
+ * ============================================================ */
+
+/* --- Body shape: a compact feline head with a slightly tapered jaw --- */
+.lively-mascot--cat .lively-body {
+  border-radius: 48% 48% 43% 43% / 45% 45% 55% 55%;
+}
+
+/* A charcoal default gives the cat its own identity; inline themes still win. */
+.lively-mascot--cat {
+  --lively-body: #3d4852;
+  --lively-outline: #131a20;
+  --lively-accent: #eeb3c1;
+}
+
+/* --- Ears: pointed cat ears on top (nested inside body so they
+       follow body bounce / squash / boot / wake animations) --- */
+.lively__ears {
+  position: absolute;
+  top: -17cqw;
+  left: 50%;
+  width: 66cqw;
+  height: 29cqw;
+  margin-left: -33cqw;
+  z-index: 3;
+  transform-origin: 50% 92%;
+}
+
+/* Each ear splays slightly outward for a more natural arc */
+.lively__ear-left { transform-box: fill-box; transform-origin: 50% 100%; transform: rotate(-7deg); }
+.lively__ear-right { transform-box: fill-box; transform-origin: 50% 100%; transform: rotate(7deg); }
+
+.lively__ears svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+.lively__ear {
+  fill: var(--lively-body);
+  stroke: var(--lively-outline);
+  stroke-width: 2.4;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+}
+
+.lively__ear--inner {
+  fill: var(--lively-accent);
+  stroke: none;
+  opacity: 0.85;
+}
+
+.lively-cat__muzzle {
+  fill: #eee5d9;
+  opacity: .82;
+}
+
+.lively-cat__whiskers {
+  position: absolute;
+  inset: 0;
+  z-index: 5;
+  pointer-events: none;
+  overflow: visible;
+  animation: lively-cat-whiskers-float 3.8s ease-in-out infinite;
+}
+
+.lively-cat__whiskers svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  filter: drop-shadow(0 1px 1px rgba(0,0,0,.18));
+}
+
+.lively-cat__whisker {
+  fill: none;
+  stroke: color-mix(in srgb, white 82%, var(--lively-outline));
+  stroke-width: 1.15;
+  stroke-linecap: round;
+  opacity: .9;
+  transform-box: fill-box;
+  transform-origin: center;
+}
+
+.lively-cat__whisker--l1,
+.lively-cat__whisker--r3 { animation: lively-cat-whisker-drift-a 3.2s ease-in-out infinite; }
+.lively-cat__whisker--l2,
+.lively-cat__whisker--r2 { animation: lively-cat-whisker-drift-b 3.8s ease-in-out .25s infinite; }
+.lively-cat__whisker--l3,
+.lively-cat__whisker--r1 { animation: lively-cat-whisker-drift-c 3.5s ease-in-out .5s infinite; }
+
+/* Whiskers are a face accessory, so emotions can pose them independently. */
+.lively-mascot.is-emotion-00 .lively-cat__whiskers,
+.lively-mascot.is-emotion-12 .lively-cat__whiskers {
+  animation: lively-cat-whiskers-droop 2.5s ease-in-out infinite;
+}
+.lively-mascot.is-emotion-10 .lively-cat__whiskers,
+.lively-mascot.is-emotion-11 .lively-cat__whiskers {
+  animation: lively-cat-whiskers-alert .5s ease-in-out infinite alternate;
+}
+.lively-mascot.is-emotion-13 .lively-cat__whiskers {
+  animation: lively-cat-whiskers-puff .34s ease-in-out infinite alternate;
+}
+.lively-mascot.is-emotion-14 .lively-cat__whiskers,
+.lively-mascot.is-emotion-37 .lively-cat__whiskers {
+  animation: lively-cat-whiskers-twitch .42s ease-in-out infinite;
+}
+
+/* Happy click: ears wiggle */
+.lively-mascot.is-happy .lively__ears {
+  animation: lively-cat-ear-wiggle 0.5s ease-in-out;
+}
+
+/* --- Tail: curved behind the body --- */
+.lively__tail {
+  position: absolute;
+  bottom: 3cqw;
+  right: -14cqw;
+  width: 37cqw;
+  height: 42cqw;
+  transform-origin: 10% 100%;
+  animation: lively-cat-tail-sway 2.4s ease-in-out infinite;
+  z-index: -1;
+}
+
+.lively__tail svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+/* The outer wrapper handles the broad wag; this inner motion lets the
+   curved portion breathe and gives the tip a gentle vertical response. */
+.lively-cat__tail-motion {
+  transform-box: fill-box;
+  transform-origin: 4% 94%;
+  animation: lively-cat-tail-ripple 2.4s ease-in-out infinite;
+}
+
+.lively-cat__tail-path {
+  fill: none;
+  stroke: var(--lively-body);
+  stroke-width: 6.6;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.lively-cat__tail-outline {
+  fill: none;
+  stroke: var(--lively-outline);
+  stroke-width: 8.2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  opacity: 0.18;
+}
+
+.lively-cat__tail-tip {
+  fill: var(--lively-body);
+  stroke: var(--lively-outline);
+  stroke-width: 2;
+}
+
+.lively-cat__toe-lines {
+  fill: none;
+  stroke: var(--lively-outline);
+  stroke-width: .9;
+  stroke-linecap: round;
+  opacity: .72;
+}
+
+/* Happy click: tail wags fast */
+.lively-mascot.is-happy .lively__tail {
+  animation: lively-cat-tail-wag 0.3s ease-in-out 3;
+}
+
+/* --- Whiskers: lines on the face --- */
+.lively-face__whisker {
+  fill: none;
+  stroke: var(--lively-outline);
+  stroke-width: 1.2;
+  stroke-linecap: round;
+  opacity: 0.5;
+}
+
+/* --- Nose: small triangle --- */
+.lively-face__cat-nose {
+  fill: var(--lively-accent);
+  stroke: var(--lively-outline);
+  stroke-width: 1.2;
+  stroke-linejoin: round;
+}
+
+.lively-face__cat-nose-bridge {
+  fill: none;
+  stroke: var(--lively-outline);
+  stroke-width: 1.1;
+  stroke-linecap: round;
+  opacity: .8;
+}
+
+/* --- Foot positioning for cat --- */
+.lively-mascot--cat .lively__foot--l { left: 20cqw; }
+.lively-mascot--cat .lively__foot--r { left: 58cqw; animation-delay: 0.8s; }
+
+/* Cat paw shape override */
+.lively-mascot--cat .lively-foot__body {
+  rx: 8;
+  ry: 5;
+  fill: var(--lively-body);
+  stroke: var(--lively-outline);
+  stroke-width: 1.3;
+}
+
+.lively-mascot--cat .lively-foot__shine { opacity: .62; }
+
+@keyframes lively-cat-whiskers-float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-1.5px); }
+}
+
+@keyframes lively-cat-whisker-drift-a {
+  0%, 100% { transform: rotate(0deg) translateY(0); }
+  50% { transform: rotate(-2deg) translateY(-1px); }
+}
+
+@keyframes lively-cat-whisker-drift-b {
+  0%, 100% { transform: rotate(0deg) translateY(0); }
+  50% { transform: rotate(1.5deg) translateY(1px); }
+}
+
+@keyframes lively-cat-whisker-drift-c {
+  0%, 100% { transform: rotate(0deg) translateY(0); }
+  50% { transform: rotate(-1deg) translateY(1.5px); }
+}
+
+@keyframes lively-cat-whiskers-droop {
+  0%, 100% { transform: translateY(1px) rotate(0deg); }
+  50% { transform: translateY(3px) rotate(2deg); }
+}
+
+@keyframes lively-cat-whiskers-alert {
+  from { transform: translateY(0) scale(1); }
+  to { transform: translateY(-1px) scale(1.035); }
+}
+
+@keyframes lively-cat-whiskers-puff {
+  from { transform: translateX(0) scale(1); }
+  to { transform: translateX(-1px) scale(1.06, 1.02); }
+}
+
+@keyframes lively-cat-whiskers-twitch {
+  0%, 100% { transform: rotate(0deg); }
+  35% { transform: rotate(-2deg); }
+  70% { transform: rotate(1.5deg); }
+}
+
+/* --- Cat-specific ear emotion animations --- */
+.lively-mascot.is-emotion-11 .lively__ears { animation: lively-cat-ear-perk 0.6s ease-in-out infinite; }
+.lively-mascot.is-emotion-13 .lively__ears { animation: lively-cat-ear-flatten 0.3s ease-in-out infinite; }
+.lively-mascot.is-emotion-37 .lively__ears { animation: lively-cat-ear-nervous 0.4s ease-in-out infinite; }
+.lively-mascot.is-emotion-00 .lively__ears { animation: lively-cat-ear-relax 4s ease-in-out infinite; }
+
+/* --- Cat-specific tail emotion animations --- */
+.lively-mascot.is-emotion-12 .lively__tail { animation: lively-cat-tail-droop 3s ease-in-out infinite; }
+.lively-mascot.is-emotion-13 .lively__tail { animation: lively-cat-tail-puff 0.5s ease-in-out infinite; }
+.lively-mascot.is-emotion-37 .lively__tail { animation: lively-cat-tail-tuck 0.6s ease-in-out infinite; }
+
+/* --- Cat ear keyframes --- */
+@keyframes lively-cat-ear-wiggle {
+  0%, 100% { transform: rotate(0); }
+  25% { transform: rotate(-4deg) translateY(-2px); }
+  75% { transform: rotate(4deg) translateY(-2px); }
+}
+
+@keyframes lively-cat-ear-perk {
+  0%, 100% { transform: translateY(0) scaleY(1); }
+  50% { transform: translateY(-3px) scaleY(1.1); }
+}
+
+@keyframes lively-cat-ear-flatten {
+  0%, 100% { transform: scaleY(1) rotate(0); }
+  50% { transform: scaleY(0.6) rotate(-5deg); }
+}
+
+@keyframes lively-cat-ear-nervous {
+  0%, 100% { transform: rotate(0); }
+  25% { transform: rotate(-3deg); }
+  75% { transform: rotate(3deg); }
+}
+
+@keyframes lively-cat-ear-relax {
+  0%, 100% { transform: rotate(0) scaleY(1); }
+  50% { transform: rotate(2deg) scaleY(0.9); }
+}
+
+/* --- Cat tail keyframes --- */
+@keyframes lively-cat-tail-sway {
+  0%, 100% { transform: rotate(-5deg) translateY(0); }
+  50% { transform: rotate(10deg) translateY(-1px); }
+}
+
+@keyframes lively-cat-tail-ripple {
+  0%, 100% { transform: rotate(0deg) scaleY(1); }
+  42% { transform: rotate(2.2deg) translateY(-1px) scaleY(.965); }
+  68% { transform: rotate(-1.1deg) translateY(.5px) scaleY(1.012); }
+}
+
+@keyframes lively-cat-tail-wag {
+  0%, 100% { transform: rotate(-5deg); }
+  50% { transform: rotate(15deg); }
+}
+
+@keyframes lively-cat-tail-droop {
+  0%, 100% { transform: rotate(0deg) translateY(0); }
+  50% { transform: rotate(-8deg) translateY(3px); }
+}
+
+@keyframes lively-cat-tail-puff {
+  0%, 100% { transform: rotate(-5deg) scaleY(1); }
+  50% { transform: rotate(10deg) scaleY(1.3); }
+}
+
+@keyframes lively-cat-tail-tuck {
+  0%, 100% { transform: rotate(0deg); }
+  50% { transform: rotate(-15deg) translateX(-4px); }
+}
+/* ============================================================
+ * lively-mascot · Robot Character
+ * Square head + antenna (tech / mechanical vibe)
+ * ============================================================ */
+
+/* --- Body (square head) --- */
+.lively-mascot--robot .lively-body {
+  border-radius: 26%;
+  background:
+    linear-gradient(150deg, rgba(255,255,255,0.28), rgba(255,255,255,0) 55%),
+    var(--lively-body);
+  box-shadow: 3px 3px 0 color-mix(in srgb, var(--lively-outline) 70%, transparent), inset 0 0 0 3px rgba(255,255,255,0.10);
+}
+
+/* subtle screen seam so it reads as a robot face panel */
+.lively-mascot--robot .lively-face-wrap {
+  border-radius: 18%;
+  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.07), inset 0 4px 10px rgba(0,0,0,0.07);
+  background: rgba(0,0,0,0.04);
+}
+.lively-mascot--robot .lively-face-wrap svg {
+  filter: drop-shadow(0 0 1px rgba(0,0,0,0.05));
+}
+
+/* Keep robot cheeks warmer and quieter than the cyan antenna accent. */
+.lively-mascot--robot .lively-face__blush {
+  fill: #e7ad76;
+  fill-opacity: .58;
+  filter: drop-shadow(0 1px 1px rgba(0,0,0,.12));
+}
+
+/* --- Antenna (leaf channel, CSS-driven) --- */
+.lively__antenna {
+  position: absolute;
+  top: -22cqw;
+  left: 50%;
+  width: 32cqw;
+  height: 29cqw;
+  margin-left: -16cqw;
+  z-index: 3;
+  transform-origin: 50% 100%;
+  animation: lively-robot-antenna 2.6s ease-in-out infinite;
+}
+.lively__antenna svg { display: block; width: 100%; height: 100%; overflow: visible; }
+.lively-robot__antenna-stalk {
+  fill: none;
+  stroke: var(--lively-outline);
+  stroke-width: 3;
+  stroke-linecap: round;
+}
+.lively-robot__antenna-ball {
+  fill: var(--lively-accent);
+  stroke: var(--lively-outline);
+  stroke-width: 2;
+  animation: lively-robot-blink 1.8s ease-in-out infinite;
+}
+@keyframes lively-robot-antenna {
+  0%, 100% { transform: rotate(-4deg); }
+  50% { transform: rotate(4deg); }
+}
+@keyframes lively-robot-blink {
+  0%, 100% { fill: var(--lively-accent); }
+  50% { fill: #fff; }
+}
+
+/* --- Feet (mechanical blocks) --- */
+.lively__feet--robot .lively__foot svg { overflow: visible; }
+.lively-robot__foot {
+  fill: var(--lively-outline);
+  stroke: var(--lively-outline);
+  stroke-width: 1;
+}
+.lively-robot__foot-line { fill: rgba(255,255,255,0.5); }
+
+/* Antenna emotion reactions (top decoration reacts to state) */
+.lively-mascot.is-emotion-13 .lively__antenna { animation: lively-robot-antenna-fast 0.3s ease-in-out infinite; }
+.lively-mascot.is-emotion-13 .lively-robot__antenna-ball { fill: #ff6b6b; }
+.lively-mascot.is-emotion-31 .lively-robot__antenna-ball { fill: #ff6b6b; }
+.lively-mascot.is-emotion-38 .lively-robot__antenna-ball { fill: #ffd23f; }
+@keyframes lively-robot-antenna-fast {
+  0%, 100% { transform: rotate(-3deg); }
+  50% { transform: rotate(-14deg); }
+}
+/* ============================================================
+ * lively-mascot · Ghost Character
+ * Floating, semi-transparent spirit. No feet — the foot channel
+ * becomes a wavy hem. Simplest character in the set.
+ * ============================================================ */
+
+.lively-mascot--ghost {
+  /* a little extra room for the floating motion + hem */
+  overflow: visible;
+}
+
+/* --- Body (soft transparent blob) ---
+   Domed top with straight-ish sides so the body flows into the wavy hem
+   below — a classic ghost silhouette rather than a ball with hanging legs. */
+.lively-mascot--ghost .lively-body {
+  border-radius: 50% 50% 0 0 / 62% 62% 0 0;
+  background: color-mix(in srgb, var(--lively-body) 72%, white);
+  border-color: var(--lively-outline);
+  border-bottom-width: 0;
+  box-shadow: 0 8px 18px rgba(0,0,0,0.12);
+  /* One shallow three-lobed silhouette in both outline states. */
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 0H100V94C88.9 100 77.8 100 66.7 94C55.6 100 44.4 100 33.3 94C22.2 100 11.1 100 0 94Z'/%3E%3C/svg%3E");
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: 100% 100%;
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 0H100V94C88.9 100 77.8 100 66.7 94C55.6 100 44.4 100 33.3 94C22.2 100 11.1 100 0 94Z'/%3E%3C/svg%3E");
+  mask-repeat: no-repeat;
+  mask-size: 100% 100%;
+  /* float instead of the default sway */
+  animation: lively-ghost-float 3.4s ease-in-out infinite;
+}
+.lively-mascot--ghost.is-happy .lively-body {
+  animation: lively-ghost-float 3.4s ease-in-out infinite, lively-squish 0.6s cubic-bezier(.3,1.6,.4,1);
+}
+
+@keyframes lively-ghost-float {
+  0%, 100% { transform: translateY(0) rotate(0); }
+  50% { transform: translateY(-7px) rotate(-2deg); }
+}
+
+/* no hard hop for a ghost */
+.lively-mascot--ghost.is-hopping .lively-mascot__rig { animation: none; }
+
+/* The SVG only supplies the optional bottom ink. The body itself owns the
+   filled wavy silhouette, so there is never a second colour layer to join. */
+.lively__ghost-hem {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 6cqw;
+  line-height: 0;
+  z-index: 1;
+  pointer-events: none;
+}
+.lively__ghost-hem svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+.lively-ghost__hem-stroke {
+  fill: none;
+  stroke: var(--lively-outline);
+  stroke-width: 2.4;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+  vector-effect: non-scaling-stroke;
+}
+
+.lively-mascot--ghost.lively-mascot--outline-hidden .lively__ghost-hem {
+  display: none;
+}
+
+/* The shared rectangular inner rim cannot follow the custom lower contour. */
+.lively-mascot--ghost .lively-body::after {
+  display: none;
+}
+/* ============================================================
+ * lively-mascot · Jelly Character
+ * Pure jelly blob: no leaf, no feet. Q-bouncy squash-stretch.
+ * ============================================================ */
+
+.lively-mascot--jelly {
+  overflow: visible;
+}
+
+/* --- Body (translucent jelly) --- */
+.lively-mascot--jelly .lively-body {
+  border-radius: 46% 46% 48% 48% / 52% 52% 50% 50%;
+  background:
+    radial-gradient(ellipse at 38% 30%, rgba(255,255,255,0.55), rgba(255,255,255,0) 45%),
+    color-mix(in srgb, var(--lively-body) 68%, white);
+  border-color: var(--lively-outline);
+  box-shadow: 0 8px 16px rgba(0,0,0,0.10), inset 0 -8px 14px rgba(0,0,0,0.06);
+  /* jiggly idle squash */
+  animation: lively-jelly-idle 2.8s ease-in-out infinite;
+}
+.lively-mascot--jelly.is-happy .lively-body {
+  animation: lively-jelly-idle 2.8s ease-in-out infinite, lively-squish 0.6s cubic-bezier(.3,1.6,.4,1);
+}
+
+@keyframes lively-jelly-idle {
+  0%, 100% { transform: scale(1, 1); border-radius: 46% 46% 48% 48% / 52% 52% 50% 50%; }
+  25% { transform: scale(1.06, 0.94); border-radius: 44% 44% 50% 50% / 50% 50% 52% 52%; }
+  50% { transform: scale(0.95, 1.06); border-radius: 50% 50% 44% 44% / 54% 54% 46% 46%; }
+  75% { transform: scale(1.03, 0.97); border-radius: 44% 44% 50% 50% / 50% 50% 52% 52%; }
+}
+
+/* jelly never hops (no feet) */
+.lively-mascot--jelly.is-hopping .lively-mascot__rig { animation: none; }
+
+/* a couple of emotion-driven jelly reactions on top of face changes */
+.lively-mascot--jelly.is-emotion-10 .lively-body,
+.lively-mascot--jelly.is-emotion-30 .lively-body,
+.lively-mascot--jelly.is-emotion-38 .lively-body {
+  animation: lively-jelly-bounce 0.7s cubic-bezier(.3,1.5,.5,1);
+}
+.lively-mascot--jelly.is-emotion-12 .lively-body,
+.lively-mascot--jelly.is-emotion-35 .lively-body {
+  animation: lively-jelly-sad 3s ease-in-out infinite;
+}
+@keyframes lively-jelly-bounce {
+  0% { transform: scale(1,1); }
+  30% { transform: translateY(-10px) scale(1.08, 0.9); }
+  60% { transform: translateY(0) scale(0.94, 1.08); }
+  100% { transform: scale(1,1); }
+}
+@keyframes lively-jelly-sad {
+  0%, 100% { transform: scale(1, 1) translateY(2px); }
+  50% { transform: scale(1.04, 0.96) translateY(4px); }
+}