body:has(.hero){background:#f7f8fa;color:#202124;font-family:"Geist","PingFang SC","Microsoft YaHei",sans-serif;margin:0}


.hero-nav-link{border-radius:7px;transition:color 180ms,background-color 180ms}
.nav-word{position:relative;display:block;overflow:hidden;line-height:24px;height:24px;white-space:nowrap}
.nav-word>span{display:block;transition:transform 320ms cubic-bezier(.16,1,.3,1)}
.nav-word>span+span{position:absolute;top:100%;left:0;color:#20252b}
.hero-nav-link:hover{color:#20252b;background:#e8eaf080}
.hero-nav-link:hover .nav-word>span{transform:translateY(-100%)}
.hero-nav-link:focus-visible{outline:2px solid #66758d;outline-offset:2px;background:#eef1f6}
@media(prefers-reduced-motion:reduce){.nav-word>span{transition:none}.hero-nav-link:hover .nav-word>span{transform:none}}

.collection{width:calc(100% - 64px);max-width:1240px;margin:0 auto;padding-inline:0;padding-bottom:clamp(32px,6vw,64px);padding-top:108px}
.collection[inert]>:not(#filter){visibility:hidden;pointer-events:none}
@media(max-width:760px){.collection{width:calc(100% - 40px);padding-top:92px}}
.results-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:28px 0 18px}
.results-heading h2{font-size:20px;font-weight:550;margin:0}
.cards-grid{margin-top:0}

.hero .design-button{--engage:0;--press:1;position:relative;display:inline-flex;align-items:center;justify-content:center;isolation:isolate;min-height:56px;padding:0;border:0;border-radius:10px;background:transparent;color:#f9fafb;font-family:inherit;font-size:16px;font-weight:500;cursor:pointer}
.hero .button-surface,.hero .button-content,.hero .button-flip{border-radius:inherit;transition:transform 120ms ease-out}
.hero .button-surface{position:absolute;inset:0;overflow:hidden;background:#1b1d20;transform:scaleY(var(--press));z-index:-1;box-shadow:0 3px 6px #00000016,inset 0 1px 0 #ffffff24}
.hero .button-content,.hero .button-flip{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;width:100%;padding:14px 22px;transform:scaleY(var(--press));position:relative;overflow:hidden;white-space:nowrap}
.hero .button-arrow{display:flex;align-items:center;justify-content:center;position:relative;flex:none;width:22px;height:24px}
.hero .button-arrow svg{width:20px;height:20px;transform:translateX(calc(var(--engage)*3px));transition:transform 220ms ease-out}
.hero .button-flip{position:absolute;inset:0;background:#ff923d;color:#1b1d20;clip-path:inset(calc((1 - var(--engage))*100%) 0 0);transition:clip-path 300ms cubic-bezier(.16,1,.3,1),transform 120ms ease-out;box-shadow:inset 0 1px 0 #ffffff60}
.hero .design-button .button-arrow{color:#ff9a4d}
.hero .design-button:focus-visible{--engage:1;outline:2px solid #202124;outline-offset:4px}
@media(hover:hover){.hero .design-button:hover:not(:disabled){--engage:1}}
.hero .design-button:active:not(:disabled){--engage:1;--press:.96}
.hero .design-button{--layer-offset:calc(6px + var(--engage)*2px - (1 - var(--press))*150px)}
.hero .button-backplate{display:block;position:absolute;inset:0;z-index:-2;border-radius:inherit;background:#ff923d;transform:translate(var(--layer-offset),calc(-1*var(--layer-offset)));transition:transform 280ms cubic-bezier(.16,1,.3,1);overflow:hidden}
.hero .button-backplate:after{content:"";position:absolute;inset:0;background:#25272b;opacity:var(--engage);transition:opacity 220ms ease-out}
.hero .button-arrow{padding-left:12px;width:35px;border-left:1px solid #ffffff26}
.hero :is(.button-surface,.button-content,.button-flip){transform:translate(calc((1 - var(--press))*35px),calc((var(--press) - 1)*35px)) scaleY(var(--press))}
@media(max-width:760px){
  .hero .design-button{--layer-offset:calc(5px + var(--engage)*1px - (1 - var(--press))*100px)}
  .hero .button-arrow{padding-left:6px;width:24px}
  .hero-action :is(.button-content,.button-flip){padding-inline:12px;gap:8px}
}
@media(prefers-reduced-motion:reduce){
  .hero .button-backplate{transform:translate(6px,-6px)}
  .hero :is(.button-surface,.button-content,.button-flip){transform:none}
  .hero .button-backplate:after{transition:none}
}
@media(min-width:761px){
  .hero-social{gap:16px}
  .hero-social .design-button{width:auto;flex:0 1 auto;min-width:0}
  .hero-social .design-button :is(.button-content,.button-flip){padding-inline:16px;gap:10px}
  .hero-social .design-button .button-arrow{padding-left:8px;width:26px}
}

.hero-platform-entry,.hero-qq-entry{position:relative}
.hero-platform-panel,.hero-qq-panel{position:absolute;left:0;bottom:calc(100% + 14px);z-index:8;border-radius:16px;background:#fff;border:1px solid #dee4e8;box-shadow:0 18px 38px -26px #384e6947,0 2px 10px #384e6912;animation:hero-qq-panel-in 200ms cubic-bezier(.16,1,.3,1)}
.hero-platform-panel{width:240px;padding:16px}
.hero-platform-panel strong{display:block;margin-bottom:10px;font-size:13px;color:#25272b}
.platform-list{display:grid;gap:8px}
.platform-item{display:grid;gap:8px}
.platform-qr{display:block;width:128px;height:128px;object-fit:cover;border-radius:8px;background:#f4f5f6;margin:0 auto}
.platform-caption{font-size:12px;line-height:1.3;color:#59616b;text-align:center}
.platform-action{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:10px 12px;border-radius:9px;background:#1b1d20;color:#f9fafb;text-decoration:none;font-size:13px;transition:transform 180ms ease,background-color 180ms ease,box-shadow 180ms ease}
.platform-action svg{width:17px;height:17px;flex:none;color:#ff9a4d;transition:transform 180ms ease}
.platform-action:hover,.platform-action:focus-visible{background:#ff923d;color:#1b1d20;transform:translateY(-2px);box-shadow:0 6px 12px #1b1d2026}
.platform-action:hover svg,.platform-action:focus-visible svg{color:#1b1d20;transform:translateX(3px)}
.platform-pending{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:9px;background:#f4f5f6;color:#8a929c;font-size:13px}
.platform-pending small{font-size:11px}

.hero-qq-panel-dual{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:min(470px,calc(100vw - 40px));text-align:center;padding:16px}
.hero-qq-card{min-width:0}
.hero-qq-card strong{display:block;margin-bottom:8px;font-size:13px;color:#25272b}
.hero-qq-card img{display:block;width:100%;height:auto;border-radius:8px}  
.hero-qq-card a{display:flex;align-items:center;justify-content:center;min-height:38px;margin-top:10px;padding:8px 10px;border-radius:8px;background:#1b1d20;color:#f9fafb;font-size:12px;font-weight:600;text-decoration:none;transition:transform 180ms ease,background-color 180ms ease,box-shadow 180ms ease}
.hero-qq-card a:hover,.hero-qq-card a:focus-visible{background:#ff923d;color:#1b1d20;transform:translateY(-2px);box-shadow:0 6px 12px #1b1d2026}
@keyframes hero-qq-panel-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(max-width:760px){
  .hero-qq-panel-dual{width:min(350px,calc(100vw - 28px));gap:8px;padding:10px}
  .hero-qq-card strong{font-size:11px;margin-bottom:5px}
  .hero-qq-card a{font-size:10px;margin-top:5px}
  .hero-platform-panel{width:200px}
}
@media(prefers-reduced-motion:reduce){.hero-platform-panel,.hero-qq-panel{animation:none}}

.hero-search{position:absolute;z-index:20;left:5%;top:calc(32% + min(5.3vw,96px) + 104px);width:clamp(300px,32vw,560px)}
.hero-find{position:relative}
.hero-find-box{display:flex;align-items:center;gap:14px;min-height:64px;padding:0 26px;border-radius:999px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.95);box-shadow:0 14px 36px rgba(34,38,43,.12),inset 0 1px 0 #fff;-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);color:#59616b;cursor:text;transition:box-shadow 200ms ease-out}
.hero-find-box:focus-within{box-shadow:0 18px 44px rgba(34,38,43,.16),inset 0 1px 0 #fff}
.hero-find-box svg{flex:none;width:24px;height:24px}
.hero-find-box input{flex:1;min-width:0;height:62px;border:0;background:transparent;color:#22262b;font:inherit;font-size:clamp(16px,1.25vw,20px);outline:none;-webkit-appearance:none;appearance:none}
.hero-find-box input:focus,.hero-find-box input:focus-visible{outline:none;box-shadow:none}
.hero-find-box input::placeholder{color:#8a9199}
.hero-find-list{position:absolute;left:0;right:0;top:calc(100% + 10px);z-index:5;display:grid;gap:2px;max-height:min(52vh,420px);overflow:auto;padding:8px;border-radius:22px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid #fff;box-shadow:0 18px 44px rgba(34,38,43,.16);color:#22262b}
.hero-find-list[hidden]{display:none}
.hero-find-list a{display:flex;align-items:center;gap:14px;padding:8px 12px;border-radius:14px;color:inherit;text-decoration:none}
.hero-find-list a:hover,.hero-find-list a[aria-selected="true"]{background:#f1f3f5}
.hero-find-list a small{display:block;font-size:12px;color:#7b838d}
.hero-find-thumb{flex:none;width:44px;height:44px;border-radius:10px;background:#fff;overflow:hidden;border:1px solid #eef0f2}
.hero-find-thumb img{width:100%;height:100%;object-fit:contain}
.hero-find-hint,.hero-find-empty{margin:6px 12px 4px;font-size:12px;color:#7b838d}
@media(max-width:760px){
  .home-entry>.hero{position:relative;inset:auto;height:auto;min-height:0;padding:72px 5% 28px;display:flex;flex-direction:column;gap:18px}
  .home-entry>.collection{padding-top:24px}
  .hero .pour-title,.hero .hero-intro,.hero .hero-action,.hero .hero-search,.hero .hero-social{position:static;inset:auto;width:auto;max-width:none;transform:none!important;opacity:1!important}
  .hero .hero-title{display:block}
  .hero .hero-title span{position:static;display:inline;font-size:clamp(28px,8vw,40px);white-space:normal}
  .hero .hero-title span+span{margin-left:.25em}
  .hero-intro h2{font-size:18px}
  .hero-action{order:4}
  .hero-social{order:5}
  .hero-find-box{min-height:54px;padding:0 18px}.hero-find-box input{height:52px}
}
.hero-find-head{margin:6px 12px 4px;font-size:12px;font-weight:600;color:#59616b;letter-spacing:.02em}
@media(min-width:761px){.hero .hero-intro{top:calc(32% + min(5.3vw,96px) + 12px);left:calc(5% + .06em)}
.hero .hero-intro h2{font-size:clamp(17px,2.02vw,37px);font-weight:300;letter-spacing:.06em;line-height:1.15;color:rgba(34,38,43,.72)}
.hero .hero-search{top:calc(32% + min(5.3vw,96px) + min(2.02vw,37px) + 58px)}}