.motion-stage {
  --stage-paper: #f5f2e9;
  --stage-ink: #202823;
  --stage-orange: #ff6b35;
  --stage-ease: cubic-bezier(.22,.8,.2,1);
  position: relative;
  width: 100%;
  min-width: 0;
  color: var(--stage-paper);
  font-family: inherit;
  line-height: 1.4;
  isolation: isolate;
}

.motion-stage *, .motion-stage *::before, .motion-stage *::after { box-sizing: border-box; }
.motion-stage button { font-family: inherit; }
.motion-stage__topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 0 18px;
  border-bottom: 1px solid #f5f2e92c;
}
.motion-stage__sample, .motion-stage__sequence,
.motion-stage__paper-header, .motion-stage__document-line,
.motion-stage__paper-footer, .motion-stage__comparison-label,
.motion-stage__comparison-note, .motion-stage__review-header,
.motion-stage__evidence-tags, .motion-stage__human-approval,
.motion-stage__canvas-label, .motion-stage__step > span {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
.motion-stage__sample { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .025em; }
.motion-stage__sample > span { color: var(--stage-orange); font-size: 18px; line-height: 1; }
.motion-stage__sequence { color: #f5f2e985; font-size: 10px; letter-spacing: .07em; }
.motion-stage__sequence [data-motion-counter] { color: var(--stage-paper); }
.motion-stage__canvas { position: relative; height: 360px; margin: 15px 0 8px; }
.motion-stage__grid { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.motion-stage__grid > path { fill: none; stroke: #f5f2e911; stroke-width: 1; vector-effect: non-scaling-stroke; }
.motion-stage__grid > .motion-stage__grid-axis { stroke: #f5f2e90a; }
.motion-stage__grid > .motion-stage__source-path { stroke: #8d9a8e; opacity: .55; transition: opacity .8s ease; }
.motion-stage__source-node { fill: #a1aea0; transition: opacity .8s ease; }
.motion-stage__grid > .motion-stage__signal { stroke: var(--stage-orange); stroke-width: 3; stroke-dasharray: 408; stroke-dashoffset: 408; transition: stroke-dashoffset 1s var(--stage-ease), opacity .5s ease; opacity: 0; }
.motion-stage__grid > .motion-stage__review-link { stroke: var(--stage-orange); stroke-width: 2; stroke-dasharray: 240; stroke-dashoffset: 240; transition: stroke-dashoffset 1s var(--stage-ease), opacity .5s ease; opacity: 0; }
.motion-stage__grid > .motion-stage__crosshair { stroke: #f5f2e947; }

.motion-stage__paper {
  position: absolute;
  top: var(--paper-y);
  left: var(--paper-x);
  width: 31%;
  height: 270px;
  transform: rotate(var(--paper-rotation)) scale(var(--paper-scale, 1));
  transform-origin: 50% 30%;
  transition: left .95s var(--stage-ease), top .95s var(--stage-ease), transform .95s var(--stage-ease), opacity .7s ease;
}
.motion-stage__paper::before {
  position: absolute;
  content: "";
  inset: 7px -4px -7px 4px;
  background: #c8cdc1;
  border: 1px solid #222a2466;
  transform: rotate(2deg);
  z-index: -1;
}
.motion-stage__paper--order { --paper-x: 2.5%; --paper-y: 54px; --paper-rotation: -7deg; z-index: 2; }
.motion-stage__paper--receipt { --paper-x: 34.5%; --paper-y: 23px; --paper-rotation: 1deg; z-index: 4; }
.motion-stage__paper--invoice { --paper-x: 65.5%; --paper-y: 56px; --paper-rotation: 7deg; z-index: 3; }
.motion-stage__sheet {
  width: 100%;
  height: 100%;
  padding: 17px 16px 14px;
  border: 1px solid #d7dbcf;
  background: var(--stage-paper);
  color: var(--stage-ink);
  box-shadow: 0 18px 28px #0000002a, 0 2px 3px #00000020;
  animation: motion-stage-float 7s ease-in-out infinite;
}
.motion-stage__paper--receipt .motion-stage__sheet { animation-delay: -2.3s; }
.motion-stage__paper--invoice .motion-stage__sheet { animation-delay: -4.5s; }
.motion-stage__paper-header { display: flex; justify-content: space-between; align-items: center; font-size: 8px; letter-spacing: .045em; line-height: 1; color: #647063; }
.motion-stage__document-mark { display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid #9ba592; color: #394436; font-size: 9px; }
.motion-stage__document-name { margin: 14px 0 15px; font-size: 13px; font-weight: 550; letter-spacing: -.035em; white-space: nowrap; }
.motion-stage__quantity { padding-bottom: 17px; border-bottom: 1px solid #cdd1c4; font-size: clamp(42px, 5.8vw, 67px); font-weight: 500; letter-spacing: -.075em; line-height: .85; font-variant-numeric: tabular-nums; }
.motion-stage__quantity > span { display: block; margin-top: 10px; font-size: 10px; font-weight: 400; letter-spacing: 0; color: #52604e; }
.motion-stage__document-line { display: flex; justify-content: space-between; gap: 4px; margin-top: 11px; font-size: 9px; line-height: 1; }
.motion-stage__document-line > span:first-child { color: #778270; }
.motion-stage__paper-footer { display: flex; align-items: center; gap: 5px; margin-top: 17px; font-size: 8px; color: #62715b; white-space: nowrap; }
.motion-stage__tick { font-size: 12px; }
.motion-stage__comparison {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 264px;
  height: 81px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 19px 42px;
  align-items: center;
  color: var(--stage-paper);
  opacity: 0;
  transform: translateY(15px);
  transition: opacity .55s ease, transform .8s var(--stage-ease);
}
.motion-stage__comparison-label { grid-column: 1 / -1; font-size: 8px; letter-spacing: .13em; color: #c1cabc; }
.motion-stage__comparison-math { display: inline-flex; align-items: center; gap: 15px; font-size: 33px; font-weight: 450; letter-spacing: -.055em; line-height: 1; font-variant-numeric: tabular-nums; }
.motion-stage__comparison-math > span { color: #8d9c89; font-size: 22px; }
.motion-stage__comparison-math > strong { color: var(--stage-orange); font-weight: inherit; }
.motion-stage__comparison-note { font-size: 9px; padding-left: 12px; }
.motion-stage__review-card {
  position: absolute;
  left: 36%;
  top: 34px;
  width: 61%;
  min-height: 281px;
  padding: 19px 23px 15px;
  color: var(--stage-ink);
  background: var(--stage-paper);
  border-top: 6px solid var(--stage-orange);
  box-shadow: 0 22px 36px #00000038;
  opacity: 0;
  transform: translate(22px, 24px) rotate(7deg) scale(.94);
  transform-origin: 30% 80%;
  transition: opacity .45s ease, transform .95s var(--stage-ease);
  z-index: 6;
  pointer-events: none;
}
.motion-stage__review-header { display: flex; align-items: center; gap: 7px; font-size: 9px; letter-spacing: .055em; }
.motion-stage__review-header > span:last-child { margin-left: auto; color: #7e8878; }
.motion-stage__review-symbol { display: inline-grid; place-items: center; width: 17px; height: 17px; background: var(--stage-orange); color: #202823; font-weight: bold; }
.motion-stage__review-quantity { display: flex; align-items: flex-end; gap: 12px; margin: 21px 0 10px; font-size: 84px; font-weight: 500; line-height: .82; letter-spacing: -.075em; }
.motion-stage__review-quantity > span { max-width: 88px; margin-bottom: 4px; font-size: 15px; font-weight: 450; line-height: 1.1; letter-spacing: -.03em; }
.motion-stage__review-explanation { margin: 16px 0 18px; font-size: 12px; line-height: 1.45; color: #626e5b; }
.motion-stage__evidence-tags { display: flex; gap: 6px; }
.motion-stage__evidence-tags > span { display: inline-flex; justify-content: space-between; gap: 8px; padding: 6px 7px; border: 1px solid #cad0c1; font-size: 8px; color: #6a7462; }
.motion-stage__evidence-tags b { color: var(--stage-ink); font-weight: 500; }
.motion-stage__human-approval { display: flex; gap: 6px; margin-top: 17px; padding-top: 12px; border-top: 1px solid #cad0c1; font-size: 9px; line-height: 1.35; }
.motion-stage__human-approval > span { color: #d65224; font-size: 15px; line-height: .8; }
.motion-stage__canvas-label { position: absolute; left: 0; bottom: 4px; font-size: 8px; letter-spacing: .07em; color: #a5b2a1; }
.motion-stage__caption { min-height: 35px; padding: 4px 0 11px; color: #c7d0c2; font-size: 12px; line-height: 1.5; }
.motion-stage__controls { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 13px 0 0; border-top: 1px solid #f5f2e92c; }
.motion-stage__steps { display: flex; gap: 5px; }
.motion-stage__step, .motion-stage__play { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; border: 1px solid transparent; background: transparent; color: #abb8a6; font-size: 11px; font-weight: 450; line-height: 1; cursor: pointer; touch-action: manipulation; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.motion-stage__step { padding: 0 10px; }
.motion-stage__step > span { color: #7e8c78; font-size: 8px; }
.motion-stage__step[aria-pressed="true"] { color: var(--stage-paper); border-color: #f5f2e959; background: #f5f2e90a; }
.motion-stage__step[aria-pressed="true"] > span { color: var(--stage-orange); }
.motion-stage__step:hover, .motion-stage__play:hover { color: var(--stage-paper); background: #f5f2e910; }
.motion-stage__play:disabled { color: #7e8c78; cursor: default; background: transparent; }
.motion-stage__play { padding: 0 8px; font-size: 10px; }
.motion-stage__play-icon { position: relative; display: inline-block; width: 10px; height: 10px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.motion-stage[data-paused="true"] .motion-stage__play-icon { width: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid currentColor; border-right: 0; }
.motion-stage button:focus-visible { outline: 2px solid var(--stage-orange); outline-offset: 4px; }
.motion-stage__sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.motion-stage[data-stage="compare"] .motion-stage__paper--order { --paper-x: 2.5%; --paper-y: 13px; --paper-rotation: 0deg; --paper-scale: .9; }
.motion-stage[data-stage="compare"] .motion-stage__paper--receipt { --paper-x: 34.5%; --paper-y: 13px; --paper-rotation: 0deg; --paper-scale: .9; }
.motion-stage[data-stage="compare"] .motion-stage__paper--invoice { --paper-x: 65.5%; --paper-y: 13px; --paper-rotation: 0deg; --paper-scale: .9; }
.motion-stage[data-stage="compare"] .motion-stage__comparison { opacity: 1; transform: translateY(0); }
.motion-stage[data-stage="compare"] .motion-stage__signal { opacity: 1; stroke-dashoffset: 0; }
.motion-stage[data-stage="compare"] .motion-stage__source-path,
.motion-stage[data-stage="compare"] .motion-stage__source-node { opacity: 0; }
.motion-stage[data-stage="review"] .motion-stage__paper--order { --paper-x: 3%; --paper-y: 61px; --paper-rotation: -13deg; --paper-scale: .84; opacity: .72; }
.motion-stage[data-stage="review"] .motion-stage__paper--receipt { --paper-x: 11%; --paper-y: 36px; --paper-rotation: -5deg; --paper-scale: .84; opacity: .8; }
.motion-stage[data-stage="review"] .motion-stage__paper--invoice { --paper-x: 19%; --paper-y: 59px; --paper-rotation: 4deg; --paper-scale: .84; opacity: .86; }
.motion-stage[data-stage="review"] .motion-stage__review-card { opacity: 1; transform: translate(0,0) rotate(-2deg) scale(1); }
.motion-stage[data-stage="review"] .motion-stage__review-link { opacity: 1; stroke-dashoffset: 0; }
.motion-stage[data-stage="review"] .motion-stage__source-path,
.motion-stage[data-stage="review"] .motion-stage__source-node { opacity: 0; }
.motion-stage[data-paused="true"] .motion-stage__sheet,
.motion-stage[data-suspended="true"] .motion-stage__sheet { animation-play-state: paused; }
.motion-stage[data-reduced-motion="true"] .motion-stage__sheet { animation: none; }
.motion-stage[data-reduced-motion="true"] *,
.motion-stage[data-reduced-motion="true"] *::before,
.motion-stage[data-reduced-motion="true"] *::after { transition-duration: 0s !important; }

@keyframes motion-stage-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@media (max-width: 700px) {
  .motion-stage__topline { padding-bottom: 12px; }
  .motion-stage__canvas { height: 310px; margin-top: 13px; }
  .motion-stage__paper { height: 217px; }
  .motion-stage__sheet { padding: 13px 10px 12px; }
  .motion-stage__paper-header { font-size: 6px; }
  .motion-stage__document-mark { width: 18px; height: 18px; font-size: 7px; }
  .motion-stage__document-name { font-size: 11px; margin: 13px 0 16px; }
  .motion-stage__quantity { font-size: clamp(36px, 8.9vw, 56px); padding-bottom: 14px; }
  .motion-stage__quantity > span { font-size: 8px; margin-top: 10px; }
  .motion-stage__document-line { font-size: 7px; margin-top: 10px; }
  .motion-stage__paper-footer { font-size: 6px; margin-top: 14px; gap: 3px; }
  .motion-stage__paper--order { --paper-y: 45px; --paper-rotation: -5deg; }
  .motion-stage__paper--receipt { --paper-y: 22px; }
  .motion-stage__paper--invoice { --paper-y: 46px; --paper-rotation: 5deg; }
  .motion-stage__comparison { top: 226px; left: 5%; right: 5%; }
  .motion-stage__comparison-math { gap: 10px; font-size: 31px; }
  .motion-stage__comparison-note { font-size: 8px; padding-left: 6px; }
  .motion-stage__review-card { top: 29px; left: 34%; width: 63%; min-height: 263px; padding: 15px 15px 13px; }
  .motion-stage__review-header { font-size: 7px; gap: 5px; }
  .motion-stage__review-header > span:last-child { display: none; }
  .motion-stage__review-quantity { font-size: 74px; gap: 9px; margin-top: 23px; }
  .motion-stage__review-quantity > span { font-size: 13px; max-width: 69px; }
  .motion-stage__review-explanation { font-size: 10px; margin-top: 15px; margin-bottom: 14px; }
  .motion-stage__evidence-tags { gap: 4px; }
  .motion-stage__evidence-tags > span { padding: 5px 4px; font-size: 7px; gap: 4px; }
  .motion-stage__human-approval { font-size: 8px; margin-top: 16px; padding-top: 11px; }
  .motion-stage__caption { font-size: 11px; min-height: 42px; }
  .motion-stage__controls { padding-top: 10px; }
  .motion-stage__steps { gap: 2px; }
  .motion-stage__step { padding: 0 8px; gap: 5px; font-size: 10px; }
  .motion-stage__play { padding: 0 5px; }
}

@media (max-width: 380px) {
  .motion-stage__sequence { font-size: 8px; }
  .motion-stage__paper-header > span:first-child { letter-spacing: 0; }
  .motion-stage__document-name { font-size: 10px; }
  .motion-stage__step { padding: 0 6px; }
  .motion-stage__review-quantity { font-size: 62px; }
  .motion-stage__review-quantity > span { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-stage *, .motion-stage *::before, .motion-stage *::after { animation: none !important; transition-duration: 0s !important; }
}