:root{--ink:#204e45;--muted:#537e73;--cream:#fffcdf;--yellow:#ffcd55;--green:#24765e;--outline:#1c5a47}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;width:100%}body{font-family:"PingFang SC","Microsoft YaHei","WenQuanYi Zen Hei",sans-serif;color:var(--ink);background:#a6dfd7;overflow-x:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button{border:0}button:focus-visible,a:focus-visible{outline:3px solid #d65e34;outline-offset:5px}button:disabled{cursor:default}a{color:inherit;text-decoration:none}.hidden{display:none!important}#ocean{position:fixed;inset:0;width:100%;height:100%;z-index:0;touch-action:none}.grain{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.065;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.7' filter='url(%23n)'/%3E%3C/svg%3E")}.home{position:relative;z-index:2;max-width:1240px;padding:0 50px;margin:auto;min-height:100svh;display:flex;flex-direction:column}.header{display:flex;align-items:center;justify-content:space-between;height:116px;flex-shrink:0}.brand{display:flex;align-items:center;gap:11px;font-weight:900;letter-spacing:1px;font-size:17px}.brand small{display:block;font-size:9px;letter-spacing:2px;margin-top:5px;opacity:.65}.brand-face{width:44px;height:46px;border-radius:50%;background:#fdf3b7;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 0 #79bb9b}.brand-face img{height:37px}.header nav{display:flex;align-items:center;gap:25px}.header nav button{background:none;font-size:13px;font-weight:600;display:flex;align-items:center;gap:7px;white-space:nowrap}.header nav button span{font-size:17px}.header nav button:hover{color:#ba6c26}.sound-button{width:38px;height:38px;display:grid!important;place-items:center;border-radius:50%;background:#eff9df90!important;border:1px solid #619f8650!important;flex-shrink:0}.sound-button svg{width:19px;height:19px}#dexDot{width:6px;height:6px;border-radius:50%;background:#e99a30;display:none}.hero{display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:20px;min-height:555px;flex:1;padding:8px 0 35px}.eyebrow{display:flex;align-items:center;gap:10px;letter-spacing:2px;font-size:12px;font-weight:700}.eyebrow>span{width:7px;height:7px;border-radius:50%;background:#3c9671;box-shadow:0 0 0 4px #52957614}.eyebrow b{letter-spacing:1px;font-size:9px;background:#edfae186;padding:5px 8px;border-radius:5px;margin-left:8px}h1{font-family:KuaiLe,sans-serif;font-size:84px;font-weight:400;line-height:1.18;letter-spacing:3px;margin:23px 0 17px;transform:rotate(-2deg);transform-origin:left center;color:#265b47}h1>span{display:block;color:#f8ba39;text-shadow:2px 3px 0 #fff6c0,-1px -1px 0 #796b22,1px -1px 0 #796b22,-1px 1px 0 #796b22,1px 1px 0 #796b22}.title-fish{position:relative}.title-fish svg{position:absolute;left:4px;bottom:-13px;width:100%;height:14px;fill:none;stroke:#6a9b6b;stroke-width:3;stroke-linecap:round}.slogan{font-family:KuaiLe,sans-serif;font-size:24px;margin:22px 0 11px}.intro{font-size:14px;line-height:1.9;color:var(--muted);margin:0}.difficulty{display:flex;gap:9px;margin-top:28px}.difficulty button{border:1px solid #528f7040;padding:8px 14px;border-radius:8px;background:#f1fce330;font-size:12px}.difficulty button.selected{background:#e4f4d4;box-shadow:inset 0 0 0 1px #5c927955;font-weight:700}.primary{background:var(--yellow);border:2px solid #72552a;border-radius:14px;box-shadow:0 5px 0 #ac7e34;color:#4c431e;transition:transform .15s,box-shadow .15s;font-weight:800;font-size:17px;padding:15px 25px}.primary:hover{transform:translateY(-2px);background:#ffda70;box-shadow:0 7px 0 #ac7e34}.primary:active{transform:translateY(3px);box-shadow:0 2px 0 #ac7e34}.start-button{margin-top:19px;width:260px;display:flex;justify-content:space-between;align-items:center;padding:17px 25px;font-family:KuaiLe;font-size:24px;letter-spacing:3px}.button-arrow{width:29px;height:29px;line-height:29px;border-radius:50%;background:#7d662f1c;letter-spacing:0;text-align:center;font-size:21px}.input-hint{display:flex;align-items:center;gap:8px;margin-top:20px;font-size:10px;color:#538270}.input-hint i{width:3px;height:3px;border-radius:50%;background:currentColor}.mouse-icon{font-size:18px}.mobile-hint{display:none}.hero-art{height:530px;position:relative}.orbit{position:absolute;border:1px solid #c8f7d897;border-radius:50%;width:430px;height:430px;top:44px;left:50%;transform:translateX(-50%)}.orbit-two{width:480px;height:480px;top:20px;border-style:dashed;opacity:.45}.baby-diver{position:absolute;width:280px;height:410px;left:50%;top:89px;transform:translateX(-50%) rotate(9deg);animation:bob 5s ease-in-out infinite;filter:drop-shadow(8px 17px 10px #49867535)}.hero-baby{position:absolute;width:100%;height:100%;object-fit:contain}.diving-goggles{position:absolute;inset:0;width:100%;height:100%}.speech{position:absolute;top:56px;left:28%;background:#fffde5;border:1px solid #85aa7d;border-radius:15px;transform:rotate(-7deg);padding:12px 20px;font-family:KuaiLe;font-size:17px;z-index:2;box-shadow:2px 3px 0 #619e711a;white-space:nowrap}.speech svg{position:absolute;width:35px;height:18px;bottom:-15px;right:28px;fill:#fffde5}.hero-fish{position:absolute}.hero-fish img{width:100%;height:100%;object-fit:contain;transform:rotate(62deg);filter:drop-shadow(4px 5px 3px #3c776530)}.fish-one{width:105px;height:140px;right:6%;top:235px;animation:fishBob 4s infinite}.fish-one span{display:block;position:absolute;bottom:-18px;left:-24px;white-space:nowrap;font-size:10px;background:#faffecbc;padding:5px 9px;border:1px solid #85b28f;border-radius:20px}.fish-two{width:75px;height:99px;left:0;top:200px;filter:hue-rotate(85deg);transform:scaleX(-1);animation:fishBob 5s infinite 1s}.fish-three{width:60px;height:85px;right:15%;top:82px;filter:hue-rotate(300deg);animation:fishBob 4s infinite .5s}.art-spark{position:absolute;color:#fffaaf;font-size:38px;text-shadow:1px 1px 0 #82af7a}.spark-one{left:12%;top:86px}.spark-two{right:3%;top:177px;font-size:43px}.spark-three{left:15%;bottom:63px;font-size:22px}.hero-badge{position:absolute;left:37%;bottom:11px;display:flex;gap:10px;align-items:center;background:#f2ffdfad;backdrop-filter:blur(6px);border:1px solid #a5cba0;padding:12px 18px;border-radius:13px;transform:rotate(-4deg);font-size:13px;font-weight:700;white-space:nowrap}.hero-badge>span{background:#f8ce63;border-radius:50%;width:32px;height:32px;display:grid;place-items:center;font-size:22px;color:#8d6b1c}.hero-badge small{display:block;margin-top:4px;font-size:10px;font-weight:400;color:#668b72}.voyage{border-top:1px solid #599c7150;border-bottom:1px solid #599c7150;padding:22px 0;display:flex;align-items:center;gap:13px;margin-bottom:14px}.voyage-label{width:180px;flex-shrink:0;font-size:13px;font-weight:700}.voyage-label small{display:block;font-size:10px;font-weight:400;margin-top:6px;color:var(--muted)}.sea-step{flex:1;display:flex;gap:10px;align-items:center;min-width:0;padding:12px 13px;background:#ebfadd35;border:1px solid #519c6a30;border-radius:12px}.sea-step.active{background:#eefbdabb;border-color:#699d6550}.step-icon{font-size:24px;display:grid;place-items:center;width:33px;color:#7a9270;flex-shrink:0}.active .step-icon{color:#b58c28}.sea-step b{font-size:11px;white-space:nowrap}.sea-step small{display:block;font-size:9px;color:var(--muted);margin-top:5px;white-space:nowrap}.step-status{font-size:9px;padding:4px 6px;background:#dbeabd;border-radius:5px;margin-left:auto}.step-lock{font-size:18px;margin-left:auto;opacity:.45}.route-dots{letter-spacing:3px;color:#68a47a;font-size:18px}.home-footer{font-size:10px;color:#52836c;display:flex;justify-content:space-between;align-items:center;padding:8px 0 25px;gap:15px}.home-footer>span:last-child{letter-spacing:2px;font-size:8px}.home-footer b{color:#315f47;margin:0 4px}.home-footer i{font-style:normal;margin:0 8px;opacity:.4}
.play{position:fixed;inset:0;z-index:3;pointer-events:none;padding:max(18px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));touch-action:none}.play button,.joystick{pointer-events:auto}.play-header{display:flex;align-items:center;gap:18px;max-width:1100px;margin:0 auto;background:#fcffeadc;border:1px solid #81b9a0;border-radius:19px;padding:13px 18px;box-shadow:0 5px 0 #38756114;backdrop-filter:blur(12px)}.sea-chip{display:flex;gap:11px;align-items:center;margin-right:auto}.sea-chip>span{font-size:26px;color:#b38924}.play-header small{display:block;font-size:10px;color:#658776;margin-bottom:4px}.sea-chip b{font-size:16px}.score-chip{min-width:86px}.score-chip b,.time-chip b{font-family:KuaiLe;font-size:25px;letter-spacing:1px}.time-chip{min-width:80px}.lives{display:flex;gap:4px;color:#e77e65;font-size:21px;white-space:nowrap}.lives .lost{color:#c7d7bc}.icon-button{border:1px solid #77aa813d;border-radius:11px;width:38px;height:38px;background:#e5f0cd99;font-size:18px}.growth-hud{max-width:470px;display:flex;gap:12px;align-items:center;margin:18px auto 0;background:#fbffebc9;border:1px solid #90bcb057;padding:12px 18px;border-radius:14px}.growth-hud img{height:36px}.growth-hud>div{flex:1}.growth-label{display:flex;justify-content:space-between;gap:18px;font-size:12px}.growth-label span{color:#668374;font-size:10px}.progress-track{height:8px;background:#c9e1c4;border-radius:8px;overflow:hidden;margin-top:9px}.progress-track i{display:block;width:0;height:100%;border-radius:8px;background:#efbd49;transition:width .3s}.buff{font-size:11px;font-weight:700;color:#258178}.buff:empty{display:none}.announcement{position:absolute;top:29%;left:50%;transform:translateX(-50%);text-align:center;font-family:KuaiLe;font-size:30px;white-space:nowrap;text-shadow:0 2px 0 #f5ffe6;color:#215e50;opacity:0;transition:opacity .25s}.announcement.show{opacity:1}.announcement small{display:block;font:12px "Microsoft YaHei",sans-serif;margin-top:8px}.play-bottom{position:absolute;bottom:max(26px,env(safe-area-inset-bottom));left:30px;right:30px;display:flex;justify-content:space-between;align-items:flex-end;gap:20px}.play-tip{font-size:11px;background:#f4ffe5b8;padding:11px 17px;border-radius:12px;color:#3c7057}.play-tip span{color:#a56e48;margin-left:13px}.dash-button{background:#ffde77;border:2px solid #877037;border-radius:18px;box-shadow:0 4px 0 #86703055;padding:12px 18px;display:flex;align-items:center;gap:10px;position:relative;overflow:hidden;min-width:115px}.dash-button>span{font-size:33px}.dash-button b{font-size:16px}.dash-button small{display:block;font-size:9px;font-weight:400;margin-top:4px;white-space:nowrap}.dash-button>i{position:absolute;inset:0;background:#446d6450;pointer-events:none;transform:translateY(100%);transition:transform .1s linear}.dash-button:disabled{filter:saturate(.5)}.joystick{display:none;position:absolute;bottom:max(38px,env(safe-area-inset-bottom));left:30px;width:100px;height:100px;border:2px solid #fff9;background:#e5fbd54a;border-radius:50%;touch-action:none;backdrop-filter:blur(3px)}.stick{position:absolute;width:40px;height:40px;border-radius:50%;background:#eaf4cbe6;border:2px solid #77ab85;left:28px;top:28px;box-shadow:0 3px 5px #326c5d30}
dialog{border:1px solid #a7c593;border-radius:25px;color:var(--ink);background:#f9fce9;box-shadow:0 18px 80px #163f4660;padding:0;max-width:640px;width:calc(100% - 36px);max-height:85svh}dialog::backdrop{background:#124c4c55;backdrop-filter:blur(8px)}.dialog-inner{padding:32px;position:relative}.close-button{position:absolute;right:15px;top:14px;background:#e1eacc;border-radius:50%;font-size:24px;width:33px;height:33px;line-height:30px}.dialog-title{font-family:KuaiLe;font-size:32px;font-weight:400;text-align:center;margin:12px 0}.dialog-sub{text-align:center;font-size:12px;color:#6d8e79;line-height:1.8;margin:0 0 25px}.codex-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.codex-card{background:#eaf0d9;border:1px solid #bcd1ac;border-radius:16px;text-align:center;padding:13px 7px}.codex-card img{height:82px;width:75px;object-fit:contain}.codex-card.locked img{filter:brightness(.4) grayscale(1);opacity:.45}.codex-card b{display:block;font-size:12px;margin:7px 0}.codex-card small{font-size:10px;color:#6a8b72}.codex-card em{display:block;margin-top:6px;font-size:9px;font-style:normal;color:#839879}.codex-card img.pink{filter:hue-rotate(300deg)}.codex-card img.blue{filter:hue-rotate(100deg)}.codex-card img.purple{filter:hue-rotate(230deg)}.codex-card img.gold{filter:saturate(1.4)}.help-steps{display:grid;gap:14px;margin-top:25px}.help-step{display:flex;gap:14px;padding:14px;background:#eaf1d9;border-radius:12px}.help-step>span{width:32px;height:32px;flex-shrink:0;background:#f8d87a;border-radius:50%;display:grid;place-items:center;font-family:KuaiLe;font-size:20px}.help-step b{font-size:13px}.help-step p{font-size:11px;line-height:1.9;color:#62806b;margin:5px 0 0}.dialog-actions{display:flex;gap:12px;justify-content:center;margin-top:25px;flex-wrap:wrap}.secondary{border:1px solid #9eb48c;background:#e7efda;border-radius:13px;padding:14px 23px;font-weight:700;font-size:14px}.result-baby{display:block;height:140px;margin:8px auto 0;filter:drop-shadow(0 8px 5px #62815322)}.result-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:20px;border-top:1px solid #cad7b8;border-bottom:1px solid #cad7b8;padding:18px 0;text-align:center}.result-stat-grid b{display:block;font-family:KuaiLe;font-size:26px}.result-stat-grid small{font-size:10px;color:#688477}.record-tag{text-align:center;color:#ac7727;font-size:12px;margin:16px 0 0}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);z-index:20;background:#214f43ed;color:#fff8d9;border-radius:20px;padding:12px 23px;font-size:12px;opacity:0;pointer-events:none;transition:.25s;max-width:calc(100vw - 30px);text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0) rotate(9deg)}50%{transform:translateX(-50%) translateY(-13px) rotate(5deg)}}@keyframes fishBob{0%,100%{translate:0 0}50%{translate:0 -13px}}
@media(min-width:1500px){.home{max-width:1360px}.hero{min-height:640px}.hero-art{transform:scale(1.08)}h1{font-size:98px}}
@media(max-width:1050px){.home{padding:0 30px}.voyage-label{width:145px}.voyage{gap:8px}.sea-step{padding:10px 8px;gap:5px}.route-dots{display:none}.hero-art{transform:scale(.88);transform-origin:center}.hero{gap:0}h1{font-size:76px}.hero-copy{padding-left:12px}.hero-badge{left:30%}}
@media(max-width:760px){.home{padding:0 22px}.header{height:85px}.brand{font-size:13px;gap:8px}.brand small{font-size:7px;letter-spacing:1.3px}.brand-face{width:35px;height:36px}.brand-face img{height:30px}.header nav{gap:13px}.header nav button{font-size:11px}.header nav button span{display:none}.sound-button{width:32px;height:32px}.hero{grid-template-columns:1fr;position:relative;padding:25px 0 25px;min-height:510px;display:block}.hero-copy{padding-left:0;position:relative;z-index:3;width:60%}.eyebrow{font-size:9px;letter-spacing:1px;gap:7px}.eyebrow b{display:none}h1{font-size:64px;margin:22px 0 16px}.slogan{font-size:18px;line-height:1.5;max-width:180px;margin-top:18px}.intro{font-size:11px;line-height:1.9;width:200px}.hero-art{position:absolute;right:-65px;top:39px;width:340px;height:400px;transform:scale(.77);transform-origin:right top;pointer-events:none}.baby-diver{width:235px;height:340px;top:72px;left:47%}.orbit{width:310px;height:310px;top:40px}.orbit-two{width:355px;height:355px;top:16px}.speech{font-size:14px;left:27%;top:37px}.fish-one{right:0;top:220px;width:70px;height:100px}.fish-one span{display:none}.fish-two{left:4px;top:166px;width:55px;height:80px}.fish-three{right:7%;top:75px;width:45px;height:65px}.hero-badge{display:none}.spark-one{left:8%;top:65px}.spark-two{right:3%;top:157px}.spark-three{bottom:0;left:14%}.difficulty{gap:6px;margin-top:28px;white-space:nowrap}.difficulty button{font-size:10px;padding:8px 9px}.start-button{width:225px;font-size:22px;padding:16px 20px}.input-hint{font-size:9px;white-space:nowrap;gap:6px}.desktop-hint{display:none}.mobile-hint{display:inline}.input-hint>i,.input-hint>i+span{display:none}.voyage{flex-wrap:wrap;padding:17px 0;gap:8px;margin-bottom:9px}.voyage-label{width:100%;display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;font-size:11px}.voyage-label small{margin:0;font-size:9px}.sea-step{padding:10px 5px;gap:4px;display:block;text-align:center}.step-icon{margin:0 auto 4px;font-size:22px;height:25px}.sea-step b{font-size:10px}.sea-step small{font-size:8px}.step-status,.step-lock{display:none}.home-footer{font-size:9px;justify-content:center;flex-wrap:wrap;gap:10px;padding-bottom:20px}.home-footer>span:first-child{display:none}.home-footer>span:last-child{width:100%;text-align:center;font-size:7px}.play{padding:12px}.play-header{gap:10px;padding:10px 12px;border-radius:15px}.sea-chip{gap:5px}.sea-chip>span{font-size:20px}.sea-chip b{font-size:12px}.play-header small{font-size:8px}.score-chip{min-width:44px}.time-chip{min-width:44px}.score-chip b,.time-chip b{font-size:20px}.lives{font-size:15px;gap:1px}.play-header .sound-button{display:none!important}.play-header .icon-button{width:30px;height:30px;border-radius:8px;flex-shrink:0}.growth-hud{max-width:350px;margin-top:10px;padding:9px 12px;gap:9px}.growth-hud img{height:29px}.growth-label{font-size:10px}.growth-label span{font-size:9px}.progress-track{height:6px;margin-top:7px}.play-bottom{bottom:max(30px,env(safe-area-inset-bottom));left:20px;right:20px}.play-tip{position:fixed;bottom:10px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:8px;padding:5px 8px;background:#f4ffe579}.play-tip span{margin-left:4px}.dash-button{margin-left:auto;min-width:90px;padding:9px 12px;border-radius:15px}.dash-button>span{font-size:27px}.dash-button b{font-size:14px}.joystick{display:block;width:92px;height:92px;left:22px;bottom:max(33px,env(safe-area-inset-bottom))}.stick{left:24px;top:24px}.announcement{font-size:25px;top:28%}.announcement small{font-size:11px}.dialog-inner{padding:27px 20px}.dialog-title{font-size:28px}.codex-grid{gap:8px}.codex-card{padding:10px 5px}.codex-card img{height:66px}.codex-card b{font-size:11px}.dialog-actions .primary{font-size:14px}.secondary{padding:13px 17px}}
@media(max-width:370px){.home{padding:0 16px}.hero-art{right:-69px;transform:scale(.69)}h1{font-size:58px}.header nav{gap:8px}.hero{min-height:485px}.intro{width:183px;font-size:10px}.play-header{gap:6px}.lives{font-size:13px}.hero-copy{width:65%}}
@media(max-width:760px) and (min-height:800px){.hero{padding-top:35px;min-height:560px}.hero-art{top:58px}.slogan{margin-top:24px}.difficulty{margin-top:40px}}
@media(pointer:fine){.joystick{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important;transition:none!important}}