/* One narrative, one playback. Every transform settles into its underlying pose. */
.story-svg{--fur:#424d3c;--face:#f3f0e4;--leaf:#83946e}.fur{fill:var(--fur)}.face{fill:var(--face)}.leaf{fill:var(--leaf)}.window-paper{fill:#fffefb;stroke:#d4d9cb;stroke-width:1.2}.window-header{fill:#f6f6f0}.window-line{stroke:#e1e5d9;stroke-width:1}.window-dot{fill:#d5dbcc}.window-text{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;fill:#52614b;font-size:11px;font-weight:500}.window-subtitle{fill:#98a28c;font-size:7px;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif}.paper-line{fill:#e7eadf}.paper-line-short{fill:#dce3d1}.window-shadow{filter:drop-shadow(0px 10px 13px #3e4b2b0c)}.scene-shadow{fill:#dde3d2;opacity:.5;transform-origin:320px 354px}.actor{transform-origin:320px 304px}.arm-left{transform-origin:258px 284px}.arm-right{transform-origin:352px 282px}.face-motion{transform-origin:334px 264px}.eyes{transform-box:fill-box;transform-origin:center}.held-window{transform-origin:350px 197px}.side-window{transform-origin:350px 160px}.story-svg.is-playing{animation:story-time var(--duration) linear both}.story-svg.is-paused,.story-svg.is-paused *{animation-play-state:paused!important}.story-svg.is-playing .scene-shadow{animation:shadow-settle var(--duration) ease-in-out both}.story-svg.is-playing .eyes{animation:blink var(--duration) linear both}.hold-story.is-playing .held-window{animation:receive-window var(--duration) cubic-bezier(.22,.7,.32,1) both}.hold-story.is-playing .actor{animation:receive-weight var(--duration) ease-in-out both}.hold-story.is-playing .arm-left,.hold-story.is-playing .arm-right{animation:ready-hands var(--duration) ease-in-out both}.hold-story.is-playing .face-motion{animation:look-up var(--duration) ease-in-out both}.gather-story.is-playing .held-window{animation:gather-front var(--duration) ease-in-out both}.gather-story.is-playing .side-window-a{animation:gather-back var(--duration) cubic-bezier(.2,.7,.3,1) both}.gather-story.is-playing .side-window-b{animation:gather-middle var(--duration) cubic-bezier(.2,.7,.3,1) both}.gather-story.is-playing .actor{animation:gather-weight var(--duration) ease-in-out both}.gather-story.is-playing .collection-label{animation:label-appear var(--duration) ease both}.peek-story .peek-actor{transform-origin:320px 255px}.peek-story .peek-hand-right{transform-origin:380px 233px}.peek-story.is-playing .peek-actor{animation:peek-out var(--duration) cubic-bezier(.2,.7,.3,1) both}.peek-story.is-playing .peek-hand-left{animation:paw-arrive-left var(--duration) ease both}.peek-story.is-playing .peek-hand-right{animation:paw-arrive-right var(--duration) ease both}.peek-story.is-playing .held-window{animation:peek-window var(--duration) ease-in-out both}
@keyframes story-time{from{opacity:1}to{opacity:1}}
@keyframes receive-window{0%,9%{transform:translate(80px,-62px) rotate(8deg);opacity:0}17%{opacity:1}37%{transform:translate(0,12px) rotate(-2deg)}48%{transform:translate(0,15px) rotate(.8deg)}69%{transform:translate(0,-5px) rotate(-.6deg)}85%,100%{transform:none;opacity:1}}
@keyframes receive-weight{0%,22%{transform:translateY(4px)}40%{transform:translateY(11px) scale(1.018,.974)}54%{transform:translateY(12px) scale(1.012,.98)}72%{transform:translateY(-3px)}89%,100%{transform:none}}
@keyframes ready-hands{0%,13%{transform:translateY(15px) scaleY(.85)}27%{transform:translateY(-6px) scaleY(1.025)}44%{transform:translateY(3px)}72%,100%{transform:none}}
@keyframes look-up{0%,18%{transform:translateY(-3px) rotate(-5deg)}40%,58%{transform:rotate(2deg)}80%,100%{transform:none}}
@keyframes shadow-settle{0%{transform:scaleX(.95);opacity:.35}42%{transform:scaleX(1.06);opacity:.55}85%,100%{transform:none;opacity:.5}}
@keyframes blink{0%,69%{transform:scaleY(1)}71%{transform:scaleY(.12)}74%,100%{transform:scaleY(1)}}
@keyframes gather-back{0%,8%{transform:translate(-128px,-20px) rotate(-15deg)}38%{transform:translate(0,5px) rotate(-1deg)}58%,100%{transform:none}}
@keyframes gather-middle{0%,23%{transform:translate(118px,-15px) rotate(13deg)}50%{transform:translate(0,4px) rotate(1deg)}66%,100%{transform:none}}
@keyframes gather-front{0%,34%{transform:translateY(15px) rotate(-4deg)}58%{transform:translateY(5px) rotate(1deg)}80%,100%{transform:none}}
@keyframes gather-weight{0%,24%{transform:translateY(5px) rotate(-2deg)}42%{transform:translateY(9px) rotate(1deg)}60%{transform:translateY(10px)}84%,100%{transform:none}}
@keyframes label-appear{0%,62%{opacity:0;transform:translateY(5px)}83%,100%{opacity:1;transform:none}}
@keyframes peek-out{0%,12%{transform:translateY(118px) rotate(-8deg)}41%{transform:translateY(-4px) rotate(3deg)}61%{transform:rotate(-3deg)}83%,100%{transform:none}}
@keyframes paw-arrive-left{0%,26%{transform:translateY(20px);opacity:0}40%,100%{transform:none;opacity:1}}
@keyframes paw-arrive-right{0%,31%{transform:translateY(20px);opacity:0}48%{transform:translateY(-3px) rotate(5deg);opacity:1}70%,100%{transform:none;opacity:1}}
@keyframes peek-window{0%,28%{transform:none}43%{transform:translateY(3px)}65%,100%{transform:none}}

@media(prefers-reduced-motion:reduce){.story-svg,.story-svg *{animation:none!important;transition:none!important}}