:root{--ink:#f8fff9;--deep:#061c25;--line:rgba(255,255,255,.16);--mint:#72f2c1;--gold:#ffd86b}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#051a21;color:var(--ink);font-family:Inter,Manrope,"Segoe UI",sans-serif}button{font:inherit}.world{min-height:100vh;position:relative;overflow:hidden;background:linear-gradient(140deg,rgba(2,16,25,.65),rgba(2,39,35,.34)),url('/assets/butterfly-garden.png') center/cover fixed}.world:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 10% 20%,#ff5ca71c,transparent 26%),radial-gradient(circle at 88% 15%,#45ffd21c,transparent 26%),linear-gradient(90deg,#03121b55,transparent 30%,transparent 70%,#03121b55)}button{cursor:pointer}.intro{display:grid;place-items:center;padding:34px}.introCard{position:relative;z-index:2;width:min(860px,95vw);text-align:center;padding:45px 65px 44px;border-radius:40px;border:1px solid #ffffff32;background:linear-gradient(145deg,#082832ef,#062523df);box-shadow:0 34px 100px #0008,inset 0 1px #fff3;backdrop-filter:blur(20px)}.eyebrow,.gardenHeading small,.taskVisual small,.helpCard>small,.finalCard>small{font-size:11px;letter-spacing:.22em;font-weight:900;color:var(--mint)}.intro h1{font:400 clamp(53px,7vw,86px)/.86 Georgia,serif;margin:8px 0 22px;text-shadow:0 13px 35px #0008}.intro h1 em{font-size:.68em;color:var(--gold);font-weight:400}.intro p{font-size:18px;color:#c4dcd5;margin:0 auto 25px}.heroAsset{width:165px;height:120px;object-fit:contain;display:block;margin:-2px auto -8px;filter:drop-shadow(0 0 22px #ff8b47aa);animation:flutter 1s ease-in-out infinite}.primary,.check{border:0;border-radius:16px;padding:16px 23px;background:linear-gradient(135deg,#ffe273,#ff9f43);color:#102d2d;font-weight:900;box-shadow:0 12px 30px #ffaf4238;transition:.2s}.primary:hover,.check:hover{transform:translateY(-3px);box-shadow:0 18px 42px #ffaf4255}.primary span,.check span{margin-left:20px}.textButton{display:block;margin:17px auto 0;border:0;background:none;color:#b5cec8;text-decoration:underline;text-underline-offset:5px}.sound{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#071e28aa;color:white}.intro>.sound{position:absolute;top:24px;right:24px;z-index:5}
header{height:90px;position:sticky;top:0;z-index:20;padding:13px 32px;display:grid;grid-template-columns:1fr minmax(280px,430px) 1fr;align-items:center;gap:25px;border-bottom:1px solid var(--line);background:#041a23df;backdrop-filter:blur(18px)}.brand{display:flex;gap:13px;align-items:center}.brand>span{width:46px;height:46px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(145deg,#4ce9ad,#168c87);font-size:22px;box-shadow:inset 0 1px #fff7}.brand small{display:block;font-size:9px;letter-spacing:.16em;color:#6fdfbd}.brand strong{display:block;font:22px Georgia,serif}.progress>div{display:flex;justify-content:space-between;font-size:12px;margin-bottom:7px;color:#b8d1cb}.progress b{color:var(--gold)}.progress>i{height:8px;background:#ffffff16;border-radius:20px;display:block;overflow:hidden}.progress u{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#51e4b1,#ffdc6a);box-shadow:0 0 18px #5af1bb;transition:.5s}.headerBtns{justify-self:end;display:flex;gap:9px}.headerBtns>button:first-child,footer button{border:1px solid var(--line);border-radius:13px;background:#ffffff0b;color:white;padding:10px 14px}.garden{position:relative;z-index:2;width:min(1290px,94vw);margin:auto;padding:33px 0 25px}.gardenHeading{display:flex;align-items:end;justify-content:space-between;margin-bottom:23px}.gardenHeading h2{font:42px Georgia,serif;margin:5px 0 0}.gardenHeading p{color:#abc4be;font-size:14px}.cocoonGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:15px}.pod{--glow:#ff6fad;position:relative;min-height:180px;overflow:hidden;border:1px solid var(--line);border-radius:28px;background:linear-gradient(150deg,#133e3dcc,#061c28e8);color:white;box-shadow:0 15px 40px #0005;transition:.25s}.pod:after{content:"";position:absolute;inset:auto -25% -55% -25%;height:90%;background:radial-gradient(ellipse,var(--glow),transparent 68%);opacity:.36}.pod:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--glow) 60%,white);box-shadow:0 24px 55px #0007,0 0 22px color-mix(in srgb,var(--glow) 25%,transparent)}.pod.p1{--glow:#ff72b2}.pod.p2{--glow:#62dfff}.pod.p3{--glow:#b493ff}.pod.p4{--glow:#ffbf51}.pod.p0{--glow:#7de465}.pod>b{position:absolute;left:15px;top:13px;color:#93aaa6;font-size:10px}.pod small{position:absolute;left:0;right:0;bottom:13px;font-size:9px;letter-spacing:.14em;color:#9bb5b0}.branch{position:absolute;left:50%;top:-18px;width:3px;height:57px;background:#6b4e31;transform:rotate(4deg)}.cocoon{position:absolute;display:block;left:50%;top:29px;width:72px;height:108px;transform:translateX(-50%);transform-origin:top;border-radius:49% 51% 46% 54%;background:radial-gradient(circle at 36% 25%,#fffbd3 0 4%,transparent 5%),linear-gradient(145deg,color-mix(in srgb,var(--glow) 72%,#fff),color-mix(in srgb,var(--glow) 38%,#9e7448) 58%,#372b31);box-shadow:inset 8px 4px 15px #fff4,inset -9px -8px 20px #0005,0 0 30px color-mix(in srgb,var(--glow) 42%,transparent);animation:sway 3.2s ease-in-out infinite}.cocoon i,.cocoon u,.cocoon em{position:absolute;left:9px;right:9px;height:2px;background:#ffffff35;transform:rotate(-13deg)}.cocoon i{top:31px}.cocoon u{top:57px}.cocoon em{top:79px}.pod.freed{background:linear-gradient(150deg,#174a42d8,#071f2be8);cursor:default}.pod.freed img{width:125px;height:112px;object-fit:contain;margin:26px auto 0;display:block;filter:drop-shadow(0 0 14px var(--glow));animation:flutter .9s ease-in-out infinite}.flyingLayer{position:fixed;inset:90px 0 45px;z-index:6;pointer-events:none;overflow:hidden}.wildFly{position:absolute;width:90px;height:70px;filter:drop-shadow(0 8px 12px #0007);animation:roam1 14s linear infinite}.wildFly img{width:100%;height:100%;object-fit:contain;animation:flutter .72s ease-in-out infinite}.fly0{animation-name:roam1}.fly1{animation-name:roam2;animation-duration:17s;animation-delay:-6s}.fly2{animation-name:roam3;animation-duration:19s;animation-delay:-11s}.fly3{animation-name:roam4;animation-duration:15s;animation-delay:-4s}.fly4{animation-name:roam2;animation-duration:21s;animation-delay:-15s}.fly5{animation-name:roam1;animation-duration:18s;animation-delay:-9s}footer{position:relative;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:14px 32px;border-top:1px solid var(--line);background:#04151ddd;color:#749b92;font-size:11px}
.overlay{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:23px;background:#020d14c4;backdrop-filter:blur(12px);animation:fade .2s}.taskCard,.helpCard,.finalCard{position:relative;width:min(930px,96vw);max-height:93vh;overflow:auto;padding:33px;border:1px solid #ffffff32;border-radius:34px;background:linear-gradient(145deg,#0a3438fa,#071c2cfa);box-shadow:0 40px 110px #000b}.close{position:absolute;right:18px;top:16px;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#ffffff0b;color:white;font-size:25px;z-index:5}.taskVisual{display:grid;grid-template-columns:170px 1fr;gap:25px;align-items:center}.taskVisual h2,.helpCard h2,.finalCard h2{font:44px Georgia,serif;margin:8px 0}.taskVisual p{margin:0;color:#b6cec8;line-height:1.5}.modalPod{position:relative;height:175px;border-radius:25px;background:radial-gradient(circle,#ff8bbb28,transparent 65%),#ffffff08}.modalPod>.cocoon{top:33px}.sentence{margin:25px 0 20px;padding:24px 20px;border:1px solid #ffffff24;border-radius:21px;background:#031820aa;text-align:center;font:27px/1.9 Georgia,serif}.wordUnit{display:inline-flex;align-items:baseline;white-space:nowrap}.gap{position:relative;width:25px;height:38px;margin:0 1px;border:1px dashed #ffffff2b;border-radius:8px;background:#ffffff08;color:transparent;vertical-align:middle;transition:.18s}.gap:after{content:"";position:absolute;left:7px;right:7px;top:50%;height:2px;border-radius:4px;background:#80eac580}.gap:hover{border-color:#7df1c4;background:#5be7b51c}.gap b{font:700 34px Georgia,serif;position:absolute;left:7px;bottom:-1px}.gap.chosen{border-color:#ffd86b;background:#ffd86b1b;color:#ffd86b;box-shadow:0 0 14px #ffd45b55}.gap.chosen:after{display:none}.fact{display:flex;align-items:center;gap:13px;padding:13px 16px;border-radius:16px;background:#ffffff08;border:1px solid var(--line)}.fact>span{font-size:24px;color:var(--gold)}.fact p{margin:0;color:#b9cfca;font-size:13px;line-height:1.5}.fact b{display:block;color:var(--gold);font-size:10px;letter-spacing:.12em;text-transform:uppercase}.check{display:block;margin:18px auto 0;min-width:190px}.feedback{margin-top:14px;padding:13px 16px;border-radius:16px;display:flex;flex-direction:column;gap:4px;font-size:13px;line-height:1.5}.feedback.bad{border:1px solid #ff6d8a77;background:#ff547118}.feedback.bad b{color:#ff8ba0}.feedback.good{border:1px solid #68edac77;background:#56e69b18}.feedback.good b{color:#75f0b4}.caterpillar{position:absolute;left:13px;bottom:20px;display:flex;align-items:end;filter:drop-shadow(0 6px 6px #000);animation:crawl .5s}.caterpillar i{display:grid;place-items:center;width:27px;height:27px;margin-left:-7px;border-radius:50%;background:linear-gradient(#b7f35b,#55a82b);color:#234912;font-style:normal}.caterpillar i:last-child{width:31px;height:31px;color:#102e16}.release{position:absolute;left:16px;top:23px;width:145px;height:125px;animation:release 1.7s ease-out both}.release img{width:100%;height:100%;object-fit:contain;animation:flutter .55s ease-in-out infinite}.helpCard{width:min(650px,95vw)}.helpCard h2{font-size:50px}.steps{display:grid;gap:10px;margin:21px 0}.steps p{display:flex;align-items:center;gap:14px;margin:0;padding:13px;border:1px solid var(--line);border-radius:15px;color:#c5d8d3}.steps b{flex:0 0 37px;height:37px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(145deg,#5beab6,#268e84);color:#08272b}.helpCard .primary{width:100%}.finalCard{text-align:center;width:min(650px,94vw);overflow:hidden}.finalCard h2{font-size:64px;color:var(--gold)}.finalCard p{color:#c0d4cf}.finalSwarm{height:180px;position:relative}.finalSwarm img{position:absolute;width:180px;height:150px;object-fit:contain;filter:drop-shadow(0 0 18px #ffffff44);animation:flutter .8s ease-in-out infinite}.finalSwarm .f0{left:7%;top:32px;transform:rotate(-15deg)}.finalSwarm .f1{left:36%;top:0}.finalSwarm .f2{right:5%;top:35px;transform:rotate(14deg)}
@keyframes sway{0%,100%{transform:translateX(-50%) rotate(-3deg)}50%{transform:translateX(-50%) rotate(4deg)}}@keyframes flutter{0%,100%{transform:perspective(500px) rotateY(0) scale(1)}50%{transform:perspective(500px) rotateY(52deg) scale(.88,1.04)}}@keyframes release{0%{transform:translateY(75px) scale(.12);opacity:0}35%{opacity:1}100%{transform:translate(75px,-65px) scale(1.15);opacity:1}}@keyframes crawl{from{transform:translateX(-30px);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes roam1{0%{left:-8%;top:70%;transform:rotate(-12deg)}25%{left:30%;top:20%;transform:rotate(12deg)}50%{left:62%;top:55%;transform:rotate(-8deg)}75%{left:87%;top:15%;transform:rotate(11deg)}100%{left:108%;top:60%;transform:rotate(-12deg)}}@keyframes roam2{0%{left:105%;top:30%;transform:rotate(170deg)}35%{left:66%;top:72%;transform:rotate(190deg)}70%{left:22%;top:25%;transform:rotate(165deg)}100%{left:-10%;top:58%;transform:rotate(180deg)}}@keyframes roam3{0%{left:5%;top:105%}25%{left:25%;top:38%}50%{left:52%;top:8%}75%{left:78%;top:54%}100%{left:95%;top:-12%}}@keyframes roam4{0%{left:80%;top:-10%}30%{left:58%;top:35%}65%{left:32%;top:72%}100%{left:10%;top:-12%}}@keyframes fade{from{opacity:0}to{opacity:1}}
@media(max-width:900px){header{height:auto;grid-template-columns:1fr 1fr}.progress{grid-column:1/-1;grid-row:2}.cocoonGrid{grid-template-columns:repeat(3,1fr)}.taskVisual{grid-template-columns:130px 1fr}.sentence{font-size:23px}.gardenHeading{display:block}}@media(max-width:580px){header{padding:11px 15px}.brand small{display:none}.brand strong{font-size:17px}.headerBtns>button:first-child{display:none}.garden{width:92vw}.gardenHeading h2{font-size:34px}.cocoonGrid{grid-template-columns:repeat(2,1fr);gap:10px}.pod{min-height:164px}.introCard{padding:40px 20px}.intro h1{font-size:47px}.intro p{font-size:15px}.taskCard{padding:24px 15px}.taskVisual{display:block}.modalPod{height:112px;margin:0 48px 13px}.modalPod>.cocoon{top:2px;transform:translateX(-50%) scale(.78)}.taskVisual h2{font-size:34px}.sentence{padding:18px 9px;font-size:20px;line-height:2.05}.gap{width:23px;margin:0}.fact{align-items:flex-start}.wildFly{width:65px;height:55px}footer span{max-width:190px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.modalPod{--glow:#ff76b5}

/* A large, readable emergence: unfold over the cocoon, then sweep across the card. */
.release{left:-8px;top:-2px;width:205px;height:180px;z-index:12;pointer-events:none;filter:drop-shadow(0 12px 22px #0009) drop-shadow(0 0 24px #7ef9ff88);animation:releaseFlight 1.8s cubic-bezier(.18,.8,.24,1) both}
.release img{animation:releaseFlutter .24s ease-in-out infinite;transform-origin:50% 58%}
.wildFly{filter:drop-shadow(0 10px 13px #0009) drop-shadow(0 0 13px #93ffdf55)}
.wildFly img,.pod.freed img{transform-origin:50% 58%;animation-name:releaseFlutter}
@keyframes releaseFlutter{0%,100%{transform:perspective(650px) rotateY(-8deg) scaleX(1) rotate(-2deg)}50%{transform:perspective(650px) rotateY(8deg) scaleX(.34) scaleY(1.07) rotate(2deg)}}
@keyframes releaseFlight{0%{transform:translate(0,82px) scale(.16) rotate(-16deg);opacity:0}14%{opacity:1}32%{transform:translate(4px,-7px) scale(1.08) rotate(8deg);opacity:1}58%{transform:translate(170px,-86px) scale(.92) rotate(-8deg);opacity:1}80%{transform:translate(355px,-40px) scale(.78) rotate(12deg);opacity:1}100%{transform:translate(590px,-175px) scale(.54) rotate(-5deg);opacity:0}}
@media(max-width:580px){.release{left:-20px;top:-25px;width:180px;height:155px}.release{animation-name:releaseFlightMobile}@keyframes releaseFlightMobile{0%{transform:translate(0,70px) scale(.16);opacity:0}25%{transform:translate(8px,0) scale(1.05) rotate(7deg);opacity:1}65%{transform:translate(145px,-50px) scale(.78) rotate(-7deg);opacity:1}100%{transform:translate(285px,-115px) scale(.5) rotate(10deg);opacity:0}}}
.world{background-image:linear-gradient(140deg,rgba(2,16,25,.65),rgba(2,39,35,.34)),url('assets/butterfly-garden.png')}

/* The wrong-answer character really peeks from behind the cocoon. */
.modalPod>.cocoon{z-index:3}
.caterpillar{left:72px;bottom:-4px;width:138px;height:138px;display:block;z-index:2;filter:drop-shadow(0 9px 11px #0009);transform-origin:30% 75%;animation:caterpillarPeek .55s cubic-bezier(.18,.9,.28,1.25) both}
.caterpillar img{display:block;width:100%;height:100%;object-fit:contain;animation:caterpillarGrumble .72s .48s ease-in-out 2}
.taskCard.bad .modalPod>.cocoon{animation:cocoonStartled .48s ease-in-out}
@keyframes caterpillarPeek{0%{transform:translateX(-58px) rotate(-11deg) scale(.72);opacity:0}65%{transform:translateX(8px) rotate(5deg) scale(1.04);opacity:1}100%{transform:translateX(0) rotate(0) scale(1);opacity:1}}
@keyframes caterpillarGrumble{0%,100%{transform:rotate(0) translateY(0)}30%{transform:rotate(-4deg) translateY(-3px)}65%{transform:rotate(3deg) translateY(1px)}}
@keyframes cocoonStartled{0%,100%{transform:translateX(-50%) rotate(0)}25%{transform:translateX(-50%) rotate(-8deg)}55%{transform:translateX(-50%) rotate(7deg)}80%{transform:translateX(-50%) rotate(-4deg)}}

/* Six different butterflies share the finale instead of three repeated sprites. */
.finalSwarm{height:230px}
.finalSwarm img{width:130px;height:110px}
.finalSwarm .f0{left:2%;top:80px}.finalSwarm .f1{left:19%;top:12px}.finalSwarm .f2{left:37%;top:92px}.finalSwarm .f3{right:31%;top:4px}.finalSwarm .f4{right:14%;top:95px}.finalSwarm .f5{right:-1%;top:26px}
@media(max-width:580px){.caterpillar{left:55%;bottom:-19px;width:112px;height:112px}.finalSwarm{height:175px}.finalSwarm img{width:88px;height:75px}.finalSwarm .f0{left:-2%;top:70px}.finalSwarm .f1{left:15%;top:8px}.finalSwarm .f2{left:32%;top:88px}.finalSwarm .f3{right:29%;top:3px}.finalSwarm .f4{right:12%;top:78px}.finalSwarm .f5{right:-3%;top:27px}}

.musicToggle{min-height:44px;border:1px solid #ffd86b66;border-radius:14px;padding:10px 14px;background:#ffd86b12;color:#ffe589;font-weight:800;white-space:nowrap;transition:.2s}
.musicToggle:hover{transform:translateY(-2px);background:#ffd86b20;border-color:#ffd86baa}
.musicToggle.on{background:linear-gradient(135deg,#ffe273,#ff9f43);border-color:transparent;color:#102d2d;box-shadow:0 0 22px #ffc45555}
.introControls{position:absolute;right:24px;top:24px;z-index:5;display:flex;align-items:center;gap:9px}
.introControls .sound{position:static}
@media(max-width:580px){.introControls{right:14px;top:14px}.musicToggle{padding:9px 11px;font-size:13px}.headerBtns{gap:6px}.headerBtns .musicToggle{font-size:0;width:44px;padding:0}.headerBtns .musicToggle:before{content:"♬";font-size:18px}.headerBtns .musicToggle.on:before{content:"♫"}}
@media(max-width:580px){.world{min-height:100dvh;background-attachment:scroll}.intro{min-height:100dvh;padding:16px}.introCard{width:100%;max-height:calc(100dvh - 32px);overflow:auto;border-radius:24px}header{position:relative}.taskCard,.helpCard,.finalCard{max-height:calc(100dvh - 20px);border-radius:22px}.sentence{overflow-wrap:anywhere}footer{padding:12px 15px;gap:8px}.headerBtns>button:first-child{display:block;font-size:0;width:44px;padding:0}.headerBtns>button:first-child:before{content:"←";font-size:20px}}