*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--color-bg: #fafaf9;--color-bg-alt: #f5f3f0;--color-surface: #ffffff;--color-text: #1e1b2e;--color-text-muted: #787580;--color-primary: #4c3f8c;--color-primary-hover: #3b2f6e;--color-accent: #f0a030;--color-accent-hover: #d4891a;--color-border: #e8e5e0;--color-border-strong: #d4d0c8;--cat-writing: #e07b39;--cat-image: #8b5cf6;--cat-video: #e04558;--cat-coding: #0ea5a0;--cat-office: #22a06b;--cat-audio: #5b7fff;--font-display: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", sans-serif;--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;--radius: 10px;--radius-sm: 6px;--radius-pill: 50px;--shadow: 0 1px 3px rgba(0, 0, 0, .06);--shadow-hover: 0 8px 30px rgba(76, 63, 140, .1);--max-width: 1100px;--ease-out: cubic-bezier(.16, 1, .3, 1)}html{font-family:var(--font-body);font-size:16px;line-height:1.6;color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased}body{min-height:100vh}a{color:var(--color-primary);text-decoration:none;transition:color .2s}a:hover{color:var(--color-primary-hover);text-decoration:none}img{max-width:100%;height:auto}h1,h2,h3,h4{font-family:var(--font-display)}.container{max-width:var(--max-width);margin:0 auto;padding:0 20px}.site-header{border-bottom:1px solid var(--color-border);background:#fafaf9d9;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);position:sticky;top:0;z-index:100}.site-header .container{display:flex;align-items:center;justify-content:space-between;height:60px}.site-logo{font-family:var(--font-display);font-size:1.2rem;font-weight:700;color:var(--color-text);display:flex;align-items:center}.site-logo:hover{text-decoration:none;color:var(--color-primary)}.site-logo img{transition:transform .4s var(--ease-out)}.site-logo:hover img{transform:rotate(15deg)}.site-nav{display:flex;gap:24px;list-style:none}.site-nav a{font-family:var(--font-display);font-size:.875rem;color:var(--color-text-muted);font-weight:600;position:relative;padding-bottom:4px}.site-nav a:after{content:"";position:absolute;bottom:-2px;left:0;width:0;height:2px;background:var(--color-accent);border-radius:1px;transition:width .25s var(--ease-out)}.site-nav a:hover,.site-nav a.active{color:var(--color-primary);text-decoration:none}.site-nav a:hover:after,.site-nav a.active:after{width:100%}.hero{position:relative;padding:80px 0 48px;text-align:center;overflow:hidden}.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,rgba(76,63,140,.05) 0%,transparent 70%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='30' fill='none' stroke='%234c3f8c' stroke-width='1.5' opacity='0.4'/%3E%3Crect x='48.5' y='14' width='3' height='8' rx='1' fill='%234c3f8c' opacity='0.5'/%3E%3Crect x='48.5' y='78' width='3' height='8' rx='1' fill='%234c3f8c' opacity='0.3'/%3E%3Crect x='14' y='48.5' width='8' height='3' rx='1' fill='%234c3f8c' opacity='0.3'/%3E%3Crect x='78' y='48.5' width='8' height='3' rx='1' fill='%234c3f8c' opacity='0.3'/%3E%3Cpolygon points='50,50 62,32 50,36' fill='%234c3f8c' opacity='0.5'/%3E%3Cpolygon points='50,50 38,68 50,64' fill='%234c3f8c' opacity='0.25'/%3E%3Ccircle cx='50' cy='50' r='3' fill='%234c3f8c' opacity='0.5'/%3E%3C/svg%3E") center/320px no-repeat;opacity:.7;animation:compass-rotate 120s linear infinite;pointer-events:none}@keyframes compass-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.hero h1{font-family:var(--font-display);font-size:2.4rem;font-weight:800;margin-bottom:12px;letter-spacing:-.02em;position:relative;animation:fade-up .6s var(--ease-out) both}.hero p{font-family:var(--font-display);font-size:1.1rem;color:var(--color-text-muted);max-width:720px;margin:0 auto 28px;position:relative;animation:fade-up .6s .1s var(--ease-out) both}.hero-search{display:flex;max-width:560px;margin:0 auto;gap:8px;position:relative;animation:fade-up .6s .2s var(--ease-out) both}.hero-search input{flex:1;padding:14px 20px;border:2px solid var(--color-border);border-radius:var(--radius-pill);font-family:var(--font-body);font-size:1rem;outline:none;background:var(--color-surface);transition:border-color .25s,box-shadow .25s}.hero-search input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #4c3f8c1f}.hero-search button{padding:14px 28px;background:var(--color-accent);color:#fff;border:none;border-radius:var(--radius-pill);font-family:var(--font-display);font-size:1rem;font-weight:600;cursor:pointer;transition:background .2s,box-shadow .2s;white-space:nowrap}.hero-search button:hover{background:var(--color-accent-hover);box-shadow:0 4px 16px #f0a0304d}@keyframes fade-up{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.category-nav{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px;justify-content:center}.category-nav a{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:var(--radius-pill);font-family:var(--font-display);font-size:.875rem;font-weight:600;background:var(--color-bg-alt);color:var(--color-text-muted);border:1px solid transparent;transition:all .25s var(--ease-out)}.category-nav a:hover{background:var(--color-surface);color:var(--color-primary);border-color:var(--color-border);transform:translateY(-1px);text-decoration:none}.category-nav a.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary);box-shadow:0 2px 12px #4c3f8c40}.category-nav a .cat-icon{width:16px;height:16px;flex-shrink:0}.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:20px;margin-bottom:48px}.tool-card{position:relative;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:20px 20px 20px 18px;transition:box-shadow .3s var(--ease-out),transform .3s var(--ease-out);animation:card-enter .5s var(--ease-out) both;overflow:hidden}.tool-card:before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:0 2px 2px 0;background:var(--card-accent, var(--color-border));transition:width .3s var(--ease-out)}.tool-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-3px)}.tool-card:hover:before{width:6px}.tool-card-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:6px;padding-left:6px}.tool-card-header h3{font-family:var(--font-display);font-size:1.1rem;font-weight:700}.tool-card-header h3 a{color:var(--color-text)}.tool-card-header h3 a:hover{color:var(--color-primary);text-decoration:none}.tool-card-category{display:inline-block;font-family:var(--font-display);font-size:.72rem;padding:3px 10px;border-radius:12px;font-weight:600;white-space:nowrap;letter-spacing:.02em}.tool-card-desc{font-size:.85rem;color:var(--color-text-muted);margin-bottom:14px;padding-left:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.tool-card-meta{display:flex;align-items:center;justify-content:space-between;padding-left:6px;font-size:.8rem;color:var(--color-text-muted)}.tool-card-pricing{font-family:var(--font-display);font-weight:600;color:var(--color-text)}.tool-card:nth-child(1){animation-delay:.03s}.tool-card:nth-child(2){animation-delay:.08s}.tool-card:nth-child(3){animation-delay:.13s}.tool-card:nth-child(4){animation-delay:.18s}.tool-card:nth-child(5){animation-delay:.23s}.tool-card:nth-child(6){animation-delay:.28s}.tool-card:nth-child(7){animation-delay:.33s}.tool-card:nth-child(8){animation-delay:.38s}.tool-card:nth-child(9){animation-delay:.43s}.tool-card:nth-child(10){animation-delay:.48s}.tool-card:nth-child(11){animation-delay:.53s}.tool-card:nth-child(12){animation-delay:.58s}@keyframes card-enter{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.tool-card[data-category=AI写作]{--card-accent: var(--cat-writing)}.tool-card[data-category=AI写作] .tool-card-category{background:color-mix(in srgb,var(--cat-writing) 12%,transparent);color:var(--cat-writing)}.tool-card[data-category=AI绘画]{--card-accent: var(--cat-image)}.tool-card[data-category=AI绘画] .tool-card-category{background:color-mix(in srgb,var(--cat-image) 12%,transparent);color:var(--cat-image)}.tool-card[data-category=AI视频]{--card-accent: var(--cat-video)}.tool-card[data-category=AI视频] .tool-card-category{background:color-mix(in srgb,var(--cat-video) 12%,transparent);color:var(--cat-video)}.tool-card[data-category=AI编程]{--card-accent: var(--cat-coding)}.tool-card[data-category=AI编程] .tool-card-category{background:color-mix(in srgb,var(--cat-coding) 12%,transparent);color:var(--cat-coding)}.tool-card[data-category=AI办公]{--card-accent: var(--cat-office)}.tool-card[data-category=AI办公] .tool-card-category{background:color-mix(in srgb,var(--cat-office) 12%,transparent);color:var(--cat-office)}.tool-card[data-category=AI音频]{--card-accent: var(--cat-audio)}.tool-card[data-category=AI音频] .tool-card-category{background:color-mix(in srgb,var(--cat-audio) 12%,transparent);color:var(--cat-audio)}.detail-cat{background:var(--color-bg-alt);color:var(--color-text-muted)}.detail-cat[data-cat=AI写作]{background:color-mix(in srgb,var(--cat-writing) 12%,transparent);color:var(--cat-writing)}.detail-cat[data-cat=AI绘画]{background:color-mix(in srgb,var(--cat-image) 12%,transparent);color:var(--cat-image)}.detail-cat[data-cat=AI视频]{background:color-mix(in srgb,var(--cat-video) 12%,transparent);color:var(--cat-video)}.detail-cat[data-cat=AI编程]{background:color-mix(in srgb,var(--cat-coding) 12%,transparent);color:var(--cat-coding)}.detail-cat[data-cat=AI办公]{background:color-mix(in srgb,var(--cat-office) 12%,transparent);color:var(--cat-office)}.detail-cat[data-cat=AI音频]{background:color-mix(in srgb,var(--cat-audio) 12%,transparent);color:var(--cat-audio)}.tool-detail{max-width:800px;margin:0 auto;padding:40px 0}.tool-detail h1{font-family:var(--font-display);font-size:2rem;font-weight:800;margin-bottom:8px;letter-spacing:-.01em}.tool-detail .meta-bar{display:flex;flex-wrap:wrap;align-items:center;gap:18px;font-size:.9rem;color:var(--color-text-muted);margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid var(--color-border)}.meta-bar .meta-item{display:inline-flex;align-items:center;gap:5px}.meta-bar .meta-item svg{width:15px;height:15px;opacity:.6}.meta-cta{display:inline-flex;align-items:center;padding:6px 16px;background:var(--color-accent);color:#fff;border-radius:var(--radius-pill);font-family:var(--font-display);font-size:.8rem;font-weight:600;transition:all .2s;white-space:nowrap}.meta-cta:hover{background:var(--color-accent-hover);text-decoration:none;color:#fff;box-shadow:0 2px 8px #f0a03040}.reading-time{font-size:.82rem;color:var(--color-text-muted);margin-top:-4px;margin-bottom:20px}.tool-detail .cta-button{display:inline-flex;align-items:center;gap:8px;padding:16px 36px;background:var(--color-accent);color:#fff;border-radius:var(--radius-pill);font-family:var(--font-display);font-weight:700;font-size:1rem;margin:20px 0 36px;transition:all .3s var(--ease-out);box-shadow:0 4px 16px #f0a03040}.tool-detail .cta-button:hover{background:var(--color-accent-hover);box-shadow:0 6px 24px #f0a03059;transform:translateY(-1px);text-decoration:none;color:#fff}.tool-detail .cta-button .arrow{transition:transform .3s var(--ease-out)}.tool-detail .cta-button:hover .arrow{transform:translate(3px)}.tool-detail .pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:28px 0}.tool-detail .pros,.tool-detail .cons{padding:20px 20px 20px 16px;border-radius:var(--radius);border-left:4px solid}.tool-detail .pros{background:#f5faf7;border-color:#22a06b;border-left-color:#22a06b}.tool-detail .cons{background:#fef7f7;border-color:#f5d0d0;border-left-color:#dc2626}.tool-detail .pros h3,.tool-detail .cons h3{font-family:var(--font-display);font-size:.95rem;margin-bottom:10px;display:flex;align-items:center;gap:6px}.tool-detail .pros h3{color:#16a34a}.tool-detail .cons h3{color:#dc2626}.tool-detail .pros h3 svg,.tool-detail .cons h3 svg{width:18px;height:18px}.tool-detail ul{padding-left:20px;font-size:.9rem}.tool-detail li{margin-bottom:5px}.tool-detail h2{font-family:var(--font-display);font-size:1.4rem;margin:36px 0 14px;font-weight:700}.tool-detail p{margin-bottom:12px;line-height:1.8}.tool-detail table{width:100%;border-collapse:collapse;margin:20px 0;font-size:.88rem;border-radius:var(--radius);overflow:hidden}.tool-detail th{background:var(--color-bg-alt);font-family:var(--font-display);font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-muted);padding:12px 14px;text-align:left;border-bottom:2px solid var(--color-border-strong)}.tool-detail td{padding:10px 14px;border-bottom:1px solid var(--color-border)}.tool-detail tr:last-child td{border-bottom:none}.tool-detail tbody tr:nth-child(2n) td{background:#f5f3f080}.tool-detail tbody tr:hover td{background:#4c3f8c0a}.tool-detail article{line-height:1.8}.tool-detail article h2{font-family:var(--font-display);font-size:1.35rem;margin:36px 0 14px;font-weight:700;padding-bottom:10px;border-bottom:1px solid var(--color-border);position:relative}.tool-detail article h2:after{content:"";position:absolute;bottom:-1px;left:0;width:40px;height:2px;background:var(--color-accent);border-radius:1px}.tool-detail article h3{font-family:var(--font-display);font-size:1.1rem;margin:28px 0 10px;font-weight:600}.tool-detail article ul,.tool-detail article ol{padding-left:24px;margin-bottom:16px}.tool-detail article li{margin-bottom:6px}.tool-detail article blockquote{border-left:4px solid var(--color-accent);padding:14px 18px;margin:20px 0;background:var(--color-bg-alt);border-radius:0 var(--radius) var(--radius) 0;font-style:italic}.tool-detail article code{background:var(--color-bg-alt);padding:2px 6px;border-radius:var(--radius-sm);font-size:.9em}.tool-detail article pre{background:#1e1e2e;color:#cdd6f4;padding:18px;border-radius:var(--radius);overflow-x:auto;margin:20px 0}.tool-detail article pre code{background:none;padding:0;color:inherit}.tool-detail .pros-cons{margin-top:36px}.detail-footer{margin-top:44px;padding-top:18px;border-top:1px solid var(--color-border);font-size:.8rem;color:var(--color-text-muted);line-height:1.7}.site-footer{border-top:1px solid var(--color-border);padding:36px 0;text-align:center;font-size:.85rem;color:var(--color-text-muted);margin-top:64px;background:var(--color-bg-alt)}.site-footer a{color:var(--color-text-muted)}.site-footer a:hover{color:var(--color-primary)}.footer-disclosure{margin-top:6px;font-size:.78rem;max-width:520px;margin-left:auto;margin-right:auto}.section-title{font-family:var(--font-display);font-size:1.35rem;font-weight:700;margin-bottom:24px}.load-more-btn{padding:14px 56px;font-family:var(--font-display);font-size:1rem;font-weight:600;color:#fff;background:var(--color-primary);border:none;border-radius:var(--radius-pill);cursor:pointer;transition:all .3s var(--ease-out);box-shadow:0 2px 8px #4c3f8c33}.load-more-btn:hover{background:var(--color-primary-hover);box-shadow:0 4px 16px #4c3f8c4d;transform:translateY(-1px)}.load-more-btn:active{transform:translateY(0)}@media(max-width:768px){.hero{padding:56px 0 36px}.hero h1{font-size:1.7rem}.hero p{font-size:.95rem}.hero:before{background-size:240px}.tools-grid,.tool-detail .pros-cons{grid-template-columns:1fr}.site-nav{gap:14px}.site-nav a{font-size:.8rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}