Home
Documents
NF-e XML Viewer

NF-e XML Viewer

Upload a Brazilian NF-e XML file and view issuer, recipient, products, taxes and totals in a clean, organized layout.

No sign-up · 100% free · Private

Drag and drop your NF-e XML file here

XML (NF-e, NFC-e, CT-e)

Paste NF-e XML

<div class="flex gap-3">
                <button type="button" id="nfe-paste-confirm" class="ft-btn ft-btn-primary">Parse XML</button>
                <button type="button" id="nfe-paste-cancel" class="ft-btn ft-btn-ghost">Cancel</button>
            </div>
        </div>
    </div>

<div id="nfe-results" class="hidden">

<div class="flex flex-wrap items-center gap-3 mb-4 p-3 bg-surface border border-border rounded-xl">
            <div class="flex items-center gap-2 min-w-0">
                <svg class="w-4 h-4 text-green-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                <span id="nfe-doc-type" class="text-sm font-semibold text-text-primary"></span>
                <span id="nfe-chave" class="text-xs text-text-muted font-mono truncate"></span>
            </div>
            <button type="button" id="btn-nfe-reset" class="ml-auto ft-btn ft-btn-ghost ft-btn-sm">Load new file</button>
        </div>

<div data-tool-pair="nfe-viewer">
            <div role="tablist" class="ft-tab-list mb-4">
                <button role="tab" class="ft-tab ft-tab--active" data-tab="nfe-t0" id="nfe-tab-0" aria-controls="nfe-panel-0" aria-selected="true">Emitter</button>
                <button role="tab" class="ft-tab" data-tab="nfe-t1" id="nfe-tab-1" aria-controls="nfe-panel-1" aria-selected="false" tabindex="-1">Recipient</button>
                <button role="tab" class="ft-tab" data-tab="nfe-t2" id="nfe-tab-2" aria-controls="nfe-panel-2" aria-selected="false" tabindex="-1">Products</button>
                <button role="tab" class="ft-tab" data-tab="nfe-t3" id="nfe-tab-3" aria-controls="nfe-panel-3" aria-selected="false" tabindex="-1">Taxes</button>
                <button role="tab" class="ft-tab" data-tab="nfe-t4" id="nfe-tab-4" aria-controls="nfe-panel-4" aria-selected="false" tabindex="-1">Totals</button>
            </div>

<div role="tabpanel" id="nfe-panel-0" aria-labelledby="nfe-tab-0" data-tab-content="nfe-t0">
                <div class="bg-surface border border-border rounded-2xl overflow-hidden">
                    <div class="px-4 py-3 bg-elevated border-b border-border">
                        <span class="text-sm font-semibold text-text-primary">Emitter</span>
                    </div>
                    <div class="p-4">
                        <dl id="nfe-emitente" class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-3"></dl>
                    </div>
                </div>
            </div>

<div role="tabpanel" id="nfe-panel-1" aria-labelledby="nfe-tab-1" data-tab-content="nfe-t1" hidden>
                <div class="bg-surface border border-border rounded-2xl overflow-hidden">
                    <div class="px-4 py-3 bg-elevated border-b border-border">
                        <span class="text-sm font-semibold text-text-primary">Recipient</span>
                    </div>
                    <div class="p-4">
                        <dl id="nfe-destinatario" class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-3"></dl>
                    </div>
                </div>
            </div>

<div role="tabpanel" id="nfe-panel-2" aria-labelledby="nfe-tab-2" data-tab-content="nfe-t2" hidden>
                <div class="bg-surface border border-border rounded-2xl overflow-hidden">
                    <div class="px-4 py-3 bg-elevated border-b border-border flex items-center justify-between">
                        <span class="text-sm font-semibold text-text-primary">Products</span>
                        <span id="nfe-prod-count" class="text-xs text-text-muted"></span>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="ft-table w-full text-xs">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Código</th>
                                    <th class="min-w-48">Descrição</th>
                                    <th>NCM</th>
                                    <th>CFOP</th>
                                    <th class="text-right">Qtd</th>
                                    <th class="text-right">Unit. (R$)</th>
                                    <th class="text-right">Total (R$)</th>
                                </tr>
                            </thead>
                            <tbody id="nfe-produtos-tbody"></tbody>
                        </table>
                    </div>
                </div>
            </div>

<div role="tabpanel" id="nfe-panel-3" aria-labelledby="nfe-tab-3" data-tab-content="nfe-t3" hidden>
                <div class="bg-surface border border-border rounded-2xl overflow-hidden">
                    <div class="px-4 py-3 bg-elevated border-b border-border">
                        <span class="text-sm font-semibold text-text-primary">Taxes</span>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="ft-table w-full text-sm">
                            <thead>
                                <tr>
                                    <th>Imposto</th>
                                    <th class="text-right">Base de Cálculo (R$)</th>
                                    <th class="text-right">Alíquota (%)</th>
                                    <th class="text-right">Valor (R$)</th>
                                </tr>
                            </thead>
                            <tbody id="nfe-impostos-tbody"></tbody>
                        </table>
                    </div>
                </div>
            </div>

