/* storybook 1: the page for children (/story1/) and the reading tips of the page for grown-ups (site v23) */
.s1-tips{display:flex;flex-direction:column;gap:12px;max-width:760px;margin-bottom:22px}
.s1-tips li{background:var(--white);border:3px solid var(--deep);border-radius:16px;padding:14px 18px;font-size:19px;font-weight:700;color:var(--deep)}

/* the sound button, always at hand */
.s1-mute{position:fixed;right:12px;bottom:12px;z-index:90;display:flex;width:fit-content;align-items:center;gap:8px;min-height:52px;padding:8px 16px 8px 12px;font-family:var(--display);font-weight:600;font-size:18px;color:var(--deep);background:var(--cream);border:3px solid var(--deep);border-radius:999px;box-shadow:0 4px 0 var(--deep);cursor:pointer}
.s1-mute[hidden],.s1-mute svg[hidden]{display:none}
.s1-mute[aria-pressed=true]{background:var(--sun)}
.s1 ~ .foot{padding-bottom:80px}
@media (max-width:599px){.s1-mute{padding:0;width:54px;height:54px;justify-content:center}.s1-mute span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
.s1-ic-play[hidden],.s1-ic-pause[hidden]{display:none !important}
.s1-lead-dark{color:var(--deep)}

/* the entrance */
.s1-hero .phead-sub{max-width:30ch}
.s1-hero-in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end;padding-block:14px 6px}
.s1-hero-txt{display:flex;flex-direction:column;gap:14px;align-items:flex-start;min-width:0}
.s1-hero h1{font-size:clamp(38px,11vw,64px)}
.s1-grown-top{font-family:var(--display);font-weight:600;font-size:16px;color:var(--deep);background:var(--cream);border:2px solid var(--deep);border-radius:999px;padding:6px 14px;min-height:40px;display:inline-flex;align-items:center;text-decoration:none}
.s1-hero-act{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.s1-big-play{min-height:76px;font-size:clamp(22px,6vw,28px);gap:10px;padding-inline:26px 30px;box-shadow:0 6px 0 var(--deep)}
.s1-hero-make{min-height:60px}
.s1-hero-soon{flex-basis:100%;font-weight:700;color:var(--deep);background:var(--cream);border-radius:12px;padding:4px 10px;font-size:16px;width:fit-content}
.s1-hero-soon[hidden]{display:none}
.s1-hero-fig{line-height:0;margin-right:-6px}
.s1-hero-fig img{width:clamp(120px,34vw,190px);height:auto}

/* the song */
.s1-song{display:flex;flex-direction:column;gap:18px;max-width:760px}
.s1-lyrics{background:var(--white);border:3px solid var(--deep);border-radius:22px;padding:18px 16px;display:flex;flex-direction:column;gap:8px}
.s1-ln,.s1-tail{margin:0;padding:8px 12px;border-radius:14px;font-family:var(--display);font-weight:600;font-size:clamp(22px,6vw,32px);line-height:1.15;color:var(--deep);transition:background .15s}
.s1-big{color:var(--red);font-weight:700;white-space:nowrap}
.s1-tail{display:flex;flex-direction:column;gap:2px;font-size:clamp(20px,5.4vw,28px)}
.s1-tl{padding:4px 8px;border-radius:10px}
.s1-ln.on,.s1-tl.on{background:var(--sun);outline:3px solid var(--deep)}
.s1-lyrics.is-full{position:relative;max-height:min(58vh,420px);overflow-y:auto;overscroll-behavior:contain;gap:4px;scroll-padding:40px 0}
.s1-lyrics.is-full .s1-ln{font-size:clamp(20px,5.4vw,28px);padding:6px 10px}
.s1-sec{display:flex;flex-direction:column;gap:2px;padding-block:6px}
.s1-sec + .s1-sec{border-top:2px dashed #E3CFA4}
.s1-sec-l{font-family:var(--body);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--brown);padding:2px 10px}
.s1-ln.soft{background:rgba(247,201,75,.38);outline:2px dashed var(--deep)}
.s1-pop{display:inline-block;color:var(--red);font-weight:700;transform-origin:left center}
.s1-ln.on .s1-pop{animation:s1pulse .5s ease-in-out infinite alternate}
@keyframes s1pulse{from{transform:scale(1)}to{transform:scale(1.18)}}
/* compact: the line being sung, big, and the next line, smaller */
.s1-lyrics.is-compact{max-height:none;overflow:visible;min-height:170px;justify-content:center;padding-block:14px}
.s1-lyrics.is-compact .s1-sec{display:none;border:0;padding:0}
.s1-lyrics.is-compact .s1-sec.has-cur,.s1-lyrics.is-compact .s1-sec.has-nxt{display:flex}
.s1-lyrics.is-compact .s1-sec:not(.has-cur) .s1-sec-l{display:none}
.s1-lyrics.is-compact .s1-ln{display:none}
.s1-lyrics.is-compact .s1-ln.cur{display:block;font-size:clamp(28px,8vw,42px);padding:10px 12px}
.s1-lyrics.is-compact .s1-ln.nxt{display:block;font-size:clamp(18px,4.8vw,24px);opacity:.6;outline:0;background:none}
.s1-more{align-self:flex-start;margin-top:-8px;min-height:44px;padding:6px 4px;font-family:var(--display);font-weight:600;font-size:18px;color:var(--deep);background:none;border:0;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.s1-progrow{display:flex;align-items:center;gap:12px}
.s1-progrow[hidden]{display:none}
.s1-bar{flex:1;height:12px;border-radius:999px;background:#E9D9B8;border:2px solid var(--deep);overflow:hidden}
.s1-bar i{display:block;height:100%;width:0;background:var(--brown)}
.s1-time{font-weight:700;color:var(--deep);font-variant-numeric:tabular-nums;min-width:84px;text-align:right}
.s1-playrow{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.s1-play{min-height:68px;font-size:26px;gap:12px;padding-inline:34px}
.s1-play.is-soon{background:transparent;border-style:dashed;box-shadow:none;cursor:default}
.s1-status{font-weight:700;color:var(--deep);max-width:34ch}
.s1-switch{font-size:16px;font-weight:700;color:var(--brown)}
.s1-switch[hidden]{display:none}

/* the four small pictures under the lyrics: they light up on the BIG sounds of the song */
.s1-minis{display:flex;gap:10px;flex-wrap:wrap}
.s1-mini{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px;width:64px;background:var(--cream);border:2px solid var(--deep);border-radius:12px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.s1-mini-fig{display:block;width:52px;height:40px;border-radius:8px;overflow:hidden;line-height:0}
.s1-mini-fig img{width:100%;height:100%;object-fit:cover}
.s1-mini-w{font-family:var(--display);font-weight:700;font-size:12px;line-height:1;color:var(--red);white-space:nowrap}
.s1-mini.lit{background:var(--sun);box-shadow:0 0 0 4px rgba(247,201,75,.55);transform:scale(1.1);transition:transform .12s,box-shadow .12s}
.is-soft-page .s1-mini.lit{transform:none}

/* Make Trotley's Hoof Song! (site v22): a stage, four pictures, a dirt path with four prints, the hoof */
.s1-toyhead{gap:6px}
.s1-grownline{max-width:52ch;font-size:16px;font-weight:700;color:var(--deep);opacity:.85}
.s1-toy{--beat:690ms;position:relative;scroll-margin-top:12px;display:flex;flex-direction:column;gap:12px;max-width:520px;margin-inline:auto}
.s1-stage{position:relative;height:224px;overflow:hidden;background:linear-gradient(#CFEAF7,#FFF6E2 78%);border:3px solid var(--deep);border-radius:22px}
.s1-stage button{padding:0;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.s1-stage img{display:block;width:100%;height:auto}
.s1-hillbg{position:absolute;inset:auto 0 0 0;width:100%;height:100%;pointer-events:none}
.s1-hill{position:absolute;right:-6px;top:96px;width:120px;height:68px;line-height:0}
.s1-hill svg{width:100%;height:100%}
.s1-hill.rustle .s1-grass{transform-origin:80px 26px;animation:s1rustle .2s ease-in-out 4 alternate}
@keyframes s1rustle{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}
.s1-goat{position:absolute;right:34px;top:64px;width:54px;line-height:0;transform:translateY(46px);opacity:0;pointer-events:none;transition:transform .35s cubic-bezier(.3,1.5,.6,1),opacity .2s;z-index:1}
.s1-hill{z-index:2}
.s1-goat.show{transform:none;opacity:1;pointer-events:auto}
.s1-goat.hopaway{animation:s1hopaway .45s ease-in forwards}
@keyframes s1hopaway{40%{transform:translateY(-14px)}100%{transform:translate(30px,40px);opacity:0}}
.s1-bubble{line-height:1.15;font-family:var(--display);font-weight:700;color:var(--deep);background:var(--white);border:3px solid var(--deep);border-radius:14px;padding:5px 9px}
.s1-goat-say{position:absolute;left:8px;top:60px;max-width:118px;font-size:13px;opacity:0;transform:scale(.6);transform-origin:left top;transition:opacity .2s,transform .25s;pointer-events:none;z-index:3}
.s1-goat-say.show{opacity:1;transform:none}
.s1-slots{position:absolute;left:8px;top:8px;display:flex;flex-wrap:wrap;align-items:center;gap:6px;width:186px;z-index:4}
.s1-slot{width:42px;height:42px;border:2.5px dashed rgba(112,64,42,.55) !important;border-radius:10px;background:rgba(255,255,255,.55) !important;overflow:hidden;line-height:0}
.s1-slot.is-full{border-style:solid !important;border-color:var(--deep) !important;background:var(--white) !important}
.s1-slot.is-gold{box-shadow:0 0 0 3px var(--sun)}
.s1-slot.is-now{transform:scale(1.15);box-shadow:0 0 0 4px var(--sun)}
.s1-slot-fig,.s1-slot-fig img{display:block;width:100%;height:100%;object-fit:cover}
.s1-slot.pop,.s1-chip.pop{animation:s1pop .4s ease-out}
.s1-chip{width:44px;height:44px;border-radius:50% !important;background:var(--sun) !important;border:3px solid var(--deep) !important;color:var(--deep);display:grid;place-items:center}
.s1-chip[hidden]{display:none}
.s1-chip svg{width:24px;height:24px}
@keyframes s1pop{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
.s1-ctl{position:absolute;right:8px;top:8px;display:flex;gap:6px;z-index:4}
.s1-tsound,.s1-soft{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:44px;min-width:44px;color:var(--deep);background:var(--cream) !important;border:3px solid var(--deep) !important;border-radius:999px;font-family:var(--display);font-weight:600;font-size:15px}
.s1-soft{padding:0 12px 0 9px !important}
.s1-tsound svg[hidden]{display:none}
.s1-tsound[aria-pressed=true]{background:var(--sun) !important}
.s1-soft[aria-pressed=true]{background:#2E3A63 !important;color:var(--cream)}
.s1-tsound.nudge{animation:s1pop .5s ease-out 2}
.s1-trot{position:absolute;left:50%;bottom:10px;width:112px;height:174px;margin-left:-56px;z-index:2}
.s1-tf{position:absolute;left:0;bottom:0;width:100%;line-height:0;visibility:hidden}
.s1-tf-oh{width:86%;left:7%}
.s1-tf-trot{width:150px;left:-19px}
.s1-trot[data-pose=down] .s1-tf-down,.s1-trot[data-pose=up] .s1-tf-up,.s1-trot[data-pose=oh] .s1-tf-oh,.s1-trot[data-pose=trot] .s1-tf-trot{visibility:visible}
.s1-trot.stomp .s1-tf{transform:translateY(2px) scaleY(.97);transform-origin:bottom center}
.s1-puff{position:absolute;left:4px;bottom:-4px;width:46px;height:20px;border-radius:50%;background:radial-gradient(closest-side,rgba(201,162,107,.9),rgba(201,162,107,0));opacity:0;pointer-events:none}
.s1-trot.puffing .s1-puff{animation:s1puff .42s ease-out}
@keyframes s1puff{0%{opacity:.95;transform:scale(.4)}100%{opacity:0;transform:scale(1.6,1.2) translateY(-6px)}}
.s1-trot[data-pose=trot]{animation:s1bob var(--beat) ease-in-out infinite alternate}
@keyframes s1bob{from{transform:translateY(0)}to{transform:translateY(-8px)}}
.s1-an{position:absolute;bottom:12px;line-height:0;opacity:0;transform:translateY(26px) scale(.6);transition:opacity .2s,transform .3s cubic-bezier(.3,1.6,.6,1);pointer-events:none;z-index:2}
.s1-an.is-in{opacity:1;transform:none;pointer-events:auto}
.s1-an-hen1{left:3%;width:40px}.s1-an-hen2{left:14%;width:40px}.s1-an-hen3{left:25%;width:40px}
.s1-an-cat{right:26%;width:52px;bottom:14px}.s1-an-duck{right:6%;width:40px}
.s1-an.is-in.hop{animation:s1hop .5s ease-out}
@keyframes s1hop{0%,100%{transform:none}40%{transform:translateY(-20px) rotate(-6deg)}}
.s1-an.is-in.wob{animation:s1wob .3s ease-in-out 3 alternate}
@keyframes s1wob{0%{transform:rotate(-14deg) translateX(-4px)}100%{transform:rotate(14deg) translateX(4px)}}
.s1-an.is-in.sway{animation:s1sway .9s ease-in-out 1 alternate}
@keyframes s1sway{0%,100%{transform:none}50%{transform:rotate(-6deg)}}
.s1-an.is-in.dance{animation:s1dance var(--beat) ease-in-out infinite alternate}
.s1-an-hen2.dance,.s1-an-cat.dance{animation-delay:calc(var(--beat) / 2)}
@keyframes s1dance{from{transform:translateY(0) rotate(-5deg)}to{transform:translateY(-14px) rotate(5deg)}}
.s1-stage.is-beat .s1-an.is-in{animation:s1bounce calc(var(--beat) / 2) ease-in-out infinite alternate}
@keyframes s1bounce{from{transform:translateY(0)}to{transform:translateY(-8px)}}
.s1-an.is-in.march{animation:s1march calc(var(--beat) / 2) steps(2) infinite}
@keyframes s1march{0%{transform:translateX(0) rotate(-4deg)}100%{transform:translateX(6px) rotate(4deg)}}
.s1-an.is-in.look{transform:rotate(-12deg) translateY(-4px);transition:transform .2s}
.s1-goldprint{position:absolute;left:24%;top:58px;width:84px;height:84px;margin-left:-42px;opacity:0;transform:scale(.3);pointer-events:none;z-index:3}
.s1-goldprint.show{animation:s1gold 2.5s ease-out forwards}
@keyframes s1gold{0%{opacity:0;transform:scale(2.2)}12%{opacity:1;transform:scale(.9)}20%{transform:scale(1)}85%{opacity:1}100%{opacity:0}}
.s1-flash{position:absolute;left:0;right:0;top:46px;text-align:center;font-family:var(--display);font-weight:700;font-size:clamp(40px,12vw,64px);line-height:1;color:var(--red);-webkit-text-stroke:3px var(--deep);paint-order:stroke fill;opacity:0;pointer-events:none;z-index:3}
.s1-flash.show{animation:s1flash .65s ease-out}
@keyframes s1flash{0%{opacity:0;transform:scale(.7)}25%{opacity:.9;transform:scale(1.05)}100%{opacity:0;transform:scale(1.2)}}
.s1-muted{position:absolute;left:50%;top:50%;width:96px;height:96px;margin:-48px 0 0 -48px;padding:18px;border-radius:50%;background:rgba(255,255,255,.92);border:4px solid var(--deep);color:var(--deep);opacity:0;pointer-events:none;z-index:5}
.s1-muted svg{width:100%;height:100%}
.s1-muted.show{animation:s1muted 1s ease-out}
@keyframes s1muted{0%,70%{opacity:1}100%{opacity:0}}

.s1-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.s1-tile{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:3px;padding:4px 4px 5px;min-width:0;background:var(--cream);border:3px solid var(--deep);border-radius:16px;box-shadow:0 4px 0 var(--deep);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.s1-tile-fig{display:block;aspect-ratio:1/1;max-width:100%;line-height:0;border-radius:10px;overflow:hidden;border:2px solid var(--deep)}
.s1-tile-fig img{width:100%;height:100%;object-fit:cover}
.s1-tile-w{font-family:var(--display);font-weight:700;font-size:clamp(12px,3.6vw,18px);line-height:1;white-space:nowrap;text-align:center;color:var(--red)}
.s1-tile:active{transform:translateY(3px);box-shadow:0 1px 0 var(--deep)}
.s1-tile.squash{animation:s1squash .16s ease-out}
@keyframes s1squash{0%{transform:scale(1)}40%{transform:scale(.92)}100%{transform:scale(1)}}
.s1-tile.boom{animation:s1boom .5s ease-out;z-index:2}
@keyframes s1boom{0%{transform:scale(1)}30%{transform:scale(1.14)}100%{transform:scale(1)}}
.s1-tile.hop{animation:s1hop .5s ease-out}
.s1-tile.demo{box-shadow:0 4px 0 var(--deep),0 0 0 5px var(--sun)}
.s1-toy.is-armed .s1-tile{box-shadow:0 4px 0 var(--deep),0 0 0 4px var(--sun);animation:s1armed calc(var(--beat) / 2) ease-in-out infinite alternate}
@keyframes s1armed{from{box-shadow:0 4px 0 var(--deep),0 0 0 3px var(--sun)}to{box-shadow:0 4px 0 var(--deep),0 0 0 8px rgba(247,201,75,.55)}}

.s1-path{position:relative;height:56px;touch-action:none;user-select:none;-webkit-user-select:none}
.s1-path-bg{position:absolute;inset:0;width:100%;height:100%}
.s1-pr{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;line-height:0}
.s1-pr[data-p="0"]{left:12%;top:44px}.s1-pr[data-p="1"]{left:37%;top:19px}.s1-pr[data-p="2"]{left:63%;top:19px}.s1-pr[data-p="3"]{left:88%;top:44px}
.s1-pr svg{width:100%;height:100%;fill:none;stroke-linecap:round;transition:transform .12s}
.s1-pr .o{stroke:rgba(112,64,42,.45);stroke-width:9}
.s1-pr .f{stroke:rgba(255,246,226,.85);stroke-width:5;transition:stroke .1s}
.s1-pr.on svg,.s1-pr.demo svg{transform:scale(1.15)}
.s1-pr.on .o,.s1-pr.demo .o{stroke:var(--deep)}
.s1-pr.on .f,.s1-pr.demo .f{stroke:var(--brown)}
.s1-pr.armed .f{stroke:var(--red)}
.s1-pr.armed svg{filter:drop-shadow(0 0 6px rgba(247,201,75,.95))}
.s1-pr.gold .f{stroke:var(--sun)}
.s1-pr.dim svg{opacity:.35;filter:none}
.s1-padrow{display:flex;justify-content:center}
.s1-pad{display:block;padding:0;background:none;border:0;border-radius:50%;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.s1-pad svg{display:block;width:132px;height:132px;border-radius:50%;border:4px solid var(--deep);box-shadow:0 7px 0 var(--deep);transition:transform .07s,box-shadow .07s}
.s1-pad.hit svg,.s1-pad.sdemo svg,.s1-pad:active svg{transform:translateY(6px) scale(.96);box-shadow:0 1px 0 var(--deep)}
.s1-pad.nudge svg{animation:s1padpulse .7s ease-in-out var(--pulses,1)}
@keyframes s1padpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.s1-pad:focus-visible{outline:4px solid var(--sun);outline-offset:4px}
/* site v23: the start, the line that says what to do, the demonstration (one part lit, a hand), the buttons of the demonstration */
.s1-toy:not(.is-open) > :not(.s1-start){display:none !important}
.s1-toy.is-open > .s1-start{display:none}
.s1-start{display:flex;flex-direction:column;align-items:center;gap:12px;padding:18px 16px 22px;background:linear-gradient(#CFEAF7,#FFF6E2 80%);border:3px solid var(--deep);border-radius:22px;text-align:center}
.s1-start-fig{width:120px;line-height:0}
.s1-start-fig img{width:100%;height:auto}
.s1-go{min-height:76px;font-size:clamp(24px,7vw,32px);gap:10px;padding-inline:28px 34px;box-shadow:0 6px 0 var(--deep);animation:s1go 1.4s ease-in-out infinite}
@keyframes s1go{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.s1-start-sub{font-weight:700;color:var(--deep);font-size:17px}
.s1-coach{display:flex;align-items:center;gap:10px;min-height:calc(3.6em + 12px);padding:6px 10px 6px 6px;background:var(--white);border:3px solid var(--deep);border-radius:18px}
.s1-coach-fig{flex:0 0 44px;width:44px;height:44px;border-radius:50%;overflow:hidden;background:#CFEAF7;border:2px solid var(--deep);line-height:0}
.s1-coach-fig img{width:150%;height:auto;margin:-2px 0 0 -25%}
.s1-coach-t{flex:1;min-width:0;font-family:var(--display);font-weight:600;font-size:clamp(17px,4.6vw,21px);line-height:1.2;color:var(--deep)}
.s1-coach.is-talk .s1-coach-t{color:var(--red)}
.s1-coach.pop{animation:s1pop .35s ease-out}
.s1-skip{flex:none;min-height:44px;padding:4px 14px;font-family:var(--display);font-weight:600;font-size:15px;color:var(--deep);background:var(--cream);border:2px solid var(--deep);border-radius:999px;cursor:pointer}
.s1-skip[hidden]{display:none}
.s1-walk{display:flex;flex-direction:column;gap:10px;border-radius:20px;transition:opacity .25s,box-shadow .25s}
.s1-toy.is-coach .s1-stage,.s1-toy.is-coach .s1-tiles,.s1-toy.is-coach .s1-walk{opacity:.3;transition:opacity .25s}
.s1-toy.is-coach .spot{opacity:1;box-shadow:0 0 0 5px var(--sun),0 0 24px rgba(247,201,75,.9);border-radius:20px}
.s1-toy.is-coach-tiles .s1-walk{opacity:1}.s1-toy.is-coach-tiles .s1-pad{opacity:.35}
.s1-toy.is-tour .s1-ctl{visibility:hidden}
.s1-hand{position:absolute;left:0;top:0;width:56px;height:56px;z-index:20;pointer-events:none;opacity:0;transition:transform .6s cubic-bezier(.4,.1,.2,1),opacity .2s;filter:drop-shadow(0 4px 4px rgba(0,0,0,.25))}
.s1-hand svg{width:100%;height:100%;transform:rotate(-20deg);transform-origin:30% 10%}
.s1-hand.show{opacity:1}
.s1-hand::after{content:"";position:absolute;left:12px;top:-8px;width:28px;height:28px;border-radius:50%;border:4px solid var(--red);opacity:0}
.s1-hand.tap::after{animation:s1ripple .5s ease-out}
@keyframes s1ripple{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(1.7)}}
.s1-hand.tap svg{animation:s1handtap .26s ease-out}
@keyframes s1handtap{0%{transform:rotate(-20deg) scale(1)}45%{transform:rotate(-20deg) scale(.82) translateY(6px)}100%{transform:rotate(-20deg) scale(1)}}
.s1-tourbtns{display:flex;flex-direction:column;align-items:center;gap:8px}
.s1-turn{min-height:68px;font-size:clamp(22px,6vw,28px);padding-inline:34px;box-shadow:0 6px 0 var(--deep);animation:s1go 1.4s ease-in-out infinite}
.s1-turn[hidden],.s1-how[hidden]{display:none}
.s1-how{min-height:44px;padding:6px 10px;font-family:var(--display);font-weight:600;font-size:17px;color:var(--deep);background:none;border:0;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.s1-pr.pop svg{animation:s1pop .3s ease-out}
.s1-slot.is-demo{border-style:solid !important;border-color:var(--deep) !important;background:var(--white) !important}

.s1-reveal{display:flex;flex-direction:column;gap:14px;align-items:center;background:var(--cream);border:3px solid var(--deep);border-radius:22px;padding:16px}
.s1-reveal[hidden]{display:none}
.s1-reveal.pop{animation:s1pop .5s ease-out}
.s1-reveal-fig{width:min(240px,70%);border:4px solid var(--deep);border-radius:18px;overflow:hidden;background:var(--white);line-height:0}
.s1-reveal-txt{display:flex;flex-direction:column;gap:6px;text-align:center}
.s1-next{font-family:var(--display);font-weight:600;font-size:clamp(18px,5vw,24px);line-height:1.2;color:var(--deep)}
.s1-kick{font-weight:700;color:var(--deep)}

/* the page's own sound button works only for the song with the lyrics: it shows while the top of the page or the song is on screen and hides everywhere else (the toy has its own; v25.4) */
body.s1-songonly .s1-mute{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(20px);transition:opacity .2s,transform .2s,visibility 0s .2s}
body.s1-songonly.s1-songview .s1-mute{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .2s,transform .2s}
.s1-mute{transition:opacity .2s,transform .2s}

/* soft (bedtime): calm motion, no flash */
.is-soft .s1-flash{display:none}
.is-soft .s1-tile.boom{animation-name:s1squash}
.is-soft .s1-an.is-in.dance,.is-soft .s1-stage.is-beat .s1-an.is-in{animation:s1sway 1.6s ease-in-out infinite alternate}
.is-soft .s1-goldprint.show{animation:s1goldsoft 2.5s ease-out forwards}
@keyframes s1goldsoft{0%{opacity:0;transform:scale(1)}20%,85%{opacity:1;transform:scale(1)}100%{opacity:0}}
.is-soft.is-armed .s1-tile{animation:none}
.is-soft .s1-stage{background:linear-gradient(#C9D2EE,#EDE6F2 78%)}

/* for grown-ups: calm, clear, no characters */
.s1-grown{background:var(--cream);border-top:3px solid #E3CFA4}
.s1-glabel{display:inline-block;font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--brown);border:2px solid var(--brown);border-radius:999px;padding:3px 12px}
.s1-gh{margin-top:12px;font-family:var(--display);font-weight:600;font-size:clamp(30px,8vw,44px);line-height:1.1;color:var(--deep)}
.s1-gsub{margin-top:8px;max-width:52ch;font-size:19px;color:var(--ink)}
.s1-gbody{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;margin-top:22px;max-width:980px}
.s1-gthumbs{display:flex;justify-content:center;gap:14px;padding:8px 0}
.s1-gthumb{width:min(42%,190px);line-height:0;background:var(--white);border:2px solid #D9C49B;border-radius:8px;padding:6px;box-shadow:0 8px 18px rgba(112,64,42,.18)}
.s1-gthumb:first-child{transform:rotate(-3deg)}.s1-gthumb:last-child{transform:rotate(2.5deg)}
.s1-gthumb img{width:100%;height:auto}
.s1-gcol{display:flex;flex-direction:column;gap:14px}
.s1-glist{display:flex;flex-direction:column;gap:12px}
.s1-glist li{position:relative;padding-left:36px;font-size:18px;color:var(--ink)}
.s1-glist li::before{content:"";position:absolute;left:0;top:2px;width:24px;height:24px;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%2370402A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat;border:2px solid var(--deep)}
.s1-glist b{color:var(--deep)}
.s1-gbtn{align-self:flex-start}
.s1-gmail{font-size:18px;color:var(--ink);max-width:56ch}
.s1-gmail a{font-weight:700;color:var(--deep);text-decoration:underline;text-underline-offset:3px}
.s1-gnote{font-size:15px;color:#5B4A3F;max-width:56ch}
.s1-gbook{display:flex;align-items:center;gap:16px;margin-top:26px;max-width:620px;padding:12px 16px;background:var(--white);border:2px solid #D9C49B;border-radius:16px;text-decoration:none;color:var(--deep)}
.s1-gcover{flex:0 0 76px;line-height:0;border-radius:6px;overflow:hidden;box-shadow:0 4px 10px rgba(112,64,42,.2)}
.s1-gcover img{width:100%;height:auto}
.s1-gbook-t{display:flex;flex-direction:column;gap:4px;font-size:17px}
.s1-gbook-t b{font-family:var(--display);font-weight:600;font-size:20px;line-height:1.15}
.s1-gbook-t span{text-decoration:underline;text-underline-offset:3px}

/* a short phone screen (an iPhone SE or mini with Safari's bars): a smaller Trotley and hoof, so the whole toy fits */
@media (max-height:640px) and (orientation:portrait){
  .s1-toy{gap:8px}
  .s1-stage{height:174px}
  .s1-trot{width:92px;height:143px;margin-left:-46px}
  .s1-tf-trot{width:123px;left:-16px}
  .s1-pad svg{width:104px;height:104px}
  .s1-coach{min-height:calc(2.4em + 12px)}
  .s1-coach-t{font-size:16px;line-height:1.15}
}
@media (min-width:700px){
  .s1-stage{height:270px}
  .s1-trot{width:128px;height:198px;margin-left:-64px}
  .s1-tf-trot{width:170px;left:-21px}
  .s1-an-hen1,.s1-an-hen2,.s1-an-hen3{width:48px}.s1-an-cat{width:62px}.s1-an-duck{width:48px}
}
@media (min-width:900px){
  .s1-hero-fig img{width:300px}
  .s1-hero-in{padding-block:24px 10px}
  .s1-lyrics{padding:26px 28px}
  .s1-tail{flex-direction:row;flex-wrap:wrap;gap:6px 14px}
  .s1-toy{max-width:480px}
  .s1-reveal{flex-direction:row;align-items:center;padding:22px}
  .s1-reveal-txt{text-align:left}
  .s1-gbody{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center}
}
/* a phone held sideways: the stage on the left, the pictures, the path and the hoof on the right */
@media (orientation:landscape) and (max-height:520px){
  .s1-toy{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"coach coach" "stage tiles" "stage walk" "btns btns" "rev rev";column-gap:16px;row-gap:8px;align-items:center}
  .s1-stage{grid-area:stage;height:100%;min-height:230px}.s1-tiles{grid-area:tiles}.s1-walk{grid-area:walk}.s1-coach{grid-area:coach}.s1-tourbtns{grid-area:btns}.s1-reveal{grid-area:rev}
  .s1-tiles,.s1-path{width:100%;max-width:330px;justify-self:center}
  .s1-tile-w{font-size:clamp(10px,1.6vw,14px)}
  .s1-pad svg{width:96px;height:96px}
}
@media (prefers-reduced-motion:reduce){
  .s1-ln,.s1-an,.s1-goat,.s1-goat-say,.s1-pr svg,.s1-pad svg{transition:none}
  .s1-ln.on .s1-pop{animation:none;text-decoration:underline 4px;text-underline-offset:4px}
  .s1-tile,.s1-tile.squash,.s1-tile.boom,.s1-tile.hop,.s1-an.is-in,.s1-an.is-in.hop,.s1-an.is-in.wob,.s1-an.is-in.dance,.s1-an.is-in.march,.s1-an.is-in.sway,.s1-stage.is-beat .s1-an.is-in,.s1-trot[data-pose=trot],.s1-pad.nudge svg,.s1-hill.rustle .s1-grass,.s1-slot.pop,.s1-chip.pop,.s1-reveal.pop,.s1-tsound.nudge,.s1-goat.hopaway{animation:none !important}
  .s1-an{transform:none}
  .s1-toy.is-armed .s1-tile{box-shadow:0 4px 0 var(--deep),0 0 0 5px var(--sun)}
  .s1-tile.boom,.s1-tile.demo{outline:4px solid var(--red);outline-offset:2px}
  .s1-pad.nudge svg{outline:4px dashed var(--deep);outline-offset:4px}
  .s1-hill.rustle .s1-grass{stroke:#2F6B22}
  .s1-flash.show,.s1-goldprint.show{animation:none;opacity:1;transform:none}
  .s1-trot.stomp .s1-tf,.s1-tile:active,.s1-pad.hit svg,.s1-pad.sdemo svg,.s1-pad:active svg,.s1-pr.on svg{transform:none}
  .s1-trot.puffing .s1-puff{animation:none;opacity:.8}
  .s1-go,.s1-turn,.s1-hand.tap svg,.s1-coach.pop{animation:none}
  .s1-hand{transition:none}
  .s1-mini.lit{transform:none}
}

/* site v24: the song and the games first, on the grown-ups page of storybook 1 */
.s1-go-sec{padding-block:26px 6px}
.s1-go{background:var(--white);border:3px solid var(--deep);border-radius:24px;padding:22px 20px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;max-width:760px;box-shadow:0 6px 0 var(--deep)}
.s1-go-h{font-family:var(--display);font-weight:600;font-size:clamp(26px,7vw,36px);line-height:1.1;color:var(--deep);margin:0;text-wrap:balance}
.s1-go p{font-size:19px;font-weight:700;color:var(--deep);margin:0}
.s1-go-btn{min-height:68px;font-size:clamp(21px,5.8vw,26px);gap:10px;padding-inline:24px 28px;box-shadow:0 6px 0 var(--deep)}

/* v25: the music video of the Hoof Song, after the toy */
.s1-video{background:#FFF6E2}
.s1-vh{font-family:var(--display);font-weight:600;font-size:clamp(28px,7vw,40px);line-height:1.1;color:var(--deep)}
.s1-vp{margin:8px 0 16px;font-size:18px;max-width:640px}
.s1-vframe{max-width:760px}
.s1-vmeta{margin-top:8px}