.stories-section { display: grid; gap: 40px; }
.stories-stage { display: grid; gap: 48px; }

.story {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 32px;
  align-items: center;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 70%, transparent), var(--surface));
}
.story-reverse { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.story-reverse .story-copy { order: 2; }

.story-kicker {
  display: flex; align-items: center; gap: 8px; margin: 0 0 12px;
  font: 600 12px/1 var(--font-mono); letter-spacing: 0.14em; color: var(--accent);
}
.story h3 { margin: 0 0 12px; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; }
.story-body { margin: 0 0 14px; color: var(--muted); max-width: 46ch; }
.story-punch {
  margin: 0; padding-left: 14px; border-left: 2px solid var(--accent);
  font-size: 17px; font-weight: 600; color: var(--text);
}

.story-scene { display: grid; gap: 14px; }
.story-frame {
  position: relative; min-height: 300px; padding: 18px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); overflow: hidden;
}
.story-step { margin: 0; min-height: 2.6em; color: var(--muted); font: 400 14px/1.3 var(--font-mono); }
.story-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.story-controls button {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface-raised);
  color: var(--text); font: 500 13px/1 "Segoe UI", system-ui, sans-serif; cursor: pointer;
}
.story-controls button:hover { border-color: var(--accent); }
.story-controls button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.story-dots { display: inline-flex; gap: 6px; margin-left: auto; }
.story-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: background 200ms ease; }
.story-dots i.is-on { background: var(--accent); }

/* Story 1 is ONE continuous loop (--loop, 16 s), not a stepped slider: the
   cursor opens three windows from the taskbar, they wait, a handwritten note
   points down, the Foyer window lights up with three panes, a second note is
   scribbled, each pane shows its diff, then everything fades and it starts
   over. Every element carries one keyframe animation over the same loop, so
   the timeline is the set of percentages below (1% = 160 ms). Pause holds
   every animation in place; Replay restarts the loop from zero. */
[data-story="windows"] { --loop: 16s; }
[data-story="windows"] .story-frame * { animation-duration: var(--loop); animation-iteration-count: infinite; animation-fill-mode: both; }
[data-story="windows"].is-paused .story-frame * { animation-play-state: paused; }
.story-frame--rows { display: grid; grid-template-rows: minmax(210px, 1fr) 58px auto 78px; gap: 6px; min-height: 590px; padding: 14px; }
.desk { position: relative; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--bg); }
.ide-stack { position: absolute; inset: 12px 12px 50px; }
.ide-window {
  position: absolute; left: 0; top: 0; width: 68%; height: 68%;
  display: grid; grid-template-rows: auto 1fr auto;
  border: 1px solid #3a4150; border-radius: 6px; background: var(--surface);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  transform-origin: left bottom; opacity: 0;
}
.ide-window:nth-child(1) { animation-name: story-win-1; }
.ide-window:nth-child(2) { left: 16%; top: 16%; animation-name: story-win-2; }
.ide-window:nth-child(3) { left: 32%; top: 32%; animation-name: story-win-3; }
@keyframes story-win-1 {
  0%, 4.75% { opacity: 0; transform: translate(-10%, 120px) scale(0.3); filter: none; }
  7.4% { opacity: 1; transform: none; filter: none; }
  44% { filter: none; }
  47% { filter: saturate(0.4) brightness(0.7); }
  92% { opacity: 1; transform: none; filter: saturate(0.4) brightness(0.7); }
  95%, 100% { opacity: 0; transform: none; filter: saturate(0.4) brightness(0.7); }
}
@keyframes story-win-2 {
  0%, 8.5% { opacity: 0; transform: translate(-10%, 120px) scale(0.3); filter: none; }
  11.1% { opacity: 1; transform: none; filter: none; }
  44% { filter: none; }
  47% { filter: saturate(0.4) brightness(0.7); }
  92% { opacity: 1; transform: none; filter: saturate(0.4) brightness(0.7); }
  95%, 100% { opacity: 0; transform: none; filter: saturate(0.4) brightness(0.7); }
}
@keyframes story-win-3 {
  0%, 12.4% { opacity: 0; transform: translate(-10%, 120px) scale(0.3); filter: none; }
  15% { opacity: 1; transform: none; filter: none; }
  44% { filter: none; }
  47% { filter: saturate(0.4) brightness(0.7); }
  92% { opacity: 1; transform: none; filter: saturate(0.4) brightness(0.7); }
  95%, 100% { opacity: 0; transform: none; filter: saturate(0.4) brightness(0.7); }
}
.ide-title { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; border-bottom: 1px solid var(--line); background: #1a1d24; border-radius: 6px 6px 0 0; }
.ide-label { font: 500 12px/1 var(--font-mono); color: var(--text); white-space: nowrap; }
.ide-controls { display: inline-flex; gap: 10px; }
.ide-controls i { width: 10px; height: 10px; }
.ide-controls i:nth-child(1) { height: 1px; align-self: end; margin-bottom: 2px; background: var(--muted); }
.ide-controls i:nth-child(2) { border: 1px solid var(--muted); box-sizing: border-box; }
.ide-controls i:nth-child(3) { background: linear-gradient(45deg, transparent 45%, var(--muted) 45% 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, var(--muted) 45% 55%, transparent 55%); }
.ide-body { display: grid; gap: 6px; align-content: start; padding: 10px; }
.ide-body i { height: 5px; border-radius: 3px; background: var(--line); }
.ide-body i:nth-child(1) { width: 62%; }
.ide-body i:nth-child(2) { width: 84%; }
.ide-body i:nth-child(3) { width: 48%; }
.ide-wait { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-top: 1px solid var(--line); font: 400 11px/1 var(--font-mono); color: var(--muted); }
.dots { display: inline-flex; gap: 3px; }
.dots b { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); opacity: 0.35; animation: story-pulse 1.2s ease-in-out infinite; }
.dots b:nth-child(2) { animation-delay: 160ms; }
.dots b:nth-child(3) { animation-delay: 320ms; }
[data-story="windows"] .dots b { animation-duration: 1.2s; }
@keyframes story-pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

