Htaccess Generator

Generate Apache .htaccess rules visually: HTTPS redirect, www, cache control, CORS, IP blocking, directory protection and more.

No sign-up 100% free Private

HTTPS Redirect

Force secure connection via HTTPS

WWW Redirect

Redirecionar www ↔ non-www

Custom Error Pages

404, 403, 500 personalizados

Disable Directory Listing

Bloquear listagem de arquivos (Options -Indexes)

Compressão Gzip/Deflate

Enable compression for HTML, CSS, JS and JSON

Cache Control

Set cache headers by file type

Block IPs

Deny access from specific IPs

<div class="htaccess-rule bg-surface border border-border rounded-xl overflow-hidden" data-rule="cors">
                <label class="flex items-center gap-3 p-3 cursor-pointer hover:bg-elevated/50 transition-colors">
                    <input type="checkbox" id="rule-cors" class="ft-checkbox" />
                    <div class="flex-1">
                        <span class="text-sm font-semibold text-text-primary">CORS Headers</span>
                        <p class="text-xs text-text-muted">Allow Cross-Origin Resource Sharing</p>
                    </div>
                </label>
                <div id="opts-cors" class="hidden border-t border-border px-4 py-3">
                    <input type="text" id="cors-origin" class="ft-input text-sm"
                           placeholder="https://example.com (ou * para todos)" value="*" />
                </div>
            </div>

<div class="htaccess-rule bg-surface border border-border rounded-xl" data-rule="charset">
                <label class="flex items-center gap-3 p-3 cursor-pointer hover:bg-elevated/50 transition-colors">
                    <input type="checkbox" id="rule-charset" class="ft-checkbox" />
                    <div class="flex-1">
                        <span class="text-sm font-semibold text-text-primary">Forçar Charset UTF-8</span>
                        <p class="text-xs text-text-muted">AddDefaultCharset UTF-8</p>
                    </div>
                </label>
            </div>

<button type="button" id="btn-htaccess-reset" class="ft-btn ft-btn-ghost w-full text-sm">
                Clear all rules
            </button>
        </div>

<div>
            <div class="sticky top-20">
                <div class="flex items-center justify-between mb-2">
                    <label class="ft-label">.htaccess</label>
                    <div class="flex gap-2">
                        
<button type="button"
        class="ft-btn-outline ft-btn-sm"
        data-copy="htaccess-output"
        aria-label="Copy">
    <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
        <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
        <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
    </svg>
    <span class="copy-label">Copy</span>
</button>

<button type="button" id="btn-htaccess-dl" class="ft-btn ft-btn-ghost ft-btn-sm" title="Download .htaccess">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                        </button>
                    </div>
                </div>
                <div class="bg-elevated border border-border rounded-2xl overflow-hidden">
                    <div class="flex items-center gap-2 px-4 py-2 bg-surface border-b border-border">
                        <div class="w-3 h-3 rounded-full bg-red-500/50"></div>
                        <div class="w-3 h-3 rounded-full bg-yellow-500/50"></div>
                        <div class="w-3 h-3 rounded-full bg-green-500/50"></div>
                        <span class="ml-2 text-xs text-text-muted font-mono">.htaccess</span>
                    </div>
                    <pre id="htaccess-output"
                         class="p-4 text-xs font-mono text-text-primary overflow-x-auto overflow-y-auto max-h-[500px] leading-relaxed whitespace-pre"
                         aria-live="polite"></pre>
                </div>
                <p class="ft-hint mt-2" id="htaccess-lines-count"></p>
            </div>
        </div>
    </div>
</div>

</div>

</div>
    </div>

<div class="mb-8">
            
<div id="feedback-widget" class="flex flex-col items-center gap-3 py-4" data-tool="htaccess-generator">
    <p class="ft-text-sm text-text-muted font-medium">
        Was this tool helpful?
    </p>
    <div class="flex items-center gap-3" id="feedback-buttons">
        <button type="button"
                class="ft-btn-outline ft-btn-sm"
                data-feedback="up"
                aria-label="Yes, helpful">
            <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                <path d="M7 10v12m8-16.12L14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z" />
            </svg>
            Yes
        </button>
        <button type="button"
                class="ft-btn-outline ft-btn-sm"
                data-feedback="down"
                aria-label="No, not helpful">
            <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                <path d="M17 14V2M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L14 22h0a3.13 3.13 0 0 1-3-3.88Z" />
            </svg>
            No
        </button>
    </div>
    <p id="feedback-thanks" class="ft-text-sm text-success font-medium hidden">
        Thank you for your feedback!
    </p>
