*{margin:0;padding:0;box-sizing:border-box}body{margin:0;padding:0;overflow:hidden;font-family:system-ui,-apple-system,sans-serif;background:#000}#ocean-canvas{display:block;width:100vw;height:100vh;cursor:grab}#ocean-canvas:active{cursor:grabbing}#info{position:fixed;top:20px;left:20px;background:#001428d9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:20px;border-radius:10px;color:#fff;font-size:14px;max-width:350px;pointer-events:none;border:1px solid rgba(68,136,255,.3);box-shadow:0 8px 32px #00000080}#info h1{font-size:24px;margin-bottom:15px;color:#48f;text-shadow:0 0 10px rgba(68,136,255,.5)}#info p{margin:10px 0;line-height:1.6}#info ul{margin:8px 0;padding-left:20px;line-height:1.8}#info li{margin:4px 0}#info kbd{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:3px;padding:2px 6px;font-family:Courier New,monospace;font-size:12px;color:#fff}#info strong{color:#6af}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@keyframes panelEnter{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes panelExit{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(4px)}}.ocean-panel{animation:panelEnter .45s cubic-bezier(.16,1,.3,1) backwards;transition:opacity .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1)}.ocean-panel.exiting{animation:panelExit .3s cubic-bezier(.4,0,.6,1) forwards}.ocean-button{transition:transform .18s cubic-bezier(.4,0,.2,1),filter .18s cubic-bezier(.4,0,.2,1),box-shadow .18s cubic-bezier(.4,0,.2,1);will-change:transform}.ocean-button:hover{transform:scale(1.02) translateY(-1px);filter:brightness(1.1);box-shadow:0 8px 24px #0000004d}.ocean-button:active{transform:scale(.98);transition-duration:.05s}#ocean-ui{transition:opacity .3s cubic-bezier(.4,0,.2,1)}input[type=range]{transition:opacity .15s ease-out}input[type=range]:hover{opacity:1}input[type=range]:active{opacity:.9}select{transition:border-color .15s ease-out,background-color .15s ease-out}select:hover{border-color:#64c8ff80!important}select:focus{outline:none;border-color:#64c8ffcc!important;background-color:#ffffff26!important}