/* ============================================================
   Synthetic usability testing — looping animation component
   Self-contained. No frameworks. 17s seamless CSS loop.
   Tokens: eazle colour + typography.
   ============================================================ */

.st-embed {
  /* colour tokens */
  --st-teal: #00333B;
  --st-orange: #ED5C08;
  --st-orange-50: #FDEDE3;
  --st-ink: #202020;
  --st-mute: #646464;
  --st-s1: #F9F9F9;
  --st-s2: #F0F0F0;
  --st-line: #E8E8E8;
  --st-white: #FFFFFF;
  --st-green: #3DD97B;
  --st-red: #B32318;
  --st-amber: #E0A030;

  /* type tokens */
  --st-font: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --st-font-brand: "eazle Favorit", BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* motion */
  --st-dur: 17s;
  --st-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --st-ease-out: cubic-bezier(0.32, 0.72, 0.28, 1);

  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-family: var(--st-font);
  color: var(--st-ink);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

.st-embed *,
.st-embed *::before,
.st-embed *::after { box-sizing: border-box; }

.st-fit {
  width: 100%;
  max-width: 1280px;
  min-width: 0;
  overflow: hidden;
}
.st-sizer { position: relative; width: 100%; max-width: 1280px; height: 800px; }

.st-stage {
  position: absolute;
  top: 0; left: 0;
  width: 1280px;
  height: 800px;
  transform-origin: top left;
  background: var(--st-s1);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(32, 32, 32, 0.14);
  font-size: 14px;
  line-height: 1.3;
}

/* ── scenes ───────────────────────────────────────────── */
.st-scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  will-change: opacity, transform;
}
.st-scene--a { background: var(--st-white); animation: st-sA var(--st-dur) var(--st-ease) infinite; }
.st-scene--b { background: var(--st-s1);   animation: st-sB var(--st-dur) var(--st-ease) infinite; }
.st-scene--c { background: var(--st-s1);   animation: st-sC var(--st-dur) var(--st-ease) infinite; }

@keyframes st-sA {
  0%    { opacity: 1; transform: scale(1); }
  29.4% { opacity: 1; transform: scale(1.022); }
  31.8% { opacity: 0; transform: scale(1.025); }
  97.6% { opacity: 0; transform: scale(1); }
  100%  { opacity: 1; transform: scale(1); }
}
@keyframes st-sB {
  0%    { opacity: 0; transform: scale(1); }
  29.4% { opacity: 0; transform: scale(1); }
  31.8% { opacity: 1; transform: scale(1.003); }
  55.3% { opacity: 1; transform: scale(1.022); }
  57.6% { opacity: 0; transform: scale(1.025); }
  100%  { opacity: 0; transform: scale(1); }
}
@keyframes st-sC {
  0%    { opacity: 0; transform: scale(1); }
  55.3% { opacity: 0; transform: scale(1); }
  57.6% { opacity: 1; transform: scale(1.003); }
  97.6% { opacity: 1; transform: scale(1.022); }
  100%  { opacity: 0; transform: scale(1.025); }
}

/* ── chrome shared by all three scenes ────────────────── */
.st-top {
  height: 60px; flex: none;
  display: flex; align-items: center;
  padding: 0 24px;
  background: var(--st-white);
  border-bottom: 1px solid var(--st-line);
}
.st-mark {
  width: 26px; height: 26px; flex: none;
  border-radius: 6px; background: var(--st-teal);
  display: flex; align-items: center; justify-content: center;
  margin-right: 11px;
}
.st-mark i { width: 10px; height: 10px; background: var(--st-white); transform: rotate(45deg); border-radius: 1px; }
.st-product {
  font-family: var(--st-font-brand);
  font-size: 16px; font-weight: 600;
  color: var(--st-teal);
  margin-right: 20px;
}
.st-vr { width: 1px; height: 20px; background: var(--st-line); margin-right: 20px; }
.st-crumb { font-size: 14px; color: var(--st-mute); }
.st-crumb-sep { font-size: 14px; color: var(--st-line); margin: 0 9px; }
.st-crumb-now { font-size: 14px; font-weight: 500; }

