/*
 * Foreground-only product story. The original inline styles own the canvas,
 * atmosphere, section geometry, frequency rail, and scroll choreography.
 * Complete content is visible immediately; motion accents the underlying work.
 */
.story-scene {
  --story-ink: #eeeaf3;
  --story-secondary: #c0bbc9;
  --story-line: rgba(196, 185, 240, .19);
  color: var(--story-ink);
  border: 1px solid var(--story-line);
  border-radius: 16px;
  background: rgba(10, 13, 26, .92);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .25), inset 0 1px rgba(255, 255, 255, .04);
  overflow: hidden;
  text-align: left;
}
.story-scene p, .story-scene h3, .story-scene h4 { margin: 0; }
.story-scene h3, .story-scene h4 { text-wrap: balance; }
.story-scene p { text-wrap: pretty; }
.story-chrome {
  min-height: 49px;
  padding: 13px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--story-line);
  color: var(--story-secondary);
  font-size: 11px;
}
.story-brand { display: flex; align-items: center; gap: 9px; color: var(--periwinkle-soft); }
.story-brand strong { color: var(--story-ink); font-size: 13px; font-weight: 550; }
.story-breadcrumb { color: var(--story-secondary); }
.story-label { color: var(--periwinkle-soft); font-size: 10px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; line-height: 1.6; }
.story-ref {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 29px;
  padding: 3px 5px;
  border: 1px solid rgba(165, 164, 255, .28);
  border-radius: 4px;
  background: rgba(125, 124, 255, .09);
  color: #cbcaff;
  font: 10px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  vertical-align: middle;
}
.story-thread {
  position: relative;
  min-height: 46px;
  padding: 13px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--story-line);
  background: rgba(125, 124, 255, .045);
  font-size: 11px;
}
.story-thread strong { font-weight: 550; }
.story-thread-note { margin-left: auto; color: var(--story-secondary); font-size: 10px; }
.story-thread-dot { flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: var(--periwinkle-soft); box-shadow: 0 0 10px rgba(165, 164, 255, .4); }
.story-takeaway { margin: 24px 0 0; padding-left: 13px; border-left: 1px solid var(--periwinkle); color: var(--periwinkle-soft); font-size: 13px; line-height: 1.5; }