</div>

</div>
</div>

<section class="bg-surface/50 border-t border-border/50">
        <div class="ft-container ft-section">
            <div class="max-w-3xl mx-auto">
                <div class="ft-text-seo prose prose-sm dark:prose-invert">
                    <h2>.htaccess Generator — Visual Builder for Apache Rewrite Rules</h2><p>The <strong>.htaccess Generator</strong> is a visual builder for creating Apache .htaccess configuration rules without memorizing complex directive syntax. Build redirects, URL rewrites, CORS headers, browser caching rules, and security headers through an intuitive form-based interface.</p><p>Select the type of rule you need — 301/302 redirects, RewriteRule patterns, CORS access-control headers, Cache-Control and Expires directives, or security headers like X-Frame-Options, Content-Security-Policy, and HSTS. The tool generates the correct Apache syntax with proper flags (L, R, NC, QSA) and outputs a complete .htaccess file you can download or copy.</p><p><strong>Web developers</strong> use this tool when migrating sites, setting up URL rewrites, or configuring HTTPS redirects. <strong>System administrators</strong> generate cache and security header configurations for Apache servers. <strong>WordPress administrators</strong> create custom redirect rules and performance optimizations without risking syntax errors.</p><p>.htaccess Generator is part of the facilita.tools suite of free browser-based developer utilities. Available in Portuguese, English, and Spanish, optimized for desktop and mobile browsers.</p>
                </div>
                    <p class="ft-caption mt-4">
                        <time datetime="2026-03-24">Last updated: 2026-03-24</time>
                    </p>
            </div>
        </div>
    </section>
    <section class="border-t border-border/50">
        <div class="ft-container ft-section">
            <h2 class="ft-h2 mb-8">Frequently Asked Questions</h2>
            
    <div class="ft-accordion">
            <details class="ft-accordion-item">
                <summary class="ft-accordion-trigger">
                    What types of rules can I generate?
                    <svg class="ft-accordion-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                        <path d="m6 9 6 6 6-6" />
                    </svg>
                </summary>
                <div class="ft-accordion-content">
                    <div>You can generate 301/302 redirects, URL rewrites with regex, CORS headers, browser caching directives, security headers (CSP, HSTS, X-Frame-Options), and HTTPS enforcement rules.</div>
                </div>
            </details>
            <details class="ft-accordion-item">
                <summary class="ft-accordion-trigger">
                    Will the generated file work on Nginx?
                    <svg class="ft-accordion-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                        <path d="m6 9 6 6 6-6" />
                    </svg>
                </summary>
                <div class="ft-accordion-content">
                    <div>No. The .htaccess format is specific to Apache web servers. Nginx uses a different configuration syntax (nginx.conf). The generated rules will only work on Apache with mod_rewrite enabled.</div>
                </div>
            </details>
            <details class="ft-accordion-item">
                <summary class="ft-accordion-trigger">
                    Can I combine multiple rules in one file?
                    <svg class="ft-accordion-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                        <path d="m6 9 6 6 6-6" />
                    </svg>
                </summary>
                <div class="ft-accordion-content">
                    <div>Yes. Add as many rules as you need — redirects, caching, security headers — and the tool combines them into a single .htaccess file with proper ordering and syntax.</div>
                </div>
            </details>
    </div>

</div>
    </section>
    <section id="related-tools" class="relative overflow-hidden border-t border-border/50">
        <div class="ft-container ft-section">
            <h2 class="ft-h2 mb-8">Related Tools</h2>
            
    <div class="ft-grid-tools">
            <a href="/en/robots-txt-generator" class="ft-card-tool group" aria-label="Robots.txt Generator">
                <div class="w-12 h-12 flex items-center justify-center">
                    <div class="w-full h-full min-w-[2.5rem] min-h-[2.5rem] rounded-xl flex items-center justify-center transition-colors duration-300"
     style="background: rgba(14,165,233,0.12); color: #0EA5E9;"
     aria-hidden="true">
    <i data-lucide="bot" class="w-5 h-5" style="display:block;"></i>
