@charset "UTF-8";
/* ─── Eased gradients ───────────────────────────────────────────────────
   sRGB interpolation muddies the middle of a 2-stop gradient (purple→cyan
   passes through gray). Fix with multi-stop hue waypoints. Wherever a
   gradient or glow fade is needed, prefer one of these. */
:root {
  /* 8-stop hue-rotated aurora — never goes through gray */
  --grad-aurora:
    linear-gradient(
      96deg,
      #146DCD  0%,
      #7DA6F5 22%,
      #67A4F3 38%,
      #6DBBF8 50%,
      #77C9FF 62%,
      #82D5EE 75%,
      #76E0B6 90%,
      #7BE3B0 100%
    );
  /* Subtle navy plane → just darker at bottom, hues kept */
  --grad-navy-plane:
    linear-gradient(
      180deg,
      #061B36 0%,
      #051730 35%,
      #03132A 70%,
      #02101F 100%
    );
  /* 5-stop ease-out alpha (smoother glow falloff than 2-stop) */
  --grad-glow-cyan:
    radial-gradient(closest-side,
      rgba(118,224,182,0.55) 0%,
      rgba(118,224,182,0.32) 28%,
      rgba(118,224,182,0.14) 55%,
      rgba(118,224,182,0.04) 80%,
      rgba(118,224,182,0) 100%);
  --grad-glow-purple:
    radial-gradient(closest-side,
      rgba(20,109,205,0.55) 0%,
      rgba(20,109,205,0.32) 28%,
      rgba(20,109,205,0.14) 55%,
      rgba(20,109,205,0.04) 80%,
      rgba(20,109,205,0) 100%); }

/* ─── Surface frame — replaces .media-frame for custom illustrations ─── */
.surface {
  position: relative;
  border-radius: 18px;
  background: linear-gradient(180deg, #07203E 0%, #061830 100%);
  overflow: hidden;
  isolation: isolate; }

.surface::before {
  /* aurora border */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 0px;
  background: var(--grad-aurora);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 5; }

.surface::after {
  /* inner top-light highlight */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 40%);
  pointer-events: none;
  z-index: 4; }

/* Outer frame — gradient border with a transparent gap to inner .surface.
   Mirrors main landing hero pattern (p-2 + border on wrapper). */
.surface-frame {
  position: relative;
  padding: 6px;
  border-radius: 24px;
  isolation: isolate; }

.surface-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: var(--grad-aurora);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 5; }