/* Evidence: the source and its extracted meaning share the same frame. */
.evidence-visual.story-evidence { min-height: 0; }
.story-source-line { display: flex; align-items: center; justify-content: space-between; padding: 17px 22px 0; }
.story-source-kind { color: var(--story-secondary); font-size: 11px; }
.story-evidence-pair { display: grid; grid-template-columns: 1fr 1fr; padding: 20px 22px 24px; gap: 24px; }
.story-source-document h3 { margin-top: 10px; font-size: 18px; font-weight: 550; letter-spacing: -.025em; }
.story-source-document blockquote { margin: 18px 0; color: #ded9e3; font: 22px/1.45 Georgia, "Times New Roman", serif; letter-spacing: -.025em; }
.story-source-document mark {
  color: var(--story-ink);
  background: linear-gradient(90deg, rgba(125, 124, 255, .30), rgba(125, 124, 255, .11));
  background-size: calc(40% + var(--evidence-output, 1) * 60%) 100%;
  background-repeat: no-repeat;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  border-bottom: 1px solid rgba(165, 164, 255, .65);
  padding: 1px 0;
}
.story-source-document .story-attribution { color: var(--story-secondary); font-size: 10px; line-height: 1.6; }
.story-finding { position: relative; align-self: center; padding: 20px 17px; border: 1px solid rgba(165, 164, 255, .32); border-radius: 10px; background: linear-gradient(140deg, rgba(125, 124, 255, .14), rgba(125, 124, 255, .025)); }
.story-finding::before { content: ""; position: absolute; left: -25px; top: 50%; width: 24px; height: 1px; background: var(--periwinkle-soft); opacity: calc(.4 + var(--evidence-output, 1) * .6); }
.story-finding h3 { margin-top: 14px; font-size: 25px; font-weight: 550; letter-spacing: -.04em; line-height: 1.12; }
.story-finding > p:not(.story-label) { margin: 13px 0 17px; color: var(--story-secondary); font-size: 12px; line-height: 1.55; }
.story-citation { display: flex; align-items: center; gap: 7px; margin-top: 9px; color: #d2ccde; font-size: 10px; }
.story-supporting-source { display: flex; align-items: start; gap: 10px; margin: 0 22px 20px; padding: 13px 14px; border: 1px solid var(--story-line); border-radius: 7px; background: rgba(255, 255, 255, .02); }
.story-supporting-source strong { font-size: 11px; font-weight: 550; }
.story-supporting-source p { margin-top: 6px; color: var(--story-secondary); font-size: 12px; line-height: 1.5; }

/* Direction: a readable document, not a miniature application screenshot. */
.product-proof.story-direction { padding: 0; }
.story-context { display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 13px 24px; border-bottom: 1px solid var(--story-line); background: rgba(125, 124, 255, .035); }
.story-context > span { display: flex; align-items: center; gap: 6px; color: var(--story-secondary); font-size: 10px; }
.story-context-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--periwinkle-soft); }
.story-prd { padding: 22px 28px; }
.story-document-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.story-status { padding: 4px 7px; border: 1px solid var(--story-line); border-radius: 5px; color: var(--periwinkle-soft); font-size: 10px; }
.story-prd h3 { margin: 12px 0 5px; font: 30px/1.12 Georgia, "Times New Roman", serif; letter-spacing: -.035em; }
.story-prd .story-prd-lead { color: var(--story-secondary); font-size: 12px; line-height: 1.5; }
.story-prd-section { margin-top: 20px; }
.story-prd h4 { font-size: 12px; font-weight: 600; }
.story-prd-section p, .story-scope p { margin-top: 7px; color: #d2cdd9; font: 14px/1.55 Georgia, "Times New Roman", serif; }
.story-scope { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--story-line); }
.story-scope > div:last-child { padding-left: 18px; border-left: 1px solid var(--story-line); }
.story-scope > div:last-child h4 { color: var(--story-secondary); }
.story-code-context { display: flex; align-items: start; gap: 8px; margin-top: 18px; }
.story-code-context p { color: var(--story-secondary); font-size: 10px; line-height: 1.6; }
.story-code-context strong { color: #d8d2e3; font-weight: 550; }
.story-agent-recommendation { position: relative; padding: 17px 28px 19px; border-top: 1px solid rgba(165, 164, 255, .27); background: linear-gradient(100deg, rgba(125, 124, 255, .13), rgba(125, 124, 255, .035)); }
.story-agent-recommendation::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--periwinkle-soft); transform: scaleX(calc(.25 + var(--proof-phase, 1) * .75)); transform-origin: left; }
.story-recommendation-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--periwinkle-soft); font-size: 11px; }
.story-recommendation-heading small { color: var(--story-secondary); font-size: 10px; }
.story-agent-recommendation > strong { display: block; margin-top: 10px; font-size: 17px; font-weight: 550; letter-spacing: -.02em; }
.story-agent-recommendation > p { margin-top: 8px; color: var(--story-secondary); font-size: 12px; line-height: 1.55; }

