.hero{padding: 48px 0 28px;text-align: center;position: relative;overflow: hidden}.hero::before{content: "";position: absolute;inset: -40% -10% auto;height: 520px;z-index: -1;pointer-events: none;background: radial-gradient(ellipse at 30% 40%,rgba(37,99,235,0.14),transparent 60%),radial-gradient(ellipse at 75% 30%,rgba(124,58,237,0.1),transparent 55%)}.hero h1{font-size: clamp(2rem,1.3rem + 3.2vw,3.2rem);margin-bottom: 12px;letter-spacing: -0.03em}.hero h1 .accent{background: linear-gradient(90deg,#2563eb,#7c3aed);-webkit-background-clip: text;background-clip: text;color: transparent}[data-theme="dark"] .hero h1 .accent{background-image: linear-gradient(90deg,#60a5fa,#a78bfa)}.hero .lead{font-size: clamp(1rem,0.95rem + 0.4vw,1.2rem);color: var(--text-2);max-width: 640px;margin: 0 auto 26px}.hero-search{position: relative;max-width: 680px;margin: 0 auto}.hero-search .icon{position: absolute;left: 18px;top: 50%;transform: translateY(-50%);width: 22px;height: 22px;color: var(--text-3);pointer-events: none}.hero-search input{width: 100%;height: 60px;padding: 0 110px 0 52px;border-radius: var(--radius-lg);border: 1px solid var(--border-strong);background: var(--surface);color: var(--text);font: inherit;font-size: 1.1rem;box-shadow: var(--shadow)}.hero-search input:focus{outline: none;border-color: var(--brand);box-shadow: var(--focus),var(--shadow)}.hero-search .hint{position: absolute;right: 14px;top: 50%;transform: translateY(-50%);display: flex;gap: 6px;align-items: center}.hero-search .clear{display: none}.hero-search.has-value .clear{display: inline-flex}.hero-search.has-value kbd{display: none}.popular{margin-top: 18px;display: flex;flex-wrap: wrap;justify-content: center;gap: 8px;align-items: center;font-size: 0.9rem;color: var(--text-3)}.popular a{color: var(--text-2);text-decoration: none;padding: 5px 11px;border-radius: 999px;background: var(--surface);border: 1px solid var(--border);font-weight: 500}.popular a:hover{border-color: var(--brand);color: var(--brand)}.trust{display: flex;flex-wrap: wrap;justify-content: center;gap: 8px 22px;margin-top: 22px;color: var(--text-3);font-size: 0.9rem}.trust span{display: inline-flex;align-items: center;gap: 6px}.trust .icon{color: var(--success)}.filter-bar{position: sticky;top: var(--header-h);z-index: 30;background: color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);padding: 12px 0;border-bottom: 1px solid transparent;transition: border-color 0.2s}.filter-bar.stuck{border-bottom-color: var(--border)}.filter-bar .container{display: flex;flex-direction: column;gap: 10px}.filter-top{display: flex;gap: 10px;align-items: center;justify-content: space-between;flex-wrap: wrap}.result-count{font-size: 0.9rem;color: var(--text-3)}.view-toggle{display: inline-flex;gap: 2px;padding: 3px;background: var(--surface-2);border-radius: 9px;border: 1px solid var(--border)}.view-toggle button{width: 34px;height: 30px;border: 0;background: transparent;color: var(--text-3);border-radius: 7px;cursor: pointer;display: inline-flex;align-items: center;justify-content: center}.view-toggle button[aria-pressed="true"]{background: var(--surface);color: var(--text);box-shadow: var(--shadow-sm)}[data-theme="dark"] .view-toggle button[aria-pressed="true"]{background: var(--surface-3)}.shelf{display: flex;gap: 12px;overflow-x: auto;scroll-snap-type: x mandatory;padding-bottom: 6px;scrollbar-width: thin}.shelf .tool-card{min-width: 240px;max-width: 280px;scroll-snap-align: start}.category-cards{display: grid;gap: 14px;grid-template-columns: repeat(auto-fit,minmax(240px,1fr))}.category-card{display: flex;flex-direction: column;gap: 10px;padding: 20px;border-radius: var(--radius);background: var(--surface);border: 1px solid var(--border);text-decoration: none;color: var(--text);transition: border-color 0.15s,transform 0.2s var(--ease),box-shadow 0.2s}.category-card:hover{border-color: var(--brand);color: var(--text);transform: translateY(-2px);box-shadow: var(--shadow)}.category-card h3{margin: 0;font-size: 1.1rem}.category-card p{margin: 0;color: var(--text-3);font-size: 0.9rem}.category-card .go{margin-top: auto;color: var(--link);font-weight: 600;font-size: 0.9rem;display: inline-flex;align-items: center;gap: 6px}