/* Animated book usage guide (guide.js) */
.bg-root{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:16px;background:#2e0a3ccc;backdrop-filter:blur(3px);animation:bg-fade .22s ease}
.bg-root.bg-out{animation:bg-fade .22s ease reverse;pointer-events:none}
@keyframes bg-fade{from{opacity:0}to{opacity:1}}
.bg-card{width:min(560px,100%);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;background:var(--bg,#fcfaff);color:var(--ink,#221029);border-radius:22px;box-shadow:0 30px 80px #0007;font-family:var(--font-ui,sans-serif);animation:bg-pop .3s cubic-bezier(.2,1.2,.3,1)}
@keyframes bg-pop{from{transform:translateY(18px) scale(.96);opacity:.4}to{transform:none;opacity:1}}
.bg-head{display:flex;align-items:center;gap:10px;padding:16px 18px 10px}
.bg-head h2{margin:0;font-size:18px;color:var(--plum,#5b1a6b);flex:1}
.bg-logo{font-size:24px}
.bg-close{width:34px;height:34px;border:0;border-radius:50%;background:#efe3f6;color:var(--plum,#5b1a6b);font-size:15px;cursor:pointer}
.bg-close:hover{background:#e3d0ee}
.bg-prog{height:5px;background:#eadff2;border-radius:3px;margin:0 18px}
.bg-progfill{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,var(--plum,#5b1a6b),var(--gold,#ffb23e))}
.bg-stageholder{position:relative;margin:14px 18px 6px}
.bg-slide[hidden]{display:none}
.bg-stage{background:radial-gradient(ellipse at 50% 40%,#f3e8fa,#e6d6f2);border-radius:16px;padding:8px}
.bg-stage svg{width:100%;height:auto;display:block}
.bg-slide figcaption{text-align:center;padding:12px 6px 2px}
.bg-slide figcaption h3{margin:0 0 6px;font-size:17px;color:var(--plum,#5b1a6b)}
.bg-slide figcaption p{margin:0;font-size:14px;line-height:1.8;color:#4b3a52}
.bg-dots{display:flex;gap:8px;justify-content:center;padding:10px 0 2px}
.bg-dot{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:#d8c6e4;cursor:pointer;transition:all .2s}
.bg-dot[aria-current=true]{background:var(--plum,#5b1a6b);width:22px;border-radius:5px}
.bg-nav{display:flex;gap:8px;padding:12px 18px 18px}
.bg-nav button{font:inherit;font-size:14px;padding:11px 12px;border:1px solid var(--line,#efe6f4);border-radius:11px;background:#fff;color:var(--ink,#221029);cursor:pointer}
.bg-nav .bg-skip{flex:1;color:#706078}
.bg-nav .bg-prev:disabled{opacity:.4;cursor:default}
.bg-nav .bg-primary{background:linear-gradient(135deg,var(--plum,#5b1a6b),var(--purple,#8a2e9c));color:#fff;border-color:var(--plum,#5b1a6b);font-weight:800}

/* ---- per-scene animations (play on .run) ---- */
@media (prefers-reduced-motion:no-preference){
.bg-slide.run .g-leafpoly{animation:leaf-turn 3.4s ease-in-out infinite}
.bg-slide.run .g-hand{animation:hand-pull 3.4s ease-in-out infinite}
@keyframes leaf-turn{0%,12%{d:path("M150 24 L150 174 L150 174 Z")}55%{d:path("M150 24 L10 150 L40 180 Z")}92%,100%{d:path("M150 24 L2 24 L2 174 Z")}}
@keyframes hand-pull{0%,12%{transform:translate(0,0)}55%{transform:translate(-110px,-16px)}92%,100%{transform:translate(-148px,-142px)}}
.bg-slide.run .g-dogear{animation:dogear 1.8s ease-in-out infinite}
@keyframes dogear{0%,100%{d:path("M225 174 L225 150 Q201 150 201 174 Z")}50%{d:path("M225 174 L225 138 Q189 138 189 174 Z")}}
.bg-slide.run .g-tap{animation:tap-dot 1.8s ease-in-out infinite}
.bg-slide.run .g-tapring{animation:tap-ring 1.8s ease-out infinite}
@keyframes tap-dot{0%,40%,100%{opacity:0}55%{opacity:1}}
@keyframes tap-ring{0%,45%{r:6;opacity:0}55%{opacity:.9}100%{r:26;opacity:0}}
.bg-slide.run .g-spot{animation:spot-pop .5s ease both;animation-delay:var(--d)}
@keyframes spot-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
.bg-slide.run .g-spot{transform-box:fill-box;transform-origin:center}
.bg-slide.run .g-spot rect{animation:spot-glow 1.6s ease-in-out infinite;animation-delay:var(--d)}
@keyframes spot-glow{0%,100%{filter:none}50%{filter:drop-shadow(0 0 6px #ffb23eaa)}}
.bg-slide.run .g-zoomin{animation:zoomin 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes zoomin{0%,100%{transform:scale(1)}50%{transform:scale(1.5)}}
.bg-slide.run .g-pinch{animation:pinchA 2.6s ease-in-out infinite}
.bg-slide.run .g-pinch2{animation:pinchB 2.6s ease-in-out infinite}
@keyframes pinchA{0%,100%{transform:translate(14px,8px)}50%{transform:none}}
@keyframes pinchB{0%,100%{transform:translate(-14px,-8px)}50%{transform:none}}
.bg-slide.run .g-tool{animation:tool-pop .4s ease both;animation-delay:var(--d);transform-box:fill-box;transform-origin:center}
@keyframes tool-pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.bg-slide.run .g-glow{animation:glow-slide 3s steps(1) infinite}
@keyframes glow-slide{0%{transform:translateX(0);opacity:1}20%{transform:translateX(42px)}40%{transform:translateX(84px)}60%{transform:translateX(126px)}80%{transform:translateX(168px);opacity:1}81%,100%{opacity:0}}
.bg-slide.run .g-ring{stroke-dasharray:138;stroke-dashoffset:138;animation:ring-fill 3s linear infinite}
@keyframes ring-fill{to{stroke-dashoffset:0}}
.bg-slide.run .g-mic{animation:mic-pulse 1.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes mic-pulse{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.18);opacity:1}}
.bg-slide.run .g-say{animation:say-in 1.4s ease-in-out infinite}
@keyframes say-in{0%,100%{opacity:0;transform:translateY(6px)}50%{opacity:1;transform:none}}
}
@media (max-width:480px){.bg-head h2{font-size:16px}.bg-slide figcaption p{font-size:13px}}