.xp{background:var(--ink-0);min-height:100svh}.xp-top{border-bottom:1px solid var(--line);grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px;padding:18px clamp(16px,4vw,48px);display:grid}.xp-brand{font:800 20px var(--f-display);color:var(--text);align-items:center;gap:10px;text-decoration:none;display:inline-flex}.xp-search{background:var(--ink-1);border:1px solid var(--line-2);min-height:48px;color:var(--muted);border-radius:99px;justify-self:center;align-items:center;gap:10px;width:100%;max-width:720px;padding:0 16px;display:flex}.xp-search:focus-within{border-color:var(--flux)}.xp-search input{min-width:0;color:var(--text);font:inherit;background:0 0;border:0;outline:none;flex:1;font-size:15px}.xp-acts{gap:8px;display:flex}.xp-cats{border-bottom:1px solid var(--line);scrollbar-width:none;gap:6px;padding:12px clamp(16px,4vw,48px);display:flex;overflow-x:auto}.xp-cats::-webkit-scrollbar{display:none}.xp-cats a{min-height:38px;color:var(--muted);white-space:nowrap;border:1px solid #0000;border-radius:99px;flex:none;align-items:center;gap:8px;padding:0 14px;font-size:14px;font-weight:600;text-decoration:none;transition:background .2s,color .2s;display:inline-flex}.xp-cats a:hover{color:var(--text);background:var(--ink-1)}.xp-cats a[aria-current=page]{color:var(--text);border-color:var(--line-2);background:var(--ink-2)}.xp-cats i{background:var(--cc,var(--muted));border-radius:99px;width:9px;height:9px}.xp-cats small{color:var(--faint);font-weight:500}.xp-cats a:focus-visible,.xp-sorts a:focus-visible,.xp-card a:focus-visible{outline:2px solid var(--flux);outline-offset:2px}.xp-main{max-width:1440px;margin:0 auto;padding:32px clamp(16px,4vw,48px) 56px}.xp-hero h1{font:800 clamp(30px,4vw,48px)/1.08 var(--f-display);margin:0 0 8px}.xp-hero p{color:var(--muted);max-width:60ch;margin:0 0 32px;line-height:1.5}.xp-sec{margin-bottom:44px}.xp-sec h2{font:800 22px var(--f-display);margin:0 0 16px}.xp-rail{scroll-snap-type:x mandatory;scrollbar-width:thin;grid-auto-columns:min(640px,86vw);grid-auto-flow:column;gap:16px;padding-bottom:6px;display:grid;overflow-x:auto}.xp-rail>*{scroll-snap-align:start}.xp-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;display:flex}.xp-bar h2{margin:0}.xp-sorts{background:var(--ink-1);border:1px solid var(--line);border-radius:99px;gap:2px;padding:4px;display:inline-flex}.xp-sorts a{min-height:36px;color:var(--muted);border-radius:99px;align-items:center;padding:0 14px;font-size:14px;font-weight:600;text-decoration:none;display:inline-flex}.xp-sorts a[aria-current=true]{background:var(--ink-3);color:var(--text)}.xp-grid-wrap{grid-template-columns:260px minmax(0,1fr);align-items:start;gap:24px;display:grid}.xp-filters{border:1px solid var(--line);border-radius:var(--r-l);background:var(--ink-1);position:sticky;top:16px;overflow:hidden}.xp-filters details{border-bottom:1px solid var(--line)}.xp-filters summary{cursor:pointer;justify-content:space-between;align-items:center;padding:14px 16px;font-weight:700;list-style:none;display:flex}.xp-filters summary:after{content:"";border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);width:8px;height:8px;transition:transform .2s var(--ease);transform:rotate(45deg)}.xp-filters details[open] summary:after{transform:rotate(225deg)}.xp-filters summary::-webkit-details-marker{display:none}.xp-filters summary:focus-visible{outline:2px solid var(--flux);outline-offset:-2px}.xp-opts{flex-direction:column;gap:2px;max-height:280px;padding:0 10px 12px;display:flex;overflow:auto}.xp-opts label,.xp-chk{cursor:pointer;border-radius:10px;align-items:center;gap:10px;min-height:36px;padding:0 6px;font-size:14px;display:flex}.xp-opts label:hover{background:var(--ink-2)}.xp-opts small{color:var(--faint);margin-left:auto}.xp-opts input,.xp-chk input{accent-color:var(--flux);width:16px;height:16px}.xp-chk{padding:0 16px 12px}.xp-price-in{grid-template-columns:1fr 1fr;gap:8px;padding:0 16px 10px;display:grid}.xp-price-in label{color:var(--muted);flex-direction:column;gap:4px;font-size:12px;display:flex}.xp-price-in input{border:1px solid var(--line-2);background:var(--ink-0);min-height:40px;color:var(--text);font:inherit;border-radius:10px;width:100%;padding:0 10px}.xp-fbtn{gap:8px;padding:14px 16px;display:flex}.xp-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;display:grid}.xp-card{border-radius:var(--r-l);background:var(--ink-1);border:1px solid var(--line);transition:transform .25s var(--ease),border-color .25s,box-shadow .25s;flex-direction:column;display:flex;position:relative;overflow:hidden}.xp-card:hover{border-color:var(--line-2);transform:translateY(-3px);box-shadow:0 18px 40px -24px #000c}.xp-im{aspect-ratio:1;background:var(--ink-2);place-items:center;display:grid;overflow:hidden}.xp-im img{object-fit:cover;width:100%;height:100%;transition:transform .5s var(--ease)}.xp-card:hover .xp-im img{transform:scale(1.03)}.xp-im span{font:800 48px var(--f-display);color:var(--faint)}.xp-bd{flex-direction:column;flex:1;gap:8px;padding:14px 16px 16px;display:flex}.xp-bd h3{font:700 17px/1.3 var(--f-body);-webkit-line-clamp:3;-webkit-box-orient:vertical;margin:0;display:-webkit-box;overflow:hidden}.xp-bd h3 a{color:var(--text);text-decoration:none}.xp-stretch:after{content:"";z-index:1;position:absolute;inset:0}.xp-by{z-index:2;color:var(--muted);align-self:flex-start;align-items:center;gap:8px;font-size:14px;text-decoration:none;display:inline-flex;position:relative}.xp-by:hover{color:var(--text);text-decoration:underline}.xp-by img,.xp-by i{object-fit:cover;background:var(--ink-3);width:22px;height:22px;color:var(--text);border-radius:99px;place-items:center;font-size:11px;font-style:normal;font-weight:700;display:grid}.xp-ft{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-top:auto;padding-top:8px;display:flex}.xp-price{background:var(--flux);color:#17130a;border-radius:99px;align-items:center;min-height:30px;padding:0 12px;font-size:14px;font-weight:800;display:inline-flex}.xp-price.free{background:var(--ok);color:#06210f}.xp-rate{align-items:center;gap:6px;font-size:14px;font-weight:700;display:inline-flex}.xp-rate small{color:var(--muted);font-weight:500}.xp-stars{gap:1px;display:inline-flex}.xp-stars i{background:var(--ink-3);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);width:13px;height:13px}.xp-stars i.on{background:var(--flux)}.xp-stars i.half{background:linear-gradient(90deg,var(--flux) 50%,var(--ink-3) 50%)}.xp-card.wide{flex-direction:row;min-height:300px}.xp-card.wide .xp-im{aspect-ratio:auto;flex:none;width:46%}.xp-card.wide .xp-bd{padding:22px}.xp-card.wide h3{font-size:22px;font-family:var(--f-display)}.xp-desc{color:var(--muted);-webkit-line-clamp:5;-webkit-box-orient:vertical;margin:0;font-size:14px;line-height:1.5;display:-webkit-box;overflow:hidden}.xp-empty{text-align:center;border:1px dashed var(--line-2);border-radius:var(--r-l);color:var(--muted);padding:48px 24px}.xp-empty b{color:var(--text);font-size:18px}.xp-more{justify-content:center;margin-top:24px;display:flex}.xp-foot{border-top:1px solid var(--line);text-align:center;color:var(--muted);padding:28px 16px}.xp-foot a{color:var(--flux)}@media (min-width:1700px){.xp-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (max-width:75rem){.xp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:60rem){.xp-top{grid-template-columns:1fr auto}.xp-search{grid-area:2/1/auto/-1;max-width:none}.xp-hero,.xp-sec>h2{text-align:center}.xp-hero p{margin-left:auto;margin-right:auto}.xp-bar{flex-direction:column}.xp-grid-wrap{grid-template-columns:1fr}.xp-filters{position:static}.xp-card.wide{flex-direction:column}.xp-fbtn{justify-content:center}.xp-card.wide .xp-im{aspect-ratio:16/10;width:100%}}@media (max-width:30rem){.xp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.xp-grid .xp-bd{gap:6px;padding:10px 10px 12px}.xp-grid .xp-bd h3{font-size:14px}.xp-grid .xp-by,.xp-grid .xp-rate{font-size:12px}.xp-grid .xp-stars{display:none}.xp-grid .xp-price{min-height:26px;padding:0 9px;font-size:12px}.xp-acts .btn-ghost{display:none}.xp-sorts{border-radius:20px;flex-wrap:wrap;justify-content:center}}@media (prefers-reduced-motion:reduce){.xp-card,.xp-im img,.xp-cats a{transition:none}.xp-card:hover{transform:none}}
