/* The lesson screen (lesson.js): a long path, the hero walks along it, objects appear and wait to be tapped. All sizes are set in px by lesson.js from the screen height. */
#play { position: relative; height: calc(var(--dvh) * 100); overflow: hidden; touch-action: none; background: #bfe6ff; color: #1c1165; }

/* scenery: five skies (the day moves on as the letters go by), two hill layers that drift slower than the path, a ground band */
.skies .sk { position: absolute; inset: 0; opacity: 0; transition: opacity 2s; }
.skies .sk.on { opacity: 1; }
.sk0 { background: linear-gradient(#7fcdff, #cdeeff 60%, #f3fbe6); } .sk1 { background: linear-gradient(#5fb8ff, #bfe6ff 60%, #eafbd8); } .sk2 { background: linear-gradient(#8fb4ff, #ffe9c4 65%, #fff4d6); }
.sk3 { background: linear-gradient(#ff9fae, #ffd0a8 60%, #ffeccb); } .sk4 { background: linear-gradient(#6a63c9, #b79be8 60%, #ffd1e8); }
.far, .mid { position: absolute; left: 0; right: 0; background-repeat: repeat-x; pointer-events: none; }
.far { bottom: 36%; height: 34%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 200' preserveAspectRatio='none'%3E%3Cpath d='M0 200V120Q100 40 200 110T400 100T600 120T800 110V200z' fill='%23b8e6a3'/%3E%3C/svg%3E"); background-size: 800px 100%; }
.mid { bottom: 36%; height: 20%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V60Q75 10 150 55T300 50T450 60T600 55V100z' fill='%2391d56f'/%3E%3C/svg%3E"); background-size: 600px 100%; }
.cloudp { position: absolute; width: 14%; height: 6%; border-radius: 999px; background: #fff; opacity: .85; }
.cloudp::before, .cloudp::after { content: ''; position: absolute; background: #fff; border-radius: 50%; }
.cloudp::before { width: 40%; height: 150%; left: 14%; top: -70%; } .cloudp::after { width: 30%; height: 120%; left: 52%; top: -45%; }
.ground { position: absolute; left: 0; right: 0; bottom: 0; height: 36%; background: linear-gradient(#78c850 0, #5fb23f 22%, #4fa036 100%); border-top: 4px solid #3f8a2e; }
.ground::before { content: ''; position: absolute; left: 0; right: 0; top: 18%; height: 56%; background: #e8c98f; background-image: repeating-linear-gradient(90deg, rgba(160, 110, 50, .28) 0 3px, transparent 3px 46px); background-position-x: var(--cam, 0px); border-top: 3px solid #d2ae6c; border-bottom: 3px solid #d2ae6c; }

.track { position: absolute; left: 0; top: 0; bottom: 0; width: 0; will-change: transform; }
.item { position: absolute; bottom: 24%; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.item .art { position: relative; display: grid; place-items: end center; line-height: 1; opacity: 0; transform-origin: 50% 100%; pointer-events: auto; cursor: pointer; }
.item .art svg { width: 100%; height: 100%; overflow: visible; }
.item.on .art { opacity: 1; }
.item .art { transition: scale .35s ease-in-out; }
.item .lbl { position: absolute; top: 100%; margin-top: 6px; padding: 1px 12px; border-radius: 999px; background: rgba(255, 255, 255, .92); border: 2px solid #fff; box-shadow: 0 2px 0 rgba(28, 17, 101, .18); font-weight: 900; color: #1c1165; white-space: nowrap; opacity: 0; transition: opacity .4s; pointer-events: auto; cursor: pointer; }
.item .lbl:active { transform: scale(.94); }
.item .lbl b { color: inherit; }
.item.on .lbl { opacity: 1; }
.item.glow .art { filter: drop-shadow(0 0 8px #fff27a) drop-shadow(0 0 16px #ffd23f); }

/* how things appear */
.a-drop { animation: a-drop .9s cubic-bezier(.3, .7, .4, 1) both; } @keyframes a-drop { 0% { transform: translateY(-140%); opacity: 0; } 55% { transform: translateY(0); opacity: 1; } 72% { transform: translateY(-22%); } 88% { transform: translateY(0); } 94% { transform: translateY(-6%); } 100% { transform: none; opacity: 1; } }
.a-pop { animation: a-pop .6s ease-out both; } @keyframes a-pop { 0% { transform: scale(0); opacity: 0; } 70% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.a-walk { animation: a-walk 1.3s ease-out both; } @keyframes a-walk { 0% { transform: translateX(160%); opacity: 1; } 15% { transform: translateX(130%) translateY(-6%); } 30% { transform: translateX(100%); } 45% { transform: translateX(72%) translateY(-6%); } 60% { transform: translateX(46%); } 75% { transform: translateX(24%) translateY(-6%); } 100% { transform: none; opacity: 1; } }
.a-crawl { animation: a-crawl 3.4s linear both; } @keyframes a-crawl { 0% { transform: translateX(160%); opacity: 1; } 100% { transform: none; opacity: 1; } }
.a-fly { animation: a-fly 2.4s ease-out both; } @keyframes a-fly { 0% { transform: translate(280%, -45%) rotate(-5deg); opacity: 1; } 100% { transform: none; opacity: 1; } }
.a-drive .wheel, .t-drive .wheel { animation: wheel .45s linear infinite; }
@keyframes wheel { to { transform: rotate(-360deg); } }
.a-drive { animation: a-drive 1s cubic-bezier(.2, .8, .3, 1) both; } @keyframes a-drive { 0% { transform: translateX(260%); opacity: 1; } 80% { transform: translateX(-6%) scaleX(1.04); } 100% { transform: none; opacity: 1; } }
.a-grow { animation: a-grow .8s cubic-bezier(.3, 1.4, .5, 1) both; } @keyframes a-grow { 0% { transform: scale(.05); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.a-swoop { animation: a-swoop 1.1s ease-out both; } @keyframes a-swoop { 0% { transform: translate(200%, -120%) rotate(-25deg); opacity: 1; } 70% { transform: translate(-8%, 6%) rotate(6deg); } 100% { transform: none; opacity: 1; } }
.a-rise { animation: a-rise .9s ease-out both; } @keyframes a-rise { 0% { transform: translateY(70%); opacity: 0; } 100% { transform: none; opacity: 1; } }
.a-slide { animation: a-slide .9s cubic-bezier(.2, .8, .3, 1) both; } @keyframes a-slide { 0% { transform: translateX(-220%); opacity: 1; } 80% { transform: translateX(6%); } 100% { transform: none; opacity: 1; } }

/* how things move when tapped */
.t-turn { animation: t-turn 1s linear both; } @keyframes t-turn { 0%, 100% { transform: none; } }
.t-greet { animation: none; }
.t-soar { animation: t-soar 1.6s ease-in-out both; } @keyframes t-soar { 0%, 100% { transform: none; } 35% { transform: translate(-30%, -40%) rotate(10deg); } 65% { transform: translate(-10%, -22%) rotate(-5deg); } }
.t-dribble { animation: t-dribble 2.2s both; } @keyframes t-dribble { 0% { transform: translateY(0%); animation-timing-function: ease-out; } 10% { transform: translateY(-90%); animation-timing-function: ease-in; } 22% { transform: translateY(0%); animation-timing-function: ease-out; } 32% { transform: translateY(-62%); animation-timing-function: ease-in; } 42% { transform: translateY(0%); animation-timing-function: ease-out; } 50% { transform: translateY(-40%); animation-timing-function: ease-in; } 58% { transform: translateY(0%); animation-timing-function: ease-out; } 65% { transform: translateY(-22%); animation-timing-function: ease-in; } 71% { transform: translateY(0%); animation-timing-function: ease-out; } 76% { transform: translateY(-10%); animation-timing-function: ease-in; } 81% { transform: translateY(0%); animation-timing-function: ease-out; } 100% { transform: translateY(0%); animation-timing-function: ease-out; } }
.t-toggle { animation: none; }
.item .lid { transition: transform .5s ease-in-out; } .item.open .lid { transform: rotate(-40deg); }
.item .pl, .item .pr, .item .pm { transition: transform .7s ease-in-out; } .item.open .pl { transform: rotate(-40deg); } .item.open .pr { transform: rotate(30deg); } .item.open .pm { transform: scaleY(.3); }
.steam { opacity: 0; } .t-steam .steam { animation: steam-up 1.4s ease-out 2 both; }
@keyframes steam-up { 0% { transform: translateY(8px); opacity: 0; } 25% { opacity: .95; } 100% { transform: translateY(-14px); opacity: 0; } }
.t-steam { animation: none; }
.t-hop { animation: t-hop 1.2s ease-in-out both; } @keyframes t-hop { 0%, 100% { transform: none; } 15% { transform: translateY(-38%) rotate(-6deg); } 30% { transform: none; } 45% { transform: translateY(-38%) rotate(6deg); } 60% { transform: none; } 75% { transform: translateY(-14%); } }
.t-spin { animation: t-spin 1.1s ease-in-out both; } @keyframes t-spin { 0% { transform: none; } 50% { transform: translateY(-22%) rotate(360deg) scale(1.2); } 100% { transform: rotate(720deg); } }
.t-bounce { animation: t-bounce 1.5s ease-in both; } @keyframes t-bounce { 0%, 30%, 60%, 80%, 100% { transform: none; } 15% { transform: translateY(-80%); } 45% { transform: translateY(-45%); } 70% { transform: translateY(-20%); } 90% { transform: translateY(-6%); } }
.t-sway { animation: t-sway 1.4s ease-in-out both; } @keyframes t-sway { 0%, 100% { transform: none; } 25% { transform: rotate(-9deg); } 50% { transform: rotate(8deg); } 75% { transform: rotate(-6deg); } }
.t-wobble { animation: t-wobble 1.2s ease-in-out both; } @keyframes t-wobble { 0%, 100% { transform: none; } 15% { transform: rotate(-14deg) scale(1.08, .92); } 30% { transform: rotate(12deg) scale(.94, 1.08); } 45% { transform: rotate(-9deg); } 60% { transform: rotate(6deg); } 80% { transform: rotate(-3deg); } }
.t-loop { animation: t-loop 1.4s ease-in-out both; } @keyframes t-loop { 0% { transform: none; } 30% { transform: translate(40%, -60%) rotate(-90deg); } 55% { transform: translate(0, -120%) rotate(-250deg); } 80% { transform: translate(-40%, -40%) rotate(-340deg); } 100% { transform: rotate(-360deg); } }
.t-drive { animation: t-drive 1.6s ease-in-out both; } @keyframes t-drive { 0% { transform: none; } 20% { transform: translateX(-8%) scaleX(.96); } 55% { transform: translateX(260%); } 56% { transform: translateX(-260%) scaleX(-1); } 100% { transform: none; } }
.t-flip { animation: t-flip 1.1s ease-in-out both; } @keyframes t-flip { 0% { transform: none; } 50% { transform: translateY(-60%) rotate(180deg); } 100% { transform: rotate(360deg); } }
.t-shake { animation: t-shake 1s ease-in-out both; } @keyframes t-shake { 0%, 100% { transform: none; } 10%, 50%, 90% { transform: translateX(-7%) rotate(-3deg); } 30%, 70% { transform: translateX(7%) rotate(3deg); } }
.t-grow { animation: t-grow 1.2s ease-in-out both; } @keyframes t-grow { 0%, 100% { transform: none; } 40% { transform: scale(1.4); } 60% { transform: scale(1.3) rotate(-4deg); } 80% { transform: scale(1.35) rotate(4deg); } }
.t-beat { animation: t-beat 1.4s ease-in-out both; } @keyframes t-beat { 0%, 100% { transform: none; } 12%, 37%, 62%, 87% { transform: scale(1.22) rotate(-3deg); } 25%, 50%, 75% { transform: scale(.94) rotate(3deg); } }
.t-shine { animation: t-shine 1.4s ease-in-out both; } @keyframes t-shine { 0%, 100% { transform: none; filter: none; } 30% { transform: scale(1.3) rotate(15deg); filter: brightness(1.5) drop-shadow(0 0 14px #fff27a); } 60% { transform: scale(1.15) rotate(-12deg); filter: brightness(1.3) drop-shadow(0 0 14px #fff27a); } }

/* letter signs and the finish sign along the path */
.lsign { position: absolute; bottom: 24%; display: flex; flex-direction: column; align-items: center; pointer-events: auto; cursor: pointer; filter: drop-shadow(0 2px 0 #5e3510) drop-shadow(0 5px 5px rgba(60, 35, 10, .3)); }
.lsign .board { display: grid; place-items: center; background: repeating-linear-gradient(#e3ab5e 0 7px, #d99a47 7px 9px, #e3ab5e 9px 15px); border-radius: 12px; color: #fff; font-weight: 900; text-shadow: 0 3px 0 rgba(94, 53, 16, .85); letter-spacing: 2px; }
.lsign .post { background: linear-gradient(90deg, #8a561f, #c98b4a 45%, #8a561f); border-radius: 3px 3px 0 0; }
.lsign:active { transform: scale(.96); }

.heropl { position: absolute; bottom: 24%; pointer-events: none; transform-origin: 50% 100%; }
.heropl .hs { width: 100%; height: 100%; overflow: visible; }
.heropl.jump { animation: cheer .5s ease-in-out; }
.heropl .hs .armL, .heropl .hs .armR, .heropl .hs .legL, .heropl .hs .legR { transition: transform .25s; }
/* walking: legs and arms swing, the body bobs (the arms start raised for waving, so walking puts them down first) */
.hs.walk { animation: w-bob .5s ease-in-out infinite; transform-origin: 50% 100%; }
.hs.walk .legL { animation: w-leg .5s ease-in-out infinite alternate; } .hs.walk .legR { animation: w-leg .5s ease-in-out infinite alternate-reverse; }
.hs.walk .armL { animation: w-armL .5s ease-in-out infinite alternate; } .hs.walk .armR { animation: w-armR .5s ease-in-out infinite alternate-reverse; }
@keyframes w-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5%); } }
@keyframes w-leg { from { transform: rotate(-20deg); } to { transform: rotate(20deg); } }
@keyframes w-armL { from { transform: rotate(-4deg); } to { transform: rotate(26deg); } }
@keyframes w-armR { from { transform: rotate(78deg); } to { transform: rotate(112deg); } }
.hs.act-stretch { animation: a-bob 1.6s ease-in-out infinite; transform-origin: 50% 100%; }
.act-stretch .armL { animation: s-L 1.2s ease-in-out infinite alternate; } .act-stretch .armR { animation: s-R 1.2s ease-in-out infinite alternate; } .act-stretch .hd { animation: a-nod 1.6s ease-in-out infinite; }
@keyframes s-L { from { transform: rotate(96deg); } to { transform: rotate(112deg); } } @keyframes s-R { from { transform: rotate(-44deg); } to { transform: rotate(-30deg); } }

/* heads-up display: exit, current letter, progress, stars, music */
.phud { position: absolute; z-index: 5; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: calc(var(--dvw) * 1.4); padding: calc(var(--dvh) * 2.5) 56px 0 calc(var(--dvw) * 2); pointer-events: none; }
.phud > * { pointer-events: auto; }
.phud .round { width: calc(var(--dvh) * 10); height: calc(var(--dvh) * 10); min-width: 40px; min-height: 40px; }
.letterchip { min-width: calc(var(--dvh) * 12); padding: 0 calc(var(--dvh) * 2.5); height: calc(var(--dvh) * 10); min-height: 40px; display: grid; place-items: center; border-radius: 999px; background: #fff; border: 3px solid #ffd978; box-shadow: 0 3px 0 #e0b24a; font-size: max(20px, calc(var(--dvh) * 6.4)); font-weight: 900; color: #e0306e; }
.pbar { flex: 1; height: calc(var(--dvh) * 2.6); min-height: 9px; border-radius: 999px; background: rgba(255, 255, 255, .7); border: 2px solid #fff; overflow: hidden; }
.pbar i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--grad); transition: width .2s; }
.phud .chip { gap: 6px; }
.chip.bump { animation: bump .35s ease-out; } @keyframes bump { 40% { transform: scale(1.25); } }

.gift { position: absolute; z-index: 6; margin: -.5em 0 0 -.5em; line-height: 1; pointer-events: none; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .3)); }
.fx { position: absolute; z-index: 6; margin: -.5em 0 0 -.5em; line-height: 1; pointer-events: none; }
.hint { position: absolute; z-index: 5; left: 50%; bottom: 3%; transform: translateX(-50%); padding: calc(var(--dvh) * 1.4) calc(var(--dvw) * 2.4); border-radius: 999px; background: var(--grad); color: #fff; font-weight: 800; font-size: calc(var(--dvh) * 4.2); box-shadow: 0 5px 14px rgba(28, 17, 101, .4); transition: opacity .5s; pointer-events: none; white-space: nowrap; }
.hint.off { opacity: 0; }

.pend { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; background: rgba(28, 17, 101, .55); }
.pend[hidden] { display: none; }
.endcard { text-align: center; background: #fff; border-radius: 30px; padding: calc(var(--dvh) * 4) calc(var(--dvw) * 6); box-shadow: 0 10px 0 rgba(28, 17, 101, .25); animation: pop2 .5s ease-out; }
.endcard h2 { margin: 0; font-size: calc(var(--dvh) * 8); color: #1c1165; }
.endcard .big { margin: calc(var(--dvh) * 1) 0; font-size: calc(var(--dvh) * 17); font-weight: 900; color: #6b4a00; display: flex; align-items: center; justify-content: center; gap: .2em; }
.endcard .big svg { width: .9em; height: .9em; }
.endcard p { margin: 0 0 calc(var(--dvh) * 2); font-size: calc(var(--dvh) * 5); font-weight: 800; color: #7a7390; }
.endcard .start-btn { font-size: calc(var(--dvh) * 6); padding: calc(var(--dvh) * 2) calc(var(--dvh) * 9); animation: none; }

/* the ant's legs: they swing while it crawls in and while it hops (the body glides, the legs do the walking) */
.a-crawl .tail, .walking .tail { animation: tail-sway 1.1s ease-in-out infinite alternate; }
@keyframes tail-sway { from { transform: rotate(-10deg); } to { transform: rotate(12deg); } }
.a-crawl .leg, .t-hop .leg, .t-turn .leg, .walking .leg { animation: leg-swing .32s ease-in-out infinite alternate; }
.a-crawl .leg.l1, .t-hop .leg.l1, .t-turn .leg.l1, .walking .leg.l1 { animation-direction: alternate-reverse; }
@keyframes leg-swing { from { transform: rotate(-26deg); } to { transform: rotate(26deg); } }

/* the aunt strolls in (smooth glide, her arms swing, her feet step and she bobs), and waves when tapped */
.a-stroll { animation: a-stroll 3s linear both; } @keyframes a-stroll { 0% { transform: translateX(160%); opacity: 1; } 100% { transform: none; opacity: 1; } }
.a-stroll .aarmL { animation: au-armL .7s ease-in-out infinite alternate; } .a-stroll .aarmR { animation: au-armR .7s ease-in-out infinite alternate; }
.a-stroll .f0 { animation: au-step .7s ease-in-out infinite alternate; } .a-stroll .f1 { animation: au-step .7s ease-in-out infinite alternate-reverse; }
@keyframes au-armL { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } } @keyframes au-armR { from { transform: rotate(9deg); } to { transform: rotate(-9deg); } }
@keyframes au-step { from { transform: translate(-3px, 0); } to { transform: translate(2px, -2px); } }
.t-greet .aarmR { animation: au-wave 1.4s ease-in-out both; }
@keyframes au-wave { 0%, 100% { transform: rotate(0); } 20%, 60% { transform: rotate(-150deg); } 35%, 75% { transform: rotate(-125deg); } 48% { transform: rotate(-155deg); } }

/* the cat's step: the leg sweeps back while it is planted (straight), then lifts, shortens and swings forward; the four legs are a quarter of a step apart */
.a-crawl .cl, .walking .cl { animation: cat-step .9s infinite; }
.cl.p0 { animation-delay: 0s !important; } .cl.p1 { animation-delay: -.225s !important; } .cl.p2 { animation-delay: -.45s !important; } .cl.p3 { animation-delay: -.675s !important; }
@keyframes cat-step { 0% { transform: rotate(16deg) scaleY(1); animation-timing-function: linear; } 58% { transform: rotate(-20deg) scaleY(1); animation-timing-function: ease-in-out; } 78% { transform: rotate(-2deg) scaleY(.66); animation-timing-function: ease-in-out; } 100% { transform: rotate(16deg) scaleY(1); } }

/* the cake: when opened the slice is pulled out to the right (as with the right hand), and the cut shows in the cake */
.item .slice { transition: transform .8s ease-in-out; } .item.open .slice { transform: translate(40px, 6px); }
.item .sface { opacity: 0; transition: opacity .15s .65s; } .item.open .sface { opacity: 1; transition: opacity .1s 0s; }      /* the cut side stays solid while the slice slides back, and only fades once it is in place */

/* the car door swings open from its front edge, and shuts when tapped again */
.item .cdoor { transition: transform .6s ease-in-out; } .item.open .cdoor { transform: scale(.38, 1.04) skewY(16deg); }

/* the dog stops and wags its tail when tapped */
.t-wag { animation: none; } .t-wag .tail { animation: tail-wag .3s ease-in-out 6 alternate; }
@keyframes tail-wag { from { transform: rotate(10deg) skewX(12deg); } to { transform: rotate(-34deg) skewX(-18deg); } }      /* the tail swings out and back and bends along its length, so it whips and does not swing like a pendulum */

/* flipbook (the dog): a standing drawing, and 8 drawings of one walking step that are shown one after another while it walks */
.fr { visibility: hidden; }
.a-crawl .fs, .walking .fs { display: none; }
.a-crawl .fr, .walking .fr { animation: frshow .8s steps(1, end) infinite; }
.fr.f0 { animation-delay: 0.0s !important; } .fr.f1 { animation-delay: 0.1s !important; } .fr.f2 { animation-delay: 0.2s !important; } .fr.f3 { animation-delay: 0.3s !important; } .fr.f4 { animation-delay: 0.4s !important; } .fr.f5 { animation-delay: 0.5s !important; } .fr.f6 { animation-delay: 0.6s !important; } .fr.f7 { animation-delay: 0.7s !important; } 
@keyframes frshow { 0% { visibility: visible; } 12.5% { visibility: hidden; } 100% { visibility: hidden; } }

/* the duck: when tapped it paddles to one end of its puddle, turns, swims to the other end and comes back, with ripples */
.t-paddle { animation: none; } .t-paddle .duck { animation: paddle 3.2s ease-in-out both; }
@keyframes paddle { 0% { transform: translate(0, 0) scaleX(1); } 22% { transform: translate(-13px, -1.5px) scaleX(1); } 28% { transform: translate(-13px, 0) scaleX(1); } 29% { transform: translate(-13px, 0) scaleX(-1); } 58% { transform: translate(13px, -1.5px) scaleX(-1); } 64% { transform: translate(13px, 0) scaleX(-1); } 65% { transform: translate(13px, 0) scaleX(1); } 100% { transform: translate(0, 0) scaleX(1); } }
.rp { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; } .t-paddle .rp { animation: ripple 1.1s ease-out 3 both; } .t-paddle .rp.r2 { animation-delay: .5s; }
@keyframes ripple { 0% { transform: scale(.55); opacity: .9; } 100% { transform: scale(1.25); opacity: 0; } }

/* lesson 20: the story, one sentence at a time (lesson.js startStory) */
#story { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: flex-end; padding: 14% 4% 6% 22%; pointer-events: none; }
#story .spage { pointer-events: auto; width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 2.4em; text-align: center; background: rgba(255, 255, 255, .9); border: .5em solid #fff; border-radius: 4em; padding: 3em 4em; box-shadow: 0 .8em 0 rgba(28, 17, 101, .2); animation: pop2 .4s ease-out; }
#story .spics { display: flex; gap: 2em; align-items: flex-end; justify-content: center; font-size: 15em; line-height: 1; min-height: 1em; }
#story .sp { display: inline-block; width: 1em; height: 1em; } #story .sp svg { width: 100%; height: 100%; overflow: visible; }
#story .stext { font-size: 7em; font-weight: 900; color: #1c1165; line-height: 1.25; cursor: pointer; }
#story .sw { display: inline-block; padding: 0 .1em; border-radius: .3em; } #story .sw:active { background: #ffe97a; }
#story .snav { display: flex; justify-content: flex-end; width: 100%; }
#story .snext { font-size: 5em; padding: .4em 1.6em; animation: none; }
#story .sq { font-size: 6em; font-weight: 900; color: #1c1165; }
#story .sopts { display: flex; gap: 3em; width: 100%; justify-content: center; }
#story .sopt { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .6em; padding: 1.4em 1.2em; border: .4em solid #fff; border-radius: 2.4em; background: var(--grad); color: #fff; font: inherit; cursor: pointer; box-shadow: 0 .6em 0 rgba(28, 17, 101, .3); }
#story .sopt:active { transform: translateY(.3em); box-shadow: 0 .3em 0 rgba(28, 17, 101, .3); }
#story .spic { font-size: 9em; line-height: 1; } #story .stxt { font-size: 5.2em; font-weight: 900; line-height: 1.2; }