</div>

</div>
                <h3 class="ft-h4 text-sm font-semibold">Robots.txt Generator</h3>
                <p class="ft-caption text-xs line-clamp-2"></p>
            </a>
            <a href="/en/meta-tags-generator" class="ft-card-tool group" aria-label="Meta Tags Generator">
                <div class="w-12 h-12 flex items-center justify-center">
                    <div class="w-full h-full min-w-[2.5rem] min-h-[2.5rem] rounded-xl flex items-center justify-center transition-colors duration-300"
     style="background: rgba(14,165,233,0.12); color: #0EA5E9;"
     aria-hidden="true">
    <i data-lucide="tags" class="w-5 h-5" style="display:block;"></i>
</div>

</div>
                <h3 class="ft-h4 text-sm font-semibold">Meta Tags Generator</h3>
                <p class="ft-caption text-xs line-clamp-2"></p>
            </a>
            <a href="/en/env-formatter" class="ft-card-tool group" aria-label="Env Formatter">
                <div class="w-12 h-12 flex items-center justify-center">
                    <div class="w-full h-full min-w-[2.5rem] min-h-[2.5rem] rounded-xl flex items-center justify-center transition-colors duration-300"
     style="background: rgba(14,165,233,0.12); color: #0EA5E9;"
     aria-hidden="true">
    <i data-lucide="file-cog" class="w-5 h-5" style="display:block;"></i>
</div>

</div>
                <h3 class="ft-h4 text-sm font-semibold">Env Formatter</h3>
                <p class="ft-caption text-xs line-clamp-2"></p>
            </a>
            <a href="/en/regex-tester" class="ft-card-tool group" aria-label="Regex Tester">
                <div class="w-12 h-12 flex items-center justify-center">
                    <div class="w-full h-full min-w-[2.5rem] min-h-[2.5rem] rounded-xl flex items-center justify-center transition-colors duration-300"
     style="background: rgba(14,165,233,0.12); color: #0EA5E9;"
     aria-hidden="true">
    <i data-lucide="regex" class="w-5 h-5" style="display:block;"></i>
</div>

</div>
                <h3 class="ft-h4 text-sm font-semibold">Regex Tester</h3>
                <p class="ft-caption text-xs line-clamp-2"></p>
            </a>
    </div>

</div>
    </section>

</main>
        </div>
    </div>

<div class="col-span-2 sm:col-span-1 space-y-5">
                <a href="/en" class="flex items-center gap-2.5">
                    <img src="/images/brand/site-logo.webp" alt="" class="h-8 w-8 flex-shrink-0" width="32" height="32" loading="lazy" decoding="async" aria-hidden="true" />
                    <span class="text-lg font-bold text-text-primary tracking-tight">facilita<span class="text-primary">.tools</span></span>
                </a>
                <p class="text-sm text-text-muted leading-relaxed">
                    Free online tools for developers, professionals, and everyday tasks.
                </p>
                <div class="flex items-center gap-3 pt-1">
                    <a href="https://github.com/Wmedrado" target="_blank" rel="noopener noreferrer"
                       class="w-9 h-9 rounded-lg bg-surface border border-border/40 flex items-center justify-center text-text-muted hover:text-text-primary hover:border-border transition-all duration-200" aria-label="GitHub">
                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
                        <span class="sr-only">GitHub opens in new tab</span>
                    </a>
                    <a href="https://www.linkedin.com/in/devwilliam" target="_blank" rel="noopener noreferrer"
                       class="w-9 h-9 rounded-lg bg-surface border border-border/40 flex items-center justify-center text-text-muted hover:text-text-primary hover:border-border transition-all duration-200" aria-label="LinkedIn">
                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
                        <span class="sr-only">LinkedIn opens in new tab</span>
                    </a>
                </div>
            </div>

