:root{color-scheme:dark;--ink:#edf3e6;--muted:#aac4c7;--lime:#d1e9ac;--line:rgba(202,232,230,.2)}*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px;-webkit-text-size-adjust:100%;text-size-adjust:100%}body{margin:0;min-width:320px;overflow-x:hidden;background:#030c17;color:var(--ink);font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}img,svg,video{display:block;max-width:100%}button,input,select,textarea{font:inherit}a{color:inherit;text-decoration:none}button,a,summary{-webkit-tap-highlight-color:transparent}button,summary{cursor:pointer}button{border:0}button,a:where(.begin,.back,.brand,.journal-link),summary{min-height:44px}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--lime);outline-offset:6px}::selection{background:#d1e9ac;color:#062530}.skip{position:fixed;z-index:100;top:10px;left:10px;padding:12px 20px;background:var(--lime);color:#05232f;transform:translateY(-180%)}.skip:focus{transform:none}.header{position:absolute;z-index:20;top:0;left:0;width:100%;display:flex;justify-content:space-between;align-items:center;padding:max(23px,env(safe-area-inset-top)) 4vw 23px;gap:20px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;font-size:21px;font-weight:700;letter-spacing:.15em}.brand-mark{font-size:38px;line-height:1;font-weight:300}.brand-note{font-size:9px;font-weight:400;letter-spacing:.16em;border-left:1px solid var(--line);padding-left:20px;margin-left:10px;color:#c2d5d0}.header-actions{display:flex;align-items:center;gap:25px}#language{background:transparent;color:var(--ink);padding:0 10px;font-size:13px;min-width:44px}.journal-link{display:flex;align-items:center;gap:12px;font-size:12px}.journal-link #count{font-family:monospace;color:var(--lime);font-size:11px}.hero{position:relative;min-height:880px;min-height:max(800px,100svh);overflow:hidden;background:radial-gradient(ellipse at 63% -20%,#689c9b 0,transparent 55%),linear-gradient(160deg,#174f60,#073a4c 65%,#063547)}.surface-light{position:absolute;inset:-30% -10% 0;opacity:.25;background:repeating-conic-gradient(from 160deg at 66% 0,transparent 0deg 12deg,#acdad0 13deg 16deg,transparent 17deg 27deg);filter:blur(12px);mask-image:linear-gradient(#000,transparent 80%)}.hero::after,.ocean-zone::after{content:"";pointer-events:none;position:absolute;inset:0;background-image:radial-gradient(circle,#c4e9dd 1px,transparent 1.6px),radial-gradient(circle,#c4e9dd .6px,transparent 1.1px);background-size:233px 179px,137px 251px;background-position:32px 22px,80px 90px;opacity:.15}.hero-content{position:relative;z-index:2;padding:185px 12vw 170px;max-width:1250px}.eyebrow{font-size:10px;font-weight:500;letter-spacing:.21em;color:var(--lime);margin:0 0 30px;display:flex;align-items:center;gap:18px}h1,h2{font-family:Georgia,"Times New Roman","Songti SC",serif;font-weight:400;line-height:1.02;letter-spacing:-.055em;margin:0}h1{font-size:clamp(68px,7.8vw,124px)}.hero-description{font-size:16px;color:#c3d8d5;line-height:1.9;margin:30px 0 32px;max-width:480px}.begin,.download{display:inline-flex;align-items:center;justify-content:space-between;gap:45px;background:var(--lime);color:#153739;padding:17px 24px;font-size:13px;border-radius:2px;transition:background .2s,transform .2s}.begin:hover,.download:hover{background:#e3f4c9;transform:translateY(-2px)}.begin span:last-child,.download span:last-child{font-size:20px;line-height:1}.hero-meta{font:9px/1.7 monospace;letter-spacing:.12em;color:#9bbcbf;margin-top:18px}.hero-whale{position:absolute;width:56%;right:-7%;top:45%;opacity:.53;transform:rotate(-12deg);filter:drop-shadow(0 20px 40px #012f43);animation:float 11s ease-in-out infinite}.hero-bottom{position:absolute;bottom:32px;left:4vw;right:4vw;display:flex;justify-content:space-between;font:9px/1.6 monospace;letter-spacing:.15em;color:#91b2b6}.instrument{position:fixed;z-index:12;left:4vw;bottom:35px;width:140px;pointer-events:none;font-family:monospace}.instrument-label{font-size:8px;letter-spacing:.09em;display:block;color:#afc4c7}.instrument>div:not(.instrument-track){display:flex;gap:7px;align-items:baseline}#depth{font-size:36px;line-height:1.5;font-weight:300;font-variant-numeric:tabular-nums;letter-spacing:-.07em}.unit{color:var(--lime);font-size:12px}#zone-label{display:block;font-size:8px;letter-spacing:.1em;color:#b6c6c8}.instrument-track{height:1px;background:#779fa033;margin-top:12px;width:100%}.instrument-track i{display:block;width:0;height:1px;background:var(--lime)}.zone-nav{position:fixed;z-index:12;right:3vw;top:42%;display:flex;flex-direction:column;gap:0}.zone-nav a{display:flex;align-items:center;justify-content:flex-end;min-width:44px;min-height:44px;gap:13px;font:9px monospace;color:#afc1c480}.zone-nav i{width:5px;height:5px;border:1px solid #9fc0c3;border-radius:50%}.zone-nav a[aria-current="location"]{color:var(--lime)}.zone-nav a[aria-current="location"] i{background:var(--lime);box-shadow:0 0 13px #c3e7b688}.ocean-zone{position:relative;min-height:1120px;isolation:isolate;padding:0 16vw 110px 23vw;overflow:hidden;scroll-margin-top:0}.sunlight{background:linear-gradient(#063547,#073546 55%,#072b40)}.twilight{background:linear-gradient(#072b40,#0b2037 65%,#0b1a30)}.midnight{background:linear-gradient(#0b1a30,#090f22 65%,#080e20)}.abyss{background:linear-gradient(#080e20,#070e1a 65%,#060e19)}.hadal{background:linear-gradient(#060e19,#030c17 70%,#030c17)}.depth-line{position:relative;z-index:2;display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:18px;font:9px/1.5 monospace;letter-spacing:.12em;color:#88aeb7}.zone-copy{position:relative;z-index:2;padding-top:100px;max-width:570px}.zone-copy .eyebrow{margin-bottom:25px}.tiny-rule{width:30px;height:1px;background:var(--line)}h2{font-size:clamp(52px,6vw,88px)}.zone-body{max-width:390px;margin:28px 0 0;font-size:15px;line-height:1.95;color:#a8c1c7}.creature{position:relative;z-index:1;width:100%;margin:15px 0 20px 10%;}.creature img{width:100%;height:auto;filter:drop-shadow(0 0 36px #6cc7d312);animation:float 9s ease-in-out infinite}.creature figcaption{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.02em;color:#afc4c7;margin-top:-20px}.specimen-dot{width:5px;height:5px;flex-shrink:0;border-radius:50%;background:var(--lime)}.illustration-label{font:8px monospace;letter-spacing:.1em;opacity:.5;margin-left:auto}.field-note{position:relative;z-index:3;max-width:430px;margin-top:45px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.field-note summary{display:flex;gap:15px;align-items:center;list-style:none;font-size:12px;padding:14px 0}.field-note summary::-webkit-details-marker{display:none}.note-icon{color:var(--lime);font:19px monospace}.field-note[open] .note-icon{transform:rotate(45deg)}.field-note p{font-size:13px;line-height:1.9;color:#b1c5ca;margin:0 0 20px 28px}.next-depth{position:absolute;bottom:40px;left:23vw;right:16vw;display:flex;align-items:center;gap:20px;font:8px monospace;letter-spacing:.14em;color:#70959f}.next-depth span:last-child{margin-left:auto}.twilight .creature{width:75%;margin-left:25%;margin-top:-30px}.twilight .creature img{filter:drop-shadow(0 0 30px #f5b6a521)}.midnight .creature{width:90%;margin-left:15%}.midnight .creature img{filter:drop-shadow(0 0 22px #c7fcca0b)}.hadal .creature{opacity:.85}.finale{padding:130px 20vw 110px 23vw;background:radial-gradient(ellipse at 50% 100%,#0b2730,#030c17 70%);position:relative}.finale h2{font-size:clamp(48px,5.4vw,78px)}.finale-body{font-size:15px;color:#a4bac2;max-width:440px;margin:28px 0 35px;line-height:1.9}#stamps{padding:0;list-style:none;max-width:540px;margin:35px 0}#stamps li{border-top:1px solid var(--line);display:flex;align-items:center;gap:18px;padding:15px 0;font:10px/1.5 monospace;color:#7d939e;letter-spacing:.06em}.stamp-number{color:#6b828d}.stamp-status{margin-left:auto;font-size:9px;color:#7d939e}#stamps li.visited,#stamps li.visited .stamp-number{color:var(--lime)}#stamps li.visited .stamp-status{color:#b9d2c3}.download-hint,#download-status{font-size:11px;color:#8aa3ad}.back{display:inline-flex;align-items:center;font-size:12px;color:#adc1c7;margin-top:35px}footer{padding:50px 12vw 45px 23vw;position:relative;background:#030c17;border-top:1px solid var(--line);color:#829ba7}.footer-brand{font-size:18px;color:#d8e7dc;letter-spacing:.14em}footer p{font-size:11px;line-height:1.9;max-width:560px;margin:20px 0}.sources{display:flex;gap:10px 20px;flex-wrap:wrap;font-size:10px;max-width:620px}.sources>span{width:100%;font:9px monospace;letter-spacing:.1em}.sources a{text-decoration:underline;text-underline-offset:4px}.footer-year{font:8px monospace;letter-spacing:.1em;display:block;margin-top:35px}[lang="zh-CN"] h1,[lang="zh-CN"] h2{letter-spacing:-.04em;line-height:1.15}[lang="zh-CN"] .hero-content{max-width:1000px}@keyframes float{0%,100%{translate:0 0}50%{translate:0 -12px}}
@media(min-width:1700px){.ocean-zone{padding-left:26vw;padding-right:22vw}.next-depth{left:26vw;right:22vw}.hero-content{padding-left:16vw}}
@media(max-width:1000px){.brand-note{display:none}.hero-content{padding:190px 12vw 200px}.hero-whale{top:53%;width:75%;right:-19%}.instrument{left:3vw;width:105px}.instrument-label{font-size:7px}#depth{font-size:30px}.ocean-zone{padding-left:19vw;padding-right:12vw}.next-depth{left:19vw;right:12vw}.finale{padding-left:19vw;padding-right:12vw}footer{padding-left:19vw}.zone-copy{padding-top:85px}.creature{margin-left:2%}}
@media(max-width:600px){html{scroll-padding-top:70px}.header{padding:16px 20px;gap:10px}.brand{gap:7px;font-size:16px}.brand-mark{font-size:29px}.header-actions{gap:8px}.journal-link{font-size:10px;gap:8px}.journal-link>span:first-child{display:none}.hero{min-height:820px;min-height:max(780px,100svh)}.hero-content{padding:160px 26px 250px}.hero .eyebrow{font-size:8px;letter-spacing:.15em;margin-bottom:25px}h1{font-size:clamp(54px,11.8vw,78px)}.hero-description{font-size:16px;max-width:310px;line-height:1.8;margin-top:25px}.hero-description br{display:none}.hero-meta{font-size:8px;max-width:260px}.hero-whale{top:auto;bottom:78px;right:-15%;width:100%;opacity:.6}.hero-bottom{bottom:25px;left:26px;right:26px;font-size:7px}.hero-bottom>span:last-child{display:none}.instrument{left:16px;bottom:max(14px,env(safe-area-inset-bottom));width:calc(100% - 32px);display:flex;align-items:center;justify-content:space-between;gap:12px;background:#061622e8;border:1px solid #94b7bc33;border-radius:4px;padding:8px 14px;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}.instrument-label{font-size:7px;max-width:65px}#depth{font-size:24px}.unit{font-size:10px}#zone-label{font-size:7px;max-width:85px;text-align:right}.instrument-track{position:absolute;left:0;bottom:0;width:100%;margin:0}.zone-nav{right:3px;top:39%}.zone-nav a{gap:0;width:30px;min-width:30px}.zone-nav a span{display:none}.zone-nav i{margin-right:11px}.ocean-zone{padding:0 30px 110px 26px;min-height:1030px}.depth-line{font-size:8px;padding-top:16px}.zone-copy{padding-top:85px}.zone-copy .eyebrow{font-size:9px;gap:13px;margin-bottom:22px}h2{font-size:56px}.zone-body{font-size:16px;line-height:1.85;max-width:320px}.creature{width:120%;max-width:none;margin:50px -12% 0}.creature figcaption{margin:0 10%;font-size:10px;gap:8px}.illustration-label{display:none}.twilight .creature{width:100%;margin:20px 0 0}.midnight .creature{width:120%;margin:35px -10% 0}.field-note{margin-top:45px;max-width:100%}.field-note summary{font-size:13px;min-height:48px}.field-note p{font-size:14px;line-height:1.85}.next-depth{left:26px;right:30px;bottom:35px}.finale{padding:95px 26px 85px}.finale .eyebrow{font-size:8px;letter-spacing:.12em}.finale h2{font-size:49px}.finale-body{font-size:16px}#stamps li{font-size:9px;gap:12px}.stamp-status{font-size:8px}.download{width:100%;font-size:13px;gap:15px}.download-hint{font-size:11px}footer{padding:45px 26px 110px}footer p{font-size:12px}.sources a{min-height:44px;display:flex;align-items:center;font-size:11px}.sources{gap:0 20px}[lang="zh-CN"] h1{font-size:clamp(48px,11vw,64px)}[lang="zh-CN"] h2{font-size:49px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
@media(max-width:600px){.zone-nav a{width:44px;min-width:44px}.zone-nav i{margin-right:11px}h2{font-size:clamp(42px,11.8vw,56px)}.hero h1{font-size:clamp(48px,11.8vw,78px)}}