:root {
  --ink: #1d1c28;
  --muted: #6f687c;
  --soft: #524b60;
  --paper: #fcfbff;
  --violet: #6d4aff;
  --deep: #4b2ed6;
  --lav: #f0ecff;
  --line: #e5e0ee;
  --green: #23745f;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { overflow: hidden; background: var(--paper); color: var(--ink); font-family: Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, p, blockquote { margin: 0; }

#deck { position: absolute; left: 50%; top: 50%; width: 1600px; height: 900px; transform-origin: center; background: var(--paper); }
.story-slide {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  padding: 58px 88px 52px;
  background: radial-gradient(circle at 78% 36%, rgba(109, 74, 255, .09), transparent 34%), var(--paper);
}
.story-slide.active { display: flex; }

.phase {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  padding: 9px 15px;
  border-radius: 999px;
  background: var(--lav);
  color: var(--deep);
  font: 600 12px/1 'JetBrains Mono', monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.phase::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--violet); }

.story-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}
.story-rail::before {
  content: '';
  position: absolute;
  top: 33px;
  right: 9%;
  left: 9%;
  height: 2px;
  background: var(--line);
}
.rail-step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-template-areas: 'number title' 'number actor';
  align-items: center;
  column-gap: 12px;
  min-height: 68px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(252, 251, 255, .96);
  color: var(--muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.rail-step:hover { border-color: #bcaef5; background: #faf8ff; }
.rail-step:active { transform: translateY(1px); }
.rail-step:focus-visible { outline: 3px solid rgba(109, 74, 255, .28); outline-offset: 3px; }
.rail-number { grid-area: number; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #d9d3e3; border-radius: 50%; background: #fff; font: 600 13px/1 'JetBrains Mono', monospace; }
.rail-title { grid-area: title; color: var(--ink); font: 600 16px/1.2 'Space Grotesk', sans-serif; }
.rail-actor { grid-area: actor; margin-top: 3px; font-size: 11px; }
.rail-step.is-complete .rail-number { border-color: #cfc3f7; background: var(--lav); color: var(--deep); }
.rail-step.is-active { border-color: var(--violet); background: #f6f2ff; color: var(--deep); }
.rail-step.is-active .rail-number { border-color: var(--violet); background: var(--violet); color: #fff; }

.story-focus {
  display: grid;
  grid-template-columns: .76fr 1.24fr;
  align-items: center;
  gap: 64px;
  flex: 1;
  min-height: 0;
  padding: 34px 0 24px;
}
.story-copy { min-width: 0; }
.story-role-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 7px 10px;
  border: 1px solid #d8cff0;
  border-radius: 8px;
  background: var(--lav);
  color: var(--deep);
  font-size: 12px;
  font-weight: 600;
}
.role-badge svg { width: 16px; height: 16px; }
.role-badge--solid { border-color: var(--violet); background: var(--violet); color: #fff; }
.role-badge[data-role='participant'] { border-color: #ddd8e5; background: #f5f3f7; color: var(--soft); }
.role-badge--sponsor { border-color: #cfded9; background: #eef7f4; color: #17614e; }
.role-dot { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: currentColor; color: #fff; font: 700 9px/1 Inter, sans-serif; }
.story-kicker { color: var(--violet); font: 600 13px/1 'JetBrains Mono', monospace; letter-spacing: .11em; text-transform: uppercase; }
.story-copy h1 { max-width: 13ch; margin-top: 15px; font: 600 48px/1.08 'Space Grotesk', sans-serif; letter-spacing: -.03em; text-wrap: balance; }
.story-lead { max-width: 38ch; margin-top: 20px; color: var(--soft); font-size: 18px; line-height: 1.55; }

.story-artifact { overflow: hidden; border: 1px solid #ddd7e8; border-radius: 16px; background: #fff; }
.artifact-bar { display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 20px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.artifact-bar b { margin-left: auto; color: var(--deep); font-size: 12px; }
.hitt-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--violet); color: #fff; font-size: 11px; font-weight: 700; }
.artifact-label { color: var(--muted); font-size: 13px; }

.setup-body { padding: 38px 42px; }
.story-objective { display: block; max-width: 24ch; margin-top: 12px; font: 600 30px/1.25 'Space Grotesk', sans-serif; letter-spacing: -.02em; }
.setup-scope { display: grid; grid-template-columns: .8fr .7fr 1.4fr; gap: 12px; margin-top: 34px; }
.setup-scope > div { padding: 16px; border-radius: 10px; background: #f6f3fb; }
.setup-scope span, .initiative-meta span { display: block; color: var(--muted); font-size: 11px; }
.setup-scope b, .initiative-meta b { display: block; margin-top: 6px; font-size: 13px; line-height: 1.4; }

.live-status { color: var(--green) !important; }
.conversation { display: grid; gap: 8px; padding: 16px 22px 18px; }
.conversation-exchange { display: grid; gap: 4px; padding: 0 4px; }
.question { display: inline-block; width: fit-content; max-width: 88%; padding: 7px 10px; border-radius: 9px 9px 9px 3px; background: #f1f1f5; color: var(--soft); font-size: 12px; line-height: 1.35; }
.conversation blockquote { justify-self: end; max-width: 89%; padding: 8px 11px; border-radius: 9px 9px 3px 9px; background: var(--lav); color: var(--soft); font: 500 12px/1.35 'Space Grotesk', sans-serif; letter-spacing: -.01em; }
.conversation blockquote strong { color: var(--deep); font-weight: 700; }
.conversation-exchange.is-evidence { margin-top: 2px; padding: 12px; border: 2px solid #a58cff; border-radius: 12px; background: #fbf9ff; box-shadow: 0 8px 24px rgba(109, 74, 255, .08); }
.conversation-exchange.is-evidence .question { background: #eee9ff; color: var(--deep); }
.conversation-exchange.is-evidence blockquote { max-width: 92%; background: #e8dfff; color: var(--ink); font-size: 16px; }
.evidence-detected { color: var(--deep); font: 600 9px/1 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.source-line { display: flex; align-items: center; justify-content: flex-end; gap: 9px; color: var(--muted); font-size: 11px; }
.source-line span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #e9e1ff; color: var(--deep); font-weight: 700; }
.evidence-values { display: grid; gap: 9px; margin-top: 28px; }
.evidence-values > strong { color: var(--muted); font-size: 12px; font-weight: 600; }
.evidence-values span { width: fit-content; padding: 10px 13px; border-radius: 8px; background: #f3efff; color: var(--deep); font: 600 14px/1 'JetBrains Mono', monospace; }

.story-equation { display: grid; gap: 9px; margin-top: 30px; }
.story-equation span { color: var(--muted); font-size: 13px; font-weight: 600; }
.story-equation strong { color: var(--violet); font: 700 27px/1.2 'Space Grotesk', sans-serif; letter-spacing: -.03em; }
.story-equation small { color: var(--muted); font-size: 13px; }
.finding-artifact { padding: 34px 38px; }
.finding-status, .initiative-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.finding-status span, .initiative-top span { color: var(--violet); font: 600 12px/1 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.finding-status b, .initiative-top b { padding: 7px 10px; border-radius: 7px; background: #edf7f3; color: #1e6854; font-size: 11px; }
.finding-artifact h2 { max-width: 26ch; margin-top: 18px; font: 600 29px/1.2 'Space Grotesk', sans-serif; letter-spacing: -.025em; }
.finding-hours { margin-top: 20px; color: var(--deep); font: 600 18px/1.3 'Space Grotesk', sans-serif; }
.finding-signals { display: grid; gap: 10px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.finding-signals strong { color: var(--muted); font-size: 12px; }
.finding-signals p { padding: 12px 14px; border-radius: 9px; background: #f6f3fb; font-size: 14px; line-height: 1.35; }
.trace-route { display: grid; grid-template-columns: 1fr 34px 1fr 34px 1fr; align-items: center; margin-top: 32px; }
.trace-route > div { min-height: 104px; padding: 15px; border: 1px solid var(--line); border-radius: 10px; }
.trace-route > div > span { color: var(--violet); font: 600 10px/1 'JetBrains Mono', monospace; }
.trace-route b { display: block; margin-top: 8px; font-size: 14px; }
.trace-route small { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.trace-route i { height: 1px; background: var(--violet); }
.story-source { margin-top: 20px; color: var(--muted); font: 500 11px/1 'JetBrains Mono', monospace; }

.story-decision { margin-top: 22px; color: var(--soft); font-size: 17px; line-height: 1.4; }
.initiative-artifact { padding: 27px 30px; }
.initiative-solution { margin-top: 16px; }
.initiative-solution h2 { margin: 0; font: 600 26px/1.2 'Space Grotesk', sans-serif; letter-spacing: -.03em; }
.initiative-solution p { margin: 9px 0 0; color: var(--soft); font-size: 13px; line-height: 1.4; }
.initiative-impact { display: grid; gap: 8px; margin-top: 16px; padding: 12px 0; border-block: 1px solid var(--line); }
.initiative-impact > div { display: grid; grid-template-columns: 132px 1fr; gap: 10px; font-size: 12px; line-height: 1.3; }
.initiative-impact span { color: var(--muted); }
.initiative-impact b { color: var(--ink); font-weight: 600; }
.initiative-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 14px; }
.initiative-meta > div { padding: 11px; border-radius: 10px; background: #f6f3fb; }
.initiative-meta b { font-size: 11px; }

.evidence-thread { display: flex; align-items: center; gap: 14px; min-height: 42px; color: var(--muted); font-size: 13px; }
.evidence-thread i { flex: 1; height: 1px; background: var(--line); }
.evidence-thread b { color: var(--deep); font-weight: 600; }

.story-slide.active .story-copy,
.story-slide.active .story-artifact { animation: story-enter .55s var(--ease) both; }
.story-slide.active .story-artifact { animation-delay: .09s; }
.story-slide.instant .story-copy,
.story-slide.instant .story-artifact { animation: none; }
@keyframes story-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; }
}

:root[data-compact='true'], :root[data-compact='true'] body { height: auto; overflow: hidden; }
:root[data-compact='true'] #deck { position: relative; inset: auto; width: 100%; height: auto; transform: none !important; }
:root[data-compact='true'] .story-slide { position: relative; inset: auto; min-height: 0; padding: 30px 22px 38px; }
:root[data-compact='true'] .phase { font-size: 10px; letter-spacing: .06em; }
:root[data-compact='true'] .story-rail { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
:root[data-compact='true'] .story-rail::before { display: none; }
:root[data-compact='true'] .rail-step { grid-template-columns: 36px 1fr; min-height: 58px; padding: 9px; }
:root[data-compact='true'] .rail-number { width: 32px; height: 32px; font-size: 11px; }
:root[data-compact='true'] .rail-title { font-size: 14px; }
:root[data-compact='true'] .rail-actor { font-size: 10px; }
:root[data-compact='true'] .story-focus { grid-template-columns: 1fr; gap: 24px; padding: 32px 0 24px; }
:root[data-compact='true'] .story-copy h1 { max-width: 100%; font-size: 34px; }
:root[data-compact='true'] .story-lead, :root[data-compact='true'] .story-decision { font-size: 16px; }
:root[data-compact='true'] .story-role-row { margin-bottom: 18px; }
:root[data-compact='true'] .setup-body, :root[data-compact='true'] .conversation, :root[data-compact='true'] .finding-artifact, :root[data-compact='true'] .initiative-artifact { padding: 24px 20px; }
:root[data-compact='true'] .story-objective { font-size: 24px; }
:root[data-compact='true'] .setup-scope, :root[data-compact='true'] .initiative-meta { grid-template-columns: 1fr; }
:root[data-compact='true'] .conversation blockquote { margin-left: 0; padding: 20px; font-size: 19px; }
:root[data-compact='true'] .question { max-width: 100%; }
:root[data-compact='true'] .finding-artifact h2 { font-size: 26px; }
:root[data-compact='true'] .trace-route { grid-template-columns: 1fr; gap: 10px; }
:root[data-compact='true'] .trace-route i { width: 1px; height: 14px; margin-left: 22px; }
:root[data-compact='true'] .story-equation strong { font-size: 24px; }
:root[data-compact='true'] .initiative-impact > div { grid-template-columns: 1fr; gap: 3px; font-size: 13px; }
:root[data-compact='true'] .evidence-thread { align-items: flex-start; flex-direction: column; gap: 8px; }
:root[data-compact='true'] .evidence-thread i { width: 100%; flex: none; }