<div>
                <p class="text-xs font-semibold uppercase tracking-widest text-text-muted mb-4">
                    Tools
                </p>
                <ul class="space-y-2.5">
                        <li><a href="/en/tools/developer" class="text-sm text-text-muted hover:text-text-primary transition-colors duration-200">Developer</a></li>
                        <li><a href="/en/tools/finance" class="text-sm text-text-muted hover:text-text-primary transition-colors duration-200">Finance</a></li>
                        <li><a href="/en/tools/calculators" class="text-sm text-text-muted hover:text-text-primary transition-colors duration-200">Calculators</a></li>
                        <li><a href="/en/tools/text" class="text-sm text-text-muted hover:text-text-primary transition-colors duration-200">Text</a></li>
                        <li><a href="/en/tools/security" class="text-sm text-text-muted hover:text-text-primary transition-colors duration-200">Security</a></li>
                        <li><a href="/en/tools/date-time" class="text-sm text-text-muted hover:text-text-primary transition-colors duration-200">Date & Time</a></li>
                </ul>
            </div>

<div>
                <p class="text-xs font-semibold uppercase tracking-widest text-text-muted mb-4">
                    Resources
                </p>
                <ul class="space-y-2.5">
                    <li><a href="/en/plans" class="text-sm text-text-muted hover:text-text-primary transition-colors duration-200">Plans</a></li>
                    <li><a href="/en/api/docs" class="text-sm text-text-muted hover:text-text-primary transition-colors duration-200">API Docs</a></li>

</ul>
            </div>

<div>
                <p class="text-xs font-semibold uppercase tracking-widest text-text-muted mb-4">
                    Company
                </p>
                <ul class="space-y-2.5">
                    <li><a href="/en/about" class="text-sm text-text-muted hover:text-text-primary transition-colors duration-200">About</a></li>
                    <li><a href="/en/terms" class="text-sm text-text-muted hover:text-text-primary transition-colors duration-200">Terms of Use</a></li>
                    <li><a href="/en/privacy" class="text-sm text-text-muted hover:text-text-primary transition-colors duration-200">Privacy Policy</a></li>
                </ul>
            </div>
        </div>

<div class="border-t border-border/20 mt-10 pt-6">
        <div class="flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-text-muted">
            <p>© 2026 facilita.tools. All rights reserved.</p>

<a href="https://medradolabs.com" target="_blank" rel="noopener noreferrer"
               class="flex items-center gap-1.5 text-text-muted hover:text-text-primary transition-colors duration-200">
                <img src="/images/brand/medrado-labs-icon.webp" alt="" width="14" height="14" class="w-3.5 h-3.5 rounded-sm" aria-hidden="true">
                Developed by Medrado Labs
            </a>

<div class="flex items-center justify-between p-4 border-b border-border">
        <h2 class="text-sm font-semibold text-text-primary flex items-center gap-2">
            <svg class="w-4 h-4 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <circle cx="12" cy="4" r="1" fill="currentColor" stroke="none"/>
                <path d="M7 8l5 0l5 0"/>
                <path d="M12 8l0 8"/>
                <path d="M8 20l4-4l4 4"/>
            </svg>
            Accessibility
        </h2>
        <button type="button"
                class="p-1 rounded-md text-text-muted hover:text-text-primary hover:bg-elevated
                       focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
                aria-label="Close"
                data-a11y-close>
            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <path d="M18 6L6 18M6 6l12 12"/>
            </svg>
        </button>
    </div>