/* Delivery: one plan, actual work-order anatomy, and the retained rationale. */
.delivery-visual.story-delivery { min-height: 0; }
.story-work-origin { padding: 22px 24px 18px; border-bottom: 1px solid var(--story-line); }
.story-work-origin h3 { margin-top: 10px; font-size: 25px; font-weight: 550; letter-spacing: -.035em; line-height: 1.2; }
.story-origin-trail { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; color: var(--story-secondary); font-size: 11px; }
.story-origin-trail strong { color: var(--periwinkle-soft); font-weight: 550; }
.story-work-list { padding: 8px 12px; }
.story-work { display: grid; grid-template-columns: 94px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 15px 12px; border: 1px solid transparent; border-bottom-color: rgba(196, 185, 240, .10); }
.story-work:last-child { border-bottom-color: transparent; }
.story-work h4 { font-size: 14px; font-weight: 550; letter-spacing: -.015em; line-height: 1.4; }
.story-work p { margin-top: 5px; color: var(--story-secondary); font-size: 10px; line-height: 1.4; }
.story-work-state { display: flex; align-items: center; gap: 7px; color: #c0bafa; font-size: 17px; }
.story-work-state span { color: var(--story-secondary); font-size: 10px; }
.story-work-done { color: var(--success); }
.story-work-review { color: #d1b7ff; }
.story-work-id { color: var(--story-secondary); font: 10px ui-monospace, SFMono-Regular, Consolas, monospace; }
.story-work-selected { border-color: rgba(165, 164, 255, .32); border-radius: 7px; background: rgba(125, 124, 255, .09); }
.story-acceptance { position: relative; margin: 6px 24px 22px; padding: 15px 17px; border-left: 2px solid var(--periwinkle); background: rgba(125, 124, 255, .055); }
.story-acceptance > p:not(.story-label) { margin-top: 7px; color: #ddd7e6; font: 15px/1.5 Georgia, "Times New Roman", serif; }
.story-acceptance-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; color: var(--story-secondary); font-size: 10px; }
.story-delivery .story-thread::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--periwinkle-soft); transform: scaleX(calc(.25 + var(--delivery-progress, 1) * .75)); transform-origin: left; }

