caustino commited on
Commit
24754da
·
verified ·
1 Parent(s): 283ab38

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +503 -19
index.html CHANGED
@@ -1,19 +1,503 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Systemic Failures in Access, Evidence & Security: SSA & Federal Agencies</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
10
+ <style>
11
+ body {
12
+ font-family: 'Inter', sans-serif;
13
+ background-color: #f0f9ff; /* Light blue background from palette */
14
+ }
15
+ .chart-container {
16
+ position: relative;
17
+ width: 100%;
18
+ max-width: 600px; /* Max width for readability */
19
+ margin-left: auto;
20
+ margin-right: auto;
21
+ height: 300px; /* Default height */
22
+ max-height: 400px;
23
+ }
24
+ @media (min-width: 768px) {
25
+ .chart-container {
26
+ height: 350px; /* Larger height for desktop */
27
+ }
28
+ }
29
+ .big-number {
30
+ font-size: 3rem;
31
+ font-weight: 700;
32
+ color: #0B4F6C; /* Darkest Blue */
33
+ line-height: 1.1;
34
+ }
35
+ .section-title {
36
+ font-size: 1.875rem; /* 2xl */
37
+ font-weight: 700;
38
+ color: #0B4F6C; /* Darkest Blue */
39
+ margin-bottom: 1rem;
40
+ text-align: center;
41
+ }
42
+ .card {
43
+ background-color: white;
44
+ border-radius: 0.5rem;
45
+ box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
46
+ padding: 1.5rem;
47
+ margin-bottom: 2rem;
48
+ }
49
+ .timeline {
50
+ display: flex;
51
+ justify-content: space-between;
52
+ align-items: center;
53
+ padding: 1rem 0;
54
+ border-top: 2px solid #59BFFF; /* Medium Blue */
55
+ border-bottom: 2px solid #59BFFF; /* Medium Blue */
56
+ margin-top: 1rem;
57
+ }
58
+ .timeline-point {
59
+ text-align: center;
60
+ color: #0B4F6C; /* Darkest Blue */
61
+ }
62
+ .flow-item {
63
+ border: 2px solid #168FF5; /* Bright Blue */
64
+ border-radius: 0.5rem;
65
+ padding: 0.75rem;
66
+ margin-bottom: 0.5rem;
67
+ text-align: center;
68
+ background-color: #ADDDFF; /* Lightest Blue */
69
+ color: #0B4F6C; /* Darkest Blue */
70
+ }
71
+ .flow-arrow {
72
+ text-align: center;
73
+ font-size: 1.5rem;
74
+ color: #168FF5; /* Bright Blue */
75
+ margin: 0.25rem 0;
76
+ }
77
+ /* Color Palette: Brilliant Blues */
78
+ .text-dark-blue { color: #0B4F6C; }
79
+ .text-bright-blue { color: #168FF5; }
80
+ .bg-lightest-blue { background-color: #ADDDFF; }
81
+ .border-medium-blue { border-color: #59BFFF; }
82
+ .fill-medium-blue { fill: #59BFFF; }
83
+ </style>
84
+ </head>
85
+ <body class="p-4 md:p-8">
86
+
87
+ <header class="text-center mb-12">
88
+ <h1 class="text-3xl md:text-5xl font-bold text-dark-blue mb-2">Systemic Failures in Federal Disability Adjudication</h1>
89
+ <p class="text-lg md:text-xl text-bright-blue">An Urgent Call for Accessibility, Modern Evidence, and Data Security Reform</p>
90
+ </header>
91
+
92
+ <main class="max-w-7xl mx-auto space-y-12">
93
+
94
+ <!-- Section 1: Digital Accessibility Crisis -->
95
+ <section>
96
+ <h2 class="section-title">The Digital Accessibility Crisis: Denying Access</h2>
97
+ <p class="text-center text-gray-700 mb-8">Federal agencies, including the SSA and federally-funded LEAs, are failing to provide accessible digital services, violating the rights of millions under the ADA and IDEA.</p>
98
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-start">
99
+ <div class="card">
100
+ <h3 class="text-xl font-semibold text-dark-blue mb-4">Mandate Ignored: WCAG 2.1 AA</h3>
101
+ <p class="text-gray-600 mb-4">The Department of Justice's April 2024 rule requires all state and local government web content (including SSA & LEAs) to meet the **Web Content Accessibility Guidelines (WCAG) 2.1 Level AA**.</p>
102
+ <div class="text-center p-4 bg-lightest-blue rounded-lg">
103
+ <span class="text-5xl font-bold text-dark-blue">WCAG 2.1 AA</span>
104
+ <p class="text-sm text-gray-700 mt-1">The Binding Legal Standard</p>
105
+ </div>
106
+ <p class="text-gray-600 mt-4">Failure to comply isn't a technical glitch; it's a denial of effective communication and equal access required by ADA Title II and Section 504.</p>
107
+ <p class="text-xs text-gray-500 mt-2">Source: Exhibit F (WCAG21Beyondthemin.pdf)</p>
108
+ </div>
109
+ <div class="card">
110
+ <h3 class="text-xl font-semibold text-dark-blue mb-4">Common Barriers Persist</h3>
111
+ <p class="text-gray-600 mb-4">Users with disabilities face numerous obstacles:</p>
112
+ <ul class="space-y-2 list-disc list-inside text-gray-700">
113
+ <li><span class="font-semibold">Screen Reader Failures:</span> Lack of proper labels (Semantic HTML/ARIA) makes forms unusable. <span class="text-xl">📄❓</span></li>
114
+ <li><span class="font-semibold">Navigation Traps:</span> Keyboard users get stuck, unable to proceed. <span class="text-xl">🖱️➡️🛑</span></li>
115
+ <li><span class="font-semibold">Inaccessible Documents:</span> Critical information locked in image-based PDFs. <span class="text-xl">🖼️≠📖</span></li>
116
+ <li><span class="font-semibold">Cognitive Overload:</span> Complex jargon, inconsistent navigation, and sudden timeouts frustrate users. <span class="text-xl">🤯⏳</span></li>
117
+ </ul>
118
+ <p class="text-gray-600 mt-4">These barriers prevent access to SSA benefits and exclude parents with disabilities from their children's education (IDEA violations).</p>
119
+ </div>
120
+ </div>
121
+ <div class="card mt-8">
122
+ <h3 class="text-xl font-semibold text-dark-blue mb-4 text-center">Impact on Education (IDEA)</h3>
123
+ <p class="text-gray-700 mb-4 text-center">Inaccessible Local Education Agency (LEA) platforms (e.g., for IEPs) violate the Individuals with Disabilities Education Act:</p>
124
+ <div class="flex flex-col md:flex-row justify-around items-center space-y-4 md:space-y-0 md:space-x-4">
125
+ <div class="text-center p-4">
126
+ <span class="text-4xl">📝</span>
127
+ <p class="font-semibold mt-2 text-dark-blue">Review Denied</p>
128
+ <p class="text-sm text-gray-600">Parents cannot independently review IEP goals or progress.</p>
129
+ </div>
130
+ <div class="text-center p-4">
131
+ <span class="text-4xl">🤝</span>
132
+ <p class="font-semibold mt-2 text-dark-blue">Participation Blocked</p>
133
+ <p class="text-sm text-gray-600">Meaningful contribution to the child's education plan is impossible.</p>
134
+ </div>
135
+ <div class="text-center p-4">
136
+ <span class="text-4xl">✅</span>
137
+ <p class="font-semibold mt-2 text-dark-blue">Consent Impeded</p>
138
+ <p class="text-sm text-gray-600">Electronic signatures or form submissions may be inaccessible.</p>
139
+ </div>
140
+ </div>
141
+ <p class="text-center text-red-600 font-semibold mt-4">Result: A substantive denial of a Free Appropriate Public Education (FAPE) for the child.</p>
142
+ </div>
143
+ </section>
144
+
145
+ <!-- Section 2: Quantum Security Threat -->
146
+ <section>
147
+ <h2 class="section-title">The Quantum Security Threat: Data at Risk</h2>
148
+ <p class="text-center text-gray-700 mb-8">SSA's failure to upgrade cryptography exposes millions to catastrophic data breaches, violating HIPAA's mandate to protect against "reasonably anticipated threats."</p>
149
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-start">
150
+ <div class="card">
151
+ <h3 class="text-xl font-semibold text-dark-blue mb-4">Harvest Now, Decrypt Later (HNDL)</h3>
152
+ <div class="text-center mb-4">
153
+ <span class="text-5xl">💾➡️⏳➡️🔓</span>
154
+ </div>
155
+ <p class="text-gray-600 mb-2">Adversaries are stealing vast amounts of currently encrypted SSA data (ePHI, genetic info).</p>
156
+ <p class="text-gray-600">They anticipate future quantum computers will break today's encryption (RSA, ECC), unlocking the stolen data.</p>
157
+ <p class="text-red-600 font-semibold mt-2">This creates a ticking time bomb for personal privacy and national security.</p>
158
+ </div>
159
+ <div class="card">
160
+ <h3 class="text-xl font-semibold text-dark-blue mb-4">The Quantum Deadline: Y2Q</h3>
161
+ <p class="text-gray-600 mb-4">Experts predict a Cryptographically Relevant Quantum Computer (CRQC) will be operational by:</p>
162
+ <div class="text-center">
163
+ <span class="big-number">2030</span>
164
+ <p class="text-gray-700 font-semibold">"Y2Q"</p>
165
+ </div>
166
+ <div class="timeline">
167
+ <div class="timeline-point">
168
+ <p class="font-semibold">Now</p>
169
+ <p class="text-sm">(HNDL Attacks Ongoing)</p>
170
+ </div>
171
+ <div class="text-bright-blue font-bold text-2xl">&rarr;</div>
172
+ <div class="timeline-point">
173
+ <p class="font-semibold">~2030 (Y2Q)</p>
174
+ <p class="text-sm text-red-600">(Encryption Breaks)</p>
175
+ </div>
176
+ </div>
177
+ <p class="text-gray-600 mt-4">Agencies like the NSA mandate transitioning to **Post-Quantum Cryptography (PQC)** now (e.g., Crystals-Kyber, Crystals-Dilithium). SSA's inaction is a willful disregard of a known threat.</p>
178
+ </div>
179
+ </div>
180
+ </section>
181
+
182
+ <!-- Section 3: Arbitrary Evidence Standards -->
183
+ <section>
184
+ <h2 class="section-title">Arbitrary Evidence Standards: Science Ignored</h2>
185
+ <p class="text-center text-gray-700 mb-8">The SSA violates the APA by failing to integrate modern genetic and neuroanatomical science into its disability adjudication, leading to discriminatory outcomes.</p>
186
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 items-start">
187
+ <div class="card md:col-span-2">
188
+ <h3 class="text-xl font-semibold text-dark-blue mb-4">Genetic Links to Functional Impairment</h3>
189
+ <p class="text-gray-600 mb-4">Extensive research links common genetic polymorphisms to conditions causing functional limitations recognized by the SSA itself. SSA's failure to incorporate this is arbitrary.</p>
190
+ <div class="overflow-x-auto">
191
+ <table class="w-full text-sm text-left text-gray-600">
192
+ <thead class="text-xs text-gray-700 uppercase bg-gray-100">
193
+ <tr>
194
+ <th scope="col" class="px-4 py-2">Gene (SNP)</th>
195
+ <th scope="col" class="px-4 py-2">Functional Impact</th>
196
+ <th scope="col" class="px-4 py-2">Relevant SSA Listing</th>
197
+ </tr>
198
+ </thead>
199
+ <tbody>
200
+ <tr class="border-b">
201
+ <td class="px-4 py-2 font-medium">COMT (rs4680)</td>
202
+ <td class="px-4 py-2">Dopamine Metabolism / Exec. Function</td>
203
+ <td class="px-4 py-2">11.00 / 12.02</td>
204
+ </tr>
205
+ <tr class="border-b bg-gray-50">
206
+ <td class="px-4 py-2 font-medium">DRD2/ANKK1 (rs1800497)</td>
207
+ <td class="px-4 py-2">D2 Receptor / Impulse Control</td>
208
+ <td class="px-4 py-2">12.11</td>
209
+ </tr>
210
+ <tr class="border-b">
211
+ <td class="px-4 py-2 font-medium">MTHFR (rs1801133)</td>
212
+ <td class="px-4 py-2">Folate Metabolism / Cognition</td>
213
+ <td class="px-4 py-2">11.00</td>
214
+ </tr>
215
+ <tr class="bg-gray-50">
216
+ <td class="px-4 py-2 font-medium">DRD4 (7-Repeat)</td>
217
+ <td class="px-4 py-2">Dopamine Response / ADHD</td>
218
+ <td class="px-4 py-2">12.11</td>
219
+ </tr>
220
+ <tr class="border-b bg-gray-50">
221
+ <td class="px-4 py-2 font-medium">HTR1B (rs13212041)</td>
222
+ <td class="px-4 py-2">Serotonin Signaling / Aggression</td>
223
+ <td class="px-4 py-2">12.08</td>
224
+ </tr>
225
+ <tr class="border-b">
226
+ <td class="px-4 py-2 font-medium">TPH2 (rs4475691)</td>
227
+ <td class="px-4 py-2">Serotonin Synthesis / Mood</td>
228
+ <td class="px-4 py-2">12.04</td>
229
+ </tr>
230
+ <tr class="border-b bg-gray-50">
231
+ <td class="px-4 py-2 font-medium">CHRNA4 (rs13302982)</td>
232
+ <td class="px-4 py-2">Cholinergic Transmission / Attention</td>
233
+ <td class="px-4 py-2">11.00 / 12.11</td>
234
+ </tr>
235
+ <tr class="border-b">
236
+ <td class="px-4 py-2 font-medium">BDNF (rs6265)</td>
237
+ <td class="px-4 py-2">Neuroplasticity / Memory</td>
238
+ <td class="px-4 py-2">11.00F</td>
239
+ </tr>
240
+ <tr class="border-b bg-gray-50">
241
+ <td class="px-4 py-2 font-medium">SNAP25 (rs28364072)</td>
242
+ <td class="px-4 py-2">Synaptic Efficiency / ADHD</td>
243
+ <td class="px-4 py-2">11.00 / 12.11</td>
244
+ </tr>
245
+ <tr class="border-b">
246
+ <td class="px-4 py-2 font-medium">DISC1 (rs1018381)</td>
247
+ <td class="px-4 py-2">Cortical Regulation / Exec. Function</td>
248
+ <td class="px-4 py-2">11.00C</td>
249
+ </tr>
250
+ <tr class="border-b bg-gray-50">
251
+ <td class="px-4 py-2 font-medium">FKBP5 (rs1360780)</td>
252
+ <td class="px-4 py-2">Stress Response / Cognitive Deficits</td>
253
+ <td class="px-4 py-2">12.15</td>
254
+ </tr>
255
+ </tbody>
256
+ </table>
257
+ </div>
258
+ <p class="text-xs text-gray-500 mt-2">Source: Exhibit A (polymorphism_ssa_crosswalk_grch38.pdf), Exhibit H (adhdgeneticscomparative.json.txt)</p>
259
+ </div>
260
+ <div class="card">
261
+ <h3 class="text-xl font-semibold text-dark-blue mb-4">Neuroanatomical Basis</h3>
262
+ <p class="text-gray-600 mb-4">Objective neuroimaging data shows structural brain differences linked to these genetic variants.</p>
263
+ <div class="text-center p-4 border border-medium-blue rounded-lg">
264
+ <p class="font-semibold text-dark-blue">DRD4 7-Repeat Allele Carriers (ADHD):</p>
265
+ <p class="text-lg text-bright-blue mt-1">Reduced Prefrontal Gyrification</p>
266
+ <p class="text-xs text-gray-500 mt-2">(Compared to Controls or Non-Carriers)</p>
267
+ </div>
268
+ <p class="text-gray-600 mt-4">This demonstrates tangible biological correlates of functional impairment that current SSA standards overlook.</p>
269
+ <p class="text-xs text-gray-500 mt-2">Source: Exhibits B (anatomical add exhibit.docx), C (7repeatadd.pdf)</p>
270
+ </div>
271
+ </div>
272
+ <div class="card mt-8 md:col-span-3">
273
+ <h3 class="text-xl font-semibold text-dark-blue mb-4 text-center">ADHD: High Heritability, Complex Genetics</h3>
274
+ <p class="text-gray-700 mb-6 text-center">ADHD is highly heritable, but risk comes from many genes working together, involving multiple systems beyond dopamine.</p>
275
+ <div class="chart-container" style="height: 250px; max-height: 300px;">
276
+ <canvas id="heritabilityChart"></canvas>
277
+ </div>
278
+ <p class="text-gray-600 mt-6 text-center">SSA standards must reflect this polygenic complexity, incorporating evidence from dopamine, serotonin, norepinephrine, cholinergic, and synaptic plasticity pathways.</p>
279
+ <p class="text-xs text-gray-500 mt-2 text-center">Source: Exhibit H (adhdgeneticscomparative.json.txt)</p>
280
+ </div>
281
+ </section>
282
+
283
+ <!-- Section 4: Human & Systemic Cost -->
284
+ <section>
285
+ <h2 class="section-title">The Human & Systemic Cost</h2>
286
+ <p class="text-center text-gray-700 mb-8">Ignoring accessibility, security, and modern science imposes significant burdens on individuals and the public, reflected in SSA's own data.</p>
287
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-start">
288
+ <div class="card">
289
+ <h3 class="text-xl font-semibold text-dark-blue mb-4">Disability Program Scale (2023)</h3>
290
+ <p class="text-gray-600 mb-4">Millions rely on SSA disability benefits, with substantial numbers having conditions linked to the unaddressed issues:</p>
291
+ <div class="chart-container">
292
+ <canvas id="beneficiaryChart"></canvas>
293
+ </div>
294
+ <p class="text-gray-600 mt-4">Ensuring fair access and accurate evaluation is critical for this large population.</p>
295
+ <p class="text-xs text-gray-500 mt-2">Source: Exhibit D (di_asr23.pdf.pdf - Tables 6, 10A)</p>
296
+ </div>
297
+ <div class="card">
298
+ <h3 class="text-xl font-semibold text-dark-blue mb-4">Socioeconomic Impact</h3>
299
+ <div class="space-y-4 text-gray-700">
300
+ <div class="flex items-start space-x-3">
301
+ <span class="text-2xl mt-1">🎓</span>
302
+ <p><span class="font-semibold">Lost Potential:</span> Conditions like ADHD, linked to unacknowledged genetic factors, impair academic achievement (Exhibit E) and career stability.</p>
303
+ </div>
304
+ <div class="flex items-start space-x-3">
305
+ <span class="text-2xl mt-1">💰</span>
306
+ <p><span class="font-semibold">Public Cost:</span> Systemic barriers and outdated standards increase reliance on public support and inflate healthcare costs.</p>
307
+ </div>
308
+ <div class="flex items-start space-x-3">
309
+ <span class="text-2xl mt-1">⚖️</span>
310
+ <p><span class="font-semibold">Access Denied:</span> Procedural hurdles (inaccessibility, ignored evidence) effectively deny a meaningful day in court and rightful benefits.</p>
311
+ </div>
312
+ </div>
313
+ </div>
314
+ </div>
315
+ </section>
316
+
317
+ <!-- Section 5: Call to Action -->
318
+ <section>
319
+ <h2 class="section-title">Call for Urgent Reform</h2>
320
+ <p class="text-center text-gray-700 mb-8">To ensure access, fairness, and security, immediate structural reforms mandated by the Court are necessary.</p>
321
+ <div class="card max-w-3xl mx-auto">
322
+ <h3 class="text-xl font-semibold text-dark-blue mb-4">Requested Judicial Relief:</h3>
323
+ <ol class="list-decimal list-inside space-y-3 text-gray-700">
324
+ <li>**Mandate WCAG 2.1 AA Compliance:** Enforce the DOJ rule for all SSA and federally-funded LEA digital platforms via court order and independent audits.</li>
325
+ <li>**Modernize Evidentiary Standards:** Compel SSA, via APA rulemaking, to integrate current genetic and neuroanatomical science into Disability Listings.</li>
326
+ <li>**Require PQC Transition:** Order SSA to develop and implement a time-bound plan for adopting Post-Quantum Cryptography to secure ePHI under HIPAA.</li>
327
+ <li>**Ensure Meaningful Review:** Affirm jurisdiction to address these systemic failures, preventing procedural dismissals from denying access to justice.</li>
328
+ </ol>
329
+ </div>
330
+ </section>
331
+
332
+ <!-- Section 6: Future Standards & Digital Due Process -->
333
+ <section>
334
+ <h2 class="section-title">Digital Due Process & Future Standards</h2>
335
+ <p class="text-center text-gray-700 mb-8">Advancing beyond WCAG 2.1, future standards must embrace WCAG 3.0 principles and leverage AI for personalized accessibility, ensuring robust digital due process for neurodivergent individuals.</p>
336
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-start">
337
+ <div class="card">
338
+ <h3 class="text-xl font-semibold text-dark-blue mb-4">WCAG 3.0 & Cognitive Accessibility</h3>
339
+ <p class="text-gray-600 mb-4">Hypothetical adoption of WCAG 3.0 "Silver" standards would prioritize:</p>
340
+ <ul class="space-y-2 list-disc list-inside text-gray-700">
341
+ <li><span class="font-semibold">Clear Language:</span> Plain language summaries for complex legal text.</li>
342
+ <li><span class="font-semibold">Focus & Attention:</span> Minimizing distractions and allowing customizable layouts.</li>
343
+ <li><span class="font-semibold">Memory Support:</span> Persistent navigation and context reminders.</li>
344
+ <li><span class="font-semibold">Error Prevention:</span> robust validation and forgiveness in forms.</li>
345
+ </ul>
346
+ <p class="text-gray-600 mt-4">This directly benefits those with ADHD, addressing cognitive fatigue and executive dysfunction.</p>
347
+ </div>
348
+ <div class="card">
349
+ <h3 class="text-xl font-semibold text-dark-blue mb-4">GovLLM for Digital Due Process</h3>
350
+ <p class="text-gray-600 mb-4">A specialized Government Large Language Model (GovLLM) could revolutionize access:</p>
351
+ <div class="space-y-4">
352
+ <div class="flow-item">
353
+ <span class="font-semibold">Personalized Guidance</span><br>
354
+ <span class="text-sm">Context-aware help for navigating complex regulations.</span>
355
+ </div>
356
+ <div class="flow-arrow">&darr;</div>
357
+ <div class="flow-item">
358
+ <span class="font-semibold">Simplified Interfaces</span><br>
359
+ <span class="text-sm">Dynamic simplification of forms based on user needs.</span>
360
+ </div>
361
+ <div class="flow-arrow">&darr;</div>
362
+ <div class="flow-item">
363
+ <span class="font-semibold">Real-time Assistance</span><br>
364
+ <span class="text-sm">Immediate answers to procedural questions, reducing anxiety.</span>
365
+ </div>
366
+ </div>
367
+ <p class="text-gray-600 mt-4">This AI-driven approach ensures that digital systems actively support users, fulfilling the promise of due process in the digital age.</p>
368
+ </div>
369
+ </div>
370
+ </section>
371
+
372
+ </main>
373
+
374
+ <footer class="text-center mt-12 text-sm text-gray-500">
375
+ Data derived from Consolidated Notice of Appeal & Certiorari Petition, McLaughlin v. Kijakazi, D. Md. (Ref: 4th Cir. Nos. 25-1222, 25-1224) and associated exhibits. Infographic created October 27, 2025.
376
+ <p class="mt-2">No Mermaid JS or SVG graphics were used in this output.</p>
377
+ </footer>
378
+
379
+ <script>
380
+ const brilliantBluesPalette = ['#0B4F6C', '#01BAEF', '#168FF5', '#59BFFF', '#ADDDFF'];
381
+
382
+ const wrapLabel = (label) => {
383
+ if (typeof label !== 'string') return label;
384
+ const maxLen = 16;
385
+ if (label.length <= maxLen) return label;
386
+
387
+ const words = label.split(' ');
388
+ const lines = [];
389
+ let currentLine = '';
390
+
391
+ words.forEach(word => {
392
+ if ((currentLine + ' ' + word).trim().length <= maxLen) {
393
+ currentLine = (currentLine + ' ' + word).trim();
394
+ } else {
395
+ if (currentLine) lines.push(currentLine);
396
+ currentLine = word;
397
+ }
398
+ });
399
+ if (currentLine) lines.push(currentLine);
400
+ return lines;
401
+ };
402
+
403
+ const tooltipTitleCallback = (tooltipItems) => {
404
+ const item = tooltipItems[0];
405
+ let label = item.chart.data.labels[item.dataIndex];
406
+ if (Array.isArray(label)) {
407
+ return label.join(' ');
408
+ } else {
409
+ return label;
410
+ }
411
+ };
412
+
413
+ const commonChartOptions = {
414
+ responsive: true,
415
+ maintainAspectRatio: false,
416
+ plugins: {
417
+ tooltip: {
418
+ callbacks: {
419
+ title: tooltipTitleCallback
420
+ }
421
+ },
422
+ legend: {
423
+ position: 'bottom',
424
+ },
425
+ }
426
+ };
427
+
428
+ // Heritability Chart (Bar Chart) - Data from Exhibit H
429
+ const heritabilityCtx = document.getElementById('heritabilityChart').getContext('2d');
430
+ const heritabilityLabels = ['Twin Study Heritability', 'SNP-Based Heritability'].map(wrapLabel);
431
+ new Chart(heritabilityCtx, {
432
+ type: 'bar',
433
+ data: {
434
+ labels: heritabilityLabels,
435
+ datasets: [{
436
+ label: 'ADHD Heritability Estimate (%)',
437
+ data: [75, 20], // Mid-points of ranges (60-90% -> 75%, 10-28% -> ~20%)
438
+ backgroundColor: [brilliantBluesPalette[1], brilliantBluesPalette[3]],
439
+ borderColor: [brilliantBluesPalette[0], brilliantBluesPalette[2]],
440
+ borderWidth: 1
441
+ }]
442
+ },
443
+ options: {
444
+ ...commonChartOptions,
445
+ scales: {
446
+ y: {
447
+ beginAtZero: true,
448
+ max: 100,
449
+ title: { display: true, text: 'Percentage (%)' }
450
+ }
451
+ },
452
+ plugins: {
453
+ ...commonChartOptions.plugins,
454
+ title: { display: true, text: 'ADHD Heritability Estimates' }
455
+ }
456
+ }
457
+ });
458
+
459
+ // Beneficiary Chart (Bar Chart) - Data from Exhibit D
460
+ const beneficiaryCtx = document.getElementById('beneficiaryChart').getContext('2d');
461
+ // From Table 6, Dec 2023, All Disabled Beneficiaries (Workers + Widow(er)s + Adult Children)
462
+ const beneficiaryLabels = ['Mental Disorders', 'Musculoskeletal', 'Nervous System', 'Circulatory System', 'Other Conditions'].map(wrapLabel);
463
+ const beneficiaryData = [
464
+ (3011707 / 8709006) * 100, // Sum of all Mental Disorders categories / Total
465
+ (2610501 / 8709006) * 100, // Musculoskeletal / Total
466
+ (894754 / 8709006) * 100, // Nervous system / Total
467
+ (580710 / 8709006) * 100, // Circulatory / Total
468
+ (100 - (3011707 + 2610501 + 894754 + 580710) / 8709006 * 100) // Remainder
469
+ ];
470
+ new Chart(beneficiaryCtx, {
471
+ type: 'bar',
472
+ data: {
473
+ labels: beneficiaryLabels,
474
+ datasets: [{
475
+ label: '% of All Disabled Beneficiaries',
476
+ data: beneficiaryData,
477
+ backgroundColor: brilliantBluesPalette.slice(0, 5),
478
+ borderColor: brilliantBluesPalette[0],
479
+ borderWidth: 1
480
+ }]
481
+ },
482
+ options: {
483
+ ...commonChartOptions,
484
+ indexAxis: 'y', // Horizontal Bar Chart
485
+ scales: {
486
+ x: {
487
+ beginAtZero: true,
488
+ max: 40, // Adjust max for better visualization
489
+ title: { display: true, text: 'Percentage (%)' }
490
+ }
491
+ },
492
+ plugins: {
493
+ ...commonChartOptions.plugins,
494
+ title: { display: true, text: 'Primary Diagnosis Groups (All Disabled Beneficiaries, Dec 2023)' },
495
+ legend: { display: false }
496
+ }
497
+ }
498
+ });
499
+
500
+ </script>
501
+
502
+ </body>
503
+ </html>