:root{--ink:#0d1715;--pine:#15241f;--jade:#91b3a5;--bronze:#c8ab70;--paper:#eee7d6;--mist:#afbbb0;--line:#c8ab7030;--serif:'Songti TC','Noto Serif TC','Times New Roman',serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:96px}body{margin:0;color:var(--paper);background:var(--ink);font-family:'PingFang TC','Microsoft JhengHei',sans-serif;line-height:1.8}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--bronze);outline-offset:6px}button{border:0}img{display:block;max-width:100%}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--serif);font-weight:400}h1{font-size:clamp(42px,5.4vw,76px);line-height:1.35;letter-spacing:.08em}h2{font-size:clamp(32px,4vw,56px);line-height:1.4;letter-spacing:.04em}h3{font-size:26px}p{color:var(--mist)}.eyebrow{color:var(--bronze);letter-spacing:.22em;font-size:10px;font-family:Georgia,serif;margin-bottom:20px}.site-header{position:absolute;top:0;left:0;width:100%;z-index:20;padding:24px 5%;display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(#0d1715a0,transparent)}.brand{display:flex;align-items:center;gap:12px;line-height:1.2}.seal{font:26px var(--serif);padding:5px 8px;border:1px solid var(--bronze);color:var(--bronze);border-radius:5px}.brand strong{font:22px var(--serif);letter-spacing:.16em}.brand small{display:block;font:8px Georgia;letter-spacing:.3em;margin-top:5px;color:var(--bronze)}nav{display:flex;gap:30px;align-items:center;font-size:12px}nav a{color:var(--mist)}nav a:hover{color:var(--paper)}.lang{background:transparent;border:1px solid var(--line);padding:6px 13px;font:11px Georgia}.entrance{position:relative;min-height:740px;height:100svh;isolation:isolate;overflow:hidden;background:#0e191a}.scene-frame{position:absolute;right:0;bottom:0;width:100%;height:100%;overflow:hidden}.scene-frame img,.scene-frame canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.scene-frame canvas{opacity:0;transition:opacity 1s}.scene-frame canvas.ready{opacity:1}.entrance:after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#0d1715ec 0%,#0d1715b0 25%,transparent 61%),linear-gradient(0deg,var(--ink),transparent 14%)}.hero-copy{position:absolute;z-index:2;left:9%;top:29%;max-width:470px;width:37%}.hero-copy p:not(.eyebrow){margin-top:25px;max-width:310px;font-size:14px;line-height:2}.hero-copy .elements{display:flex;gap:22px;margin-top:38px;color:var(--bronze);font:14px var(--serif)}.hero-copy .elements span{border-bottom:1px solid var(--line);padding-bottom:8px}.portal{position:absolute;left:68%;top:69%;z-index:3;text-align:center;transform:translate(-50%,-50%);animation:portalIn 1.4s 2.6s both}.bagua{width:108px;height:108px;display:block;margin:auto;background:radial-gradient(circle,#0e211ae8,transparent 72%);color:#ebce8e;transition:filter .25s,scale .25s;filter:drop-shadow(0 0 8px #d1a55850)}.bagua:hover{scale:1.08;filter:drop-shadow(0 0 15px #dfb766)}.bagua svg{width:100%;height:100%}.bagua .wheel{transform-origin:center;animation:turn 50s linear infinite}.portal span{font-size:11px;letter-spacing:.15em;background:#0d1715c9;padding:5px 12px;display:inline-block}.hero-foot{position:absolute;z-index:4;bottom:27px;left:5%;right:5%;display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--mist)}.motion{padding:5px 0;background:transparent;border-bottom:1px solid var(--line);font-size:11px}.hero-foot a{border-bottom:1px solid var(--line)}.container{width:min(1120px,88%);margin:auto}.intro{padding:125px 0 95px;display:grid;grid-template-columns:1.1fr .9fr;gap:70px;border-bottom:1px solid var(--line)}.intro p:not(.eyebrow){padding-top:45px;max-width:450px;line-height:2.1}.chapter{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:10%;padding:105px 0;border-bottom:1px solid var(--line)}.chapter:nth-child(even) .feature-art{order:2}.chapter:nth-child(even) .feature-copy{order:1}.feature-copy{max-width:430px}.feature-copy .number{font:italic 16px Georgia;color:var(--bronze);display:block;margin-bottom:25px}.feature-copy p{margin-top:24px;font-size:14px;line-height:2}.feature-copy .detail{display:flex;gap:10px;flex-wrap:wrap;margin-top:25px;font-size:11px;color:var(--bronze)}.detail span{border:1px solid var(--line);padding:4px 12px}.feature-art{position:relative;display:grid;place-items:center;min-height:530px;perspective:1200px}.phone{position:relative;width:220px;max-width:57%;border:1px solid #9a907d;border-radius:29px;padding:6px;background:#0c1211;transform:rotateY(8deg) rotateZ(-3deg);z-index:2;overflow:hidden}.phone img{border-radius:23px;width:100%;height:auto}.chapter:nth-child(even) .phone{transform:rotateY(-8deg) rotateZ(3deg)}.aura{position:absolute;width:96%;aspect-ratio:1;border:1px solid var(--line);border-radius:50%;animation:turn 65s linear infinite}.aura:before,.aura:after{content:'';position:absolute;inset:8%;border:1px dashed #c8ab7035;border-radius:50%}.aura:after{inset:-8%;border-style:solid;opacity:.35}.art-symbol{position:absolute;z-index:3;right:6%;bottom:12%;font:52px var(--serif);color:var(--bronze);writing-mode:vertical-rl;letter-spacing:.2em}.aura i{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--bronze);left:50%;top:-4px;box-shadow:0 0 18px #c8ab7055}.aura i:nth-child(2){left:95%;top:34%}.aura i:nth-child(3){left:80%;top:90%}.aura i:nth-child(4){left:20%;top:90%}.aura i:nth-child(5){left:3%;top:34%}.art-yijing .aura{border-radius:18%;transform:rotate(45deg);animation:breathe 5s ease-in-out infinite}.art-yijing .aura:after{border-radius:18%}.art-star .aura{border-style:dotted;border-width:2px}.art-daily .aura{border-color:#b7684750;background:radial-gradient(ellipse,#cda85e13,transparent 65%);animation:breathe 6s infinite}.art-daily .aura:before{border-color:#d8b87655}.caption{font-size:10px;color:var(--mist);text-align:center;margin-top:10px}.roadmap{padding:60px 0;display:flex;justify-content:space-between;align-items:center;gap:30px;border-bottom:1px solid var(--line)}.roadmap p{font-size:13px;max-width:540px}.roadmap small{color:var(--bronze);font-size:10px;letter-spacing:.15em}.download{padding:120px 0;text-align:center}.download h2{max-width:680px;margin:auto}.download p{margin:24px auto;max-width:530px;font-size:14px}.store-status{display:inline-flex;gap:15px;align-items:center;text-align:left;padding:13px 24px;border:1px solid var(--line);border-radius:8px;color:var(--paper);margin:10px 0}.store-status b{font-size:21px;font-weight:400}.store-status small{display:block;color:var(--mist);font-size:10px}.store-status span:first-child{font:28px Georgia}.download .availability{font-size:11px;margin:16px auto}.faq{padding:0 0 100px;max-width:820px;margin:auto}.faq h2{font-size:30px;margin-bottom:25px}.faq details{border-bottom:1px solid var(--line);padding:21px 0}.faq summary{cursor:pointer;font-size:14px;list-style:none;display:flex;justify-content:space-between;gap:20px}.faq summary:after{content:'+';color:var(--bronze)}.faq details[open] summary:after{content:'−'}.faq details p{font-size:13px;margin-top:18px;padding-right:30px}.footer{border-top:1px solid var(--line);padding:35px 0}.footer-inner{display:flex;justify-content:space-between;gap:30px;align-items:center}.footer nav{gap:18px}.fineprint{font-size:10px;margin-top:22px;max-width:680px}.reveal{opacity:1}.js-motion .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s,transform .8s}.js-motion .reveal.visible{opacity:1;transform:none}.paused *{animation-play-state:paused!important}.paused .reveal{opacity:1;transform:none}.skip-link{position:fixed;top:-100px;left:15px;z-index:50;background:var(--paper);color:var(--ink);padding:10px}.skip-link:focus{top:10px}@keyframes turn{to{transform:rotate(360deg)}}@keyframes breathe{50%{opacity:.45;scale:.96}}@keyframes portalIn{from{opacity:0;translate:0 18px;scale:.7}to{opacity:1;translate:0 0;scale:1}}@media(min-width:1500px){.scene-frame{width:min(100%,1600px);left:50%;transform:translateX(-50%)}}@media(max-width:760px){html{scroll-padding-top:25px}.site-header{padding:19px 6%}nav{gap:15px}.site-header nav a:first-child{display:none}.site-header nav{font-size:11px}.brand strong{font-size:19px}.seal{font-size:21px}.entrance{min-height:740px;height:100svh;max-height:1000px}.scene-frame{width:min(100%,56.25svh);height:auto;aspect-ratio:9/16;left:50%;right:auto;top:50%;bottom:auto;transform:translate(-50%,-50%)}.entrance:after{background:linear-gradient(#0d171588,transparent 28%,transparent 82%,var(--ink))}.hero-copy{left:6%;top:13%;width:88%;max-width:none;text-align:center}.hero-copy .eyebrow{font-size:8px;margin-bottom:10px}.hero-copy h1{font-size:34px;line-height:1.45;letter-spacing:.10em}.hero-copy p:not(.eyebrow){display:none}.hero-copy .elements{margin-top:15px;justify-content:center;gap:19px;font-size:11px}.portal{left:50%;top:77%}.bagua{width:88px;height:88px}.portal span{font-size:10px}.hero-foot{font-size:10px;bottom:22px}.intro{padding:70px 0 60px;grid-template-columns:1fr;gap:15px}.intro p:not(.eyebrow){padding-top:0;font-size:14px}.chapter{grid-template-columns:1fr;gap:15px;padding:65px 0}.chapter .feature-copy,.chapter:nth-child(even) .feature-copy{order:0}.chapter .feature-art,.chapter:nth-child(even) .feature-art{order:1}.feature-copy .number{margin-bottom:12px}.feature-copy p{margin-top:15px}.feature-art{min-height:490px;margin-top:20px}.phone{width:215px;max-width:62%}.aura{width:90%}.art-symbol{right:2%;bottom:13%;font-size:40px}.roadmap{display:block}.roadmap p{margin-top:18px}.download{padding:80px 0}.download h2{font-size:35px}.footer-inner{align-items:flex-start;flex-direction:column}.footer nav{flex-wrap:wrap}.faq{padding-bottom:65px}.container{width:86%}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.js-motion .reveal{opacity:1;transform:none}.portal{opacity:1}}@media(max-height:620px) and (min-width:761px){.entrance{height:740px}}

.feature-art{overflow:clip}.feature-copy{min-width:0}

.paused .portal{animation:none;opacity:1}

.scene-frame .rendered-film{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .25s;pointer-events:none}.scene-frame .rendered-film.playing{opacity:1}.film-version .portal{animation:none;opacity:0;transition:opacity .9s,translate .9s;translate:0 12px}.film-version .portal.film-ready{opacity:1;translate:0 0}
@media(max-width:760px){html[lang="en"] .hero-copy h1{font-size:clamp(24px,6.8vw,32px);line-height:1.4;letter-spacing:.025em}html[lang="en"] .hero-copy .elements{gap:16px;font-size:10px}}
@media(min-width:761px){html[lang="en"] .hero-copy h1{font-size:clamp(36px,4vw,60px);line-height:1.35;letter-spacing:.01em}}
/* Mobile entrance is a full-screen scene with a single visible Bagua control. */
@media(max-width:760px){
 body:not(.entered){overflow:hidden;height:100dvh}
 body:not(.entered) .site-header,body:not(.entered) #app,body:not(.entered) .footer,body:not(.entered) .skip-link{display:none}
 .entrance{height:100dvh;min-height:0;max-height:none}
 .scene-frame{inset:0;width:100%;height:100%;aspect-ratio:auto;transform:none}
 .scene-frame img,.scene-frame .rendered-film{object-fit:cover;object-position:50% 50%}
 .entrance:after{background:linear-gradient(0deg,#0d17152b,transparent 24%);}
 .hero-copy,.hero-foot,.portal span{display:none}
 .portal{left:50%;top:auto;bottom:max(8dvh,env(safe-area-inset-bottom));transform:translateX(-50%)}
 .bagua{width:92px;height:92px;background:radial-gradient(circle,#12271fe6,transparent 73%);filter:drop-shadow(0 0 14px #d9b66388)}
 body.entered .entrance{display:none}
 body.entered .site-header{position:relative;padding-top:max(19px,env(safe-area-inset-top));background:var(--ink)}
 body.entered .intro{padding-top:45px}
}

/* v09: one entrance control on every viewport; navigation belongs inside. */
body:not(.entered){overflow:hidden;height:100dvh}
body:not(.entered) .site-header,body:not(.entered) #app,body:not(.entered) .footer,body:not(.entered) .skip-link{display:none}
.entrance{height:100dvh;min-height:0;max-height:none;background:#07110f}
.scene-frame{inset:0;width:100%;height:100%;aspect-ratio:auto;transform:none}
.scene-frame picture{display:block;width:100%;height:100%}
.scene-frame img{width:100%;height:100%;object-fit:contain;object-position:center}
.entrance:after{background:linear-gradient(0deg,#06110f44,transparent 22%);pointer-events:none}
.hero-copy,.hero-foot,.portal span{display:none}
.portal{left:50%;top:auto;bottom:max(5dvh,env(safe-area-inset-bottom));transform:translateX(-50%);opacity:1;animation:none}
.bagua{width:92px;height:92px;background:radial-gradient(circle,#12271fe6,transparent 73%);filter:drop-shadow(0 0 14px #d9b66388)}
body.entered .entrance{display:none}
body.entered .site-header{position:relative;padding-top:max(19px,env(safe-area-inset-top));background:var(--ink)}
body.entered .intro{padding-top:45px}
@media(max-width:760px){.scene-frame img{object-fit:cover}}

/* Match video framing to its portrait poster. */
.scene-frame .rendered-film{object-fit:contain;object-position:center}
@media(max-width:760px){.scene-frame .rendered-film{object-fit:cover}}
/* Hand-to-viewer entrance and naming-led introduction. */
.brand-icon{width:44px;height:44px;border-radius:10px;object-fit:cover;border:1px solid var(--line)}
.portal{top:78%;bottom:auto;transform:translate(-50%,-50%);perspective:600px}
.bagua{position:relative;width:116px;height:116px;padding:0;transform-origin:center;box-shadow:0 0 45px #e0b96118;border-radius:50%}
.portal .portal-label{display:block;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);white-space:nowrap;background:#0b1914c9;border:1px solid #c8ab7040;border-radius:20px;padding:4px 15px;font-size:13px;letter-spacing:.12em;color:#f7e4b6;text-shadow:0 1px 8px #000}
.bagua:active{scale:.96}
.download-top{padding:30px 0 35px;border-bottom:1px solid var(--line)}
.download-icon{margin:0 auto 14px;border-radius:18px;border:1px solid var(--line)}
.download-top h2{font-size:32px}.download-top .eyebrow{display:none}.download-top p{margin:10px auto;font-size:14px}.download-top .availability{font-size:12px}.download-top .store-status{margin:8px 0;padding:8px 23px}.download-top [data-t="languageNote"]{display:none}
.naming-lead{padding:80px 0;display:grid;grid-template-columns:1fr 1.1fr;gap:9%;align-items:center;border-bottom:1px solid var(--line)}
.name-emblem{padding:55px 10px;text-align:center;background:radial-gradient(ellipse,#32433466,transparent 69%);color:var(--bronze)}
.name-emblem small{font:10px Georgia;letter-spacing:.25em}.name-emblem div{font:150px var(--serif);line-height:1.8}.name-emblem p{font:italic 19px Georgia;color:var(--bronze)}
.naming-copy>p:not(.eyebrow){font-size:15px;margin-top:22px;line-height:2}.name-benefits{padding:0;list-style:none;margin:24px 0;color:var(--mist);font-size:14px}.name-benefits li{padding:7px 0}.name-benefits li:before{content:'✦';color:var(--bronze);margin-right:12px}.naming-cta{display:inline-block;padding:11px 20px;background:var(--bronze);color:var(--ink);border-radius:3px;font-size:14px}.naming-copy .naming-note{font-size:11px;margin-top:12px}.intro{padding-top:65px}
@media(max-width:760px){.site-header{gap:10px}.brand{gap:9px}.site-header nav{gap:12px}.brand-icon{width:42px;height:42px}.download-top{padding:20px 0 30px}.download-top h2{font-size:28px}.download-top p{font-size:13px}.download-icon{width:64px;height:64px;border-radius:15px}.naming-lead{grid-template-columns:1fr;padding:44px 0;gap:22px}.naming-copy{order:0}.name-emblem{order:1;padding:22px 0}.name-emblem div{font-size:90px;line-height:1.5}.naming-copy h2{font-size:36px}.naming-copy>p:not(.eyebrow){font-size:14px}.bagua{width:108px;height:108px}}