/* Frame for tighter (smaller) custom illos used in cards */
.surface-mini {
  position: relative;
  border-radius: 12px;
  background: linear-gradient(180deg, #082443 0%, #051A33 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  isolation: isolate; }

/* Soft fade mask — drop-on-anywhere */
.fade-mask {
  -webkit-mask: linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask: linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%); }

/* Animations specific to surfaces */
@keyframes slow-bob {
  0%, 100% {
    transform: translateY(0); }
  50% {
    transform: translateY(-6px); } }

@keyframes packet {
  0% {
    offset-distance: 0%;
    opacity: 0; }
  10% {
    opacity: 1; }
  90% {
    opacity: 1; }
  100% {
    offset-distance: 100%;
    opacity: 0; } }

@keyframes bar-rise {
  from {
    transform: scaleY(0); }
  to {
    transform: scaleY(1); } }

@keyframes type-in {
  from {
    width: 0; }
  to {
    width: 100%; } }

@keyframes glow-pulse {
  0%, 100% {
    opacity: 0.7; }
  50% {
    opacity: 1; } }

@keyframes ripple {
  0% {
    transform: scale(0.4);
    opacity: 0.7; }
  100% {
    transform: scale(1.8);
    opacity: 0; } }

/* ─── Timeline demo animations ───────────────────────────────────────
   Each illustration has a master cycle. Child elements use named
   keyframes whose internal 0-100% maps to that cycle, so multiple
   elements appear in choreographed sequence then reset together.
   All start hidden, end hidden — the loop feels like a re-playing demo
   rather than a constant ambient drift. */
/* HERO Console — 17s cycle.
   Reasoning steps in pane 2 appear one-by-one. Insight lands at 66% (11.2s),
   then a ~5s pause-to-read before fade-out at 95% (16.2s). The shimmer line
   is ambient and ignores this timeline. */
@keyframes hero-step-1 {
  0%, 6% {
    opacity: 0;
    transform: translateY(8px); }
  10%, 95% {
    opacity: 1;
    transform: translateY(0); }
  100% {
    opacity: 0; } }

@keyframes hero-step-2 {
  0%, 14% {
    opacity: 0;
    transform: translateY(8px); }
  18%, 95% {
    opacity: 1;
    transform: translateY(0); }
  100% {
    opacity: 0; } }

@keyframes hero-step-3 {
  0%, 22% {
    opacity: 0;
    transform: translateY(8px); }
  26%, 95% {
    opacity: 1;
    transform: translateY(0); }
  100% {
    opacity: 0; } }

@keyframes hero-step-4 {
  0%, 30% {
    opacity: 0;
    transform: translateY(8px); }
  34%, 95% {
    opacity: 1;
    transform: translateY(0); }
  100% {
    opacity: 0; } }

@keyframes hero-answer {
  0%, 42% {
    opacity: 0;
    transform: translateY(8px); }
  46%, 95% {
    opacity: 1;
    transform: translateY(0); }
  100% {
    opacity: 0; } }

@keyframes hero-insight {
  0%, 60% {
    opacity: 0;
    transform: translateY(8px); }
  66%, 95% {
    opacity: 1;
    transform: translateY(0); }
  100% {
    opacity: 0; } }

.tl-hero-1 {
  animation: hero-step-1   17s ease-out infinite both; }

.tl-hero-2 {
  animation: hero-step-2   17s ease-out infinite both; }

.tl-hero-3 {
  animation: hero-step-3   17s ease-out infinite both; }

.tl-hero-4 {
  animation: hero-step-4   17s ease-out infinite both; }

.tl-hero-a {
  animation: hero-answer   17s ease-out infinite both; }

.tl-hero-i {
  animation: hero-insight  17s ease-out infinite both; }

/* COMPOSABLE — 9s cycle, 8-stage build-up.
   For each metric layer the text fades in FIRST, then the box scales in
   to wrap it, then an arrow linedraws upward toward the next layer.
   Stages (% of cycle):
     04-08  WeeklyRevenue text         (cm-text-1)
     10-14  WeeklyRevenue box wraps    (cm-box-1)
     16-22  aqua arrow linedraws       (cm-arrow-1)
     24-28  WoWChange text             (cm-text-2)
     30-34  WoWChange box wraps        (cm-box-2)
     36-42  orange arrow linedraws     (cm-arrow-2)
     44-48  VolatilityIndex text       (cm-text-3)
     50-54  VolatilityIndex box wraps  (cm-box-3)
     54-95  hold visible
     95-100 fade out / un-draw          */
@keyframes cm-text-1 {
  0%, 2% {
    opacity: 0;
    transform: translateY(6px); }
  8%, 95% {
    opacity: 1;
    transform: translateY(0); }
  100% {
    opacity: 0;
    transform: translateY(-4px); } }

/* Option D — bg + border scale + fade in together as one unit.
   Everything fades out together at 95-100%. */
@keyframes cm-box-1 {
  0%, 8% {
    opacity: 0;
    transform: scale(0.88); }
  14%, 95% {
    opacity: 1;
    transform: scale(1); }
  100% {
    opacity: 0;
    transform: scale(0.97); } }

@keyframes cm-text-2 {
  0%, 22% {
    opacity: 0;
    transform: translateY(6px); }
  28%, 95% {
    opacity: 1;
    transform: translateY(0); }
  100% {
    opacity: 0;
    transform: translateY(-4px); } }

@keyframes cm-box-2 {
  0%, 28% {
    opacity: 0;
    transform: scale(0.9); }
  34%, 95% {
    opacity: 1;
    transform: scale(1); }
  100% {
    opacity: 0;
    transform: scale(0.97); } }

@keyframes cm-text-3 {
  0%, 42% {
    opacity: 0;
    transform: translateY(6px); }
  48%, 95% {
    opacity: 1;
    transform: translateY(0); }
  100% {
    opacity: 0;
    transform: translateY(-4px); } }

@keyframes cm-box-3 {
  0%, 48% {
    opacity: 0;
    transform: scale(0.92); }
  54%, 95% {
    opacity: 1;
    transform: scale(1); }
  100% {
    opacity: 0;
    transform: scale(0.97); } }

@keyframes cm-arrow-1 {
  0%, 16% {
    stroke-dashoffset: 28;
    opacity: 1; }
  22%, 95% {
    stroke-dashoffset: 0;
    opacity: 1; }
  100% {
    stroke-dashoffset: 0;
    opacity: 0; } }

@keyframes cm-arrow-2 {
  0%, 36% {
    stroke-dashoffset: 28;
    opacity: 1; }
  42%, 95% {
    stroke-dashoffset: 0;
    opacity: 1; }
  100% {
    stroke-dashoffset: 0;
    opacity: 0; } }

.tl-cm-text-1 {
  animation: cm-text-1 9s cubic-bezier(0.2, 0.7, 0.3, 1) infinite both; }

.tl-cm-box-1 {
  animation: cm-box-1 9s cubic-bezier(0.2, 0.7, 0.3, 1) infinite both; }

.tl-cm-text-2 {
  animation: cm-text-2 9s cubic-bezier(0.2, 0.7, 0.3, 1) infinite both; }

.tl-cm-box-2 {
  animation: cm-box-2 9s cubic-bezier(0.2, 0.7, 0.3, 1) infinite both; }

.tl-cm-text-3 {
  animation: cm-text-3 9s cubic-bezier(0.2, 0.7, 0.3, 1) infinite both; }

.tl-cm-box-3 {
  animation: cm-box-3 9s cubic-bezier(0.2, 0.7, 0.3, 1) infinite both; }

.tl-cm-arrow-1 {
  stroke-dasharray: 28;
  animation: cm-arrow-1 9s linear infinite both; }

.tl-cm-arrow-2 {
  stroke-dasharray: 28;
  animation: cm-arrow-2 9s linear infinite both; }

/* REASONING — 14s cycle.
   Steps cascade in, hold for a beat to be readable, then fade out
   together at the end of the cycle (no per-element blink on reset). */
@keyframes rsn-1 {
  0%, 4% {
    opacity: 0;
    transform: translateX(-8px); }
  9%, 92% {
    opacity: 1;
    transform: translateX(0); }
  98%, 100% {
    opacity: 0; } }

@keyframes rsn-2 {
  0%, 12% {
    opacity: 0;
    transform: translateX(-8px); }
  17%, 92% {
    opacity: 1;
    transform: translateX(0); }
  98%, 100% {
    opacity: 0; } }

@keyframes rsn-3 {
  0%, 20% {
    opacity: 0;
    transform: translateX(-8px); }
  25%, 92% {
    opacity: 1;
    transform: translateX(0); }
  98%, 100% {
    opacity: 0; } }

@keyframes rsn-4 {
  0%, 28% {
    opacity: 0;
    transform: translateX(-8px); }
  33%, 92% {
    opacity: 1;
    transform: translateX(0); }
  98%, 100% {
    opacity: 0; } }

@keyframes rsn-confirm {
  0%, 42% {
    opacity: 0;
    transform: scale(0.96); }
  47%, 92% {
    opacity: 1;
    transform: scale(1); }
  98%, 100% {
    opacity: 0; } }

.tl-rsn-1 {
  animation: rsn-1 14s ease-out infinite both; }

.tl-rsn-2 {
  animation: rsn-2 14s ease-out infinite both; }

.tl-rsn-3 {
  animation: rsn-3 14s ease-out infinite both; }

.tl-rsn-4 {
  animation: rsn-4 14s ease-out infinite both; }

.tl-rsn-c {
  animation: rsn-confirm 14s ease-out infinite both; }

/* AQL — 20s cycle.
   Reveal phase compressed to ~7s (lines then annotations), then ~11s hold
   so the audience has time to read everything, then ~2s fade out + reset. */
@keyframes aql-l1 {
  0%, 1% {
    opacity: 0;
    transform: translateX(-6px); }
  3%, 90% {
    opacity: 1;
    transform: translateX(0); }
  100% {
    opacity: 0; } }

@keyframes aql-l2 {
  0%, 4% {
    opacity: 0;
    transform: translateX(-6px); }
  6%, 90% {
    opacity: 1;
    transform: translateX(0); }
  100% {
    opacity: 0; } }

@keyframes aql-l3 {
  0%, 7% {
    opacity: 0;
    transform: translateX(-6px); }
  9%, 90% {
    opacity: 1;
    transform: translateX(0); }
  100% {
    opacity: 0; } }

@keyframes aql-l4 {
  0%, 10% {
    opacity: 0;
    transform: translateX(-6px); }
  12%, 90% {
    opacity: 1;
    transform: translateX(0); }
  100% {
    opacity: 0; } }

@keyframes aql-l5 {
  0%, 13% {
    opacity: 0;
    transform: translateX(-6px); }
  15%, 90% {
    opacity: 1;
    transform: translateX(0); }
  100% {
    opacity: 0; } }

@keyframes aql-l6 {
  0%, 16% {
    opacity: 0;
    transform: translateX(-6px); }
  18%, 90% {
    opacity: 1;
    transform: translateX(0); }
  100% {
    opacity: 0; } }

@keyframes aql-l7 {
  0%, 19% {
    opacity: 0;
    transform: translateX(-6px); }
  21%, 90% {
    opacity: 1;
    transform: translateX(0); }
  100% {
    opacity: 0; } }

@keyframes aql-l8 {
  0%, 22% {
    opacity: 0;
    transform: translateX(-6px); }
  24%, 90% {
    opacity: 1;
    transform: translateX(0); }
  100% {
    opacity: 0; } }

@keyframes aql-l9 {
  0%, 25% {
    opacity: 0;
    transform: translateX(-6px); }
  27%, 90% {
    opacity: 1;
    transform: translateX(0); }
  100% {
    opacity: 0; } }

@keyframes aql-annot1 {
  0%, 28% {
    opacity: 0;
    transform: translateY(-4px); }
  31%, 90% {
    opacity: 1;
    transform: translateY(0); }
  100% {
    opacity: 0; } }

@keyframes aql-annot2 {
  0%, 31% {
    opacity: 0;
    transform: translateY(-4px); }
  34%, 90% {
    opacity: 1;
    transform: translateY(0); }
  100% {
    opacity: 0; } }

.tl-aql-l1 {
  animation: aql-l1 20s ease-out infinite both; }

.tl-aql-l2 {
  animation: aql-l2 20s ease-out infinite both; }

.tl-aql-l3 {
  animation: aql-l3 20s ease-out infinite both; }

.tl-aql-l4 {
  animation: aql-l4 20s ease-out infinite both; }

.tl-aql-l5 {
  animation: aql-l5 20s ease-out infinite both; }

.tl-aql-l6 {
  animation: aql-l6 20s ease-out infinite both; }

.tl-aql-l7 {
  animation: aql-l7 20s ease-out infinite both; }

.tl-aql-l8 {
  animation: aql-l8 20s ease-out infinite both; }

.tl-aql-l9 {
  animation: aql-l9 20s ease-out infinite both; }

.tl-aql-a1 {
  animation: aql-annot1 20s ease-out infinite both; }

.tl-aql-a2 {
  animation: aql-annot2 20s ease-out infinite both; }

/* CONVERSATIONAL — 10s cycle.
   Chat turns appear one after the other. The carried "Paid Social" filter
   chip on turn 4 pulses briefly to show context preserved from English. */
@keyframes ct-1 {
  0%, 4% {
    opacity: 0;
    transform: translateY(8px); }
  10%, 95% {
    opacity: 1;
    transform: translateY(0); }
  100% {
    opacity: 0; } }

@keyframes ct-2 {
  0%, 16% {
    opacity: 0;
    transform: translateY(8px); }
  22%, 95% {
    opacity: 1;
    transform: translateY(0); }
  100% {
    opacity: 0; } }

@keyframes ct-3 {
  0%, 30% {
    opacity: 0;
    transform: translateY(8px); }
  36%, 95% {
    opacity: 1;
    transform: translateY(0); }
  100% {
    opacity: 0; } }

@keyframes ct-4 {
  0%, 44% {
    opacity: 0;
    transform: translateY(8px); }
  50%, 95% {
    opacity: 1;
    transform: translateY(0); }
  100% {
    opacity: 0; } }

@keyframes ct-5 {
  0%, 60% {
    opacity: 0;
    transform: translateY(8px); }
  66%, 95% {
    opacity: 1;
    transform: translateY(0); }
  100% {
    opacity: 0; } }

@keyframes ct-carry {
  0%, 52% {
    box-shadow: 0 0 0 0 rgba(118, 224, 182, 0); }
  58%, 72% {
    box-shadow: 0 0 0 3px rgba(118, 224, 182, 0.35), 0 0 14px rgba(118, 224, 182, 0.55); }
  84%, 100% {
    box-shadow: 0 0 0 0 rgba(118, 224, 182, 0); } }

.tl-ct-1 {
  animation: ct-1 10s ease-out infinite both; }

.tl-ct-2 {
  animation: ct-2 10s ease-out infinite both; }

.tl-ct-3 {
  animation: ct-3 10s ease-out infinite both; }

.tl-ct-4 {
  animation: ct-4 10s ease-out infinite both; }

.tl-ct-5 {
  animation: ct-5 10s ease-out infinite both; }

.tl-ct-carry {
  animation: ct-carry 10s ease-out infinite both; }

/* DIAGNOSTIC — 10s cycle.
   Question → branch lines fan in → 2 RULED OUT first → MATCH last → root cause */
@keyframes dg-q {
  0%, 4% {
    opacity: 0;
    transform: translateY(-6px); }
  9%, 95% {
    opacity: 1;
    transform: translateY(0); }
  100% {
    opacity: 0; } }

@keyframes dg-line-1 {
  0%, 11% {
    opacity: 0; }
  15%, 95% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes dg-line-3 {
  0%, 17% {
    opacity: 0; }
  21%, 95% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes dg-line-2 {
  0%, 24% {
    opacity: 0; }
  28%, 95% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes dg-h1 {
  0%, 14% {
    opacity: 0;
    transform: translateY(8px); }
  20%, 95% {
    opacity: 1;
    transform: translateY(0); }
  100% {
    opacity: 0; } }

@keyframes dg-h3 {
  0%, 20% {
    opacity: 0;
    transform: translateY(8px); }
  26%, 95% {
    opacity: 1;
    transform: translateY(0); }
  100% {
    opacity: 0; } }

@keyframes dg-h2 {
  0%, 27% {
    opacity: 0;
    transform: translateY(8px); }
  33%, 95% {
    opacity: 1;
    transform: translateY(0); }
  100% {
    opacity: 0; } }

/* Root cause fades in the moment MATCH is fully visible (33%),
   then holds 33% → 93% ≈ 10.8s of read time at 18s cycle. */
@keyframes dg-cause {
  0%, 33% {
    opacity: 0;
    transform: scale(0.95); }
  38%, 93% {
    opacity: 1;
    transform: scale(1); }
  100% {
    opacity: 0; } }

.tl-dg-q {
  animation: dg-q       18s ease-out infinite both; }

.tl-dg-line-1 {
  animation: dg-line-1  18s ease-out infinite both; }

.tl-dg-line-2 {
  animation: dg-line-2  18s ease-out infinite both; }

.tl-dg-line-3 {
  animation: dg-line-3  18s ease-out infinite both; }

.tl-dg-h1 {
  animation: dg-h1      18s ease-out infinite both; }

.tl-dg-h2 {
  animation: dg-h2      18s ease-out infinite both; }

.tl-dg-h3 {
  animation: dg-h3      18s ease-out infinite both; }

.tl-dg-cause {
  animation: dg-cause   18s ease-out infinite both; }

/* IDE — 8s cycle. AI suggestion appears then accepted */
@keyframes ide-cur {
  0%, 30% {
    opacity: 0; }
  36%, 72% {
    opacity: 1; }
  78%, 100% {
    opacity: 0; } }

@keyframes ide-sug {
  0%, 42% {
    opacity: 0;
    transform: translateY(-4px); }
  48%, 84% {
    opacity: 1;
    transform: translateY(0); }
  90%, 100% {
    opacity: 0; } }

.tl-ide-cur {
  animation: ide-cur 8s linear infinite both; }

.tl-ide-sug {
  animation: ide-sug 8s ease-out infinite both; }

/* GIT — 13s cycle. Commit at ~1s → commit at ~2s → diff at ~2.5s → ~10s hold */
@keyframes gt-c4 {
  0%, 5% {
    opacity: 0;
    transform: scale(0.6); }
  8%, 96% {
    opacity: 1;
    transform: scale(1); }
  100% {
    opacity: 0; } }

@keyframes gt-c5 {
  0%, 12% {
    opacity: 0;
    transform: scale(0.6); }
  15%, 96% {
    opacity: 1;
    transform: scale(1); }
  100% {
    opacity: 0; } }

@keyframes gt-d {
  0%, 16% {
    opacity: 0;
    transform: translateY(4px); }
  19%, 96% {
    opacity: 1;
    transform: translateY(0); }
  100% {
    opacity: 0; } }

.tl-gt-c4 {
  animation: gt-c4 13s ease-out infinite both;
  transform-origin: center; }

.tl-gt-c5 {
  animation: gt-c5 13s ease-out infinite both;
  transform-origin: center; }

.tl-gt-d {
  animation: gt-d  13s ease-out infinite both; }

/* DOCS — 8s cycle. AI comments generate above the code */
@keyframes dc-c1 {
  0%, 20% {
    opacity: 0;
    transform: translateY(-4px); }
  30%, 95% {
    opacity: 1;
    transform: translateY(0); }
  100% {
    opacity: 0; } }

@keyframes dc-c2 {
  0%, 40% {
    opacity: 0;
    transform: translateY(-4px); }
  50%, 95% {
    opacity: 1;
    transform: translateY(0); }
  100% {
    opacity: 0; } }

.tl-dc-c1 {
  animation: dc-c1 8s ease-out infinite both; }

.tl-dc-c2 {
  animation: dc-c2 8s ease-out infinite both; }

/* WORKFLOW — 8s cycle. AI-written body + filename together → Commit button */
@keyframes wf-body {
  0%, 8% {
    opacity: 0;
    transform: translateY(-4px); }
  14%, 95% {
    opacity: 1;
    transform: translateY(0); }
  100% {
    opacity: 0; } }

@keyframes wf-foot {
  0%, 22% {
    opacity: 0;
    transform: translateY(-4px); }
  28%, 95% {
    opacity: 1;
    transform: translateY(0); }
  100% {
    opacity: 0; } }

.tl-wf-body {
  animation: wf-body  8s ease-out infinite both; }

.tl-wf-foot {
  animation: wf-foot  8s ease-out infinite both; }

/* Token colors for code (dark editor — default) */
.tk-kw {
  color: #B5A6FF; }

.tk-fn {
  color: #76E0B6; }

.tk-str {
  color: #F7C77B; }

.tk-num {
  color: #7DB6FF; }

.tk-cmt {
  color: rgba(255, 255, 255, 0.42); }

.tk-op {
  color: rgba(255, 255, 255, 0.55); }

/* Token color overrides for light editor (AQLCard surface only) */
.aql-card-light {
  /* keyword: GitHub-light purple */
  /* function: dark emerald */
  /* string: dark crimson */
  /* number: dark blue */
  /* comment: muted gray italic */
  /* operator: slate-600 */ }
  .aql-card-light .tk-kw {
    color: #8250DF; }
  .aql-card-light .tk-fn {
    color: #047857; }
  .aql-card-light .tk-str {
    color: #BE123C; }
  .aql-card-light .tk-num {
    color: #0550AE; }
  .aql-card-light .tk-cmt {
    color: #6E7781;
    font-style: italic; }
  .aql-card-light .tk-op {
    color: #475569; }

/* PIPELINE — 14s cycle. NL → AI → AQL → Compiler → SQL.
   Demonstrates the section's headline thesis: AI emits short AQL, the
   compiler deterministically expands it to verbose SQL. The visual
   punchline is the size contrast between the AQL and SQL panels. */
@keyframes pl-nl {
  0%, 3% {
    opacity: 0.1; }
  9%, 92% {
    opacity: 1; }
  100% {
    opacity: 0.1; } }

@keyframes pl-nl-text {
  0%, 9% {
    clip-path: inset(0 100% 0 0); }
  25%, 95% {
    clip-path: inset(0 0 0 0); }
  100% {
    clip-path: inset(0 100% 0 0); } }

@keyframes pl-ai {
  0%, 25% {
    opacity: 0.1; }
  29%, 92% {
    opacity: 1; }
  100% {
    opacity: 0.1; } }

@keyframes pl-aql-h {
  0%, 29% {
    opacity: 0.1; }
  33%, 92% {
    opacity: 1; }
  100% {
    opacity: 0.1; } }

@keyframes pl-aql-1 {
  0%, 33% {
    opacity: 0;
    transform: translateX(-6px); }
  37%, 92% {
    opacity: 1;
    transform: translateX(0); }
  100% {
    opacity: 0; } }

@keyframes pl-aql-2 {
  0%, 37% {
    opacity: 0;
    transform: translateX(-6px); }
  41%, 92% {
    opacity: 1;
    transform: translateX(0); }
  100% {
    opacity: 0; } }

@keyframes pl-aql-3 {
  0%, 41% {
    opacity: 0;
    transform: translateX(-6px); }
  45%, 92% {
    opacity: 1;
    transform: translateX(0); }
  100% {
    opacity: 0; } }

@keyframes pl-aql-4 {
  0%, 45% {
    opacity: 0;
    transform: translateX(-6px); }
  49%, 92% {
    opacity: 1;
    transform: translateX(0); }
  100% {
    opacity: 0; } }

@keyframes pl-aql-5 {
  0%, 49% {
    opacity: 0;
    transform: translateX(-6px); }
  53%, 92% {
    opacity: 1;
    transform: translateX(0); }
  100% {
    opacity: 0; } }

@keyframes pl-aql-6 {
  0%, 53% {
    opacity: 0;
    transform: translateX(-6px); }
  57%, 92% {
    opacity: 1;
    transform: translateX(0); }
  100% {
    opacity: 0; } }

@keyframes pl-compiler {
  0%, 57% {
    opacity: 0.1; }
  61%, 92% {
    opacity: 1; }
  100% {
    opacity: 0.1; } }

@keyframes pl-sql-h {
  0%, 61% {
    opacity: 0.1; }
  65%, 92% {
    opacity: 1; }
  100% {
    opacity: 0.1; } }

@keyframes pl-sql-1 {
  0%, 65% {
    opacity: 0;
    transform: translateY(-3px); }
  67%, 92% {
    opacity: 1;
    transform: translateY(0); }
  100% {
    opacity: 0; } }

@keyframes pl-sql-2 {
  0%, 67% {
    opacity: 0;
    transform: translateY(-3px); }
  69%, 92% {
    opacity: 1;
    transform: translateY(0); }
  100% {
    opacity: 0; } }

@keyframes pl-sql-3 {
  0%, 69% {
    opacity: 0;
    transform: translateY(-3px); }
  71%, 92% {
    opacity: 1;
    transform: translateY(0); }
  100% {
    opacity: 0; } }

@keyframes pl-sql-4 {
  0%, 71% {
    opacity: 0;
    transform: translateY(-3px); }
  73%, 92% {
    opacity: 1;
    transform: translateY(0); }
  100% {
    opacity: 0; } }

@keyframes pl-sql-5 {
  0%, 73% {
    opacity: 0;
    transform: translateY(-3px); }
  75%, 92% {
    opacity: 1;
    transform: translateY(0); }
  100% {
    opacity: 0; } }

@keyframes pl-sql-6 {
  0%, 75% {
    opacity: 0;
    transform: translateY(-3px); }
  77%, 92% {
    opacity: 1;
    transform: translateY(0); }
  100% {
    opacity: 0; } }

@keyframes pl-sql-7 {
  0%, 77% {
    opacity: 0;
    transform: translateY(-3px); }
  79%, 92% {
    opacity: 1;
    transform: translateY(0); }
  100% {
    opacity: 0; } }

@keyframes pl-sql-8 {
  0%, 79% {
    opacity: 0;
    transform: translateY(-3px); }
  81%, 92% {
    opacity: 1;
    transform: translateY(0); }
  100% {
    opacity: 0; } }

@keyframes pl-sql-more {
  0%, 83% {
    opacity: 0; }
  87%, 92% {
    opacity: 1; }
  100% {
    opacity: 0; } }

.tl-pl-nl {
  animation: pl-nl       14s ease-out infinite both; }

.tl-pl-nl-text {
  animation: pl-nl-text  14s linear    infinite both; }

.tl-pl-ai {
  animation: pl-ai       14s ease-out infinite both; }

.tl-pl-aql-h {
  animation: pl-aql-h    14s ease-out infinite both; }

.tl-pl-aql-1 {
  animation: pl-aql-1    14s ease-out infinite both; }

.tl-pl-aql-2 {
  animation: pl-aql-2    14s ease-out infinite both; }

.tl-pl-aql-3 {
  animation: pl-aql-3    14s ease-out infinite both; }

.tl-pl-aql-4 {
  animation: pl-aql-4    14s ease-out infinite both; }

.tl-pl-aql-5 {
  animation: pl-aql-5    14s ease-out infinite both; }

.tl-pl-aql-6 {
  animation: pl-aql-6    14s ease-out infinite both; }

.tl-pl-compiler {
  animation: pl-compiler 14s ease-out infinite both; }

.tl-pl-sql-h {
  animation: pl-sql-h    14s ease-out infinite both; }

.tl-pl-sql-1 {
  animation: pl-sql-1    14s ease-out infinite both; }

.tl-pl-sql-2 {
  animation: pl-sql-2    14s ease-out infinite both; }

.tl-pl-sql-3 {
  animation: pl-sql-3    14s ease-out infinite both; }

.tl-pl-sql-4 {
  animation: pl-sql-4    14s ease-out infinite both; }

.tl-pl-sql-5 {
  animation: pl-sql-5    14s ease-out infinite both; }

.tl-pl-sql-6 {
  animation: pl-sql-6    14s ease-out infinite both; }

.tl-pl-sql-7 {
  animation: pl-sql-7    14s ease-out infinite both; }

.tl-pl-sql-8 {
  animation: pl-sql-8    14s ease-out infinite both; }

.tl-pl-sql-more {
  animation: pl-sql-more 14s ease-out infinite both; }

/* Pipeline panel chrome */
.pl-panel {
  position: relative;
  border-radius: 12px;
  background: rgba(7, 32, 62, 0.6);
  border: 1px solid var(--line);
  overflow: hidden; }

.pl-panel--aql {
  background: linear-gradient(180deg, rgba(7, 32, 62, 0.92), rgba(7, 32, 62, 0.7)); }

.pl-panel--sql {
  background: rgba(2, 16, 31, 0.65); }

.pl-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--line);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase; }

.pl-stage {
  font-family: "JetBrains Mono", monospace;
  color: var(--sp-4); }

.pl-label {
  color: rgba(255, 255, 255, 0.65);
  font-weight: 600; }

.pl-meta {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: none;
  font-family: "JetBrains Mono", monospace; }

/* SQL panel fade-out mask at bottom — suggests overflow */
.pl-sql-clip {
  position: relative;
  -webkit-mask: linear-gradient(180deg, #000 0%, #000 75%, rgba(0, 0, 0, 0.3) 100%);
  mask: linear-gradient(180deg, #000 0%, #000 75%, rgba(0, 0, 0, 0.3) 100%); }

/* Pipeline transition rail (between panels) */
.pl-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 0;
  position: relative; }

.pl-rail-line {
  width: 1px;
  height: 18px;
  position: relative; }

/* Both rails share the same soft, glowing, gradient connector */
.pl-rail-line--ai,
.pl-rail-line--compiler {
  height: 18px;
  background: linear-gradient(180deg, rgba(141, 142, 246, 0.5) 0%, rgba(118, 224, 182, 0.75) 100%);
  filter: blur(0.3px);
  opacity: 0.9; }

/* Arrowhead on the bottom rail line — points into next panel */
.pl-rail-line:last-of-type::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%) rotate(45deg);
  width: 6px;
  height: 6px;
  border-right: 1.5px solid rgba(118, 224, 182, 0.85);
  border-bottom: 1.5px solid rgba(118, 224, 182, 0.85); }

.pl-rail-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  background: rgba(7, 32, 62, 0.92); }

/* Both badges share the AI pill style — aurora border, glow halo */
.pl-rail-badge--ai,
.pl-rail-badge--compiler {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: linear-gradient(rgba(7, 32, 62, 0.96), rgba(7, 32, 62, 0.96)) padding-box, var(--grad-aurora) border-box;
  color: #c8e0ff;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 0 24px rgba(141, 142, 246, 0.28), 0 0 6px rgba(118, 224, 182, 0.2); }

/* ════════════════════════════════════════════════════════════════════════
   DualInterface (Dual Suggest) — 18s loop standalone graphic.
   Phase A (0–50%): cursor finds dot, "Ask AI" button surfaces and flares,
   floating modal opens, question types in, answer slides in, cursor
   clicks Expand. Phase B (54–94%): right-side chat panel slides in and
   chart compresses. Phase C: hold + reset.
   All classes prefixed .ds-* to avoid collision with other styles.
   ════════════════════════════════════════════════════════════════════════ */
.ds-root {
  --ds-line: rgba(15,23,42,0.08);
  --ds-text: #0F172A;
  --ds-text-dim: #475569;
  --ds-text-muted: #64748B;
  --ds-green: #10B981;
  --ds-green-4: #10B981;
  --ds-green-text: #059669;
  --ds-cyan: #0891B2;
  --ds-blue: #3B82F6;
  --ds-purple: #4F46E5;
  --ds-coral: #DC2626;
  --ds-coral-2: #B91C1C;
  --ds-aurora: linear-gradient(96deg,
    #8D8EF6 0%, #7DA6F5 22%, #67A4F3 38%, #6DBBF8 52%,
    #77C9FF 64%, #82D5EE 78%, #8CEADA 90%, #7BE3B0 100%);
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10.5;
  color: var(--ds-text);
  font-family: "Inter", "InterVariable", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  background: #FFFFFF;
  border: 1px solid var(--ds-line); }

.ds-wash-1, .ds-wash-2 {
  display: none; }

.ds-shell {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  padding: 20px;
  gap: 14px;
  background: #F8FAFC; }

.ds-chart-panel {
  flex: 1;
  position: relative;
  min-width: 0;
  background: #FFFFFF;
  border: 1px solid var(--ds-line);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px; }

.ds-chart-head {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 600;
  color: var(--ds-text); }

.ds-tag-qtd {
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.1);
  color: var(--ds-green-text);
  font-size: 13px;
  font-weight: 700; }

.ds-chart-area {
  flex: 1;
  position: relative;
  min-height: 0; }

.ds-chart-svg {
  width: 100%;
  height: 100%;
  display: block; }

.ds-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  margin-top: -5px;
  border-radius: 50%;
  z-index: 2; }

.ds-dot--peak {
  background: var(--ds-green-4);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18), 0 0 8px rgba(16, 185, 129, 0.4); }

.ds-dot--drop {
  background: var(--ds-coral);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18), 0 0 10px rgba(220, 38, 38, 0.4); }

.ds-chart-hint {
  font-size: 11.5px;
  color: var(--ds-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px; }

.ds-chart-hint .glowdot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ds-cyan);
  box-shadow: 0 0 5px rgba(8, 145, 178, 0.5); }

.ds-chart-hint strong {
  color: var(--ds-text);
  font-weight: 600; }

/* Filter pills in the chart head — "All" is active by default; the
   cursor's Phase C click swaps the active state to "EU". */
.ds-pills {
  margin-left: auto;
  display: inline-flex;
  gap: 3px;
  padding: 2px;
  background: rgba(15, 23, 42, 0.04);
  border-radius: 6px;
  border: 1px solid rgba(15, 23, 42, 0.06); }

.ds-pill {
  padding: 5px 14px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ds-text-muted);
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: default;
  white-space: nowrap; }

.ds-pill-all {
  /* base state used when animation is off (reduced motion) */
  background: rgba(16, 185, 129, 0.1);
  color: var(--ds-green-text);
  border-color: rgba(16, 185, 129, 0.3);
  animation: ds-pill-all 18s ease-in-out infinite both; }

.ds-pill-eu {
  animation: ds-pill-eu 18s ease-in-out infinite both; }

/* Dual chart views — "All" (green) is the default; at ~72% the cursor
   clicks the EU pill and the chart cross-fades to "EU only" (coral),
   which shows the Apparel-DE driven drop more starkly. */
.ds-chart-eu, .ds-d-eu {
  opacity: 0; }

.ds-chart-all {
  animation: ds-view-all 18s ease-in-out infinite both; }

.ds-chart-eu {
  animation: ds-view-eu  18s ease-in-out infinite both; }

.ds-d-all {
  animation: ds-view-all 18s ease-in-out infinite both; }

.ds-d-eu {
  animation: ds-view-eu  18s ease-in-out infinite both; }

/* W7 stockout callout — appears during the EU pause and ties the chat
   AI insight to the visible chart drop. The label is HTML so its text
   stays crisp; the arrow lives inside the chart SVG so it shares the
   chart's coordinate space. Both share the same fade window. */
.ds-callout-label {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 5px 10px;
  border-radius: 5px;
  background: #FFFFFF;
  border: 1px solid rgba(220, 38, 38, 0.45);
  color: var(--ds-text);
  font-size: 12px;
  font-weight: 540;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1);
  z-index: 4;
  pointer-events: none; }

.ds-callout-label strong {
  color: var(--ds-coral);
  font-weight: 700; }

.ds-callout-arrow, .ds-callout-label {
  opacity: 0;
  animation: ds-callout 18s ease-in-out infinite both; }

@keyframes ds-callout {
  /* Fades in after the chart settles into EU view, holds through the
     EU pause AND the panel close (so the callout stays visible while
     the chart expands to full width), fades back out just before the
     chart morphs to "All". */
  0%, 78% {
    opacity: 0; }
  82%, 93% {
    opacity: 1; }
  96%, 100% {
    opacity: 0; } }

.ds-askbtn {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 10px;
  border-radius: 7px;
  background: #FFFFFF;
  border: 1px solid rgba(8, 145, 178, 0.35);
  color: var(--ds-cyan);
  font-size: 12.5px;
  font-weight: 540;
  cursor: default;
  font-family: inherit;
  white-space: nowrap;
  z-index: 5;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 12px -6px rgba(15, 23, 42, 0.1);
  animation: ds-askbtn 18s cubic-bezier(0.2, 0.7, 0.3, 1) infinite both, ds-askbtn-hi 18s ease-in-out infinite both; }

.ds-box {
  position: absolute;
  width: 280px;
  z-index: 8;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 12px 28px -6px rgba(15, 23, 42, 0.18), 0 0 0 4px rgba(79, 70, 229, 0.08);
  animation: ds-box 18s cubic-bezier(0.2, 0.7, 0.3, 1) infinite both; }

.ds-box-inner {
  border-radius: 11px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px; }

.ds-box-head {
  display: flex;
  align-items: center;
  gap: 6px; }

.ds-box-label {
  font-size: 13px;
  font-weight: 540;
  color: var(--ds-text); }

.ds-box-spacer {
  flex: 1; }

.ds-expand {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 5px;
  background: rgba(8, 145, 178, 0.08);
  border: 1px solid rgba(8, 145, 178, 0.3);
  color: var(--ds-cyan);
  font-size: 11px;
  font-weight: 540;
  cursor: default;
  font-family: inherit;
  animation: ds-expand-hi 18s ease-in-out infinite both; }

.ds-input {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 14px;
  border-radius: 8px;
  background: #F8FAFC;
  border: 1px solid rgba(15, 23, 42, 0.1);
  font-size: 17px;
  font-weight: 600;
  color: var(--ds-text);
  min-height: 34px; }

.ds-input-q {
  animation: ds-input-q 18s ease-out infinite both; }

.ds-input-text {
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  animation: ds-input 18s ease-out infinite both; }

.ds-answer {
  overflow: hidden;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ds-text);
  padding: 12px 14px;
  border-radius: 7px;
  background: #F8FAFC;
  border: 1px solid rgba(15, 23, 42, 0.08);
  animation: ds-answer 18s cubic-bezier(0.2, 0.7, 0.3, 1) infinite both; }

.ds-answer strong {
  font-weight: 600; }

.ds-answer-p {
  margin-top: 9px;
  color: var(--ds-text);
  opacity: 0.85;
  font-size: 14px; }

.ds-cursor {
  position: absolute;
  width: 22px;
  height: 28px;
  pointer-events: none;
  z-index: 10;
  animation: ds-cursor 18s cubic-bezier(0.4, 0, 0.2, 1) infinite both; }

.ds-cursor svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.2)); }

.ds-panel-wrap {
  flex-shrink: 0;
  overflow: hidden;
  width: 0;
  opacity: 0;
  animation: ds-panel 18s cubic-bezier(0.2, 0.7, 0.3, 1) infinite both; }

.ds-panel {
  width: 300px;
  height: 100%;
  background: #FFFFFF;
  border: 1px solid var(--ds-line);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px; }

.ds-panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ds-line); }

