:root,[data-theme=light]{--bg: #f4f6fb;--surface: #ffffff;--surface-2: #eef1f8;--surface-3: #e4e8f2;--border: #dde2ef;--border-2: #c8cfdf;--border-focus: #2563eb;--text: #111827;--text-2: #4b5675;--text-3: #8f9ab8;--brand: #2563eb;--brand-hover: #1d4ed8;--brand-dim: #dbeafe;--brand-glow: rgba(37, 99, 235, .12);--success: #16a34a;--success-bg: rgba(22, 163, 74, .1);--warning: #d97706;--warning-bg: rgba(217, 119, 6, .1);--danger: #dc2626;--danger-bg: rgba(220, 38, 38, .1);--info: #2563eb;--info-bg: rgba(37, 99, 235, .1);--shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);--shadow-md: 0 4px 16px rgba(0,0,0,.08);--shadow-lg: 0 8px 32px rgba(0,0,0,.1)}[data-theme=dark]{--bg: #0f1117;--surface: #181c27;--surface-2: #1f2333;--surface-3: #272d3d;--border: #2e3347;--border-2: #3d4561;--border-focus: #4285f4;--text: #eaeef6;--text-2: #9aa5c0;--text-3: #5a6480;--brand: #4285f4;--brand-hover: #5a97f5;--brand-dim: #1a2d5a;--brand-glow: rgba(66, 133, 244, .18);--success: #34d399;--success-bg: rgba(52, 211, 153, .12);--warning: #fbbf24;--warning-bg: rgba(251, 191, 36, .12);--danger: #f87171;--danger-bg: rgba(248, 113, 113, .12);--info: #4285f4;--info-bg: rgba(66, 133, 244, .12);--shadow-sm: none;--shadow-md: none;--shadow-lg: none}:root{--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-16: 64px;--space-20: 80px;--radius: 10px;--radius-lg: 14px;--radius-xl: 18px;--font-display: "DM Sans", sans-serif;--font-body: "Inter", sans-serif;--font-mono: "JetBrains Mono", monospace;--header-h: 64px}.hide-mobile{display:block}.show-mobile{display:none}@media (max-width: 767px){.hide-mobile{display:none!important}.show-mobile{display:block!important}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{font-family:var(--font-body);background-color:var(--bg);color:var(--text);line-height:1.7;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;transition:background-color .2s ease,color .2s ease}[data-theme=light] body{background-image:radial-gradient(ellipse 80% 40% at 50% -10%,rgba(37,99,235,.06) 0%,transparent 60%)}[data-theme=dark] body{background-image:radial-gradient(ellipse 80% 50% at 50% -20%,rgba(66,133,244,.07) 0%,transparent 70%)}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);line-height:1.25;color:var(--text);letter-spacing:-.01em}h1{font-size:clamp(32px,5.5vw,56px);font-weight:700}h2{font-size:clamp(22px,3.5vw,32px);font-weight:600}h3{font-size:clamp(17px,2.5vw,20px);font-weight:600}h4{font-size:16px;font-weight:600}p{font-family:var(--font-body);font-size:16px;line-height:1.7}a{color:var(--brand);text-decoration:none;transition:color .15s ease}a:hover{color:var(--brand-hover)}code,pre,kbd{font-family:var(--font-mono);font-size:14px}img{max-width:100%;display:block}button{cursor:pointer;font-family:var(--font-body)}input,textarea,select{font-family:var(--font-body);font-size:15px}.site-header{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--header-h);border-bottom:1px solid var(--border);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:background .2s ease,border-color .2s ease}[data-theme=light] .site-header{background:#ffffffeb;box-shadow:0 1px 0 var(--border),0 2px 12px #0000000f}[data-theme=dark] .site-header{background:#181c27e6}.site-header .nav-link{color:var(--text-2);font-size:14px;font-weight:500;padding:6px 12px;border-radius:var(--radius);transition:color .15s ease,background .15s ease;text-decoration:none}.site-header .nav-link:hover{color:var(--text);background:var(--surface-2)}.mobile-drawer{background:var(--surface);border-bottom:1px solid var(--border);transition:background .2s ease}[data-theme=light] .mobile-drawer{box-shadow:0 4px 20px #00000014}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--space-6)}@media (max-width: 767px){.container{padding:0 var(--space-4)}}.page-content{padding-top:calc(var(--header-h) + var(--space-8));padding-bottom:var(--space-16);min-height:100vh}@media (max-width: 767px){.page-content{padding-top:calc(var(--header-h) + var(--space-5));padding-bottom:var(--space-10)}}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:background .2s ease,border-color .2s ease}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--surface)}::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-3)}:focus-visible{outline:2px solid var(--brand);outline-offset:2px}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(32px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInScale{0%{opacity:0;transform:scale(.88) translateY(16px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}@keyframes float{0%,to{transform:translateY(0) rotate(0)}33%{transform:translateY(-12px) rotate(1.5deg)}66%{transform:translateY(-6px) rotate(-1deg)}}@keyframes floatReverse{0%,to{transform:translateY(0) rotate(0)}33%{transform:translateY(10px) rotate(-1.5deg)}66%{transform:translateY(5px) rotate(1deg)}}@keyframes orbPulse{0%,to{transform:scale(1);opacity:.6}50%{transform:scale(1.12);opacity:.9}}@keyframes shimmer{0%{background-position:-200% center}to{background-position:200% center}}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-24px)}to{opacity:1;transform:translate(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(24px)}to{opacity:1;transform:translate(0)}}@keyframes rotateOrb{0%{transform:rotate(0) translate(180px) rotate(0)}to{transform:rotate(360deg) translate(180px) rotate(-360deg)}}@keyframes badgePop{0%{opacity:0;transform:scale(.7) translateY(10px)}70%{transform:scale(1.05) translateY(-2px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes countUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes gradientShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes chipFloat{0%,to{transform:translateY(0) rotate(var(--chip-rot, 0deg))}50%{transform:translateY(-8px) rotate(var(--chip-rot, 0deg))}}@keyframes ringExpand{0%{transform:scale(.8);opacity:.8}to{transform:scale(2.2);opacity:0}}.animate-fade-in{animation:fadeIn .22s ease forwards}.animate-fade-up{animation:fadeInUp .6s cubic-bezier(.22,1,.36,1) both}.animate-scale-in{animation:fadeInScale .6s cubic-bezier(.22,1,.36,1) both}.hero-orb{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;animation:orbPulse 6s ease-in-out infinite}.hero-chip{position:absolute;display:flex;align-items:center;gap:6px;padding:7px 13px;border-radius:20px;font-size:12px;font-weight:600;white-space:nowrap;pointer-events:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:chipFloat var(--chip-dur, 4s) ease-in-out infinite;animation-delay:var(--chip-delay, 0s)}.hero-cta-btn{position:relative;overflow:hidden}.hero-cta-btn:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.25) 50%,transparent 60%);background-size:200% 100%;animation:shimmer 3s linear infinite}.reveal{opacity:0;transform:translateY(28px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}.reveal.visible{opacity:1;transform:translateY(0)}.reveal-delay-1{transition-delay:.1s}.reveal-delay-2{transition-delay:.2s}.reveal-delay-3{transition-delay:.3s}.reveal-delay-4{transition-delay:.4s}.reveal-delay-5{transition-delay:.5s}.tilt-card{transition:transform .2s ease,box-shadow .2s ease;will-change:transform}.tilt-card:hover{box-shadow:0 12px 40px #0000001f}.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:var(--space-3);margin-top:var(--space-4)}@media (max-width: 480px){.stats-grid{grid-template-columns:repeat(2,1fr)}}.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-3)}@media (max-width: 640px){.related-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-2)}}@media (max-width: 360px){.related-grid{grid-template-columns:1fr}}.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-4)}@media (max-width: 640px){.tools-grid{grid-template-columns:1fr;gap:var(--space-3)}}.admin-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}@media (max-width: 1024px){.admin-stats-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 480px){.admin-stats-grid{grid-template-columns:1fr}}.category-tools-grid{display:grid;grid-template-columns:repeat(4,1fr)}@media (max-width: 767px){.category-tools-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 400px){.category-tools-grid{grid-template-columns:1fr}}.category-tool-item{padding:18px 16px;border-top:3px solid var(--cat-color, var(--brand));height:100%;box-sizing:border-box;transition:background .15s;display:flex;flex-direction:column;gap:6px}@media (max-width: 767px){.category-tool-item{padding:14px 12px}.category-tool-item:nth-child(odd){border-right:1px solid var(--border)}.category-tool-item:nth-child(1),.category-tool-item:nth-child(2){border-bottom:1px solid var(--border)}}.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:40px}@media (max-width: 1024px){.footer-grid{grid-template-columns:1fr 1fr 1fr;gap:32px}.footer-brand{grid-column:1 / -1}}@media (max-width: 640px){.footer-grid{grid-template-columns:1fr 1fr;gap:28px}.footer-brand{grid-column:1 / -1}}@media (max-width: 400px){.footer-grid{grid-template-columns:1fr;gap:24px}}.footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}.footer-bottom-links{display:flex;gap:20px;flex-wrap:wrap}@media (max-width: 480px){.footer-bottom{flex-direction:column;align-items:flex-start;gap:12px}.footer-bottom-links{gap:12px}}.blog-content h2,.blog-content h3,.blog-content h4{color:var(--text);font-weight:700;margin:1.8em 0 .6em;line-height:1.3;letter-spacing:-.01em}.blog-content h2{font-size:clamp(18px,2.5vw,24px)}.blog-content h3{font-size:clamp(16px,2vw,20px)}.blog-content p{margin:0 0 1.2em}.blog-content ul,.blog-content ol{margin:0 0 1.2em 1.5em;display:flex;flex-direction:column;gap:6px}.blog-content li{line-height:1.7}.blog-content a{color:var(--brand);text-decoration:underline}.blog-content a:hover{opacity:.8}.blog-content strong{color:var(--text);font-weight:600}.blog-content code{background:var(--surface-2);border:1px solid var(--border);border-radius:4px;padding:2px 6px;font-size:.88em;font-family:var(--font-mono);color:var(--brand)}.blog-content pre{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 20px;overflow-x:auto;margin:0 0 1.4em;font-size:13px;line-height:1.7}.blog-content pre code{background:none;border:none;padding:0;font-size:inherit;color:var(--text)}.blog-content blockquote{border-left:3px solid var(--brand);padding-left:16px;margin:0 0 1.4em;color:var(--text-2);font-style:italic}.blog-content img{max-width:100%;border-radius:var(--radius-lg);margin:.5em 0 1.2em}.blog-content hr{border:none;border-top:1px solid var(--border);margin:2em 0}[contenteditable][data-placeholder]:empty:before{content:attr(data-placeholder);color:var(--text-3);pointer-events:none}[contenteditable] h2{font-size:22px;font-weight:700;margin:1.4em 0 .5em;color:var(--text)}[contenteditable] h3{font-size:18px;font-weight:600;margin:1.2em 0 .4em;color:var(--text)}[contenteditable] p{margin:0 0 .9em}[contenteditable] ul,[contenteditable] ol{margin:0 0 .9em 1.5em}[contenteditable] li{margin-bottom:4px}[contenteditable] blockquote{border-left:3px solid var(--brand);padding-left:14px;margin:0 0 .9em;color:var(--text-2);font-style:italic}[contenteditable] pre{background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:12px 16px;font-family:var(--font-mono);font-size:13px;margin-bottom:.9em;overflow-x:auto}[contenteditable] a{color:var(--brand);text-decoration:underline}[contenteditable] hr{border:none;border-top:1px solid var(--border);margin:1.4em 0}
