*{box-sizing:border-box}body{margin:0;background:#061923;color:#eafaff;font:17px/1.55 system-ui}main,header{max-width:1080px;margin:auto;padding:24px}header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}header strong{font-size:23px}nav{display:flex;gap:18px;flex-wrap:wrap}a{color:#a9ffe1}h1{font-size:clamp(2.5rem,8vw,6rem);line-height:.98;margin:.35em 0}.hero{background:radial-gradient(ellipse at 78% 5%,#258a91,transparent 62%),linear-gradient(#103e56,#071620);padding:clamp(20px,6vw,66px);border-radius:26px}.hero p{max-width:35rem}.button{display:inline-block;background:#a9ffe1;color:#092437;padding:.7rem 1rem;border-radius:10px;font-weight:bold;text-decoration:none}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.card,section.demo{border:1px solid #356275;border-radius:18px;padding:22px;margin-top:18px;background:#102b39}.card h2{margin-top:0}input{width:100%;accent-color:#a9ffe1}.water{background:linear-gradient(#1899af,#06263c,#020b1b);height:230px;position:relative;border-radius:12px;margin:16px 0}.marker{position:absolute;left:0;right:0;border-top:2px solid white;color:white;padding-left:10px;font-weight:bold}.scene{display:flex;justify-content:center;align-items:center;height:140px;background:#020e18;border-radius:12px}.scene span{width:16px;height:16px;background:#adfff4;border-radius:50%;box-shadow:0 0 30px 10px #56e6ff;opacity:0}.scene.on span{opacity:1}button{padding:.65rem .9rem;border-radius:8px;background:#a9ffe1;color:#092437;border:0;font:inherit;font-weight:bold}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #ffd56e;outline-offset:4px}footer{margin:24px;color:#b6d1d8}@media(max-width:600px){main,header{padding:16px}.grid{grid-template-columns:1fr}}
.card img,video{display:block;width:100%;border-radius:12px;object-fit:cover}.card img{aspect-ratio:16/9}video{max-height:65vh;background:#000}
.ocean-head{padding:16px;color:white}.ocean-head>a{font-size:24px;font-weight:800}.ocean-index>a{display:block;padding:14px;border:1px solid #457286;border-radius:12px}.card img,video{display:block;width:100%;border-radius:12px;object-fit:cover}.card img{aspect-ratio:16/9}video{max-height:65vh;background:#000}