.ds-panel-title {
  font-size: 13px;
  font-weight: 540;
  color: var(--ds-text); }

.ds-panel-thread {
  margin-left: auto;
  font-size: 11px;
  color: var(--ds-text-muted);
  font-family: "JetBrains Mono", ui-monospace, monospace; }

/* Panel messages pre-exist inside the panel-wrap. The panel-wrap's
   overflow: hidden + width animation reveals them as the panel slides
   in, so they don't need their own fade animation. */
.ds-msg-u {
  align-self: flex-end;
  max-width: 92%;
  padding: 9px 13px;
  border-radius: 10px 10px 3px 10px;
  background: #FFFFFF;
  border: 1px solid rgba(15, 23, 42, 0.1);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ds-text); }

.ds-msg-a {
  align-self: flex-start;
  max-width: 96%;
  padding: 12px 14px;
  border-radius: 10px 10px 10px 3px;
  background: #F8FAFC;
  border: 1px solid rgba(15, 23, 42, 0.08);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ds-text); }

.ds-msg-a strong {
  font-weight: 600; }

.ds-msg-a-p {
  margin-top: 9px;
  color: var(--ds-text);
  opacity: 0.85;
  font-size: 14px; }

/* Regional breakdown stats below the AI answer — three columns showing
   the contrast that motivates the EU drill-in click in Phase C. */