.st-tabs { display: flex; gap: 2px; margin-left: 24px; background: var(--st-s2); border-radius: 6px; padding: 3px; }
.st-tab {
  padding: 6px 14px; border-radius: 4px;
  font-size: 14px; font-weight: 500; color: var(--st-mute);
  transition: background 300ms var(--st-ease), color 300ms var(--st-ease);
}
.st-tab.is-on { background: var(--st-white); color: var(--st-teal); font-weight: 600; box-shadow: 0 1px 2px rgba(32, 32, 32, 0.07); }

.st-status {
  margin-left: auto;
  display: flex; align-items: center; gap: 9px;
  font-size: 14px; color: var(--st-mute);
  border: 1px solid var(--st-line); border-radius: 6px;
  padding: 7px 13px;
}
.st-status .st-dot { width: 7px; height: 7px; }
.st-meta { margin-left: auto; font-size: 14px; color: var(--st-mute); }

.st-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--st-mute); line-height: 1.4;
}
.st-cardtitle { font-family: var(--st-font-brand); font-size: 18px; font-weight: 600; line-height: 1.3; }
.st-sub { font-size: 12px; color: var(--st-mute); line-height: 1.4; }

/* pills — one visual language for every observation label */
.st-chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--st-line); background: var(--st-s1);
  border-radius: 999px; padding: 3px 10px;
  font-size: 12px; font-weight: 600; color: var(--st-ink);
  white-space: nowrap;
}
.st-dot { width: 6px; height: 6px; border-radius: 999px; flex: none; }
.st-dot--grey   { background: var(--st-mute); }
.st-dot--red    { background: var(--st-red); }
.st-dot--amber  { background: var(--st-amber); }
.st-dot--green  { background: var(--st-green); }
.st-dot--orange { background: var(--st-orange); }

.st-reveal { opacity: 0; }

/* ── SCENE A — moderated session ──────────────────────── */
.st-cols { flex: 1; min-height: 0; display: flex; }

.st-proto { width: 452px; flex: none; border-right: 1px solid var(--st-line); background: var(--st-s2); display: flex; flex-direction: column; }
.st-proto__bar { height: 42px; flex: none; display: flex; align-items: center; padding: 0 20px; border-bottom: 1px solid var(--st-line); background: var(--st-white); }
.st-proto__bar .st-sub { margin-left: auto; }
.st-proto__stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 16px 0 12px; }
.st-device { position: relative; height: 100%; aspect-ratio: 935 / 1925; }
.st-device img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  filter: drop-shadow(0 10px 24px rgba(0, 51, 59, 0.18));
}
.st-proto__task { flex: none; border-top: 1px solid var(--st-line); background: var(--st-white); padding: 14px 20px; }
.st-proto__task p { margin: 7px 0 0; font-size: 14px; line-height: 1.3; }

.st-cursor { position: absolute; z-index: 4; left: 26%; top: 30%; animation: st-cursor var(--st-dur) var(--st-ease-out) infinite; }
.st-cursor__halo { position: absolute; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 999px; background: rgba(0, 51, 59, 0.2); animation: st-ping 2s ease-out infinite; }
.st-cursor__dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 999px; background: var(--st-teal); border: 2px solid var(--st-white); }

@keyframes st-cursor {
  0%, 2%    { left: 26%; top: 30%; }
  5%        { left: 22%; top: 35.5%; }
  9%        { left: 49%; top: 41%; }
  13%, 30%  { left: 53%; top: 57%; }
  36%, 100% { left: 26%; top: 30%; }
}
@keyframes st-ping {
  0%   { transform: scale(0.4); opacity: 0.45; }
  100% { transform: scale(2);   opacity: 0; }
}

