:root{color-scheme:light;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:#fff;background:#087b94;font-synthesis:none;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
body{margin:0;min-width:320px;min-height:100svh;display:flex;flex-direction:column;background:radial-gradient(ellipse at 79% 4%,#98dcd67a 0,transparent 42%),radial-gradient(ellipse at 6% 53%,#127395 0,transparent 60%),linear-gradient(145deg,#128f9f 0%,#086681 65%,#064960 100%)}
a{color:inherit;text-decoration:none}
.scenery{position:fixed;inset:0;overflow:hidden;pointer-events:none}
.scenery::after{content:"";position:absolute;inset:0;opacity:.055;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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.6' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.sunlight{position:absolute;width:600px;height:600px;right:-120px;top:-310px;border-radius:50%;border:1px solid #d9fff224;box-shadow:0 0 0 70px #d9fff206,0 0 0 140px #d9fff205,0 0 0 210px #d9fff204}
.masthead{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:28px 42px}
.wordmark{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:600;letter-spacing:1px}
.brand-mark{display:flex;align-items:center;justify-content:center;border:1px solid #ffffff61;border-radius:50%;width:39px;height:39px;font-family:Georgia,serif;font-size:21px;letter-spacing:-4px;padding-right:4px;color:#ffe58a}
.brand-mark span{font-size:16px;transform:translateY(4px)}
.wordmark small{display:block;margin-top:5px;font-size:9px;letter-spacing:1.5px;font-weight:400;color:#c0e2e7}
.location{font-size:11px;letter-spacing:2px;color:#daeff1}.location>span{margin-right:9px;color:#ffe18c;font-size:17px}
main{position:relative;z-index:1;flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:8px 20px 26px}
.portal{width:504px;max-width:100%;padding:12px;border:1px solid #ffffff55;border-radius:26px;background:linear-gradient(145deg,#f6ffff23,#eaffff0d);box-shadow:0 25px 75px #00334638,inset 0 1px 0 #ffffff26;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);animation:arrive .7s ease-out both}
.postcard{position:relative;aspect-ratio:2.04;overflow:hidden;border-radius:17px;background:#80cdd5}
.postcard::after{content:"";position:absolute;inset:50% 0 0;background:linear-gradient(transparent,#173d4754)}
.postcard img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 52%}
.postcard-label{position:absolute;left:16px;top:15px;display:flex;align-items:center;gap:6px;padding:7px 10px;background:#f9ffffe8;color:#286069;border-radius:30px;font-size:10px;letter-spacing:1px;box-shadow:0 2px 12px #003a4910}
.postcard-label>span{width:5px;height:5px;background:#268b7d;border-radius:50%}
.postcard-caption{position:absolute;left:17px;right:17px;bottom:14px;z-index:1;display:flex;justify-content:space-between;font-size:11px;letter-spacing:2px;text-shadow:0 1px 5px #233e45}.postcard-caption>span{font-size:15px;color:#fff0b3}
.card-content{padding:24px 32px 9px;text-align:center}
.eyebrow{margin:0 0 10px;color:#d2eeec;font-size:10px;letter-spacing:3px}
h1{font-size:36px;line-height:1.35;letter-spacing:3px;font-weight:750;margin:0;text-shadow:0 2px 12px #083e4310}h1>span{color:#ffe28b}
.english-title{margin:10px 0 0;font-size:10px;letter-spacing:3.2px;color:#d0e9ee}
.divider{display:flex;align-items:center;gap:11px;justify-content:center;margin:20px 0 21px;color:#e8dca5;font-size:10px}.divider span{height:1px;width:36px;background:#d1edf13b}
.loading-heading{display:flex;align-items:center;justify-content:space-between;color:#e1f1f3;font-size:11px;letter-spacing:1px;margin-bottom:11px}
.percent{font-size:16px;font-variant-numeric:tabular-nums;color:#ffe9a7;letter-spacing:.5px;line-height:1}.percent small{font-size:10px;margin-left:3px}
.progress{height:6px;border-radius:10px;background:#032f4a40;box-shadow:inset 0 1px 2px #072c3b20;overflow:hidden}
.progress-fill{height:100%;width:100%;transform:scaleX(0);transform-origin:left;border-radius:inherit;background:linear-gradient(90deg,#ffcf61,#ffeaa3);box-shadow:0 0 14px #ffdf8899}
.status{font-size:12px;line-height:1.6;margin:15px 0 0;min-height:20px;letter-spacing:.4px;color:#fff3d5}
.redirect-note{font-size:10px;line-height:1.6;color:#c4e1e7;margin:8px 0 20px;letter-spacing:.4px}
.go-button{display:flex;align-items:center;justify-content:center;gap:23px;min-height:47px;padding:12px 14px;border-radius:12px;background:linear-gradient(110deg,#ffe69e,#ffcd65);color:#3f4230;box-shadow:0 5px 22px #003a4930,inset 0 1px 0 #ffffff70;font-size:12px;font-weight:650;letter-spacing:.6px;transition:transform .2s,box-shadow .2s,filter .2s}
.go-button:hover{transform:translateY(-2px);box-shadow:0 8px 26px #003a4945;filter:brightness(1.05)}.go-button:active{transform:translateY(0)}a:focus-visible{outline:3px solid white;outline-offset:5px}.button-arrow{font-size:20px;line-height:1}
.destination{display:flex;align-items:center;justify-content:center;gap:7px;font-size:9px;color:#c0dfe4;letter-spacing:.5px;margin:13px 0 4px}.destination>span[lang]{letter-spacing:1px}.destination-dot{height:4px;width:4px;border-radius:50%;background:#b0ded8}
.sea-message{font-size:10px;color:#cae5e8;letter-spacing:2px;margin:22px 0 0;text-align:center;line-height:1.8}
footer{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:16px 42px 24px;color:#c2dfe5;font-size:9px;letter-spacing:1px;gap:12px}.footer-signature{font-size:8px;letter-spacing:2px;color:#9ec9d3}
.ocean{position:absolute;bottom:0;left:0;width:100%;height:32vh;min-height:180px}.wave{animation:swell 18s linear infinite}.wave-back{fill:#4bbab833}.wave-middle{fill:#89d2c22b;animation-duration:24s;animation-direction:reverse}.wave-front{fill:#b4e4d222;animation-duration:30s}
.egret{position:absolute;width:65px;fill:#e7f8f1;opacity:.6;animation:glide 10s ease-in-out infinite}.egret-one{left:15%;top:26%;transform:rotate(-8deg)}.egret-two{width:35px;right:17%;top:49%;opacity:.35;animation-delay:-4s}
.petals i{position:absolute;top:-25px;left:12%;width:10px;height:17px;border-radius:90% 10% 75% 25%;background:#f1a7b1;opacity:0;animation:drift 17s linear infinite;animation-delay:-2s}.petals i:nth-child(2){left:82%;width:8px;height:13px;animation-duration:22s;animation-delay:-8s}.petals i:nth-child(3){left:25%;width:7px;height:12px;animation-delay:-12s}.petals i:nth-child(4){left:92%;animation-duration:19s;animation-delay:-5s}.petals i:nth-child(5){left:4%;width:6px;height:11px;animation-delay:-15s}.petals i:nth-child(6){left:72%;width:7px;height:12px;animation-duration:24s;animation-delay:-19s}
.noscript-note{font-size:11px;line-height:1.6;color:#fff0b6;margin-top:14px}
@keyframes arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes swell{to{transform:translateX(-720px)}}
@keyframes glide{0%,100%{translate:0 0}50%{translate:22px -12px}}
@keyframes drift{0%{transform:translate(0,-20px) rotate(0);opacity:0}10%,85%{opacity:.45}100%{transform:translate(90px,110vh) rotate(280deg);opacity:0}}
@media(min-width:1500px) and (min-height:950px){.portal{width:550px}.postcard{aspect-ratio:1.95}.card-content{padding:30px 39px 16px}h1{font-size:40px}.divider{margin:24px 0}.go-button{min-height:52px}}
@media(max-width:600px){.masthead{padding:20px 22px 22px}.wordmark{font-size:12px;gap:9px}.brand-mark{width:33px;height:33px;font-size:18px}.wordmark small{font-size:8px;letter-spacing:.6px}.location{font-size:9px;letter-spacing:.5px}.location>span{margin-right:4px;font-size:14px}main{padding:6px 20px 20px}.portal{padding:10px;border-radius:23px}.postcard{aspect-ratio:1.85;border-radius:14px}.postcard-label{left:12px;top:12px;font-size:9px}.card-content{padding:23px 15px 9px}h1{font-size:30px;letter-spacing:2px}.english-title{font-size:8px;letter-spacing:2.3px}.eyebrow{font-size:9px;letter-spacing:2px}.divider{margin:17px 0 19px}.redirect-note{font-size:9px}.go-button{font-size:11px;gap:12px}.sea-message{font-size:9px;letter-spacing:1.1px;margin-top:20px}footer{justify-content:center;padding:12px 20px 22px;font-size:8px}.footer-signature{display:none}.egret-one{left:4%;top:20%}.egret-two{right:3%;top:70%}}
@media(max-width:360px){.location{display:none}h1{font-size:26px}.card-content{padding-inline:12px}.go-button{font-size:10px;gap:8px}.status{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.petals{display:none}.go-button:hover{transform:none}}