.ds-msg-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--ds-line); }

.ds-stat {
  text-align: center; }

.ds-stat-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ds-text-muted); }

.ds-stat-value {
  font-size: 16px;
  font-weight: 700;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  margin-top: 3px; }

.ds-stat-bad {
  color: var(--ds-coral); }

.ds-stat-good {
  color: var(--ds-green-text); }

/* EU stat — subtly boxed and pulses just before the cursor clicks the
   EU pill, so the eye is led from chat → pill. */
.ds-stat-eu {
  border-radius: 6px;
  animation: ds-attn-eu 18s ease-in-out infinite both; }

@keyframes ds-attn-eu {
  /* Pulse + sustained glow: a sharp peak at 58% catches the eye, then
     the ring stays visible at lower intensity 62-68% so the audience
     has ~1.6s to register the EU connection before the cursor lands. */
  0%, 55% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
  58% {
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.4), 0 0 18px rgba(220, 38, 38, 0.25); }
  62%, 68% {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.32), 0 0 14px rgba(220, 38, 38, 0.18); }
  70%, 100% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); } }

.ds-grounded {
  padding: 6px 10px;
  border-radius: 7px;
  background: #F8FAFC;
  border: 1px solid var(--ds-line);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--ds-text-dim); }

.ds-grounded .gdot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ds-green-4);
  box-shadow: 0 0 5px rgba(16, 185, 129, 0.55); }

