:root{color-scheme:dark;--ink:#11111e;--text:#fff1f7;--muted:#d2bfd0;--rose:#f5a3c7;--mint:#a5eee0;--gold:#ffdfa9;--lav:#bbabff;--line:#dfc5f02b;font-family:"PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:82px}body{margin:0;background:var(--ink);color:var(--text)}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}h1,h2,h3,p{margin:0}img{display:block;max-width:100%}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--mint);outline-offset:5px}.shell{width:min(1170px,calc(100% - 96px));margin-inline:auto}.skip,.sr-only{position:absolute;clip-path:inset(50%);height:1px;width:1px;overflow:hidden}.skip:focus{clip-path:none;height:auto;width:auto;top:8px;left:12px;padding:10px;background:#161826;z-index:20}
.header{position:sticky;z-index:10;top:0;background:#12111eea;border-bottom:1px solid var(--line);backdrop-filter:blur(16px)}.header-inner{height:69px;display:flex;gap:30px;align-items:center;justify-content:space-between}.brand{display:inline-flex;align-items:center;gap:10px;color:#fff0f7;font-weight:690;white-space:nowrap;letter-spacing:-.025em}.brand img{border-radius:11px;border:1px solid #c9c2f764;box-shadow:0 0 18px #8e87d03d}.brand b{color:#f4b4d2;font-size:.73em;letter-spacing:.08em;margin-left:3px}.header nav{margin-left:auto;display:flex;gap:28px;font-size:13px;color:#d8c8db}.header nav a:hover{color:var(--mint)}.pill{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:0 19px;min-height:42px;border-radius:100px;border:1px solid transparent;font-weight:700;font-size:13px;white-space:nowrap;transition:transform .2s,background .2s,box-shadow .2s}.pill:hover{transform:translateY(-2px)}.header-cta,.primary{color:#25172c;background:linear-gradient(105deg,var(--gold),#edaccd 60%,#beacff);box-shadow:0 4px 25px #d795be3a}.secondary{background:#24253a9c;color:#e4d8f1;border-color:#bfabe94d}.secondary:hover{background:#38304d}
.hero{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 21% 58%,#50284172,transparent 58%),radial-gradient(ellipse at 79% 29%,#25596285,transparent 55%),#151425}.hero-inner{position:relative;display:grid;grid-template-columns:1.06fr 1fr;align-items:center;min-height:690px;padding:45px 0 75px;gap:30px}.hero-lines{position:absolute;inset:0;width:100%;height:100%;opacity:.31;animation:threads 10s ease-in-out infinite;z-index:-1}.eyebrow{display:flex;gap:8px;align-items:center;color:#e9b4d0;font-weight:700;letter-spacing:.17em;font-size:12px}.eyebrow i,.hero-live i{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 13px #87f3df9a}.eyebrow span{color:#bba2be}.hero h1{margin-top:22px;font-size:clamp(67px,7vw,105px);line-height:1.065;font-weight:800;letter-spacing:-.09em}.hero h1 em{font-style:normal;color:#ffe0c6;background:linear-gradient(108deg,var(--gold),var(--rose) 52%,var(--lav));background-clip:text;-webkit-text-fill-color:transparent}.hero-lead{font-size:17px;color:#dfcbd9;line-height:1.95;margin-top:25px}.actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:29px}.actions .pill{min-height:51px;padding-inline:19px;font-size:14px}.adult{margin-top:17px;font-size:12px;color:#bca9bc}.scroll-link{position:absolute;bottom:20px;left:50%;translate:-50% 0;border:1px solid #e5c7ec5c;color:#ffe1ef;border-radius:99px;width:32px;height:42px;display:grid;place-items:center;animation:down 2.6s ease-in-out infinite}
.hero-art{position:relative;isolation:isolate;min-width:0;height:560px;display:grid;place-items:center}.aura{position:absolute;inset:0;background:radial-gradient(ellipse,#b279bd4f,transparent 57%),radial-gradient(ellipse at 71% 51%,#89efd444,transparent 62%);filter:blur(15px);z-index:-1;animation:breathe 7s ease-in-out infinite}.orbit{position:absolute;width:94%;height:64%;top:17%;border:1px solid #a0efdb50;border-radius:50%;rotate:-28deg;box-shadow:0 0 15px #95eecf20;z-index:-1}.orbit-inner{width:80%;height:72%;border-color:#e99ec842;rotate:21deg;animation:breathe 6s -3s ease-in-out infinite}.photo-frame{position:absolute;z-index:-1;top:15%;left:11%;width:54%;height:66%;border:1px solid #f8c5e464;border-radius:28px;overflow:hidden;rotate:-12deg;box-shadow:0 20px 50px #05040aa0;opacity:.78}.photo-frame img{width:100%;height:100%;object-fit:cover;object-position:center 42%;filter:saturate(.76) brightness(.76)}.phone{width:clamp(210px,23vw,301px);aspect-ratio:390/830;padding:7px;overflow:hidden;border-radius:32px;border:1px solid #c5b1df91;background:#191827;box-shadow:0 28px 55px #080710cb,inset 0 0 0 2px #0b0a12}.phone img{height:100%;width:100%;border-radius:24px;object-fit:cover}.hero-phone{width:clamp(210px,22vw,278px);justify-self:center;translate:13% 0;rotate:8deg;animation:float 7s ease-in-out infinite}.hero-live{position:absolute;right:1%;bottom:15%;display:flex;align-items:center;gap:10px;z-index:1;padding:13px;border:1px solid #afead268;background:#203539e8;border-radius:14px;box-shadow:0 12px 32px #09081285;font-size:13px}.hero-live i{animation:breathe 2.3s ease-in-out infinite}.hero-live small{display:block;margin-top:5px;color:#b7dfda;font-size:8px;letter-spacing:.13em}.hero-live svg{width:49px;fill:none;stroke:#a8f4dd;stroke-width:1.5}.spark{position:absolute;font-size:27px;color:#ffe7bb;text-shadow:0 0 16px #ffd593;animation:breathe 4s ease-in-out infinite;pointer-events:none}.spark-top{right:4%;top:11%}.spark-low{left:7%;bottom:14%;color:var(--mint);animation-delay:-2s}
.features{padding:81px 0 24px}.section-heading{text-align:center;margin-bottom:37px}.section-heading .eyebrow{justify-content:center}.section-heading h2{margin:12px 0 0;font-size:clamp(32px,4.3vw,59px);letter-spacing:-.055em;line-height:1.22}.section-heading>p:last-child:not(.eyebrow){font-size:15px;color:var(--muted);margin-top:13px}.narrow{display:none}.feature{--accent:var(--rose);--wash:#6f355f80;display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:clamp(32px,8vw,120px);padding:35px 5.5%;min-height:510px;border-top:1px solid var(--line)}.feature-mint{--accent:var(--mint);--wash:#2b766d66}.feature-gold{--accent:var(--gold);--wash:#80605070}.feature-copy{position:relative;isolation:isolate}.feature-copy .eyebrow{color:var(--accent);letter-spacing:.13em}.big-number{position:absolute;font-size:clamp(110px,15vw,210px);line-height:.9;top:-45%;left:-8%;z-index:-1;color:transparent;-webkit-text-stroke:1px var(--accent);opacity:.15;font-weight:800;letter-spacing:-.1em}.feature h3{font-size:clamp(33px,4.6vw,63px);line-height:1.15;letter-spacing:-.065em;margin-top:15px}.feature-copy>p:not(.eyebrow){margin-top:17px;font-size:15px;color:#d4c5d7;line-height:1.85;max-width:34em}.feature-link{display:inline-flex;gap:12px;align-items:center;margin-top:19px;color:var(--accent);font-size:13px;font-weight:700}.feature-link:hover{text-decoration:underline}.feature-art{height:435px;position:relative;isolation:isolate;overflow:hidden;border-radius:25px;display:grid;place-items:center;border:1px solid var(--line);background:radial-gradient(ellipse at 56% 58%,var(--wash),transparent 69%),#1a1829}.feature-art::before{content:'';position:absolute;inset:14% 4%;border:1px solid var(--accent);opacity:.18;border-radius:50%;transform:rotate(-24deg);z-index:-1}.feature-phone{width:205px;rotate:7deg;translate:0 7%;border-radius:24px;padding:6px}.feature-phone img{border-radius:18px}.remote-art .feature-phone{rotate:-8deg}.reverse .feature-copy{order:2}.reverse .feature-art{order:1}.rhythm-grid{position:absolute;z-index:-1;inset:0;mask-image:radial-gradient(#000,transparent 74%);background:repeating-linear-gradient(0deg,transparent 0 22px,#f4bdd622 23px),repeating-linear-gradient(90deg,transparent 0 22px,#f4bdd622 23px)}.feature-photo{position:absolute;width:68%;height:85%;object-fit:cover;inset:10% 0 0 2%;border-radius:18px;opacity:.32;z-index:-1;filter:saturate(.7);transform:rotate(-12deg)}.rhythm-art .feature-photo,.remote-art .feature-photo{opacity:.22}.remote-art .feature-photo{left:auto;right:2%;transform:rotate(12deg)}.art-caption{position:absolute;left:15px;bottom:15px;border:1px solid var(--line);border-radius:30px;background:#1b1829de;color:var(--accent);padding:8px 10px;font-size:10px;letter-spacing:.08em}
.guide{padding:79px 0;background:radial-gradient(ellipse at 76% 42%,#375b6666,transparent 59%),radial-gradient(ellipse at 12% 47%,#65375956,transparent 57%),#171626;border-block:1px solid var(--line)}.walkthrough{display:grid;grid-template-columns:.87fr 1.13fr;align-items:center;gap:40px;border:1px solid #d2bae84d;border-radius:25px;padding:clamp(20px,5vw,52px);background:#171523a6}.step-list{display:grid;gap:9px}.step-list button{background:#1e1a2e;border:1px solid var(--line);border-radius:12px;color:#e5d5e5;display:flex;align-items:center;gap:13px;padding:12px;text-align:left;min-height:51px;font-weight:660}.step-list button b{color:#9ccfce;font-size:12px;letter-spacing:.12em}.step-list [aria-pressed="true"]{border-color:#f0a4cb97;background:linear-gradient(110deg,#65395080,#3c335b87);color:#fff0f5}.step-hint{color:#d6c0d6;line-height:1.7;margin:17px 0;min-height:3.4em;font-size:13px}.demo-stage{display:grid;gap:11px;justify-items:center;min-width:0}.demo-device{width:min(100%,410px);min-width:0;border:1px solid #c59eea68;border-radius:19px;background:#191626;padding:14px;box-shadow:0 20px 42px #08061076}.demo-bar{display:flex;align-items:center;gap:9px;color:#e5cbe4;font-size:12px}.demo-bar img{border-radius:7px}.demo-index{margin-left:auto;color:#c1cbdc;font-size:10px;letter-spacing:.12em}.demo-scene{height:231px;border:1px solid var(--line);border-radius:12px;margin-top:12px;padding:17px;display:grid;place-content:center;justify-items:center;gap:10px;overflow:hidden;background:radial-gradient(ellipse at 50% 32%,#5b315952,transparent 68%),#201a2f;animation:scene-in .35s ease-out both}.demo-scene[hidden]{display:none}.demo-scene h3{font-size:17px}.demo-scene .pill{min-height:37px}.demo-orb{width:66px;aspect-ratio:1;display:grid;place-items:center;border:1px solid #f6addc7c;border-radius:50%;font-size:36px;color:#f9b7d9;box-shadow:0 0 22px #f67cb374;animation:breathe 2.8s ease-in-out infinite}.demo-scene input:not([type="range"]){max-width:100%;width:220px;border-radius:9px;border:1px solid #d992bb69;background:#161425;color:#f8e4ef;padding:10px;text-align:center;font-weight:680;letter-spacing:.09em}.demo-message,.demo-note{font-size:11px;color:#c5aec6}.demo-meter-head{display:flex;justify-content:space-between;width:min(230px,100%);font-size:12px;color:#f0c9dc}.demo-wave{height:62px;width:min(230px,100%);border-radius:9px;overflow:hidden;background:repeating-linear-gradient(0deg,transparent 0 16px,#e0b4dc25 17px),#171629}.demo-wave svg{width:100%;height:100%;transform:scaleY(var(--demo-strength,.75));transition:transform .15s}.demo-wave path{fill:none;stroke:#f3a9ce;stroke-width:2.3;stroke-dasharray:12 5;filter:drop-shadow(0 0 5px #ff95cf);animation:dash 1.7s linear infinite}.walkthrough.paused .demo-wave path{animation-play-state:paused;opacity:.46}.demo-scene input[type="range"]{width:min(230px,100%);margin:0;accent-color:#f19dc7}.demo-progress{display:flex;gap:5px;margin-top:11px}.demo-progress i{height:3px;border-radius:20px;background:#443450;flex:1}.demo-progress .seen{background:linear-gradient(90deg,var(--lav),var(--rose));box-shadow:0 0 7px #e4a3d285}
.faq{padding:72px 0 68px}.faq details{border-bottom:1px solid var(--line);max-width:760px;margin:auto;padding:15px 0}.faq summary{cursor:pointer;color:#f0deeb;font-weight:640}.faq details p{color:var(--muted);font-size:14px;line-height:1.8;margin-top:10px}.end{display:flex;justify-content:space-between;align-items:center;gap:19px;padding:34px 39px;border-radius:21px;border:1px solid #dac0ec51;background:linear-gradient(110deg,#4a283e,#342c50 56%,#24464e);margin-bottom:46px}.end h2{font-size:clamp(28px,4vw,52px);letter-spacing:-.055em;margin-top:7px}.footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:21px 0;gap:10px;color:#c4b2c6;font-size:12px}
@keyframes breathe{0%,100%{opacity:.63}50%{opacity:1}}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}@keyframes down{50%{transform:translateY(5px)}}@keyframes threads{50%{transform:translateY(-16px);opacity:.43}}@keyframes scene-in{from{opacity:.6;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes dash{to{stroke-dashoffset:-34}}.enter{animation:scene-in .65s ease-out both}
@media(max-width:1000px){.shell{width:calc(100% - 52px)}.hero-inner{min-height:610px}.hero-art{height:450px}.hero h1{font-size:clamp(55px,8vw,81px)}.feature{gap:39px;padding-inline:3%;min-height:445px}.feature-art{height:370px}.feature-phone{width:175px}}
@media(max-width:700px){.shell{width:calc(100% - 36px)}.header-inner{height:58px;gap:12px}.header nav{display:none}.header .pill{min-height:35px;padding-inline:12px;font-size:11px}.brand img{width:32px;height:32px}.hero-inner{display:block;padding:45px 0 56px}.hero h1{font-size:clamp(54px,13.8vw,82px);margin-top:15px}.hero-lead{font-size:14px;margin-top:16px}.actions{margin-top:22px;gap:8px}.actions .pill{min-height:43px;font-size:12px;padding-inline:13px}.adult{margin-top:11px}.hero-art{height:415px;max-width:465px;margin:15px auto 0}.hero-phone{width:185px}.hero-live{right:0;bottom:12%;padding:8px;font-size:11px}.hero-live svg{width:36px}.photo-frame{height:64%;left:11%;top:17%}.scroll-link{height:33px;bottom:11px}.features,.guide,.faq{padding-block:43px}.section-heading{margin-bottom:22px}.narrow{display:initial}.feature{display:flex;flex-direction:column;gap:20px;align-items:stretch;padding:30px 0;min-height:0}.feature-copy{padding-left:4px}.feature-copy>p:not(.eyebrow){font-size:13px}.big-number{left:auto;right:8px;top:-5%;font-size:97px}.feature .feature-art{order:2;height:325px}.feature-phone{width:155px}.feature h3{font-size:37px}.feature-link{margin-top:12px}.walkthrough{grid-template-columns:1fr;gap:16px;padding:15px}.step-list button{min-height:40px;padding:8px 11px;font-size:13px}.step-hint{min-height:0;margin:11px 0}.guide .section-heading>p:last-child:not(.eyebrow){font-size:12px}.demo-scene{height:210px}.end{padding:22px 16px}.end .pill{font-size:11px;padding-inline:12px}.footer .brand{font-size:13px}}
@media(max-width:350px){.hero-art{height:365px}.hero-phone{width:160px}.hero-live svg{display:none}.feature h3{font-size:32px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

.preview-download-notice{display:none;position:fixed;z-index:20;bottom:18px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);padding:12px 16px;border:1px solid #dfbbdf6e;border-radius:12px;background:#272037;color:#ffeaf5;box-shadow:0 10px 30px #080611ad;font-size:13px;line-height:1.6}
.preview-download-notice:target{display:block}
.install-guide { margin-bottom: 32px; }
.install-panel { padding: clamp(20px, 4vw, 40px); border: 1px solid var(--line); border-radius: 21px; background: radial-gradient(ellipse at 100% 0%, #24464e65, transparent 63%), #1a192c; }
.install-panel h2 { margin-top: 8px; font-size: clamp(26px, 4vw, 42px); letter-spacing: -.04em; }
.install-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; margin: 23px 0 19px; padding: 0; list-style: none; counter-reset: install; }
.install-steps li { counter-increment: install; padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: #151523a6; }
.install-steps li::before { content: '0' counter(install); color: var(--mint); font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.install-steps h3, .install-note h3 { font-size: 15px; margin: 7px 0; }
.install-steps p, .install-note p { color: var(--muted); font-size: 13px; line-height: 1.8; }
.install-note { border-left: 2px solid var(--gold); padding: 11px 14px; border-radius: 5px 10px 10px 5px; background: #785c3b25; }
.install-note h3 { margin-top: 0; color: var(--gold); }
.install-note strong { color: var(--text); }
@media (max-width: 700px) { .install-steps { grid-template-columns: 1fr; gap: 9px; margin-block: 15px; } .install-steps li { padding: 13px; } }