@charset "UTF-8";
[hidden]{display:none!important}
:root{--paper:#f5f8f7;--ink:#173b43;--muted:#63797d;--line:#dbe5e3;--sea:#117f8b;--white:#fff;--body-font:"Segoe UI","Microsoft YaHei UI","PingFang SC",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;color:var(--ink);background:var(--paper);font:15px/1.7 var(--body-font);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button{border:0}img{display:block;max-width:100%}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #087b8c;outline-offset:5px}::selection{background:#b6e4df;color:#173b43}.content-width{max-width:1240px;margin-inline:auto;padding-inline:36px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:absolute;left:20px;top:-100px;background:white;padding:10px 20px;z-index:100}.skip-link:focus{top:10px}
.site-header{height:88px;display:flex;align-items:center;justify-content:space-between;padding:0 42px;max-width:1600px;margin:auto;gap:24px}.brand{display:inline-flex;gap:10px;align-items:center;font-size:23px;font-weight:650;letter-spacing:-.7px;white-space:nowrap}.brand-mark{width:36px;height:36px}.site-header nav{display:flex;gap:32px;align-items:center}.nav-text{font-size:14px}.nav-text:hover,.site-footer a:hover,.faq-heading a:hover{color:var(--sea)}.nav-github{display:flex;align-items:center}.nav-github svg{width:21px;height:21px}.button{display:inline-flex;justify-content:center;align-items:center;gap:12px;min-height:56px;padding:15px 25px;border-radius:8px;background:var(--ink);color:white;font-size:15px;font-weight:600;white-space:nowrap;transition:background .2s,transform .2s}.button:hover{background:#25545e;transform:translateY(-2px)}.button-small{min-height:44px;font-size:13px;padding:10px 18px;border-radius:7px;gap:20px}.button-small span{font-size:18px;line-height:1}.button svg{width:20px;height:20px}.button-white{background:white;color:var(--ink);box-shadow:0 3px 18px #003a4b12}.button-white:hover{background:#eaf7f6}.button[aria-disabled=true]{opacity:.6;pointer-events:none}
.hero{max-width:1600px;margin:auto;padding:0 18px}.landscape{position:relative;height:clamp(620px,54vw,820px);min-height:620px;isolation:isolate;overflow:hidden;border-radius:19px;background:#04889e}.landscape-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:38% 50%;z-index:-3}.landscape:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 35%,#03486b24 63%,#00314b32);pointer-events:none}.hero-copy{position:absolute;left:52%;right:4%;top:10%;color:white}.hero-copy h1{margin:0 0 22px;font-size:clamp(48px,4.6vw,72px);font-weight:600;line-height:1.25;letter-spacing:-2.3px;text-shadow:0 1px 20px #003e5426}.hero-copy p{font-size:17px;font-weight:400;margin:0 0 27px;color:#ffffffed;letter-spacing:.3px}.hero-requirement{display:block;margin-top:11px;font-size:12px;color:#fff;opacity:.85}.sea-shimmer{position:absolute;left:28%;right:-12%;top:0;bottom:-10%;z-index:-2;opacity:.18;background:repeating-radial-gradient(ellipse at 0 50%,transparent 0 49px,#d5ffff 50px 51px,transparent 53px 140px);transform:skewX(-10deg);animation:sea-breathe 11s ease-in-out infinite;pointer-events:none;mask-image:linear-gradient(90deg,transparent,#0002 25%,#000 100%)}.shore-files{position:absolute;left:4.5%;top:13%;display:grid;gap:32px}.shore-file{display:flex;align-items:center;flex-direction:column;gap:7px;width:90px;color:white;font-size:11px;text-shadow:0 1px 4px #163b4380}.folder-icon{position:relative;display:block;width:38px;height:29px;border-radius:3px;background:#ffce60;box-shadow:0 3px 5px #65512424;border-top:3px solid #ffe4a1}.folder-icon:before{content:"";position:absolute;width:19px;height:6px;top:-8px;left:0;background:#ffe4a1;border-radius:3px 3px 0 0}.document-icon{display:flex;flex-direction:column;justify-content:center;gap:4px;width:30px;height:39px;background:#fffffff5;border-radius:2px;box-shadow:0 2px 4px #143c4630;border-top-right-radius:9px;padding:9px 6px}.document-icon i{display:block;height:2px;background:#a5bac1}.document-icon i:last-child{width:65%}.demo-file{position:absolute;left:14%;top:57%;width:116px;min-height:104px;display:flex;align-items:center;flex-direction:column;justify-content:center;padding:6px;gap:9px;border-radius:8px;background:#ffffff0a;color:white;text-shadow:0 1px 4px #093b4f80;font-size:11px;touch-action:none;user-select:none;z-index:5;cursor:grab;transition:background .2s}.demo-file:hover{background:#ffffff24}.demo-file:active{cursor:grabbing}.demo-file-label{white-space:nowrap}.demo-file-boat{display:none;width:82px;height:82px;object-fit:contain;filter:drop-shadow(3px 5px 3px #033b4e35)}.demo-file.at-sea{width:126px;gap:0}.demo-file.at-sea .demo-file-icon{display:none}.demo-file.at-sea .demo-file-boat{display:block}.demo-file.at-sea .demo-file-label{position:absolute;bottom:0}.demo-hint{position:absolute;top:71%;left:17%;display:flex;align-items:center;gap:9px;color:#fff;font-size:12px;transform:rotate(-6deg);pointer-events:none;text-shadow:0 1px 3px #0d444650}.demo-hint svg{width:50px;height:36px;transform:rotate(-12deg)}.floating-boat{position:absolute;width:112px;display:flex;flex-direction:column;align-items:center;pointer-events:none;color:white;font-size:10px;text-shadow:0 1px 4px #17415680;animation:boat-drift 17s ease-in-out infinite}.floating-boat img{width:84px;height:84px;object-fit:contain;filter:drop-shadow(4px 7px 3px #064b5f38)}.floating-boat span{white-space:nowrap;margin-top:3px}.boat-one{left:48%;top:65%;animation-delay:-4s}.boat-two{left:80%;top:70%;transform:scale(.8);animation-duration:23s;animation-delay:-11s}.scene-controls{position:absolute;bottom:30px;left:30px;display:flex;gap:6px;padding:6px;border:1px solid #ffffff3d;border-radius:12px;background:#ffffffeb;box-shadow:0 2px 18px #0c3e3f0a}.scene-choice{display:flex;align-items:center;gap:8px;background:transparent;padding:7px 10px;border-radius:7px;min-height:38px;font-size:12px;color:#4e676b;transition:background .2s}.scene-choice>span:first-child{display:block;width:23px;height:23px;border-radius:50%;background-size:cover;background-position:center;border:1px solid #00000008}.scene-choice[aria-pressed=true]{background:#dbecea;color:var(--ink)}.motion-toggle{position:absolute;right:28px;bottom:30px;display:flex;align-items:center;gap:7px;padding:10px 14px;border-radius:7px;border:1px solid #ffffff38;color:white;background:#063f5040;font-size:12px;backdrop-filter:blur(8px)}.motion-toggle svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5}.demo-caption{position:absolute;right:29px;bottom:85px;color:#ffffffbf;font-size:10px}.hero-foot{display:flex;align-items:center;justify-content:space-between;padding:24px 23px;color:var(--muted);font-size:12px}.hero-foot a{display:flex;gap:16px;align-items:center}.hero-foot a span{font-size:18px}.landscape[data-scene=snow]:after{background:linear-gradient(110deg,transparent 30%,#07395155 70%)}.landscape[data-scene=autumn]:after{background:linear-gradient(110deg,transparent 28%,#1a3a4660 75%)}.landscape.paused .floating-boat,.landscape.paused .sea-shimmer{animation-play-state:paused}
h2,h3,p{margin-top:0}h2{font-size:40px;line-height:1.4;letter-spacing:-1.2px;font-weight:600}h3{font-size:19px;letter-spacing:-.4px;font-weight:600}.intro{padding-top:100px;padding-bottom:115px}.intro-heading{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center}.intro-heading h2{margin:0}.intro-heading p{font-size:16px;line-height:2;color:var(--muted);margin:0}.features{margin-top:75px;display:grid;grid-template-columns:repeat(3,1fr);gap:52px}.features article{padding-top:27px;border-top:1px solid var(--line)}.features article>svg{width:30px;height:30px;margin-bottom:22px;color:#37717a}.features h3{margin:0 0 12px}.features p{font-size:13px;line-height:1.9;color:var(--muted);margin-bottom:0}.scenery-section{background:#eaf1ef;padding:85px 0 90px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:35px}.section-heading h2{margin-bottom:10px;font-size:36px}.section-heading p{margin:0;color:var(--muted);font-size:14px}.quiet-note{font-size:12px;color:var(--muted);padding-bottom:5px}.scenery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.scenery-card{position:relative;background:transparent;text-align:left;padding:0}.scenery-image{position:relative;aspect-ratio:1.4;overflow:hidden;border-radius:10px;background:#b6d4d2}.scenery-image>img:first-child{width:100%;height:100%;object-fit:cover;object-position:39%;transition:transform .5s}.scenery-card:hover .scenery-image>img:first-child{transform:scale(1.035)}.scenery-image .scenery-boat{position:absolute;left:62%;top:48%;width:54px;height:54px;object-fit:contain;filter:drop-shadow(2px 4px 3px #184b4930)}.scenery-name{display:block;margin-top:21px;font-size:19px;font-weight:600}.scenery-name>span{display:block;margin-top:7px;font-size:12px;font-weight:400;color:var(--muted);padding-right:22px}.preview-arrow{position:absolute;right:0;bottom:31px;font-size:21px;font-weight:400}.download-section{display:grid;grid-template-columns:1fr 1.12fr;gap:90px;align-items:center;padding-top:106px;padding-bottom:109px}.download-art{position:relative;aspect-ratio:1;max-width:390px;background:#dfefeb;border-radius:50%;display:flex;align-items:center;justify-content:center;isolation:isolate}.download-art>img{width:66%;height:auto;filter:drop-shadow(6px 20px 9px #2c76652b);transform:rotate(-8deg)}.ripple{position:absolute;width:75%;height:26%;border:1px solid #9bc9c3;border-radius:50%;bottom:15%;z-index:-1;transform:rotate(-12deg)}.ripple-two{width:94%;height:35%;bottom:10%;border-color:#b5d9d3}.download-copy h2{font-size:43px;margin-bottom:19px}.download-copy>p:not(.download-meta):not(.install-note):not(.download-error){color:var(--muted);line-height:1.9;font-size:16px;margin-bottom:27px}.button-download{min-width:252px}.download-meta{font-size:12px;color:var(--muted);margin:12px 0 0}.install-note{font-size:12px;line-height:1.9;color:var(--muted);margin:23px 0 0}.download-error{font-size:13px;color:#8b3c23;margin-top:12px}.download-error a{text-decoration:underline}.faq-section{padding-top:30px;padding-bottom:100px;display:grid;grid-template-columns:.75fr 1.25fr;gap:80px}.faq-heading h2{font-size:30px;margin-bottom:22px}.faq-heading a{font-size:12px;color:var(--muted)}.faq-heading a span{margin-left:12px}.faq-list{border-top:1px solid var(--line)}details{border-bottom:1px solid var(--line)}summary{font-size:14px;list-style:none;cursor:pointer;position:relative;padding:23px 32px 23px 0;font-weight:500}summary::-webkit-details-marker{display:none}summary:after,summary:before{content:"";position:absolute;background:#5f7a7e;right:3px;top:34px;width:11px;height:1px}summary:after{transform:rotate(90deg);transition:transform .2s}details[open] summary:after{transform:rotate(0)}details p{font-size:13px;color:var(--muted);line-height:1.9;max-width:620px;padding:0 27px 22px 0;margin:0}.site-footer{display:flex;align-items:center;flex-wrap:wrap;gap:14px 28px;padding-top:34px;padding-bottom:32px;border-top:1px solid var(--line)}.footer-brand{font-size:19px;gap:7px}.footer-brand .brand-mark{width:28px;height:28px}.footer-tagline{font-size:11px;color:var(--muted)}.site-footer>div{display:flex;gap:24px;font-size:11px;margin-left:auto;color:var(--muted)}.copyright{display:block;flex-basis:100%;font-size:10px;color:#7c9094;padding-top:8px}
@keyframes sea-breathe{0%,100%{transform:translate(-7px,-4px) skewX(-10deg);opacity:.13}50%{transform:translate(9px,9px) skewX(-10deg);opacity:.24}}@keyframes boat-drift{0%,100%{translate:0 0;rotate:-4deg}40%{translate:26px -18px;rotate:2deg}70%{translate:10px 12px;rotate:-1deg}}
@media(min-width:1700px){.hero-copy{top:13%}}@media(max-width:1100px){.site-header{padding-inline:30px}.hero-copy{left:48%;right:3%}.hero-copy h1{font-size:55px}.hero-copy p{font-size:14px}.content-width{padding-inline:32px}.features{gap:28px}.features p br{display:none}.download-section{gap:50px}.faq-section{gap:45px}.scene-controls{left:22px;bottom:24px}.scene-choice{padding-inline:7px}.site-footer>div{gap:17px}.footer-tagline{display:none}}
@media(max-width:760px){.site-header{height:74px;padding-inline:22px;gap:12px}.brand{font-size:21px;gap:7px}.brand-mark{width:31px;height:31px}.site-header nav{gap:20px}.nav-text,.nav-github{display:none}.button-small{font-size:12px;padding:9px 14px;min-height:40px;gap:12px}.hero{padding-inline:10px}.landscape{height:740px;min-height:0;border-radius:14px}.landscape-image{object-position:32% center}.landscape:after{background:linear-gradient(180deg,#063d504a,transparent 70%)}.hero-copy{top:7%;left:8%;right:6%;text-align:left}.hero-copy h1{font-size:48px;letter-spacing:-1.8px;line-height:1.32;margin-bottom:15px}.hero-copy p{font-size:13px;letter-spacing:0;margin-bottom:24px}.hero-copy .button{min-height:49px;font-size:13px;padding:13px 19px;gap:10px}.hero-requirement{font-size:11px;margin-top:10px}.shore-files{top:53%;left:5%;gap:26px}.shore-file{width:72px;font-size:9px}.shore-file:nth-child(2){display:none}.folder-icon{width:30px;height:23px}.demo-file{left:14%;top:66%;font-size:10px;width:98px}.demo-file .document-icon{width:26px;height:34px}.demo-hint{left:27%;top:78%;font-size:10px;gap:2px}.demo-hint svg{width:30px}.floating-boat img{width:68px;height:68px}.floating-boat{font-size:9px}.boat-one{left:53%;top:54%}.boat-two{left:65%;top:73%}.scene-controls{left:15px;bottom:19px;gap:3px;padding:4px;border-radius:8px}.scene-choice{min-height:32px;gap:5px;padding:5px 6px;font-size:10px;border-radius:5px}.scene-choice>span:first-child{width:17px;height:17px}.motion-toggle{right:14px;bottom:72px;padding:8px 10px;font-size:10px}.motion-toggle svg{width:12px;height:12px}.demo-caption{right:16px;bottom:121px;font-size:9px}.hero-foot{font-size:10px;padding:19px 12px}.hero-foot a{gap:7px}.hero-foot a span{font-size:15px}.content-width{padding-inline:25px}.intro{padding-top:61px;padding-bottom:65px}.intro-heading{display:block}.intro-heading h2{font-size:31px;letter-spacing:-1px}.intro-heading p{margin-top:25px;font-size:14px;line-height:1.9}.desktop-break{display:none}.features{grid-template-columns:1fr;gap:28px;margin-top:43px}.features article{padding-top:23px;display:grid;grid-template-columns:37px 1fr;gap:0 15px;align-items:start}.features article>svg{grid-row:span 2;width:28px;height:28px;margin:0}.features h3{font-size:17px;margin:1px 0 9px}.features p{font-size:12px}.scenery-section{padding:50px 0 55px}.section-heading{margin-bottom:25px;align-items:start}.section-heading h2{font-size:29px;letter-spacing:-1px}.section-heading p{font-size:12px}.quiet-note{font-size:10px;max-width:55px;text-align:right;padding-top:7px}.scenery-grid{grid-template-columns:1fr;gap:32px}.scenery-image{aspect-ratio:1.8}.scenery-name{font-size:18px;margin-top:15px}.scenery-name>span{font-size:12px;margin-top:4px}.scenery-image .scenery-boat{width:55px;height:55px;top:41%}.preview-arrow{bottom:24px}.download-section{grid-template-columns:1fr;gap:31px;padding-top:60px;padding-bottom:66px;text-align:center}.download-art{width:220px;margin:auto}.download-copy h2{font-size:34px;margin-bottom:15px}.download-copy>p:not(.download-meta):not(.install-note):not(.download-error){font-size:14px;margin-bottom:24px}.button-download{min-height:54px;font-size:14px}.download-meta{font-size:11px}.install-note{font-size:11px;margin-top:21px}.faq-section{grid-template-columns:1fr;gap:26px;padding-top:20px;padding-bottom:60px}.faq-heading h2{font-size:28px;margin-bottom:14px}.faq-heading a{font-size:11px}summary{font-size:13px;padding-top:20px;padding-bottom:20px}summary:after,summary:before{top:31px}details p{font-size:12px}.site-footer{margin-inline:25px;padding:25px 0 24px;gap:18px}.site-footer>div{margin-left:0;width:100%;font-size:11px;justify-content:space-between;gap:10px}.copyright{padding-top:0}.footer-brand{font-size:19px}.landscape[data-scene=snow]:after,.landscape[data-scene=autumn]:after{background:linear-gradient(180deg,#10384480,transparent 78%)}}
@media(max-width:360px){.site-header{padding-inline:15px}.brand{font-size:18px}.button-small{padding-inline:11px;font-size:11px}.hero-copy h1{font-size:43px}.scene-choice{padding-inline:4px;font-size:9px}.scene-choice>span:first-child{width:15px;height:15px}.hero-foot{font-size:9px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}