:root{--bg:#f5f6fb;--ink:#202733;--muted:#89909c;--teal:#55b6a9;--line:#eaedf2}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px Arial,"PingFang SC","Microsoft YaHei",sans-serif}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}button{border:0;background:none;color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #8dcec5;outline-offset:4px}header{height:78px;background:#ffffffed;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:30px;padding:0 max(24px,calc((100vw - 1320px)/2));position:sticky;top:0;z-index:10;backdrop-filter:blur(12px)}.brand{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:700;white-space:nowrap}.logo{display:grid;place-items:center;width:43px;height:43px;border-radius:13px;background:linear-gradient(135deg,#e5f7ef,#eef1ff);color:#45a59e;font-size:17px;letter-spacing:-1px}.brand small{display:block;font-size:9px;font-weight:400;letter-spacing:1.7px;color:var(--muted);margin-top:5px}nav{display:flex;gap:10px;margin:auto}nav a,nav button{padding:11px 15px;color:#7d8490;font-size:13px;border-radius:10px}nav .active{background:#eaf5f3;color:#5b988e}.cart-button{padding:10px 14px;border:1px solid var(--line);border-radius:11px;font-size:20px}.cart-button span{font-size:11px;background:#e5f2ee;color:#378b80;border-radius:99px;padding:3px 6px}main{max-width:1320px;padding:0 28px;margin:auto}.preview{padding:12px 0;color:#7b918e;font-size:11px;text-align:right}.hero{display:flex;justify-content:space-between;align-items:end;padding:27px 0 34px;gap:40px}.eyebrow{font-size:10px;letter-spacing:1.7px;font-weight:bold;color:#74a09a}h1{font-size:39px;line-height:1.3;letter-spacing:-1.6px;margin:10px 0}h1 span{display:block;color:#78808d}p{color:var(--muted);line-height:1.8}.hero p{font-size:13px;margin-bottom:0}.search-wrap{display:flex;gap:10px;min-width:420px;margin-bottom:4px}.search{display:flex;align-items:center;gap:12px;background:white;border:1px solid var(--line);border-radius:13px;padding:12px 16px;box-shadow:0 8px 20px #29385306;flex:1}.search span{font-size:22px;color:#89909c}.search input{border:0;outline:0;min-width:0;width:100%;background:none;font-size:13px;color:var(--ink)}.white-button{border:1px solid var(--line);border-radius:12px;background:white;padding:13px 17px;color:#60998f;font-size:12px;white-space:nowrap;box-shadow:0 6px 16px #29385304}h2{font-size:22px;margin:8px 0 20px;letter-spacing:-.5px}.featured{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.feature{background:#fff;border:1px solid var(--line);border-radius:27px;padding:25px 23px 20px;box-shadow:0 9px 26px #242e4806;overflow:hidden}.feature h3{font-size:25px;letter-spacing:-1px;margin:0 0 4px}.feature h3 span{color:#58a698}.feature h3 .gold-text{color:#b8a064}.feature p{font-size:12px;margin:0}.art{height:210px;position:relative;margin:18px -4px 8px;display:grid;place-items:center}.stack .pass{position:absolute;width:66%;height:124px;padding:17px 18px;border-radius:17px;box-shadow:0 18px 25px #26423620;border:1px solid #ffffff99;color:#284e46}.pass small{font-size:10px;display:block}.pass strong{font-size:24px;display:block;margin-top:9px}.pass b{display:block;text-align:right;margin-top:7px;font-size:16px}.pass.gold{background:linear-gradient(125deg,#fff8e9,#f2d9a7);transform:translate(35px,-30px) rotate(10deg)}.pass.purple{background:linear-gradient(125deg,#eee8ff,#cfc1ef);transform:translate(12px,-5px) rotate(2deg)}.pass.mint{background:linear-gradient(125deg,#e5faf2,#b9e8df);transform:translate(-20px,21px) rotate(-9deg)}.terminal>div{width:85%;height:158px;background:linear-gradient(140deg,#323840,#11151a);color:white;border-radius:18px;transform:rotate(-8deg);padding:24px;box-shadow:0 20px 24px #17273226}.terminal small{font-size:8px;letter-spacing:1.7px;color:#9ba7a9}.terminal strong{display:block;font-size:27px;margin:13px 0}.terminal strong span{color:#97d8ca}.terminal code{font-size:10px;color:#a3aaa9}.terminal p{font-size:8px;letter-spacing:2px;margin-top:16px;color:#97aaa5}.support{background:linear-gradient(130deg,#f9f1e6,#f5ecf3);border-radius:20px}.avatar{height:105px;width:105px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:40%;background:linear-gradient(130deg,#e8f7ee,#cae9e6);font-size:33px;color:#469e90;font-weight:bold;box-shadow:0 15px 35px #b4b9a733;border:5px solid white;z-index:1}.avatar small{font-size:9px;margin-top:8px;letter-spacing:1px}.orbit{position:absolute;width:175px;height:155px;border:1px dashed #dec5b3;border-radius:50%;transform:rotate(-20deg)}.bubble{position:absolute;font-size:9px;border:1px solid white;padding:7px 10px;border-radius:20px;box-shadow:0 5px 10px #998f8710}.b1{top:25px;left:20px;background:#e0f4ee;color:#52a894}.b2{bottom:27px;right:12px;background:#efe2fa;color:#a080bb}.b3{top:33px;right:16px;background:#fae8c8;color:#b49a5f}.feature-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:17px}.money{font-size:23px;font-weight:700;letter-spacing:-.6px}.money small{font-size:11px;color:var(--muted);font-weight:normal;letter-spacing:0}.money em{font-size:10px;font-weight:normal;font-style:normal;display:block;color:var(--muted);margin-top:5px;letter-spacing:0}.pill{background:linear-gradient(100deg,#53aea0,#77c8bd);color:#174a42;font-size:12px;font-weight:600;padding:12px 17px;border-radius:100px;white-space:nowrap;box-shadow:0 7px 14px #64b6ac1a}.banner{margin:25px 0 30px;background:linear-gradient(100deg,#ffffff,#edf7f6);border:1px solid var(--line);border-radius:23px;display:flex;align-items:center;gap:20px;padding:23px 28px}.banner-symbol{background:#e6f1fd;border-radius:15px;color:#90afcf;font-size:27px;padding:14px 17px}.banner h3{font-size:19px;margin:0}.banner p{font-size:12px;margin:6px 0 0}.banner button{margin-left:auto}.store{display:grid;grid-template-columns:240px 1fr;gap:20px;scroll-margin-top:100px}aside{background:#fff;border:1px solid var(--line);border-radius:24px;height:fit-content;overflow:hidden;position:sticky;top:100px}.aside-head{padding:22px 20px 0;border-bottom:1px solid var(--line)}.aside-head h2{font-size:19px}.categories{padding:12px 10px}.categories button{width:100%;display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;color:#79828b;font-size:12px;text-align:left;margin-bottom:5px;border:1px solid transparent}.categories .selected{background:#edf6f4;border-color:#d7e9e4;color:#365b53}.category-icon{font-size:20px;width:34px;height:34px;display:grid;place-items:center;background:#f0f3f7;border-radius:9px;color:#626b78}.category-icon.warm{color:#bba264;background:#f7f1e3}.category-icon.lilac{background:#f0edff;color:#9788d0;font-size:15px}.categories small{margin-left:auto;border-radius:99px;background:#f5f6f8;padding:3px 7px;font-size:10px}.aside-note{padding:4px 20px 23px;color:#8d969e;line-height:1.8;font-size:11px}.catalog-head{display:flex;justify-content:space-between;align-items:center}.catalog-head h2{font-size:21px;margin:5px 0 20px}.catalog-head>span{font-size:11px;color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.product{background:#ffffffbd;border:1px solid var(--line);border-radius:21px;padding:22px 20px;position:relative;overflow:hidden;box-shadow:0 9px 25px #28314b04;text-align:left;width:100%;transition:transform .15s,box-shadow .15s}.product:hover{transform:translateY(-3px);box-shadow:0 12px 28px #28314b10}.product:before{content:"";position:absolute;width:95px;height:95px;right:-10px;top:-25px;background:#edf7f4;border-radius:50%;z-index:0}.product-top{display:flex;align-items:center;justify-content:space-between;position:relative}.product-icon{background:#eef1f6;width:55px;height:55px;display:grid;place-items:center;border-radius:16px;font-size:30px;color:#5f6875}.badge{background:#faf6ea;color:#b7a474;font-size:10px;padding:5px 8px;border-radius:99px}.product h3{font-size:16px;margin:20px 0 8px;line-height:1.5}.product p{font-size:11px;margin:0 0 12px}.tags{display:flex;gap:6px}.tags span{font-size:10px;background:#eaf6f2;color:#74a89c;padding:5px 7px;border-radius:99px}.tags span+span{background:#edf4ff;color:#7f9ec4}.product-bottom{border-top:1px solid var(--line);margin-top:25px;padding-top:17px;display:flex;justify-content:space-between;align-items:center;gap:5px}.product-bottom span{font-size:10px;color:#9ca1ab}.product-bottom strong{font-size:22px;color:#4b5260}.product-bottom small{font-size:9px;color:#77a296}.source{font-size:11px;line-height:1.8;margin:20px 0;color:#969da7}.source a{text-decoration:underline}.empty{background:white;padding:45px;text-align:center;border-radius:20px;color:var(--muted)}.empty button{display:block;margin:20px auto 0}footer{padding:40px 0 30px;margin-top:30px;border-top:1px solid #e4e8ee}footer p{font-size:12px}footer button{padding:10px 20px 10px 0;font-size:12px;color:#6d8090}footer>small{display:block;margin-top:15px;color:#959ca6;font-size:11px}.floating{position:fixed;right:18px;bottom:65px;background:white;border:1px solid var(--line);border-radius:18px;padding:15px;box-shadow:0 8px 25px #29384712;color:#63a79e;font-size:22px;z-index:9}.floating span{display:block;font-size:11px;line-height:1.8;color:#67747e;margin-top:8px}dialog{width:min(740px,calc(100% - 28px));max-height:90vh;overflow:auto;border:1px solid var(--line);border-radius:24px;padding:28px;color:var(--ink);box-shadow:0 30px 100px #17283722}dialog::backdrop{background:#2d36435a;backdrop-filter:blur(6px)}.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.modal-head h2{font-size:22px;margin:0}.modal-head button{width:35px;height:35px;background:#f2f5f8;border-radius:50%;font-size:23px;color:#8b96a3}.detail-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:26px}.detail-art{background:linear-gradient(135deg,#e3f7f0,#eef0ff);border-radius:19px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:260px;padding:24px}.detail-art strong{font-size:42px;color:#55a798}.detail-art span{margin-top:18px;letter-spacing:3px;color:#8b9aab}.detail-info h3{font-size:24px;margin:12px 0}.detail-price{font-size:34px;font-weight:700;margin:12px 0}.detail-price small{font-size:12px;font-weight:normal;color:var(--muted)}.detail-info p{font-size:12px}.spec{background:#edf7f4;border:1px solid #84c4b9;border-radius:12px;padding:12px 15px;font-size:12px;color:#4b8279}.modal-buttons{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}.panel{background:#f4f7fa;border-radius:12px;padding:16px;color:#73828d;line-height:1.9;font-size:13px;margin:16px 0}.wechat{font-size:29px;letter-spacing:1px;color:#3a8e81}.list-row{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding:14px 0}.list-row small{display:block;color:var(--muted);margin-top:5px}.list-row button{color:#a17c77;font-size:12px}.guide{counter-reset:steps}.guide p{padding:10px 0;font-size:13px;line-height:1.9}.guide p strong{color:var(--ink)}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#243a36;color:white;padding:12px 22px;border-radius:12px;font-size:12px;z-index:100;display:none;max-width:90%;text-align:center}@media(min-width:1400px){h1 span{display:inline}}@media(max-width:1050px){.hero{display:block}.search-wrap{max-width:600px;margin-top:24px;min-width:0}.feature{padding:22px 17px}.feature h3{font-size:21px}.feature-bottom .money{font-size:18px}.grid{grid-template-columns:repeat(2,1fr)}.store{grid-template-columns:210px 1fr}header nav{gap:0}header nav a,header nav button{padding:10px;font-size:12px}}@media(max-width:720px){header{padding:0 18px;height:70px;gap:12px}.brand{font-size:16px}.brand small{font-size:8px}nav{margin-left:auto}nav button{display:none}.cart-button{padding:8px}main{padding:0 18px}.preview{text-align:left;font-size:10px;line-height:1.8}.hero{padding:20px 0 28px}h1{font-size:31px;letter-spacing:-1px}.search-wrap{gap:8px}.search{padding:8px 12px}.white-button{padding:11px;font-size:11px}.featured{grid-template-columns:1fr;gap:16px}.feature{padding:23px;border-radius:23px}.feature h3{font-size:25px}.art{height:200px;max-width:330px;margin:18px auto 0}.feature-bottom .money{font-size:23px}.banner{padding:20px;gap:14px;flex-wrap:wrap}.banner-symbol{display:none}.banner h3{font-size:17px}.banner button{margin-left:0}.store{grid-template-columns:1fr;gap:23px}aside{position:static;border-radius:18px}.aside-head{padding:16px 16px 0}.aside-head h2{margin-bottom:12px;font-size:17px}.categories{display:flex;padding:10px;gap:6px;overflow:auto}.categories button{white-space:nowrap;padding:7px;margin:0;width:auto;flex-shrink:0;font-size:11px}.category-icon{width:27px;height:27px;font-size:16px}.aside-note{padding:0 16px 12px;font-size:10px}.grid{gap:12px}.product{padding:16px 13px;border-radius:17px}.product-icon{width:43px;height:43px;font-size:25px}.product h3{font-size:14px}.product-bottom{display:block}.product-bottom small{display:block;margin-top:8px}.product-bottom strong{font-size:21px}.tags{gap:4px}.tags span{font-size:9px;padding:4px 5px}.floating{right:9px;bottom:30px;padding:10px;font-size:20px}.floating span{font-size:10px}.detail-grid{grid-template-columns:1fr}.detail-art{min-height:160px}.detail-art strong{font-size:35px}dialog{padding:22px}.modal-head h2{font-size:20px}.source{padding-right:30px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

#home{scroll-margin-top:90px}@media(max-width:720px){.floating{display:none}}
/* Reference-inspired motion */
html{scroll-behavior:smooth}.hero .eyebrow{animation:text-in .7s both}.hero h1{animation:text-in .8s .08s both}.hero p{animation:text-in .8s .16s both}.search-wrap{animation:text-in .8s .22s both}.feature{transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s,border-color .3s}.feature.reveal,.banner.reveal,.product.reveal{opacity:0;transform:translateY(28px)}.reveal.is-in{animation:rise .75s cubic-bezier(.22,1,.36,1) var(--delay,0s) both}.feature:nth-child(2){--delay:.1s}.feature:nth-child(3){--delay:.2s}.stack{animation:float 6s ease-in-out infinite}.pass{transition:transform .7s cubic-bezier(.22,1,.36,1)}.terminal{animation:float 5.4s ease-in-out .3s infinite}.terminal>div{position:relative;overflow:hidden;transition:transform .7s}.terminal>div:after{content:"";position:absolute;inset:-40% -80%;background:linear-gradient(110deg,transparent 40%,#ffffff12 49%,transparent 58%);animation:sheen 5s ease-in-out infinite;pointer-events:none}.orbit{animation:orbit 18s linear infinite}.avatar{animation:float 6s ease-in-out .8s infinite}.bubble{animation:float 5s ease-in-out infinite}.b2{animation-delay:-1.5s}.b3{animation-delay:-3s}.pill,.white-button,.cart-button,.categories button,nav button,nav a{transition:transform .2s,background .15s,color .15s,box-shadow .3s,border-color .15s}.pill:active,.white-button:active,.cart-button:active{transform:scale(.97)}.search{transition:border-color .15s,box-shadow .2s}.search:focus-within{border-color:#82c6bb;box-shadow:0 0 0 3px #80c8bc12}.product{transition:transform .45s,box-shadow .45s,border-color .3s}.product-icon{transition:transform .45s}.cart-button.bump{animation:bump .35s ease}.floating{animation:text-in .6s .5s both;transition:transform .2s,box-shadow .2s}dialog[open]{animation:dialog-in .24s cubic-bezier(.22,1,.36,1) both}dialog[open]::backdrop{animation:fade .2s both}#toast{animation:toast-in .2s both}
@media(hover:hover){.feature.is-in:hover{animation-fill-mode:backwards;transform:translateY(-6px);border-color:#d5e9e3;box-shadow:0 18px 36px #324a5611}.feature:hover .pass.gold{transform:translate(46px,-38px) rotate(14deg)}.feature:hover .pass.purple{transform:translate(12px,-9px) rotate(3deg)}.feature:hover .pass.mint{transform:translate(-32px,26px) rotate(-12deg)}.feature:hover .terminal>div{transform:rotate(-5deg) scale(1.025)}.product.is-in:hover{animation-fill-mode:backwards;transform:translateY(-5px);border-color:#d5e9e3}.product:hover .product-icon{transform:rotate(-5deg) scale(1.06)}.pill:hover{transform:translateY(-2px);box-shadow:0 9px 20px #58a99e25}.white-button:hover{border-color:#c7e2da;background:#f5fbf9}.categories button:hover,nav button:hover{background:#edf6f3}.floating:hover{transform:translateY(-3px)}}
@keyframes text-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}@keyframes sheen{0%,25%{transform:translateX(-45%)}75%,100%{transform:translateX(45%)}}@keyframes orbit{from{transform:rotate(-20deg)}to{transform:rotate(340deg)}}@keyframes dialog-in{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes fade{from{opacity:0}to{opacity:1}}@keyframes toast-in{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}@keyframes bump{50%{transform:scale(1.1)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal,.feature.reveal,.banner.reveal,.product.reveal{opacity:1;transform:none}}
.feature.reveal.is-in,.banner.reveal.is-in,.product.reveal.is-in{opacity:1;transform:translateY(0)}@media(hover:hover){.feature.reveal.is-in:hover{transform:translateY(-6px)}.product.reveal.is-in:hover{transform:translateY(-5px)}}
.product-details{white-space:pre-wrap}.detail-art strong{font-size:30px;overflow-wrap:anywhere;text-align:center}.feature h3{overflow-wrap:anywhere}.pass strong{font-size:19px;max-height:50px;overflow:hidden}.feature .money{font-size:22px}
