.library.story-demo {
  --story-progress: 0;
  position: relative;
  overflow: hidden;
  padding: 28px 28px 20px;
  border-radius: 19px;
  background: linear-gradient(145deg, #fffef6 0%, #f2f5e8 68%, #dfebd5 100%);
  color: #073d32;
}
.story-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.story-heading-row .eyebrow { font-size: 9px; letter-spacing: .14em; margin: 0; color: #54695c; }
.story-edition { font-size: 6px; letter-spacing: .13em; color: #7e8c78; text-align: right; }
.library.story-demo > h3 { font: 38px/1.05 var(--serif); letter-spacing: -1.5px; padding: 0; margin: 15px 0 0; border: 0; }
.story-canvas { margin: -1px -16px -2px; aspect-ratio: 480 / 330; }
.story-art { display: block; width: 100%; height: 100%; color: #073d32; overflow: hidden; }
.story-art text { fill: #073d32; font-family: var(--font); }
.story-art .story-serif { font-family: var(--serif); }
.story-connector { stroke: #073d32; stroke-width: 1.25; stroke-dasharray: 4 5; stroke-linecap: round; opacity: .38; }
.story-scene { opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s; }
.story-demo[data-step="0"] .story-scene-scan, .story-demo[data-step="1"] .story-scene-review, .story-demo[data-step="2"] .story-scene-share { opacity: 1; visibility: visible; }
.story-caption { display: grid; min-height: 35px; align-items: center; margin: 6px 0; text-align: center; }
.story-caption p { grid-area: 1 / 1; opacity: 0; transform: translateY(5px); transition: opacity .4s, transform .4s; font-size: 11px; color: #52674c; }
.story-demo[data-step="0"] [data-caption="0"], .story-demo[data-step="1"] [data-caption="1"], .story-demo[data-step="2"] [data-caption="2"] { opacity: 1; transform: none; }
.story-upload-toast, .story-selected-photo, .story-route-dot { opacity: 0; }
.story-demo[data-step="0"] .story-tap-pulse { animation: story-tap 4.5s both; transform-origin: 370px 243px; }
.story-demo[data-step="0"] .story-upload-toast { animation: story-uploaded 4.5s both; }
.story-demo[data-step="1"] .story-selected-photo { animation: story-selection 4.5s both; }
.story-demo[data-step="2"] .story-route-left { animation: story-route-left 4.5s both; }
.story-demo[data-step="2"] .story-route-right { animation: story-route-right 4.5s both; }
@keyframes story-tap { 0%, 43% { opacity: 0; transform: scale(.3); } 49% { opacity: .7; } 60%, 100% { opacity: 0; transform: scale(1.7); } }
@keyframes story-uploaded { 0%, 64% { opacity: 0; transform: translateY(7px); } 76%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes story-selection { 0%, 48% { opacity: 0; } 58%, 100% { opacity: 1; } }
@keyframes story-route-left { 0%, 28% { opacity: 0; transform: translate(238px,85px); } 34% { opacity: 1; } 48% { transform: translate(154px,42px); } 66% { opacity: 1; transform: translate(119px,108px); } 73%, 100% { opacity: 0; transform: translate(119px,108px); } }
@keyframes story-route-right { 0%, 36% { opacity: 0; transform: translate(261px,85px); } 42% { opacity: 1; } 57% { transform: translate(354px,47px); } 75% { opacity: 1; transform: translate(364px,133px); } 82%, 100% { opacity: 0; transform: translate(364px,133px); } }
.story-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-top: 3px; }
.story-step { position: relative; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; background: transparent; border: 0; padding: 12px 0 16px; color: #6f7b68; font: inherit; font-size: 10px; font-weight: 600; line-height: 1.35; text-align: left; cursor: pointer; }
.story-step-number { font-size: 9px; letter-spacing: .07em; font-weight: 500; }
.story-step.is-active { color: #073d32; }
.story-step:hover { color: #073d32; }
.story-step:focus-visible { outline: 2px solid #073d32; outline-offset: 5px; border-radius: 2px; }
.story-step-track { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; border-radius: 3px; overflow: hidden; background: #073d3219; }
.story-step-track::after { content: ''; display: block; height: 100%; width: 100%; background: #073d32; transform: scaleX(0); transform-origin: left; }
.story-step.is-active .story-step-track::after { transform: scaleX(var(--story-progress)); }
.story-bottom { display: flex; flex-direction: column; gap: 9px; padding-top: 18px; }
.story-bottom p { font-size: 10px; color: #70816d; margin: 0; line-height: 1.5; }
.story-bottom .text-link { font-size: 11px; align-self: flex-start; gap: 10px; }
.story-bottom .icon { width: 16px; height: 16px; }

/* Each scene owns one 4.5s composition. Transform/opacity keep the card stable. */
.story-demo[data-step="0"] .story-stand { animation: story-stand-in 4.5s both; transform-origin: 148px 268px; }
.story-demo[data-step="0"] .story-hand-phone { animation: story-phone-in 4.5s both; transform-origin: 350px 330px; }
.story-demo[data-step="0"] .story-scan-line { animation: story-scan 4.5s both; }
.story-demo[data-step="0"] .story-photo-lift { animation: story-photo-lift 4.5s both; transform-origin: 281px 111px; }
.story-demo[data-step="1"] .story-review-window { animation: story-window-in 4.5s both; }
.story-demo[data-step="1"] .story-review-card { animation: story-card-arrive 4.5s both; }
.story-demo[data-step="1"] .story-review-card-two { animation-delay: .16s; }
.story-demo[data-step="1"] .story-review-card-three { animation-delay: .32s; }
.story-demo[data-step="1"] .story-cursor { animation: story-cursor-click 4.5s both; }
.story-demo[data-step="1"] .story-click-ring { animation: story-click 4.5s both; transform-origin: 319px 210px; }
.story-demo[data-step="1"] .story-approval-pill, .story-demo[data-step="1"] .story-approval-badge { animation: story-approved 4.5s both; transform-box: fill-box; transform-origin: center; }
.story-demo[data-step="2"] .story-destination { animation: story-spread 4.5s both; transform-origin: 240px 200px; }
.story-demo[data-step="2"] .story-destination-web { --story-x: 100px; --story-turn: 13deg; }
.story-demo[data-step="2"] .story-destination-social { --story-x: 0px; --story-turn: -5deg; animation-delay: .12s; }
.story-demo[data-step="2"] .story-destination-email { --story-x: -100px; --story-turn: -13deg; animation-delay: .24s; }
.story-demo[data-step="2"] .story-share-badge { animation: story-share-ready 4.5s both; }
.story-demo[data-step="2"] .story-distribute-path { animation: story-path-flow 4.5s linear both; }
.story-scene .story-sparkle { animation: story-sparkle 4.5s both; transform-box: fill-box; transform-origin: center; }
.story-demo .story-scene *, .story-demo .story-step-track::after { animation-play-state: paused; }
.story-demo.story-running .story-scene * { animation-play-state: running; }

@keyframes story-stand-in { 0% { opacity: 0; transform: translateY(18px) rotate(-5deg); } 18%, 100% { opacity: 1; transform: none; } }
@keyframes story-phone-in { 0%, 5% { opacity: 0; transform: translate(50px, 35px) rotate(8deg); } 26%, 100% { opacity: 1; transform: none; } }
@keyframes story-scan { 0%, 24% { opacity: 0; transform: translateY(-23px); } 30% { opacity: 1; transform: translateY(-23px); } 49% { opacity: 1; transform: translateY(23px); } 55%, 100% { opacity: 0; transform: translateY(23px); } }
@keyframes story-photo-lift { 0%, 48% { opacity: 0; transform: translate(65px, 78px) rotate(8deg) scale(.75); } 68%, 94% { opacity: 1; transform: translate(-12px, -1px) rotate(-9deg); } 100% { opacity: 0; transform: translate(-28px, -17px) rotate(-9deg); } }
@keyframes story-window-in { 0% { opacity: 0; transform: translateY(15px); } 17%, 100% { opacity: 1; transform: none; } }
@keyframes story-card-arrive { 0%, 10% { opacity: 0; transform: translateY(28px); } 31%, 100% { opacity: 1; transform: none; } }
@keyframes story-cursor-click { 0%, 20% { opacity: 0; transform: translate(50px, 35px); } 35% { opacity: 1; transform: translate(8px, 10px); } 45%, 57% { opacity: 1; transform: translate(-56px, 50px); } 72%, 100% { opacity: 0; transform: translate(-36px, 75px); } }
@keyframes story-click { 0%, 45% { opacity: 0; transform: scale(.35); } 48% { opacity: .6; transform: scale(.4); } 57%, 100% { opacity: 0; transform: scale(1.3); } }
@keyframes story-approved { 0%, 49% { opacity: 0; transform: scale(.7); } 59% { opacity: 1; transform: scale(1.08); } 66%, 100% { opacity: 1; transform: scale(1); } }
@keyframes story-spread { 0%, 5% { opacity: 0; transform: translate(var(--story-x), 23px) rotate(var(--story-turn)) scale(.85); } 31%, 100% { opacity: 1; transform: none; } }
@keyframes story-share-ready { 0%, 32% { opacity: 0; transform: translateY(9px); } 46%, 100% { opacity: 1; transform: none; } }
@keyframes story-path-flow { 0%, 20% { opacity: 0; stroke-dashoffset: 25; } 35%, 100% { opacity: .38; stroke-dashoffset: -35; } }
@keyframes story-sparkle { 0%, 58% { opacity: 0; transform: scale(.2) rotate(-45deg); } 74% { opacity: 1; transform: scale(1) rotate(0); } 95%, 100% { opacity: 0; transform: scale(.65) rotate(15deg); } }

@media (min-width: 801px) and (max-height: 900px) {
  .library.story-demo { padding: 20px 24px 18px; transform: none; }
  .library.story-demo > h3 { font-size: 34px; margin-top: 10px; }
  .story-canvas { aspect-ratio: auto; height: clamp(180px, 30vh, 270px); margin-top: 8px; }
  .story-bottom { padding-top: 12px; }
}

@media (max-width: 1100px) and (min-width: 821px) {
  .library.story-demo { padding: 24px 20px 20px; }
  .library.story-demo > h3 { font-size: 33px; }
  .story-edition { display: none; }
  .story-step { font-size: 9px; }
}
@media (max-width: 520px) {
  .library.story-demo { padding: 23px 19px 20px; border-radius: 15px; }
  .library.story-demo > h3 { font-size: 35px; letter-spacing: -1.3px; }
  .story-edition { display: none; }
  .story-canvas { margin-inline: -16px; }
  .story-step { font-size: 9px; gap: 7px; padding-bottom: 13px; }
  .story-steps { gap: 10px; }
  .story-bottom p { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-scene, .story-caption p { transition: none; }
  .story-demo[data-step="1"] .story-selected-photo { opacity: 1; }
  .story-demo .story-scene * { animation: none !important; }
  .story-photo-lift { transform: translate(-12px, -1px) rotate(-9deg); }
  .story-scan-line, .story-cursor, .story-sparkle { display: none; }
  .story-step.is-active .story-step-track::after { transform: scaleX(1); }
}