body{isolation:isolate;background:#061c2b}
#ocean-scene{position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(ellipse at 72% 25%,#27677b 0,#0a3449 38%,#041724 80%)}
#ocean-scene canvas{display:block;width:100%;height:100%}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(3,16,29,.12),rgba(3,16,29,.65) 35%,rgba(3,16,29,.65) 65%,rgba(3,16,29,.12))}
.hero__bg{display:none}
.hero::before{background:radial-gradient(ellipse 42% 70% at 50% 47%,rgba(4,20,35,.36),transparent 100%),linear-gradient(0deg,rgba(5,22,38,.5),transparent 28%)}
.hero__in{position:relative;text-shadow:0 2px 18px #031523}
main{position:relative;background:rgba(4,20,35,.65)}
.feast{background:rgba(10,33,66,.8)}
.ocean-toggle{position:absolute;top:max(14px,env(safe-area-inset-top));left:14px;z-index:45;border:1px solid rgba(182,224,229,.3);border-radius:30px;background:rgba(4,23,36,.78);color:#d7edef;padding:9px 14px;font:500 12px var(--body);cursor:pointer;backdrop-filter:blur(10px)}
.ocean-toggle:focus-visible{outline:2px solid #f0d482;outline-offset:4px}
@media(max-width:600px){body::before{background:linear-gradient(90deg,rgba(3,16,29,.12),rgba(3,16,29,.52) 25%,rgba(3,16,29,.52) 75%,rgba(3,16,29,.12))}.hero__logo{width:min(49vw,210px)}.ocean-toggle{font-size:11px;padding:8px 11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero__bg{animation:none}}