@import"https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;800;900&family=JetBrains+Mono:wght@400;700&display=swap";:root{--bg-primary: #fdfbf7;--bg-secondary: #f4f0e6;--bg-tertiary: #ffffff;--brutal-border: 3px solid #111111;--brutal-shadow: 4px 4px 0px #111111;--brutal-shadow-hover: 6px 6px 0px #111111;--brutal-shadow-active: 0px 0px 0px #111111;--accent: #ff90e8;--accent-secondary: #90e0ff;--accent-tertiary: #ffe100;--accent-quaternary: #00f0b5;--text-primary: #111111;--text-secondary: #444444;--text-tertiary: #666666;--success: #00f0b5;--warning: #ffe100;--error: #ff5c5c;--space-2xs: .125rem;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--space-3xl: 4rem;--space-4xl: 6rem;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-full: 9999px;--font-sans: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", monospace;--ease-out: cubic-bezier(.16, 1, .3, 1);--duration-fast: .15s;--duration-normal: .25s}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased}body{font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100vh;overflow-x:hidden;background-image:radial-gradient(#111 1px,transparent 1px);background-size:24px 24px;background-position:0 0}a{color:var(--text-primary);text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--accent);font-weight:800;transition:all var(--duration-fast) var(--ease-out)}a:hover{color:var(--text-primary);text-decoration-color:var(--accent-secondary);background:var(--accent-tertiary)}::selection{background:var(--text-primary);color:var(--bg-primary)}h1,h2,h3,h4,h5,h6{color:var(--text-primary);font-weight:900;text-transform:uppercase;letter-spacing:-.02em}h1{font-size:clamp(2rem,5vw,3.5rem);line-height:1.1;text-shadow:2px 2px 0px #fff,4px 4px 0px #111}h2{font-size:clamp(1.5rem,4vw,2.5rem);line-height:1.2}h3{font-size:1.25rem;line-height:1.3}.text-gradient{background:var(--accent-tertiary);padding:0 8px;border:var(--brutal-border);display:inline-block;transform:rotate(-2deg);box-shadow:3px 3px 0 var(--text-primary);color:var(--text-primary)!important;-webkit-text-fill-color:var(--text-primary)!important;text-shadow:none}.text-muted{color:var(--text-secondary);font-weight:600}code,.font-mono{font-family:var(--font-mono)}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--space-lg)}.container--narrow{max-width:900px;margin:0 auto}.top-nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:var(--space-md) var(--space-lg);background:var(--bg-tertiary);border-bottom:var(--brutal-border)}.nav-logo{display:flex;align-items:center;gap:var(--space-sm);font-weight:900;font-size:1.25rem;color:var(--text-primary)!important;text-decoration:none!important;background:none!important}.logo-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;background:var(--accent);border:var(--brutal-border);box-shadow:2px 2px 0 var(--text-primary);border-radius:var(--radius-sm);font-size:1rem;color:var(--text-primary);font-weight:900;transform:rotate(-5deg)}.nav-links{display:flex;align-items:center;gap:var(--space-sm)}.nav-links a{padding:var(--space-xs) var(--space-md);border-radius:var(--radius-sm);font-size:.9375rem;font-weight:800;color:var(--text-secondary);text-decoration:none;border:2px solid transparent;transition:all var(--duration-fast) var(--ease-out)}.nav-links a:hover,.nav-links a.active{color:var(--text-primary);background:var(--accent-secondary);border:2px solid var(--text-primary);box-shadow:2px 2px 0 var(--text-primary)}.nav-links a.active{background:var(--accent-tertiary)}.nav-toggle{display:none;background:var(--accent-tertiary);border:var(--brutal-border);box-shadow:2px 2px 0 var(--text-primary);color:var(--text-primary);font-size:1.25rem;cursor:pointer;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);font-weight:900}@media(max-width:768px){.nav-toggle{display:block}.nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;padding:var(--space-md);background:var(--bg-tertiary);border-bottom:var(--brutal-border)}.nav-links.open{display:flex}.nav-links a{width:100%;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm)}}.glass-card{background:var(--bg-tertiary);border:var(--brutal-border);border-radius:var(--radius-md);box-shadow:var(--brutal-shadow);padding:var(--space-xl);transition:all var(--duration-normal) var(--ease-out)}.glass-card:hover{transform:translate(-2px,-2px);box-shadow:var(--brutal-shadow-hover)}.tool-header{text-align:center;padding:var(--space-3xl) 0 var(--space-2xl)}.tool-header h1{margin-bottom:var(--space-md)}.tool-description{color:var(--text-secondary);font-size:1.125rem;font-weight:600;max-width:600px;margin:0 auto;background:var(--bg-tertiary);padding:var(--space-sm) var(--space-md);border:2px solid var(--text-primary);box-shadow:3px 3px 0 var(--text-primary);border-radius:var(--radius-md)}.tool-workspace{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl);align-items:start}@media(max-width:900px){.tool-workspace{grid-template-columns:1fr}}.tool-section-title{font-size:1rem;font-weight:900;text-transform:uppercase;color:var(--text-primary);margin-bottom:var(--space-lg);display:inline-block;background:var(--accent-quaternary);padding:4px 12px;border:2px solid var(--text-primary);box-shadow:2px 2px 0 var(--text-primary);transform:rotate(-1deg)}.form-group{margin-bottom:var(--space-lg)}.form-label{display:block;font-size:1rem;font-weight:800;color:var(--text-primary);margin-bottom:var(--space-sm);text-transform:uppercase}.form-input,.form-textarea,.form-select{width:100%;padding:var(--space-sm) var(--space-md);background:var(--bg-tertiary);border:2px solid var(--text-primary);border-radius:var(--radius-sm);box-shadow:2px 2px 0 var(--text-primary);color:var(--text-primary);font-family:var(--font-sans);font-size:1rem;font-weight:600;transition:all var(--duration-fast) var(--ease-out);outline:none}.form-input:focus,.form-textarea:focus,.form-select:focus{background:var(--accent-tertiary);box-shadow:4px 4px 0 var(--text-primary);transform:translate(-2px,-2px)}.form-input::placeholder,.form-textarea::placeholder{color:#999;font-weight:400}.form-textarea{resize:vertical;min-height:80px}.form-select{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;padding-left:8px;padding-right:28px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.form-hint{font-size:.8125rem;font-weight:600;color:var(--text-secondary);margin-top:var(--space-xs)}.char-counter{font-size:.8125rem;font-family:var(--font-mono);font-weight:700;margin-top:var(--space-xs);display:inline-block;padding:2px 6px;border:1px solid var(--text-primary);background:#fff}.char-counter.ok{background:var(--success);color:#000}.char-counter.warn{background:var(--warning);color:#000}.char-counter.over{background:var(--error);color:#000}.form-checkbox-group{display:flex;align-items:center;gap:var(--space-sm);cursor:pointer;font-size:1rem;font-weight:700;color:var(--text-primary)}.form-checkbox-group input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:24px;height:24px;border:2px solid var(--text-primary);border-radius:var(--radius-sm);background:var(--bg-tertiary);box-shadow:2px 2px 0 var(--text-primary);cursor:pointer;position:relative;transition:all var(--duration-fast) var(--ease-out);flex-shrink:0}.form-checkbox-group input[type=checkbox]:checked{background:var(--accent)}.form-checkbox-group input[type=checkbox]:checked:after{content:"✓";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:16px;color:var(--text-primary);font-weight:900}.code-output-wrapper{position:relative}.code-output{background:var(--bg-primary);border:var(--brutal-border);box-shadow:var(--brutal-shadow) inset;border-radius:var(--radius-md);padding:var(--space-lg);font-family:var(--font-mono);font-size:.875rem;font-weight:700;line-height:1.7;color:var(--text-primary);overflow-x:auto;white-space:pre-wrap;word-break:break-all;min-height:120px;max-height:500px;overflow-y:auto}.code-output::-webkit-scrollbar{width:10px;height:10px}.code-output::-webkit-scrollbar-track{background:var(--bg-secondary);border-left:2px solid var(--text-primary)}.code-output::-webkit-scrollbar-thumb{background:var(--accent);border:2px solid var(--text-primary)}.code-output .tag{color:#d90000}.code-output .attr{color:#0000d9}.code-output .value{color:green}.code-output .comment{color:#888;font-style:italic}.code-output .key{color:#909}.code-output .string{color:green}.code-output .bracket{color:#000}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);border:2px solid var(--text-primary);border-radius:var(--radius-sm);box-shadow:3px 3px 0 var(--text-primary);font-family:var(--font-sans);font-size:1rem;font-weight:900;text-transform:uppercase;cursor:pointer;transition:all var(--duration-fast) var(--ease-out);white-space:nowrap;outline:none;text-decoration:none!important}.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--text-primary)}.btn-primary{background:var(--accent-tertiary);color:var(--text-primary)}.btn-primary:hover{background:var(--accent);transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--text-primary)}.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary)}.btn-secondary:hover{background:var(--accent-secondary);transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--text-primary)}.btn-ghost{background:transparent;color:var(--text-primary);border:2px solid transparent;box-shadow:none;padding:var(--space-xs) var(--space-sm)}.btn-ghost:hover{border:2px solid var(--text-primary);box-shadow:2px 2px 0 var(--text-primary);background:var(--bg-tertiary)}.btn-icon{width:40px;height:40px;padding:0;border-radius:var(--radius-sm)}.btn-group{display:flex;gap:var(--space-sm);flex-wrap:wrap}.btn-copy .icon-check,.btn-copy.copied .icon-copy{display:none}.btn-copy.copied .icon-check{display:inline}.btn-copy.copied{background:var(--success)!important}.tab-bar{display:flex;gap:var(--space-sm);padding:var(--space-sm);background:var(--bg-secondary);border:var(--brutal-border);box-shadow:4px 4px 0 var(--text-primary) inset;border-radius:var(--radius-md);margin-bottom:var(--space-lg);overflow-x:auto}.tab-btn{flex:1;padding:var(--space-sm) var(--space-md);border:2px solid transparent;border-radius:var(--radius-sm);background:transparent;color:var(--text-secondary);font-family:var(--font-sans);font-size:.9375rem;font-weight:800;text-transform:uppercase;cursor:pointer;transition:all var(--duration-fast) var(--ease-out);white-space:nowrap}.tab-btn:hover{color:var(--text-primary);background:#0000000d}.tab-btn.active{background:var(--accent);color:var(--text-primary);border:2px solid var(--text-primary);box-shadow:2px 2px 0 var(--text-primary)}.toast-container{position:fixed;bottom:var(--space-xl);right:var(--space-xl);z-index:1000;display:flex;flex-direction:column;gap:var(--space-sm)}.toast{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);background:var(--bg-tertiary);border:var(--brutal-border);box-shadow:4px 4px 0 var(--text-primary);border-radius:var(--radius-md);font-size:1rem;font-weight:800;color:var(--text-primary);animation:toastIn var(--duration-slow) var(--ease-spring)}.toast.success{background:var(--success)}.toast.error{background:var(--error)}.toast-exit{animation:toastOut var(--duration-normal) var(--ease-out) forwards}.badge{display:inline-flex;align-items:center;padding:var(--space-2xs) var(--space-sm);border:2px solid var(--text-primary);box-shadow:2px 2px 0 var(--text-primary);border-radius:var(--radius-sm);font-size:.75rem;font-weight:900;text-transform:uppercase;letter-spacing:.05em;transform:rotate(-2deg)}.badge-accent{background:var(--accent-secondary)}.badge-free{background:var(--success)}.divider{border:none;height:4px;background:var(--text-primary);margin:var(--space-2xl) 0}.faq-section{padding:var(--space-3xl) 0}.faq-section h2{text-align:center;margin-bottom:var(--space-2xl)}.faq-item{border:2px solid var(--text-primary);box-shadow:4px 4px 0 var(--text-primary);background:var(--bg-tertiary);border-radius:var(--radius-md);margin-bottom:var(--space-md);padding:var(--space-lg)}.faq-question{font-weight:900;font-size:1.125rem;margin-bottom:var(--space-sm);color:var(--text-primary)}.faq-answer{color:var(--text-secondary);font-size:1rem;font-weight:600;line-height:1.7}.other-tools{padding:var(--space-3xl) 0}.other-tools h2{text-align:center;margin-bottom:var(--space-2xl)}.tools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-lg)}.tool-card{text-decoration:none!important;color:inherit;display:block}.tool-card .glass-card{text-align:center;padding:var(--space-xl);cursor:pointer}.tool-card .glass-card:hover{background:var(--accent-tertiary)}.tool-card:nth-child(2n) .glass-card:hover{background:var(--accent)}.tool-card:nth-child(3n) .glass-card:hover{background:var(--accent-secondary)}.tool-card-icon{font-size:2.5rem;margin-bottom:var(--space-md);display:inline-block;background:var(--bg-tertiary);padding:10px;border:2px solid var(--text-primary);box-shadow:2px 2px 0 var(--text-primary);border-radius:50%}.tool-card-title{font-weight:900;font-size:1.25rem;margin-bottom:var(--space-xs)}.tool-card-desc{font-size:.9375rem;font-weight:600;color:var(--text-secondary)}.site-footer{border-top:var(--brutal-border);background:var(--bg-secondary);padding:var(--space-2xl) 0;margin-top:var(--space-3xl);text-align:center}.footer-text{font-size:1rem;font-weight:800;color:var(--text-primary)}.footer-links{display:flex;justify-content:center;gap:var(--space-lg);margin-top:var(--space-md)}.footer-links a{font-size:1rem;font-weight:800;color:var(--text-primary);text-decoration:none!important}.footer-links a:hover{background:var(--accent-tertiary)}.text-gradient{background:linear-gradient(90deg,var(--accent),var(--accent-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;border-bottom:6px solid var(--accent-tertiary);display:inline-block;line-height:1}.brutal-heading{font-size:clamp(2rem,5vw,3.5rem);font-weight:900;margin-bottom:2rem;text-transform:uppercase;line-height:1.1;background:var(--accent);display:inline-block;padding:.5rem 1rem;border:var(--brutal-border);box-shadow:var(--brutal-shadow);transform:rotate(-1deg)}.brutal-heading-blue{background:var(--accent-secondary);transform:rotate(1deg)}.brutal-heading-yellow{background:var(--accent-tertiary);transform:rotate(-.5deg)}.article-content h2{font-size:2rem;font-weight:800;margin:3rem 0 1.5rem;padding-bottom:.5rem;border-bottom:var(--brutal-border)}.article-content h3{font-size:1.5rem;font-weight:800;margin:2rem 0 1rem}.article-content p{margin-bottom:1.5rem}.article-content blockquote{background:var(--accent-quaternary);border:var(--brutal-border);box-shadow:var(--brutal-shadow);padding:1.5rem;margin:2rem 0;font-weight:700;font-size:1.25rem;font-style:italic}.article-content pre{background:var(--text-primary);color:#fff;padding:1.5rem;border:var(--brutal-border);box-shadow:var(--brutal-shadow);margin:2rem 0;overflow-x:auto;border-radius:4px;font-family:var(--font-mono);font-size:.9rem}.article-content pre code{background:transparent;color:inherit;padding:0;border:none;font-weight:400}.article-content code{font-family:var(--font-mono);background:var(--accent-tertiary);color:var(--text-primary);padding:.2rem .4rem;border:2px solid var(--text-primary);font-weight:700}.showcase-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-lg)}@media(max-width:640px){.showcase-grid{grid-template-columns:1fr}}.showcase-card{text-decoration:none;color:inherit;display:block}.showcase-card .glass-card{padding:var(--space-2xl);cursor:pointer;position:relative;overflow:hidden}.showcase-card .glass-card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent-gradient);opacity:0;transition:opacity var(--duration-normal) var(--ease-out)}.showcase-card .glass-card:hover:before{opacity:1}.showcase-card-icon{font-size:2.5rem;margin-bottom:var(--space-lg);display:block}.showcase-card h3{font-size:1.25rem;margin-bottom:var(--space-sm)}.showcase-card p{color:var(--text-secondary);font-size:.9375rem;line-height:1.6;margin-bottom:var(--space-lg)}.tools-showcase{padding:var(--space-2xl) 0 var(--space-4xl)}.bottom-cta{text-align:center;padding:var(--space-4xl) var(--space-2xl);background:var(--accent-tertiary);border:var(--brutal-border);border-width:4px;box-shadow:8px 8px 0 var(--text-primary);border-radius:var(--radius-lg);margin:var(--space-4xl) auto;max-width:900px;position:relative;overflow:hidden}.bottom-cta:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:radial-gradient(rgba(0,0,0,.1) 2px,transparent 2px);background-size:20px 20px;opacity:.5;z-index:0}.bottom-cta>*{position:relative;z-index:1}.bottom-cta h2{margin-top:0;margin-bottom:var(--space-xl);background:var(--bg-tertiary);padding:var(--space-md) var(--space-xl);border:3px solid var(--text-primary);display:inline-block;box-shadow:4px 4px 0 var(--text-primary);border-radius:var(--radius-sm);text-transform:uppercase;font-weight:900;font-size:2rem}@media(max-width:768px){.bottom-cta h2{font-size:1.5rem;padding:var(--space-sm) var(--space-md)}}.bottom-cta p{font-size:1.25rem;font-weight:800;color:var(--text-primary);margin-bottom:var(--space-2xl);max-width:700px;margin-left:auto;margin-right:auto;line-height:1.5}.bottom-cta .btn{background:var(--bg-tertiary)!important;color:var(--text-primary)!important}.bottom-cta .btn:hover{background:var(--accent)!important}.showcase-card .btn{background:var(--bg-tertiary)!important;color:var(--text-primary)!important;width:100%}.showcase-card .btn:hover{background:var(--accent)!important}@keyframes fadeInUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes toastIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes toastOut{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}@keyframes copySuccess{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.stagger-in>*{opacity:0;animation:fadeInUp .3s var(--ease-out) forwards}.stagger-in>*:nth-child(1){animation-delay:0ms}.stagger-in>*:nth-child(2){animation-delay:60ms}.stagger-in>*:nth-child(3){animation-delay:.12s}.stagger-in>*:nth-child(4){animation-delay:.18s}.stagger-in>*:nth-child(5){animation-delay:.24s}.stagger-in>*:nth-child(6){animation-delay:.3s}.stagger-in>*:nth-child(7){animation-delay:.36s}.stagger-in>*:nth-child(8){animation-delay:.42s}.page-enter{animation:fadeInUp .4s var(--ease-out)}.btn-copy.copied{animation:copySuccess var(--duration-normal) var(--ease-out)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}