.ds-grounded .gcode {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  color: var(--ds-green-text);
  font-weight: 600; }

.ds-composer {
  margin-top: auto;
  padding: 9px 12px;
  border-radius: 8px;
  background: #F8FAFC;
  border: 1px solid var(--ds-line);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ds-text-muted); }

.ds-caret {
  display: inline-block;
  width: 2px;
  height: 0.9em;
  background: currentColor;
  margin-left: 2px;
  vertical-align: -2px;
  animation: ds-caret 1s step-end infinite; }

.ds-spark {
  flex-shrink: 0;
  display: inline-block;
  width: 12px;
  height: 12px; }

/* Single cursor that travels the whole demo: enters from off-screen →
   lands on the focus dot → glides up to the "Ask AI" button that just
   surfaced → clicks → holds while the modal types + answers → travels
   diagonally up-right to the "Expand" button → clicks → exits. The
   continuous path is what makes the side panel feel motivated by the
   Expand click instead of appearing out of nowhere. */
@keyframes ds-cursor {
  /* ─── Phase A: chat-driven exploration ─── */
  /* enters from below-left */
  0%, 1% {
    opacity: 0;
    transform: translate(-40px, 30px); }
  /* lands on the focus dot — hover surfaces the Ask AI button */
  4%, 7% {
    opacity: 1;
    transform: translate(-6px, -4px); }
  /* glides up from dot to the Ask AI button */
  11% {
    opacity: 1;
    transform: translate(-8px, -42px); }
  /* click pulse on Ask AI */
  12%, 13% {
    opacity: 1;
    transform: translate(-8px, -42px) scale(0.85); }
  15% {
    opacity: 1;
    transform: translate(-8px, -42px) scale(1); }
  /* holds on the button while the modal opens, types, and answers */
  38% {
    opacity: 1;
    transform: translate(-8px, -42px); }
  /* travels diagonally up-right to the Expand button.
     With the larger text the modal grew taller. Answer block at 14.5px
     lh 1.65 is ~220px, plus head/input/padding ≈ 320px modal height,
     so the Expand center sits ~95px right and ~315px above the dot. */
  47% {
    opacity: 1;
    transform: translate(95px, -315px); }
  /* click pulse on Expand */
  48%, 49% {
    opacity: 1;
    transform: translate(95px, -315px) scale(0.85); }
  51% {
    opacity: 1;
    transform: translate(95px, -315px) scale(1); }
  /* exits at the Expand position; held invisible while the side panel
     slides in (panel anim now starts at 49% so it overlaps the modal
     fade). */
  53%, 60% {
    opacity: 0;
    transform: translate(95px, -315px); }
  /* ─── Phase C: descends straight onto the EU pill ─── */
  /* Teleport invisibly to a "hover" position above the EU pill, then
     fade in in place, then descend. Doing the X-jump and fade-in
     separately (instead of all-at-once mid-descent) reads as a smooth
     re-entry instead of a cursor materializing mid-motion.
     Y is -440 (was -390 in the original 16/9.4 layout) because the
     graphic is now taller (aspect 16/10.5) so chart-area grew by ~75px
     and the dot sits proportionally lower → the pill row is that much
     further UP from the dot.
     X is +30 (panel-open EU): solving from the cursor-at-+30-lands-on-US
     observation, EU center sits ~one pill+gap right of US center. */
  62% {
    opacity: 0;
    transform: translate(30px, -510px); }
  /* fade in at the hover position, no descent yet */
  65% {
    opacity: 1;
    transform: translate(30px, -510px); }
  /* graceful descent onto the EU pill (5% = ~0.9s for 70px) */
  70% {
    opacity: 1;
    transform: translate(30px, -440px); }
  /* click pulse on the EU pill */
  71%, 72% {
    opacity: 1;
    transform: translate(30px, -440px) scale(0.85); }
  74% {
    opacity: 1;
    transform: translate(30px, -440px) scale(1); }
  /* holds at the EU pill while the panel is still open (~1.4s) */
  78%, 82% {
    opacity: 1;
    transform: translate(30px, -440px); }
  /* Tracks the EU pill rightward as the panel closes 82-87% and the
     chart expands. The pill drifts from translate(30) → translate(90)
     because chart-area widens from ~694px → ~994px, and both the
     cursor's translate and the pill's offset from the dot are linear
     in chart-area width. Then holds 87-93% at the full-width EU view
     so the audience sees the EU drop with the chart fully expanded. */
  87%, 93% {
    opacity: 1;
    transform: translate(90px, -440px); }
  /* ─── Phase D: slides left to "All" and clicks to reset the loop.
     All is the leftmost pill; its center sits ~LEFT of the dot at
     about -30 (two pill+gap pairs to the left of EU at +90). */
  95% {
    opacity: 1;
    transform: translate(-30px, -440px); }
  96%, 97% {
    opacity: 1;
    transform: translate(-30px, -440px) scale(0.85); }
  98% {
    opacity: 1;
    transform: translate(-30px, -440px) scale(1); }
  /* exits as the chart morphs back to "All"; by 100% the dashboard is
     back in its starting state, so the loop boundary is seamless. */
  99%, 100% {
    opacity: 0;
    transform: translate(-30px, -440px); } }