<button type="button"
                    class="ft-a11y-toggle w-full"
                    data-a11y-action="high-contrast"
                    role="switch"
                    aria-checked="false">
                <div class="flex items-center gap-3">
                    <svg class="w-4 h-4 text-text-muted flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>
                    </svg>
                    <span class="text-sm text-text-primary">High Contrast</span>
                </div>
                <div class="ft-a11y-switch" aria-hidden="true">
                    <div class="ft-a11y-switch-thumb"></div>
                </div>
            </button>
            <button type="button"
                    class="ft-a11y-toggle w-full"
                    data-a11y-action="dyslexia-font"
                    role="switch"
                    aria-checked="false">
                <div class="flex items-center gap-3">
                    <svg class="w-4 h-4 text-text-muted flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="M4 7V4h16v3M9 20h6M12 4v16"/>
                    </svg>
                    <span class="text-sm text-text-primary">Dyslexia Font</span>
                </div>
                <div class="ft-a11y-switch" aria-hidden="true">
                    <div class="ft-a11y-switch-thumb"></div>
                </div>
            </button>
            <button type="button"
                    class="ft-a11y-toggle w-full"
                    data-a11y-action="highlight-links"
                    role="switch"
                    aria-checked="false">
                <div class="flex items-center gap-3">
                    <svg class="w-4 h-4 text-text-muted flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/>
                    </svg>
                    <span class="text-sm text-text-primary">Highlight Links</span>
                </div>
                <div class="ft-a11y-switch" aria-hidden="true">
                    <div class="ft-a11y-switch-thumb"></div>
                </div>
            </button>
            <button type="button"
                    class="ft-a11y-toggle w-full"
                    data-a11y-action="reading-guide"
                    role="switch"
                    aria-checked="false">
                <div class="flex items-center gap-3">
                    <svg class="w-4 h-4 text-text-muted flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="M4 6h16M4 12h16M4 18h7"/>
                    </svg>
                    <span class="text-sm text-text-primary">Reading Guide</span>
                </div>
                <div class="ft-a11y-switch" aria-hidden="true">
                    <div class="ft-a11y-switch-thumb"></div>
                </div>
            </button>
            <button type="button"
                    class="ft-a11y-toggle w-full"
                    data-a11y-action="big-cursor"
                    role="switch"
                    aria-checked="false">
                <div class="flex items-center gap-3">
                    <svg class="w-4 h-4 text-text-muted flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3zM13 13l6 6"/>
                    </svg>
                    <span class="text-sm text-text-primary">Big Cursor</span>
                </div>
                <div class="ft-a11y-switch" aria-hidden="true">
                    <div class="ft-a11y-switch-thumb"></div>
                </div>
            </button>
            <button type="button"
                    class="ft-a11y-toggle w-full"
                    data-a11y-action="pause-animations"
                    role="switch"
                    aria-checked="false">
                <div class="flex items-center gap-3">
                    <svg class="w-4 h-4 text-text-muted flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <span class="text-sm text-text-primary">Pause Animations</span>
                </div>
                <div class="ft-a11y-switch" aria-hidden="true">
                    <div class="ft-a11y-switch-thumb"></div>
                </div>
            </button>
            <button type="button"
                    class="ft-a11y-toggle w-full"
                    data-a11y-action="text-spacing"
                    role="switch"
                    aria-checked="false">
                <div class="flex items-center gap-3">
                    <svg class="w-4 h-4 text-text-muted flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="M21 6H3M3 12h18M3 18h18M8 6v12m8-12v12"/>
                    </svg>
                    <span class="text-sm text-text-primary">Text Spacing</span>
                </div>
                <div class="ft-a11y-switch" aria-hidden="true">
                    <div class="ft-a11y-switch-thumb"></div>
                </div>
            </button>

<div class="pt-2 border-t border-border">
            <button type="button"
                    class="w-full text-center text-xs text-text-muted hover:text-error transition-colors py-2
                           focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 rounded"
                    data-a11y-action="reset">
                Reset all preferences
            </button>
        </div>
    </div>
</div>

<button b-7n80sbgx6b id="pwa-install-btn" class="hidden fixed bottom-4 right-4 z-50 ft-btn ft-btn-primary shadow-lg" aria-label="Install App">
        <svg b-7n80sbgx6b class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path b-7n80sbgx6b stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" /></svg>
        Install app
    </button>
</body>
</html>
<script nonce="w8IhQCSqrUezaHQK2TcMwQ==">(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.nonce='w8IhQCSqrUezaHQK2TcMwQ==';d.innerHTML="window.__CF$cv$params={r:'9e6ec0739b41a87d',t:'MTc3NTI4OTMzNg=='};var a=document.createElement('script');a.nonce='w8IhQCSqrUezaHQK2TcMwQ==';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>