/* The figure UI kit's shared layer. Both the iframe figures and the article
   page load it, so it holds only what they share: the eases, the agent
   cursor's shadow, the thinking shimmer, the tap rings and the kit's color,
   line and shadow tokens. It declares no font and no window chrome, so it
   never restyles the page. The window
   chrome is ui-kit.css, which only the iframe figures load. AGE-31.
   build/kit_drift.mjs fails when one of these values appears outside the kit. */

:root{
  /* Ink, lines, surfaces and the card shadow, from the clip. AGE-28. */
  --ink:#002142;--ink-62:rgba(0,33,66,.62);--ink-38:rgba(0,33,66,.38);
  --line:#e5e5e5;--box:#e2e2e2;
  --panel:#fafafa;--row-open:#ededed;--control-on:#f1f6fb;
  --shadow:0 24px 60px rgba(0,33,66,.06),0 2px 6px rgba(0,33,66,.03);
  /* The cast: Little Plains' illustration colors. Claude is the sun, Codex the
     umbrella, the Designer the wave and the Marketer the dune. */
  --sun:#f0b429;--wave:#3593ee;--dune:#479c58;--umbrella:#d0392f;
  /* The guided demo's prompt and pills (SonataGuidedDemoV1.module.css): the
     LP blue accent, the control outline, a lit pill's ground and the user
     message bubble. AGE-28. */
  --accent:#0398fa;--control-line:#e8f0f6;--control-lit:#fbfdff;--bubble:#f3f8fc;
  --ease-flow:cubic-bezier(.65,0,.35,1);
  --ease-fade:cubic-bezier(.5,0,.5,1);
  --ease-lift:cubic-bezier(.16,1,.3,1);
  /* A hover, open or lit state change: one duration on the fade ease (AGE-44). */
  --dur-state:.2s;
  /* A press: the cursor and the send button give to .86 over .11s. FigureKit.PRESS
     holds it 180ms, so it lands before the release. AGE-42. */
  --press:.86;
  --press-in:.11s;
}

/* The agent cursor's shadow and its press. It presses from its tip. FigureKit.cursor() adds the class. */
.kit-cursor svg{display:block;transform-origin:3px 3px;filter:drop-shadow(0 1px 1.5px rgba(0,20,40,.28));transition:scale var(--press-in) ease}
.kit-cursor.is-pressing svg{scale:var(--press)}
/* The prompt's send button gives the same press. Only the iframe figures have one. */
.prompt-send{transition:background .2s,scale var(--press-in)}
.prompt.is-sent .prompt-send{scale:var(--press)}

/* The agent's thinking state. It is the guided demo's (SonataGuidedDemoV1.module.css
   .thinking): muted text with a shimmer, 1.8s a pass. Every figure that shows an
   agent at work uses this class. AGE-27 and AGE-28, 2026-09-29. */
.agent-thinking{position:absolute;z-index:7;font:400 15px/1.5 var(--ui);color:var(--ink-62);background:linear-gradient(110deg,var(--ink-62) 30%,var(--ink) 45%,var(--ink-62) 60%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:agent-thinking 1.8s linear infinite;opacity:0;pointer-events:none;transition:opacity .3s var(--ease-fade)}
.agent-thinking.is-on{opacity:1}
@keyframes agent-thinking{from{background-position:180% 0}to{background-position:-80% 0}}

/* The tap ring an agent cursor leaves: in the iframe figures, and where the follow figure's Designer clicks. */
.mp-ring{position:absolute;left:0;top:0;z-index:5;width:0;height:0;pointer-events:none}
.mp-ring::after{content:"";position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--mp-color);animation:mp-ring .6s ease-out forwards}
@keyframes mp-ring{from{opacity:.9;scale:.3}to{opacity:0;scale:1.6}}
@media (prefers-reduced-motion:reduce){.mp-ring{display:none}}

/* A piece lands on its part of the page: a ring in the agent's color swells
   out from the part's edge and fades. The figure sets --land to the agent's
   color. Only the apply figure lands pieces on the page. AGE-28. */
.is-landing{animation:land .7s ease-out}
@keyframes land{0%{box-shadow:0 0 0 2px var(--land,var(--sun))}100%{box-shadow:0 0 0 10px transparent}}
@media (prefers-reduced-motion:reduce){.is-landing{animation:none}}

/* The soft tap ring of the guided demo's cue. Each tap sends out a ring that
   eases out long after the press, so three taps overlap into one flowing
   radar, like the picture figure's ping. Leo asked on 2026-09-29. */
.demo-ring{position:absolute;left:0;top:0;z-index:5;width:0;height:0;pointer-events:none}
.demo-ring::after{content:"";position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--sun);background:color-mix(in srgb,var(--sun) 12%,transparent);animation:demo-ring 1.1s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes demo-ring{from{opacity:.85;scale:.4}to{opacity:0;scale:2.2}}

/* A piece in flight: a card with the kit's outline, 8px corners and the kit
   --shadow, like the file tree's carried .p-art in ui-kit.css. It drops into
   its place. Every carried piece takes this lift. AGE-40. */
.ghost{position:absolute;left:0;top:0;z-index:6;pointer-events:none;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line),var(--shadow);transition:opacity .3s var(--ease-fade),scale .3s}
.ghost.is-dropping{opacity:0;scale:.4}