@media (min-width: 821px) {
  .product-proof.story-direction, .delivery-visual.story-delivery { width: calc(100% - 32px); margin-right: 32px; }
}
@media (min-width: 821px) and (max-height: 800px) {
  .story-prd { padding: 16px 24px; }
  .story-prd-section { margin-top: 13px; }
  .story-scope { margin-top: 13px; padding-top: 12px; }
  .story-code-context { margin-top: 12px; }
  .story-agent-recommendation { padding: 13px 24px; }
  .story-work-origin { padding: 17px 22px 14px; }
  .story-work { padding-top: 10px; padding-bottom: 10px; }
  .story-acceptance { margin-bottom: 16px; padding-top: 11px; padding-bottom: 11px; }
}
@media (max-width: 820px) {
  .evidence-visual.story-evidence, .product-proof.story-direction, .delivery-visual.story-delivery { opacity: 1; transform: none; filter: none; max-width: 100%; }
  .evidence-visual.story-evidence, .product-proof.story-direction, .delivery-visual.story-delivery { width: 100%; margin: 0; }
}
@media (max-width: 560px) {
  .story-chrome { padding: 13px 15px; font-size: 10px; }
  .story-breadcrumb { display: none; }
  .story-source-line { padding: 16px 17px 0; }
  .story-evidence-pair { grid-template-columns: 1fr; padding: 18px 17px; gap: 22px; }
  .story-source-document blockquote { font-size: 22px; margin: 14px 0; }
  .story-finding { padding: 18px; }
  .story-finding::before { width: 1px; height: 23px; left: 24px; top: -24px; }
  .story-finding h3 { font-size: 26px; max-width: 15ch; }
  .story-supporting-source { margin: 0 17px 18px; }
  .story-thread { padding: 13px 17px; flex-wrap: wrap; font-size: 11px; }
  .story-thread-note { display: none; }
  .story-context { padding: 13px 17px; gap: 10px 13px; }
  .story-prd { padding: 20px 18px; }
  .story-prd h3 { font-size: 29px; }
  .story-prd-section p, .story-scope p { font-size: 15px; }
  .story-scope { grid-template-columns: 1fr; gap: 14px; }
  .story-scope > div:last-child { padding-left: 0; padding-top: 14px; border-left: 0; border-top: 1px solid var(--story-line); }
  .story-agent-recommendation { padding: 18px; }
  .story-recommendation-heading { flex-wrap: wrap; }
  .story-work-origin { padding: 20px 18px; }
  .story-work-origin h3 { font-size: 25px; }
  .story-work-list { padding: 7px; }
  .story-work { grid-template-columns: 71px minmax(0, 1fr); gap: 8px; padding: 14px 9px; }
  .story-work-id { display: none; }
  .story-work h4 { font-size: 14px; }
  .story-work-state { gap: 5px; }
  .story-work-state span { font-size: 9px; }
  .story-acceptance { margin: 8px 17px 20px; padding: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-source-document mark { background-size: 100% 100%; }
  .story-agent-recommendation::before, .story-delivery .story-thread::before { transform: none; }
}

/* Product colors sampled from signalboard/src/app/signatic-tokens.css.
 * Agent: a/a-hi; human: info; completed: ok; caution: warn; context: e3.
 * These tokens are local to the fixtures and never recolor the atmosphere.
 */
.story-scene {
  --story-agent: #7A7EF5;
  --story-agent-rgb: 92, 99, 240;
  --story-human: #5D9FE8;
  --story-complete: #35C98A;
  --story-caution: #E0A33F;
  --story-context-color: #2FBFD6;
  --story-duration: 7.2s;
  --story-play-state: running;
}
.story-scene[data-story-paused="true"] { --story-play-state: paused; }
.story-source-kind, .story-source-document .story-label, .story-owner-human { color: var(--story-human); }
.story-ref { color: #99c5f6; border-color: rgba(93, 159, 232, .35); background: rgba(93, 159, 232, .08); }
.story-finding .story-label, .story-owner-agent { color: var(--story-agent); }
.story-finding { border-color: rgba(var(--story-agent-rgb), .65); }
.story-finding::before { background: var(--story-agent); }
.story-finding::after {
  content: "";
  position: absolute;
  top: calc(50% - 3px);
  left: -27px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--story-human);
  box-shadow: 0 0 10px 2px rgba(93, 159, 232, .55);
  opacity: 0;
  pointer-events: none;
}
.story-context > span:nth-child(1) { --context-color: var(--story-human); }
.story-context > span:nth-child(2) { --context-color: #B98AD8; }
.story-context > span:nth-child(3) { --context-color: var(--story-context-color); }
.story-context-dot { background: var(--context-color); }
.story-code-context .story-ref { color: var(--story-context-color); border-color: rgba(47, 191, 214, .35); background: rgba(47, 191, 214, .07); }
.story-scope > div:last-child h4 { color: #e8bc75; }
.story-agent-recommendation { overflow: hidden; border-top-color: rgba(var(--story-agent-rgb), .45); }
.story-recommendation-heading > span { color: var(--story-agent); }
.story-agent-recommendation::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 36%;
  background: linear-gradient(90deg, transparent, rgba(var(--story-agent-rgb), .24), transparent);
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
}
.story-direction .story-thread-dot { background: var(--story-human); }
.story-work-done { color: var(--story-complete); }
.story-work-done span { color: #86DDB6; }
.story-work-selected { position: relative; overflow: hidden; }
.story-work-selected::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--story-agent), var(--story-human));
  transform: scaleX(1);
  transform-origin: left;
  opacity: .45;
}
.story-work-selected .story-work-state { position: relative; display: block; min-height: 15px; }
.story-work-selected .story-status-final { color: var(--story-human); font-size: 10px; white-space: nowrap; }
.story-work-selected .story-status-working { display: none; position: absolute; inset: 0; color: var(--story-agent); font-size: 10px; white-space: nowrap; }
.story-handoff-arrow { display: inline-block; color: var(--story-human); margin: 0 3px; }
.story-acceptance { border-left-color: var(--story-human); }

