:root{color-scheme:dark;color:#edf6ec;font-synthesis:none;background:#082b40;font-family:-apple-system,BlinkMacSystemFont,Hiragino Kaku Gothic ProN,Yu Gothic,Meiryo,sans-serif}*{box-sizing:border-box}body{margin:0}html{scroll-snap-type:none;scroll-padding-block:0}html[data-motion=running]{scroll-behavior:smooth}html[data-motion=paused]{scroll-behavior:auto}.visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline-offset:6px;outline:2px solid #f3c1a6}.masthead{padding:max(42px, env(safe-area-inset-top)) max(5.6vw, env(safe-area-inset-right)) 0 max(5.6vw, env(safe-area-inset-left));justify-content:space-between;align-items:center;display:flex}.brand{color:#effaff;letter-spacing:.035em;align-items:center;gap:15px;margin:0;font-size:1.1875rem;font-weight:600;line-height:1.2;display:flex}.brand-fish{color:#9edfff;flex-shrink:0;width:35px}.brand-name,.brand-osakana{display:block}.brand-factory{color:#b7dfef;letter-spacing:.26em;margin-top:3px;font-size:.75rem;font-weight:400;display:block}.fish{cursor:pointer;touch-action:manipulation;background:0 0;border:0;border-radius:25%;width:100%;min-height:44px;padding:7%;display:block}.fish svg{filter:drop-shadow(0 14px 20px #02192621);width:100%;height:auto;display:block}.pixel-sprite{overflow:hidden}.sprite-reel{transform-box:view-box;transform-origin:0 0}.sprite-count-2 .sprite-reel{animation:1.6s step-end infinite fin-flutter}.sprite-count-3 .sprite-reel{animation:3.6s step-end infinite wing-flap}.fish:hover svg,.fish:focus-visible svg{filter:drop-shadow(0 0 16px #9ce4d11f)}.bubble-layer{pointer-events:none;position:absolute;inset:0}.burst-bubble{border:2px solid #baf5d8b3;border-radius:50%;width:12px;height:12px;display:block;position:absolute;top:0;left:0}.burst-bubble:nth-child(3n){width:7px;height:7px}.burst-bubble:nth-child(5n){width:15px;height:15px}.ocean-footer{padding:0 max(5.6vw, env(safe-area-inset-right)) max(33px, env(safe-area-inset-bottom)) max(5.6vw, env(safe-area-inset-left));z-index:10;pointer-events:none;justify-content:flex-end;align-items:center;display:flex;position:fixed;inset:auto 0 0}.motion-toggle{color:#b3d6ca;cursor:pointer;touch-action:manipulation;pointer-events:auto;background:#0a2d3fdf;border:1px solid #8ccaba40;border-radius:40px;flex-shrink:0;align-items:center;gap:7px;max-width:48vw;min-height:44px;padding:11px 15px;font-size:.6875rem;line-height:1.3;display:flex}.motion-toggle:hover{background:#123e4c;border-color:#a2daca}.motion-toggle:disabled{cursor:default;opacity:.65}.motion-toggle svg{flex-shrink:0;width:12px;height:12px}.motion-label{min-width:0}.play-icon,[data-motion=paused] .pause-icon{display:none}[data-motion=paused] .play-icon{display:block}.dive-cue{left:max(5.6vw, env(safe-area-inset-left));bottom:max(33px, env(safe-area-inset-bottom));z-index:4;color:#a1c4c3;letter-spacing:.09em;touch-action:manipulation;align-items:center;gap:14px;max-width:52%;min-height:44px;font-size:.6875rem;line-height:1.5;text-decoration:none;display:inline-flex;position:absolute}.dive-cue>span:last-child{border-bottom:1px solid;border-right:1px solid;flex-shrink:0;width:7px;height:7px;transform:rotate(45deg)}.journey-cue{pointer-events:auto}.journey-label{min-width:0}.dive-cue:hover{color:#effaff}.return-cue>span:last-child{transform:rotate(225deg)}@keyframes fin-flutter{0%,to{transform:translate(0)}50%{transform:translate(calc(-100% - 2px))}}@keyframes wing-flap{0%,to{transform:translate(0)}25%,75%{transform:translate(calc(-100% - 2px))}50%{transform:translate(calc(-200% - 4px))}}.ocean{--sea-unit:100vh;--world-depth:4.4;--floor-height:min(30dvh, 250px);--main-fish-size:clamp(245px, 26vw, 390px);isolation:isolate;background:#082b40;position:relative}@supports (height:100svh){.ocean{--sea-unit:100svh}}@supports (height:100dvh){.ocean{--sea-unit:100dvh}}.ocean-viewport{isolation:isolate;position:relative}.ocean-world{z-index:2;height:calc(var(--sea-unit) * var(--world-depth));position:relative}.ocean-water{z-index:-2;height:calc(var(--sea-unit) * var(--world-depth));background:radial-gradient(at 29% 21%,#21606370,#0000 23%),radial-gradient(at 76% 47%,#3d386455,#0000 25%),radial-gradient(at 30% 73%,#583c4d30,#0000 24%),linear-gradient(#082b40,#103948 18%,#142b43 46%,#18223a 70%,#0b1c2d 86%,#061725);position:absolute;inset:0}.depth-shade{z-index:-1;opacity:0;pointer-events:none;background:#03121c;position:absolute;inset:0}.ocean[data-scroll=depth]{height:calc(var(--sea-unit) * var(--world-depth))}[data-scroll=depth] .ocean-viewport{height:var(--sea-unit);position:sticky;top:0;overflow:clip}.ocean-backdrop{pointer-events:none;position:absolute;inset:0}.ocean-backdrop:before,.ocean-backdrop:after{content:"";position:absolute;inset:0}.ocean-backdrop:before{background:linear-gradient(105deg,#0000 37%,#92ded10a 37.1% 43%,#0000 43.1%),linear-gradient(105deg,#0000 57%,#c2b8e304 57.1% 61%,#0000 61.1%);mask-image:linear-gradient(#000,#0000 84%)}.ocean-backdrop:after{opacity:.085;background-image:radial-gradient(#abd6d9 .55px,#0000 .55px);background-size:6px 6px;mask-image:linear-gradient(#0000,#000 20%,#000)}.continuous-cliffs{opacity:.24;width:100%;height:100%;display:block;mask-image:linear-gradient(#0000,#000 25%)}.continuous-bubbles{position:absolute;inset:0}.continuous-bubble{border:1px solid #aac9d14d;border-radius:50%;width:6px;height:6px;animation:15s ease-in-out infinite drift;position:absolute;top:16%;left:18%}.continuous-bubble:nth-child(2){width:3px;height:3px;animation-delay:-6s;top:20%;left:22%}.continuous-bubble:nth-child(3){width:7px;height:7px;animation-delay:-2s;top:37%;left:76%}.continuous-bubble:nth-child(4){width:4px;height:4px;animation-delay:-7s;top:44%;left:80%}.continuous-bubble:nth-child(5){width:4px;height:4px;animation-delay:-4s;top:58%;left:18%}.continuous-bubble:nth-child(6){width:6px;height:6px;animation-delay:-9s;top:69%;left:20%}.continuous-bubble:nth-child(7){width:4px;height:4px;animation-delay:-3s;top:78%;left:82%}.continuous-bubble:nth-child(8){width:3px;height:3px;animation-delay:-8s;top:87%;left:77%}.depth-marker{pointer-events:none;width:1px;height:1px;position:absolute;top:0;left:0}#ray{top:calc(var(--sea-unit) * .94)}#seahorse{top:calc(var(--sea-unit) * 1.85)}#moray{top:calc(var(--sea-unit) * 2.6)}#crab{top:calc(var(--sea-unit) * 3.4)}.world-creature{--size:var(--main-fish-size);--ratio:.687273;--body-height:max(44px, calc(var(--size) * var(--ratio)));--anchor-x:55%;--world-y:.48;--roam-x:min(10vw, 110px);--roam-y:min(7dvh, 55px);--period:14s;--phase:0s;left:0;top:calc(var(--sea-unit) * var(--world-y) - var(--body-height) / 2 - var(--roam-y));width:100%;height:calc(var(--body-height) + var(--roam-y) * 2);pointer-events:none;position:absolute}.roam-x{left:calc(var(--anchor-x) - var(--size) / 2);top:var(--roam-y);width:var(--size);animation:roam-horizontal var(--period) cubic-bezier(.37, 0, .63, 1) infinite;animation-delay:var(--phase);position:absolute}.roam-y{animation:roam-vertical var(--period) cubic-bezier(.37, 0, .63, 1) infinite;animation-delay:calc(var(--phase) - var(--period) * .25)}.fish{pointer-events:auto}.world-fish-friend{--size:111px;--anchor-x:76%;--world-y:.15;--roam-x:min(11vw, calc(24vw - var(--size) / 2 - 20px));--roam-y:min(6dvh, 42px);--period:10s;--phase:-3.2s}.world-fish-little{--size:72px;--anchor-x:22%;--world-y:.84;--roam-x:min(10vw, calc(22vw - var(--size) / 2 - 18px));--roam-y:min(7dvh, 44px);--period:9s;--phase:-5.7s}.world-fish-main .roam-y,.world-fish-friend .roam-y,.world-fish-little .roam-y,.world-tropical .roam-y{animation:roam-vertical var(--period) cubic-bezier(.37, 0, .63, 1) infinite, fish-facing var(--period) steps(1, end) infinite;animation-delay:calc(var(--phase) - var(--period) * .25), var(--phase)}.world-ray{--size:min(82vw, 62dvh, calc(var(--main-fish-size) * 1.45), 480px);--ratio:.805806;--anchor-x:50%;--world-y:1.47;--roam-x:max(0px, min(18vw, calc((100vw - var(--size)) / 2 - 18px)));--roam-y:min(11dvh, 90px);--period:28s}.world-seahorse{--size:min(27vw, 19dvh, 120px);--ratio:1.66889;--anchor-x:73%;--world-y:2.33;--roam-x:min(4vw, 32px);--roam-y:min(8dvh, 65px);--period:18s;--phase:-3s}.world-moray{--size:calc(var(--main-fish-size) * 1.21);--ratio:.595294;--anchor-x:64%;--world-y:3.07;--roam-x:min(8vw, 92px);--roam-y:min(7dvh, 56px);--period:20s;--phase:-2s}.world-crab{--size:min(82vw, 90dvh, 560px);--ratio:.713333;--anchor-x:50%;top:auto;bottom:calc(var(--floor-height) * .62 - var(--size) * .07 - var(--roam-y));--roam-x:min(3vw, 24px);--roam-y:1.5px;--period:16s}.companion-creature{--size:clamp(66px, 7.6vw, 100px);--body-height:calc(var(--size) * var(--ratio));--roam-x:min(4vw, 34px);--roam-y:min(7dvh, 50px);--period:22s;opacity:.94}.companion-creature .pixel-sprite{width:100%;height:auto;display:block}.world-jellyfish{--ratio:.95;--anchor-x:77%;--world-y:.99;--phase:-7s}.world-tropical{--ratio:.5625;--anchor-x:24%;--world-y:1.96;--roam-x:min(9vw, 84px);--roam-y:min(6dvh, 44px);--period:9s;--phase:-4s}.world-shrimp{--ratio:.615385;--anchor-x:26%;--world-y:2.71;--roam-x:min(7vw, 68px);--roam-y:min(5dvh, 36px);--period:12s;--phase:-2s}.world-mendako{--size:clamp(76px, 8.3vw, 108px);--ratio:.681818;--anchor-x:28%;--world-y:3.6;--roam-x:min(4vw, 28px);--roam-y:min(4dvh, 28px);--period:17s;--phase:-6s}.rock-nook{right:0;top:calc(var(--sea-unit) * 2.87);z-index:-1;opacity:.58;pointer-events:none;width:min(44vw,510px);height:min(68dvh,520px);position:absolute}.habitat-floor{width:100%;height:var(--floor-height);z-index:-1;pointer-events:none;display:block;position:absolute;inset:auto 0 0}.world-glimmers{pointer-events:none;position:absolute;inset:0}.depth-speck{opacity:.35;background:#bddbdd;width:3px;height:3px;animation:22s ease-in-out infinite drift;position:absolute;top:8%;left:18%}.depth-speck:nth-child(2){animation-delay:-8s;top:18%;left:66%}.depth-speck:nth-child(3){width:2px;height:2px;animation-delay:-13s;top:29%;left:41%}.depth-speck:nth-child(4){animation-delay:-3s;top:37%;left:76%}.depth-speck:nth-child(5){animation-delay:-11s;top:47%;left:16%}.depth-speck:nth-child(6){width:2px;height:2px;animation-delay:-5s;top:64%;left:82%}.depth-speck:nth-child(7){animation-delay:-17s;top:76%;left:37%}.depth-speck:nth-child(8){width:2px;height:2px;animation-delay:-7s;top:84%;left:64%}.ocean[data-motion=paused] .sea-motion,[data-swimmer][data-in-view=false] .sea-motion,.continuous-bubble[data-in-view=false],.depth-speck[data-in-view=false],[data-swimmer]:has(.fish:focus-visible) .sea-motion{animation-play-state:paused}@keyframes roam-horizontal{0%,to{transform:translateX(calc(var(--roam-x) * -1))}50%{transform:translateX(var(--roam-x))}}@keyframes roam-vertical{0%,to{transform:translateY(calc(var(--roam-y) * -1))}50%{transform:translateY(var(--roam-y))}}@keyframes fish-facing{0%{scale:-1 1}50%{scale:1}to{scale:-1 1}}@keyframes drift{0%,to{opacity:.3;transform:translateY(0)}50%{opacity:.65;transform:translateY(-24px)}}@media (width<=760px){.ocean{--main-fish-size:clamp(205px, 56vw, 320px)}.masthead{padding-top:max(27px, env(safe-area-inset-top));padding-left:max(26px, env(safe-area-inset-left));padding-right:max(26px, env(safe-area-inset-right))}.brand{gap:12px;font-size:1.0625rem}.brand-factory{font-size:.625rem}.brand-fish{width:30px}.world-fish-main{--anchor-x:50%;--roam-x:min(10vw, 46px)}.world-fish-friend{--size:70px}.world-fish-little{--size:59px}.world-moray{--anchor-x:53%;--roam-x:max(0px, min(8vw, calc(47vw - var(--size) / 2 - 18px)))}.companion-creature{--size:clamp(66px, 20vw, 82px)}.world-mendako{--size:clamp(76px, 22vw, 94px)}.ocean-footer{padding:0 max(24px, env(safe-area-inset-right)) max(23px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left))}.motion-toggle{padding:10px 12px;font-size:.625rem}.dive-cue{left:max(26px, env(safe-area-inset-left));bottom:max(23px, env(safe-area-inset-bottom));gap:10px;max-width:34%;font-size:.625rem}}@media (width<=360px){.world-fish-friend{--size:61px}}@media (width>=761px) and (height>=501px) and (height<=650px){.world-fish-main{--world-y:.56}}@media (height<=500px){.ocean{--main-fish-size:min(56vw, 48dvh, 245px)}.masthead{padding-top:max(18px, env(safe-area-inset-top))}.world-fish-friend{--size:66px}.world-fish-little{--size:52px}.world-seahorse{--size:min(27vw, 19dvh, 90px)}.companion-creature{--size:min(10vw, 19dvh, 90px)}.world-mendako{--size:min(12vw, 22dvh, 100px);--anchor-x:18%;--world-y:3.52;--roam-y:12px}}@media (prefers-reduced-motion:reduce){html[data-motion]{scroll-behavior:auto}.ocean .sea-motion{animation:none}}