@keyframes ds-askbtn {
  0%, 5% {
    opacity: 0;
    transform: translate(-50%, -44px) scale(0.85); }
  8%, 49% {
    opacity: 1;
    transform: translate(-50%, -44px) scale(1); }
  52%, 100% {
    opacity: 0;
    transform: translate(-50%, -44px) scale(0.9); } }

@keyframes ds-askbtn-hi {
  0%, 10% {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 12px -6px rgba(15, 23, 42, 0.1);
    background: #FFFFFF;
    color: var(--ds-cyan);
    border-color: rgba(8, 145, 178, 0.35); }
  12%, 14% {
    box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.35), 0 4px 14px -4px rgba(8, 145, 178, 0.4);
    background: var(--ds-aurora);
    color: #05264C;
    border-color: transparent; }
  17%, 100% {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 12px -6px rgba(15, 23, 42, 0.1);
    background: #FFFFFF;
    color: var(--ds-cyan);
    border-color: rgba(8, 145, 178, 0.35); } }

@keyframes ds-box {
  0%, 14% {
    opacity: 0;
    transform: translate(-50%, calc(-100% - 12px)) scale(0.92); }
  18%, 49% {
    opacity: 1;
    transform: translate(-50%, calc(-100% - 12px)) scale(1); }
  52%, 100% {
    opacity: 0;
    transform: translate(-50%, calc(-100% - 12px)) scale(0.92); } }