/* Repeating product sequences hold a readable result before the next cycle. */
.story-scene[data-story-motion="play"] .story-source-document mark { animation: story-quote var(--story-duration) ease infinite both; }
.story-scene[data-story-motion="play"] .story-finding::after { animation: story-source-travel var(--story-duration) ease infinite both; }
.story-scene[data-story-motion="play"] .story-finding { animation: story-finding var(--story-duration) ease infinite both; }
.story-scene[data-story-motion="play"] .story-citation .story-ref { animation: story-citation var(--story-duration) ease infinite both; }
.story-scene[data-story-motion="play"] .story-context-dot { animation: story-context var(--story-duration) ease infinite both; }
.story-scene[data-story-motion="play"] .story-context > span:nth-child(2) .story-context-dot { animation-delay: .35s; }
.story-scene[data-story-motion="play"] .story-context > span:nth-child(3) .story-context-dot { animation-delay: .7s; }
.story-scene[data-story-motion="play"] .story-prd-section .story-ref { animation: story-citation var(--story-duration) ease infinite both; }
.story-scene[data-story-motion="play"] .story-agent-recommendation::after { animation: story-reasoning var(--story-duration) ease infinite both; }
.story-direction[data-story-motion="play"] .story-thread-dot { animation: story-context var(--story-duration) ease infinite both; }
.story-scene[data-story-motion="play"] .story-work-selected::after { animation: story-work-progress var(--story-duration) ease infinite both; }
.story-scene[data-story-motion="play"] .story-status-working { display: block; animation: story-working var(--story-duration) ease infinite both; }
.story-scene[data-story-motion="play"] .story-status-final { display: inline-block; animation: story-reviewed var(--story-duration) ease infinite both; }
.story-scene[data-story-motion="play"] .story-handoff-arrow { animation: story-handoff var(--story-duration) ease infinite both; }
.story-scene[data-story-motion="play"] .story-owner-human { animation: story-human var(--story-duration) ease infinite both; }
.story-scene *, .story-scene *::before, .story-scene *::after { animation-play-state: var(--story-play-state) !important; }

