@import url('assets/fonts/fonts.css');
:root{--blue:#0649ed;--navy:#031443;--cyan:#78faff;--white:#f6ffff;--font:'Barlow Condensed','Arial Narrow',Impact,sans-serif;--body:'Noto Sans SC','Microsoft YaHei',sans-serif}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--blue);color:var(--white);font-family:var(--body)}body{overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:0;cursor:pointer;background:none}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid #fcff8b;outline-offset:7px}button:disabled{cursor:default}::selection{background:#fa84b9;color:var(--navy)}[hidden]{display:none!important}.micro,.eyebrow{font-family:var(--font);font-size:12px;letter-spacing:2px;font-weight:600}
.world{position:fixed;inset:0;overflow:hidden;background:#fff}
.ocean-fallback{position:absolute;inset:0;background:#fff}
.ui-ready .ocean-fallback{background:linear-gradient(135deg,#59eafa,#0575df 55%,#0509a1)}
.video-stage{position:absolute;inset:0;visibility:hidden}
.media-active .video-stage{visibility:visible}
.world video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;visibility:hidden;opacity:1;transform:none;transition:none}
#dive{z-index:2}
#ocean{z-index:1}
.world-shade{position:absolute;inset:0;z-index:3;opacity:0;background:linear-gradient(90deg,transparent 50%,rgba(0,25,109,.04) 65%,rgba(0,20,105,.16));transition:opacity .8s}
.ui-ready .world-shade{opacity:1}
/* Adapted from p3re.jp top CSS: fv-overlay and particle. */
.fv-overlay{width:100%;height:100%;position:absolute;bottom:0;left:-8%;overflow:hidden;z-index:4;pointer-events:none;opacity:0;transition:opacity 1s}
.fv-overlay .particle{position:absolute;bottom:0;left:0;width:100%;height:max(100%,56.25vw);mix-blend-mode:screen}
.ui-ready .fv-overlay{opacity:1}

.interface{position:relative;height:100svh;min-height:660px;isolation:isolate}.header{height:125px;position:absolute;left:4%;right:5%;top:0;display:flex;align-items:center;justify-content:space-between;gap:20px;z-index:3}.brand{display:flex;align-items:center;gap:13px;color:#1d384a;transform:rotate(-3deg)}.brand-icon{font:900 italic 48px/.8 var(--font);letter-spacing:-4px;transform:skew(-7deg);display:block;width:65px}.brand-icon span{color:#1d384a;font-size:48px}.brand-name{font:800 23px/1 var(--font);letter-spacing:2px}.brand-name>span{display:block;font-size:9px;letter-spacing:2.2px;margin-top:6px;font-weight:600}.header-center{display:none}.header-center i{display:inline-block;height:5px;width:5px;background:var(--cyan);margin-right:7px;box-shadow:0 0 12px var(--cyan)}.date{display:flex;align-items:center;gap:9px;color:#e4ffff;transform:rotate(-5deg)}.date>strong{font:800 italic 57px/.8 var(--font);letter-spacing:-2px}.date>strong span{font-size:41px;font-weight:500;margin:0 2px}.date>div{display:flex;flex-direction:column;gap:2px}.date b{font:800 23px/.9 var(--font)}.date>div span{font:700 9px var(--font);letter-spacing:1px}.date svg{width:38px;height:38px;fill:#caffff;margin-left:9px}
.welcome{position:absolute;right:8%;top:22%;text-align:right;transform:rotate(5deg);transform-origin:right center}.eyebrow{color:var(--cyan);font-size:11px;letter-spacing:1.8px}.welcome .eyebrow>span{border:1px solid #6feaff88;padding:2px 5px;margin-right:7px}.welcome p{font-size:13px;line-height:1.8;letter-spacing:2px;margin:14px 0 0;color:#d5f9ff}.main-menu{position:absolute;right:7%;top:36%;width:42%;z-index:2;display:flex;flex-direction:column;align-items:flex-end;gap:2px}.menu-item{position:relative;display:flex;align-items:center;text-align:left;width:max-content;max-width:100%;padding:0 31px 0 15px;height:clamp(49px,6.9vh,76px);transform:translateX(var(--offset)) rotate(var(--rotate));transform-origin:right center;transition:transform .2s,color .15s;color:#7ef7ff;isolation:isolate;white-space:nowrap}.menu-item:nth-child(2n){color:#b0fbff}.menu-item:before,.menu-item:after{content:'';position:absolute;inset:4px -2px 1px -5px;z-index:-1;opacity:0;transition:opacity .15s,transform .2s;clip-path:polygon(0 0,96% 9%,100% 100%,3% 89%)}.menu-item:before{background:#ff80b7;transform:translate(6px,5px) rotate(2deg)}.menu-item:after{background:var(--white)}.menu-item.selected{color:#073b9c;transform:translateX(calc(var(--offset) - 10px)) rotate(var(--rotate)) scale(1.035)}.menu-item.selected:after,.menu-item.selected:before{opacity:1}.menu-number{font:600 12px var(--font);margin:8px 12px 0 0;opacity:.65}.menu-word{font:800 italic clamp(45px,5.3vw,78px)/.9 var(--font);letter-spacing:-1.6px}.menu-cn{font-size:10px;letter-spacing:2px;margin:18px 0 0 17px;font-weight:600}.menu-arrow{font:500 23px var(--font);margin:10px 0 0 17px;opacity:0}.selected .menu-arrow{opacity:1}.home-caption{position:absolute;right:7%;bottom:15.7%;display:flex;gap:12px;align-items:center;transform:rotate(5deg);text-align:right;transform-origin:right center}.small-cross{font-size:35px;line-height:1}.home-caption .eyebrow{font-size:10px;letter-spacing:1px}.home-caption p{font-size:10px;letter-spacing:1px;margin:5px 0 0;color:#b8eaff}.footer{position:absolute;bottom:39px;left:55%;right:4.2%;height:65px;border-top:1px solid #99e5ff50;display:flex;align-items:center;justify-content:space-between;gap:18px}.footer-left{display:none}.footer-emblem{font-size:37px;color:var(--cyan)}.footer-left>div{display:flex;flex-direction:column;gap:3px}.footer-left strong{font:700 15px var(--font);letter-spacing:2px}.footer-left>div>span{font-size:9px;letter-spacing:1px;color:#a9d6ff}.menu-description{font-size:10px;letter-spacing:1px;color:#d8f5ff;margin-right:auto}.controls{display:flex;align-items:center;gap:18px;white-space:nowrap}.controls button{display:flex;gap:7px;align-items:center;font:600 10px var(--font);letter-spacing:1px;padding:8px 0}.controls button:hover{color:var(--cyan)}.key-help{display:none}kbd{font:11px var(--font);border:1px solid #a0dfff77;border-radius:2px;min-width:15px;padding:0 3px;text-align:center;line-height:17px}.key-help kbd:last-child{margin-left:5px}.sound-bars{height:12px;display:flex;gap:2px;align-items:center}.sound-bars i{width:2px;background:currentColor;height:6px}.sound-bars i:nth-child(2){height:12px}.sound-bars i:nth-child(3){height:9px}.sound-bars i:nth-child(4){height:4px}button[aria-pressed=true]{color:var(--cyan)}.bottom-line{position:absolute;left:55%;right:4.2%;bottom:15px;display:flex;justify-content:space-between;font:500 9px var(--font);letter-spacing:1.4px;color:#96c2ff}.bottom-line button{font:inherit;letter-spacing:inherit;padding:0}.bottom-line button:hover{color:white}
.detail{position:absolute;z-index:4;right:4.2%;top:18%;bottom:16%;width:43%;background:rgba(1,25,103,.96);backdrop-filter:blur(18px);border:1px solid #72e9ff70;box-shadow:12px 12px 0 #0037c44d;padding:24px 30px 0;animation:panel-in .45s cubic-bezier(.2,.8,.2,1) both;display:flex;flex-direction:column}.detail:before{content:'';position:absolute;width:72px;height:4px;top:-2px;left:30px;background:var(--cyan)}.panel-head{display:flex;justify-content:space-between;align-items:center;flex-shrink:0;margin-bottom:20px;color:var(--cyan)}.close-button{font-size:10px;letter-spacing:1px;padding:8px 0}.close-button span{font:500 10px var(--font);border:1px solid #7deeff77;padding:2px 4px;margin-left:6px}.detail-scroll{overflow:auto;padding-right:8px;scrollbar-width:thin;scrollbar-color:#6eedff #0a2a77;flex:1;min-height:0}.detail h1{font:800 italic clamp(38px,4.4vw,65px)/1 var(--font);letter-spacing:-1px;margin:0 0 24px;color:#fff;outline:0}.detail h2{font-size:21px;letter-spacing:2px;margin:0 0 9px}.detail h3{font-size:16px;line-height:1.4;margin:5px 0 11px;letter-spacing:1px}.detail p{font-size:12px;line-height:2;color:#c3e0ff;letter-spacing:.5px;margin:13px 0}.detail .role{font:600 11px var(--font);letter-spacing:2px;color:var(--cyan);margin:0 0 27px}.placeholder-label{display:inline-block;border:1px solid #97e6ff55;font-size:9px;padding:3px 6px;letter-spacing:1px;color:#9bcff0;margin-bottom:16px}.detail .lead{font-size:15px;color:#fff}.tags{display:flex;gap:8px;flex-wrap:wrap;margin:25px 0}.tags span{font-size:10px;color:var(--cyan);border:1px solid #69deff55;padding:6px 10px}.now{border-top:1px solid #6ddaff33;padding-top:17px;margin-top:24px}.now>span{font:600 11px var(--font);letter-spacing:2px;color:#7bf4ff}.panel-foot{display:flex;justify-content:space-between;align-items:center;min-height:45px;font:500 9px var(--font);letter-spacing:1.6px;color:#75c8ee;border-top:1px solid #69deff33;margin-top:16px}.panel-foot>span:last-child{font-size:24px}.work-row{border-top:1px solid #8cdfff40;position:relative;padding:18px 2px 14px 42px}.work-num{font:700 italic 24px var(--font);position:absolute;left:0;color:#67edff}.category{font:600 10px var(--font);letter-spacing:1.4px;color:#72e9ff}.work-row h3{margin-top:7px}.work-row p{margin:0 0 10px;font-size:11px}.muted{color:#a3c0d4!important;font-size:10px!important}.work-row a,.contact-link{font:600 12px var(--font);letter-spacing:1px;color:#9ffbff}.journal-entry{border-top:1px solid #8cdfff40;padding:20px 0}.journal-entry summary{cursor:pointer;list-style:none;position:relative;padding-right:25px}.journal-entry summary::-webkit-details-marker{display:none}.journal-entry summary:after{content:'+';position:absolute;right:1px;top:15px;font:500 25px var(--font);color:var(--cyan)}.journal-entry[open] summary:after{content:'−'}.journal-entry h3{margin:8px 0}.journal-entry summary p{margin:0;font-size:11px}.journal-body{white-space:pre-line;border-left:2px solid #74edff;padding-left:14px;margin-top:20px!important}.contact-feature{padding:24px 0;border-top:1px solid #83eaff55;border-bottom:1px solid #83eaff55;margin-top:26px}.contact-feature strong{font:800 italic 32px var(--font);letter-spacing:1px}.contact-feature p{margin-bottom:0}.contact-links{display:flex;flex-direction:column;margin-top:20px}.contact-links>div,.contact-links>a{display:flex;justify-content:space-between;padding:13px 0;font:600 13px var(--font);letter-spacing:2px;border-bottom:1px solid #93e5ff26}.contact-links span{font:400 10px var(--body);letter-spacing:0;color:#aacbe9}

/* Opaque white title screen, covered by blue until both video first frames load. */
.intro{position:fixed;inset:0;z-index:20;overflow:hidden;background:#fff;color:#1d384a}
.intro-copy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;opacity:1;transition:opacity .6s;pointer-events:none}
.intro h1{margin:0 0 22px;width:251px;height:30px}
.intro h1 img{display:block;width:100%;height:100%}
.intro-copy p{margin:0;color:#1d384a;font:400 10px/1.5 Urbanist,Arial,sans-serif;letter-spacing:0}
.water{position:absolute;top:0;left:0;width:100%;height:100%;background:#029eeb;transform:translateY(0);z-index:2;transition:transform 2.5s cubic-bezier(.03,.1,.25,1.02)}
.water .waves{position:absolute;top:-10vh;left:0;width:100%;height:10vh;margin-bottom:-7px}
.wave-layers>use{animation:move-waves 20s cubic-bezier(.55,.5,.45,.5) infinite}
.wave-layers>use:nth-child(1){animation-delay:-.5s;animation-duration:3s}
.wave-layers>use:nth-child(2){animation-delay:-1s;animation-duration:5.5s}
.wave-layers>use:nth-child(3){animation-delay:-4s;animation-duration:13s}
.wave-layers>use:nth-child(4){animation-delay:-5s;animation-duration:20s}
.intro.draining .water{transform:translateY(110%)}
.intro.text-out .intro-copy{opacity:0}
.intro.is-fading{background-color:transparent;transition:background-color .5s;pointer-events:none}
.intro.is-playing .water{visibility:hidden}
.ui-ready .intro .skip{visibility:hidden}
.skip{position:absolute;right:4.4%;bottom:5%;z-index:4;display:flex;align-items:center;gap:16px;font-size:10px;letter-spacing:1px;color:#fff;text-shadow:0 1px 5px #003d87;pointer-events:auto}
.skip span{font:600 11px var(--font);letter-spacing:2px}
.booting .interface{visibility:hidden}
.entering .header,.entering .welcome,.entering .home-caption,.entering .footer,.entering .bottom-line{animation:ui-in .8s .2s both}
.entering .menu-item{animation:menu-in .65s calc(.25s + var(--i)*.075s) cubic-bezier(.2,.8,.2,1) both}
.has-detail .main-menu,.has-detail .welcome,.has-detail .home-caption{visibility:hidden}
.no-script{position:fixed;inset:0;background:#0345c8;z-index:100;padding:30vh 10%;font-size:24px}

dialog{background:#032972;color:#eaffff;border:1px solid #61e1ff;max-width:540px;width:calc(100% - 40px);padding:35px;box-shadow:15px 15px 0 #00184d77}dialog::backdrop{background:#00102dcc;backdrop-filter:blur(8px)}dialog .close-button{float:right}dialog h2{font-size:25px;margin:20px 0}dialog p{font-size:12px;line-height:2;color:#c3e5fa}dialog a{display:block;font:600 13px var(--font);color:#83f6ff;letter-spacing:1px;line-height:2.8}

@keyframes move-waves{from{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}
@keyframes ui-in{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes menu-in{from{opacity:0;translate:100px 30px}to{opacity:1;translate:0 0}}
@keyframes panel-in{from{opacity:0;transform:translate(40px,10px)}to{opacity:1;transform:translate(0)}}
.reduced-motion *,.reduced-motion *:before,.reduced-motion *:after{animation:none!important;transition:none!important}
.reduced-motion #dive{display:none}
.reduced-motion .intro{display:none}


@media(min-width:1600px){.menu-word{font-size:85px}.main-menu{width:43%}}
@media(max-height:760px) and (min-width:801px){
  .interface{min-height:580px}.header{height:100px}.welcome{top:19%}.welcome p{font-size:11px;margin-top:9px}
  .main-menu{top:34%}.menu-item{height:49px}.menu-word{font-size:57px}.home-caption{bottom:17%}.detail{top:19%;bottom:18%}
}
@media(max-width:1200px) and (min-width:801px){
  .brand{gap:8px}.brand-name{font-size:19px}.brand-name>span{font-size:7px}.brand-icon{font-size:45px;width:43px}.brand-icon span{font-size:34px}
  .date>strong{font-size:45px}.date b{font-size:19px}.date svg{width:28px;margin-left:0}
  .main-menu{right:6%;width:47%}.menu-word{font-size:58px}.menu-cn{margin-left:9px}.menu-arrow{margin-left:10px}.menu-item{padding-right:20px}
  .welcome,.home-caption{right:7%}.footer,.bottom-line{left:54%}.controls{gap:14px}.menu-description{display:none}.bottom-line>span:last-child{display:none}
  .detail{width:45%;padding:24px 23px 0}
}
@media(max-width:800px){
  body{overflow:hidden}.interface{min-height:580px;height:100svh}
  .world video{object-position:center;object-fit:cover;transform:none;opacity:1}
  .world-shade{background:linear-gradient(0deg,rgba(0,12,80,.2),transparent 28%)}
  .fv-overlay{left:0}.fv-overlay .particle{height:100%;object-fit:cover;object-position:center}
  .header{left:6%;right:6%;height:95px;gap:10px}.brand{gap:8px}.brand-icon{font-size:39px;width:37px;letter-spacing:-10px}.brand-icon span{font-size:30px}
  .brand-name{font-size:18px;letter-spacing:1px}.brand-name>span{font-size:7px;letter-spacing:1px}
  .date{color:#1d384a;transform:rotate(4deg)}.date>strong{font-size:35px;letter-spacing:-1px}.date>strong span{font-size:27px}.date>div,.date svg{display:none}
  .brand-icon{width:44px;font-size:34px;letter-spacing:-3px}.brand-icon span{font-size:34px}
  .welcome{left:6%;right:auto;top:14%;width:80%;color:#1d384a;transform:none;text-align:left}.welcome .eyebrow{font-size:9px;letter-spacing:1px;color:#125bb0}.welcome .eyebrow>span{margin-right:3px;border-color:#125bb055}.welcome p{display:none}
  .main-menu{left:6%;right:auto;top:22%;width:80%;gap:0;align-items:flex-start}
  .menu-item{--offset:0px!important;height:clamp(36px,5.6svh,48px);padding:0 7px;color:#135ab0;max-width:none}.menu-item:nth-child(2n){color:#1d384a;--offset:8px!important}.menu-word{font-size:clamp(32px,9vw,46px);letter-spacing:-.7px}
  .menu-item:before{background:#ff657e}.menu-item:after{background:#1d384a}.menu-item.selected{color:#fff;transform:translateX(calc(var(--offset) - 4px)) rotate(var(--rotate)) scale(1.025)}
  .menu-number{font-size:9px;margin:7px 7px 0 0}.menu-cn{font-size:8px;letter-spacing:0;margin:8px 0 0 8px}.menu-arrow{font-size:18px;margin:8px 0 0 8px}
  .home-caption{display:none}
  .footer{left:6%;right:6%;bottom:43px;height:42px;gap:10px;border-color:#99e5ff66}.menu-description{display:none}.controls{width:100%;justify-content:flex-end;gap:24px}.controls button{font-size:10px;letter-spacing:1px}
  .bottom-line{left:6%;right:6%;bottom:23px;font-size:8px;letter-spacing:.6px}.bottom-line>span:last-child{display:none}
  .detail{top:16%;left:6%;right:6%;bottom:18%;width:auto;padding:24px 24px 0;background:#032473f5}.detail h1{font-size:48px}
  .intro h1{width:251px;height:30px}.intro-copy p{font-size:10px}.skip{bottom:5%}
}
@media(max-width:380px){
  .brand-name{font-size:15px}.brand-icon{font-size:34px;width:32px}.brand-icon span{font-size:26px}.date>strong{font-size:30px}
  .main-menu{right:7%}.menu-word{font-size:35px}.menu-arrow{margin-left:5px}.detail{padding:20px 18px 0}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}.intro{display:none}}