.st-convo { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--st-white); }
.st-convo__bar { height: 46px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 24px; border-bottom: 1px solid var(--st-line); }
.st-avatar { width: 26px; height: 26px; flex: none; border-radius: 999px; background: var(--st-teal); color: var(--st-white); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.st-avatar--ai { background: var(--st-s1); border: 1px solid var(--st-line); }
.st-avatar--ai i { width: 9px; height: 9px; background: var(--st-teal); transform: rotate(45deg); border-radius: 1px; }
.st-who { font-size: 14px; font-weight: 600; line-height: 1.3; }
.st-who + .st-sub { margin-top: 1px; }
.st-convo__mode { margin-left: auto; font-size: 12px; color: var(--st-mute); }

.st-thread { flex: 1; min-height: 0; padding: 22px 26px; overflow: hidden; }
.st-turn { display: flex; gap: 12px; margin-bottom: 18px; }
.st-turn:last-child { margin-bottom: 0; }
.st-turn__label { font-size: 12px; font-weight: 600; letter-spacing: 0.03em; color: var(--st-mute); line-height: 1.4; margin-bottom: 5px; }
.st-turn p { margin: 0; font-size: 16px; line-height: 1.3; max-width: 520px; }
.st-turn--ai p { color: var(--st-mute); }
.st-turn .st-chip { margin-top: 9px; }

.st-notes { width: 300px; flex: none; border-left: 1px solid var(--st-line); background: var(--st-white); }
.st-notes__bar { height: 46px; display: flex; align-items: center; padding: 0 18px; border-bottom: 1px solid var(--st-line); }
.st-notes__list { padding: 16px; }
.st-note { border: 1px solid var(--st-line); border-radius: 8px; background: var(--st-white); padding: 13px; margin-bottom: 10px; }
.st-note:last-child { margin-bottom: 0; }
.st-note__head { display: flex; align-items: center; margin-bottom: 9px; }
.st-note__time { margin-left: auto; font-size: 12px; color: var(--st-mute); line-height: 1.4; }
.st-note p { margin: 0; font-size: 14px; line-height: 1.3; }

.st-timeline { flex: none; height: 78px; border-top: 1px solid var(--st-line); background: var(--st-white); padding: 16px 24px; }
.st-timeline__head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.st-playbtn { width: 26px; height: 26px; border-radius: 999px; background: var(--st-teal); color: var(--st-white); display: flex; align-items: center; justify-content: center; }
.st-clock { font-size: 12px; color: var(--st-mute); line-height: 1.4; font-variant-numeric: tabular-nums; }
.st-legend { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 12px; color: var(--st-mute); line-height: 1.4; }
.st-legend span { display: flex; align-items: center; gap: 6px; }
.st-key { width: 8px; height: 8px; border-radius: 2px; }
.st-key--red { background: var(--st-red); }
.st-key--amber { background: var(--st-amber); }
.st-key--green { background: var(--st-green); }

.st-track { position: relative; height: 8px; }
.st-track__rail { position: absolute; inset: 0; border-radius: 4px; background: var(--st-s2); }
.st-mk { position: absolute; top: -7px; width: 3px; height: 22px; border-radius: 2px; }
.st-mk--red { background: var(--st-red); }
.st-mk--amber { background: var(--st-amber); }
.st-mk--green { background: var(--st-green); }
.st-playhead { position: absolute; left: 0; top: -4px; width: 10px; height: 16px; border-radius: 4px; background: var(--st-teal); animation: st-playhead var(--st-dur) var(--st-ease) infinite; }
@keyframes st-playhead { 0%, 1% { left: 0%; } 18%, 100% { left: 96%; } }

/* session reveals — assemble in ~2.2s, hold ~2.8s, reset while hidden */
@keyframes st-r1 { 0%,1%{opacity:0;transform:translateY(8px)} 3%,30%{opacity:1;transform:none} 36%,100%{opacity:0;transform:translateY(8px)} }
@keyframes st-r2 { 0%,3%{opacity:0;transform:translateY(8px)} 5%,30%{opacity:1;transform:none} 36%,100%{opacity:0;transform:translateY(8px)} }
@keyframes st-r3 { 0%,5.5%{opacity:0;transform:translateY(8px)} 7.5%,30%{opacity:1;transform:none} 36%,100%{opacity:0;transform:translateY(8px)} }
@keyframes st-r4 { 0%,8%{opacity:0;transform:translateY(8px)} 10%,30%{opacity:1;transform:none} 36%,100%{opacity:0;transform:translateY(8px)} }
@keyframes st-r5 { 0%,10.5%{opacity:0;transform:translateY(8px)} 12.5%,30%{opacity:1;transform:none} 36%,100%{opacity:0;transform:translateY(8px)} }
@keyframes st-r6 { 0%,4.5%{opacity:0;transform:translateY(8px)} 6.5%,30%{opacity:1;transform:none} 36%,100%{opacity:0;transform:translateY(8px)} }
@keyframes st-r7 { 0%,8.5%{opacity:0;transform:translateY(8px)} 10.5%,30%{opacity:1;transform:none} 36%,100%{opacity:0;transform:translateY(8px)} }
@keyframes st-r8 { 0%,12%{opacity:0;transform:translateY(8px)} 14%,30%{opacity:1;transform:none} 36%,100%{opacity:0;transform:translateY(8px)} }

.st-r1 { animation: st-r1 var(--st-dur) var(--st-ease) infinite; }
.st-r2 { animation: st-r2 var(--st-dur) var(--st-ease) infinite; }
.st-r3 { animation: st-r3 var(--st-dur) var(--st-ease) infinite; }
.st-r4 { animation: st-r4 var(--st-dur) var(--st-ease) infinite; }
.st-r5 { animation: st-r5 var(--st-dur) var(--st-ease) infinite; }
.st-r6 { animation: st-r6 var(--st-dur) var(--st-ease) infinite; }
.st-r7 { animation: st-r7 var(--st-dur) var(--st-ease) infinite; }
.st-r8 { animation: st-r8 var(--st-dur) var(--st-ease) infinite; }

/* ── SCENE B — findings dashboard ─────────────────────── */
.st-board { flex: 1; min-height: 0; padding: 24px; }
.st-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 14px; }
.st-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }

