:root{color-scheme:light;--ink:#151916;--muted:#777e79;--mint:#91ddb1;--paper:#fbfcfb}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,select{font:inherit}a:focus-visible,select:focus-visible{outline:3px solid #78bc95;outline-offset:6px}[hidden]{display:none!important}.header{max-width:1440px;margin:auto;padding:29px 5.4%;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:750;letter-spacing:-.6px}.brand img{width:48px;height:48px;object-fit:contain;transform:none}.brand-light{font-weight:550}.header nav{display:flex;gap:38px;font-size:13px}.header nav span{color:#8c948e;margin-left:5px}.hero{max-width:1440px;min-height:620px;height:calc(100svh - 244px);max-height:820px;margin:auto;display:grid;grid-template-columns:58% 42%;align-items:center;padding:35px 5.4% 20px}.hero-copy{position:relative;z-index:2;padding-bottom:15px}.eyebrow{display:flex;align-items:center;gap:12px;color:#6c756e;font-size:16px;margin:0 0 30px}.eyebrow i{width:8px;height:8px;background:var(--mint);border-radius:50%}h1{font-size:clamp(38px,4.35vw,65px);line-height:1.38;letter-spacing:-2px;font-weight:900;-webkit-text-stroke:.008em currentColor;white-space:nowrap;margin:0}.highlight{position:relative;isolation:isolate}.highlight:after{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:4px;height:12px;background:#d9f3e3;transform:rotate(-3deg);border-radius:60% 20% 40% 20%}.description{font-size:16px;line-height:1.9;color:var(--muted);margin:27px 0 39px}.mobile-break{display:none}.actions{display:flex;align-items:flex-start;gap:13px}.download{height:62px;border:0;border-radius:40px;background:#171b18;color:#fff;padding:0 24px;display:flex;gap:12px;align-items:center;white-space:nowrap;font-size:14px;opacity:1;cursor:pointer;transition:background .2s,transform .2s}.download svg{width:21px;height:23px;fill:currentColor}.download-arrow{margin-left:8px;color:#bfc5c0}.github{border:1px solid #d9dedb;border-radius:40px;padding:12px 21px;min-height:62px;display:flex;align-items:center;gap:12px;transition:background .2s,transform .2s}.github:hover{background:white;transform:translateY(-2px)}.github>svg{width:26px;height:26px;flex-shrink:0}.github strong{display:block;font-size:14px;font-weight:650}.github strong span{font-weight:400;color:#8b938e;margin-left:4px}.github small{font-size:10px;display:block;color:#727a74;margin-top:4px}.availability{font-size:11px;color:#858b86;margin-top:17px}.availability span{margin:0 8px}.system-picker{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:12px;color:var(--muted)}select{border:1px solid #d9dedb;border-radius:6px;background:white;padding:4px 8px}.ocean{height:560px;position:relative;isolation:isolate;pointer-events:auto}.wake{position:absolute;width:125%;height:100%;left:-20%;top:0;z-index:-1;overflow:visible}.wake path{stroke:#c7ebd6;stroke-width:1;opacity:.6;fill:none}.wake path+path{opacity:.25}.swimmer{position:absolute;width:105%;left:-4%;top:3%;animation:swim 12s ease-in-out infinite;will-change:transform}.steering{transform:translate(var(--look-x,0px),var(--look-y,0px)) rotate(var(--look-angle,0deg));transition:transform 1.3s cubic-bezier(.2,.7,.2,1)}.mascot{display:block;width:100%;transform:rotate(19deg);pointer-events:none}.mascot-shadow{position:absolute;width:48%;height:21px;left:27%;top:79%;background:#616c60;filter:blur(15px);border-radius:50%;opacity:.14;animation:shadow 12s ease-in-out infinite}.spark{position:absolute;right:0;top:11%;transform:rotate(9deg);font-size:20px;color:#6c756e;animation:spark 12s ease-in-out infinite}.spark span{font-family:"Kaiti SC",KaiTi,serif}.spark b{display:block;text-align:center;color:var(--mint);font-size:24px;font-weight:400;margin-top:6px}.ocean-caption{position:absolute;bottom:10%;left:32%;font-size:10px;letter-spacing:2px;color:#a0aaa2;display:flex;align-items:center;gap:7px}.ocean-caption i{height:4px;width:4px;border-radius:50%;background:#9ddbb5}.workflow{max-width:1284px;margin:0 auto;padding:28px 0 32px;border-bottom:1px solid #e8ece9;display:flex;align-items:center;gap:42px}.workflow-caption{font-size:11px;color:#98a19a;white-space:nowrap}.workflow ol{list-style:none;padding:0;margin:0;display:flex;align-items:center;justify-content:space-between;flex:1;gap:12px}.workflow li{font-size:12px;color:#6d776f;white-space:nowrap}.workflow li:not(:last-child):after{content:'→';margin-left:clamp(12px,2.5vw,40px);color:#b5c6bb}.workflow-end{font-size:24px;color:#a0d7b5}footer{max-width:1284px;margin:0 auto;padding:25px 0;display:flex;justify-content:space-between;color:#a0a8a2;font-size:10px}.footer-dot{color:#9fdbb6;font-size:7px;margin-left:8px}@keyframes swim{0%,100%{transform:translate(-8px,14px) rotate(-9deg)}25%{transform:translate(12px,-15px) rotate(-3deg)}50%{transform:translate(25px,-26px) rotate(4deg)}75%{transform:translate(2px,-4px) rotate(-1deg)}}@keyframes shadow{0%,100%{transform:translateX(-8px) scale(1);opacity:.16}50%{transform:translateX(25px) scale(.8);opacity:.09}}@keyframes spark{0%,65%,100%{opacity:.25;transform:translateY(8px) rotate(9deg)}30%,45%{opacity:1;transform:translateY(0) rotate(9deg)}}
@media(min-width:1600px){.hero{min-height:690px}}@media(max-width:1400px){.workflow,footer{margin-left:5.4%;margin-right:5.4%}.actions{gap:9px}.download{padding:0 18px}.github{padding:12px 16px}}@media(max-width:1100px){.hero{grid-template-columns:60% 40%;min-height:570px}.ocean{height:450px}.github small{font-size:9px}.actions{flex-wrap:wrap}.description{font-size:14px}.workflow{gap:24px}.workflow li:not(:last-child):after{margin-left:14px}.workflow-caption{display:none}}@media(max-width:760px){.header{padding:22px 6%}.brand{font-size:17px;gap:10px}.brand img{width:38px;height:38px}.header nav{gap:18px;font-size:11px}.header nav a:first-child{display:none}.hero{display:flex;flex-direction:column;height:auto;max-height:none;min-height:0;padding:45px 6% 0;align-items:stretch}.hero-copy{padding:0}.eyebrow{font-size:13px;margin-bottom:20px}h1{font-size:clamp(30px,7.4vw,54px);letter-spacing:-1px;line-height:1.45}.description{font-size:13px;line-height:1.9;margin:23px 0 26px}.mobile-break{display:block}.actions{gap:10px}.download{height:55px;padding:0 18px;font-size:12px}.github{min-height:55px;padding:10px 15px}.github strong{font-size:12px}.github small{font-size:9px}.github>svg{width:22px}.availability{font-size:10px}.ocean{height:370px;width:100%;max-width:420px;margin:-5px auto 0;overflow:hidden}.swimmer{width:83%;left:6%;top:-4%;animation-name:swim-small}.spark{right:6%;top:14%;font-size:17px}.mascot-shadow{top:77%;left:29%;width:38%}.ocean-caption{bottom:9%;left:32%;font-size:9px}.wake{left:-4%;width:105%}.workflow{padding:19px 0 25px;gap:0;margin-top:0}.workflow ol{display:grid;grid-template-columns:repeat(3,1fr);gap:19px;width:100%}.workflow li{font-size:11px}.workflow li:after{display:none}.workflow-end{font-size:20px}footer{font-size:9px;padding:22px 0}.brand-light{font-weight:500}@keyframes swim-small{0%,100%{transform:translate(-3px,8px) rotate(-7deg)}50%{transform:translate(7px,-6px) rotate(3deg)}}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.steering{transform:none}.wake circle{display:none}.spark{opacity:1}}
/* Keep the animated artwork inside its own column at every point of the loop. */
@media(min-width:761px){.hero{min-height:540px}.ocean{height:490px;overflow:clip}.swimmer{width:89%;left:5%;top:0}.ocean-caption{bottom:3%}.mascot-shadow{top:82%}}
/* Blender GLB stage: true geometry + authored deformation, no CSS sprite rotation. */
.mascot-stage{position:absolute;inset:-30px -35px -5px -30px;z-index:1;pointer-events:none}.mascot-stage canvas{width:100%;height:100%;display:block}.mascot-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.mascot-stage[data-state="fallback"] canvas{visibility:hidden}.ocean-caption{z-index:2}.mascot-shadow{top:86%;width:43%;left:28%;opacity:.12}.spark{z-index:2;right:0;top:10%}.wake{opacity:.6}
@media(max-width:760px){.mascot-stage{inset:-5px -10px 0}.mascot-shadow{top:86%}.ocean{height:390px}.spark{top:10%;right:0}.ocean-caption{bottom:1%}}
/* One transparent, click-through swimming space across the entire first screen. */
body{position:relative}.header,.workflow,footer{position:relative;z-index:3}.hero-copy{z-index:3}.ocean{isolation:auto}.ocean .wake,.ocean .mascot-shadow,.ocean .spark,.ocean .ocean-caption{display:none}
body>.mascot-stage{position:absolute;inset:0 0 auto;height:100svh;width:100%;z-index:2;overflow:hidden;pointer-events:none}
body>.mascot-stage .mascot-poster{width:320px;height:400px;left:auto;right:9%;top:20%;opacity:1}
@media(max-width:760px){body>.mascot-stage{inset:0 0 auto;height:100svh}body>.mascot-stage .mascot-poster{width:180px;height:220px;right:3%;top:60%}.ocean{height:220px}}
.music-notes{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}.music-note{position:absolute;left:0;top:0;line-height:1;font-family:Georgia,"Times New Roman",serif;font-size:25px;color:#151515;will-change:transform,opacity;transform-origin:center}.mascot-stage canvas{opacity:1}
@media(max-width:760px){.music-note{font-size:19px}}
@media(prefers-reduced-motion:reduce){.music-notes{display:none}}

#download-label{font-weight:750}.eyebrow-en{margin-left:8px;font-size:.9em;color:#88918a;font-weight:500}@media(max-width:380px){.eyebrow-en{margin-left:4px;font-size:.85em}}

/* Reveal only after the saved pose has been restored and rendered. */
.mascot-stage[data-state="loading"]{visibility:hidden}

/* E portrait: a fixed, generously framed character in the right column. */
.ocean{height:510px;isolation:isolate;overflow:visible;pointer-events:none}
.ocean:before{content:"";position:absolute;inset:12% -3% 3%;background:radial-gradient(ellipse at 50% 60%,rgba(215,220,221,.12),transparent 67%);pointer-events:none}
.ocean .mascot-stage{position:absolute;inset:-8px -38px 0 -20px;width:auto;height:auto;overflow:visible;z-index:1}
.ocean .mascot-poster{inset:0;width:100%;height:100%;object-fit:contain}
.ocean .music-notes{overflow:visible}
.inspiration-pop{position:absolute;left:0;top:0;display:flex;align-items:center;gap:7px;padding:8px 13px;border:1px solid #d4e6db;border-radius:999px;background:rgba(251,255,252,.96);color:#202a23;font-size:14px;font-weight:700;line-height:1.2;letter-spacing:.2px;white-space:nowrap;box-shadow:0 5px 18px rgba(25,57,37,.07);transform-origin:center;will-change:transform,opacity;pointer-events:none}
.inspiration-spark{font-size:18px;color:#78ba92;line-height:1}
@media(max-width:760px){.inspiration-pop{font-size:12px;padding:7px 11px;gap:6px}.inspiration-spark{font-size:16px}}
@media(max-width:1100px) and (min-width:761px){.ocean{height:460px}.ocean .mascot-stage{inset:0 -22px 0 -12px}}
@media(max-width:760px){.ocean{height:350px;margin:18px auto 0;width:100%;max-width:420px;overflow:visible}.ocean .mascot-stage{inset:0;width:100%;height:100%}.ocean:before{inset:8% 0 0}.ocean .music-note{font-size:20px}}

.download:hover{background:#353836;transform:translateY(-2px)}.download:active{transform:translateY(0)}.download-group{max-width:100%}.system-picker select{max-width:100%;cursor:pointer}.availability{line-height:1.8}
.download-group{position:relative;flex-shrink:0}.download-control{display:flex;align-items:stretch;background:#171b18;border-radius:40px}
.download-control .download{border-radius:40px 0 0 40px;padding-right:15px;transform:none!important}
.download-toggle{position:relative;display:grid;place-items:center;width:42px;flex-shrink:0;border:0;border-radius:0 40px 40px 0;background:transparent;color:#e5e5e5;cursor:pointer;padding:0 8px 0 2px;transition:background .18s}
.download-toggle:hover,.download-toggle[aria-expanded="true"]{background:rgba(255,255,255,.12)}.download-toggle svg{transition:transform .18s}.download-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.download-control :focus-visible,.version-menu button:focus-visible{outline:1px solid #a3a3a3;outline-offset:2px}
.version-menu{position:absolute;z-index:20;top:calc(100% + 9px);right:0;width:240px;max-width:calc(100vw - 36px);padding:6px;border:0;border-radius:16px;background:#fff;box-shadow:0 8px 28px rgba(0,0,0,.09)}
.version-menu button{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;text-align:left;border:0;border-radius:10px;background:transparent;color:#383b39;padding:10px 12px;cursor:pointer;font-size:13px;line-height:1.4}
.version-menu button small{display:block;color:#8c8f8d;font-size:11px;margin-top:3px}.version-menu button:hover{background:#f5f5f5}.version-menu button[aria-pressed="true"]{background:#eeeeee}.version-menu button[aria-pressed="true"]:after{content:"✓";color:#606460;font-size:14px}
@media(max-width:760px){.download-control .download{padding-left:18px;padding-right:10px}.download-toggle{width:36px}}
@media(prefers-reduced-motion:reduce){.download-toggle,.download-toggle svg{transition:none}}
.hero-copy:has(.version-menu:not([hidden])){z-index:5}
@media(max-width:760px){.version-menu{left:0;right:auto}}