@keyframes ds-input {
  0%, 20% {
    width: 0; }
  30%, 49% {
    width: 100%; }
  52%, 100% {
    width: 0; } }

@keyframes ds-input-q {
  0%, 20% {
    opacity: 0; }
  32%, 49% {
    opacity: 1; }
  52%, 100% {
    opacity: 0; } }

@keyframes ds-answer {
  0%, 32% {
    opacity: 0;
    transform: translateY(-4px);
    max-height: 0; }
  42%, 49% {
    opacity: 1;
    transform: translateY(0);
    max-height: 280px; }
  52%, 100% {
    opacity: 0;
    max-height: 0; } }

@keyframes ds-expand-hi {
  0%, 46% {
    background: rgba(8, 145, 178, 0.08);
    color: var(--ds-cyan);
    border-color: rgba(8, 145, 178, 0.3);
    box-shadow: none; }
  48%, 50% {
    background: var(--ds-aurora);
    color: #05264C;
    border-color: transparent;
    box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.35); }
  52%, 100% {
    background: rgba(8, 145, 178, 0.08);
    color: var(--ds-cyan);
    border-color: rgba(8, 145, 178, 0.3);
    box-shadow: none; } }

@keyframes ds-panel {
  /* Starts opening at 49% — right as the Expand click finishes — so the
     panel begins to slide in while the modal is still visible, giving a
     proper crossfade instead of a gap. Closes BEFORE the "All" click —
     the chart expands to full width while still showing EU, then the
     audience sees the full-width EU view before the All click. */
  0%, 49% {
    width: 0;
    opacity: 0; }
  58%, 82% {
    width: 300px;
    opacity: 1; }
  87%, 100% {
    width: 0;
    opacity: 0; } }

@keyframes ds-caret {
  0%, 49% {
    opacity: 1; }
  50%, 100% {
    opacity: 0; } }

/* "All" pill — active by default. The Phase C click on EU deactivates
   it; the Phase D click on All (now at 96-97%) reactivates it with a
   brief ring flash. At 100% the pill is in its starting active state. */
@keyframes ds-pill-all {
  0%, 70% {
    background: rgba(16, 185, 129, 0.1);
    color: var(--ds-green-text);
    border-color: rgba(16, 185, 129, 0.3); }
  74%, 95% {
    background: transparent;
    color: var(--ds-text-muted);
    border-color: transparent; }
  96%, 97% {
    background: rgba(16, 185, 129, 0.1);
    color: var(--ds-green-text);
    border-color: rgba(16, 185, 129, 0.3);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.35); }
  99%, 100% {
    background: rgba(16, 185, 129, 0.1);
    color: var(--ds-green-text);
    border-color: rgba(16, 185, 129, 0.3);
    box-shadow: none; } }

/* "EU" pill — inactive by default. A coral attention-pulse + sustained
   glow runs 55-70% (synced with the EU stat in the chat) to telegraph
   the click target; the cyan click ring fires when the cursor arrives
   at 71-73%. Holds active through the EU view + panel-close + full-
   width hold, then deactivates on the Phase D "All" click at 96-97%. */
