@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@500;600;700;800;900&display=swap');
:root{--ink:#153c47;--teal:#12766d;--yellow:#ffce4f;--paper:#fffaf0;--line:#dce8df}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:700 19px/1.55 Nunito,sans-serif}button,input,a{touch-action:manipulation}button{font:600 19px/1.25 Fredoka,sans-serif;cursor:pointer;border:2px solid var(--line);border-radius:20px;padding:13px 21px;color:var(--ink);background:white;min-height:50px;transition:transform .15s}button:hover{transform:translateY(-2px);border-color:var(--teal)}button:active{transform:translateY(2px)}button:disabled{cursor:default;opacity:.75;transform:none}button:focus-visible,input:focus-visible,summary:focus-visible{outline:4px solid #ee8c22;outline-offset:4px}header{display:flex;align-items:center;justify-content:space-between;max-width:1160px;margin:auto;padding:18px 26px;gap:12px}.brand{border:0;background:none;display:flex;gap:10px;align-items:center;text-align:left;padding:0}.brand>span:first-child{font-size:44px;color:var(--teal)}.brand>span:last-child{font-size:26px;line-height:1}.brand small{display:block;font:900 10px Nunito;letter-spacing:2.5px;margin-top:8px}.header-right{display:flex;align-items:center;gap:9px}#stars{border-radius:30px;background:#ffe4a2;padding:8px 16px;white-space:nowrap}.icon-button{padding:9px;min-width:46px;min-height:46px;border-radius:50%}.parent-button{font-size:14px;padding:10px 12px}nav{display:flex;justify-content:center;gap:10px;border-top:1px solid #e9e4d6;border-bottom:1px solid #e9e4d6;padding:9px 12px;background:#fffdf7}nav button{font-size:18px;background:none;border:0;padding:11px 20px}nav button.active{background:var(--teal);color:white;box-shadow:0 3px 0 #09564e}main{max-width:1100px;margin:28px auto;padding:0 24px;min-height:70vh}h1,h2,h3{font-family:Fredoka,sans-serif;font-weight:600;line-height:1.15}h1{font-size:clamp(32px,4.2vw,48px);margin:10px 0 20px}h2{font-size:30px;margin:12px 0}h3{font-size:23px;margin:10px 0}p{margin:12px 0}.primary{background:var(--teal);color:white;border-color:var(--teal);box-shadow:0 5px 0 #095b53}.gold{background:var(--yellow);border-color:#edb834;box-shadow:0 5px 0 #dfa934}.small{font-size:16px;min-height:44px;padding:10px 15px}.muted{font-size:16px;color:#5a7278}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.spread{justify-content:space-between}.eyebrow{font:900 12px Nunito;letter-spacing:2px;text-transform:uppercase}.badge{background:#e1f3e7;border-radius:25px;padding:6px 14px;font-size:14px}.welcome{border-radius:32px;background:#ccede5;display:grid;grid-template-columns:1fr 1.15fr;overflow:hidden;box-shadow:0 8px 0 #d7e5d7;margin-bottom:30px;min-height:350px}.welcome-copy{padding:32px;align-self:center}.welcome h1{font-size:clamp(34px,4.3vw,51px)}.welcome p{max-width:330px}.welcome-image{width:100%;height:100%;min-height:350px;object-fit:cover}.welcome .row{margin-top:22px}.map-title{display:flex;align-items:center;justify-content:space-between;margin:26px 0 18px}.journey-map{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.island{padding:10px 10px 16px;position:relative;background:white;box-shadow:0 6px 0 #e0e7d8;border-radius:24px;text-align:left;overflow:hidden}.island .tile{width:100%;aspect-ratio:1.55;border-radius:16px;margin-bottom:11px}.island .label{display:block;font-size:20px;padding:0 8px}.island small{display:block;padding:4px 8px;font:800 13px Nunito;color:#667c7d}.island-num{position:absolute;top:18px;left:18px;background:white;width:31px;height:31px;border-radius:50%;display:grid;place-items:center;font-size:16px;box-shadow:0 2px 5px #0001}.island.done{border-color:#63ad79}.quiz-island{background:#ffe6a1;display:flex;align-items:center;flex-direction:column;justify-content:center;text-align:center}.trophy{font-size:70px}.tile{background-image:url('images/sound-tiles.png');background-size:400% 200%;background-repeat:no-repeat;aspect-ratio:1;border-radius:24px}.t0{background-position:0% 0%}.t1{background-position:33.3333% 0%}.t2{background-position:66.6667% 0%}.t3{background-position:100% 0%}.t4{background-position:0% 100%}.t5{background-position:33.3333% 100%}.t6{background-position:66.6667% 100%}.t7{background-position:100% 100%}.guide{display:flex;align-items:center;gap:16px;background:white;border:2px solid var(--line);border-radius:23px;padding:13px 18px;margin:20px 0}.guide .tile{flex:0 0 64px;border-radius:50%}.guide p{margin:0;font-size:20px;line-height:1.4;flex:1}.guide .listen{flex-shrink:0}.listen{font-size:15px;min-height:43px;padding:10px 15px;border-color:#b8ded7;background:#f3fcf7}.panel{background:white;border:2px solid var(--line);border-radius:30px;padding:28px;margin:20px 0}.narrow{max-width:790px;margin:0 auto}.lesson-top{display:flex;justify-content:space-between;align-items:center;gap:10px}.lesson-steps{display:flex;gap:8px;margin:18px 0}.lesson-steps span{flex:1;padding:9px;border-radius:14px;background:#e8ede5;font-size:16px;text-align:center}.lesson-steps .on{background:#ffdf83}.lesson-stage{min-height:380px}.lesson-picture{max-width:240px;margin:12px auto}.big-sentence{font-family:Fredoka;font-size:29px;font-weight:500;line-height:1.35;text-align:center;max-width:600px;margin:20px auto}.word-pills{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:20px auto}.word-pills span{background:#fff0bc;border-radius:16px;padding:8px 16px}.lesson-actions{display:flex;justify-content:space-between;gap:12px;margin-top:20px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.game-card{padding:22px;background:white;border:2px solid var(--line);border-radius:25px;box-shadow:0 5px 0 #e0e7d8}.game-card .tile{max-width:130px;margin:auto}.game-card h2{font-size:25px}.game-card button{width:100%;margin-top:8px}.game-card p{font-size:16px}.lab-menu{display:flex;gap:9px;flex-wrap:wrap;margin:15px 0}.lab-menu button{font-size:16px}.lab-menu .active{background:#ffe28c;border-color:#eabc43}.play-zone{background:#eaf7f5;border-radius:24px;padding:25px;min-height:240px;text-align:center;margin:18px 0;overflow:hidden}.choice-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}.choice-row button{min-width:140px}.model-note{font-size:13px;color:#597279;text-align:center}.ruler-model{position:relative;width:90%;height:110px;margin:35px auto 16px;border-bottom:9px solid #b27c55;border-radius:0 0 10px 10px;background:linear-gradient(90deg,#e4c39b 0 40%,transparent 40%)}.ruler-bar{position:absolute;left:24%;top:35px;width:62%;height:44px;background:repeating-linear-gradient(90deg,transparent 0 17px,#b6812c 17px 19px),#ffd260;border:3px solid #e2a934;border-radius:8px;transform-origin:25% center;box-shadow:0 5px 0 #e6ad43;color:#573c22;font:bold 16px Nunito}.ruler-bar.wiggle{animation:rulerWiggle var(--ruler-speed,.09s) alternate 10}@keyframes rulerWiggle{to{transform:rotate(5deg)}}.xylo{display:flex;gap:12px;align-items:center;justify-content:center;height:235px;padding:8px}.xylo button{width:66px;min-width:0;padding:0;box-shadow:0 7px 0 #0002;border:2px solid #ffffff80;font-size:18px}.xylo button:nth-child(1){height:210px;background:#ef8f95}.xylo button:nth-child(2){height:178px;background:#ffc96b}.xylo button:nth-child(3){height:147px;background:#83ceb3}.xylo button:nth-child(4){height:116px;background:#87c8e9}.xylo button:nth-child(5){height:85px;background:#bda6df}.xylo button.hit{filter:brightness(1.13);transform:translateY(6px)}.hearing-cards{display:grid;grid-template-columns:1fr 1fr;gap:15px;max-width:490px;margin:15px auto}.picture-choice{padding:10px 10px 14px;background:white;border-radius:25px;font-size:23px}.picture-choice .tile{width:100%;margin-bottom:10px}.sand-dish{height:145px;max-width:420px;margin:20px auto 35px;border-bottom:18px solid #9fc5d6;border-radius:50%;position:relative;background:#daeaf0;box-shadow:inset 0 -10px 0 #bad6df}.grain{position:absolute;width:9px;height:9px;background:#c69439;border-radius:50%;bottom:24px;left:var(--x)}.sand-dish.moving .grain{animation:sandBounce var(--speed,.22s) ease-out alternate 9;animation-delay:var(--delay)}@keyframes sandBounce{to{transform:translateY(calc(-1 * var(--jump,20px)))}}.echo-stage{position:relative;background:#263c63;border-radius:25px;height:210px;overflow:hidden;margin:15px 0}.echo-stage .tile{position:absolute;width:100px;left:12px;top:65px;border-radius:50%}.echo-target{position:absolute;right:22px;top:72px;font-size:60px;line-height:1}.echo-dot{position:absolute;left:95px;top:96px;width:20px;height:20px;border:4px solid #ffdf67;border-radius:50%;opacity:0}.echo-stage.sending .echo-dot{animation:echoTravel 1.5s ease-in-out forwards}@keyframes echoTravel{0%{left:95px;opacity:1}50%{left:calc(100% - 85px);opacity:1}100%{left:95px;opacity:0}}.wave{display:flex;gap:7px;justify-content:center;align-items:center;height:75px}.wave i{display:block;background:#199b91;width:10px;height:14px;border-radius:8px}.wave.active i{animation:wave .18s alternate 7}.wave.active i:nth-child(2n){animation-delay:.1s}@keyframes wave{to{height:var(--wave-height,65px)}}label{display:block;text-align:left;margin-top:16px}input[type=range]{width:100%;accent-color:var(--teal);height:44px}.scale{display:flex;justify-content:space-between;font-size:15px}.options{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0}.answer-choice{display:flex;flex-direction:column;gap:7px}.option{width:100%;flex:1;min-height:88px;font-size:23px}.answer-choice .listen{align-self:center}.option.good{background:#ddf5df;border-color:#48a666}.option.retry{background:#fff0d7;border-color:#dba34b}.question-text{font-size:clamp(25px,4vw,33px);font-family:Fredoka;font-weight:500;line-height:1.35}.question-art{max-width:180px;margin:15px auto}.question-icon{text-align:center;font-size:68px}.feedback{padding:19px;border-radius:20px;background:#e3f5e6;margin:18px 0}.feedback.try{background:#fff1cf}.feedback p{margin:8px 0}.progress{height:12px;background:#e5ede4;border-radius:20px;overflow:hidden;margin:15px 0}.progress span{display:block;background:#eebe38;height:100%;transition:width .3s}.score{font-family:Fredoka;font-size:70px;font-weight:600;color:var(--teal)}.result-hero{text-align:center;background:#e1f3e6;border-radius:30px;padding:30px}.result-hero .tile{max-width:170px;margin:auto}.review-item{padding:20px 0;border-bottom:1px solid var(--line)}.review-item h3{font-size:22px}details{padding:20px;background:white;border:2px solid var(--line);border-radius:20px;margin:15px 0}summary{cursor:pointer;font-family:Fredoka;font-size:21px}table{width:100%;border-collapse:collapse;font-size:16px}td,th{padding:12px;text-align:left;border-bottom:1px solid var(--line)}.break-card{background:#ffe9bd;border:2px dashed #e5b54e;border-radius:22px;padding:20px;margin:25px 0;text-align:center}.hidden{display:none!important}footer{max-width:1100px;margin:auto;display:flex;justify-content:space-between;padding:32px 24px;color:#607a79;font-size:14px}#toast{display:none;position:fixed;z-index:100;bottom:22px;left:50%;transform:translateX(-50%);padding:15px 23px;max-width:90vw;background:#163e45;color:white;border-radius:20px;font-size:17px}#celebration{position:fixed;inset:0;pointer-events:none;z-index:90;overflow:hidden}#celebration span{position:absolute;top:35%;font-size:28px;animation:confetti 1.3s ease-out forwards;left:var(--left)}@keyframes confetti{from{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(350px) rotate(230deg);opacity:0}}.voice-playing{box-shadow:0 0 0 5px #ffc94c55}.parent-note{font-size:16px}.directions{font-size:20px;text-align:center}.mini-status{min-height:32px;margin:15px 0;font-size:18px;text-align:center}.lesson-select{display:flex;gap:8px;overflow-x:auto;padding:6px}.lesson-select button{white-space:nowrap;font-size:14px;min-height:42px;padding:9px 12px}.lesson-select .active{background:#ffdf83}.short-action{display:flex;justify-content:center;gap:12px;margin:16px 0}.match-tile{max-width:190px;margin:10px auto}.reward-badges{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:18px 0}.reward-badges span{padding:10px 18px;background:#fff3c4;border-radius:30px;font-size:17px}
@media(max-width:720px){header{padding:13px 15px;gap:5px}.brand>span:last-child{font-size:22px}.brand small{font-size:8px;letter-spacing:1.5px}.brand>span:first-child{font-size:34px}.header-right{gap:5px}#stars{padding:7px 10px;font-size:15px}.parent-button{font-size:12px;padding:9px 7px;min-height:43px}.icon-button{min-width:40px;min-height:40px;font-size:17px;padding:7px}nav{gap:2px;padding:7px 4px;justify-content:space-around}nav button{font-size:14px;padding:10px 7px;min-height:43px}main{padding:0 15px;margin:19px auto}.welcome{grid-template-columns:1fr;min-height:0}.welcome-image{grid-row:1;height:220px;min-height:0;object-position:50% 48%}.welcome-copy{padding:23px}.welcome h1{font-size:36px;margin-bottom:10px}.welcome p{margin:6px 0}.welcome .row{margin-top:16px}.journey-map{grid-template-columns:1fr 1fr;gap:13px}.island{border-radius:21px}.island .tile{aspect-ratio:1.25}.island .label{font-size:18px}.island small{font-size:12px}.island-num{top:15px;left:15px;width:26px;height:26px}.map-title{align-items:flex-start;gap:12px}.map-title h2{font-size:27px}.map-title .badge{font-size:12px}.panel{padding:20px;border-radius:25px}.guide{padding:12px;gap:10px;flex-wrap:wrap}.guide .tile{flex-basis:48px}.guide p{font-size:17px;min-width:170px}.guide .listen{margin-left:auto}.lesson-picture{max-width:210px}.big-sentence{font-size:25px}.lesson-stage{min-height:0}.lesson-steps span{font-size:14px;padding:8px 4px}.lesson-actions button{font-size:17px;padding:12px 15px}.grid{grid-template-columns:1fr 1fr;gap:13px}.game-card{padding:15px}.game-card h2{font-size:21px}.game-card p{font-size:14px}.game-card button{font-size:17px;padding:11px}.play-zone{padding:17px 12px}.xylo{gap:8px;height:220px}.xylo button{width:48px;font-size:16px}.options{gap:12px}.option{font-size:20px;padding:12px}.choice-row{gap:9px}.choice-row button{min-width:105px;padding:12px;font-size:17px}.lab-menu{gap:7px}.lab-menu button{font-size:14px;padding:10px 12px}.hearing-cards{gap:12px}.picture-choice{font-size:19px}.question-art{max-width:165px}.question-text{font-size:27px}.echo-stage .tile{width:75px;left:8px;top:75px}.echo-target{font-size:48px;right:10px;top:85px}.echo-dot{left:70px}.parent-note{font-size:15px}footer{font-size:12px;padding:25px 16px}.short-action{flex-wrap:wrap}.small{font-size:15px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}@media print{header,nav,footer,button{display:none}main{max-width:100%}.panel,details{break-inside:avoid}}

.source-ref{font:800 13px/1.5 Nunito;color:#4b7076;margin:10px 0}.reading-text{background:#fff3ce;border-radius:18px;padding:18px;font-size:18px;line-height:1.7;margin:16px 0}.reading-text .listen{display:block;margin-top:12px}.worksheet-diagram{display:flex;justify-content:center;align-items:flex-end;gap:35px;margin:25px 0}.worksheet-diagram>div{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:10px;border:2px solid #dce8df;border-radius:20px;padding:18px;min-width:100px;min-height:190px}.straw{display:inline-block;width:13px;height:100px;background:#d7e5ae;border:2px solid #788959;border-radius:6px}.straw.short{height:65px}.straw.long{height:130px}.straw-bundle{display:flex;gap:6px;align-items:flex-end}.straw-bundle .straw:nth-child(2){height:125px}.straw-bundle .straw:nth-child(3){height:112px}.bar-diagram{background:#edf6ef;padding:22px;border-radius:20px;margin:20px 0}.bar-diagram>div{display:flex;align-items:center;gap:20px;margin:18px}.bar-diagram i{display:block;height:18px;background:#566c73;border-radius:4px}.response-box{background:#eef6f2;padding:18px;border-radius:20px;margin:18px 0}.response-box textarea{width:100%;resize:vertical;font:20px Nunito;border:2px solid #bfd8cc;border-radius:14px;padding:14px;margin-top:10px}.picture-tabs{margin-top:20px}.circle-photo{position:relative;width:min(100%,330px);margin:20px auto;cursor:crosshair;line-height:0}.circle-photo img{width:100%;display:block;border-radius:18px}.photo-circle{position:absolute;left:50%;top:50%;border:5px solid #2991ed;width:75px;height:60px;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}.photo-circle.model{border-color:#179858;width:85px;height:65px}a{color:#146d69}

.original-matching{width:100%;height:auto;border-radius:16px;margin:12px 0}

.worksheet-link{display:inline-block;margin-top:20px;background:#fff6cf;border:2px solid #e4c256;border-radius:17px;padding:12px 18px;color:#173f48;text-decoration:none;font:600 19px Fredoka;box-shadow:0 4px 0 #c2dace}.worksheet-link:hover{background:#ffdf83}

/* One garden, one menu: large touch targets on every page. */
.site-nav{display:flex;justify-content:center;gap:6px;padding:9px 12px;background:#fffdf7;border-top:1px solid #e9e4d6;border-bottom:1px solid #e9e4d6}
.site-nav a,.site-nav button{display:flex;align-items:center;justify-content:center;text-decoration:none;font:600 17px/1.25 Fredoka,sans-serif;min-height:48px;padding:11px 16px;border:0;border-radius:18px;background:transparent;color:#153c47;white-space:nowrap;touch-action:manipulation}
.site-nav .active{background:#12766d;color:white;box-shadow:0 3px 0 #09564e}
.site-nav a:focus-visible,.journey-step:focus-visible{outline:4px solid #ee8c22;outline-offset:3px}
@media(max-width:720px){.site-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}.site-nav a,.site-nav button{font-size:15px;padding:10px 4px;min-width:0}}
@media print{.site-nav{display:none}}

.learning-path{margin:30px 0;padding:24px;border:2px solid #dbebe2;background:#fff;border-radius:26px}.learning-path h2{font-size:27px}.journey-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}.journey-step{display:flex;flex-direction:column;gap:6px;text-decoration:none;padding:17px 12px;border-radius:18px;background:#e9f5ed;color:#153c47;font:600 21px Fredoka;text-align:center;min-height:100px;justify-content:center}.journey-step:last-child{background:#ffedaf}.journey-step small{font:700 13px Nunito}.paper-next{margin:24px 0;padding:22px;background:#fff3cd;border-radius:24px;text-align:center}.paper-next h2{font-size:26px}.paper-next p{font-size:17px}.paper-next .worksheet-link{margin:8px 0}.learning-path .muted{margin-bottom:0}@media(max-width:600px){.journey-steps{grid-template-columns:1fr 1fr}.learning-path{padding:18px}}