.st-card {
  background: var(--st-white);
  border: 1px solid var(--st-line);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(32, 32, 32, 0.04);
}
.st-card--pad { padding: 20px; }
.st-metric { background: var(--st-white); border: 1px solid var(--st-line); border-radius: 8px; padding: 18px; box-shadow: 0 1px 2px rgba(32, 32, 32, 0.04); }
.st-metric--teal { background: var(--st-teal); border-color: var(--st-teal); color: var(--st-white); box-shadow: none; }
.st-metric__label { font-size: 14px; color: var(--st-mute); margin-bottom: 12px; }
.st-metric__value { font-size: 32px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.st-metric__value small { font-size: 20px; color: var(--st-mute); }
.st-metric__foot { font-size: 12px; color: var(--st-mute); margin-top: 10px; line-height: 1.4; }
.st-metric--teal .st-metric__label,
.st-metric--teal .st-metric__foot,
.st-metric--teal .st-metric__value small { color: rgba(255, 255, 255, 0.72); }

.st-rows { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
.st-row__head { display: flex; align-items: baseline; margin-bottom: 8px; font-size: 14px; }
.st-row__val { margin-left: auto; font-weight: 600; }
.st-row__val--red { color: var(--st-red); }
.st-row__val--orange { color: var(--st-orange); }
.st-bar { height: 8px; border-radius: 4px; background: var(--st-s2); overflow: hidden; }
.st-bar--thin { height: 6px; border-radius: 3px; }
.st-bar__fill { height: 100%; border-radius: inherit; transform-origin: left center; transform: scaleX(0); }
.st-bar__fill--teal { background: var(--st-teal); }
.st-bar__fill--red { background: var(--st-red); }
.st-bar__fill--orange { background: var(--st-orange); }
.st-bar__fill--mute { background: var(--st-mute); }
.st-bar__fill--line { background: var(--st-line); }

@keyframes st-grow1 { 0%,33%{transform:scaleX(0)} 39%,100%{transform:scaleX(1)} }
@keyframes st-grow2 { 0%,34%{transform:scaleX(0)} 40%,100%{transform:scaleX(1)} }
@keyframes st-grow3 { 0%,35%{transform:scaleX(0)} 41%,100%{transform:scaleX(1)} }
@keyframes st-grow4 { 0%,38%{transform:scaleX(0)} 43.5%,100%{transform:scaleX(1)} }
@keyframes st-grow5 { 0%,38.5%{transform:scaleX(0)} 44%,100%{transform:scaleX(1)} }
@keyframes st-grow6 { 0%,39%{transform:scaleX(0)} 44%,100%{transform:scaleX(1)} }
@keyframes st-grow7 { 0%,39.5%{transform:scaleX(0)} 44.5%,100%{transform:scaleX(1)} }
.st-grow1 { animation: st-grow1 var(--st-dur) var(--st-ease-out) infinite; }
.st-grow2 { animation: st-grow2 var(--st-dur) var(--st-ease-out) infinite; }
.st-grow3 { animation: st-grow3 var(--st-dur) var(--st-ease-out) infinite; }
.st-grow4 { animation: st-grow4 var(--st-dur) var(--st-ease-out) infinite; }
.st-grow5 { animation: st-grow5 var(--st-dur) var(--st-ease-out) infinite; }
.st-grow6 { animation: st-grow6 var(--st-dur) var(--st-ease-out) infinite; }
.st-grow7 { animation: st-grow7 var(--st-dur) var(--st-ease-out) infinite; }

.st-heatwrap { display: flex; gap: 22px; margin-top: 18px; }
.st-mini { position: relative; width: 150px; flex: none; border: 1px solid var(--st-line); border-radius: 6px; padding: 8px; overflow: hidden; background: var(--st-white); }
.st-mini__nav { height: 16px; border-radius: 3px; background: var(--st-teal); margin-bottom: 6px; }
.st-mini__strip { display: flex; gap: 4px; margin-bottom: 6px; }
.st-mini__strip div { flex: 1; height: 26px; border-radius: 3px; border: 1px solid var(--st-line); }
.st-mini__chips { display: flex; gap: 4px; margin-bottom: 6px; }
.st-mini__chips i { height: 13px; border-radius: 999px; border: 1px solid var(--st-line); display: block; }
.st-mini__chips i:first-child { width: 44px; border-color: var(--st-ink); }
.st-mini__chips i:nth-child(2) { width: 30px; }
.st-mini__chips i:nth-child(3) { width: 26px; }
.st-mini__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.st-mini__grid div { height: 44px; border-radius: 3px; border: 1px solid var(--st-line); }
.st-mini__grid div:last-child { background: var(--st-orange-50); }

.st-heat { position: absolute; border-radius: 999px; opacity: 0; }
.st-heat--1 { left: 46px;  top: 30px;  width: 92px; height: 92px; margin: -46px 0 0 -46px; background: radial-gradient(circle, rgba(237,92,8,0.52) 0%, rgba(237,92,8,0.15) 55%, rgba(237,92,8,0) 72%); animation: st-heat1 var(--st-dur) var(--st-ease) infinite; }
.st-heat--2 { left: 44px;  top: 74px;  width: 68px; height: 68px; margin: -34px 0 0 -34px; background: radial-gradient(circle, rgba(237,92,8,0.36) 0%, rgba(237,92,8,0.10) 55%, rgba(237,92,8,0) 72%); animation: st-heat2 var(--st-dur) var(--st-ease) infinite; }
.st-heat--3 { left: 112px; top: 148px; width: 82px; height: 82px; margin: -41px 0 0 -41px; background: radial-gradient(circle, rgba(237,92,8,0.46) 0%, rgba(237,92,8,0.13) 55%, rgba(237,92,8,0) 72%); animation: st-heat3 var(--st-dur) var(--st-ease) infinite; }
@keyframes st-heat1 { 0%,38%{opacity:0;transform:scale(0.8)} 44%,100%{opacity:1;transform:scale(1)} }
@keyframes st-heat2 { 0%,39%{opacity:0;transform:scale(0.8)} 45%,100%{opacity:1;transform:scale(1)} }
@keyframes st-heat3 { 0%,40%{opacity:0;transform:scale(0.8)} 46%,100%{opacity:1;transform:scale(1)} }

.st-heatrows { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }

.st-issues__head { padding: 15px 20px; border-bottom: 1px solid var(--st-s2); display: flex; align-items: center; }
.st-issues__head .st-sub { margin-left: auto; }
.st-issue {
  display: grid;
  grid-template-columns: 34px 1fr 116px 96px;
  gap: 16px;
  padding: 13px 20px;
  align-items: center;
  border-bottom: 1px solid var(--st-s2);
}
.st-issue:last-child { border-bottom: none; }
.st-issue__n { font-size: 14px; color: var(--st-mute); }
.st-issue__t { font-size: 16px; }
.st-issue__p { font-size: 14px; color: var(--st-mute); }

/* findings reveals — assemble by ~7.5s, hold ~1.9s */
@keyframes st-s1 { 0%,30%{opacity:0;transform:translateY(9px)} 32.5%,100%{opacity:1;transform:none} }
@keyframes st-s2 { 0%,31.5%{opacity:0;transform:translateY(9px)} 34%,100%{opacity:1;transform:none} }
@keyframes st-s3 { 0%,33%{opacity:0;transform:translateY(9px)} 35.5%,100%{opacity:1;transform:none} }
@keyframes st-s4 { 0%,34.5%{opacity:0;transform:translateY(9px)} 37%,100%{opacity:1;transform:none} }
@keyframes st-s5 { 0%,36%{opacity:0;transform:translateY(9px)} 38.5%,100%{opacity:1;transform:none} }
@keyframes st-s6 { 0%,37.5%{opacity:0;transform:translateY(9px)} 40%,100%{opacity:1;transform:none} }
@keyframes st-s7 { 0%,39%{opacity:0;transform:translateY(9px)} 41.5%,100%{opacity:1;transform:none} }
@keyframes st-s8 { 0%,40.5%{opacity:0;transform:translateY(9px)} 43%,100%{opacity:1;transform:none} }
.st-s1 { animation: st-s1 var(--st-dur) var(--st-ease) infinite; }
.st-s2 { animation: st-s2 var(--st-dur) var(--st-ease) infinite; }
.st-s3 { animation: st-s3 var(--st-dur) var(--st-ease) infinite; }
.st-s4 { animation: st-s4 var(--st-dur) var(--st-ease) infinite; }
.st-s5 { animation: st-s5 var(--st-dur) var(--st-ease) infinite; }
.st-s6 { animation: st-s6 var(--st-dur) var(--st-ease) infinite; }
.st-s7 { animation: st-s7 var(--st-dur) var(--st-ease) infinite; }
.st-s8 { animation: st-s8 var(--st-dur) var(--st-ease) infinite; }

/* ── SCENE C — insight report ─────────────────────────── */
.st-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.st-btn { padding: 8px 14px; border: 1px solid var(--st-line); border-radius: 6px; font-size: 14px; font-weight: 500; color: var(--st-ink); }
.st-btn--primary { border-color: var(--st-teal); background: var(--st-teal); color: var(--st-white); font-weight: 600; padding: 8px 15px; }

.st-paper { flex: 1; min-height: 0; padding: 24px; display: flex; justify-content: center; }
.st-sheet {
  width: 940px;
  background: var(--st-white);
  border: 1px solid var(--st-line);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(32, 32, 32, 0.05);
  padding: 34px 46px;
}
.st-sheet__kicker { display: flex; align-items: baseline; }
.st-sheet__kicker span:first-child { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--st-mute); }
.st-sheet__kicker span:last-child { margin-left: auto; font-size: 12px; color: var(--st-mute); line-height: 1.4; }
.st-sheet h1 {
  font-family: var(--st-font-brand);
  font-size: 32px; font-weight: 600;
  letter-spacing: -0.03em; line-height: 1.1;
  max-width: 660px; margin: 12px 0 0;
  color: var(--st-teal);
}
.st-rule { height: 1px; background: var(--st-line); margin: 22px 0; }
.st-label { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--st-mute); }
.st-lede { font-size: 16px; line-height: 1.3; max-width: 800px; margin: 10px 0 0; text-wrap: pretty; }

