:root{--primary: #4F46E5;--primary-hover: #4338CA;--bg: #F9FAFB;--surface: #FFFFFF;--text: #111827;--text-secondary: #6B7280;--border: #E5E7EB;--success: #10B981;--radius: 8px}[data-theme=dark]{color-scheme:dark;--primary: #818CF8;--primary-hover: #6366F1;--bg: #0F172A;--surface: #1E293B;--text: #F1F5F9;--text-secondary: #94A3B8;--border: #334155;--success: #34D399}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}a{color:var(--primary);text-decoration:none}a:hover{color:var(--primary-hover)}.container{max-width:1200px;margin:0 auto;padding:0 20px}.header{background:var(--surface);border-bottom:1px solid var(--border);padding:16px 0;position:sticky;top:0;z-index:100}.header .container{display:flex;align-items:center;justify-content:space-between}.logo{font-size:24px;font-weight:800;color:var(--primary);display:flex;align-items:center;gap:8px}.logo span{color:var(--text-secondary);font-weight:400;font-size:14px}nav{display:flex;gap:24px;align-items:center}nav a{color:var(--text-secondary);font-size:14px;font-weight:500;transition:color .2s}nav a:hover{color:var(--primary)}.hero{text-align:center;padding:60px 0 40px}.hero h1{font-size:40px;font-weight:800;margin-bottom:16px;background:linear-gradient(135deg,#4f46e5,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.hero p{font-size:18px;color:var(--text-secondary);max-width:600px;margin:0 auto}.search-bar{max-width:480px;margin:0 auto 16px}.search-bar input{width:100%;padding:12px 20px;border:1px solid var(--border);border-radius:24px;font-size:15px;outline:none;transition:border-color .2s,box-shadow .2s;background:var(--surface);color:var(--text);font-family:inherit}.search-bar input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #4f46e51a}[data-theme=dark] .search-bar input{background:var(--surface);color:var(--text);border-color:var(--border)}[data-theme=dark] .search-bar input::placeholder{color:var(--text-secondary)}.filter-bar{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding:0 0 20px}.filter-btn{padding:6px 14px;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--text-secondary);transition:all .2s}.filter-btn:hover{border-color:var(--primary);color:var(--primary)}.filter-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}[data-theme=dark] .filter-btn{background:var(--surface);color:var(--text-secondary);border-color:var(--border)}[data-theme=dark] .filter-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;padding:40px 0}.tool-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;transition:all .2s;display:flex;flex-direction:column}.tool-card:hover{border-color:var(--primary);box-shadow:0 4px 12px #4f46e51a;transform:translateY(-2px)}[data-theme=dark] .tool-card{background:var(--surface);border-color:var(--border)}[data-theme=dark] .tool-card:hover{border-color:var(--primary)}.tool-card .icon{width:48px;height:48px;border-radius:12px;background:#eef2ff;display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:16px}[data-theme=dark] .tool-card .icon{background:#818cf826}.tool-card h3{font-size:18px;font-weight:700;margin-bottom:8px}.tool-card p{font-size:14px;color:var(--text-secondary);flex:1}.tool-card .tag{display:inline-block;font-size:12px;color:var(--primary);background:#eef2ff;padding:2px 8px;border-radius:4px;margin-top:12px}[data-theme=dark] .tool-card .tag{background:#818cf826}.tool-page{padding:40px 0}.breadcrumb{font-size:13px;margin-bottom:12px;display:flex;align-items:center;gap:6px}.breadcrumb a{color:var(--text-secondary)}.breadcrumb a:hover{color:var(--primary)}.breadcrumb-sep{color:var(--text-secondary)}.breadcrumb span:last-child{color:var(--text);font-weight:500}.tool-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}.tool-header h1{font-size:32px;font-weight:800;margin-bottom:0}.tool-page .subtitle{color:var(--text-secondary);margin-bottom:32px;font-size:16px}.tool-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:32px;margin-bottom:40px}[data-theme=dark] .tool-box{background:var(--surface);border-color:var(--border)}.form-group{margin-bottom:20px}.form-group label{display:block;font-weight:600;margin-bottom:6px;font-size:14px}.form-group input,.form-group textarea,.form-group select{width:100%;padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius);font-size:14px;transition:border-color .2s;font-family:inherit;background:var(--surface);color:var(--text)}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #4f46e51a}[data-theme=dark] .form-group input,[data-theme=dark] .form-group textarea,[data-theme=dark] .form-group select{background:var(--surface);color:var(--text);border-color:var(--border)}[data-theme=dark] .form-group select option{background:var(--surface);color:var(--text)}[data-theme=dark] .form-group input::placeholder,[data-theme=dark] .form-group textarea::placeholder{color:var(--text-secondary)}.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:var(--radius);font-size:14px;font-weight:600;cursor:pointer;border:none;transition:all .2s}.btn-primary{background:var(--primary);color:#fff;border:1px solid var(--primary)}.btn-primary:hover{background:var(--primary-hover)}.btn-secondary{background:var(--surface);color:var(--text);border:1px solid var(--border)}.btn-secondary:hover{background:var(--border)}[data-theme=dark] .btn-secondary{background:var(--surface);color:var(--text);border-color:var(--border)}.output-box{background:#1e1e2e;color:#cdd6f4;border-radius:var(--radius);padding:20px;font-family:Courier New,monospace;font-size:13px;line-height:1.6;overflow-x:auto;position:relative;margin-top:20px;white-space:pre-wrap;word-break:break-all}[data-theme=dark] .output-box{background:#020617;color:#cdd6f4}[data-theme=dark] input:not([type=checkbox]):not([type=radio]):not([type=range]),[data-theme=dark] textarea,[data-theme=dark] select{background:var(--surface);color:var(--text);border-color:var(--border)}[data-theme=dark] select option{background:var(--surface);color:var(--text)}[data-theme=dark] input::placeholder,[data-theme=dark] textarea::placeholder{color:var(--text-secondary)}.copy-btn{position:absolute;top:10px;right:10px;background:#ffffff1a;color:#cdd6f4;border:none;padding:6px 12px;border-radius:4px;font-size:12px;cursor:pointer}.copy-btn:hover{background:#fff3}.guide{margin-top:40px;margin-bottom:40px}.guide h2{font-size:24px;margin-bottom:16px}.guide h3{font-size:18px;font-weight:700;margin:20px 0 10px}.guide p{color:var(--text-secondary);line-height:1.8;margin-bottom:12px;font-size:15px}.guide ol,.guide ul{color:var(--text-secondary);line-height:1.8;padding-left:24px;margin-bottom:12px}.guide li{margin-bottom:6px}.faq{margin-top:40px}.faq h2{font-size:24px;margin-bottom:20px}.faq-question{display:flex;justify-content:space-between;align-items:center;width:100%;padding:16px 0;background:none;border:none;border-bottom:1px solid var(--border);cursor:pointer;font-size:16px;font-weight:600;color:var(--text);text-align:left;font-family:inherit;transition:color .2s}.faq-question:hover{color:var(--primary)}.faq-arrow{font-size:14px;transition:transform .2s;color:var(--text-secondary);flex-shrink:0;margin-left:12px}.faq-item.open .faq-arrow{transform:rotate(90deg)}.faq-answer{max-height:0;overflow:hidden;transition:max-height .3s ease}.faq-item.open .faq-answer{max-height:500px}.faq-answer p{font-size:14px;color:var(--text-secondary);padding:8px 0 16px}[data-theme=dark] .faq-question{color:var(--text);border-bottom-color:var(--border)}[data-theme=dark] .faq-question:hover{color:var(--primary)}.related-tools{margin-top:40px}.related-tools h2{font-size:24px;margin-bottom:16px}.related-tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}.related-tool-card{display:flex;align-items:center;gap:10px;padding:14px 18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);transition:all .2s;color:var(--text);font-weight:600;font-size:14px}.related-tool-card:hover{border-color:var(--primary);box-shadow:0 2px 8px #4f46e51a;transform:translateY(-1px)}[data-theme=dark] .related-tool-card{background:var(--surface);border-color:var(--border);color:var(--text)}[data-theme=dark] .related-tool-card:hover{border-color:var(--primary)}.related-icon{font-size:20px}.share-bar{display:flex;align-items:center;gap:6px;flex-shrink:0}.share-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;font-size:14px;font-weight:700;text-decoration:none;cursor:pointer;transition:all .2s;border:1px solid var(--border);background:var(--surface);color:var(--text-secondary)}.share-btn:hover{transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}.share-twitter:hover{background:#000;color:#fff;border-color:#000}.share-facebook:hover{background:#1877f2;color:#fff;border-color:#1877f2}.share-linkedin:hover{background:#0a66c2;color:#fff;border-color:#0a66c2}.share-reddit:hover{background:#ff4500;color:#fff;border-color:#ff4500}.share-copy:hover{background:var(--primary);color:#fff;border-color:var(--primary)}[data-theme=dark] .share-btn{background:var(--surface);color:var(--text-secondary);border-color:var(--border)}[data-theme=dark] .share-twitter:hover{background:#fff;color:#000;border-color:#fff}[data-theme=dark] .share-reddit:hover{background:#ff4500;color:#fff;border-color:#ff4500}.content-section{margin-top:40px;padding:32px 0;border-top:1px solid var(--border)}.content-section h2{font-size:24px;margin-bottom:16px}.content-section p{color:var(--text-secondary);margin-bottom:12px;font-size:15px}.about-page .principle-card{background:var(--surface);border:1px solid var(--border)}[data-theme=dark] .about-page .principle-card{background:var(--surface);border-color:var(--border)}.footer{border-top:1px solid var(--border);padding:32px 0;margin-top:60px;text-align:center;color:var(--text-secondary);font-size:14px}.footer a{color:var(--text-secondary)}.footer a:hover{color:var(--primary)}.footer-grid{display:flex;justify-content:center;gap:48px;margin-bottom:24px;flex-wrap:wrap}.footer-col h4{font-size:14px;font-weight:700;margin-bottom:8px;color:var(--text)}.footer-col a{display:block;margin-bottom:4px;font-size:13px}@media(max-width:768px){.hero h1{font-size:28px}.hero p{font-size:16px}nav{gap:16px}.tool-header{flex-wrap:wrap}.tool-header h1{font-size:24px}.share-bar{width:100%;justify-content:flex-start;padding-top:4px}.share-btn{width:28px;height:28px;font-size:12px}.filter-bar{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:12px}.filter-btn{white-space:nowrap}}.blog-post{padding:40px 0;max-width:780px}.blog-post h1{font-size:32px;font-weight:800;margin-bottom:8px;line-height:1.3}.blog-post .blog-meta{color:var(--text-secondary);font-size:14px;margin-bottom:32px;display:flex;gap:16px;flex-wrap:wrap}.blog-post .blog-meta span{display:inline-flex;align-items:center;gap:4px}.blog-post h2{font-size:24px;font-weight:700;margin:40px 0 16px}.blog-post h3{font-size:20px;font-weight:600;margin:32px 0 12px}.blog-post p{color:var(--text);line-height:1.8;margin-bottom:16px;font-size:16px}.blog-post ul,.blog-post ol{color:var(--text);line-height:1.8;padding-left:24px;margin-bottom:16px}.blog-post li{margin-bottom:8px}.blog-post code{background:var(--bg);padding:2px 6px;border-radius:4px;font-size:14px;font-family:Courier New,monospace}.blog-post pre{background:#1e1e2e;color:#cdd6f4;padding:20px;border-radius:var(--radius);overflow-x:auto;margin-bottom:16px;font-size:14px;line-height:1.6}.blog-post pre code{background:none;padding:0;color:inherit}.blog-post blockquote{border-left:4px solid var(--primary);padding:12px 20px;margin:16px 0;background:var(--bg);border-radius:0 var(--radius) var(--radius) 0}.blog-post blockquote p{color:var(--text-secondary);margin-bottom:0}[data-theme=dark] .blog-post code,[data-theme=dark] .blog-post blockquote{background:var(--surface)}.blog-hero-img{width:100%;max-height:320px;object-fit:cover;border-radius:12px;margin:16px 0}.blog-chart-img{width:100%;max-width:600px;margin:20px auto;display:block;border-radius:8px}.blog-list{padding:40px 0}.blog-list h1{font-size:32px;font-weight:800;margin-bottom:8px}.blog-list .subtitle{color:var(--text-secondary);margin-bottom:32px;font-size:16px}.blog-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin-bottom:16px;transition:all .2s;display:block;color:var(--text)}.blog-card:hover{border-color:var(--primary);box-shadow:0 4px 12px #4f46e51a;transform:translateY(-2px)}.blog-card h2{font-size:20px;font-weight:700;margin-bottom:8px}.blog-card p{font-size:14px;color:var(--text-secondary);line-height:1.6}.blog-card .blog-card-meta{font-size:13px;color:var(--text-secondary);margin-top:12px}.faq-item{margin-bottom:8px}