@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700;800&display=swap');
:root{font-family:'Noto Sans SC',sans-serif;color:#143f49;background:#f3f6ef;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a,input{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #ed9e34;outline-offset:4px}header{height:88px;display:flex;align-items:center;justify-content:space-between;max-width:1440px;margin:auto;padding:0 5%}.brand{text-decoration:none;color:#173f47;font-size:21px;font-weight:800;display:flex;align-items:center;gap:10px}.brand-icon{color:#218778;font-size:36px}.brand small{font-size:9px;letter-spacing:2px;border-left:1px solid #ccd8cd;padding-left:12px;margin-left:6px}.edition{font-size:11px;letter-spacing:2px;color:#81948b}.quiet{background:none;border:0;color:#45635d;font-size:12px}main{max-width:1440px;padding:30px 5% 0;margin:auto}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:34px}.eyebrow{font-size:10px;letter-spacing:2.5px;color:#618777;font-weight:600;margin:0 0 13px}h1{font-size:clamp(28px,3.1vw,45px);font-weight:700;letter-spacing:-1.5px;margin:0 0 12px}h1 em{font-style:normal;color:#338a70}.subtitle{font-size:13px;color:#7a8d82;margin:0}.intro-mark{font-size:11px;color:#739084;line-height:1.8;padding-right:8px}.intro-mark>span{float:left;font-size:42px;color:#b3c9a5;margin-right:18px;line-height:1.4}.intro-mark b{font-size:10px;font-weight:400}.play-layout{display:grid;grid-template-columns:minmax(0,1fr) 272px;gap:24px}.ocean{position:relative;min-height:570px;height: min(64vw,650px);border-radius:20px;overflow:hidden;background:#084354;box-shadow:0 12px 40px #1b53431a}#game{width:100%;height:100%;display:block;touch-action:none}.hud{position:absolute;top:24px;left:26px;right:24px;display:flex;align-items:center;gap:12px;color:#fff}.stat small{display:block;font-size:10px;color:#a7d7d8}.stat strong{font-size:27px;letter-spacing:2px;font-weight:600}.level{margin-left:auto;margin-right:10px;width:135px;font-size:10px;color:#b8e3dd}.track{height:4px;border-radius:5px;background:#ffffff24;margin-top:8px;overflow:hidden}.track i{display:block;width:0;height:100%;background:#f2d48c;transition:width .3s}.glass{background:#ffffff12;border:1px solid #ffffff24;color:#e5f3e9;border-radius:10px;width:34px;height:34px;font-size:19px}.glass:disabled{opacity:.4;cursor:default}.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;background:linear-gradient(#072c3920,#062b3d65);padding:24px}.overlay[hidden]{display:none}.pill{font-size:10px;letter-spacing:1px;color:#bde6d7;background:#b6e9d70e;border:1px solid #b6e9d72d;border-radius:30px;padding:8px 15px}.hero-fish{font-size:84px;filter:drop-shadow(0 10px 25px #071b2c50);margin:18px 0 6px;animation:float 4s ease-in-out infinite}.overlay h2{font-size:27px;letter-spacing:1px;margin:4px 0 12px}.overlay p{font-size:12px;line-height:1.9;color:#b4d7da;margin:0 0 24px}.primary{border:0;border-radius:11px;padding:15px 22px;background:#ebcb87;color:#244e4e;font-size:12px;font-weight:700;box-shadow:0 4px 0 #b59b6350}.primary span{margin-left:24px}.primary:disabled{opacity:.6;cursor:wait}.text-btn{background:none;border:0;color:#c2dbd6;font-size:11px;padding:18px}.privacy{font-size:9px;color:#80aeb5;margin-top:7px}.bottom-hint{position:absolute;bottom:22px;left:26px;right:26px;display:flex;justify-content:space-between;color:#a1c7c8;font-size:10px}.dot{display:inline-block;background:#9dcfba;width:6px;height:6px;border-radius:50%;margin-right:5px}.control-card{background:#fff;border:1px solid #e4eadd;border-radius:16px;padding:19px}.card-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}h3{font-size:14px;margin:0;font-weight:600}.live{font-size:9px;color:#8b9d91;background:#f0f4ec;border-radius:20px;padding:4px 8px}.camera{aspect-ratio:1.4;position:relative;background:#edf2eb;border-radius:10px;overflow:hidden}video,#hand{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:scaleX(-1)}#cameraEmpty{position:absolute;inset:0;text-align:center;display:flex;flex-direction:column;justify-content:center;color:#8ba597}#cameraEmpty span{font-size:40px;line-height:1}#cameraEmpty p{font-size:11px;margin:10px 0 5px}#cameraEmpty small{font-size:8px}.camera-corner{position:absolute;bottom:9px;left:10px;font-size:7px;letter-spacing:1.5px;color:#92aa9c}.tracking{font-size:10px;color:#729787;margin:14px 0}.secondary{width:100%;padding:10px;border-radius:8px;border:1px solid #d9e4d9;background:#f8faf6;color:#477964;font-size:11px}.secondary:disabled{opacity:.6;cursor:wait}.setting{display:flex;justify-content:space-between;font-size:10px;margin-top:22px;color:#829489}.setting label{color:#536f61}input[type=range]{width:100%;height:3px;accent-color:#5a9477;margin:14px 0 4px}.tiny{font-size:9px;color:#93a294;line-height:1.8}.guide{padding:26px 14px 0}.guide .eyebrow{font-size:8px;margin-bottom:9px}.guide h3{font-size:15px;margin-bottom:20px}.step{display:flex;align-items:center;gap:13px;margin-top:16px}.step>span{font-size:10px;color:#8eaa93;border:1px solid #d8e3d3;border-radius:50%;width:27px;height:27px;display:grid;place-items:center}.step p{margin:0}.step b{font-size:11px;font-weight:500;display:block}.step small{font-size:9px;color:#91a18f;display:block;margin-top:4px}.under{display:flex;justify-content:space-between;margin:20px 296px 0 4px;font-size:9px;color:#829485}.under i{color:#b4c3ae}.under b{color:#366950;margin-left:5px}footer{max-width:1440px;margin:40px auto 0;padding:22px 5%;border-top:1px solid #e1e8db;display:flex;justify-content:space-between;color:#8ca08e;font-size:9px}footer i{margin:0 12px;color:#bdcdb5}footer a{color:inherit;text-decoration:none}.toast{position:absolute;left:50%;bottom:60px;transform:translateX(-50%);color:#fff;background:#153e4ce8;padding:10px 18px;border-radius:30px;font-size:11px;pointer-events:none;opacity:0;transition:opacity .2s}.toast.show{opacity:1}dialog{max-width:460px;width:90%;border:0;border-radius:18px;padding:30px;color:#244f4d;line-height:1.9}dialog::backdrop{background:#042934b0}dialog .quiet{float:right}dialog h2{font-size:21px}dialog p{font-size:13px}.ocean:fullscreen{border-radius:0;height:100vh;width:100vw}@keyframes float{50%{transform:translateY(-12px) rotate(-4deg)}}@media(max-width:900px){.play-layout{grid-template-columns:minmax(0,1fr) 235px;gap:16px}.control-card{padding:14px}.intro-mark{display:none}.under{margin-right:251px}.ocean{min-height:570px}.edition{display:none}}@media(max-width:680px){header{height:70px;padding:0 5%}.brand{font-size:18px}.brand small{display:none}main{padding-top:20px}.intro{margin-bottom:24px}.subtitle{font-size:11px;line-height:1.8}.play-layout{display:block}.ocean{height:65vh;min-height:470px}.hud{top:18px;left:18px;right:18px}.level{width:110px}.overlay h2{font-size:22px}.overlay .hero-fish{font-size:70px}aside{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}.guide{padding:15px 4px}.guide h3{font-size:12px}.step{gap:8px}.step small{font-size:8px}.camera{aspect-ratio:1.3}.card-title h3{font-size:11px}.live{font-size:8px}.under{margin:18px 0 0;font-size:8px;gap:12px}footer{margin-top:26px;gap:18px;font-size:8px}.bottom-hint{left:18px;right:18px;font-size:9px}}