@charset "UTF-8";
:root{color-scheme:light;--ink:12,52,66;--progress:0;--water-y:110vh;--dive:0;--page-gutter:5.6vw;--serif:"Songti SC","Noto Serif CJK SC","Source Han Serif SC","STSong","SimSun",serif;--sans:"Microsoft YaHei","PingFang SC",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#9ad1dc;color:rgb(var(--ink));font:16px/1.65 var(--sans);-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button{border:0;background:none}button:focus-visible,a:focus-visible{outline:2px solid currentColor;outline-offset:7px}::selection{background:#356b74;color:white}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip-link{position:fixed;z-index:20;top:12px;left:12px;padding:12px 20px;background:#ecf9f7;transform:translateY(-160%)}.skip-link:focus{transform:none}
.environment{position:fixed;inset:0;overflow:hidden;pointer-events:none;background:linear-gradient(#92cfdf 0%,#d9efee 48%,#47bac0 49%,#167980 100%)}#ocean{position:absolute;width:100%;height:100%;display:block}.poster{position:absolute;inset:0;background-position:center;background-size:cover}.scene-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(218,244,241,.13),transparent 64%);opacity:calc(1 - var(--dive))}.waterline{position:absolute;left:-2%;width:104%;height:4px;top:var(--water-y);background:rgba(227,255,251,.55);box-shadow:0 -2px 16px 5px #d9f7f433,0 6px 15px 5px #00384255;opacity:var(--line-visible,0);filter:blur(1px);border-radius:50%;transform:rotate(-.3deg)}.grain{position:absolute;inset:0;opacity:.022;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.7' filter='url(%23n)'/%3E%3C/svg%3E")}
.reactive{color:rgb(var(--ink))}.header{position:fixed;z-index:10;top:0;left:0;right:0;height:124px;padding:0 var(--page-gutter);display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:14px}.brand svg{width:38px;height:38px}.brand-name{font-family:var(--serif);font-size:26px;letter-spacing:.22em;font-weight:500;line-height:1.25}.brand-en{display:block;font:11px/1.8 Georgia,serif;letter-spacing:.22em}.navigation{display:flex;gap:42px;position:absolute;left:50%;transform:translateX(-50%);font-size:14px;letter-spacing:.12em}.navigation a{position:relative;padding:10px 0;opacity:.57;transition:opacity .25s}.navigation a:hover,.navigation a.active{opacity:1}.navigation a:after{content:"";position:absolute;bottom:2px;left:50%;height:3px;width:3px;border-radius:50%;background:currentColor;opacity:0}.navigation a.active:after{opacity:1}.sound-control{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.04em;padding:12px 0}.sound-bars{height:15px;display:flex;align-items:center;gap:3px}.sound-bars i{display:block;width:1px;background:currentColor;height:5px}.sound-bars i:nth-child(2){height:12px}.sound-bars i:nth-child(3){height:9px}.sound-bars i:nth-child(4){height:15px}.sound-control[aria-pressed=true] .sound-bars i{animation:sound 1s ease-in-out infinite alternate}.sound-control[aria-pressed=true] .sound-bars i:nth-child(2){animation-delay:-.3s}.sound-control[aria-pressed=true] .sound-bars i:nth-child(3){animation-delay:-.7s}@keyframes sound{to{transform:scaleY(.3)}}
.journey-track{height:540vh;position:relative;pointer-events:none}.anchor{position:absolute;width:1px;height:1px}#surface{top:0}#shallows{top:42.37%}#deep{bottom:100vh}.story-shell{position:fixed;z-index:3;top:28%;left:11.5%;width:65%;pointer-events:none}.story{position:absolute;top:0;left:0;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .9s ease,transform 1.1s ease,visibility 1s;pointer-events:none}.story.active{opacity:1;visibility:visible;transform:translateY(0)}.story.active button{pointer-events:auto}.chapter{display:flex;align-items:center;gap:16px;font-size:12px;letter-spacing:.25em;margin:0 0 30px;opacity:.8}.short-line{display:inline-block;width:30px;height:1px;background:currentColor}.water-text{font-family:var(--serif);font-size:clamp(58px,6.2vw,100px);font-weight:400;line-height:1.3;letter-spacing:.07em;margin:0 0 25px;color:#123a48;background:linear-gradient(to bottom,#123a48 0px,#123a48 calc(var(--text-line,1000px) - 12px),#f0f5f2 calc(var(--text-line,1000px) + 14px),#f0f5f2 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 1px 1px #09232b08)}.description{font-size:14px;line-height:2;letter-spacing:.09em;opacity:.77;margin:0 0 35px}.dive-button{display:inline-flex;align-items:center;gap:42px;padding:13px 20px 13px 23px;border:1px solid rgba(var(--ink),.25);border-radius:3px;background:rgba(215,242,238,.1);backdrop-filter:blur(8px);font-size:13px;letter-spacing:.1em;transition:background .3s,border-color .3s,transform .3s}.dive-button:hover{background:rgba(221,247,241,.22);border-color:rgba(var(--ink),.55);transform:translateY(-2px)}.button-mark{font-size:20px;font-family:Arial,sans-serif;font-weight:300;line-height:15px}.rise{transform:rotate(180deg)}
.depth-rail{position:fixed;right:var(--page-gutter);top:36%;z-index:3;display:flex;flex-direction:column;align-items:center;gap:20px;font-size:10px;letter-spacing:.1em;opacity:.65}.rail-track{height:170px;width:1px;background:rgba(var(--ink),.2);position:relative}.rail-track:before{content:"";position:absolute;width:7px;height:100%;left:-3px;background:repeating-linear-gradient(to bottom,transparent 0px,transparent 16px,rgba(var(--ink),.45) 17px,transparent 18px)}.rail-fill{position:absolute;width:1px;height:calc(var(--progress)*100%);background:currentColor}.rail-dot{position:absolute;width:5px;height:5px;border-radius:100%;background:currentColor;left:-2px;top:calc(var(--progress)*100% - 2px);box-shadow:0 0 0 4px rgba(var(--ink),.07)}.depth-note{position:fixed;bottom:16%;right:var(--page-gutter);display:flex;align-items:baseline;gap:5px;text-align:right;opacity:.7}.depth-value{font:42px/1 Georgia,serif;font-variant-numeric:tabular-nums}.depth-unit{font:13px Georgia,serif}.depth-name{display:block;position:absolute;right:0;top:48px;white-space:nowrap;font-size:11px;letter-spacing:.13em}.footer{position:fixed;z-index:5;bottom:0;left:0;right:0;padding:28px var(--page-gutter) 30px;display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:.09em}.motion-control{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.05em;opacity:.7;padding:10px 0}.pause-icon{width:8px;height:10px;border-left:1px solid currentColor;border-right:1px solid currentColor}.motion-control[aria-pressed=true] .pause-icon{height:0;border-left:7px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:0}.scroll-cue{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:13px;white-space:nowrap;font-size:11px;letter-spacing:.1em}.mouse{height:24px;width:14px;border:1px solid rgba(var(--ink),.55);border-radius:8px;position:relative}.mouse i{position:absolute;width:1px;height:5px;top:5px;left:5px;background:currentColor;animation:scroll 2.5s ease infinite}.footer-signature{opacity:.5;font-size:11px}@keyframes scroll{0%,100%{opacity:.4;transform:translateY(0)}60%{opacity:1;transform:translateY(6px)}}.noscript{position:fixed;bottom:100px;width:100%;text-align:center;color:white}.is-paused *{animation-play-state:paused!important}.no-webgl .poster{background-image:url('./assets/ocean-poster.png')}.no-webgl .scene-shade{opacity:1;background:linear-gradient(#00465900,#001024);mix-blend-mode:multiply}
@media(min-width:1700px){.story-shell{top:30%}.chapter{margin-bottom:38px}.description{font-size:16px}}
@media(max-height:740px) and (min-width:761px){.header{height:96px}.story-shell{top:24%}.water-text{font-size:clamp(54px,5.6vw,82px);margin-bottom:18px}.chapter{margin-bottom:17px}.description{margin-bottom:20px}.footer{padding-bottom:20px}.depth-note{bottom:20%}}
@media(max-width:760px){:root{--page-gutter:7vw}.header{height:96px}.brand-name{font-size:22px}.brand svg{width:30px}.brand{gap:9px}.brand-en{font-size:10px}.navigation{top:110px;gap:30px;font-size:12px}.sound-control{font-size:11px;gap:8px}.story-shell{left:8.5%;top:31%;width:83%}.chapter{font-size:11px;margin-bottom:24px}.water-text{font-size:clamp(52px,10vw,70px);margin-bottom:22px;line-height:1.3}.description{font-size:13px;line-height:1.95;margin-bottom:28px}.dive-button{font-size:12px;padding:12px 18px;gap:35px}.depth-rail{right:6%;top:43%;gap:15px}.rail-track{height:115px}.depth-top,.depth-bottom{font-size:9px}.depth-note{bottom:16%;right:7%;opacity:.64}.depth-value{font-size:30px}.depth-name{top:38px;font-size:10px}.footer{padding-bottom:max(23px,env(safe-area-inset-bottom));font-size:10px}.footer-signature{display:none}.scroll-cue{left:auto;right:7vw;transform:none;font-size:10px}.motion-control{font-size:10px}.mouse{height:21px;width:13px}}
@media(max-width:380px){.water-text{font-size:48px}.story-shell{top:30%}.depth-rail{display:none}.description{font-size:12px}.depth-note{bottom:14%}}
@media(max-height:620px){.story-shell{top:26%}.water-text{font-size:42px}.chapter{margin-bottom:12px}.description{margin-bottom:14px;font-size:12px}.navigation{top:72px}.header{height:68px}.dive-button{padding-top:8px;padding-bottom:8px}.depth-rail{top:30%}.depth-note{bottom:22%}.rail-track{height:90px}}
/* Keep quiet controls legible over moving water on every viewport. */
.chapter{font-size:14px}.description{font-size:16px;opacity:.88}.dive-button,.sound-control,.navigation{font-size:14px}.footer,.motion-control,.scroll-cue,.footer-signature{font-size:12px}.depth-top,.depth-bottom,.depth-name{font-size:12px}.sound-control,.motion-control{min-height:44px}.footer-signature{opacity:.7}.navigation a{opacity:.76}.navigation a.active{opacity:1}.depth-rail,.depth-note{opacity:.8}
@media(max-width:760px){.chapter{font-size:12px}.description{font-size:16px}.dive-button,.navigation,.sound-control{font-size:14px}.footer,.motion-control,.scroll-cue{font-size:12px}.depth-top,.depth-bottom,.depth-name{font-size:12px}.depth-rail{right:5%;opacity:.6}.sound-control{gap:8px}.footer{gap:16px}.scroll-cue{letter-spacing:0;gap:8px}.story-shell{top:29%}.water-text{font-size:clamp(48px,10vw,68px)}}
@media(max-height:620px){.description{font-size:14px}.chapter{font-size:12px}.water-text{font-size:40px}.story-shell{top:26%}.depth-rail{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
/* Cinematic water-level composition; all chrome stays quiet around the sea. */
html{overflow-anchor:none;scrollbar-width:none}html::-webkit-scrollbar{display:none}
:root{--page-gutter:4.8vw;--ink:9,32,48}body{background:#244b5c}.environment{background:#426d83}.poster{background-image:url('./assets/sunset-ocean.png')}.scene-shade{background:none}.filter-definitions{position:absolute;width:0;height:0;overflow:hidden}.header{height:112px}.brand-name{font-size:24px}.brand-en{font-size:10px}.brand svg{width:35px}.sound-control{padding:8px 18px;border:1px solid rgba(var(--ink),.32);border-radius:30px;font-size:12px}.navigation{gap:38px;font-size:13px}.story-shell{left:6.4%;top:21.5%;width:75%}.chapter{font-size:12px;letter-spacing:.25em;margin-bottom:22px}.short-line{display:none}.water-text{font-size:clamp(66px,6.4vw,100px);line-height:1.14;letter-spacing:.01em;margin-bottom:23px;background-image:linear-gradient(to bottom,#092030 0px,#092030 calc(var(--text-line,1000px) - 15px),#e9f2ef calc(var(--text-line,1000px) + 20px),#e9f2ef 100%);filter:url('#water-refraction')}.description{font-size:15px;line-height:1.8;letter-spacing:.05em;margin-bottom:26px;opacity:.88}.hero-actions{display:flex;align-items:center;gap:24px;pointer-events:auto}.dive-button{background:rgba(7,36,56,calc(.97 - var(--dive)*.79));color:#f4f8f5;border:1px solid rgba(233,247,245,calc(var(--dive)*.35));border-radius:32px;padding:12px 23px;gap:25px;backdrop-filter:blur(calc(4px + var(--dive)*12px));font-size:13px}.dive-button:hover{background:#1d5366cc;border-color:#e5f2ef66}.button-mark{font-size:17px}.film-button{display:flex;align-items:center;gap:10px;font-size:13px;padding:0;min-height:44px}.play-circle{width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(var(--ink),.5);border-radius:50%;font-size:16px;padding-left:2px}.film-button[aria-pressed=true] .play-circle{font-size:0}.film-button[aria-pressed=true] .play-circle:after{content:'';width:7px;height:10px;border-left:2px solid currentColor;border-right:2px solid currentColor}.depth-rail{opacity:.5;top:40%;font-size:11px}.depth-top,.depth-bottom{font-size:11px}.rail-track{height:100px}.depth-note{bottom:16%;opacity:.68}.depth-value{font-size:31px}.depth-name{font-size:11px;top:37px}.footer{padding:20px var(--page-gutter) 23px;color:#edf4f2;--ink:237,244,242}.motion-control{gap:12px;opacity:.85}.motion-circle{display:grid;place-items:center;width:31px;height:31px;border:1px solid #e3efef80;border-radius:50%}.pause-icon{width:6px;height:8px}.scroll-cue{left:auto;right:var(--page-gutter);transform:none;flex-direction:row-reverse}.mouse{border:0;width:10px;height:21px}.mouse:before{content:'↓';font:20px Georgia,serif}.mouse i{display:none}.footer-signature{position:absolute;left:50%;transform:translateX(-50%);opacity:.55}.no-webgl .poster{background-image:url('./assets/sunset-ocean.png')}
@media(min-width:1700px){.story-shell{top:23%}.water-text{font-size:112px}.chapter{margin-bottom:25px}}
@media(max-height:740px) and (min-width:761px){.header{height:90px}.story-shell{top:22%}.water-text{font-size:clamp(54px,6.2vw,80px);margin-bottom:18px}.chapter{margin-bottom:15px}.description{margin-bottom:19px;font-size:14px}.dive-button{padding:10px 20px}.depth-note{bottom:17%}}
@media(max-width:760px){:root{--page-gutter:6vw}.header{height:90px}.brand-name{font-size:22px}.brand svg{width:30px}.sound-control{font-size:12px;padding:6px 12px;gap:8px}.navigation{top:92px;gap:32px;font-size:13px}.story-shell{left:8%;top:23%;width:84%}.water-text{font-size:clamp(55px,12vw,78px);line-height:1.16;margin-bottom:23px}.chapter{font-size:11px;letter-spacing:.14em;margin-bottom:22px}.description{font-size:14px;line-height:1.85;margin-bottom:24px}.hero-actions{gap:18px}.dive-button{padding:11px 18px;gap:18px;font-size:13px}.film-button{gap:7px;font-size:12px}.play-circle{width:30px;height:30px}.depth-rail{display:none}.depth-note{bottom:13%;right:7%}.footer{padding:20px 6vw max(20px,env(safe-area-inset-bottom))}.motion-control,.scroll-cue{font-size:11px;letter-spacing:0}.motion-circle{width:27px;height:27px}.scroll-cue{right:6vw;gap:7px}.footer-signature{display:none}}
@media(max-height:620px){.header{height:65px}.navigation{top:20px}.story-shell{top:23%}.water-text{font-size:46px;margin-bottom:15px}.chapter{margin-bottom:12px}.description{font-size:13px;margin-bottom:16px}.depth-note{bottom:21%}.hero-actions{gap:15px}.dive-button{padding:8px 17px}}
@media(min-width:761px) and (max-height:740px){.story-shell{top:19%}.description{margin-bottom:17px}}
#world-effects{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.header-controls{display:flex;align-items:center;gap:21px}.environment-controls{position:relative}.environment-toggle{display:flex;align-items:center;gap:7px;font-size:12px;padding:10px 0;min-height:44px}.sun-icon{font:24px/1 Georgia,serif}.weather-divider{opacity:.4;padding:0 2px}.environment-panel{position:absolute;right:0;top:calc(100% + 13px);width:248px;padding:23px;border:1px solid #e9f6f45c;border-radius:16px;background:#eaf3f0ed;box-shadow:0 15px 50px #031d3040;backdrop-filter:blur(24px);color:#183c49}.environment-panel[hidden]{display:none}.panel-title{font-family:var(--serif);font-size:21px;margin:0 0 20px}.environment-panel label{display:block;font-size:12px;margin:14px 0 6px;color:#45636d}.environment-panel select{font:13px var(--sans);width:100%;min-height:39px;padding:6px 10px;border:1px solid #a5bdc4;border-radius:7px;background:#fbfdfac9;color:#173b49;cursor:pointer}.environment-panel select:focus-visible{outline:2px solid #32687c;outline-offset:2px}.panel-note{font-size:11px;line-height:1.9;color:#507079;margin:20px 0 0}.water-text{background-image:linear-gradient(to bottom,var(--surface-color,#092030) 0px,var(--surface-color,#092030) calc(var(--text-line,1000px) - 15px),#e9f2ef calc(var(--text-line,1000px) + 20px),#e9f2ef 100%)}
@media(max-width:1000px){.header-controls{gap:13px}.environment-toggle{font-size:11px;gap:5px}.navigation{gap:25px}.sound-control{padding:7px 12px}}
@media(max-width:760px){.header-controls{gap:14px}.environment-toggle .weather-divider,.environment-toggle #weather-label{display:none}.sun-icon{font-size:22px}.environment-toggle{font-size:11px;gap:4px}.sound-control{padding:8px 0;border:0}.sound-control #sound-label{display:none}.sound-bars{height:18px}.environment-panel{right:-42px;top:calc(100% + 9px);width:240px}.brand-name{font-size:21px}}
#marine-life{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.credits-link{display:inline-block;margin-top:12px;font-size:11px;color:#406573;text-decoration:underline;text-underline-offset:3px}body{user-select:none}.environment-panel{user-select:text}