/* The book and the night sky are authored little worlds, separate from the toy. */
.how-section{padding-top:88px;padding-bottom:60px;overflow:visible}
.how-section>.section-heading{margin-bottom:8px}
.how-section>.section-heading h2{font-size:clamp(40px,4.5vw,64px);line-height:1.06}
.wonder-book{--book-p:1;--land-p:1;--finish-p:1;position:relative;margin:0 auto;max-width:1050px}
.book-scene{position:relative;height:540px;isolation:isolate;perspective:1200px;overflow:visible}
.book-scene>*{pointer-events:none;user-select:none}
.book-halo{position:absolute;inset:1% 0 6%;z-index:-1;background:radial-gradient(ellipse at 50% 58%,#eddfef 0,#f3e8ef88 45%,transparent 70%);border-radius:50%}
.book-pages{position:absolute;left:0;bottom:-15px;width:100%;height:72%;overflow:visible;filter:drop-shadow(0 14px 15px #76577512);transform-origin:50% 82%}
.book-page-left{transform-origin:50% 42%;transform-box:view-box}
.book-page-right{transform-origin:50% 42%;transform-box:view-box}
.book-kingdom{position:absolute;width:64%;height:auto;left:18%;bottom:16%;transform-origin:50% 95%;filter:drop-shadow(0 18px 10px #67536818)}
.book-seed{position:absolute;top:2%;left:34%;width:38px;height:38px;filter:drop-shadow(0 0 14px #e3ba6599)}
.book-front-blocks{position:absolute;inset:0;z-index:2}
.book-block{position:absolute;bottom:20%;width:43px;height:43px;border-radius:5px;box-shadow:inset -9px -6px #0000000d,2px 8px 10px #5945580c;transform:rotate(-9deg)}
.book-block:before{content:'';position:absolute;left:5px;right:3px;top:-9px;height:10px;border-radius:3px;transform:skewX(-33deg);transform-origin:bottom;background:inherit;filter:brightness(1.08)}
.block-mint{left:18%;background:#bfd6ca;width:56px;height:43px;rotate:-6deg}
.block-pink{right:21%;bottom:19%;background:#e9b6cb;rotate:12deg}
.block-lilac{right:16%;bottom:26%;background:#d1c1df;width:31px;height:38px;rotate:-9deg}
.book-wompy-note{display:flex;justify-content:center;align-items:center;gap:11px;min-height:76px;margin-top:-14px;position:relative;z-index:3}
.book-wompy-note>img{height:67px;width:67px;object-fit:contain}
.book-wompy-note>p{font:500 19px/1.5 var(--display);color:#725380;max-width:510px;min-height:29px}
.book-wonders{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;min-height:46px;margin:6px 0 29px}
.book-wonders[hidden]{display:none}
.book-wonders button{font:500 12px/1.4 var(--body);display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid #dfd1de;border-radius:50px;background:#fffdf8;color:#715578;padding:10px 17px;min-height:44px;cursor:pointer;transition:background .2s,border-color .2s;box-shadow:0 3px 0 #eddee641}
.book-wonders button>span{font:22px/1 var(--display);color:#ab8caa}
.book-wonders button[aria-pressed=true]{background:#f0e6f3;border-color:#b5a0c3}
.book-wonders button:hover{background:#f3eaf2;border-color:#b5a0c3}
.book-wonders button:focus-visible,#wake-star:focus-visible{outline:3px solid #9e7fae;outline-offset:4px}
.book-rainbow{position:absolute;left:13%;top:-2%;width:76%;height:90%;opacity:0;z-index:-1;overflow:visible;transition:opacity .25s}
.book-rainbow path{stroke-width:15;stroke-dasharray:1;stroke-dashoffset:1}
.wonder-book[data-rainbow=on] .book-rainbow{opacity:.78}
.wonder-book[data-rainbow=on] .book-rainbow path{stroke-dashoffset:0;transition:stroke-dashoffset 1.25s cubic-bezier(.22,.68,.15,1)}
.book-blooms{position:absolute;inset:0;z-index:3;pointer-events:none}
.book-flower{position:absolute;left:var(--flower-x);bottom:14%;width:7%;height:23%;transform:scale(0);transform-origin:50% 100%;opacity:0}
.wonder-book[data-flowers=on] .book-flower{opacity:1;transform:scale(1);transition:transform .65s cubic-bezier(.2,.7,.25,1.2),opacity .2s;transition-delay:calc(var(--flower-i) * 60ms)}
.book-flower:nth-child(2n){bottom:20%;height:18%;rotate:-11deg}
.book-shooting-star{position:absolute;width:45%;height:34%;top:2%;right:5%;opacity:0;transform:translate(-28px,20px);transition:opacity .25s,transform .7s cubic-bezier(.18,.65,.2,1)}
.wonder-book[data-star=on] .book-shooting-star{opacity:1;transform:translate(0,0)}
.how-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:30px;padding-top:30px;border-top:1px solid #e5dbe6}
.how-steps article{display:flex;gap:13px;align-items:flex-start}
.how-step-number{display:grid;place-items:center;flex:0 0 29px;height:29px;border:1px solid #d4bdd6;color:#78677c;font:600 10px/1 var(--body);border-radius:50%;margin-top:2px}
.how-steps h3{font:600 25px/1.14 var(--display);letter-spacing:-.025em;color:var(--plum);margin:0 0 10px}
.how-steps p{font:400 12px/1.8 var(--body);color:#78677c;margin:0}
.how-section .how-bottom{margin-top:27px;padding-top:22px}
html.world-motion-ready[data-motion=on] .wonder-book{--book-p:clamp(0,calc(var(--world-p) * 1.6),1);--land-p:clamp(0,calc((var(--world-p) - .08) * 1.15),1);--finish-p:clamp(0,calc((var(--world-p) - .68) * 3.125),1)}
html.world-motion-ready[data-motion=on] .book-pages{transform:translateY(calc((1 - var(--book-p)) * 35px)) scaleX(calc(.68 + var(--book-p) * .32))}
html.world-motion-ready[data-motion=on] .book-page-left{transform:rotateY(calc((1 - var(--book-p)) * 38deg))}
html.world-motion-ready[data-motion=on] .book-page-right{transform:rotateY(calc((1 - var(--book-p)) * -38deg))}
html.world-motion-ready[data-motion=on] .book-kingdom{transform:translateY(calc((1 - var(--land-p)) * 35px)) rotateX(calc((1 - var(--land-p)) * 76deg)) scale(calc(.86 + var(--land-p) * .14));opacity:calc(.5 + var(--land-p) * .5)}
html.world-motion-ready[data-motion=on] .book-halo{opacity:calc(.15 + var(--land-p) * .85);transform:scale(calc(.75 + var(--land-p) * .25))}
html.world-motion-ready[data-motion=on] .book-block{translate:0 calc((1 - var(--land-p)) * -60px);opacity:calc(.3 + var(--land-p) * .7)}
html.world-motion-ready[data-motion=on] .book-seed{opacity:var(--finish-p);transform:translate(0,calc((1 - var(--finish-p)) * -55px)) scale(calc(.5 + var(--finish-p) * .5)) rotate(calc((1 - var(--finish-p)) * -60deg))}
/* The sky's layers live above its picture and below its independent purchase copy. */
.closing{isolation:isolate;overflow:hidden;min-height:660px;background:#372843}
.closing-art{position:absolute;inset:0 0 0 26%;z-index:0;isolation:isolate;--sky-p:1;mask-image:linear-gradient(90deg,transparent,#000 22%)}
.closing-art>img{width:100%;height:100%;object-fit:cover;object-position:62% 55%}
.closing .closing-shade{z-index:1;background:linear-gradient(90deg,#372843 0%,#372843f5 24%,#37284385 48%,#37284300 78%);pointer-events:none}
.closing-copy{position:relative;z-index:2;pointer-events:none}
.closing-copy a{pointer-events:auto}
.closing-copy h2{max-width:620px}
.sky-light{position:absolute;inset:0;background:radial-gradient(ellipse at 66% 23%,#ffefd541,transparent 45%);mix-blend-mode:screen;pointer-events:none}
.sky-map{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.sky-thought-trail{fill:none;stroke:#ffe2a17a;stroke-width:1.8;stroke-dasharray:1;stroke-dashoffset:0}
.sky-thought{transform:translate(665px,110px)}
.sky-drawing>path{fill:none;stroke:#ffe6b6;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;filter:drop-shadow(0 0 4px #f5dfa975)}
.sky-anchor>path{filter:drop-shadow(0 0 6px #f9d997)}
.sky-extra-stars{fill:#ffecbd;opacity:.25}
.sky-invitation{position:absolute;right:5%;bottom:28px;width:330px;max-width:60%;text-align:center;z-index:4;color:#fff2d9;padding:16px 17px;border:1px solid #ead6f238;border-radius:20px;background:#3a2b4ccc;box-shadow:0 6px 24px #261d3b1a}
.sky-invitation[hidden]{display:none}
.sky-invitation p{color:inherit;min-height:42px;margin:0 0 8px;font:500 15px/1.4 var(--display)}
#wake-star{min-height:44px;border:1px solid #d8bcdda8;border-radius:40px;padding:10px 16px;background:#fff3da;color:#50365f;font:600 12px/1.5 var(--body);cursor:pointer}
#wake-star span{margin-left:10px}
#wake-star:hover{background:#fffaf1}
html.world-motion-ready[data-motion=on] .closing-art{--sky-p:clamp(0,calc((var(--world-p) - .12) * 1.14),1)}
html.world-motion-ready[data-motion=on] .sky-thought-trail{stroke-dashoffset:calc(1 - var(--sky-p));opacity:calc(1 - var(--sky-p) * .6)}
html.world-motion-ready[data-motion=on] .sky-thought{transform:translate(calc(120px + var(--sky-p) * 545px),calc(510px - var(--sky-p) * 400px));opacity:calc(.3 + var(--sky-p) * .7)}
html.world-motion-ready[data-motion=on] .sky-drawing>path{stroke-dashoffset:calc(1 - var(--sky-p))}
html.world-motion-ready[data-motion=on] .sky-anchor{opacity:clamp(0,calc((var(--sky-p) - var(--star-i) * .1) * 3),1)}
html.world-motion-ready[data-motion=on] .sky-light{opacity:var(--sky-p)}
.sky-map[data-awake] .sky-extra-stars{opacity:1;transition:opacity .6s}
.sky-map[data-awake] .sky-drawing>path{stroke-dashoffset:0!important}
@keyframes sky-wake{0%{opacity:.15;scale:.82}60%{opacity:1;scale:1.06}100%{opacity:1;scale:1}}
html[data-motion=on] .sky-map.sky-waking .sky-drawing{animation:sky-wake 900ms ease-out;transform-origin:60% 25%}
@media(min-width:1450px){.book-scene{height:590px}}
@media(max-width:900px){.book-scene{height:430px}.how-steps{gap:18px}.how-steps h3{font-size:21px}.closing-art{left:15%}.sky-invitation{max-width:49%}.book-wompy-note>p{font-size:17px}}
@media(max-width:680px){
 .how-section{padding-top:55px;padding-bottom:36px}.how-section>.section-heading h2{font-size:40px}.how-section>.section-heading>p:last-child{font-size:12px;max-width:310px;margin-inline:auto}
 .book-scene{overflow-x:clip;overflow-y:visible;height:330px;width:calc(100% + 22px);margin-left:-11px}.book-kingdom{width:89%;left:5.5%;bottom:21%}.book-pages{height:64%;width:114%;left:-7%;bottom:12px}.book-halo{inset:4% -5% 12%}.book-seed{top:3%;left:28%;width:28px;height:28px}.book-block{width:28px;height:28px;bottom:20%}.block-mint{left:13%;width:32px;height:25px}.block-pink{right:17%;bottom:19%}.block-lilac{right:9%;width:22px;height:28px;bottom:26%}.book-rainbow{width:100%;left:0;top:-2%;height:90%}.book-shooting-star{width:60%;right:0;height:28%;top:0}.book-flower{height:20%;width:9%;bottom:22%}
 .book-wompy-note{gap:8px;margin-top:-16px;padding-inline:7px;min-height:74px}.book-wompy-note>img{width:57px;height:57px;flex:0 0 57px}.book-wompy-note>p{font-size:16px;line-height:1.4;min-height:45px;max-width:270px}
 .book-wonders{gap:7px;margin:2px 0 25px}.book-wonders button{font-size:10px;min-height:44px;padding:9px 11px;gap:6px}.book-wonders button>span{font-size:18px}
 .how-steps{grid-template-columns:1fr;gap:20px;margin-top:18px;padding-top:25px}.how-steps article{gap:14px}.how-steps h3{font-size:25px;margin-bottom:4px}.how-steps p{font-size:12px;line-height:1.65;max-width:300px}.how-step-number{margin-top:2px}.how-section .how-bottom{margin-top:24px}
 .closing{display:flex;flex-direction:column;min-height:0}.closing-copy{order:0;padding-bottom:20px}.closing-copy h2{max-width:none}.closing-art{mask-image:none;order:1;position:relative;inset:auto;width:100%;min-height:385px;z-index:0;overflow:hidden;margin-top:0;background:#382847}.closing-art>img{height:385px;object-position:58% 50%;mask-image:linear-gradient(180deg,transparent,#000 14%)}.closing .closing-shade{display:none}.sky-map{height:300px;top:-5px}.sky-light{inset:0 0 100px}.sky-invitation{left:18px;right:18px;bottom:15px;width:auto;max-width:none;display:flex;align-items:center;gap:8px;padding:12px 14px;text-align:left;border-radius:18px}.sky-invitation p{flex:1;margin:0;font-size:13px;min-height:37px}.sky-invitation button{font-size:10px;flex:none;padding-inline:12px;max-width:139px}.sky-invitation button>span{margin-left:4px}
}
@media(max-width:360px){.book-scene{height:278px}.how-section>.section-heading h2{font-size:34px}.book-wonders button{font-size:10px;padding-inline:10px}.book-wompy-note>p{font-size:15px}.how-steps h3{font-size:23px}.sky-invitation{left:12px;right:12px;padding:11px}.sky-invitation button{max-width:120px}.closing-art,.closing-art>img{min-height:340px;height:340px}}
html[data-motion=off] .wonder-book{--book-p:1!important;--land-p:1!important;--finish-p:1!important}
html[data-motion=off] .book-wonders *,html[data-motion=off] .book-rainbow *,html[data-motion=off] .book-flower,html[data-motion=off] .book-shooting-star,html[data-motion=off] .sky-map *{transition:none!important;animation:none!important}
@media(prefers-reduced-motion:reduce){.wonder-book{--book-p:1!important;--land-p:1!important;--finish-p:1!important}.wonder-book *, .sky-map *{transition:none!important;animation:none!important}}
@media print{.book-wonders,.sky-invitation{display:none}.wonder-book{--book-p:1!important;--land-p:1!important;--finish-p:1!important}}
[data-wonder-composed=true]{--world-p:1!important}