:root{--navy:#1b2f55;--ink:#22304a;--cream:#fff6e3;--paper:#fffbf2;--red:#d7262e;--green:#2f8f2a;--leaf:#5cb247;--yellow:#ffc928;--blue:#1e88c8;--sky:#bfe6fb;--honey:#c9822b;--chestnut:#8a4b22;--berry:#b0234f;--radius:28px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Nunito",system-ui,sans-serif;font-size:1.08rem;line-height:1.6;color:var(--ink);background:var(--cream)}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy)}
h1,h2,h3,.display{font-family:"Chewy","Nunito",cursive;font-weight:400;letter-spacing:.5px;line-height:1.1;color:var(--navy);margin:.2em 0 .4em}
h1{font-size:clamp(2.5rem,7vw,4.6rem)}
h2{font-size:clamp(2rem,5vw,3.1rem)}
h3{font-size:1.6rem}
.wrap{width:min(1180px,92vw);margin:0 auto}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:#fff;padding:.5rem 1rem;z-index:99}
/* header */
.site-head{background:var(--navy);color:#fff;position:sticky;top:0;z-index:50;box-shadow:0 4px 0 var(--yellow)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.6rem;color:#fff;text-decoration:none;font-family:"Chewy",cursive;font-size:1.7rem}
.brand svg{width:42px;height:42px}
.nav{display:flex;gap:.3rem;flex-wrap:wrap}
.nav a{color:#fff;text-decoration:none;font-weight:800;padding:.45rem .85rem;border-radius:999px;font-size:.98rem}
.nav a:hover,.nav a[aria-current=page]{background:var(--yellow);color:var(--navy)}
.menu-btn{display:none;background:var(--yellow);color:var(--navy);border:0;border-radius:999px;font:800 1rem Nunito,sans-serif;padding:.5rem 1rem}
@media(max-width:820px){.menu-btn{display:block}.nav{display:none;width:100%;flex-direction:column}.nav.open{display:flex}}
/* buttons */
.btn{display:inline-block;font:800 1.1rem "Nunito",sans-serif;text-decoration:none;border:0;cursor:pointer;padding:.85rem 1.5rem;border-radius:999px;background:var(--red);color:#fff;box-shadow:0 6px 0 #8f141a;transition:transform .25s cubic-bezier(.3,1.8,.5,1)}
.btn.alt{background:var(--yellow);color:var(--navy);box-shadow:0 6px 0 #b98a00}
.btn.blue{background:var(--blue);box-shadow:0 6px 0 #0f5786}
.btn:hover,.btn:focus-visible{transform:scale(1.08,.92) translateY(2px)}
.btn:active{transform:scale(.94,1.06)}
.bouncy{transition:transform .35s cubic-bezier(.3,1.8,.5,1)}
.bouncy:hover{transform:scale(1.05,.95) rotate(-1deg)}
/* hero */
.hero{position:relative;overflow:hidden;background:linear-gradient(#bfe6fb,#e7f7ff 60%,var(--cream))}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:2rem;padding:2.5rem 0 4rem;align-items:center}
@media(min-width:900px){.hero .wrap{grid-template-columns:1.05fr 1fr}}
.eyebrow{display:inline-block;background:var(--yellow);color:var(--navy);font-weight:900;letter-spacing:1.5px;text-transform:uppercase;font-size:.82rem;padding:.35rem .9rem;border-radius:999px;transform:rotate(-2deg)}
.tagline{font-family:"Chewy",cursive;font-size:clamp(1.4rem,3vw,1.9rem);color:var(--green)}
.hero-art{position:relative}
.hero-art .island{border-radius:44% 56% 52% 48%/48% 44% 56% 52%;border:8px solid #fff;box-shadow:0 18px 0 rgba(27,47,85,.15);animation:float 7s ease-in-out infinite}
.cloud{position:absolute;z-index:0;opacity:.9;fill:#fff;animation:drift 22s linear infinite}
.sun{position:absolute;top:18px;right:6%;width:90px;animation:spin 30s linear infinite}
.meta{font-weight:800;color:var(--berry)}
/* blobs */
.blob{display:block;width:100%;height:70px}
.blob.flip{transform:scaleY(-1)}
section{padding:3.5rem 0}
.band-blue{background:var(--blue);color:#fff}.band-blue h2,.band-blue h3{color:#fff}
.band-green{background:#e3f4d6}
.band-yellow{background:#fff0b8}
.band-navy{background:var(--navy);color:#fff}.band-navy h2,.band-navy h3{color:var(--yellow)}
/* cards */
.grid{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--paper);border:4px solid var(--navy);border-radius:var(--radius) 18px var(--radius) 22px;padding:1.2rem;box-shadow:8px 8px 0 var(--navy);transition:transform .35s cubic-bezier(.3,1.8,.5,1)}
.card:hover{transform:translate(-3px,-3px) rotate(-.6deg) scale(1.02,.98)}
.card img{border-radius:18px;border:3px solid var(--navy);background:#fff}
.card .tag{display:inline-block;font-weight:900;font-size:.8rem;background:var(--green);color:#fff;border-radius:999px;padding:.2rem .7rem;margin:.6rem 0 .2rem}
.card .tag.red{background:var(--red)}.card .tag.navy{background:var(--navy)}
.wobble{animation:wobble 5s ease-in-out infinite;transform-origin:50% 90%}
.wobble:nth-child(2n){animation-delay:-1.4s}.wobble:nth-child(3n){animation-delay:-2.6s}
.feature{display:grid;gap:2rem;align-items:center}
@media(min-width:880px){.feature{grid-template-columns:.9fr 1.1fr}}
.cover{border-radius:14px;border:6px solid #fff;box-shadow:12px 12px 0 var(--navy);transform:rotate(-2deg)}
.soon{display:inline-block;margin-top:1rem;padding:1rem 1.4rem;border:4px dashed var(--red);border-radius:22px;background:#fff;font-weight:900;color:var(--red)}
.quote{font-family:"Chewy",cursive;font-size:1.5rem;color:var(--navy);background:#fff;border-radius:30px 30px 30px 6px;padding:.8rem 1.2rem;display:inline-block;border:3px solid var(--navy)}
.placeholder{border:4px dashed var(--honey);background:#fff;border-radius:22px;padding:1rem 1.2rem}
.placeholder b.ph{display:inline-block;background:var(--honey);color:#fff;border-radius:999px;padding:.1rem .7rem;font-size:.8rem;letter-spacing:1px}
/* signup */
.signup form{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1rem}
.signup input{flex:1 1 240px;font:700 1.1rem Nunito,sans-serif;padding:.85rem 1.2rem;border-radius:999px;border:4px solid var(--navy)}
.signup .thanks{margin-top:1rem;background:var(--yellow);color:var(--navy);font-weight:900;border-radius:20px;padding:1rem 1.2rem;transform-origin:left center}
.signup .thanks[hidden]{display:none}
/* footer */
.site-foot{background:var(--navy);color:#dfe8ff;padding:2.5rem 0 2rem}
.site-foot a{color:var(--yellow)}
.site-foot .cols{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.site-foot h3{color:var(--yellow);font-size:1.4rem}
.small{font-size:.9rem}
/* island */
.map-stage{position:relative;max-width:820px;margin:0 auto;border-radius:44% 56% 50% 50%/46% 46% 54% 54%;overflow:hidden;border:10px solid #fff;box-shadow:0 18px 0 rgba(27,47,85,.2)}
.map-stage img.base{width:100%}
.pin{position:absolute;transform:translate(-50%,-50%);width:66px;height:66px;border-radius:50%;border:4px solid #fff;display:grid;place-items:center;font:900 1.3rem Nunito,sans-serif;background:#6b7280;color:#fff;box-shadow:0 5px 0 rgba(0,0,0,.3)}
.pin.on{background:var(--red);animation:pop .6s cubic-bezier(.3,1.8,.5,1)}
.pin .lbl{position:absolute;top:100%;margin-top:6px;white-space:nowrap;background:var(--navy);color:#fff;font-size:.78rem;padding:.15rem .55rem;border-radius:999px}
@media(max-width:600px){.pin{width:44px;height:44px;font-size:1rem}.pin .lbl{display:none}}
.pieces{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:2rem}
.piece{position:relative}
.piece img{filter:grayscale(1) brightness(.85)}
.piece.on img{filter:none}
.piece .lock{position:absolute;z-index:2;top:-12px;left:18px;background:var(--navy);color:#fff;border-radius:999px;padding:.2rem .7rem;font-weight:900;font-size:.85rem}
.piece.on .lock{background:var(--green)}
.piece.on{animation:pop .7s cubic-bezier(.3,1.8,.5,1)}
.progress{height:28px;border:4px solid var(--navy);border-radius:999px;background:#fff;overflow:hidden}
.progress > span{display:block;height:100%;background:repeating-linear-gradient(45deg,var(--yellow) 0 14px,#ffb300 14px 28px);width:0;transition:width .7s cubic-bezier(.3,1.6,.5,1)}
.codebox{display:flex;flex-wrap:wrap;gap:.8rem}
.codebox input{flex:1 1 220px;font:800 1.15rem Nunito,sans-serif;text-transform:uppercase;padding:.85rem 1.2rem;border-radius:999px;border:4px solid var(--navy)}
.msg{font-weight:900;margin-top:.8rem;min-height:1.6em}
.msg.err{color:var(--red)}.msg.ok{color:var(--green)}
.testcodes{background:#fff;border:4px dashed var(--blue);border-radius:22px;padding:1rem 1.2rem;margin-top:1.5rem}
.testcodes code{white-space:nowrap;display:inline-block;margin:.15rem 0;font-weight:900;background:#e7f4ff;padding:.1rem .45rem;border-radius:8px;color:var(--navy)}
.celebrate{position:fixed;inset:0;pointer-events:none;z-index:90;display:grid;place-items:center}
.celebrate .burst{background:var(--yellow);color:var(--navy);font-family:Chewy,cursive;font-size:clamp(1.8rem,5vw,3rem);padding:1.2rem 2rem;border-radius:40% 60% 55% 45%/50% 45% 55% 50%;border:6px solid var(--navy);box-shadow:10px 10px 0 var(--navy);animation:pop .7s cubic-bezier(.3,1.8,.5,1)}
.confetti{position:fixed;top:-20px;width:12px;height:18px;z-index:89;pointer-events:none;border-radius:3px;animation:fall linear forwards}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-12px) rotate(1deg)}}
@keyframes drift{from{transform:translateX(-30vw)}to{transform:translateX(110vw)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes wobble{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg) scale(1.01,.99)}}
@keyframes pop{0%{transform:scale(.3,.3)}60%{transform:scale(1.12,.9)}80%{transform:scale(.96,1.05)}100%{transform:scale(1)}}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* ebook */
.lockcover{position:relative;max-width:440px}
.lockcover img{filter:blur(10px) saturate(1.1);border-radius:14px;border:6px solid #fff}
.lockcover span{position:absolute;inset:0;display:grid;place-items:center;font:400 2.4rem Chewy,cursive;color:#fff;text-shadow:0 3px 0 var(--navy)}
.reader-top{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;margin-bottom:1rem}
.book{position:relative;perspective:1800px;background:var(--navy);border-radius:22px;padding:14px;aspect-ratio:2/1;max-height:72vh;margin:0 auto;outline:none;overflow:hidden}
.book:focus-visible{box-shadow:0 0 0 5px var(--yellow)}
.book:fullscreen{max-height:none;border-radius:0;display:grid;place-items:center}
.spread{position:absolute;inset:14px;margin:0;display:none;transform-origin:left center;backface-visibility:hidden}
.spread.cur{display:block}
.spread img{width:100%;height:calc(100% - 2rem);object-fit:contain;background:#fff;border-radius:10px}
.spread figcaption{color:#fff;text-align:center;font-weight:800;height:2rem;line-height:2rem}
.spread.in-next{animation:turnIn .65s cubic-bezier(.3,1.3,.5,1)}
.spread.in-prev{animation:turnBack .65s cubic-bezier(.3,1.3,.5,1)}
@keyframes turnIn{0%{transform:rotateY(-70deg) scale(.96)}100%{transform:rotateY(0)}}
@keyframes turnBack{0%{transform:translateX(-30%) scale(.95)}100%{transform:none}}
.reader-ctl{display:flex;gap:1rem;justify-content:center;align-items:center;margin-top:1rem;flex-wrap:wrap}
@media(max-width:600px){.book{aspect-ratio:auto;height:60vh}}
.artcoming{display:grid;place-items:center;text-align:center;min-height:240px;border-radius:18px;border:3px dashed var(--chestnut);background:repeating-linear-gradient(45deg,#fff6e3 0 16px,#f6e6c8 16px 32px);font:400 1.5rem Chewy,cursive;color:var(--chestnut)}