:root{font-family:ui-rounded,'Avenir Next',Avenir,system-ui,sans-serif;color:#143f48;background:#f4f5e9;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{cursor:pointer;min-height:48px;border:1px solid #c8ddd5;border-radius:16px;padding:12px 20px;color:#164954;background:#fffdf6;font-weight:650}button:hover{background:#e7f4e9}button:focus-visible,a:focus-visible,select:focus-visible{outline:4px solid #eaa746;outline-offset:4px}button:disabled{cursor:default;opacity:.5}header{max-width:1280px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:24px 40px;gap:15px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#174f57;font-size:10px;letter-spacing:2px;line-height:1.6}.brand b{font-size:12px}.brandmark{font-size:40px;font-weight:normal}.head-actions{display:flex;gap:10px}.head-actions button{background:transparent;font-size:14px}.head-actions b{background:#d7e8d8;padding:3px 8px;border-radius:50%;margin-left:6px}.defs{position:absolute;width:0;height:0}main{max-width:1200px;margin:auto;padding:10px 32px 40px}.hero{position:relative;overflow:hidden;border-radius:32px;background:#086b74;color:#fff9df;min-height:340px;padding:45px;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;isolation:isolate}.eyebrow{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;font-weight:750}.hero h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(38px,4.5vw,62px);line-height:1.05;margin:16px 0}.hero p{max-width:380px;line-height:1.6;color:#d3eeE4;font-size:16px}.pill{display:inline-block;font-size:12px;background:#ffffff18;padding:8px 13px;border-radius:30px}.scene{height:270px;position:relative}.scene .turtle{position:absolute;z-index:2;width:190px;left:25%;top:50px;transform:rotate(-13deg);filter:drop-shadow(0 15px 15px #003b4166);animation:float 6s ease-in-out infinite}.scene .fish{position:absolute;width:70px;right:2%;top:30px;transform:rotate(-10deg)}.scene .fish.second{width:45px;right:15%;top:0;opacity:.6}.ocean-ring{position:absolute;border:1px solid #ffffff1f;border-radius:50%;width:280px;height:280px;left:20%;top:-5px;box-shadow:0 0 0 45px #ffffff05,0 0 0 90px #ffffff03}.bubble{position:absolute;width:12px;height:12px;border:1px solid #a8e0d477;border-radius:50%;left:12%;top:50px}.bubble.b2{left:82%;top:120px;width:24px;height:24px}.coral{position:absolute;bottom:-60px;font-size:100px;left:3%;filter:saturate(.7)}.treasure{position:absolute;right:12%;bottom:5px;font-size:55px}.scene-path{position:absolute;bottom:15px;left:20%;display:flex;gap:15px;transform:rotate(-12deg)}.scene-path span{display:grid;place-items:center;background:#b8d9b7;color:#1a5c64;width:48px;height:48px;border-radius:50%;font-size:21px;font-weight:750}.section-heading{display:flex;justify-content:space-between;align-items:center;margin:30px 0 18px;gap:20px}.section-heading h2{font-size:23px;margin:0;font-weight:650}.section-heading p{font-size:13px;margin:0;color:#55716c}.missions{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.mission{display:flex;align-items:center;text-align:left;gap:16px;min-height:105px;border-color:#dce4d6;padding:20px;transition:transform .2s}.mission:hover{transform:translateY(-3px)}.mission .icon{min-width:52px;height:52px;background:#e7efdf;border-radius:16px;display:grid;place-items:center;font-size:26px;color:#36766c}.mission b{display:block;font-size:17px}.mission small{display:block;margin-top:7px;font-size:12px;font-weight:400;color:#61766d}.mission .arrow{margin-left:auto;font-size:22px;color:#628375}.extras{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.extras button{font-size:13px;background:transparent}.footnote{font-size:12px;color:#667e74;margin:24px 0;text-align:center}.game-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.game-top .small{text-align:right}.game-panel{background:#fffdf5;border:1px solid #d9e4d5;border-radius:28px;overflow:hidden}.journey{height:155px;background:linear-gradient(110deg,#0b6c75,#228a87);position:relative;display:flex;justify-content:center;align-items:flex-end;padding-bottom:20px;gap:25px;color:#eaffdf}.journey .turtle{width:85px;position:absolute;left:calc(10% + var(--progress)*65%);top:12px;transition:left .6s}.journey:before{content:'';position:absolute;left:12%;right:12%;bottom:46px;border-top:2px dashed #a3d3b378}.step{z-index:1;border:2px solid #b4d8b8;border-radius:50%;width:45px;height:45px;display:grid;place-items:center;background:#08616b;font-weight:700}.step.done{background:#d9eeb8;color:#23534e}.journey .chest{position:absolute;right:7%;top:25px;width:60px;height:50px}.question{padding:28px 28px 24px;text-align:center}.question h1{font-size:clamp(23px,3vw,32px);margin:0 0 8px;font-weight:650}.instruction{color:#637a73;margin:8px 0 22px;font-size:14px}.display{display:flex;justify-content:center;gap:12px;margin:20px 0;flex-wrap:wrap}.tile{display:grid;place-items:center;width:76px;min-height:78px;font-size:34px;font-weight:700;border-radius:20px;background:#eaf0e2;color:#265d5d}.tile.blank{border:2px dashed #65a399;background:#f6f8ef;color:#477f77}.tile.filled{background:#d9e9bc;border:2px solid #81ad6c}.options{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin:20px 0}.options button{min-width:100px;min-height:85px;border:2px solid #e7b567;background:#fff2ce;box-shadow:0 5px 0 #dfb575;font-size:34px;border-radius:22px}.options button:active{transform:translateY(3px);box-shadow:0 2px 0 #dfb575}.options button.used{opacity:.3;box-shadow:none}.feedback{min-height:52px;display:grid;place-items:center;margin:12px auto;color:#23665a;font-size:17px;max-width:650px}.tools{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.tools button{font-size:14px}.primary{background:#176e67!important;color:#fffbe8;border-color:#176e67;min-width:160px}.hint{background:#eff4e5;border-radius:20px;margin:20px 0 0;padding:17px}.numberline{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin:12px auto}.numberline button{padding:9px;min-width:46px;min-height:48px;border-radius:12px;font-size:19px}.numberline .target{background:#d7e8b5;border:2px solid #548a69}.small{font-size:13px;line-height:1.5;color:#60746b}.pearls{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;max-width:220px;margin:8px auto}.pearl{width:15px;height:15px;border-radius:50%;background:#68b3aa;border:2px solid #458a84}.quantity{background:#edf4e9;border-radius:15px;padding:12px}.quantity b{font-size:25px}.equation{display:flex;align-items:center;justify-content:center;gap:15px;font-size:28px}.word{font:400 40px Georgia,serif;letter-spacing:3px;color:#477267}.complete{padding:50px 24px;text-align:center}.complete .big{font-size:70px}.complete h1{font:400 38px Georgia,serif}.complete p{line-height:1.6}.complete .tools{margin-top:24px}dialog{border:0;border-radius:28px;max-width:550px;width:calc(100% - 32px);max-height:90dvh;padding:28px;background:#fffdf5;color:#164954;box-shadow:0 30px 100px #003d4d44}dialog::backdrop{background:#073e4d88;backdrop-filter:blur(4px)}.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.dialog-top h2{font:400 32px Georgia,serif;margin:4px 0 20px}.dialog-top button{padding:5px 15px}.dialog-top+ p{line-height:1.5}label{display:block;margin:16px 0;font-weight:650;font-size:15px}select{display:block;width:100%;background:white;color:#164954;border:1px solid #c1d7c6;border-radius:12px;padding:13px;margin-top:8px;min-height:48px}.check{display:flex;gap:12px;align-items:center;min-height:44px}.check input{width:23px;height:23px;accent-color:#176e67}.text-button{background:none;border:0;text-decoration:underline;font-size:13px}#collectionItems{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:20px 0}.collectible{padding:18px;border-radius:16px;background:#e6f0df;text-align:center}.collectible span{font-size:40px;display:block}.collectible.locked{opacity:.55}#resetConfirm{padding:15px;background:#fff0db;border-radius:14px}.reduce *{animation:none!important;transition:none!important}@keyframes float{50%{transform:translateY(-9px) rotate(-9deg)}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}@media(max-width:800px){header{padding:20px 24px}main{padding:6px 24px 28px}.hero{padding:30px;min-height:320px;grid-template-columns:1.2fr 1fr}.scene .turtle{width:155px;left:15%}.scene-path{left:6%;gap:8px}.missions{grid-template-columns:repeat(2,1fr)}.mission{padding:16px}.scene .coral{font-size:70px}.hero h1{font-size:43px}.section-heading{align-items:flex-start;flex-direction:column;gap:8px}}@media(max-width:520px){header{padding:15px}.head-actions button{padding:9px 12px}.head-actions span{display:none}main{padding:4px 14px 25px}.hero{display:block;padding:28px;min-height:430px}.hero h1{font-size:42px}.hero p{max-width:280px;font-size:14px}.scene{height:135px}.scene .turtle{width:130px;top:-10px;left:35%}.scene .fish{top:-10px;width:42px}.scene .fish.second{display:none}.ocean-ring{height:180px;width:180px;top:-45px;left:30%}.scene-path{bottom:-12px;left:5%}.scene-path span{width:36px;height:36px;font-size:16px}.treasure{font-size:40px;right:5%;bottom:-10px}.coral{font-size:60px;bottom:-45px;left:-10%}.missions{gap:10px}.mission{display:block;padding:16px;min-height:153px}.mission .icon{width:44px;min-width:44px;height:42px;font-size:22px;margin-bottom:12px}.mission b{font-size:15px}.mission small{font-size:11px}.mission .arrow{display:none}.question{padding:24px 14px}.tile{width:52px;min-height:65px;font-size:27px}.display{gap:7px}.options{gap:12px}.options button{min-width:78px;font-size:30px;min-height:78px}.journey{gap:14px;height:145px}.step{width:38px;height:38px}.game-top button{padding:10px 14px}.game-top .small{font-size:11px}.question h1{font-size:24px}.numberline{gap:5px}.numberline button{min-width:40px;padding:7px}.extras button{flex:1}.complete h1{font-size:30px}}
@media(min-width:700px) and (max-height:850px){header{padding-top:16px;padding-bottom:16px}.journey{height:125px}.journey .turtle{top:0;width:75px}.question{padding-top:22px;padding-bottom:20px}.question .display{margin:16px 0}.question .options{margin:16px 0}.feedback{min-height:42px;margin:8px auto}.game-top{margin-bottom:14px}}