@keyframes story-quote {
  0% { background-size: 0% 100%; }
  25%, 100% { background-size: 100% 100%; }
}
@keyframes story-source-travel {
  0%, 20% { opacity: 0; transform: translate(0, 0); }
  25% { opacity: 1; transform: translate(0, 0); }
  40% { opacity: 1; transform: translate(var(--story-travel-x, 26px), var(--story-travel-y, 0px)); }
  45%, 100% { opacity: 0; transform: translate(var(--story-travel-x, 26px), var(--story-travel-y, 0px)); }
}
@keyframes story-finding {
  0%, 25% { transform: translateX(6px); box-shadow: 0 0 0 rgba(92, 99, 240, 0); }
  43% { transform: translateX(0); box-shadow: 0 0 44px rgba(92, 99, 240, .42); }
  70%, 100% { transform: translateX(0); box-shadow: 0 0 0 rgba(92, 99, 240, 0); }
}
@keyframes story-citation {
  0%, 38% { background-color: rgba(93, 159, 232, .08); box-shadow: 0 0 0 rgba(93, 159, 232, 0); }
  52% { background-color: rgba(93, 159, 232, .24); box-shadow: 0 0 18px rgba(93, 159, 232, .38); }
  80%, 100% { background-color: rgba(93, 159, 232, .08); box-shadow: 0 0 0 rgba(93, 159, 232, 0); }
}
@keyframes story-context {
  0%, 65%, 100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; }
  25% { transform: scale(1.7); box-shadow: 0 0 0 4px color-mix(in srgb, var(--context-color, var(--story-human)) 15%, transparent); }
}
@keyframes story-reasoning {
  0%, 30% { transform: translateX(-100%); opacity: 0; }
  40% { opacity: 1; }
  80%, 100% { transform: translateX(300%); opacity: 0; }
}
@keyframes story-work-progress {
  0%, 10% { transform: scaleX(.04); opacity: 1; }
  55% { transform: scaleX(1); opacity: 1; }
  85%, 100% { transform: scaleX(1); opacity: .45; }
}
@keyframes story-working {
  0%, 48% { opacity: 1; }
  56%, 100% { opacity: 0; }
}
@keyframes story-reviewed {
  0%, 48% { opacity: 0; transform: translateY(3px); }
  60%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes story-handoff {
  0%, 35% { transform: translateX(-3px); opacity: .5; }
  55%, 100% { transform: translateX(0); opacity: 1; }
}
@keyframes story-human {
  0%, 40% { color: var(--story-secondary); }
  60%, 100% { color: var(--story-human); }
}

.story-source-document { position: relative; overflow: hidden; }
.story-source-document::after {
  content: "";
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  height: 48px;
  border-bottom: 2px solid rgba(122, 126, 245, .8);
  background: linear-gradient(transparent, rgba(92, 99, 240, .2));
  opacity: 0;
  pointer-events: none;
}
.story-scene[data-story-motion="play"] .story-source-document::after { animation: story-source-scan var(--story-duration) ease infinite both; }
.story-context > span { border-radius: 4px; }
.story-scene[data-story-motion="play"] .story-context > span { animation: story-context-link var(--story-duration) ease infinite both; }
.story-scene[data-story-motion="play"] .story-context > span:nth-child(2) { animation-delay: .35s; }
.story-scene[data-story-motion="play"] .story-context > span:nth-child(3) { animation-delay: .7s; }
.story-work-selected::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent, rgba(92, 99, 240, .22), rgba(93, 159, 232, .15), transparent);
  transform: translateX(-100%);
  pointer-events: none;
}
.story-scene[data-story-motion="play"] .story-work-selected::before { animation: story-work-sweep var(--story-duration) ease infinite both; }
.story-work-selected::after { height: 3px; }
@keyframes story-source-scan {
  0%, 5% { transform: translateY(-35px); opacity: 0; }
  12% { opacity: .85; }
  36% { transform: translateY(145px); opacity: .85; }
  44%, 100% { transform: translateY(170px); opacity: 0; }
}
@keyframes story-context-link {
  0%, 45%, 100% { box-shadow: 0 0 0 0 transparent; color: var(--story-secondary); }
  20% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--context-color) 14%, transparent); color: var(--context-color); }
}
@keyframes story-work-sweep {
  0%, 8% { transform: translateX(-100%); opacity: 0; }
  18%, 40% { opacity: 1; }
  60%, 100% { transform: translateX(100%); opacity: 0; }
}
.story-motion-toggle {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid var(--story-line);
  border-radius: 5px;
  background: transparent;
  color: var(--story-secondary);
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}
.story-motion-toggle:hover { color: var(--story-ink); border-color: var(--story-agent); }
.story-motion-toggle:focus-visible { outline: 2px solid var(--story-human); outline-offset: 3px; }
.story-motion-toggle[hidden] { display: none; }
@media (max-width: 560px) {
  .story-chrome { flex-wrap: wrap; gap: 7px 10px; }
  .story-chrome > span:nth-child(2) { margin-left: auto; }
}

/* The close names the outcome. Keep its existing stage and conversion flow. */
.moment.action .final-conversion h2 {
  max-width: 18ch;
  margin: 0 auto;
  font-size: clamp(42px, 4.6vw, 68px);
  font-weight: 470;
  letter-spacing: -.058em;
  line-height: 1.05;
  text-wrap: balance;
}
.moment.action .final-conversion > p:not(.final-kicker) { max-width: 46ch; font-size: 16px; }
@media (max-width: 560px) {
  .story-finding { --story-travel-x: 0px; --story-travel-y: 23px; }
  .story-finding::after { top: -27px; left: 21px; }
  .story-work-selected .story-status-working, .story-work-selected .story-status-final { font-size: 9px; }
  .moment.action .final-conversion h2 { font-size: clamp(42px, 12vw, 58px); }
}
@media (prefers-reduced-motion: reduce) {
  .story-scene *, .story-scene *::before, .story-scene *::after { animation: none !important; }
  .story-scene .story-status-working { display: none !important; }
  .story-scene .story-status-final { opacity: 1; transform: none; }
}