@keyframes ds-pill-eu {
  0%, 55% {
    background: transparent;
    color: var(--ds-text-muted);
    border-color: transparent;
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
  /* attention pulse — sharp peak, then sustained at lower intensity */
  58% {
    background: transparent;
    color: var(--ds-text-muted);
    border-color: transparent;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.4), 0 0 18px rgba(220, 38, 38, 0.25); }
  62%, 68% {
    background: transparent;
    color: var(--ds-text-muted);
    border-color: transparent;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.32), 0 0 14px rgba(220, 38, 38, 0.18); }
  /* settles back to inactive briefly before the cursor lands */
  70% {
    background: transparent;
    color: var(--ds-text-muted);
    border-color: transparent;
    box-shadow: none; }
  /* click ring on cursor arrival */
  71%, 73% {
    background: rgba(16, 185, 129, 0.1);
    color: var(--ds-green-text);
    border-color: rgba(16, 185, 129, 0.3);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.35); }
  /* EU pill stays active across the EU view, panel close, and the
     full-width hold — all the way until the All click. */
  76%, 95% {
    background: rgba(16, 185, 129, 0.1);
    color: var(--ds-green-text);
    border-color: rgba(16, 185, 129, 0.3);
    box-shadow: none; }
  97%, 100% {
    background: transparent;
    color: var(--ds-text-muted);
    border-color: transparent;
    box-shadow: none; } }

/* Chart cross-fades to EU view on the Phase C click and holds — first
   with the panel open, then with the panel closed (chart expanded to
   full width). On the Phase D click the chart morphs back to All. */
@keyframes ds-view-all {
  0%, 72% {
    opacity: 1; }
  76%, 96% {
    opacity: 0; }
  99%, 100% {
    opacity: 1; } }

@keyframes ds-view-eu {
  0%, 72% {
    opacity: 0; }
  76%, 96% {
    opacity: 1; }
  99%, 100% {
    opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ds-askbtn, .ds-box, .ds-cursor,
  .ds-input-text, .ds-input-q, .ds-answer, .ds-expand, .ds-panel-wrap,
  .ds-msg-u, .ds-msg-a, .ds-grounded,
  .ds-pill-all, .ds-pill-eu,
  .ds-chart-all, .ds-chart-eu, .ds-d-all, .ds-d-eu,
  .ds-callout-arrow, .ds-callout-label,
  .ds-stat-eu {
    animation: none; }
  .ds-panel-wrap {
    width: 300px;
    opacity: 1; }
  .ds-box {
    opacity: 1;
    transform: translate(-50%, calc(-100% - 12px)); }
  .ds-askbtn {
    opacity: 1;
    transform: translate(-50%, -44px); }
  .ds-cursor {
    opacity: 0; }
  .ds-input-text {
    width: 100%; }
  .ds-answer {
    opacity: 1;
    max-height: 180px; }
  .ds-caret {
    animation: none; } }

/* ─── EmbeddedSlot — host product UI with AI drawer that drops in
   from the right edge. All classes prefixed .es-* so they cannot
   collide with page styles. The host wears a customer's brand (warm
   cream + amber) so the embed reads as "AI inside someone else's
   product." 14s loop chosen so a reader can see the slide-in once
   and still have ~8s to read the resolved chat. */
.es-root {
  position: relative;
  width: 100%;
  height: 380px;
  display: grid;
  place-items: stretch center;
  padding: 12px; }

.es-frame {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 540px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #F8FAFC;
  border-radius: 12px;
  overflow: hidden;
  color: #0F172A;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 12px 36px -14px rgba(0, 0, 0, 0.55), 0 4px 12px -4px rgba(0, 0, 0, 0.35); }

.es-chrome {
  height: 26px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #E2E8F0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08); }

.es-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%; }

.es-dot-r {
  background: #E97D67; }

.es-dot-y {
  background: #F2BB54; }

.es-dot-g {
  background: #82C97A; }

.es-url {
  margin-left: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: rgba(15, 23, 42, 0.5);
  letter-spacing: 0.01em; }

.es-host {
  flex: 1;
  min-height: 0;
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px; }

.es-host-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08); }

.es-logo {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(140deg, #E11D74, #BE185D);
  display: grid;
  place-items: center;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 12px;
  line-height: 1; }

.es-brand {
  font-size: 13px;
  font-weight: 600;
  color: #0F172A; }

.es-nav {
  margin-left: auto;
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: rgba(15, 23, 42, 0.55); }

.es-nav-active {
  color: #DB2777;
  font-weight: 600;
  padding-bottom: 4px;
  border-bottom: 2px solid #DB2777; }

.es-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px; }

.es-kpi {
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(219, 39, 119, 0.06);
  border: 1px solid rgba(219, 39, 119, 0.18); }

.es-kpi-l {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.55); }

.es-kpi-v {
  font-size: 14px;
  font-weight: 700;
  color: #0F172A;
  margin-top: 2px;
  line-height: 1; }

.es-kpi-d {
  font-size: 9.5px;
  font-weight: 600;
  color: #2F8048;
  margin-top: 3px;
  line-height: 1; }

.es-chart {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: 8px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  padding: 10px 12px 10px; }

.es-chart-title {
  font-size: 10px;
  font-weight: 600;
  color: rgba(15, 23, 42, 0.55);
  letter-spacing: 0.02em;
  margin-bottom: 6px;
  flex: 0 0 auto; }

.es-chart-svg {
  width: 100%;
  flex: 1;
  min-height: 0;
  display: block; }

.es-panel {
  position: absolute;
  top: 26px;
  bottom: 0;
  right: 0;
  width: 220px;
  background: #FFFFFF;
  border-left: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: -14px 0 28px -18px rgba(15, 23, 42, 0.2);
  display: flex;
  flex-direction: column;
  padding: 12px 12px 10px;
  transform: translateX(100%);
  animation: es-panel-in 14s infinite;
  animation-timing-function: cubic-bezier(0.34, 1.5, 0.64, 1); }

.es-panel-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  margin-bottom: 10px; }

.es-panel-title {
  font-size: 12px;
  font-weight: 600;
  color: #0F172A; }

.es-panel-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.3); }

.es-panel-meta {
  font-size: 10px;
  color: rgba(15, 23, 42, 0.5);
  font-weight: 500; }

.es-close {
  margin-left: auto;
  font-size: 14px;
  line-height: 1;
  color: rgba(15, 23, 42, 0.3); }

.es-msg-u {
  align-self: flex-end;
  max-width: 88%;
  padding: 6px 9px;
  border-radius: 8px 8px 2px 8px;
  background: linear-gradient(140deg, #FCE7F3, #FBCFE8);
  border: 1px solid rgba(219, 39, 119, 0.22);
  font-size: 11px;
  line-height: 1.4;
  color: #0F172A;
  margin-bottom: 8px;
  opacity: 0;
  transform: translateY(4px);
  animation: es-msg-u-in 14s infinite; }

.es-msg-a {
  max-width: 96%;
  padding: 8px 10px;
  border-radius: 8px 8px 8px 2px;
  background: #FFFFFF;
  border: 1px solid rgba(15, 23, 42, 0.1);
  font-size: 11px;
  line-height: 1.5;
  color: #0F172A;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  transform: translateY(4px);
  animation: es-msg-a-in 14s infinite; }

.es-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px; }

.es-sku {
  font-weight: 500; }

.es-pct {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  color: #2F8048; }

.es-composer {
  margin-top: auto;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.08);
  font-size: 10.5px;
  color: rgba(15, 23, 42, 0.5);
  display: flex;
  align-items: center;
  gap: 4px; }

.es-composer .caret {
  display: inline-block;
  width: 1px;
  height: 11px;
  background: rgba(15, 23, 42, 0.55); }

@keyframes es-panel-in {
  0%, 8% {
    transform: translateX(100%); }
  29%, 100% {
    transform: translateX(0); } }

@keyframes es-msg-u-in {
  0%, 39% {
    opacity: 0;
    transform: translateY(4px); }
  46%, 100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes es-msg-a-in {
  0%, 54% {
    opacity: 0;
    transform: translateY(4px); }
  62%, 100% {
    opacity: 1;
    transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .es-panel {
    transform: translateX(0);
    animation: none; }
  .es-msg-u, .es-msg-a {
    opacity: 1;
    transform: none;
    animation: none; } }