.story-art{position:absolute;display:none;aspect-ratio:1;background-size:400% 200%;background-repeat:no-repeat;background-color:#edf2df}
.scene.story{height:360px;background:radial-gradient(circle at 25% 40%,#f5f4df,#e9efd9)}
.scene.story.pool{background:radial-gradient(circle at 25% 40%,#dff6f3,#c4e5ed)}
.scene.story.bike{background:radial-gradient(circle at 25% 40%,#fff4e3,#eee9df)}
.scene.story>.journey,.scene.story>.garden-actor,.scene.story>.plant,.scene.story>.pool-front-water,.scene.story>.finish-post,.scene.story>.complete-badge,.scene.story>.water,.scene.story>.pool-deck,.scene.story>.road,.scene.story>.road-line,.scene.story>.grass,.scene.story>.distant-hills,.scene.story>.little-flower,.scene.story>.sun,.scene.story>.cloud{display:none}
.story .story-art{display:block;height:100%;left:2%;top:0;border-radius:18px}
.story .scene-caption{top:50%;left:auto;right:3%;width:35%;transform:translateY(-50%);z-index:3;gap:12px;padding:18px;border-radius:16px;background:#fffdf5e8}
.story .scene-caption strong{font-size:22px;line-height:1.5}
#story-description{font-size:14px;line-height:1.9;margin:0}
.story .scene-caption #story-next{font-size:11px;color:#827b88;letter-spacing:0;line-height:1.7}
#overtime-label{text-align:center;font-size:12px;color:#9b657f;margin:-5px 0 16px;min-height:16px;font-variant-numeric:tabular-nums}
#story-preview{background:#ece7f2;border-radius:10px;padding:10px;margin-top:12px;font-size:12px;min-height:44px}
.story-effects{display:none;position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2;border-radius:inherit}
.story .story-effects,.preview-picture .story-effects{display:block}
.story-effects i{position:absolute;left:var(--x);top:110%;width:10px;height:10px;opacity:0;animation:story-rise 4s linear infinite;animation-delay:var(--delay);border-radius:50%;border:1px solid #fff9;background:#ecffff55}
.story-effects[data-effect=none] i{display:none}
.story-effects[data-effect=clouds] i{width:75px;height:22px;top:8%;left:105%;border:0;background:#fffc;border-radius:30px;animation:story-cloud 8s linear infinite;animation-delay:var(--delay)}
.story-effects[data-effect=clouds] i:nth-child(2n){top:1%}.story-effects[data-effect=clouds] i:nth-child(3n){top:16%}
.story-effects[data-effect=leaves] i,.story-effects[data-effect=climb] i{width:17px;height:10px;background:#90b559;border:1px solid #679242;border-radius:100% 0;animation:story-leaf 3.5s linear infinite;animation-delay:var(--delay)}
.story-effects[data-effect=rain] i{width:4px;height:13px;top:-10%;background:#78c4e4;animation:story-rain 1.7s linear infinite;animation-delay:var(--delay);border:0;border-radius:50%}
.story-effects[data-effect=sparkles] i{top:var(--x);width:13px;height:13px;background:#fff2a4;clip-path:polygon(50% 0,61% 36%,100% 50%,61% 64%,50% 100%,39% 64%,0 50%,39% 36%);animation:story-twinkle 2s ease-in-out infinite;animation-delay:var(--delay);border:0}
.story-effects[data-effect=petals] i{width:11px;height:16px;top:-10%;background:#f3b4ca;border:0;border-radius:80% 20% 80% 20%;animation:story-petal 5s linear infinite;animation-delay:var(--delay)}
.story-effects[data-effect=steam] i{left:calc(17% + var(--x) * .25);width:18px;height:35px;top:65%;background:linear-gradient(transparent,#fffc,transparent);border:0;filter:blur(3px);animation:story-steam 3s ease-out infinite;animation-delay:var(--delay)}
@keyframes story-rise{0%{transform:translateY(0) scale(.6);opacity:0}10%,80%{opacity:.8}100%{transform:translate(20px,-430px) scale(1.4);opacity:0}}
@keyframes story-cloud{0%{transform:translateX(0);opacity:0}10%,80%{opacity:.5}100%{transform:translateX(-750px);opacity:0}}
@keyframes story-leaf{0%{transform:translateY(0) rotate(0);opacity:0}10%,90%{opacity:.8}100%{transform:translate(28px,-430px) rotate(180deg);opacity:0}}
@keyframes story-rain{10%,85%{opacity:.7}100%{transform:translate(-35px,420px);opacity:0}}
@keyframes story-twinkle{50%{opacity:1;transform:scale(1.4) rotate(35deg)}}
@keyframes story-petal{10%,80%{opacity:.8}100%{transform:translate(65px,420px) rotate(240deg);opacity:0}}
@keyframes story-steam{10%{opacity:.5}100%{transform:translate(12px,-90px) scale(2);opacity:0}}
.story-paused .story-effects i{animation-play-state:paused}
.calm .story-effects i{animation:none!important;opacity:0!important}
@media(prefers-reduced-motion:reduce){.story-effects i{animation:none!important;opacity:0!important}}
#story-dialog{width:550px;max-width:calc(100vw - 24px);padding:22px;max-height:94vh;overflow:auto}
.preview-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:13px;color:#827b88}
#preview-close{width:44px;height:44px;background:#eee8f3;border-radius:50%;font-size:22px}
.preview-picture{position:relative;width:min(100%,340px);aspect-ratio:1;margin:auto;border-radius:18px;overflow:hidden}
.preview-picture .story-art{display:block;inset:0;width:100%;height:100%}
#preview-title{font-size:20px;margin:12px 0 4px;line-height:1.5}
#preview-description{font-size:14px;line-height:1.8;margin:0 0 16px;min-height:50px}
.preview-controls{display:flex;gap:8px}.preview-controls button{min-height:46px;padding:8px 14px;border-radius:10px;background:#eee8f3;font-size:13px}.preview-controls #preview-play{flex:1;background:#72559a;color:white}
@media(min-width:901px) and (max-width:1200px){.story .story-art{left:2%;height:auto;width:52%;top:50%;transform:translateY(-50%)}.story .scene-caption{right:2%;width:44%;padding:13px}.story .scene-caption strong{font-size:19px}#story-description{font-size:12px}}
@media(max-width:600px){.scene.story{height:420px}.story .story-art{height:300px;left:50%;transform:translateX(-50%)}.story .scene-caption{top:auto;bottom:0;left:0;right:0;width:100%;transform:none;padding:14px 18px;gap:4px;border-radius:0;background:#fffdf5ed}.story .scene-caption strong{font-size:18px}#story-description{font-size:12px;line-height:1.7}.story .scene-caption #scene-kicker{font-size:8px}.story .scene-caption #story-next{font-size:10px}#time{font-size:88px}}