.desk-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 40px;
  display: flex; justify-content: center; align-items: center; gap: 12px;
  background: linear-gradient(180deg, #1c3d6a, #142f57); border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.desk-tile { position: relative; width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; }
.desk-tile i { display: block; width: 14px; height: 14px; border-radius: 3px; }
.desk-start i { background: linear-gradient(#142f57, #142f57) 6px 0 / 2px 14px no-repeat, linear-gradient(#142f57, #142f57) 0 6px / 14px 2px no-repeat, #3da5ff; border-radius: 1px; }
.desk-files i { background: #f3c24a; border-radius: 2px 5px 3px 3px; }
.desk-web i { background: radial-gradient(circle at 50% 50%, #142f57 0 3px, #5ad0ff 3.5px); border-radius: 50%; }
.desk-app { background: rgba(255, 255, 255, 0.14); }
.desk-app i { width: 16px; height: 16px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.desk-app b { position: absolute; bottom: -6px; width: 4px; height: 4px; border-radius: 50%; background: #9ccaff; opacity: 0; }
.desk-app b:nth-of-type(1) { left: 8px; animation-name: story-dot-1; }
.desk-app b:nth-of-type(2) { left: 12px; animation-name: story-dot-2; }
.desk-app b:nth-of-type(3) { left: 16px; animation-name: story-dot-3; }
@keyframes story-dot-1 { 0%, 4.75% { opacity: 0; } 6%, 92% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes story-dot-2 { 0%, 8.5% { opacity: 0; } 9.75%, 92% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes story-dot-3 { 0%, 12.4% { opacity: 0; } 13.6%, 92% { opacity: 1; } 95%, 100% { opacity: 0; } }
.desk-cursor { position: absolute; top: 6px; left: 8px; width: 16px; height: 16px; opacity: 0; transform-origin: 2px 1px; animation-name: story-cursor; }
.desk-cursor svg { display: block; width: 16px; height: 16px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6)); }
@keyframes story-cursor {
  0% { transform: translate(-170px, -150px); opacity: 0; }
  1% { opacity: 1; }
  3.6%, 4.4% { transform: translate(0, 0) scale(1); }
  4.75% { transform: translate(0, 0) scale(0.8); }
  5.1%, 8.2% { transform: translate(0, 0) scale(1); }
  8.5% { transform: translate(0, 0) scale(0.8); }
  8.8%, 12.1% { transform: translate(0, 0) scale(1); }
  12.4% { transform: translate(0, 0) scale(0.8); }
  12.7%, 16% { transform: translate(0, 0) scale(1); opacity: 1; }
  19%, 100% { transform: translate(0, 0) scale(1); opacity: 0; }
}

/* Handwritten notes: the text is revealed left to right in steps and the
   stroke is drawn in, like someone scribbling on the page. */
.story-note { position: relative; display: flex; align-items: center; gap: 10px; }
.note-text {
  font: 600 19px/1.1 "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; color: var(--accent);
  transform: rotate(-6deg); transform-origin: left center; clip-path: inset(0 100% 0 0); white-space: nowrap;
}
.note-stroke { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 260; stroke-dashoffset: 260; }
.note-like { justify-content: flex-end; padding-right: 12%; }
.note-arrow { width: 64px; height: 52px; margin-top: -6px; }
.note-like .note-text { animation-name: story-write-like; }
.note-like .note-stroke:nth-child(1) { animation-name: story-draw-like; }
.note-like .note-stroke:nth-child(2) { animation-name: story-draw-like-head; }
@keyframes story-write-like {
  0%, 34.4% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(18); }
  40%, 92% { clip-path: inset(0 0 0 0); }
  95%, 100% { clip-path: inset(0 100% 0 0); }
}
@keyframes story-draw-like {
  0%, 40% { stroke-dashoffset: 260; animation-timing-function: ease-out; }
  44.4%, 92% { stroke-dashoffset: 0; }
  95%, 100% { stroke-dashoffset: 260; }
}
@keyframes story-draw-like-head {
  0%, 44.4% { stroke-dashoffset: 260; }
  46%, 92% { stroke-dashoffset: 0; }
  95%, 100% { stroke-dashoffset: 260; }
}
.note-want { flex-direction: column; align-items: flex-start; gap: 0; padding: 22px 0 0 14px; }
.note-want .note-text { font-size: 17px; transform: rotate(-5deg); animation-name: story-write-want; }
.note-scribble { width: 210px; height: 12px; margin-left: 4px; transform: rotate(-5deg); transform-origin: left center; }
.note-want .note-stroke { animation-name: story-draw-want; }
@keyframes story-write-want {
  0%, 53% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(24); }
  59.3%, 92% { clip-path: inset(0 0 0 0); }
  95%, 100% { clip-path: inset(0 100% 0 0); }
}
@keyframes story-draw-want {
  0%, 59.5% { stroke-dashoffset: 260; animation-timing-function: ease-out; }
  63.2%, 92% { stroke-dashoffset: 0; }
  95%, 100% { stroke-dashoffset: 260; }
}

.foyer-window {
  position: relative; display: grid; grid-template-rows: auto 1fr; gap: 10px;
  padding: 0 10px 12px; border: 1px solid var(--accent); border-radius: 10px; background: var(--surface);
  opacity: 0.18; transform: scale(0.97); z-index: 1; animation-name: story-foyer;
}
@keyframes story-foyer {
  0%, 45.6% { opacity: 0.18; transform: scale(0.97); }
  48.7%, 92% { opacity: 1; transform: scale(1); }
  95%, 100% { opacity: 0.18; transform: scale(0.97); }
}
.foyer-bar { display: flex; align-items: center; gap: 12px; margin: 0 -10px; padding: 8px 12px; border-bottom: 1px solid var(--line); border-radius: 10px 10px 0 0; background: #1a1d24; font: 700 13px/1 "Segoe UI", system-ui, sans-serif; color: var(--text); }
.foyer-bar i { color: var(--accent); font-style: normal; }
.mac-lights { display: inline-flex; gap: 6px; }
.mac-lights i { width: 11px; height: 11px; border-radius: 50%; }
.mac-lights i:nth-child(1) { background: #ff5f57; }
.mac-lights i:nth-child(2) { background: #febc2e; }
.mac-lights i:nth-child(3) { background: #28c840; }
.foyer-panes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.foyer-pane {
  display: grid; gap: 6px; align-content: start; padding: 8px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
}
.pane-name { font: 500 12px/1 var(--font-mono); color: var(--text); }
.pane-lines { display: grid; gap: 4px; }
.pane-lines i { height: 4px; border-radius: 2px; background: var(--line); width: 40%; animation: story-grow 1.4s ease-in-out infinite alternate; }
[data-story="windows"] .pane-lines i { animation-duration: 1.4s; }
.foyer-pane:nth-child(2) .pane-lines i { animation-delay: 220ms; }
.foyer-pane:nth-child(3) .pane-lines i { animation-delay: 440ms; }
.pane-state { font: 400 11px/1 var(--font-mono); color: var(--cyan); }
.pane-diff { display: grid; gap: 3px; margin-top: 2px; padding-top: 6px; border-top: 1px dashed var(--line); opacity: 0; animation-name: story-diff-show; }
@keyframes story-diff-show { 0%, 65.6% { opacity: 0; } 66.5%, 92% { opacity: 1; } 95%, 100% { opacity: 0; } }
.pane-diff em { font: 500 10px/1 var(--font-mono); font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.pane-diff i { height: 4px; border-radius: 2px; width: 0; }
.pane-diff i.add { background: #45d69a; }
.pane-diff i.del { background: #f07a91; }
.pane-diff i:nth-of-type(1) { --w: 70%; animation-name: story-diff-1; }
.pane-diff i:nth-of-type(2) { --w: 48%; animation-name: story-diff-2; }
.pane-diff i:nth-of-type(3) { --w: 86%; animation-name: story-diff-3; }
.pane-diff i:nth-of-type(4) { --w: 58%; animation-name: story-diff-4; }
@keyframes story-diff-1 { 0%, 66.5% { width: 0; animation-timing-function: ease-out; } 68.9%, 92% { width: var(--w); } 95%, 100% { width: 0; } }
@keyframes story-diff-2 { 0%, 67.6% { width: 0; animation-timing-function: ease-out; } 70%, 92% { width: var(--w); } 95%, 100% { width: 0; } }
@keyframes story-diff-3 { 0%, 68.7% { width: 0; animation-timing-function: ease-out; } 71.1%, 92% { width: var(--w); } 95%, 100% { width: 0; } }
@keyframes story-diff-4 { 0%, 69.8% { width: 0; animation-timing-function: ease-out; } 72.2%, 92% { width: var(--w); } 95%, 100% { width: 0; } }
@keyframes story-grow { from { width: 34%; } to { width: 92%; } }
/* Story 2: one project fans into worktrees, then compiles into one report. */
[data-story="research"] .story-frame { display: grid; grid-template-rows: auto 1fr auto; gap: 12px; }
.research-project {
  display: inline-flex; align-items: center; gap: 8px; justify-self: start;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  font: 500 13px/1 var(--font-mono); color: var(--text);
}
.research-tracks { display: grid; gap: 10px; align-content: center; }
.research-track {
  display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 10px; align-items: center;
  opacity: 0; transform: translateX(-10px); transition: opacity 420ms ease, transform 480ms ease;
}
[data-story="research"][data-step="1"] .research-track,
[data-story="research"][data-step="2"] .research-track,
[data-story="research"][data-step="3"] .research-track { opacity: 1; transform: none; }
[data-story="research"] .research-track:nth-child(2) { transition-delay: 90ms; }
[data-story="research"] .research-track:nth-child(3) { transition-delay: 180ms; }
.track-branch {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  font: 500 12px/1 var(--font-mono); color: var(--text);
}
.track-bar { height: 6px; border-radius: 3px; background: var(--surface-raised); overflow: hidden; }
.track-bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--cyan); transition: width 700ms ease; }
[data-story="research"][data-step="2"] .track-bar i { width: 62%; animation: story-run 1.6s ease-in-out infinite alternate; }
[data-story="research"][data-step="2"] .research-track:nth-child(2) .track-bar i { animation-delay: 200ms; }
[data-story="research"][data-step="2"] .research-track:nth-child(3) .track-bar i { animation-delay: 400ms; }
[data-story="research"][data-step="3"] .track-bar i { width: 100%; background: var(--accent); }
@keyframes story-run { from { width: 46%; } to { width: 84%; } }

.research-report {
  display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); opacity: 0; transform: translateY(10px);
  transition: opacity 450ms ease, transform 520ms ease, border-color 450ms ease;
}
.report-head { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1 var(--font-mono); color: var(--text); }
.report-lines { display: grid; gap: 6px; }
.report-lines i {
  height: 16px; border-radius: 4px; background: var(--bg);
  font: 400 11px/16px var(--font-mono); color: var(--muted); font-style: normal;
}
.report-lines i::after { content: attr(data-label); padding-left: 8px; }
[data-story="research"][data-step="3"] .research-report { opacity: 1; transform: none; border-color: var(--accent); }

/* Story 3: install, add a project, open a pane, sign in, first prompt. */
.app-mock {
  position: absolute; inset: 0; display: grid; grid-template-columns: 34% minmax(0, 1fr);
  background: var(--bg); overflow: hidden;
}
.app-rail { display: grid; align-content: start; gap: 10px; padding: 14px 12px; border-right: 1px solid var(--line); background: var(--surface); }
.rail-title { font: 600 10px/1 var(--font-mono); letter-spacing: 0.14em; color: var(--muted); }
.rail-add, .rail-project {
  position: relative; display: flex; align-items: center; gap: 8px; padding: 7px 9px;
  border: 1px solid var(--line); border-radius: 8px; font: 500 12px/1 var(--font-mono); color: var(--text);
  transition: border-color 300ms ease, opacity 400ms ease, transform 400ms ease;
}
.rail-add b { font-weight: 700; color: var(--accent); }
.rail-add em, .rail-project em { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-project i { width: 8px; height: 8px; border-radius: 2px; background: var(--accent); }
.rail-project { opacity: 0; transform: translateX(-8px); }
.app-main { position: relative; padding: 14px; }
.app-empty { position: absolute; inset: 14px; display: grid; place-content: center; gap: 6px; text-align: center; transition: opacity 400ms ease; }
.app-empty b { font: 600 14px/1.2 "Segoe UI", system-ui, sans-serif; color: var(--text); }
.app-empty span { font: 400 12px/1 var(--font-mono); color: var(--muted); }
.app-pane {
  position: absolute; inset: 14px; display: grid; grid-template-rows: auto 1fr; gap: 8px; padding: 10px;
  border: 1px solid var(--accent); border-radius: 10px; background: var(--surface);
  opacity: 0; transform: scale(0.96); transition: opacity 400ms ease, transform 500ms ease;
}
.pane-head { display: flex; justify-content: space-between; font: 500 12px/1 var(--font-mono); color: var(--text); }
.pane-head em { font-style: normal; }
.pane-head b { color: var(--cyan); }
.pane-term { display: grid; align-content: start; gap: 6px; padding: 8px; border-radius: 6px; background: var(--bg); overflow: hidden; }
.t-line { display: flex; align-items: center; gap: 8px; margin: 0; font: 400 12px/1.4 var(--font-mono); color: var(--muted); opacity: 0; transform: translateY(4px); transition: opacity 300ms ease, transform 300ms ease; }
.t-line b { color: var(--accent); font-weight: 700; }
.t-login span, .t-prompt span { color: var(--text); }
.t-ok, .t-done { color: var(--cyan); }
.t-providers { color: var(--muted); padding-left: 18px; }
.mock-cursor { position: absolute; top: 8px; left: 10px; width: 16px; height: 16px; opacity: 0; transform-origin: 2px 1px; pointer-events: none; }
.mock-cursor svg { display: block; width: 16px; height: 16px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6)); }
@keyframes story-click {
  0% { transform: translate(150px, 110px); opacity: 0; }
  10% { opacity: 1; }
  45%, 50% { transform: translate(0, 0) scale(1); }
  55% { transform: translate(0, 0) scale(0.8); }
  60%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
}
@keyframes story-line { to { opacity: 1; transform: none; } }

[data-story="setup"][data-step="1"] .rail-cursor { animation: story-click 1400ms ease-in-out both; }
[data-story="setup"][data-step="1"] .rail-add { border-color: var(--accent); }
[data-story="setup"][data-step="1"] .rail-project,
[data-story="setup"][data-step="2"] .rail-project,
[data-story="setup"][data-step="3"] .rail-project,
[data-story="setup"][data-step="4"] .rail-project { opacity: 1; transform: none; transition-delay: 900ms; }
[data-story="setup"][data-step="2"] .rail-project,
[data-story="setup"][data-step="3"] .rail-project,
[data-story="setup"][data-step="4"] .rail-project { transition-delay: 0ms; }
[data-story="setup"][data-step="2"] .project-cursor { animation: story-click 1200ms ease-in-out both; }
[data-story="setup"][data-step="2"] .app-empty,
[data-story="setup"][data-step="3"] .app-empty,
[data-story="setup"][data-step="4"] .app-empty { opacity: 0; }
[data-story="setup"][data-step="2"] .app-pane { opacity: 1; transform: none; transition-delay: 800ms; }
[data-story="setup"][data-step="3"] .app-pane,
[data-story="setup"][data-step="4"] .app-pane { opacity: 1; transform: none; }
[data-story="setup"][data-step="2"] .t-install { animation: story-line 300ms ease 1100ms both; }
[data-story="setup"][data-step="2"] .t-install .dots b { animation: story-pulse 1.2s ease-in-out infinite; }
[data-story="setup"][data-step="2"] .t-installed { animation: story-line 300ms ease 2100ms both; }
[data-story="setup"][data-step="3"] .t-installed,
[data-story="setup"][data-step="4"] .t-installed { opacity: 1; transform: none; }
[data-story="setup"][data-step="3"] .t-login { animation: story-line 300ms ease 200ms both; }
[data-story="setup"][data-step="3"] .t-providers { animation: story-line 300ms ease 900ms both; }
[data-story="setup"][data-step="3"] .t-ok { animation: story-line 300ms ease 1800ms both; }
[data-story="setup"][data-step="4"] .t-login,
[data-story="setup"][data-step="4"] .t-providers,
[data-story="setup"][data-step="4"] .t-ok { opacity: 1; transform: none; }
[data-story="setup"][data-step="4"] .t-prompt { animation: story-line 300ms ease 200ms both; }
[data-story="setup"][data-step="4"] .t-work { animation: story-line 300ms ease 900ms both; }
[data-story="setup"][data-step="4"] .t-work .dots b { animation: story-pulse 1.2s ease-in-out infinite; }
[data-story="setup"][data-step="4"] .t-done { animation: story-line 300ms ease 1900ms both; }

@media (max-width: 900px) {
  .story, .story-reverse { grid-template-columns: minmax(0, 1fr); }
  .story-reverse .story-copy { order: 0; }
  .foyer-panes { grid-template-columns: minmax(0, 1fr); }
  .story-frame { min-height: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  .story *, .story *::after { transition: none !important; animation: none !important; }
  /* The loop's final frame, held still. */
  [data-story="windows"] .ide-window { opacity: 1; transform: none; filter: saturate(0.4) brightness(0.7); }
  [data-story="windows"] .desk-app b, [data-story="windows"] .foyer-window, [data-story="windows"] .pane-diff { opacity: 1; transform: none; }
  [data-story="windows"] .note-text { clip-path: inset(0 0 0 0); }
  [data-story="windows"] .note-stroke { stroke-dashoffset: 0; }
  [data-story="windows"] .pane-diff i { width: var(--w); }
}

@media (max-width: 520px) {
  /* The pulsing dots already say "waiting"; the words would wrap each row. */
  .ide-wait em { display: none; }
  .story-frame { padding: 14px; }
}