accessgen-a11y-widget 0.0.0-stage → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +61 -2
  2. package/dist/a11y-widget.min.js +384 -0
  3. package/package.json +24 -4
package/README.md CHANGED
@@ -1,3 +1,62 @@
1
- # Temporary Holding Version
1
+ # A11y Widget
2
2
 
3
- This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
3
+ Standalone accessibility overlay you can drop onto any page. Users open a floating launcher and adjust vision, reading, motion, and navigation settings. Preferences persist in the browser.
4
+
5
+ No build step and no runtime dependencies. The widget is two static files: `src/a11y-widget.js` and `src/a11y-widget.css`.
6
+
7
+ ## Features
8
+
9
+ **Profiles** — one-click presets: Vision, Motor, Cognitive, Senior, Focus, Dyslexia.
10
+
11
+ **Vision** — dark / light mode, high or low contrast, invert, grayscale, desaturate, color-blindness filters (protanopia, deuteranopia, tritanopia), link and heading highlights, hide images, stronger focus ring.
12
+
13
+ **Reading** — font size, spacing, dyslexia-friendly type, readable line width, alignment, and related text controls.
14
+
15
+ **Motion** — pause or reduce animations.
16
+
17
+ **Navigate** — reading guides, masks, cursor, and keyboard-oriented helpers.
18
+
19
+ Open the panel with the floating button or **Alt+A**. Close it the same way, with the panel close control, or Escape.
20
+
21
+ ## Quick start
22
+
23
+ You need a local HTTP server so the module script can load. From the project root:
24
+
25
+ ```bash
26
+ npm start
27
+ ```
28
+
29
+ That runs `npx serve .`. Open the URL it prints (usually `http://localhost:3000`) and use:
30
+
31
+ - `index.html` — full demo with contrast, forms, tables, images, and animation cases
32
+ - `test-widget.html` — minimal page for checking that the launcher appears
33
+
34
+ You can also open the files through any other static server.
35
+
36
+ ## Embed on a site
37
+
38
+ Link the stylesheet and load the script as a module:
39
+
40
+ ```html
41
+ <link rel="stylesheet" href="/path/to/a11y-widget.css" />
42
+ <script type="module" src="/path/to/a11y-widget.js"></script>
43
+ ```
44
+
45
+ The script injects the launcher and panel into the page. Keep the CSS and JS URLs in sync so styles match the markup the script inserts.
46
+
47
+ ## Project layout
48
+
49
+ ```
50
+ a11y-widget/
51
+ ├── index.html Demo / edge-case page
52
+ ├── test-widget.html Minimal smoke-test page
53
+ ├── package.json npm start helper
54
+ ├── src/
55
+ │ ├── a11y-widget.js Widget logic and injected markup
56
+ │ └── a11y-widget.css Widget styles
57
+ └── .kiro/specs/ Design and requirements notes
58
+ ```
59
+
60
+ ## License
61
+
62
+ MIT
package/dist/a11y-widget.min.js ADDED
@@ -0,0 +1,384 @@
1
+ (function(){try{if(typeof document<`u`){var e=document.createElement(`style`);e.appendChild(document.createTextNode(`*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--brand:#ca4f00;--brand-dk:#b84d12;--brand-lt:#fef2e8;--brand-mid:#ca4f00;--brand-subtle:#e8682a14;--brand-glow:#e8682a38;--ink:#141417;--ink-2:#3a3a42;--ink-3:#6c6c78;--ink-4:#9c9ca8;--ink-5:#c8c8d2;--white:#fff;--surface:#f9f9fb;--surface-2:#f3f3f6;--surface-3:#ebebef;--line:#e2e2e8;--line-2:#f0f0f4;--r-xs:6px;--r-sm:10px;--r-md:14px;--r-lg:18px;--r-xl:22px;--r-2xl:28px;--sh-xs:0 1px 2px #0000000d;--sh-sm:0 2px 8px #00000012, 0 1px 2px #0000000a;--sh-md:0 6px 20px #00000017, 0 2px 6px #0000000d;--sh-lg:0 16px 48px #00000021,0 4px 12px #0000000f;--sh-xl:0 28px 72px #0000002e,0 8px 24px #00000014,0 2px 6px #0000000a;--sh-brand:0 6px 22px #e8682a57,0 2px 6px #e8682a2e;--sh-brand-lg:0 12px 36px #e8682a66,0 4px 10px #e8682a38;--font:"Plus Jakarta Sans", system-ui, sans-serif;--font-mono:"DM Mono", "Fira Code", monospace;--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--ease-std:cubic-bezier(.4, 0, .2, 1);--t:all .18s cubic-bezier(.4, 0, .2, 1)}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility}body{font-family:var(--font);color:var(--ink);background:#eae7e1;min-height:100vh;line-height:1.6}.demo{max-width:880px;margin:0 auto;padding:80px 32px 180px}.demo-badge{letter-spacing:.1em;text-transform:uppercase;color:var(--brand);background:var(--brand-lt);border:1.5px solid #e8682a33;border-radius:100px;align-items:center;gap:7px;margin-bottom:26px;padding:5px 14px 5px 10px;font-size:10.5px;font-weight:700;display:inline-flex}.demo-badge span{background:var(--brand);border-radius:50%;width:7px;height:7px;animation:2.4s ease-in-out infinite pulse-dot;display:block}@keyframes pulse-dot{0%,to{box-shadow:0 0 #e8682a66}50%{box-shadow:0 0 0 5px #e8682a00}}.demo h1{letter-spacing:-.04em;color:var(--ink);margin-bottom:18px;font-size:clamp(2.2rem,5.5vw,3.6rem);font-weight:800;line-height:1.06}.demo h1 mark{color:var(--brand);background:0 0;position:relative}.demo-lead{color:var(--ink-3);max-width:500px;margin-bottom:52px;font-size:1.05rem;font-weight:400;line-height:1.78}.demo-lead kbd{background:var(--white);border:1px solid var(--line);font-family:var(--font-mono);color:var(--ink-2);box-shadow:var(--sh-xs);border-bottom-width:2.5px;border-radius:6px;padding:1px 7px;font-size:.8em}.demo-grid{grid-template-columns:1fr 1fr;gap:14px;display:grid}@media (width<=620px){.demo-grid{grid-template-columns:1fr}}.demo-card{background:var(--white);border-radius:var(--r-lg);box-shadow:var(--sh-sm);transition:transform .22s var(--ease-out), box-shadow .22s var(--ease-out);border:1px solid #0000000f;padding:26px 24px}.demo-card:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}.demo-card h2{color:var(--ink);letter-spacing:-.01em;margin-bottom:8px;font-size:.88rem;font-weight:700}.demo-card p{color:var(--ink-3);font-size:.84rem;line-height:1.72}.demo-card a{color:var(--brand);border-bottom:1.5px solid #e8682a47;font-weight:600;text-decoration:none;transition:border-color .14s}.demo-card a:hover{border-bottom-color:var(--brand)}@keyframes demo-pulse{0%,to{opacity:1}50%{opacity:.22}}.skip-link{background:var(--ink);color:var(--white);font-family:var(--font);border-radius:var(--r-sm);z-index:99999;transition:top .18s var(--ease-out);box-shadow:var(--sh-lg);padding:10px 22px;font-size:.84rem;font-weight:600;text-decoration:none;position:fixed;top:-110px;left:18px}.skip-link:focus{top:18px}#afw-launcher{cursor:grab;z-index:9998;width:62px;height:62px;transition:box-shadow .22s var(--ease-out), background .18s;isolation:isolate;-webkit-user-select:none;user-select:none;touch-action:none;background:#ca4f00;border:none;border-radius:50%;outline:none;justify-content:center;align-items:center;display:flex;position:fixed;bottom:28px;left:28px;box-shadow:0 6px 22px #ca4f0061,0 2px 6px #ca4f0038}#afw-launcher.afw-dragging{cursor:grabbing!important;transition:box-shadow .12s!important;box-shadow:0 12px 36px #ca4f0080,0 4px 12px #ca4f0047!important}#afw-launcher:after{content:"";opacity:0;transition:opacity .24s, transform .3s var(--ease-spring);z-index:-1;pointer-events:none;background:radial-gradient(circle,#ca4f0047 0%,#0000 72%);border-radius:50%;position:absolute;inset:-5px;transform:scale(.7)}#afw-launcher:hover:not(.afw-dragging){transform:scale(1.08)translateY(-2px);box-shadow:0 12px 36px #ca4f0075,0 4px 10px #ca4f0042}#afw-launcher:hover:after{opacity:1;transform:scale(1)}#afw-launcher:focus-visible{box-shadow:0 0 0 3px var(--white), 0 0 0 6px #ca4f00, 0 6px 22px #ca4f0061}#afw-launcher[aria-expanded=true]{background:#ca4f00;box-shadow:0 6px 24px #ca4f0061,0 2px 6px #ca4f0038}#afw-launcher .ico-open{display:flex}#afw-launcher .ico-close{display:none}#afw-panel{background:var(--white);border-radius:var(--r-2xl);z-index:9999;width:392px;height:650px;max-height:87vh;box-shadow:var(--sh-xl), 0 0 0 1px #00000012;font-family:var(--font);isolation:isolate;transition:opacity .22s ease, visibility .22s, transform .22s var(--ease-out);transform-origin:0 0;flex-direction:column;display:flex;position:fixed;overflow:hidden}#afw-panel[hidden]{opacity:0;visibility:hidden;pointer-events:none;transform:scale(.94);display:flex!important}#afw-panel:not([hidden]){opacity:1;visibility:visible;transform:scale(1)}#afw-panel.afw-dragging{cursor:grabbing;-webkit-user-select:none;user-select:none;box-shadow:var(--sh-xl), 0 0 0 2px #6200b159!important;transition:none!important}.afw-header{cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;background:#ca4f00;flex-shrink:0;position:relative;overflow:hidden}.afw-header:active{cursor:grabbing}.afw-header:before{content:"";pointer-events:none;background:radial-gradient(circle,#ffffff24 0%,#0000 68%);border-radius:50%;width:200px;height:200px;position:absolute;top:-90px;right:-50px}.afw-header:after{content:"";pointer-events:none;background:radial-gradient(140px 90px at 5% 130%,#ffc8641f 0%,#0000 100%),linear-gradient(#ffffff0f 0%,#0000 50%);position:absolute;inset:0}.afw-header-inner{z-index:1;padding:20px 20px 17px;position:relative}.afw-header-row{align-items:center;gap:13px;display:flex}.afw-header-icon{background:#ffffff2e;border:1px solid #ffffff42;border-radius:14px;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;display:flex;box-shadow:inset 0 1px #ffffff47,0 2px 8px #00000024}.afw-header-title{color:#fff;letter-spacing:-.025em;font-size:1.02rem;font-weight:800;line-height:1.2}.afw-header-sub{color:#fff;letter-spacing:.01em;margin-top:2px;font-size:.68rem;font-weight:500}.afw-header-close{cursor:pointer;color:#fff;width:34px;height:34px;transition:background .16s, transform .18s var(--ease-spring);background:#ffffff26;border:1.5px solid #ffffff4d;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;margin-left:auto;display:flex}.afw-header-close:hover{background:#ffffff47;transform:scale(1.1)}.afw-header-close:focus-visible{outline-offset:2px;outline:2.5px solid #fff}.afw-tabs{background:var(--surface-2);border-bottom:1.5px solid var(--line);flex-shrink:0;padding:0 8px;display:flex}.afw-tab{font-family:var(--font);color:var(--ink-3);cursor:pointer;white-space:nowrap;letter-spacing:.01em;border-radius:var(--r-xs) var(--r-xs) 0 0;background:0 0;border:none;border-bottom:2.5px solid #0000;flex:1;margin-bottom:-1.5px;padding:10px 4px 9px;font-size:.695rem;font-weight:600;transition:color .15s,border-color .15s,background .15s}.afw-tab:hover{color:var(--brand-dk);background:#e8682a0a}.afw-tab[aria-selected=true]{color:var(--brand);border-bottom-color:var(--brand);background:var(--white);font-weight:700}.afw-tab:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}.afw-body{scroll-behavior:smooth;background:var(--surface-2);flex:1;padding:14px 14px 22px;overflow:hidden auto}.afw-body::-webkit-scrollbar{width:3px}.afw-body::-webkit-scrollbar-track{background:0 0}.afw-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}.afw-section{display:none}.afw-section.active{display:block}.afw-label{letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);border-top:1.5px solid var(--line);align-items:center;gap:8px;margin:20px 0 7px 1px;padding-top:14px;font-size:.6rem;font-weight:800;display:flex}.afw-label:after{content:"";background:var(--line);flex:1;height:1px}.afw-label:first-child{border-top:none;margin-top:2px;padding-top:0}.afw-note{background:var(--brand-lt);border:1px solid #e8682a38;border-left:3px solid var(--brand);border-radius:var(--r-sm);margin-bottom:12px;padding:10px 12px}.afw-note-label{letter-spacing:.06em;text-transform:uppercase;color:var(--brand-dk);margin-bottom:4px;font-size:.65rem;font-weight:700;display:block}.afw-note-text{color:#000;margin:0;font-size:.75rem;line-height:1.5}.afw-profiles{flex-wrap:wrap;gap:5px;margin-bottom:4px;display:flex}.afw-profile{border:1.5px solid var(--line);background:var(--white);font-family:var(--font);color:var(--ink-3);cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .16s var(--ease-out);box-shadow:var(--sh-xs);border-radius:100px;align-items:center;gap:6px;padding:6px 13px 6px 9px;font-size:.72rem;font-weight:600;display:flex}.afw-profile:hover{color:var(--brand);background:var(--brand-lt);border-color:#e8682a61;transform:translateY(-1px);box-shadow:0 3px 10px #e8682a24}.afw-profile.active,.afw-profile.active:hover,.afw-profile[aria-pressed=true]{background:linear-gradient(135deg, var(--brand-mid) 0%, var(--brand-dk) 100%);border-color:#0000;box-shadow:0 4px 14px #e8682a5c;color:var(--white)!important}.afw-profile.active svg,.afw-profile.active:hover svg,.afw-profile[aria-pressed=true] svg{stroke:var(--white)}.afw-profile svg{flex-shrink:0}.afw-profile:focus-visible{outline:2px solid var(--brand);outline-offset:2px}.afw-grid{grid-template-columns:1fr 1fr;gap:6px;display:grid}.afw-grid-3{grid-template-columns:1fr 1fr 1fr}.afw-grid-1{grid-template-columns:1fr}.afw-tile{background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-md);cursor:pointer;font-family:var(--font);text-align:left;min-height:52px;box-shadow:var(--sh-xs);transition:border-color .16s, transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background .16s;align-items:center;gap:8px;padding:9px 10px;display:flex;position:relative}.afw-tile:after{content:"";border-radius:inherit;opacity:0;pointer-events:none;z-index:0;background:linear-gradient(135deg,#fef3e8e6 0%,#fff8f080 100%);transition:opacity .16s;position:absolute;inset:0}.afw-tile:hover{box-shadow:0 4px 14px #e8682a1a, var(--sh-sm);border-color:#e8682a59;transform:translateY(-1px)}.afw-tile:hover:after{opacity:1}.afw-tile.on{border-color:var(--brand);background:linear-gradient(135deg,#feeedc 0%,#fff5ea 100%);box-shadow:0 0 0 2px #e8682a40,0 4px 14px #e8682a24}.afw-tile.on:after{opacity:0}.afw-tile:focus-visible{outline:2px solid var(--brand);outline-offset:2px}.afw-tile-icon{background:var(--surface-2);border:1px solid var(--line);z-index:1;width:30px;height:30px;color:var(--ink-4);transition:all .18s var(--ease-out);border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.afw-tile:hover .afw-tile-icon{color:var(--brand);background:#e8682a12;border-color:#e8682a38}.afw-tile.on .afw-tile-icon{color:#fff;background:linear-gradient(135deg,#f58040 0%,#d05010 100%);border-color:#0000;box-shadow:0 3px 10px #e8682a5c}.afw-tile-body{z-index:1;flex:1;min-width:0;position:relative}.afw-tile-name{color:var(--ink-2);letter-spacing:-.01em;font-size:.75rem;font-weight:700;line-height:1.25;display:block}.afw-tile.on .afw-tile-name{color:var(--brand-dk)}.afw-tile-desc{color:var(--ink-3);margin-top:2px;font-size:.63rem;line-height:1.3;display:block}.afw-toggle,.afw-tile-check{box-sizing:border-box;pointer-events:none;z-index:1;opacity:1;width:28px;min-width:28px;height:16px;box-shadow:none;background:#dcdce4;border:1px solid #00000014;border-radius:999px;flex-shrink:0;align-items:center;margin-left:auto;padding:1px;transition:background-color .2s,border-color .2s,box-shadow .2s;display:inline-flex;position:relative;top:auto;right:auto;transform:none}.afw-toggle svg,.afw-tile-check svg{display:none!important}.afw-toggle-thumb{background:var(--white);border-radius:50%;width:12px;height:12px;transition:transform .22s cubic-bezier(.34,1.25,.64,1),background-color .2s;display:block;transform:translate(0);box-shadow:0 1px 3px #00000038,0 0 1px #0000001f}.afw-tile-check:not(:has(.afw-toggle-thumb)):after{content:"";background:var(--white);border-radius:50%;width:12px;height:12px;transition:transform .22s cubic-bezier(.34,1.25,.64,1);display:block;transform:translate(0);box-shadow:0 1px 3px #00000038}.afw-tile:hover .afw-toggle,.afw-tile:hover .afw-tile-check{background:#d2d2dc;border-color:#e8682a4d}.afw-tile.on .afw-toggle,.afw-tile.on .afw-tile-check{background:linear-gradient(135deg, #f58040 0%, var(--brand) 100%);border-color:var(--brand-dk);opacity:1;transform:none;box-shadow:0 1px 5px #ca4f0059}.afw-tile.on .afw-toggle-thumb{background:var(--white);transform:translate(12px);box-shadow:0 1px 3px #00000040}.afw-tile.on .afw-tile-check:not(:has(.afw-toggle-thumb)):after{background:var(--white);transform:translate(12px);box-shadow:0 1px 3px #00000040}.afw-grid-3 .afw-tile{text-align:center;flex-direction:column;justify-content:space-between;align-items:center;min-height:84px;padding:8px 4px}.afw-grid-3 .afw-tile .afw-toggle,.afw-grid-3 .afw-tile .afw-tile-check{margin-top:4px;margin-left:0}.afw-tile-wide{gap:12px;padding:12px 14px}.afw-tile-wide .afw-tile-icon{border-radius:10px;width:36px;height:36px}.afw-tile-wide .afw-toggle,.afw-tile-wide .afw-tile-check{margin-left:auto}.afw-stepper{background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-xs);justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px;padding:11px 13px;transition:border-color .16s,box-shadow .16s;display:flex}.afw-stepper:hover{box-shadow:var(--sh-sm);border-color:#e8682a4d}.afw-stepper-info{flex:1;align-items:center;gap:10px;min-width:0;display:flex}.afw-stepper-icon{background:var(--surface-2);border:1px solid var(--line);width:32px;height:32px;color:var(--ink-3);border-radius:9px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.afw-stepper-name{color:var(--ink-2);letter-spacing:-.01em;font-size:.76rem;font-weight:700;display:block}.afw-stepper-val{color:var(--brand);font-size:.65rem;font-weight:600;font-family:var(--font-mono);margin-top:2px;display:block}.afw-ctrl{background:var(--surface-2);border:1.5px solid var(--line);border-radius:10px;flex-shrink:0;align-items:center;display:flex;overflow:hidden}.afw-btn-step{cursor:pointer;width:30px;height:30px;font-size:1.05rem;font-family:var(--font-mono);color:var(--ink-3);transition:var(--t);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;display:flex}.afw-btn-step:hover{background:var(--brand-lt);color:var(--brand)}.afw-btn-step:disabled{opacity:.24;cursor:not-allowed}.afw-btn-step:disabled:hover{color:var(--ink-3);background:0 0}.afw-btn-step:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}.afw-step-num{min-width:32px;height:30px;font-size:.72rem;font-weight:700;font-family:var(--font-mono);color:var(--ink);border-left:1px solid var(--line);border-right:1px solid var(--line);background:var(--white);justify-content:center;align-items:center;padding:0 4px;display:flex}.afw-sr-panel{background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-xs);overflow:hidden}.afw-sr-output{min-height:78px;font-family:var(--font-mono);color:#f2b654;word-break:break-word;background:#0f0f13;padding:14px 16px;font-size:.71rem;line-height:1.75;position:relative}.afw-sr-output:before{content:"";pointer-events:none;z-index:1;background:repeating-linear-gradient(0deg,#0000,#0000 3px,#ffffff03 3px 4px);position:absolute;inset:0}.afw-sr-output .idle{color:#353546;font-style:italic}.afw-sr-progress{background:#1a1a22;height:3px}.afw-sr-progress-bar{background:linear-gradient(90deg, var(--brand-mid), var(--brand));width:0%;height:100%;transition:width .22s var(--ease-out);box-shadow:0 0 10px #e8682a8c}.afw-sr-controls{background:var(--surface);border-top:1px solid var(--line);align-items:center;gap:5px;padding:9px 11px;display:flex}.afw-sr-btn{border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--white);font-family:var(--font);color:var(--ink-3);cursor:pointer;transition:all .14s var(--ease-out);white-space:nowrap;box-shadow:var(--sh-xs);justify-content:center;align-items:center;gap:5px;padding:6px 11px;font-size:.7rem;font-weight:600;display:flex}.afw-sr-btn:hover{color:var(--brand);background:var(--brand-lt);border-color:#e8682a61}.afw-sr-btn.active{color:#fff;background:linear-gradient(135deg,#f07832,#c84808);border-color:#0000;box-shadow:0 3px 10px #e8682a52}.afw-sr-btn:disabled{opacity:.28;cursor:not-allowed;pointer-events:none}.afw-sr-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}.afw-sr-sep{flex:1}.afw-sr-settings{border-top:1px solid var(--line);flex-direction:column;gap:10px;padding:10px 12px 12px;display:flex}.afw-sr-row{align-items:center;gap:10px;display:flex}.afw-sr-row label{color:var(--ink-4);letter-spacing:.01em;min-width:44px;font-size:.7rem;font-weight:600}.afw-range{appearance:none;background:var(--surface-3);cursor:pointer;border-radius:100px;flex:1;height:4px}.afw-range::-webkit-slider-thumb{appearance:none;width:16px;height:16px;box-shadow:0 0 0 2.5px var(--white), 0 2px 8px #e8682a6b;cursor:pointer;transition:transform .15s var(--ease-spring);background:linear-gradient(135deg,#f07832,#c84808);border-radius:50%}.afw-range::-webkit-slider-thumb:hover{transform:scale(1.22)}.afw-range:focus-visible{outline:2px solid var(--brand);border-radius:4px}.afw-range-val{font-size:.66rem;font-family:var(--font-mono);color:var(--brand);text-align:right;min-width:30px;font-weight:600}.afw-voice-select{border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--white);font-family:var(--font);color:var(--ink-2);cursor:pointer;flex:1;min-width:0;padding:6px 10px;font-size:.71rem;font-weight:500}.afw-voice-select:focus{outline:2px solid var(--brand);border-color:var(--brand)}.afw-shortcuts{border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--white);box-shadow:var(--sh-xs);flex-direction:column;display:flex;overflow:hidden}.afw-shortcut{border-bottom:1px solid var(--line-2);justify-content:space-between;align-items:center;padding:9px 14px;font-size:.76rem;transition:background .12s;display:flex}.afw-shortcut:hover{background:var(--surface-2)}.afw-shortcut:last-child{border-bottom:none}.afw-shortcut span{color:var(--ink-3);font-weight:500}.afw-shortcut kbd{background:var(--surface-2);border:1px solid var(--line);font-family:var(--font-mono);color:var(--ink-2);box-shadow:var(--sh-xs);border-bottom-width:2.5px;border-radius:6px;padding:2px 8px;font-size:.64rem;font-weight:600}.afw-reset{border:1.5px dashed var(--line);border-radius:var(--r-md);width:100%;font-family:var(--font);color:var(--ink-4);cursor:pointer;transition:all .18s var(--ease-out);letter-spacing:.01em;background:0 0;justify-content:center;align-items:center;gap:7px;margin-top:8px;padding:10px 16px;font-size:.75rem;font-weight:600;display:flex}.afw-reset:hover{color:var(--brand);background:var(--brand-lt);border-style:solid;border-color:#e8682a73;box-shadow:0 2px 10px #e8682a1f}.afw-reset:focus-visible{outline:2px solid var(--brand);outline-offset:2px}.afw-footer{background:#fff;flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;padding:8px 16px;display:flex;position:relative;overflow:hidden}.afw-footer:before{content:"";pointer-events:none;background:linear-gradient(90deg,#00000005 0%,#0000 60%);position:absolute;inset:0}.afw-footer-logo{object-fit:contain;max-width:150px;height:22px;display:block}.afw-footer-text{color:#141417;font-size:.64rem;font-family:var(--font-mono);letter-spacing:.03em;position:relative}.afw-footer-text strong{color:#141417;font-weight:700}.afw-footer-badge{color:#141417;font-size:.59rem;font-weight:700;font-family:var(--font-mono);letter-spacing:.06em;white-space:nowrap;background:#0000000a;border:1px solid #00000026;border-radius:6px;padding:3px 9px;position:relative}#afw-guide{pointer-events:none;z-index:9990;background:#e8682a12;border-top:2px solid #e8682a61;border-bottom:2px solid #e8682a61;height:42px;display:none;position:fixed;top:-200px;left:0;right:0}body.afw-guide #afw-guide{display:block}#afw-mask{pointer-events:none;z-index:9989;display:none;position:fixed;inset:0}body.afw-mask #afw-mask{display:block}.afw-mask-top,.afw-mask-bot{background:#0000009e;position:absolute;left:0;right:0}.afw-mask-top{top:0}.afw-mask-bot{bottom:0}#afw-ring{pointer-events:none;z-index:9997;border:2px solid var(--brand);border-radius:8px;transition:top 70ms,left 70ms,width 70ms,height 70ms;display:none;position:fixed;box-shadow:0 0 0 4px #e8682a2e,inset 0 0 0 1px #ffffff42}body.afw-sr-active #afw-ring{display:block}#afw-page-root{width:100%;min-height:100%;display:block}#afw-panel,body[class*=afw-fs-] #afw-panel,body.afw-fs--1 #afw-panel{font-size:14px!important}body[class*=afw-fs-] #afw-launcher,body.afw-fs--1 #afw-launcher{width:62px!important;height:62px!important;font-size:14px!important}#afw-panel,#afw-launcher{position:fixed!important}body.afw-dark{color:#fff!important;background:#000!important}body.afw-dark #afw-page-root,body.afw-dark #afw-page-root *{color:#fff!important;background-color:#000!important;border-color:#444!important}body.afw-dark #afw-page-root .CodeMirror,body.afw-dark #afw-page-root .CodeMirror *,body.afw-dark #afw-page-root [class*=editor],body.afw-dark #afw-page-root [class*=editor] *,body.afw-dark #afw-page-root [class*=email-preview],body.afw-dark #afw-page-root [class*=email-preview] *,body.afw-dark #afw-page-root [class*=generated],body.afw-dark #afw-page-root [class*=generated] *{background-color:revert!important;color:revert!important;border-color:revert!important}body.afw-dark #afw-page-root a{color:#ff0!important;text-decoration:underline!important}body.afw-dark #afw-page-root button,body.afw-dark #afw-page-root [role=button],body.afw-dark #afw-page-root input[type=button],body.afw-dark #afw-page-root input[type=submit],body.afw-dark #afw-page-root input[type=reset]{color:#fff!important;background-color:#1a1a1a!important;border:1.5px solid #555!important;outline:none!important}body.afw-dark #afw-page-root button:hover,body.afw-dark #afw-page-root [role=button]:hover{background-color:#2a2a2a!important;border-color:#888!important}body.afw-light{color:#000!important;background:#fff!important}body.afw-light #afw-page-root,body.afw-light #afw-page-root *{color:#000!important;background-color:#fff!important}body.afw-light #afw-page-root canvas,body.afw-light #afw-page-root video,body.afw-light #afw-page-root img{background-color:revert!important}body.afw-light #afw-page-root a{color:#00c!important;text-decoration:underline!important}body.afw-light #afw-page-root button,body.afw-light #afw-page-root [role=button],body.afw-light #afw-page-root input[type=button],body.afw-light #afw-page-root input[type=submit],body.afw-light #afw-page-root input[type=reset]{color:#000!important;background-color:#f0f0f0!important;border:1.5px solid #aaa!important}body.afw-light #afw-page-root button:hover,body.afw-light #afw-page-root [role=button]:hover{background-color:#e0e0e0!important;border-color:#666!important}body.afw-hc{color:#fff!important;background:#000!important}body.afw-hc #afw-page-root{color:#fff!important;background-color:#000!important}body.afw-hc #afw-page-root *{color:#fff!important;text-shadow:none!important;background-color:#000!important;border-color:#fff!important}body.afw-hc #afw-page-root .CodeMirror,body.afw-hc #afw-page-root .CodeMirror *,body.afw-hc #afw-page-root [class*=editor],body.afw-hc #afw-page-root [class*=editor] *,body.afw-hc #afw-page-root [class*=email-preview],body.afw-hc #afw-page-root [class*=email-preview] *,body.afw-hc #afw-page-root [class*=generated],body.afw-hc #afw-page-root [class*=generated] *{background-color:revert!important;color:revert!important;border-color:revert!important}body.afw-hc #afw-page-root a{color:#ff0!important;background-color:#0000!important;text-decoration:underline!important}body.afw-hc #afw-page-root button,body.afw-hc #afw-page-root [role=button],body.afw-hc #afw-page-root input[type=button],body.afw-hc #afw-page-root input[type=submit],body.afw-hc #afw-page-root input[type=reset]{color:#fff!important;background-color:#000!important;border:2px solid #fff!important;outline:none!important}body.afw-hc #afw-page-root button:hover,body.afw-hc #afw-page-root [role=button]:hover{background-color:#222!important;border-color:#fff!important;outline:2px solid #fff!important}body.afw-hc #afw-page-root button[aria-pressed=true],body.afw-hc #afw-page-root button.active,body.afw-hc #afw-page-root button[aria-selected=true]{color:#000!important;background-color:#fff!important;border:2px solid #fff!important}body.afw-invert #afw-page-root{filter:invert()hue-rotate(180deg)}body.afw-invert #afw-page-root img,body.afw-invert #afw-page-root video,body.afw-invert #afw-page-root canvas,body.afw-invert #afw-page-root iframe,body.afw-invert #afw-page-root svg:not(#afw-cb-filters){filter:invert()hue-rotate(180deg)!important}body.afw-invert #afw-page-root [style*="background-color: white"],body.afw-invert #afw-page-root [style*="background-color:#fff"],body.afw-invert #afw-page-root [style*="background-color: #fff"],body.afw-invert #afw-page-root [style*="background:#fff"],body.afw-invert #afw-page-root [style*="background: white"]{filter:invert()!important}body.afw-invert #afw-page-root{background-color:#fff}body.afw-gray #afw-page-root{filter:grayscale()}body.afw-lowcon #afw-page-root{filter:contrast(.65)brightness(1.08)}body.afw-desat #afw-page-root{filter:saturate(.15)}body.afw-cb-proto #afw-page-root{filter:url(#f-proto)}body.afw-cb-deut #afw-page-root{filter:url(#f-deut)}body.afw-cb-trit #afw-page-root{filter:url(#f-trit)}body.afw-fs--1{font-size:13px!important}body.afw-fs-1{font-size:17px!important}body.afw-fs-2{font-size:20px!important}body.afw-fs-3{font-size:23px!important}body.afw-fs-4{font-size:26px!important}body.afw-fs-5{font-size:30px!important}body.afw-ls-1 *{letter-spacing:.04em!important}body.afw-ls-2 *{letter-spacing:.09em!important}body.afw-ls-3 *{letter-spacing:.16em!important}body.afw-lh-1 *{line-height:1.75!important}body.afw-lh-2 *{line-height:2.1!important}body.afw-lh-3 *{line-height:2.5!important}body.afw-ws *{word-spacing:.2em!important}body.afw-dyslexia *{font-family:Lexend,sans-serif!important}body.afw-alignl *{text-align:left!important}body.afw-pause *,body.afw-pause :before,body.afw-pause :after{transition-duration:0s!important;animation-play-state:paused!important}body.afw-pause #afw-panel,body.afw-pause #afw-panel *,body.afw-pause #afw-panel :before,body.afw-pause #afw-panel :after,body.afw-pause #afw-launcher,body.afw-pause #afw-launcher:after{transition-duration:revert!important;animation-play-state:running!important}body.afw-focus :focus{outline:3px solid var(--brand)!important;outline-offset:4px!important;border-radius:4px!important}body.afw-spotlight :focus{box-shadow:0 0 0 4px var(--brand), 0 0 0 8px #e8682a38!important;outline:none!important}body.afw-spotlight.afw-hc :focus{outline:none!important;box-shadow:0 0 0 4px #fff,0 0 0 8px #ffffff4d!important}body.afw-hl-links a{color:#1a1a22!important;border-bottom:2px solid var(--brand)!important;background:#fff7de!important;border-radius:4px!important;padding:1px 4px!important;text-decoration:none!important}body.afw-hl-heads h1,body.afw-hl-heads h2,body.afw-hl-heads h3,body.afw-hl-heads h4{border-left:4px solid var(--brand)!important;background:#e8682a0d!important;padding-left:13px!important}body.afw-hide-img img,body.afw-hide-img [role=img],body.afw-hide-img picture,body.afw-hide-img svg:not(#afw-cb-filters svg){opacity:0!important}body.afw-bigcursor *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpolygon points='5,3 5,31 12,23 17,35 22,32 17,20 26,20' fill='%23E8682A' stroke='white' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 5 3,auto!important}html:has(body.afw-sb)::-webkit-scrollbar{width:16px!important;height:16px!important}html:has(body.afw-sb)::-webkit-scrollbar-track{background:#e0e0e0!important;border-radius:0!important}html:has(body.afw-sb)::-webkit-scrollbar-thumb{background:#ca4f00!important;border:3px solid #e0e0e0!important;border-radius:8px!important;min-height:40px!important}html:has(body.afw-sb)::-webkit-scrollbar-thumb:hover{background:#a33e00!important}body.afw-sb ::-webkit-scrollbar{width:16px!important;height:16px!important}body.afw-sb ::-webkit-scrollbar-track{background:#e0e0e0!important;border-radius:0!important}body.afw-sb ::-webkit-scrollbar-thumb{background:#ca4f00!important;border:3px solid #e0e0e0!important;border-radius:8px!important;min-height:40px!important}body.afw-sb ::-webkit-scrollbar-thumb:hover{background:#a33e00!important}body.afw-sb.afw-dark ::-webkit-scrollbar-track{background:#333!important}body.afw-sb.afw-hc ::-webkit-scrollbar-track{background:#333!important}body.afw-sb.afw-dark ::-webkit-scrollbar-thumb{background:#ca4f00!important;border-color:#333!important}body.afw-sb.afw-hc ::-webkit-scrollbar-thumb{background:#ca4f00!important;border-color:#333!important}html:has(body.afw-sb.afw-dark)::-webkit-scrollbar-track{background:#333!important}html:has(body.afw-sb.afw-hc)::-webkit-scrollbar-track{background:#333!important}html:has(body.afw-sb.afw-dark)::-webkit-scrollbar-thumb{background:#ca4f00!important;border-color:#333!important}html:has(body.afw-sb.afw-hc)::-webkit-scrollbar-thumb{background:#ca4f00!important;border-color:#333!important}body.afw-sb,body.afw-sb *{scrollbar-color:#ca4f00 #e0e0e0!important}html:has(body.afw-sb){scrollbar-color:#ca4f00 #e0e0e0!important}body.afw-sb.afw-dark,body.afw-sb.afw-hc,body.afw-sb.afw-dark *,body.afw-sb.afw-hc *{scrollbar-color:#ca4f00 #333!important}body.afw-magnify #afw-page-root p:hover,body.afw-magnify #afw-page-root li:hover,body.afw-magnify #afw-page-root td:hover,body.afw-magnify #afw-page-root th:hover,body.afw-magnify #afw-page-root span:hover,body.afw-magnify #afw-page-root label:hover,body.afw-magnify #afw-page-root div:hover>span,body.afw-magnify #afw-page-root div:hover>p,body.afw-magnify #afw-page-root blockquote:hover,body.afw-magnify #afw-page-root figcaption:hover,body.afw-magnify #afw-page-root article:hover>p,body.afw-magnify #afw-page-root section:hover>p,body.afw-magnify #afw-page-root .text:hover,body.afw-magnify #afw-page-root [class*=text]:hover,body.afw-magnify #afw-page-root [class*=content]:hover,body.afw-magnify #afw-page-root [class*=body]:hover,body.afw-magnify #afw-page-root [class*=description]:hover{font-size:1.18em!important;transition:font-size .12s!important}body.afw-magnify h1,body.afw-magnify h2,body.afw-magnify h3,body.afw-magnify h4,body.afw-magnify h5,body.afw-magnify h6{font-size:revert!important}body.afw-magnify #afw-panel :hover,body.afw-magnify #afw-launcher:hover{font-size:inherit!important;transition:none!important}@media (width<=480px){#afw-panel{border-radius:var(--r-xl);width:calc(100vw - 20px)!important}}/*$vite$:1*/`)),document.head.appendChild(e)}}catch(e){console.error(`vite-plugin-css-injected-by-js`,e)}})();
2
+ (function(){(function(){"use strict";let e=`<div style="background:var(--surface-2);border:1.5px solid var(--line);border-radius:var(--radius-md);padding:14px 16px;text-align:center;"><p style="font-size:.75rem;color:#000000;line-height:1.6;">Select a profile above to see what settings it activates.</p></div>`,t=`
3
+ <svg id="afw-cb-filters" aria-hidden="true" focusable="false" style="position:absolute;width:0;height:0;overflow:hidden">
4
+ <defs>
5
+ <filter id="f-proto"><feColorMatrix type="matrix" values=".567 .433 0 0 0 .558 .442 0 0 0 0 .242 .758 0 0 0 0 0 1 0"/></filter>
6
+ <filter id="f-deut"><feColorMatrix type="matrix" values=".625 .375 0 0 0 .7 .3 0 0 0 0 .3 .7 0 0 0 0 0 1 0"/></filter>
7
+ <filter id="f-trit"><feColorMatrix type="matrix" values=".95 .05 0 0 0 0 .433 .567 0 0 0 .475 .525 0 0 0 0 0 1 0"/></filter>
8
+ </defs>
9
+ </svg>
10
+
11
+ <div id="afw-guide" aria-hidden="true" role="presentation"></div>
12
+ <div id="afw-mask" aria-hidden="true" role="presentation">
13
+ <div class="afw-mask-top" id="afw-mask-top" style="height:calc(50% - 25px)"></div>
14
+ <div class="afw-mask-bot" id="afw-mask-bot" style="height:calc(50% - 25px)"></div>
15
+ </div>
16
+ <div id="afw-ring" aria-hidden="true" role="presentation"></div>
17
+ <div id="afw-sr-live" aria-live="polite" aria-atomic="true" style="position:absolute;width:1px;height:1px;clip:rect(0,0,0,0);overflow:hidden;white-space:nowrap;border:0"></div>
18
+
19
+ <button id="afw-launcher" aria-label="Open accessibility settings (Alt+A)" aria-expanded="false" aria-controls="afw-panel" aria-haspopup="dialog">
20
+ <span class="ico-open" aria-hidden="true">
21
+ <svg width="54" height="54" viewBox="0 0 100 100" fill="white">
22
+ <path d="M 50.00 14.81 C 51.62 14.81, 53.16 14.80, 54.87 15.04 C 56.58 15.28, 58.85 15.85, 60.26 16.25 C 61.67 16.65, 62.37 17.01, 63.31 17.42 C 64.25 17.83, 64.87 18.11, 65.89 18.71 C 66.91 19.31, 68.20 20.08, 69.41 21.03 C 70.62 21.98, 71.94 23.06, 73.17 24.43 C 74.40 25.80, 75.97 28.09, 76.77 29.24 C 77.57 30.39, 77.55 30.51, 77.95 31.35 C 78.35 32.19, 78.98 33.54, 79.15 34.28 C 79.33 35.02, 79.12 35.40, 79.00 35.81 C 78.88 36.22, 78.82 36.45, 78.45 36.74 C 78.08 37.03, 77.29 37.46, 76.80 37.57 C 76.31 37.68, 75.90 37.54, 75.51 37.42 C 75.12 37.30, 74.73 37.07, 74.46 36.86 C 74.19 36.65, 74.30 36.88, 73.90 36.16 C 73.50 35.44, 72.83 33.73, 72.08 32.52 C 71.33 31.31, 70.44 30.04, 69.41 28.89 C 68.38 27.74, 67.10 26.55, 65.89 25.60 C 64.68 24.65, 63.16 23.75, 62.14 23.17 C 61.12 22.59, 60.69 22.45, 59.79 22.11 C 58.89 21.77, 57.95 21.42, 56.74 21.14 C 55.53 20.86, 53.64 20.56, 52.52 20.44 C 51.40 20.32, 50.84 20.44, 50.00 20.44 C 49.16 20.44, 48.60 20.32, 47.48 20.44 C 46.36 20.56, 44.47 20.86, 43.26 21.14 C 42.05 21.42, 41.11 21.77, 40.21 22.11 C 39.31 22.45, 38.88 22.59, 37.86 23.17 C 36.84 23.75, 35.32 24.65, 34.11 25.60 C 32.90 26.55, 31.62 27.74, 30.59 28.89 C 29.56 30.04, 28.67 31.31, 27.92 32.52 C 27.17 33.73, 26.50 35.44, 26.10 36.16 C 25.70 36.88, 25.81 36.65, 25.54 36.86 C 25.27 37.07, 24.88 37.30, 24.49 37.42 C 24.10 37.54, 23.69 37.68, 23.20 37.57 C 22.71 37.46, 21.92 37.03, 21.55 36.74 C 21.18 36.45, 21.12 36.22, 21.00 35.81 C 20.88 35.40, 20.67 35.02, 20.85 34.28 C 21.02 33.54, 21.65 32.19, 22.05 31.35 C 22.45 30.51, 22.43 30.39, 23.23 29.24 C 24.03 28.09, 25.60 25.80, 26.83 24.43 C 28.06 23.06, 29.38 21.98, 30.59 21.03 C 31.80 20.08, 33.09 19.31, 34.11 18.71 C 35.13 18.11, 35.75 17.83, 36.69 17.42 C 37.63 17.01, 38.33 16.65, 39.74 16.25 C 41.15 15.85, 43.42 15.28, 45.13 15.04 C 46.84 14.80, 48.38 14.81, 50.00 14.81 Z"/>
23
+ <circle cx="50" cy="40.5" r="9.5"/>
24
+ <path d="M 50.00 55.63 C 50.65 55.63, 51.21 55.61, 51.94 55.51 C 52.67 55.41, 53.40 55.33, 54.40 55.01 C 55.40 54.69, 54.52 55.69, 57.92 53.61 C 61.32 51.53, 71.78 44.47, 74.81 42.52 C 77.84 40.58, 75.77 42.06, 76.10 41.94 C 76.43 41.82, 76.43 41.79, 76.80 41.79 C 77.17 41.79, 77.90 41.84, 78.33 41.94 C 78.76 42.04, 79.07 42.21, 79.38 42.40 C 79.69 42.59, 79.92 42.63, 80.21 43.08 C 80.50 43.52, 81.01 44.39, 81.14 45.07 C 81.27 45.75, 81.16 46.57, 81.00 47.18 C 80.84 47.79, 80.43 48.34, 80.18 48.71 C 79.93 49.08, 82.48 46.89, 79.50 49.41 C 76.52 51.93, 65.18 61.38, 62.29 63.84 C 59.40 66.30, 62.16 62.29, 62.14 64.19 C 62.12 66.09, 62.22 73.03, 62.14 75.22 C 62.06 77.41, 61.86 76.72, 61.64 77.33 C 61.42 77.94, 61.07 78.49, 60.82 78.86 C 60.57 79.23, 60.48 79.31, 60.15 79.56 C 59.82 79.81, 59.29 80.16, 58.86 80.35 C 58.43 80.54, 59.05 80.67, 57.57 80.73 C 56.09 80.79, 52.52 80.73, 50.00 80.73 C 47.48 80.73, 43.91 80.79, 42.43 80.73 C 40.95 80.67, 41.57 80.54, 41.14 80.35 C 40.71 80.16, 40.18 79.81, 39.85 79.56 C 39.52 79.31, 39.43 79.23, 39.18 78.86 C 38.93 78.49, 38.58 77.94, 38.36 77.33 C 38.14 76.72, 37.94 77.41, 37.86 75.22 C 37.78 73.03, 37.88 66.09, 37.86 64.19 C 37.84 62.29, 40.60 66.30, 37.71 63.84 C 34.82 61.38, 23.48 51.93, 20.50 49.41 C 17.52 46.89, 20.07 49.08, 19.82 48.71 C 19.57 48.34, 19.16 47.79, 19.00 47.18 C 18.84 46.57, 18.73 45.75, 18.86 45.07 C 18.99 44.39, 19.50 43.52, 19.79 43.08 C 20.08 42.63, 20.31 42.59, 20.62 42.40 C 20.93 42.21, 21.24 42.04, 21.67 41.94 C 22.10 41.84, 22.83 41.79, 23.20 41.79 C 23.57 41.79, 23.57 41.82, 23.90 41.94 C 24.23 42.06, 22.16 40.58, 25.19 42.52 C 28.22 44.47, 38.68 51.53, 42.08 53.61 C 45.48 55.69, 44.60 54.69, 45.60 55.01 C 46.60 55.33, 47.33 55.41, 48.06 55.51 C 48.79 55.61, 49.35 55.63, 50.00 55.63 Z"/>
25
+ </svg>
26
+ </span>
27
+ <span class="ico-close" aria-hidden="true">
28
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
29
+ <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
30
+ </svg>
31
+ </span>
32
+ </button>
33
+
34
+ <div id="afw-panel" role="dialog" aria-modal="true" aria-labelledby="afw-dialog-title" aria-describedby="afw-dialog-desc" hidden>
35
+
36
+ <div class="afw-header" role="banner">
37
+ <div class="afw-header-inner">
38
+ <div class="afw-header-row">
39
+ <div class="afw-header-icon" aria-hidden="true">
40
+ <svg width="34" height="34" viewBox="0 0 100 100" fill="white">
41
+ <path d="M 50.00 14.81 C 51.62 14.81, 53.16 14.80, 54.87 15.04 C 56.58 15.28, 58.85 15.85, 60.26 16.25 C 61.67 16.65, 62.37 17.01, 63.31 17.42 C 64.25 17.83, 64.87 18.11, 65.89 18.71 C 66.91 19.31, 68.20 20.08, 69.41 21.03 C 70.62 21.98, 71.94 23.06, 73.17 24.43 C 74.40 25.80, 75.97 28.09, 76.77 29.24 C 77.57 30.39, 77.55 30.51, 77.95 31.35 C 78.35 32.19, 78.98 33.54, 79.15 34.28 C 79.33 35.02, 79.12 35.40, 79.00 35.81 C 78.88 36.22, 78.82 36.45, 78.45 36.74 C 78.08 37.03, 77.29 37.46, 76.80 37.57 C 76.31 37.68, 75.90 37.54, 75.51 37.42 C 75.12 37.30, 74.73 37.07, 74.46 36.86 C 74.19 36.65, 74.30 36.88, 73.90 36.16 C 73.50 35.44, 72.83 33.73, 72.08 32.52 C 71.33 31.31, 70.44 30.04, 69.41 28.89 C 68.38 27.74, 67.10 26.55, 65.89 25.60 C 64.68 24.65, 63.16 23.75, 62.14 23.17 C 61.12 22.59, 60.69 22.45, 59.79 22.11 C 58.89 21.77, 57.95 21.42, 56.74 21.14 C 55.53 20.86, 53.64 20.56, 52.52 20.44 C 51.40 20.32, 50.84 20.44, 50.00 20.44 C 49.16 20.44, 48.60 20.32, 47.48 20.44 C 46.36 20.56, 44.47 20.86, 43.26 21.14 C 42.05 21.42, 41.11 21.77, 40.21 22.11 C 39.31 22.45, 38.88 22.59, 37.86 23.17 C 36.84 23.75, 35.32 24.65, 34.11 25.60 C 32.90 26.55, 31.62 27.74, 30.59 28.89 C 29.56 30.04, 28.67 31.31, 27.92 32.52 C 27.17 33.73, 26.50 35.44, 26.10 36.16 C 25.70 36.88, 25.81 36.65, 25.54 36.86 C 25.27 37.07, 24.88 37.30, 24.49 37.42 C 24.10 37.54, 23.69 37.68, 23.20 37.57 C 22.71 37.46, 21.92 37.03, 21.55 36.74 C 21.18 36.45, 21.12 36.22, 21.00 35.81 C 20.88 35.40, 20.67 35.02, 20.85 34.28 C 21.02 33.54, 21.65 32.19, 22.05 31.35 C 22.45 30.51, 22.43 30.39, 23.23 29.24 C 24.03 28.09, 25.60 25.80, 26.83 24.43 C 28.06 23.06, 29.38 21.98, 30.59 21.03 C 31.80 20.08, 33.09 19.31, 34.11 18.71 C 35.13 18.11, 35.75 17.83, 36.69 17.42 C 37.63 17.01, 38.33 16.65, 39.74 16.25 C 41.15 15.85, 43.42 15.28, 45.13 15.04 C 46.84 14.80, 48.38 14.81, 50.00 14.81 Z"/>
42
+ <circle cx="50" cy="40.5" r="9.5"/>
43
+ <path d="M 50.00 55.63 C 50.65 55.63, 51.21 55.61, 51.94 55.51 C 52.67 55.41, 53.40 55.33, 54.40 55.01 C 55.40 54.69, 54.52 55.69, 57.92 53.61 C 61.32 51.53, 71.78 44.47, 74.81 42.52 C 77.84 40.58, 75.77 42.06, 76.10 41.94 C 76.43 41.82, 76.43 41.79, 76.80 41.79 C 77.17 41.79, 77.90 41.84, 78.33 41.94 C 78.76 42.04, 79.07 42.21, 79.38 42.40 C 79.69 42.59, 79.92 42.63, 80.21 43.08 C 80.50 43.52, 81.01 44.39, 81.14 45.07 C 81.27 45.75, 81.16 46.57, 81.00 47.18 C 80.84 47.79, 80.43 48.34, 80.18 48.71 C 79.93 49.08, 82.48 46.89, 79.50 49.41 C 76.52 51.93, 65.18 61.38, 62.29 63.84 C 59.40 66.30, 62.16 62.29, 62.14 64.19 C 62.12 66.09, 62.22 73.03, 62.14 75.22 C 62.06 77.41, 61.86 76.72, 61.64 77.33 C 61.42 77.94, 61.07 78.49, 60.82 78.86 C 60.57 79.23, 60.48 79.31, 60.15 79.56 C 59.82 79.81, 59.29 80.16, 58.86 80.35 C 58.43 80.54, 59.05 80.67, 57.57 80.73 C 56.09 80.79, 52.52 80.73, 50.00 80.73 C 47.48 80.73, 43.91 80.79, 42.43 80.73 C 40.95 80.67, 41.57 80.54, 41.14 80.35 C 40.71 80.16, 40.18 79.81, 39.85 79.56 C 39.52 79.31, 39.43 79.23, 39.18 78.86 C 38.93 78.49, 38.58 77.94, 38.36 77.33 C 38.14 76.72, 37.94 77.41, 37.86 75.22 C 37.78 73.03, 37.88 66.09, 37.86 64.19 C 37.84 62.29, 40.60 66.30, 37.71 63.84 C 34.82 61.38, 23.48 51.93, 20.50 49.41 C 17.52 46.89, 20.07 49.08, 19.82 48.71 C 19.57 48.34, 19.16 47.79, 19.00 47.18 C 18.84 46.57, 18.73 45.75, 18.86 45.07 C 18.99 44.39, 19.50 43.52, 19.79 43.08 C 20.08 42.63, 20.31 42.59, 20.62 42.40 C 20.93 42.21, 21.24 42.04, 21.67 41.94 C 22.10 41.84, 22.83 41.79, 23.20 41.79 C 23.57 41.79, 23.57 41.82, 23.90 41.94 C 24.23 42.06, 22.16 40.58, 25.19 42.52 C 28.22 44.47, 38.68 51.53, 42.08 53.61 C 45.48 55.69, 44.60 54.69, 45.60 55.01 C 46.60 55.33, 47.33 55.41, 48.06 55.51 C 48.79 55.61, 49.35 55.63, 50.00 55.63 Z"/>
44
+ </svg>
45
+ </div>
46
+ <div class="afw-header-text">
47
+ <div class="afw-header-title" id="afw-dialog-title" role="heading" aria-level="2">Accessibility Widget</div>
48
+ <div class="afw-header-sub" id="afw-dialog-desc">by AccessGen</div>
49
+ </div>
50
+ <button id="afw-panel-close" class="afw-header-close" aria-label="Close accessibility widget">
51
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
52
+ <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
53
+ </svg>
54
+ </button>
55
+ </div>
56
+ </div>
57
+ </div>
58
+
59
+ <div class="afw-tabs" role="tablist" aria-label="Accessibility feature categories">
60
+ <button class="afw-tab" role="tab" id="tab-profiles" aria-selected="true" aria-controls="sec-profiles">Profiles</button>
61
+ <button class="afw-tab" role="tab" id="tab-vision" aria-selected="false" aria-controls="sec-vision">Vision</button>
62
+ <button class="afw-tab" role="tab" id="tab-reading" aria-selected="false" aria-controls="sec-reading">Reading</button>
63
+ <button class="afw-tab" role="tab" id="tab-motion" aria-selected="false" aria-controls="sec-motion">Motion</button>
64
+ <button class="afw-tab" role="tab" id="tab-nav" aria-selected="false" aria-controls="sec-nav">Navigate</button>
65
+ </div>
66
+
67
+ <div class="afw-body" id="afw-body">
68
+
69
+ <!-- PROFILES TAB -->
70
+ <div class="afw-section active" id="sec-profiles" role="tabpanel" aria-labelledby="tab-profiles">
71
+ <div class="afw-label">Quick Profiles</div>
72
+ <p style="font-size:.75rem;color:#000000;margin-bottom:12px;line-height:1.6;">Select a profile to apply a curated set of accessibility settings for your needs. Click again to deactivate.</p>
73
+ <div class="afw-note" role="note">
74
+ <span class="afw-note-label">Note</span>
75
+ <p class="afw-note-text">Only one profile can be active at a time. Click an active profile again to deactivate it.</p>
76
+ </div>
77
+ <div class="afw-profiles" role="group" aria-label="Accessibility quick profiles">
78
+ <button class="afw-profile" data-profile="vision" aria-pressed="false">
79
+ <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
80
+ Vision
81
+ </button>
82
+ <button class="afw-profile" data-profile="motor" aria-pressed="false">
83
+ <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
84
+ <path d="M18 11V6a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v0"/><path d="M14 10V4a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v2"/>
85
+ <path d="M10 10.5V6a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v8"/><path d="M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15"/>
86
+ </svg>
87
+ Motor
88
+ </button>
89
+ <button class="afw-profile" data-profile="cognitive" aria-pressed="false">
90
+ <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
91
+ <path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96-.46 2.5 2.5 0 0 1-1.98-3 2.5 2.5 0 0 1-1.32-4.24 3 3 0 0 1 .34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 4.1-2.48Z"/>
92
+ <path d="M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96-.46 2.5 2.5 0 0 0 1.98-3 2.5 2.5 0 0 0 1.32-4.24 3 3 0 0 0-.34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-4.1-2.48Z"/>
93
+ </svg>
94
+ Cognitive
95
+ </button>
96
+ <button class="afw-profile" data-profile="senior" aria-pressed="false">
97
+ <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
98
+ <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
99
+ </svg>
100
+ Senior
101
+ </button>
102
+ <button class="afw-profile" data-profile="adhd" aria-pressed="false">
103
+ <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
104
+ <circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/>
105
+ </svg>
106
+ Focus
107
+ </button>
108
+ <button class="afw-profile" data-profile="dyslexia" aria-pressed="false">
109
+ <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
110
+ <polyline points="4 7 4 4 20 4 20 7"/><line x1="9" y1="20" x2="15" y2="20"/><line x1="12" y1="4" x2="12" y2="20"/>
111
+ </svg>
112
+ Dyslexia
113
+ </button>
114
+ </div>
115
+ <div class="afw-label" style="margin-top:22px;">Profile Details</div>
116
+ <div style="display:flex;flex-direction:column;gap:6px;" id="profile-detail-list">${e}</div>
117
+ </div>
118
+
119
+ <!-- VISION TAB -->
120
+ <div class="afw-section" id="sec-vision" role="tabpanel" aria-labelledby="tab-vision">
121
+ <div class="afw-label">Display Mode</div>
122
+ <div class="afw-grid">
123
+ <button class="afw-tile" data-feat="dark" aria-pressed="false" aria-label="Toggle dark mode">
124
+ <div class="afw-tile-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg></div>
125
+ <div class="afw-tile-body"><span class="afw-tile-name">Dark Mode</span><span class="afw-tile-desc">Black bg, white text</span></div>
126
+ <div class="afw-toggle afw-tile-check" aria-hidden="true"><span class="afw-toggle-thumb"></span></div>
127
+ </button>
128
+ <button class="afw-tile" data-feat="light" aria-pressed="false" aria-label="Toggle light mode">
129
+ <div class="afw-tile-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></div>
130
+ <div class="afw-tile-body"><span class="afw-tile-name">Light Mode</span><span class="afw-tile-desc">White bg, black text</span></div>
131
+ <div class="afw-toggle afw-tile-check" aria-hidden="true"><span class="afw-toggle-thumb"></span></div>
132
+ </button>
133
+ <button class="afw-tile" data-feat="hc" aria-pressed="false" aria-label="Toggle high contrast">
134
+ <div class="afw-tile-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 3v18" stroke-width="2"/><path d="M12 3a9 9 0 0 1 0 18Z" fill="currentColor" stroke="none"/></svg></div>
135
+ <div class="afw-tile-body"><span class="afw-tile-name">High Contrast</span><span class="afw-tile-desc">Maximum clarity</span></div>
136
+ <div class="afw-toggle afw-tile-check" aria-hidden="true"><span class="afw-toggle-thumb"></span></div>
137
+ </button>
138
+ <button class="afw-tile" data-feat="invert" aria-pressed="false" aria-label="Toggle invert colors">
139
+ <div class="afw-tile-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 2v20M2 12h20"/><circle cx="12" cy="12" r="9"/></svg></div>
140
+ <div class="afw-tile-body"><span class="afw-tile-name">Invert Colors</span><span class="afw-tile-desc">Flip color spectrum</span></div>
141
+ <div class="afw-toggle afw-tile-check" aria-hidden="true"><span class="afw-toggle-thumb"></span></div>
142
+ </button>
143
+ <button class="afw-tile" data-feat="gray" aria-pressed="false" aria-label="Toggle grayscale">
144
+ <div class="afw-tile-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 8v8M8 12h8" stroke-width="1.5"/></svg></div>
145
+ <div class="afw-tile-body"><span class="afw-tile-name">Grayscale</span><span class="afw-tile-desc">Remove all color</span></div>
146
+ <div class="afw-toggle afw-tile-check" aria-hidden="true"><span class="afw-toggle-thumb"></span></div>
147
+ </button>
148
+ <button class="afw-tile" data-feat="lowcon" aria-pressed="false" aria-label="Toggle low contrast">
149
+ <div class="afw-tile-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 3a9 9 0 1 0 0 18A9 9 0 0 0 12 3z" opacity=".4" fill="currentColor" stroke="none"/><circle cx="12" cy="12" r="9"/></svg></div>
150
+ <div class="afw-tile-body"><span class="afw-tile-name">Low Contrast</span><span class="afw-tile-desc">Soften brightness</span></div>
151
+ <div class="afw-toggle afw-tile-check" aria-hidden="true"><span class="afw-toggle-thumb"></span></div>
152
+ </button>
153
+ <button class="afw-tile" data-feat="desat" aria-pressed="false" aria-label="Toggle desaturate">
154
+ <div class="afw-tile-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="13.5" cy="6.5" r="4.5"/><circle cx="10.5" cy="12.5" r="4.5" opacity=".5"/><circle cx="16.5" cy="12.5" r="4.5" opacity=".5"/></svg></div>
155
+ <div class="afw-tile-body"><span class="afw-tile-name">Desaturate</span><span class="afw-tile-desc">Muted color palette</span></div>
156
+ <div class="afw-toggle afw-tile-check" aria-hidden="true"><span class="afw-toggle-thumb"></span></div>
157
+ </button>
158
+ </div>
159
+
160
+ <div class="afw-label">Color Blindness Filters</div>
161
+ <div class="afw-grid afw-grid-3">
162
+ <button class="afw-tile" data-feat="cb-proto" data-xgroup="cb" aria-pressed="false" aria-label="Protanopia filter">
163
+ <div class="afw-tile-body" style="text-align:center;gap:4px;display:flex;flex-direction:column;align-items:center;padding:4px 0;">
164
+ <div class="afw-tile-icon" style="margin:0 auto;" aria-hidden="true"><svg width="15" height="15" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" fill="currentColor" opacity=".15" stroke="currentColor" stroke-width="2"/><path d="M8 12h8M12 8v8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></div>
165
+ <span class="afw-tile-name" style="font-size:.69rem;">Protanopia</span><span class="afw-tile-desc" style="font-size:.62rem;">Red-blind</span>
166
+ </div>
167
+ <div class="afw-toggle afw-tile-check" aria-hidden="true"><span class="afw-toggle-thumb"></span></div>
168
+ </button>
169
+ <button class="afw-tile" data-feat="cb-deut" data-xgroup="cb" aria-pressed="false" aria-label="Deuteranopia filter">
170
+ <div class="afw-tile-body" style="text-align:center;gap:4px;display:flex;flex-direction:column;align-items:center;padding:4px 0;">
171
+ <div class="afw-tile-icon" style="margin:0 auto;" aria-hidden="true"><svg width="15" height="15" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" fill="currentColor" opacity=".15" stroke="currentColor" stroke-width="2"/><path d="M9 9l6 6M15 9l-6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></div>
172
+ <span class="afw-tile-name" style="font-size:.69rem;">Deuteranopia</span><span class="afw-tile-desc" style="font-size:.62rem;">Green-blind</span>
173
+ </div>
174
+ <div class="afw-toggle afw-tile-check" aria-hidden="true"><span class="afw-toggle-thumb"></span></div>
175
+ </button>
176
+ <button class="afw-tile" data-feat="cb-trit" data-xgroup="cb" aria-pressed="false" aria-label="Tritanopia filter">
177
+ <div class="afw-tile-body" style="text-align:center;gap:4px;display:flex;flex-direction:column;align-items:center;padding:4px 0;">
178
+ <div class="afw-tile-icon" style="margin:0 auto;" aria-hidden="true"><svg width="15" height="15" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" fill="currentColor" opacity=".15" stroke="currentColor" stroke-width="2"/><path d="M12 7v10M7 12h10" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity=".5"/></svg></div>
179
+ <span class="afw-tile-name" style="font-size:.69rem;">Tritanopia</span><span class="afw-tile-desc" style="font-size:.62rem;">Blue-blind</span>
180
+ </div>
181
+ <div class="afw-toggle afw-tile-check" aria-hidden="true"><span class="afw-toggle-thumb"></span></div>
182
+ </button>
183
+ </div>
184
+
185
+ <div class="afw-label">Content Highlights</div>
186
+ <div class="afw-grid">
187
+ <button class="afw-tile" data-feat="hl-links" aria-pressed="false" aria-label="Highlight all links">
188
+ <div class="afw-tile-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg></div>
189
+ <div class="afw-tile-body"><span class="afw-tile-name">Highlight Links</span><span class="afw-tile-desc">Mark all hyperlinks</span></div>
190
+ <div class="afw-toggle afw-tile-check" aria-hidden="true"><span class="afw-toggle-thumb"></span></div>
191
+ </button>
192
+ <button class="afw-tile" data-feat="hl-heads" aria-pressed="false" aria-label="Highlight headings">
193
+ <div class="afw-tile-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 6h16M4 12h10M4 18h6"/></svg></div>
194
+ <div class="afw-tile-body"><span class="afw-tile-name">Mark Headings</span><span class="afw-tile-desc">Visual structure cues</span></div>
195
+ <div class="afw-toggle afw-tile-check" aria-hidden="true"><span class="afw-toggle-thumb"></span></div>
196
+ </button>
197
+ <button class="afw-tile" data-feat="hide-img" aria-pressed="false" aria-label="Hide all images">
198
+ <div class="afw-tile-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg></div>
199
+ <div class="afw-tile-body"><span class="afw-tile-name">Hide Images</span><span class="afw-tile-desc">Reduce distractions</span></div>
200
+ <div class="afw-toggle afw-tile-check" aria-hidden="true"><span class="afw-toggle-thumb"></span></div>
201
+ </button>
202
+ <button class="afw-tile" data-feat="focus" aria-pressed="false" aria-label="Enhanced focus indicator" title="Bold Focus Ring: draws a thick, high-visibility outline around the element that currently has keyboard focus">
203
+ <div class="afw-tile-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 3h4M3 3v4M21 3h-4M21 3v4M3 21h4M3 21v-4M21 21h-4M21 21v-4"/><rect x="8" y="8" width="8" height="8" rx="1"/></svg></div>
204
+ <div class="afw-tile-body"><span class="afw-tile-name"><span style="border-bottom:1px dotted var(--ink-4);cursor:help;">Focus Ring</span></span><span class="afw-tile-desc">Bold keyboard focus</span></div>
205
+ <div class="afw-toggle afw-tile-check" aria-hidden="true"><span class="afw-toggle-thumb"></span></div>
206
+ </button>
207
+ </div>
208
+ </div>
209
+
210
+ <!-- READING TAB -->
211
+ <div class="afw-section" id="sec-reading" role="tabpanel" aria-labelledby="tab-reading">
212
+ <div class="afw-label">Text Size</div>
213
+ <div class="afw-stepper" role="group" aria-label="Font size adjuster">
214
+ <div class="afw-stepper-info">
215
+ <div class="afw-stepper-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" y1="20" x2="15" y2="20"/><line x1="12" y1="4" x2="12" y2="20"/></svg></div>
216
+ <div><span class="afw-stepper-name">Font Size</span><span class="afw-stepper-val" id="fs-lbl">Default</span></div>
217
+ </div>
218
+ <div class="afw-ctrl">
219
+ <button class="afw-btn-step" id="fs-dec" aria-label="Decrease font size" disabled>−</button>
220
+ <div class="afw-step-num" id="fs-num" aria-live="polite" aria-atomic="true">0</div>
221
+ <button class="afw-btn-step" id="fs-inc" aria-label="Increase font size">+</button>
222
+ </div>
223
+ </div>
224
+
225
+ <div class="afw-label">Spacing</div>
226
+ <div class="afw-stepper" role="group" aria-label="Letter spacing adjuster">
227
+ <div class="afw-stepper-info">
228
+ <div class="afw-stepper-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="12" x2="21" y2="12"/><polyline points="3 8 3 16"/><polyline points="21 8 21 16"/></svg></div>
229
+ <div><span class="afw-stepper-name">Letter Spacing</span><span class="afw-stepper-val" id="ls-lbl">Normal</span></div>
230
+ </div>
231
+ <div class="afw-ctrl">
232
+ <button class="afw-btn-step" id="ls-dec" aria-label="Decrease letter spacing" disabled>−</button>
233
+ <div class="afw-step-num" id="ls-num" aria-live="polite" aria-atomic="true">0</div>
234
+ <button class="afw-btn-step" id="ls-inc" aria-label="Increase letter spacing">+</button>
235
+ </div>
236
+ </div>
237
+
238
+ <div class="afw-stepper" role="group" aria-label="Line height adjuster">
239
+ <div class="afw-stepper-info">
240
+ <div class="afw-stepper-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/><polyline points="4 3 4 21"/></svg></div>
241
+ <div><span class="afw-stepper-name">Line Height</span><span class="afw-stepper-val" id="lh-lbl">Normal</span></div>
242
+ </div>
243
+ <div class="afw-ctrl">
244
+ <button class="afw-btn-step" id="lh-dec" aria-label="Decrease line height" disabled>−</button>
245
+ <div class="afw-step-num" id="lh-num" aria-live="polite" aria-atomic="true">0</div>
246
+ <button class="afw-btn-step" id="lh-inc" aria-label="Increase line height">+</button>
247
+ </div>
248
+ </div>
249
+
250
+ <div class="afw-label">Typography</div>
251
+ <div class="afw-grid">
252
+ <button class="afw-tile" data-feat="dyslexia" aria-pressed="false" aria-label="Dyslexia-friendly font">
253
+ <div class="afw-tile-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 19V5h3l5 7 5-7h3v14"/><path d="M4 13h16"/></svg></div>
254
+ <div class="afw-tile-body"><span class="afw-tile-name">Dyslexia Font</span><span class="afw-tile-desc">Lexend typeface</span></div>
255
+ <div class="afw-toggle afw-tile-check" aria-hidden="true"><span class="afw-toggle-thumb"></span></div>
256
+ </button>
257
+ <button class="afw-tile" data-feat="alignl" aria-pressed="false" aria-label="Left-align all text">
258
+ <div class="afw-tile-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="15" y2="12"/><line x1="3" y1="18" x2="18" y2="18"/></svg></div>
259
+ <div class="afw-tile-body"><span class="afw-tile-name">Align Left</span><span class="afw-tile-desc">No justified text</span></div>
260
+ <div class="afw-toggle afw-tile-check" aria-hidden="true"><span class="afw-toggle-thumb"></span></div>
261
+ </button>
262
+ <button class="afw-tile" data-feat="ws" aria-pressed="false" aria-label="Increase word spacing">
263
+ <div class="afw-tile-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="4" y1="6" x2="8" y2="6"/><line x1="12" y1="6" x2="16" y2="6"/><line x1="20" y1="6" x2="22" y2="6"/><line x1="3" y1="12" x2="9" y2="12"/><line x1="13" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg></div>
264
+ <div class="afw-tile-body"><span class="afw-tile-name">Word Spacing</span><span class="afw-tile-desc">Extra word gaps</span></div>
265
+ <div class="afw-toggle afw-tile-check" aria-hidden="true"><span class="afw-toggle-thumb"></span></div>
266
+ </button>
267
+ <button class="afw-tile" data-feat="magnify" aria-pressed="false" aria-label="Hover text magnifier">
268
+ <div class="afw-tile-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/></svg></div>
269
+ <div class="afw-tile-body"><span class="afw-tile-name">Text Magnify</span><span class="afw-tile-desc">Enlarge on hover</span></div>
270
+ <div class="afw-toggle afw-tile-check" aria-hidden="true"><span class="afw-toggle-thumb"></span></div>
271
+ </button>
272
+ </div>
273
+
274
+ <div class="afw-label">Reading Focus</div>
275
+ <div class="afw-grid afw-grid-1">
276
+ <button class="afw-tile afw-tile-wide" data-feat="guide" aria-pressed="false" aria-label="Reading guide line">
277
+ <div class="afw-tile-icon" aria-hidden="true" style="width:36px;height:36px;border-radius:10px;"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M2 12h20M6 8l-4 4 4 4M18 8l4 4-4 4"/></svg></div>
278
+ <div class="afw-tile-body"><span class="afw-tile-name">Reading Guide</span><span class="afw-tile-desc">Horizontal line tracks your cursor position</span></div>
279
+ <div class="afw-toggle afw-tile-check" aria-hidden="true"><span class="afw-toggle-thumb"></span></div>
280
+ </button>
281
+ <button class="afw-tile afw-tile-wide" data-feat="mask" aria-pressed="false" aria-label="Screen mask">
282
+ <div class="afw-tile-icon" aria-hidden="true" style="width:36px;height:36px;border-radius:10px;"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="2" y="3" width="20" height="18" rx="2"/><line x1="2" y1="9" x2="22" y2="9"/><line x1="2" y1="15" x2="22" y2="15"/><rect x="2" y="3" width="20" height="6" fill="currentColor" opacity=".3" stroke="none"/><rect x="2" y="15" width="20" height="6" fill="currentColor" opacity=".3" stroke="none"/></svg></div>
283
+ <div class="afw-tile-body"><span class="afw-tile-name">Screen Mask</span><span class="afw-tile-desc">Dims content outside your reading row</span></div>
284
+ <div class="afw-toggle afw-tile-check" aria-hidden="true"><span class="afw-toggle-thumb"></span></div>
285
+ </button>
286
+ </div>
287
+ </div>
288
+
289
+ <!-- MOTION TAB -->
290
+ <div class="afw-section" id="sec-motion" role="tabpanel" aria-labelledby="tab-motion">
291
+ <div class="afw-label">Animation</div>
292
+ <div class="afw-grid afw-grid-1">
293
+ <button class="afw-tile afw-tile-wide" data-feat="pause" aria-pressed="false" aria-label="Pause all animations">
294
+ <div class="afw-tile-icon" aria-hidden="true" style="width:36px;height:36px;border-radius:10px;"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg></div>
295
+ <div class="afw-tile-body"><span class="afw-tile-name">Pause Animations</span><span class="afw-tile-desc">Freeze all transitions and loops on the page</span></div>
296
+ <div class="afw-toggle afw-tile-check" aria-hidden="true"><span class="afw-toggle-thumb"></span></div>
297
+ </button>
298
+ </div>
299
+ </div>
300
+
301
+ <!-- NAVIGATE TAB -->
302
+ <div class="afw-section" id="sec-nav" role="tabpanel" aria-labelledby="tab-nav">
303
+ <div class="afw-label">Pointer &amp; Cursor</div>
304
+ <div class="afw-grid">
305
+ <button class="afw-tile" data-feat="bigcursor" aria-pressed="false" aria-label="Large cursor">
306
+ <div class="afw-tile-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4l7 18 3.5-7L22 11.5z"/></svg></div>
307
+ <div class="afw-tile-body"><span class="afw-tile-name">Large Cursor</span><span class="afw-tile-desc">Bigger mouse pointer</span></div>
308
+ <div class="afw-toggle afw-tile-check" aria-hidden="true"><span class="afw-toggle-thumb"></span></div>
309
+ </button>
310
+ <button class="afw-tile" data-feat="sb" aria-pressed="false" aria-label="Large scrollbar">
311
+ <div class="afw-tile-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="14" y="2" width="6" height="20" rx="3"/><rect x="15.5" y="8" width="3" height="6" rx="1.5" fill="currentColor" stroke="none"/></svg></div>
312
+ <div class="afw-tile-body"><span class="afw-tile-name">Large Scrollbar</span><span class="afw-tile-desc">Easier to click</span></div>
313
+ <div class="afw-toggle afw-tile-check" aria-hidden="true"><span class="afw-toggle-thumb"></span></div>
314
+ </button>
315
+ <button class="afw-tile" data-feat="spotlight" aria-pressed="false" aria-label="Focus spotlight" title="Focus Spotlight: adds a glowing halo around the focused element so it stands out against the rest of the page">
316
+ <div class="afw-tile-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.22 4.22l2.12 2.12M17.66 17.66l2.12 2.12M4.22 19.78l2.12-2.12M17.66 6.34l2.12-2.12"/></svg></div>
317
+ <div class="afw-tile-body"><span class="afw-tile-name"><span style="border-bottom:1px dotted var(--ink-4);cursor:help;">Focus Spotlight</span></span><span class="afw-tile-desc">Glow on focus</span></div>
318
+ <div class="afw-toggle afw-tile-check" aria-hidden="true"><span class="afw-toggle-thumb"></span></div>
319
+ </button>
320
+ <button class="afw-tile" data-feat="focus" aria-pressed="false" aria-label="Enhanced focus indicator" title="Bold Focus Ring: draws a thick, high-visibility outline around the element that currently has keyboard focus">
321
+ <div class="afw-tile-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 3h4M3 3v4M21 3h-4M21 3v4M3 21h4M3 21v-4M21 21h-4M21 21v-4"/><rect x="8" y="8" width="8" height="8" rx="1"/></svg></div>
322
+ <div class="afw-tile-body"><span class="afw-tile-name"><span style="border-bottom:1px dotted var(--ink-4);cursor:help;">Focus Ring</span></span><span class="afw-tile-desc">Bold focus outline</span></div>
323
+ <div class="afw-toggle afw-tile-check" aria-hidden="true"><span class="afw-toggle-thumb"></span></div>
324
+ </button>
325
+ </div>
326
+
327
+ <div class="afw-label">Keyboard Shortcuts</div>
328
+ <div class="afw-shortcuts" role="list" aria-label="Keyboard shortcuts">
329
+ <div class="afw-shortcut" role="listitem"><span>Open / Close Panel</span><kbd>Alt + A</kbd></div>
330
+ <div class="afw-shortcut" role="listitem"><span>Close Panel</span><kbd>Esc</kbd></div>
331
+ <div class="afw-shortcut" role="listitem"><span>Navigate Tabs</span><kbd>← →</kbd></div>
332
+ <div class="afw-shortcut" role="listitem"><span>Navigate Options</span><kbd>Tab</kbd></div>
333
+ <div class="afw-shortcut" role="listitem"><span>Toggle Option</span><kbd>Space / Enter</kbd></div>
334
+ </div>
335
+
336
+ <button class="afw-reset" id="afw-reset" aria-label="Reset all accessibility settings to defaults">
337
+ <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>
338
+ Reset All Settings
339
+ </button>
340
+ </div>
341
+
342
+ </div><!-- /afw-body -->
343
+
344
+ <div class="afw-footer" role="contentinfo">
345
+ <img src="/AccessGen_Logo_Transparent.png" alt="AccessGen Logo" class="afw-footer-logo" onerror="this.onerror=null; this.src='./src/AccessGen_Logo_Transparent.png';" />
346
+ <span class="afw-footer-badge" aria-label="WCAG 2.2 Level AA compliant">WCAG 2.2 AA</span>
347
+ </div>
348
+
349
+ </div><!-- /afw-panel -->
350
+ `,n=document.createElement(`div`);for(n.id=`afw-page-root`;document.body.firstChild;)n.appendChild(document.body.firstChild);document.body.appendChild(n);let r=new Set([`afw-panel`,`afw-launcher`,`afw-ring`,`afw-guide`,`afw-mask`,`afw-sr-live`,`afw-cb-filters`]);new MutationObserver(e=>{e.forEach(e=>{e.addedNodes.forEach(e=>{e.nodeType===1&&e.parentNode===document.body&&e!==n&&!r.has(e.id)&&e.tagName!==`SCRIPT`&&e.tagName!==`STYLE`&&n.appendChild(e)})})}).observe(document.body,{childList:!0});let i=document.createElement(`div`);for(i.innerHTML=t;i.firstChild;)document.body.appendChild(i.firstChild);(function(){let e=document.createElement(`style`);e.id=`afw-text-color-override`,e.textContent=`
351
+ #afw-panel .afw-body { color: #000000; }
352
+ #afw-panel .afw-body .afw-tile-name,
353
+ #afw-panel .afw-body .afw-tile-desc,
354
+ #afw-panel .afw-body .afw-stepper-name,
355
+ #afw-panel .afw-body .afw-stepper-val,
356
+ #afw-panel .afw-body .afw-step-num,
357
+ #afw-panel .afw-body .afw-label,
358
+ #afw-panel .afw-body .afw-shortcut span,
359
+ #afw-panel .afw-body .afw-shortcut kbd,
360
+ #afw-panel .afw-body .afw-profile:not(.active),
361
+ #afw-panel .afw-body p,
362
+ #afw-panel .afw-body .afw-reset,
363
+ #afw-panel .afw-tabs .afw-tab { color: #000000; }
364
+ #afw-panel .afw-body .afw-profile.active,
365
+ #afw-panel .afw-body .afw-profile.active:hover,
366
+ #afw-panel .afw-body .afw-profile[aria-pressed="true"] { color: #ffffff !important; }
367
+ #afw-panel .afw-body .afw-profile.active svg,
368
+ #afw-panel .afw-body .afw-profile.active:hover svg,
369
+ #afw-panel .afw-body .afw-profile[aria-pressed="true"] svg { stroke: #ffffff; }
370
+ `,document.head.appendChild(e)})();let a=e=>document.getElementById(e),o=document.body,s=a(`afw-launcher`),c=a(`afw-panel`),l=a(`afw-sr-live`),u=a(`afw-panel-close`),d=c.querySelector(`.afw-header`),f=a(`afw-guide`),p=a(`afw-mask-top`),m=a(`afw-mask-bot`);a(`afw-ring`);let h=!1,g=new Set,_=0,v=0,y=0,b=`afw_pos_v2`;function x(e,t,n){return Math.max(t,Math.min(n,e))}function S(){return{top:window.innerHeight-62-28,left:28}}function C(e,t){let n=Math.min(650,window.innerHeight*.87),r=e-n-12,i=t+62-392;return r=x(r,12,window.innerHeight-n-12),i=x(i,12,window.innerWidth-392-12),{top:r,left:i}}function w(){try{return JSON.parse(sessionStorage.getItem(b))||{}}catch{return{}}}function T(e){try{sessionStorage.setItem(b,JSON.stringify(e))}catch{}}function E(e,t){s.style.top=e+`px`,s.style.left=t+`px`,s.style.bottom=`auto`,s.style.right=`auto`}function D(e,t){c.style.top=e+`px`,c.style.left=t+`px`,c.style.bottom=`auto`,c.style.right=`auto`}(function(){let e=w(),t=e.lTop==null?S():{top:e.lTop,left:e.lLeft};t.top=x(t.top,12,window.innerHeight-62-12),t.left=x(t.left,12,window.innerWidth-62-12),E(t.top,t.left);let n=e.pTop==null?C(t.top,t.left):{top:e.pTop,left:e.pLeft};n.top=x(n.top,12,window.innerHeight-Math.min(650,window.innerHeight*.87)-12),n.left=x(n.left,12,window.innerWidth-392-12),D(n.top,n.left)})(),window.addEventListener(`resize`,()=>{let e=parseFloat(s.style.top),t=parseFloat(s.style.left),n=x(e,12,window.innerHeight-62-12),r=x(t,12,window.innerWidth-62-12);(n!==e||r!==t)&&E(n,r);let i=parseFloat(c.style.top),a=parseFloat(c.style.left),o=Math.min(650,window.innerHeight*.87),l=x(i,12,window.innerHeight-o-12),u=x(a,12,window.innerWidth-392-12);(l!==i||u!==a)&&D(l,u)});function O(e,t,n,r,i={}){let a=null,o,s,c,l,u=!1;e.addEventListener(`pointerdown`,function(n){if(n.button>0||i.ignore&&n.target.closest(i.ignore))return;a=n.pointerId,u=!1;let r=t();o=n.clientX,s=n.clientY,c=r.top,l=r.left,e.setPointerCapture(a),e.classList.add(`afw-dragging`),n.preventDefault()}),e.addEventListener(`pointermove`,function(e){if(a===null||e.pointerId!==a)return;let t=e.clientX-o,r=e.clientY-s;!u&&Math.hypot(t,r)<5||(u=!0,n(c+r,l+t))}),e.addEventListener(`pointerup`,function(t){a!==null&&t.pointerId===a&&(a=null,e.classList.remove(`afw-dragging`),u&&(r(),e.addEventListener(`click`,function(e){e.stopImmediatePropagation(),e.preventDefault()},{capture:!0,once:!0})))}),e.addEventListener(`pointercancel`,function(t){a!==null&&t.pointerId===a&&(a=null,e.classList.remove(`afw-dragging`))})}O(s,()=>({top:parseFloat(s.style.top),left:parseFloat(s.style.left)}),(e,t)=>{let n=x(e,12,window.innerHeight-62-12),r=x(t,12,window.innerWidth-62-12),i=n-parseFloat(s.style.top),a=r-parseFloat(s.style.left);if(E(n,r),h||c.style.top){let e=Math.min(650,window.innerHeight*.87),t=parseFloat(c.style.top)+i,n=parseFloat(c.style.left)+a;D(x(t,12,window.innerHeight-e-12),x(n,12,window.innerWidth-392-12))}},()=>{let e=w();e.lTop=parseFloat(s.style.top),e.lLeft=parseFloat(s.style.left),e.pTop=parseFloat(c.style.top),e.pLeft=parseFloat(c.style.left),T(e)}),O(d,()=>({top:parseFloat(c.style.top),left:parseFloat(c.style.left)}),(e,t)=>{let n=Math.min(650,window.innerHeight*.87),r=x(e,12,window.innerHeight-n-12),i=x(t,12,window.innerWidth-392-12),a=r-parseFloat(c.style.top),o=i-parseFloat(c.style.left);D(r,i);let l=parseFloat(s.style.top)+a,u=parseFloat(s.style.left)+o;E(x(l,12,window.innerHeight-62-12),x(u,12,window.innerWidth-62-12))},()=>{let e=w();e.pTop=parseFloat(c.style.top),e.pLeft=parseFloat(c.style.left),e.lTop=parseFloat(s.style.top),e.lLeft=parseFloat(s.style.left),T(e)},{ignore:`#afw-panel-close`});function k(){return[...c.querySelectorAll(`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])`)].filter(e=>e.offsetParent!==null||e===u)}function A(e){if(!h)return;let t=k();if(!t.length)return;let n=t[0],r=t[t.length-1];e.key===`Tab`&&(e.shiftKey?document.activeElement===n&&(e.preventDefault(),r.focus()):document.activeElement===r&&(e.preventDefault(),n.focus()))}function j(){if(h=!0,w().pTop==null){let e=C(parseFloat(s.style.top),parseFloat(s.style.left));D(e.top,e.left)}c.removeAttribute(`hidden`),s.setAttribute(`aria-expanded`,`true`),s.setAttribute(`aria-label`,`Close accessibility settings (Alt+A)`),Y(`Accessibility panel opened`),setTimeout(()=>{u.focus()},60),document.addEventListener(`keydown`,A)}function M(){h=!1,c.setAttribute(`hidden`,``),s.setAttribute(`aria-expanded`,`false`),s.setAttribute(`aria-label`,`Open accessibility settings (Alt+A)`),Y(`Accessibility panel closed`),document.removeEventListener(`keydown`,A),s.focus()}s.addEventListener(`click`,()=>h?M():j()),u.addEventListener(`click`,()=>M()),document.addEventListener(`keydown`,e=>{e.altKey&&e.key.toLowerCase()===`a`&&(e.preventDefault(),h?M():j()),e.key===`Escape`&&h&&M()});let N=[...c.querySelectorAll(`.afw-tab[role="tab"]`)],P=[...c.querySelectorAll(`.afw-section`)];N.forEach(e=>{e.addEventListener(`click`,()=>F(e)),e.addEventListener(`keydown`,t=>{let n=N.indexOf(e);t.key===`ArrowRight`&&(t.preventDefault(),F(N[(n+1)%N.length])),t.key===`ArrowLeft`&&(t.preventDefault(),F(N[(n-1+N.length)%N.length])),t.key===`Home`&&(t.preventDefault(),F(N[0])),t.key===`End`&&(t.preventDefault(),F(N[N.length-1]))})});function F(e){N.forEach(e=>e.setAttribute(`aria-selected`,`false`)),P.forEach(e=>e.classList.remove(`active`)),e.setAttribute(`aria-selected`,`true`),e.focus();let t=document.getElementById(e.getAttribute(`aria-controls`));t&&t.classList.add(`active`)}let I={dark:{cls:`afw-dark`,xor:[`hc`,`invert`,`gray`,`lowcon`,`light`]},hc:{cls:`afw-hc`,xor:[`dark`,`invert`,`gray`,`lowcon`,`light`]},invert:{cls:`afw-invert`,xor:[`dark`,`hc`,`gray`,`lowcon`,`light`]},gray:{cls:`afw-gray`,xor:[`dark`,`hc`,`invert`,`lowcon`,`light`,`desat`]},lowcon:{cls:`afw-lowcon`,xor:[`hc`,`dark`,`light`,`invert`,`gray`]},light:{cls:`afw-light`,xor:[`dark`,`hc`,`invert`,`gray`,`lowcon`]},desat:{cls:`afw-desat`,xor:[`gray`]},"cb-proto":{cls:`afw-cb-proto`,xor:[`cb-deut`,`cb-trit`]},"cb-deut":{cls:`afw-cb-deut`,xor:[`cb-proto`,`cb-trit`]},"cb-trit":{cls:`afw-cb-trit`,xor:[`cb-proto`,`cb-deut`]},"hl-links":{cls:`afw-hl-links`},"hl-heads":{cls:`afw-hl-heads`},"hide-img":{cls:`afw-hide-img`},focus:{cls:`afw-focus`},dyslexia:{cls:`afw-dyslexia`},alignl:{cls:`afw-alignl`},ws:{cls:`afw-ws`},magnify:{cls:`afw-magnify`},pause:{cls:`afw-pause`},guide:{cls:`afw-guide`},mask:{cls:`afw-mask`},bigcursor:{cls:`afw-bigcursor`},sb:{cls:`afw-sb`},spotlight:{cls:`afw-spotlight`,xor:[`focus`]}};function L(e){return document.querySelectorAll(`.afw-tile[data-feat="${e}"]`)}function R(e,t){let n=I[e];if(!n)return;let r=L(e),i=g.has(e),a=!t&&!i;a?(n.xor&&n.xor.forEach(e=>{g.has(e)&&R(e,!0)}),g.add(e),n.cls&&o.classList.add(n.cls),r.forEach(e=>{e.classList.add(`on`),e.setAttribute(`aria-pressed`,`true`)})):(g.delete(e),n.cls&&o.classList.remove(n.cls),r.forEach(e=>{e.classList.remove(`on`),e.setAttribute(`aria-pressed`,`false`)})),n.cb&&n.cb(),Y((r[0]&&r[0].querySelector(`.afw-tile-name`)?.textContent||e)+`: `+(a?`on`:`off`)),X()}c.querySelectorAll(`.afw-tile[data-feat]`).forEach(e=>{e.disabled||e.addEventListener(`click`,()=>R(e.dataset.feat))});let z={"-1":`Smaller`,0:`Default`,1:`+1`,2:`+2`,3:`+3`,4:`+4`,5:`+5`},B=[`Normal`,`Wide`,`Wider`,`Widest`],V=[`Normal`,`Relaxed`,`Loose`,`Very Loose`];function H(e){e=Math.max(-1,Math.min(5,e)),[`afw-fs--1`,`afw-fs-1`,`afw-fs-2`,`afw-fs-3`,`afw-fs-4`,`afw-fs-5`].forEach(e=>o.classList.remove(e)),e!==0&&o.classList.add(e===-1?`afw-fs--1`:`afw-fs-`+e),_=e,a(`fs-num`).textContent=e,a(`fs-lbl`).textContent=z[e]??`Default`,a(`fs-dec`).disabled=e<=-1,a(`fs-inc`).disabled=e>=5,Y(`Font size `+a(`fs-lbl`).textContent),X()}function U(e){e=Math.max(0,Math.min(3,e)),[`afw-ls-1`,`afw-ls-2`,`afw-ls-3`].forEach(e=>o.classList.remove(e)),e>0&&o.classList.add(`afw-ls-`+e),v=e,a(`ls-num`).textContent=e,a(`ls-lbl`).textContent=B[e]||`Normal`,a(`ls-dec`).disabled=e<=0,a(`ls-inc`).disabled=e>=3,X()}function W(e){e=Math.max(0,Math.min(3,e)),[`afw-lh-1`,`afw-lh-2`,`afw-lh-3`].forEach(e=>o.classList.remove(e)),e>0&&o.classList.add(`afw-lh-`+e),y=e,a(`lh-num`).textContent=e,a(`lh-lbl`).textContent=V[e]||`Normal`,a(`lh-dec`).disabled=e<=0,a(`lh-inc`).disabled=e>=3,X()}a(`fs-dec`).addEventListener(`click`,()=>H(_-1)),a(`fs-inc`).addEventListener(`click`,()=>H(_+1)),a(`ls-dec`).addEventListener(`click`,()=>U(v-1)),a(`ls-inc`).addEventListener(`click`,()=>U(v+1)),a(`lh-dec`).addEventListener(`click`,()=>W(y-1)),a(`lh-inc`).addEventListener(`click`,()=>W(y+1));let G={vision:{feats:[`hc`,`hl-links`,`hl-heads`,`focus`,`bigcursor`],fs:2,ls:1,lh:0,desc:`High contrast, highlighted links & headings, large cursor, bold focus ring.`},motor:{feats:[`bigcursor`,`spotlight`,`sb`],fs:1,ls:0,lh:1,desc:`Large cursor, focus spotlight, oversized scrollbar for easier navigation.`},cognitive:{feats:[`dyslexia`,`ws`,`pause`,`hl-heads`,`guide`],fs:1,ls:1,lh:2,desc:`Dyslexia font, word spacing, paused animations, reading guide, marked headings.`},senior:{feats:[`bigcursor`,`hl-links`,`focus`,`sb`],fs:3,ls:1,lh:1,desc:`Large text, large cursor and scrollbar, highlighted links, bold focus ring.`},adhd:{feats:[`pause`,`guide`,`mask`,`hl-links`],fs:0,ls:1,lh:2,desc:`Paused animations, reading guide, screen mask, and highlighted links for focus.`},dyslexia:{feats:[`dyslexia`,`alignl`,`ws`,`hl-links`],fs:1,ls:2,lh:2,desc:`Lexend font, left-aligned text, wider letter & word spacing, link highlights.`}},K=document.querySelectorAll(`.afw-profile[data-profile]`),q=a(`profile-detail-list`);K.forEach(t=>{t.addEventListener(`click`,()=>{let n=t.dataset.profile,r=t.classList.contains(`active`);if(J(!0),r)q.innerHTML=e,Y(`Profile deactivated`);else{K.forEach(e=>{e.classList.remove(`active`),e.setAttribute(`aria-pressed`,`false`)}),t.classList.add(`active`),t.setAttribute(`aria-pressed`,`true`);let e=G[n];e.feats.forEach(e=>R(e,!1)),H(e.fs),U(e.ls),W(e.lh),q.innerHTML=`
371
+ <div style="background:var(--brand-lt);border:1.5px solid #fcd9b8;border-radius:var(--radius-md);padding:14px 16px;">
372
+ <div style="font-size:.75rem;font-weight:600;color:#000000;margin-bottom:6px;display:flex;align-items:center;gap:6px;">
373
+ <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>
374
+ ${n.charAt(0).toUpperCase()+n.slice(1)} Profile Active
375
+ </div>
376
+ <p style="font-size:.73rem;color:#000000;line-height:1.65;">${e.desc}</p>
377
+ </div>`,Y(n+` profile applied`)}})});function J(t){[...g].forEach(e=>R(e,!0)),g.clear(),Object.values(I).forEach(e=>{e.cls&&o.classList.remove(e.cls)}),H(0),U(0),W(0),c.querySelectorAll(`.afw-tile`).forEach(e=>{e.classList.remove(`on`),e.setAttribute(`aria-pressed`,`false`)}),K.forEach(e=>{e.classList.remove(`active`),e.setAttribute(`aria-pressed`,`false`)}),q.innerHTML=e,t||Y(`All settings reset`)}a(`afw-reset`).addEventListener(`click`,()=>J(!1)),document.addEventListener(`mousemove`,e=>{if(o.classList.contains(`afw-guide`)&&(f.style.top=e.clientY-20+`px`),o.classList.contains(`afw-mask`)){let t=window.innerHeight,n=e.clientY;p.style.height=Math.max(0,n-30)+`px`,m.style.height=Math.max(0,t-n-30)+`px`}});function Y(e){l.textContent=``,requestAnimationFrame(()=>{l.textContent=e})}function X(){try{let e=[...document.querySelectorAll(`.afw-profile.active`)].map(e=>e.dataset.profile)[0]||null;sessionStorage.setItem(`afw4`,JSON.stringify({feats:[...g],fs:_,ls:v,lh:y,profile:e}))}catch{}}function Z(){try{let e=sessionStorage.getItem(`afw4`);if(!e)return;let t=JSON.parse(e);if((t.feats||[]).forEach(e=>R(e,!1)),t.fs&&H(t.fs),t.ls&&U(t.ls),t.lh&&W(t.lh),t.profile){let e=document.querySelector(`.afw-profile[data-profile="${t.profile}"]`);if(e){e.classList.add(`active`),e.setAttribute(`aria-pressed`,`true`);let n=G[t.profile];n&&(q.innerHTML=`
378
+ <div style="background:var(--brand-lt);border:1.5px solid #fcd9b8;border-radius:var(--radius-md);padding:14px 16px;">
379
+ <div style="font-size:.75rem;font-weight:600;color:#000000;margin-bottom:6px;display:flex;align-items:center;gap:6px;">
380
+ <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>
381
+ ${t.profile.charAt(0).toUpperCase()+t.profile.slice(1)} Profile Active
382
+ </div>
383
+ <p style="font-size:.73rem;color:#000000;line-height:1.65;">${n.desc}</p>
384
+ </div>`)}}}catch{}}Z()})()})();
package/package.json CHANGED
@@ -1,6 +1,26 @@
1
1
  {
2
2
  "name": "accessgen-a11y-widget",
3
- "version": "0.0.0-stage",
4
- "stub": true,
5
- "description": "Temporary package placeholder for staged publishing"
6
- }
3
+ "version": "1.0.0",
4
+ "type": "module",
5
+ "description": "Standalone accessibility widget with multiple assistive features.",
6
+ "main": "dist/a11y-widget.min.js",
7
+ "files": [
8
+ "dist"
9
+ ],
10
+ "scripts": {
11
+ "start": "npx serve .",
12
+ "lint": "echo \"No linter configured\"",
13
+ "build": "vite build"
14
+ },
15
+ "keywords": [
16
+ "accessibility",
17
+ "widget",
18
+ "a11y"
19
+ ],
20
+ "author": "",
21
+ "license": "MIT",
22
+ "devDependencies": {
23
+ "vite": "^8.3.5",
24
+ "vite-plugin-css-injected-by-js": "^5.0.3"
25
+ }
26
+ }