c-eco/tdr.html at main · jac14014/c-eco · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>c-ECO // Threshold Dynamics Research</title>

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Urbanist:wght@300;400;600;700&display=swap" rel="stylesheet">

  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            sigma: { DEFAULT: '#d6bc7e', dim: '#a68b4c' },
          },
          fontFamily: {
            tech: ['Urbanist', 'sans-serif'],
            mono: ['Inter', 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'monospace'],
          },
          boxShadow: {
            sigGlow: "0 0 18px rgba(214,188,126,0.25)"
          }
        }
      }
    }
  </script>

  <style>
    html, body {
      height: 100%;
      margin: 0;
      background: #020617;
      color: #d4d4d8;
      font-family: Inter, sans-serif;
    }
    .scanline-overlay{
      position: fixed;
      inset: 0;
      z-index: 0;
      background: linear-gradient(to bottom,
        rgba(255,255,255,0),
        rgba(255,255,255,0) 50%,
        rgba(0,0,0,0.06) 50%,
        rgba(0,0,0,0.06));
      background-size: 100% 4px;
      pointer-events:none;
    }
    .content { position: relative; z-index: 1; }
    ::-webkit-scrollbar{ width: 6px; }
    ::-webkit-scrollbar-track{ background: #09090b; }
    ::-webkit-scrollbar-thumb{ background: #27272a; border-radius: 3px; }
  </style>
</head>

<body class="bg-[#020617] text-zinc-300 font-sans min-h-screen flex flex-col overflow-hidden selection:bg-sigma-dim selection:text-white">
  <div class="scanline-overlay"></div>

  <!-- HEADER -->
  <header class="h-14 border-b border-white/5 bg-slate-950/80 backdrop-blur-sm flex items-center justify-between px-6 z-40 content">
    <div class="flex items-center gap-4">
      <div class="w-8 h-8 border border-white/10 flex items-center justify-center bg-white/5">
        <span class="font-tech text-sigma font-bold text-lg">Σ</span>
      </div>
      <div class="flex flex-col">
        <h1 class="font-tech text-sm tracking-[0.2em] text-white uppercase font-semibold">c-ECO Threshold Dynamics Research</h1>
        <span class="text-[0.65rem] text-zinc-500 uppercase tracking-wider font-tech">Mathematical Backbone // Early Warning Signals</span>
      </div>
    </div>

    <div class="hidden md:flex items-center gap-3 px-4 py-1 rounded-full border border-white/5 bg-white/5">
      <div class="w-1.5 h-1.5 rounded-full bg-sigma animate-pulse"></div>
      <span class="font-tech text-xs tracking-[0.15em] text-sigma">TDR VIEW</span>
    </div>

    <div class="flex items-center gap-4 text-xs font-tech text-zinc-500">
      <button class="hover:text-sigma transition-colors" onclick="window.location.href='protocol.html'">BACK TO TERMINAL</button>
      <button class="hover:text-sigma transition-colors" onclick="window.location.href='index.html'">EXIT</button>
    </div>
  </header>

  <!-- MAIN -->
  <main class="flex-1 overflow-y-auto content">
    <div class="max-w-6xl mx-auto px-6 py-10 space-y-10">

      <!-- HERO -->
      <section class="border border-white/5 bg-white/[0.02] p-6">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
          <div>
            <div class="flex items-center gap-2 mb-2">
              <span class="text-sigma text-xs">◆</span>
              <span class="font-tech text-[0.7rem] tracking-[0.22em] text-zinc-400 uppercase">Scientific Reference Layer</span>
            </div>
            <h2 class="font-tech text-2xl text-white tracking-wide">Early Warning Signals (EWS) for Threshold Proximity</h2>
            <p class="mt-3 text-sm text-zinc-400 leading-relaxed max-w-3xl">
              This page translates the c-ECO framework into a scientific-facing backbone grounded in dynamical systems
              methods. The research focus is on <span class="text-sigma">Early Warning Signals</span> and
              <span class="text-sigma">Critical Slowing Down</span> as operational indicators of resilience loss
              before visible disruption.
            </p>
            <p class="mt-3 text-sm text-zinc-400 leading-relaxed max-w-3xl">
              We do <span class="text-zinc-200">not</span> claim a universal, single “distance-to-threshold” equation.
              Instead, we formalize and validate a standardized indicator bundle and estimation protocol that remains robust
              under real-world constraints (noise, partial observability, heterogeneous data).
            </p>
          </div>

          <div class="flex flex-col gap-2 text-[0.75rem] font-mono text-zinc-500">
            <div class="border border-white/10 bg-black/20 px-3 py-2">
              <span class="text-sigma">STATE_REF</span>: CECO-TDR-001
            </div>
            <div class="border border-white/10 bg-black/20 px-3 py-2">
              <span class="text-sigma">METHOD</span>: EWS / CSD
            </div>
            <div class="border border-white/10 bg-black/20 px-3 py-2">
              <span class="text-sigma">SCOPE</span>: CROSS-SYSTEM VALIDATION
            </div>
          </div>
        </div>
      </section>

      <!-- RESEARCH QUESTION -->
      <section class="space-y-4">
        <div class="flex items-center justify-between">
          <h3 class="font-tech text-[0.75rem] uppercase tracking-[0.25em] text-zinc-500">Research Question</h3>
          <span class="text-[0.7rem] font-mono text-zinc-600">scientific framing</span>
        </div>

        <div class="grid md:grid-cols-2 gap-5">
          <div class="border border-sigma/20 bg-[#0c0c0e]/70 p-5">
            <div class="flex items-center gap-2 mb-2">
              <span class="text-sigma text-xs">◆</span>
              <span class="font-tech text-sm tracking-[0.18em] text-white uppercase">Core question</span>
            </div>
            <p class="text-sm text-zinc-400 leading-relaxed">
              How can we quantify <span class="text-zinc-200">proximity to threshold states</span> using established
              dynamical-systems early warning methods — and validate the robustness and portability of these indicators
              across distinct dynamical regimes?
            </p>
            <div class="mt-4 text-[0.7rem] font-mono text-zinc-600">
              Output target: <span class="text-zinc-400">standardized indicator bundle + estimation protocol + toolkit</span>
            </div>
          </div>

          <div class="border border-sigma/20 bg-[#0c0c0e]/70 p-5">
            <div class="flex items-center gap-2 mb-2">
              <span class="text-sigma text-xs">◆</span>
              <span class="font-tech text-sm tracking-[0.18em] text-white uppercase">Why it matters</span>
            </div>
            <p class="text-sm text-zinc-400 leading-relaxed">
              Many systems (ecological, infrastructural, financial, digital) exhibit nonlinear dynamics and regime shifts.
              Without validated resilience indicators, instability often becomes visible only after crossing a stability boundary,
              under high cost and irreversibility constraints.
            </p>
            <div class="mt-4 text-[0.7rem] font-mono text-zinc-600">
              Emphasis: <span class="text-zinc-400">resilience loss detection under uncertainty</span>
            </div>
          </div>
        </div>
      </section>

      <!-- METHOD -->
      <section class="space-y-4">
        <div class="flex items-center justify-between">
          <h3 class="font-tech text-[0.75rem] uppercase tracking-[0.25em] text-zinc-500">Method</h3>
          <span class="text-[0.7rem] font-mono text-zinc-600">EWS / CSD bundle</span>
        </div>

        <div class="border border-white/5 bg-white/[0.02] p-6">
          <div class="grid md:grid-cols-3 gap-5">
            <div class="border border-sigma/20 bg-[#0c0c0e]/70 p-5">
              <div class="font-tech text-sigma uppercase tracking-widest text-sm">Indicator Bundle</div>
              <ul class="mt-3 space-y-2 text-sm text-zinc-400">
                <li>• Lag-1 autocorrelation trends (CSD signature)</li>
                <li>• Variance escalation / volatility growth</li>
                <li>• Recovery behavior / return-rate indicators</li>
                <li>• Local stability proxies from neighborhood dynamics (when feasible)</li>
              </ul>
              <div class="mt-4 text-[0.7rem] font-mono text-zinc-600">
                Principle: <span class="text-zinc-400">no single universal formula; validated bundle instead</span>
              </div>
            </div>

            <div class="border border-sigma/20 bg-[#0c0c0e]/70 p-5 shadow-sigGlow">
              <div class="font-tech text-sigma uppercase tracking-widest text-sm">Estimation Protocol</div>
              <ul class="mt-3 space-y-2 text-sm text-zinc-400">
                <li>• Rolling window estimation + trend tests</li>
                <li>• Detrending / de-seasonalization when relevant</li>
                <li>• Stationarity checks & regime segmentation</li>
                <li>• Confidence scoring / uncertainty bounds</li>
                <li>• Noise stress tests + sparse sampling tests</li>
              </ul>
              <div class="mt-4 text-[0.7rem] font-mono text-zinc-600">
                Aim: <span class="text-zinc-400">robust inference under real-world data constraints</span>
              </div>
            </div>

            <div class="border border-sigma/20 bg-[#0c0c0e]/70 p-5">
              <div class="font-tech text-sigma uppercase tracking-widest text-sm">Interpretation Layer</div>
              <ul class="mt-3 space-y-2 text-sm text-zinc-400">
                <li>• Bifurcation-aware interpretation (e.g., sudden vs oscillatory transitions)</li>
                <li>• Parameter drift framing (safety margin erosion)</li>
                <li>• False-positive controls & robustness criteria</li>
                <li>• Clear separation of signal detection vs causal claims</li>
              </ul>
              <div class="mt-4 text-[0.7rem] font-mono text-zinc-600">
                Deliverable: <span class="text-zinc-400">interpretable outputs with traceable assumptions</span>
              </div>
            </div>
          </div>

          <div class="mt-6 border-t border-white/5 pt-5 text-sm text-zinc-400 leading-relaxed">
            <span class="text-sigma font-tech uppercase tracking-widest text-[0.75rem]">Note:</span>
            This page intentionally avoids embedding equations to keep the focus on scope, validation strategy, and deliverables.
            Formal mathematical details and references are expected to be finalized with the PI during proposal preparation.
          </div>
        </div>
      </section>

      <!-- 24-MONTH PLAN -->
      <section class="space-y-4">
        <div class="flex items-center justify-between">
          <h3 class="font-tech text-[0.75rem] uppercase tracking-[0.25em] text-zinc-500">24-Month Research Plan</h3>
          <span class="text-[0.7rem] font-mono text-zinc-600">execution roadmap</span>
        </div>

        <div class="grid md:grid-cols-2 gap-5">

          <div class="border border-sigma/20 bg-[#0c0c0e]/70 p-5">
            <div class="flex items-start justify-between gap-4">
              <div>
                <div class="flex items-center gap-2 mb-2">
                  <span class="text-sigma text-xs">◆</span>
                  <span class="font-tech text-sm tracking-[0.18em] text-white uppercase">Months 1–6</span>
                </div>
                <h4 class="font-tech text-lg text-sigma">Formal definition & estimation protocols</h4>
              </div>
              <div class="text-[0.65rem] font-mono text-zinc-500">P1</div>
            </div>
            <ul class="mt-4 space-y-2 text-sm text-zinc-400">
              <li>• Formalize EWS indicator bundle and output specification</li>
              <li>• Protocols: windowing, detrending, stationarity checks, uncertainty</li>
              <li>• Baseline synthetic experiments for calibration behavior</li>
            </ul>
          </div>

          <div class="border border-sigma/20 bg-[#0c0c0e]/70 p-5">
            <div class="flex items-start justify-between gap-4">
              <div>
                <div class="flex items-center gap-2 mb-2">
                  <span class="text-sigma text-xs">◆</span>
                  <span class="font-tech text-sm tracking-[0.18em] text-white uppercase">Months 7–12</span>
                </div>
                <h4 class="font-tech text-lg text-sigma">Bifurcation-aware interpretation & drift framing</h4>
              </div>
              <div class="text-[0.65rem] font-mono text-zinc-500">P2</div>
            </div>
            <ul class="mt-4 space-y-2 text-sm text-zinc-400">
              <li>• Interpretation: saddle-node vs Hopf (and related structures)</li>
              <li>• Parameter drift / safety margin erosion framing</li>
              <li>• False-positive controls and robustness criteria</li>
            </ul>
          </div>

          <div class="border border-sigma/20 bg-[#0c0c0e]/70 p-5">
            <div class="flex items-start justify-between gap-4">
              <div>
                <div class="flex items-center gap-2 mb-2">
                  <span class="text-sigma text-xs">◆</span>
                  <span class="font-tech text-sm tracking-[0.18em] text-white uppercase">Months 13–18</span>
                </div>
                <h4 class="font-tech text-lg text-sigma">Cross-system validation</h4>
              </div>
              <div class="text-[0.65rem] font-mono text-zinc-500">P3</div>
            </div>
            <ul class="mt-4 space-y-2 text-sm text-zinc-400">
              <li>• Two-system validation (e.g., supply chain network + ecological feedback loop)</li>
              <li>• Noise & stress testing (sampling limits, proxy variables)</li>
              <li>• Comparative performance and confidence scoring</li>
            </ul>
          </div>

          <div class="border border-sigma/20 bg-[#0c0c0e]/70 p-5 shadow-sigGlow">
            <div class="flex items-start justify-between gap-4">
              <div>
                <div class="flex items-center gap-2 mb-2">
                  <span class="text-sigma text-xs">◆</span>
                  <span class="font-tech text-sm tracking-[0.18em] text-white uppercase">Months 19–24</span>
                </div>
                <h4 class="font-tech text-lg text-sigma">Toolkit + manuscripts + workshop</h4>
              </div>
              <div class="text-[0.65rem] font-mono text-zinc-500">P4</div>
            </div>
            <ul class="mt-4 space-y-2 text-sm text-zinc-400">
              <li>• Threshold indicator toolkit (standardized algorithms + docs)</li>
              <li>• Manuscripts (methods + validation)</li>
              <li>• Capstone expert workshop and roadmap</li>
            </ul>
          </div>

        </div>
      </section>

      <!-- 13 SECTORS -->
      <section class="space-y-4">
        <div class="flex items-center justify-between">
          <h3 class="font-tech text-[0.75rem] uppercase tracking-[0.25em] text-zinc-500">13 Initial Sectors</h3>
          <span class="text-[0.7rem] font-mono text-zinc-600">research environment</span>
        </div>

        <div class="border border-white/5 bg-white/[0.02] p-6">
          <p class="text-sm text-zinc-400 leading-relaxed max-w-5xl">
            The cross-sector structure provides a testing environment for portability and generalization.
            It is not a claim of immediate full deployment across all sectors within the initial two-year scope.
          </p>

          <div class="mt-5 grid md:grid-cols-2 gap-3 text-sm text-zinc-400">
            <div class="border border-white/10 bg-black/20 px-4 py-3">• Mining & Mineral Extraction</div>
            <div class="border border-white/10 bg-black/20 px-4 py-3">• Agribusiness & Intensive Land Use</div>
            <div class="border border-white/10 bg-black/20 px-4 py-3">• Energy Systems</div>
            <div class="border border-white/10 bg-black/20 px-4 py-3">• Water & Sanitation</div>
            <div class="border border-white/10 bg-black/20 px-4 py-3">• Infrastructure & Heavy Construction</div>
            <div class="border border-white/10 bg-black/20 px-4 py-3">• Chemical & Materials Systems</div>
            <div class="border border-white/10 bg-black/20 px-4 py-3">• Real Estate & Urbanization</div>
            <div class="border border-white/10 bg-black/20 px-4 py-3">• Digital Technology & Data Infrastructure</div>
            <div class="border border-white/10 bg-black/20 px-4 py-3">• Logistics & Transportation</div>
            <div class="border border-white/10 bg-black/20 px-4 py-3">• Financial Systems</div>
            <div class="border border-white/10 bg-black/20 px-4 py-3">• AI & Algorithmic Systems</div>
            <div class="border border-white/10 bg-black/20 px-4 py-3">• Forests, Carbon & Natural Assets</div>
            <div class="border border-white/10 bg-black/20 px-4 py-3">• Space & Orbital Infrastructure</div>
          </div>
        </div>
      </section>

      <!-- OUTPUTS -->
      <section class="space-y-4">
        <div class="flex items-center justify-between">
          <h3 class="font-tech text-[0.75rem] uppercase tracking-[0.25em] text-zinc-500">Expected Outputs</h3>
          <span class="text-[0.7rem] font-mono text-zinc-600">deliverables</span>
        </div>

        <div class="grid md:grid-cols-3 gap-5">
          <div class="border border-sigma/20 bg-[#0c0c0e]/70 p-5">
            <div class="font-tech text-sigma uppercase tracking-widest text-sm">Technical</div>
            <ul class="mt-3 space-y-2 text-sm text-zinc-400">
              <li>• Standardized EWS indicator bundle + protocol</li>
              <li>• Robustness criteria + confidence scoring</li>
              <li>• Cross-system validation results</li>
              <li>• Reproducible computational routines</li>
            </ul>
          </div>

          <div class="border border-sigma/20 bg-[#0c0c0e]/70 p-5 shadow-sigGlow">
            <div class="font-tech text-sigma uppercase tracking-widest text-sm">Toolkit</div>
            <ul class="mt-3 space-y-2 text-sm text-zinc-400">
              <li>• Prototype threshold indicator toolkit</li>
              <li>• Documentation & standardized outputs</li>
              <li>• Minimal interface for integration</li>
              <li>• Traceability & reproducibility notes</li>
            </ul>
          </div>

          <div class="border border-sigma/20 bg-[#0c0c0e]/70 p-5">
            <div class="font-tech text-sigma uppercase tracking-widest text-sm">Scholarly</div>
            <ul class="mt-3 space-y-2 text-sm text-zinc-400">
              <li>• Methods manuscript (protocol + validation)</li>
              <li>• Cross-system results manuscript</li>
              <li>• Capstone workshop synthesis</li>
              <li>• Scaling roadmap (post-validation)</li>
            </ul>
          </div>
        </div>

        <div class="mt-5 border border-white/10 bg-black/20 p-5 text-sm text-zinc-400 leading-relaxed">
          <span class="text-sigma font-tech uppercase tracking-widest text-[0.75rem]">Downstream translation:</span>
          after peer-reviewed validation, the methodology can be translated into standardized analytical protocols compatible with
          institutional decision environments. Any future certification/licensing or AI-enabled monitoring pathways are treated as
          downstream translation contingent on demonstrated robustness.
        </div>
      </section>

      <!-- REFERENCES -->
      <section class="space-y-4">
        <div class="flex items-center justify-between">
          <h3 class="font-tech text-[0.75rem] uppercase tracking-[0.25em] text-zinc-500">References (Starter Set)</h3>
          <span class="text-[0.7rem] font-mono text-zinc-600">PI to finalize</span>
        </div>

        <div class="border border-white/5 bg-white/[0.02] p-6">
          <div class="grid md:grid-cols-2 gap-5">
            <div class="border border-white/10 bg-black/20 p-5">
              <div class="flex items-center gap-2">
                <span class="text-sigma">◆</span>
                <h4 class="font-tech text-white tracking-wider uppercase text-sm">Core literature areas</h4>
              </div>
              <ul class="mt-4 space-y-2 text-sm text-zinc-400">
                <li>• Early Warning Signals (EWS) and Critical Slowing Down (CSD)</li>
                <li>• Nonlinear dynamics and bifurcation theory</li>
                <li>• Resilience metrics and regime shift detection</li>
                <li>• Time-series preprocessing and uncertainty under noise</li>
              </ul>
            </div>

            <div class="border border-white/10 bg-black/20 p-5">
              <div class="flex items-center gap-2">
                <span class="text-sigma">◆</span>
                <h4 class="font-tech text-white tracking-wider uppercase text-sm">Implementation notes</h4>
              </div>
              <ul class="mt-4 space-y-2 text-sm text-zinc-400">
                <li>• Avoids equations in public-facing page</li>
                <li>• Formalism documented in proposal annex / PI materials</li>
                <li>• Reproducibility and traceability prioritized</li>
                <li>• Scope designed for two-system validation in 24 months</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <!-- FOOTER -->
      <footer class="mt-24 border-t border-[#d6bc7e]/10">
        <div class="max-w-6xl mx-auto px-6 py-8 text-center space-y-4">
          <p class="text-xs tracking-widest text-[#d6bc7e]/40 font-tech">
            THRESHOLD DYNAMICS RESEARCH — SCIENTIFIC BACKBONE UNDER DEVELOPMENT
          </p>

          <div class="flex flex-col items-center gap-3">
            <a
              href="system-architecture.html"
              class="inline-flex items-center gap-2 text-[0.7rem] font-tech tracking-[0.22em] uppercase text-[#d6bc7e]/60 hover:text-[#d6bc7e] transition-colors"
            >
              <span class="text-[#d6bc7e]/70">◆</span>
              System Architecture
              <span class="text-[#d6bc7e]/70">→</span>
            </a>

            <a
              href="protocol.html"
              class="inline-flex items-center gap-2 text-[0.7rem] font-tech tracking-[0.22em] uppercase text-[#d6bc7e]/60 hover:text-[#d6bc7e] transition-colors"
            >
              <span class="text-[#d6bc7e]/70">◆</span>
              Protocol Terminal
              <span class="text-[#d6bc7e]/70">→</span>
            </a>
          </div>
        </div>
      </footer>

    </div>
  </main>

</body>
</html>