.st-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 22px 0 26px; }
.st-kpi { border: 1px solid var(--st-line); border-radius: 8px; background: var(--st-s1); padding: 14px; }
.st-kpi__v { font-size: 28px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.st-kpi__v small { font-size: 18px; color: var(--st-mute); }
.st-kpi__v--red { color: var(--st-red); }
.st-kpi__v--red small { color: inherit; }
.st-kpi p { font-size: 12px; color: var(--st-mute); margin: 8px 0 0; line-height: 1.4; }

.st-rec { display: flex; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--st-line); }
.st-rec:last-child { padding-bottom: 0; border-bottom: none; }
.st-rec__n { font-size: 14px; color: var(--st-mute); width: 24px; flex: none; padding-top: 4px; }
.st-rec__b { flex: 1; }
.st-rec__b h3 { font-family: var(--st-font-brand); font-size: 18px; font-weight: 600; line-height: 1.3; margin: 0 0 5px; }
.st-rec__b p { font-size: 14px; line-height: 1.3; color: var(--st-mute); margin: 0; max-width: 640px; }
.st-tagline { flex: none; }
.st-tag { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.st-tag--teal { color: var(--st-teal); border: 1px solid var(--st-teal); }
.st-tag--mute { color: var(--st-mute); border: 1px solid var(--st-line); background: var(--st-s1); }

/* report reveals — assemble by ~11.3s, hold ~5.3s */
@keyframes st-t1 { 0%,56%{opacity:0;transform:translateY(9px)} 59%,100%{opacity:1;transform:none} }
@keyframes st-t2 { 0%,57.5%{opacity:0;transform:translateY(9px)} 60.5%,100%{opacity:1;transform:none} }
@keyframes st-t3 { 0%,59%{opacity:0;transform:translateY(9px)} 62%,100%{opacity:1;transform:none} }
@keyframes st-t4 { 0%,60.5%{opacity:0;transform:translateY(9px)} 63.5%,100%{opacity:1;transform:none} }
@keyframes st-t5 { 0%,62%{opacity:0;transform:translateY(9px)} 65%,100%{opacity:1;transform:none} }
@keyframes st-t6 { 0%,63.5%{opacity:0;transform:translateY(9px)} 66.5%,100%{opacity:1;transform:none} }
.st-t1 { animation: st-t1 var(--st-dur) var(--st-ease) infinite; }
.st-t2 { animation: st-t2 var(--st-dur) var(--st-ease) infinite; }
.st-t3 { animation: st-t3 var(--st-dur) var(--st-ease) infinite; }
.st-t4 { animation: st-t4 var(--st-dur) var(--st-ease) infinite; }
.st-t5 { animation: st-t5 var(--st-dur) var(--st-ease) infinite; }
.st-t6 { animation: st-t6 var(--st-dur) var(--st-ease) infinite; }

/* ── reduced motion: hold the moderated session, fully populated ── */
@media (prefers-reduced-motion: reduce) {
  .st-embed .st-scene,
  .st-embed .st-scene * { animation: none !important; }
  .st-embed .st-scene { opacity: 0; transform: none; }
  .st-embed .st-scene--a { opacity: 1; }
  .st-embed .st-reveal { opacity: 1; transform: none; }
  .st-embed .st-bar__fill { transform: scaleX(1); }
  .st-embed .st-heat { opacity: 1; transform: none; }
  .st-embed .st-cursor { display: none; }
  .st-embed .st-playhead { left: 52%; }
}