@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Sans+TC:wght@400;500;600;700&family=Noto+Serif+TC:wght@500;600;700&display=swap');
:root{font-family:'Noto Sans TC',sans-serif;color:#f5efdf;background:#071b23;font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #f6c88a;outline-offset:4px}::selection{background:#e3ab65;color:#071b23}
.site-nav{position:absolute;z-index:20;top:0;left:0;width:100%;height:96px;padding:0 clamp(24px,5vw,84px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #f6e2bd35;background:linear-gradient(#061820b0,#06182000)}.wordmark{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:700;letter-spacing:.13em;white-space:nowrap}.wordmark small{display:block;color:#d3b88d;font:9px 'DM Mono',monospace;letter-spacing:.42em;margin-top:2px}.mark{height:27px;width:30px;display:flex;align-items:end;gap:3px;transform:skewY(-14deg)}.mark i{width:7px;display:block;background:#d76750}.mark i:nth-child(1){height:15px}.mark i:nth-child(2){height:25px;background:#e8b979}.mark i:nth-child(3){height:19px;background:#80bdb2}.site-nav nav{display:flex;align-items:center;gap:clamp(20px,3vw,46px)}.site-nav nav a{font-size:12px;font-weight:600;letter-spacing:.12em;color:#e1dfd5}.site-nav nav a:hover{color:#f4c98c}.site-nav .nav-enter{border:1px solid #e7c58d99;padding:13px 19px;color:#f8e8c8}.site-nav .nav-enter span{margin-left:10px;font-size:17px}
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;isolation:isolate}.hero-image,.hero-shade{position:absolute;inset:0;z-index:-2}.hero-image{background:url('./assets/intro/voyage-hero.webp') center center/cover no-repeat;transform-origin:50% 55%;transform:scale(1.12);animation:hero-sea-roll 5.8s ease-in-out infinite;will-change:transform}.hero-shade{z-index:-1;background:linear-gradient(90deg,#05151de8 0%,#061821ad 35%,#081c2340 70%,#09151c40 100%),linear-gradient(0deg,#05161ee0 0%,transparent 31%,transparent 78%,#06192180 100%)}.hero:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background:repeating-linear-gradient(0deg,#ffffff07 0 1px,transparent 1px 4px);opacity:.2;mix-blend-mode:screen}.hero-content{position:relative;z-index:1;padding:130px clamp(24px,7vw,118px) 100px;width:min(100%,1080px);margin-top:50px}.eyebrow,.chapter-label,.hero-edge,.demo-stage-top,.demo-stage-bottom,.note-index,.preview-tag,.chapter-coordinate,.intro-footer{font-family:'DM Mono',monospace;letter-spacing:.17em}.eyebrow{display:flex;align-items:center;gap:13px;color:#f0c68a;font-size:11px;letter-spacing:.21em;animation:fade-up .75s .4s both}.eyebrow-line{height:1px;width:45px;background:#ebb778}.eyebrow-star{font-size:13px;margin:0 2px}.hero h1{font-family:'Noto Serif TC',serif;font-size:clamp(65px,8.8vw,130px);font-weight:600;letter-spacing:-.1em;line-height:1.12;margin:29px 0 30px;text-shadow:0 7px 34px #020b10aa}.hero h1 span,.hero h1 em{display:block;font-style:normal;animation:fade-up .9s both}.hero h1 span{animation-delay:.62s}.hero h1 em{color:#f0be7f;animation-delay:.84s}.hero-content p{color:#ece8db;font-size:clamp(14px,1.35vw,18px);line-height:1.95;letter-spacing:.07em;margin:0;max-width:600px;text-shadow:0 2px 12px #000;animation:fade-up .9s 1s both}.hero-actions{display:flex;align-items:center;gap:35px;margin-top:42px;animation:fade-up .9s 1.2s both}.button-primary,.button-outline{display:inline-flex;align-items:center;justify-content:space-between;gap:34px;min-height:58px;padding:0 24px;font-size:13px;font-weight:700;letter-spacing:.12em;white-space:nowrap;transition:transform .2s,background .2s,border-color .2s}.button-primary{border:1px solid #f1c288;background:#efc086;color:#102b32}.button-primary:hover{background:#ffe0ad;transform:translateY(-3px)}.button-primary span,.button-outline span{font-size:20px;font-weight:400}.button-quiet{font-size:12px;letter-spacing:.15em;color:#f5e7d2;padding:13px 0;border-bottom:1px solid #f5e7d282}.button-quiet span{margin-left:20px}.button-quiet:hover{color:#f3c78b;border-color:#f3c78b}.hero-edge{position:absolute;z-index:1;bottom:30px;left:clamp(24px,5vw,84px);right:clamp(24px,5vw,84px);display:flex;align-items:center;justify-content:space-between;padding-top:18px;border-top:1px solid #f3e4c755;color:#d7c6ac;font-size:9px}.hero-edge span:nth-child(2):before{content:'↓';font-size:16px;vertical-align:middle;margin-right:10px}.hero-letterbox{position:absolute;left:0;right:0;height:8vh;background:#06151c;z-index:10;pointer-events:none;animation:letterbox 1.1s .1s both}.hero-letterbox.top{top:0;transform-origin:top}.hero-letterbox.bottom{bottom:0;transform-origin:bottom}@keyframes letterbox{from{transform:scaleY(1)}to{transform:scaleY(0)}}@keyframes hero-sea-roll{0%,100%{transform:translate3d(-.35%,.25%,0) rotate(-.35deg) scale(1.12)}25%{transform:translate3d(.3%,-.4%,0) rotate(.45deg) scale(1.12)}50%{transform:translate3d(.5%,.1%,0) rotate(.2deg) scale(1.12)}75%{transform:translate3d(-.15%,.45%,0) rotate(-.4deg) scale(1.12)}}@keyframes fade-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.chapter{position:relative;overflow:hidden;isolation:isolate}.chapter-story{min-height:780px;min-height:90svh;display:flex;align-items:center;justify-content:flex-end}.chapter-photo,.chapter-overlay{position:absolute;inset:0;z-index:-2}.chapter-photo{background:url('./assets/intro/chart-room.webp') 50% 50%/cover no-repeat}.chapter-overlay{z-index:-1;background:linear-gradient(90deg,#05171c12 0%,#071b24a6 46%,#071b23f5 100%),linear-gradient(0deg,#071b23 0%,transparent 24%,transparent 78%,#071b23 100%)}.chapter-content{width:min(660px,52%);padding:80px clamp(30px,7vw,120px) 80px 0}.chapter-label{display:flex;align-items:center;gap:14px;color:#e6b87c;font-size:11px;letter-spacing:.18em}.chapter-line{height:1px;width:42px;background:#c99b61;display:inline-block}.chapter h2,.section-heading h2,.atlas-scene h2,.last-scene h2{font-family:'Noto Serif TC',serif;font-weight:600;letter-spacing:-.075em;line-height:1.35}.chapter h2{font-size:clamp(39px,4.2vw,69px);margin:25px 0}.chapter h2 em,.section-heading h2 em,.atlas-scene h2 em,.last-scene h2 em{font-style:normal;color:#e6b87c}.chapter-content p{font-size:15px;line-height:2.2;color:#d8d6ca;margin-bottom:27px}.inline-link{display:inline-flex;align-items:center;gap:24px;padding:10px 0;border-bottom:1px solid #e4b87e;color:#f0c78e;font-size:12px;font-weight:700;letter-spacing:.12em}.inline-link:hover{gap:31px}.inline-link span{font-size:20px}.chapter-coordinate{position:absolute;bottom:30px;left:5vw;color:#e8d7b49e;font-size:9px}
.demo-section{position:relative;padding:clamp(90px,11vw,160px) clamp(24px,6vw,110px);background:radial-gradient(circle at 7% 20%,#23414a 0%,transparent 38%),#071b23}.demo-section:before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#fff1ce07 1px,transparent 1px),linear-gradient(#fff1ce06 1px,transparent 1px);background-size:100px 100px;mask-image:linear-gradient(90deg,transparent,#000 50%,transparent)}.section-heading{position:relative;max-width:900px;margin-bottom:52px}.section-heading h2{font-size:clamp(47px,5.1vw,78px);margin:22px 0 17px}.section-heading p{color:#c4d1cf;font-size:14px;line-height:1.9}.demo-layout{position:relative;display:grid;grid-template-columns:minmax(0,1.48fr) minmax(290px,.62fr);gap:28px;align-items:stretch;max-width:1480px;margin:0 auto}.demo-stage{padding:21px;background:#122d35;border:1px solid #a7885b;box-shadow:0 22px 60px #0005,inset 0 0 0 5px #173742}.demo-stage-top,.demo-stage-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#d0bd96;font-size:10px}.demo-stage-top{margin-bottom:16px}.demo-stage-top>span:last-child{color:#e5d7b8}.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#c7805e;vertical-align:middle;margin-right:4px}.is-playing .live-dot{box-shadow:0 0 10px #e7b074;animation:blink 1s infinite}@keyframes blink{50%{opacity:.25}}.demo-flag-wrap{position:relative;aspect-ratio:640/427;background:#c5af88;overflow:hidden}.demo-flag-wrap canvas{display:block;width:100%;height:100%}.flag-corner{position:absolute;width:16px;height:16px;border-color:#fff0d4;border-style:solid}.flag-corner.tl{left:0;top:0;border-width:2px 0 0 2px}.flag-corner.tr{right:0;top:0;border-width:2px 2px 0 0}.flag-corner.bl{left:0;bottom:0;border-width:0 0 2px 2px}.flag-corner.br{right:0;bottom:0;border-width:0 2px 2px 0}.demo-stage-bottom{margin-top:17px}.demo-timeline{display:flex;gap:10px;flex:1;max-width:410px}.timeline-part{display:flex;flex-direction:column;gap:7px;flex:1}.timeline-part span{font-size:9px}.timeline-part i{height:3px;background:#e8cc9a30;position:relative;overflow:hidden}.timeline-part i:after{content:'';position:absolute;inset:0;background:#e8bd7d;transform:scaleX(var(--progress,0));transform-origin:left}.demo-notes{padding:35px 30px 28px;display:flex;flex-direction:column;align-items:flex-start;background:linear-gradient(150deg,#233c3b,#17333a);border:1px solid #a7885b}.note-index{font-size:10px;color:#e8bb7d}.demo-wave{display:flex;align-items:center;gap:6px;height:84px;margin:30px 0 4px}.demo-wave i{width:3px;height:calc(12px + (var(--n) * 5px));max-height:70px;background:#dfb474;opacity:.8;transform-origin:center}.demo-wave i:nth-child(4n+1){--n:6}.demo-wave i:nth-child(4n+2){--n:2}.demo-wave i:nth-child(4n+3){--n:9}.demo-wave i:nth-child(4n){--n:4}.is-playing .demo-wave i{animation:wave 1.1s ease-in-out infinite alternate;animation-delay:calc(var(--n) * -70ms)}@keyframes wave{to{transform:scaleY(.35)}}.demo-notes h3{font-family:'Noto Serif TC',serif;font-size:clamp(29px,3vw,43px);font-weight:600;line-height:1.45;letter-spacing:-.07em;margin:22px 0 10px}.demo-notes p{font-size:13px;line-height:1.95;color:#c9d5cc;margin:0 0 28px}.demo-notes .button-primary{width:100%;margin-top:auto}.demo-notes .inline-link{margin-top:22px}
.atlas-scene{display:grid;grid-template-columns:.72fr 1.28fr;gap:6vw;align-items:center;padding:130px clamp(24px,6vw,110px);background:#e7dcc4;color:#243b3b;overflow:hidden}.atlas-scene .chapter-label{color:#8b573d}.atlas-scene .chapter-line{background:#a36b49}.atlas-scene h2{font-size:clamp(48px,5.4vw,84px);margin:24px 0}.atlas-scene h2 em{color:#a65a39}.atlas-scene p{max-width:380px;color:#536761;font-size:15px;line-height:2;margin:0 0 35px}.button-outline{border:1px solid #375346;color:#29483f}.button-outline:hover{background:#304d42;color:#f8ead0;transform:translateY(-3px)}.atlas-preview{display:block;position:relative;padding:11px;background:#755e3e;box-shadow:0 30px 60px #453b2c60;transform:rotate(-1.2deg);transition:transform .35s}.atlas-preview:hover{transform:rotate(0deg) translateY(-5px)}.atlas-preview img{display:block;width:100%;height:auto}.preview-tag{position:absolute;bottom:25px;right:25px;padding:10px 12px;background:#172e2acc;color:#f1dbb1;font-size:9px}.last-scene{min-height:560px;display:flex;align-items:center;justify-content:center;text-align:center;padding:100px 24px;background:linear-gradient(#071b23da,#071b23eb),url('./assets/intro/voyage-hero.webp') center 65%/cover no-repeat}.last-scene-inner{max-width:900px}.last-scene .chapter-label{justify-content:center}.last-scene h2{font-size:clamp(42px,5vw,72px);margin:22px 0}.last-scene p{color:#d8d9cc;font-size:15px;margin:0 0 34px}.intro-footer{min-height:94px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px clamp(24px,6vw,110px);color:#aab8ae;background:#071b23;border-top:1px solid #d9b67d55;font-size:10px}.intro-footer a{color:#e8bd82}.intro-footer a:hover{text-decoration:underline}
[data-reveal]{opacity:0;transform:translateY(35px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}[data-reveal].revealed{opacity:1;transform:translateY(0)}
@media(max-width:1000px){.chapter-content{width:62%}.demo-layout{grid-template-columns:1fr .65fr}.atlas-scene{gap:35px}}
@media(max-width:800px){.site-nav{height:76px;padding:0 24px}.site-nav nav a:not(.nav-enter){display:none}.hero-content{padding-left:6vw;padding-right:6vw}.chapter-story{min-height:700px}.chapter-overlay{background:linear-gradient(0deg,#071b23e8,#071b2366 70%),linear-gradient(90deg,#071b2344,#071b23ad)}.chapter-content{width:100%;padding:120px 6vw 80px;align-self:end}.demo-layout,.atlas-scene{grid-template-columns:1fr}.demo-notes{min-height:350px}.atlas-scene{padding-top:95px;padding-bottom:100px}.atlas-preview{margin:12px 5px}}
@media(max-width:600px){.site-nav{height:68px;padding:0 19px}.wordmark{font-size:11px;gap:7px}.wordmark small{font-size:7px}.mark{transform:scale(.8) skewY(-14deg);transform-origin:left center;width:24px}.site-nav .nav-enter{padding:10px 12px;font-size:10px}.site-nav .nav-enter span{margin-left:3px}.hero{min-height:100svh}.hero-image{background-position:62% center}.hero-shade{background:linear-gradient(90deg,#04151ddd,#04151d65 84%),linear-gradient(0deg,#061820e8,transparent 34%,#06182055 80%)}.hero-content{margin-top:15px;padding:95px 22px 90px}.eyebrow{font-size:8px;gap:8px}.eyebrow-line{width:26px}.hero h1{font-size:clamp(53px,14vw,77px);margin:20px 0 24px;line-height:1.18}.hero-content p{font-size:13px}.hero-actions{gap:22px;margin-top:32px;flex-wrap:wrap}.button-primary,.button-outline{min-height:52px;padding:0 16px;gap:20px;font-size:11px}.button-quiet{font-size:11px}.button-quiet span{margin-left:8px}.hero-edge{left:20px;right:20px;bottom:18px;font-size:8px}.hero-edge span:nth-child(3){display:none}.chapter-story{min-height:690px}.chapter-photo{background-position:38% center}.chapter-content{padding:160px 22px 70px}.chapter h2{font-size:clamp(35px,9vw,52px)}.chapter-content p{font-size:12px}.chapter-coordinate{left:22px;font-size:8px;bottom:15px}.chapter-label{font-size:9px;gap:9px}.chapter-line{width:24px}.demo-section{padding:80px 16px 90px}.section-heading{margin-bottom:30px}.section-heading h2{font-size:clamp(42px,10vw,56px)}.section-heading p{font-size:12px}.demo-layout{gap:14px}.demo-stage{padding:12px}.demo-stage-top,.demo-stage-bottom{font-size:8px}.demo-stage-top{margin-bottom:9px}.demo-stage-bottom{margin-top:10px}.demo-timeline{gap:5px}.timeline-part span{font-size:7px}.demo-notes{padding:25px;min-height:330px}.demo-wave{margin:18px 0 0;height:60px}.demo-notes h3{font-size:32px}.atlas-scene{padding:80px 20px 88px}.atlas-scene h2{font-size:52px}.atlas-scene p{font-size:12px}.preview-tag{font-size:7px;bottom:18px;right:18px}.last-scene{min-height:480px}.last-scene h2{font-size:44px}.last-scene p{font-size:12px}.intro-footer{flex-wrap:wrap;padding:25px 20px;font-size:8px}.intro-footer span:nth-child(2){display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-image{animation:none!important;transform:scale(1.12)}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}[data-reveal]{opacity:1;transform:none}}