<div role="tabpanel" id="nfe-panel-4" aria-labelledby="nfe-tab-4" data-tab-content="nfe-t4" hidden>
                <div class="bg-surface border border-border rounded-2xl overflow-hidden">
                    <div class="px-4 py-3 bg-elevated border-b border-border">
                        <span class="text-sm font-semibold text-text-primary">Totals</span>
                    </div>
                    <div class="p-4">
                        <dl id="nfe-totais" class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-3"></dl>
                    </div>
                    
                    <div id="nfe-chave-block" class="hidden px-4 pb-4">
                        <div class="bg-elevated border border-border rounded-xl p-3">
                            <p class="text-xs text-text-muted mb-1 font-semibold">Access Key</p>
                            <div class="flex items-center gap-2">
                                <p id="nfe-chave-full" class="font-mono text-xs text-text-primary break-all flex-1"></p>
                                <button type="button" id="btn-copy-chave" class="ft-btn ft-btn-ghost ft-btn-sm shrink-0">Copy</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<div id="nfe-error" class="hidden ft-alert-danger text-sm"></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="nfe-xml-viewer">
    <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>NF-e XML Viewer — Read Brazilian Electronic Invoices Online</h2><p>The <strong>NF-e XML Viewer</strong> parses and displays Brazilian electronic invoice (Nota Fiscal Eletrônica) XML files in a human-readable format. Upload your NF-e XML and see all fiscal details — emitter, recipient, products, taxes, totals, and transport information — organized in clear tables.</p><p>NF-e XML files follow the technical layout defined by ENCAT/SEFAZ and contain dozens of nested XML elements with tax calculations (ICMS, IPI, PIS, COFINS), product descriptions, NCM codes, CFOP codes, and digital signatures. The viewer extracts and formats all these fields, calculates totals, and presents them in an intuitive layout that matches the printed DANFE (Documento Auxiliar da Nota Fiscal Eletrônica).</p><p><strong>Accountants</strong> use this tool to quickly review invoice details without specialized fiscal software. <strong>Purchasing managers</strong> verify product descriptions, quantities, and tax amounts against purchase orders. <strong>ERP developers</strong> debug NF-e generation by inspecting the raw XML structure in a readable format.</p><p>NF-e XML Viewer is part of the facilita.tools suite of free browser-based fiscal 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 information does the viewer show?
                    <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>It displays emitter and recipient data, all products with descriptions and NCM codes, tax breakdowns (ICMS, IPI, PIS, COFINS), totals, transport details, and additional information fields.</div>
                </div>
            </details>
            <details class="ft-accordion-item">
                <summary class="ft-accordion-trigger">
                    Does it validate the NF-e digital signature?
                    <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. This tool is a viewer that parses and displays the XML content. To validate the digital signature or check authorization status, consult the SEFAZ portal for the issuing state.</div>
                </div>
            </details>
            <details class="ft-accordion-item">
                <summary class="ft-accordion-trigger">
                    Is my invoice data kept confidential?
                    <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. The XML is parsed entirely in your browser using JavaScript. No invoice data is sent to any server, ensuring complete confidentiality of your fiscal information.</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/nfe-key-validator" class="ft-card-tool group" aria-label="Validate NFe Key">
                <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(99,102,241,0.12); color: #6366F1;"
     aria-hidden="true">
    <i data-lucide="key-square" class="w-5 h-5" style="display:block;"></i>
</div>

</div>
                <h3 class="ft-h4 text-sm font-semibold">Validate NFe Key</h3>
                <p class="ft-caption text-xs line-clamp-2"></p>
            </a>
            <a href="/en/nfe-key-generator" class="ft-card-tool group" aria-label="NFe Key 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(99,102,241,0.12); color: #6366F1;"
     aria-hidden="true">
    <i data-lucide="key" class="w-5 h-5" style="display:block;"></i>
</div>

</div>
                <h3 class="ft-h4 text-sm font-semibold">NFe Key Generator</h3>
                <p class="ft-caption text-xs line-clamp-2"></p>
            </a>
            <a href="/en/cnab-file-reader" class="ft-card-tool group" aria-label="CNAB File Reader">
                <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(99,102,241,0.12); color: #6366F1;"
     aria-hidden="true">
    <i data-lucide="file-stack" class="w-5 h-5" style="display:block;"></i>
</div>

</div>
                <h3 class="ft-h4 text-sm font-semibold">CNAB File Reader</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="eAKAmINFB9c5Xpt3t7OdYg==">(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.nonce='eAKAmINFB9c5Xpt3t7OdYg==';d.innerHTML="window.__CF$cv$params={r:'9e6ec5208b065e44',t:'MTc3NTI4OTUyOA=='};var a=document.createElement('script');a.nonce='eAKAmINFB9c5Xpt3t7OdYg==';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>