Hugging Face's logo

Spaces:
ziggylott
/
docuflow
Running

App Files Community
docuflow
File size: 38,972 Bytes
686db59
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
<!DOCTYPE html>
<html lang="en" class="h-full bg-slate-950">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>DocuFlow — 3D Interactive FlipBook & Financial Worksheet Platform</title>
  <!-- Tailwind CSS CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- Lucide Icons -->
  <script src="https://unpkg.com/lucide@latest"></script>
  <!-- StPageFlip CDN -->
  <script src="https://cdn.jsdelivr.net/npm/page-flip/dist/js/page-flip.browser.js"></script>
  <!-- PDF.js CDN for live PDF upload support -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
  <style>
    .page-flip {
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
    }
    .page {
      background-color: #ffffff;
      overflow: hidden;
      box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.05);
    }
    .page-hard {
      background-color: #0f172a;
      color: #ffffff;
      font-weight: bold;
      border: 1px solid #334155;
    }
    /* Custom Scrollbar */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    ::-webkit-scrollbar-track {
      background: #0f172a;
    }
    ::-webkit-scrollbar-thumb {
      background: #334155;
      border-radius: 3px;
    }
  </style>
</head>
<body class="h-full flex flex-col bg-slate-950 text-slate-100 font-sans antialiased overflow-hidden select-none">

  <!-- Top Action Bar -->
  <header class="h-16 border-b border-slate-800 bg-slate-900/90 backdrop-blur px-4 sm:px-6 flex items-center justify-between z-20">
    <div class="flex items-center gap-3">
      <div class="w-9 h-9 rounded-xl bg-gradient-to-tr from-blue-600 to-indigo-500 flex items-center justify-center text-white shadow-lg shadow-blue-500/25">
        <i data-lucide="book-open" class="w-5 h-5"></i>
      </div>
      <div>
        <div class="flex items-center gap-2">
          <span class="font-extrabold text-base tracking-tight text-white">DocuFlow</span>
          <span class="px-2 py-0.5 rounded-full bg-blue-500/20 text-blue-400 text-[10px] font-semibold border border-blue-500/30">
            Worksheet Edition
          </span>
        </div>
        <div class="text-[11px] text-slate-400 hidden sm:block">Building Real Wealth · 3D Reader & Financial Studio</div>
      </div>
    </div>

    <!-- Actions -->
    <div class="flex items-center gap-2 sm:gap-3">
      <!-- Worksheet Studio Button -->
      <button
        id="btn-open-worksheets"
        class="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-xl bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white text-xs font-bold shadow-md shadow-blue-600/25 transition border border-blue-400/30 animate-pulse hover:animate-none"
      >
        <i data-lucide="calculator" class="w-4 h-4"></i>
        <span>Worksheet Studio</span>
      </button>

      <!-- Upload Custom PDF Button -->
      <label class="cursor-pointer inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-200 hover:text-white text-xs font-semibold border border-slate-700 transition">
        <i data-lucide="upload" class="w-3.5 h-3.5"></i>
        <span class="hidden md:inline">Upload PDF</span>
        <input type="file" id="pdf-input" accept="application/pdf" class="hidden" />
      </label>

      <!-- GitHub Link -->
      <a
        href="https://github.com/tingsterlott12-bit/docuflow"
        target="_blank"
        class="hidden sm:inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-300 hover:text-white text-xs font-semibold border border-slate-700 transition"
      >
        <i data-lucide="github" class="w-3.5 h-3.5"></i>
        <span>GitHub</span>
      </a>
    </div>
  </header>

  <!-- Main 3D Flipbook Stage -->
  <main class="flex-1 relative flex flex-col items-center justify-center p-2 sm:p-6 overflow-hidden">
    
    <!-- Left Navigation Arrow -->
    <button
      id="btn-prev"
      class="absolute left-3 sm:left-8 z-10 w-11 h-11 rounded-full bg-slate-900/80 hover:bg-blue-600 text-white backdrop-blur flex items-center justify-center transition border border-white/10 shadow-2xl disabled:opacity-20 disabled:pointer-events-none"
      title="Previous Page (←)"
    >
      <i data-lucide="chevron-left" class="w-6 h-6"></i>
    </button>

    <!-- FlipBook Canvas Holder -->
    <div id="flipbook-wrapper" class="relative max-w-5xl h-[70vh] max-h-[750px] flex items-center justify-center transition-transform duration-200">
      <div id="book" class="shadow-2xl">
        
        <!-- Cover Spread -->
        <div class="page page-hard flex flex-col justify-between p-8 bg-gradient-to-br from-slate-900 via-indigo-950 to-slate-900 text-white rounded-l-lg border-r border-indigo-900/50">
          <div class="flex items-center justify-between">
            <span class="px-2.5 py-1 rounded-md bg-blue-500/20 text-blue-300 text-[11px] font-mono tracking-wider border border-blue-500/30">
              EXECUTIVE EDITION
            </span>
            <i data-lucide="sparkles" class="w-5 h-5 text-amber-400"></i>
          </div>

          <div class="space-y-4 my-auto">
            <div class="w-12 h-1 bg-blue-500 rounded-full"></div>
            <h1 class="text-3xl font-extrabold tracking-tight leading-tight">
              Building Real Wealth
            </h1>
            <p class="text-xs text-slate-300 leading-relaxed">
              A comprehensive curriculum on asset allocation, cash flow compounding, and tax efficiency with interactive embedded worksheets.
            </p>
          </div>

          <div class="flex items-center justify-between pt-6 border-t border-slate-800 text-[11px] text-slate-400 font-mono">
            <span>Interactive Workbook</span>
            <span>2026 Brief</span>
          </div>
        </div>

        <!-- Page 1: Executive Summary -->
        <div class="page p-8 flex flex-col justify-between text-slate-900 bg-white relative">
          <div class="flex items-center justify-between border-b border-slate-200 pb-3">
            <span class="text-xs font-bold uppercase tracking-wider text-blue-600">Executive Summary</span>
            <span class="text-xs text-slate-400 font-mono">01</span>
          </div>

          <div class="space-y-4 text-xs text-slate-700 leading-relaxed my-auto">
            <h2 class="text-lg font-bold text-slate-900">The 4 Pillars of Durable Capital</h2>
            <p>Wealth accumulation is governed by mathematical risk control and asymmetric asset allocation rather than speculative timing.</p>
            
            <div class="p-4 bg-slate-50 rounded-2xl border border-slate-200 space-y-2">
              <div class="flex items-center gap-2 font-bold text-slate-900 text-xs">
                <i data-lucide="shield-check" class="w-4 h-4 text-emerald-600"></i>
                <span>Fiduciary Liquidity Rule</span>
              </div>
              <p class="text-[11px] text-slate-600">
                Automate cash flow sweep accounts and maintain 12 months of high-yield liquid buffers prior to risk expansion.
              </p>
            </div>
          </div>

          <div class="pt-3 border-t border-slate-100 flex items-center justify-between text-[10px] text-slate-400">
            <span>Building Real Wealth</span>
            <span>Section I</span>
          </div>
        </div>

        <!-- Page 2: Net Worth Blueprint (With Interactive Hotspot) -->
        <div class="page p-8 flex flex-col justify-between text-slate-900 bg-slate-50 relative">
          <div class="flex items-center justify-between border-b border-slate-200 pb-3">
            <span class="text-xs font-bold uppercase tracking-wider text-blue-600">Worksheet 1.1</span>
            <span class="text-xs text-slate-400 font-mono">02</span>
          </div>

          <div class="space-y-4 text-xs text-slate-700 my-auto">
            <div>
              <h2 class="text-lg font-bold text-slate-900">Net Worth Architecture</h2>
              <p className="text-[11px] text-slate-500">Calculate baseline solvency, liquid reserves, and debt obligations.</p>
            </div>

            <div class="space-y-2 text-xs">
              <div class="flex justify-between p-2.5 bg-white rounded-xl border border-slate-200 shadow-sm">
                <span class="font-medium text-slate-800">Liquid Equities & ETFs</span>
                <span class="font-bold text-blue-600">$185,000</span>
              </div>
              <div class="flex justify-between p-2.5 bg-white rounded-xl border border-slate-200 shadow-sm">
                <span class="font-medium text-slate-800">Primary Real Estate</span>
                <span class="font-bold text-blue-600">$420,000</span>
              </div>
              <div class="flex justify-between p-2.5 bg-white rounded-xl border border-slate-200 shadow-sm">
                <span class="font-medium text-slate-800">Total Liabilities & Debt</span>
                <span class="font-bold text-rose-600">-$311,500</span>
              </div>
            </div>

            <!-- Hotspot trigger -->
            <div
              onclick="openWorksheetTab('networth')"
              class="cursor-pointer p-3.5 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white rounded-xl shadow-lg shadow-blue-500/20 flex items-center justify-between transition group"
            >
              <div class="flex items-center gap-2 text-xs font-bold">
                <i data-lucide="calculator" class="w-4 h-4"></i>
                <span>Launch Net Worth Blueprint</span>
              </div>
              <i data-lucide="arrow-right" class="w-4 h-4 group-hover:translate-x-1 transition"></i>
            </div>
          </div>

          <div class="pt-3 border-t border-slate-200 flex items-center justify-between text-[10px] text-slate-400">
            <span>Worksheet 1.1</span>
            <span>Page 2</span>
          </div>
        </div>

        <!-- Page 3: Cash Flow Engine (With Interactive Hotspot) -->
        <div class="page p-8 flex flex-col justify-between text-slate-900 bg-white relative">
          <div class="flex items-center justify-between border-b border-slate-200 pb-3">
            <span class="text-xs font-bold uppercase tracking-wider text-blue-600">Worksheet 1.2</span>
            <span class="text-xs text-slate-400 font-mono">03</span>
          </div>

          <div class="space-y-4 text-xs text-slate-700 my-auto">
            <div>
              <h2 class="text-lg font-bold text-slate-900">Cash Flow Optimization</h2>
              <p class="text-[11px] text-slate-500">Maximize investable monthly surplus and automated savings rate.</p>
            </div>

            <div class="grid grid-cols-2 gap-2 text-center">
              <div class="p-3 bg-slate-50 rounded-xl border border-slate-200">
                <div class="text-[10px] text-slate-500 font-medium">Monthly Income</div>
                <div class="text-sm font-bold text-slate-900">$12,500</div>
              </div>
              <div class="p-3 bg-emerald-50 rounded-xl border border-emerald-200">
                <div class="text-[10px] text-emerald-700 font-medium">Target Savings Rate</div>
                <div class="text-sm font-bold text-emerald-700">35.0%</div>
              </div>
            </div>

            <!-- Hotspot trigger -->
            <div
              onclick="openWorksheetTab('cashflow')"
              class="cursor-pointer p-3.5 bg-slate-900 hover:bg-slate-800 text-white rounded-xl shadow-lg flex items-center justify-between transition group"
            >
              <div class="flex items-center gap-2 text-xs font-bold">
                <i data-lucide="pie-chart" class="w-4 h-4 text-blue-400"></i>
                <span>Open Cash Flow Calculator</span>
              </div>
              <i data-lucide="arrow-right" class="w-4 h-4 group-hover:translate-x-1 transition"></i>
            </div>
          </div>

          <div class="pt-3 border-t border-slate-100 flex items-center justify-between text-[10px] text-slate-400">
            <span>Worksheet 1.2</span>
            <span>Page 3</span>
          </div>
        </div>

        <!-- Page 4: Asset Allocation & Compounding (With Simulator Hotspot) -->
        <div class="page p-8 flex flex-col justify-between text-slate-900 bg-slate-50 relative">
          <div class="flex items-center justify-between border-b border-slate-200 pb-3">
            <span class="text-xs font-bold uppercase tracking-wider text-blue-600">Worksheet 1.3</span>
            <span class="text-xs text-slate-400 font-mono">04</span>
          </div>

          <div class="space-y-4 text-xs text-slate-700 my-auto">
            <div>
              <h2 class="text-lg font-bold text-slate-900">Compound Growth Simulator</h2>
              <p class="text-[11px] text-slate-500">Model long-term capital compounding across 10 to 30 year horizons.</p>
            </div>

            <div class="p-3.5 bg-indigo-50/70 border border-indigo-100 rounded-xl space-y-1">
              <div class="flex justify-between font-bold text-indigo-950 text-xs">
                <span>20-Year Projected Wealth</span>
                <span class="text-blue-600">$1,791,240</span>
              </div>
              <p class="text-[10px] text-slate-600">Assuming $2,500/mo addition at 8.5% annualized index return.</p>
            </div>

            <!-- Hotspot trigger -->
            <div
              onclick="openWorksheetTab('compound')"
              class="cursor-pointer p-3.5 bg-gradient-to-r from-indigo-900 to-blue-900 hover:from-indigo-800 hover:to-blue-800 text-white rounded-xl shadow-lg flex items-center justify-between transition group"
            >
              <div class="flex items-center gap-2 text-xs font-bold">
                <i data-lucide="trending-up" class="w-4 h-4 text-emerald-400"></i>
                <span>Run Compounding Simulator</span>
              </div>
              <i data-lucide="arrow-right" class="w-4 h-4 group-hover:translate-x-1 transition"></i>
            </div>
          </div>

          <div class="pt-3 border-t border-slate-200 flex items-center justify-between text-[10px] text-slate-400">
            <span>Worksheet 1.3</span>
            <span>Page 4</span>
          </div>
        </div>

        <!-- Back Cover -->
        <div class="page page-hard flex flex-col justify-between p-8 bg-gradient-to-tl from-slate-900 via-indigo-950 to-slate-900 text-white rounded-r-lg border-l border-indigo-900/50 text-center">
          <div class="text-xs text-slate-400 font-mono">DOCUFLOW 3D SUITE</div>

          <div class="space-y-3 my-auto">
            <div class="w-12 h-12 rounded-2xl bg-blue-600 text-white flex items-center justify-center mx-auto shadow-lg shadow-blue-500/30">
              <i data-lucide="check-circle" class="w-6 h-6"></i>
            </div>
            <h3 class="text-xl font-bold">End of Workbook</h3>
            <p class="text-xs text-slate-300 max-w-xs mx-auto leading-relaxed">
              Export your financial blueprint or upload new publications with full 3D simulation.
            </p>
          </div>

          <div class="text-[11px] text-slate-500 font-mono">
            Open-Source · Zero Dependencies
          </div>
        </div>

      </div>
    </div>

    <!-- Right Navigation Arrow -->
    <button
      id="btn-next"
      class="absolute right-3 sm:right-8 z-10 w-11 h-11 rounded-full bg-slate-900/80 hover:bg-blue-600 text-white backdrop-blur flex items-center justify-center transition border border-white/10 shadow-2xl disabled:opacity-20 disabled:pointer-events-none"
      title="Next Page (→)"
    >
      <i data-lucide="chevron-right" class="w-6 h-6"></i>
    </button>
  </main>

  <!-- Bottom Navigation & Controls Bar -->
  <footer class="h-16 border-t border-slate-800 bg-slate-900/90 backdrop-blur px-4 sm:px-6 flex items-center justify-between z-20">
    <div class="flex items-center gap-2">
      <button id="btn-zoom-out" class="p-2 rounded-lg text-slate-400 hover:text-white hover:bg-slate-800 transition" title="Zoom Out">
        <i data-lucide="zoom-out" class="w-4 h-4"></i>
      </button>
      <span id="zoom-label" class="text-xs font-mono text-slate-400">100%</span>
      <button id="btn-zoom-in" class="p-2 rounded-lg text-slate-400 hover:text-white hover:bg-slate-800 transition" title="Zoom In">
        <i data-lucide="zoom-in" class="w-4 h-4"></i>
      </button>
    </div>

    <!-- Scrubber -->
    <div class="flex-1 max-w-sm mx-4 flex items-center gap-3">
      <div class="w-full bg-slate-800 h-1.5 rounded-full overflow-hidden">
        <div id="progress-bar" class="bg-blue-500 h-full w-[20%] transition-all duration-300"></div>
      </div>
      <span id="page-indicator" class="text-xs font-mono text-slate-400 whitespace-nowrap">Page 1 / 5</span>
    </div>

    <div class="flex items-center gap-2">
      <button id="btn-sound" class="p-2 rounded-lg text-blue-400 hover:bg-slate-800 transition" title="Toggle Sound">
        <i data-lucide="volume-2" class="w-4 h-4"></i>
      </button>
      <button id="btn-fullscreen" class="p-2 rounded-lg text-slate-300 hover:text-white hover:bg-slate-800 transition" title="Fullscreen (F)">
        <i data-lucide="maximize" class="w-4 h-4"></i>
      </button>
    </div>
  </footer>

  <!-- EMBEDDED WORKSHEET STUDIO DRAWER -->
  <div id="worksheet-drawer" class="fixed inset-0 z-50 flex justify-end bg-slate-950/70 backdrop-blur-sm hidden">
    <div class="w-full max-w-2xl h-full bg-slate-900 border-l border-slate-800 shadow-2xl flex flex-col justify-between text-slate-100 overflow-hidden">
      
      <!-- Drawer Header -->
      <div class="p-5 sm:p-6 border-b border-slate-800 flex items-center justify-between bg-slate-900/90">
        <div class="flex items-center gap-3">
          <div class="w-10 h-10 rounded-2xl bg-gradient-to-tr from-blue-600 to-indigo-500 flex items-center justify-center text-white shadow-lg shadow-blue-500/25">
            <i data-lucide="calculator" class="w-5 h-5"></i>
          </div>
          <div>
            <div class="flex items-center gap-2">
              <h2 class="text-lg font-bold text-white tracking-tight">Interactive Financial Studio</h2>
              <span class="px-2 py-0.5 rounded-full bg-blue-500/20 text-blue-400 text-[10px] font-semibold border border-blue-500/30">
                Live Companion
              </span>
            </div>
            <p class="text-xs text-slate-400">Building Real Wealth Curriculum</p>
          </div>
        </div>

        <button id="btn-close-worksheets" class="p-2 rounded-xl text-slate-400 hover:text-white hover:bg-slate-800 transition">
          <i data-lucide="x" class="w-5 h-5"></i>
        </button>
      </div>

      <!-- Tab Buttons -->
      <div class="flex border-b border-slate-800 px-6 bg-slate-950/40 text-xs font-semibold overflow-x-auto">
        <button id="tab-btn-networth" onclick="openWorksheetTab('networth')" class="py-3 px-4 border-b-2 border-blue-500 text-blue-400 flex items-center gap-1.5 whitespace-nowrap">
          <i data-lucide="dollar-sign" class="w-3.5 h-3.5"></i>
          <span>1.1 Net Worth</span>
        </button>
        <button id="tab-btn-cashflow" onclick="openWorksheetTab('cashflow')" class="py-3 px-4 border-b-2 border-transparent text-slate-400 hover:text-slate-200 flex items-center gap-1.5 whitespace-nowrap">
          <i data-lucide="pie-chart" class="w-3.5 h-3.5"></i>
          <span>1.2 Cash Flow</span>
        </button>
        <button id="tab-btn-compound" onclick="openWorksheetTab('compound')" class="py-3 px-4 border-b-2 border-transparent text-slate-400 hover:text-slate-200 flex items-center gap-1.5 whitespace-nowrap">
          <i data-lucide="trending-up" class="w-3.5 h-3.5"></i>
          <span>1.3 Compounding</span>
        </button>
      </div>

      <!-- Tab Content Holder -->
      <div class="flex-1 overflow-y-auto p-6 space-y-6">

        <!-- TAB 1: NET WORTH -->
        <div id="tab-content-networth" class="space-y-6">
          <div class="p-5 rounded-2xl bg-gradient-to-br from-slate-800 to-slate-950 border border-slate-700 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
            <div>
              <span class="text-[10px] font-bold uppercase tracking-wider text-slate-400">Calculated Net Worth</span>
              <div id="nw-display-total" class="text-3xl font-extrabold text-white tracking-tight mt-1">$328,500</div>
            </div>
            <div class="flex items-center gap-4 text-xs border-t sm:border-t-0 sm:border-l border-slate-700 pt-3 sm:pt-0 sm:pl-5">
              <div>
                <div class="text-slate-400">Assets</div>
                <div id="nw-display-assets" class="font-bold text-emerald-400">$640,000</div>
              </div>
              <div>
                <div class="text-slate-400">Liabilities</div>
                <div id="nw-display-liab" class="font-bold text-rose-400">$311,500</div>
              </div>
              <div>
                <div class="text-slate-400">Debt Ratio</div>
                <div id="nw-display-ratio" class="font-bold text-blue-400">48.7%</div>
              </div>
            </div>
          </div>

          <div class="space-y-3">
            <h3 class="text-xs font-bold uppercase tracking-wider text-emerald-400">Assets</h3>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-xs">
              <div>
                <label class="text-slate-400">Liquid Cash ($)</label>
                <input id="nw-cash" type="number" value="35000" class="w-full mt-1 px-3 py-2 bg-slate-800 border border-slate-700 rounded-xl text-white focus:ring-2 focus:ring-blue-500 focus:outline-none" />
              </div>
              <div>
                <label class="text-slate-400">Equities & Portfolio ($)</label>
                <input id="nw-equities" type="number" value="185000" class="w-full mt-1 px-3 py-2 bg-slate-800 border border-slate-700 rounded-xl text-white focus:ring-2 focus:ring-blue-500 focus:outline-none" />
              </div>
              <div>
                <label class="text-slate-400">Real Estate ($)</label>
                <input id="nw-realestate" type="number" value="420000" class="w-full mt-1 px-3 py-2 bg-slate-800 border border-slate-700 rounded-xl text-white focus:ring-2 focus:ring-blue-500 focus:outline-none" />
              </div>
            </div>
          </div>

          <div class="space-y-3">
            <h3 class="text-xs font-bold uppercase tracking-wider text-rose-400">Liabilities</h3>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-xs">
              <div>
                <label class="text-slate-400">Mortgage ($)</label>
                <input id="nw-mortgage" type="number" value="290000" class="w-full mt-1 px-3 py-2 bg-slate-800 border border-slate-700 rounded-xl text-white focus:ring-2 focus:ring-rose-500 focus:outline-none" />
              </div>
              <div>
                <label class="text-slate-400">Loans & Other Debt ($)</label>
                <input id="nw-loans" type="number" value="21500" class="w-full mt-1 px-3 py-2 bg-slate-800 border border-slate-700 rounded-xl text-white focus:ring-2 focus:ring-rose-500 focus:outline-none" />
              </div>
            </div>
          </div>
        </div>

        <!-- TAB 2: CASH FLOW -->
        <div id="tab-content-cashflow" class="space-y-6 hidden">
          <div class="p-5 rounded-2xl bg-gradient-to-br from-slate-800 to-slate-950 border border-slate-700 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
            <div>
              <span class="text-[10px] font-bold uppercase tracking-wider text-slate-400">Monthly Investable Surplus</span>
              <div id="cf-display-surplus" class="text-3xl font-extrabold text-emerald-400 tracking-tight mt-1">$3,400 / mo</div>
            </div>
            <div class="flex items-center gap-4 text-xs border-t sm:border-t-0 sm:border-l border-slate-700 pt-3 sm:pt-0 sm:pl-5">
              <div>
                <div class="text-slate-400">Savings Rate</div>
                <div id="cf-display-rate" class="font-bold text-blue-400">36.2%</div>
              </div>
              <div>
                <div class="text-slate-400">Annual Surplus</div>
                <div id="cf-display-annual" class="font-bold text-white">$40,800</div>
              </div>
            </div>
          </div>

          <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-xs">
            <div>
              <label class="text-slate-400">Monthly Gross Revenue ($)</label>
              <input id="cf-income" type="number" value="12500" class="w-full mt-1 px-3 py-2 bg-slate-800 border border-slate-700 rounded-xl text-white focus:ring-2 focus:ring-blue-500 focus:outline-none" />
            </div>
            <div>
              <label class="text-slate-400">Income Taxes ($)</label>
              <input id="cf-taxes" type="number" value="3100" class="w-full mt-1 px-3 py-2 bg-slate-800 border border-slate-700 rounded-xl text-white focus:ring-2 focus:ring-blue-500 focus:outline-none" />
            </div>
            <div>
              <label class="text-slate-400">Housing & Fixed Costs ($)</label>
              <input id="cf-housing" type="number" value="4200" class="w-full mt-1 px-3 py-2 bg-slate-800 border border-slate-700 rounded-xl text-white focus:ring-2 focus:ring-blue-500 focus:outline-none" />
            </div>
            <div>
              <label class="text-slate-400">Discretionary & Living ($)</label>
              <input id="cf-living" type="number" value="1800" class="w-full mt-1 px-3 py-2 bg-slate-800 border border-slate-700 rounded-xl text-white focus:ring-2 focus:ring-blue-500 focus:outline-none" />
            </div>
          </div>
        </div>

        <!-- TAB 3: COMPOUND SIMULATOR -->
        <div id="tab-content-compound" class="space-y-6 hidden">
          <div class="p-5 rounded-2xl bg-gradient-to-br from-indigo-950 to-slate-950 border border-indigo-900 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
            <div>
              <span class="text-[10px] font-bold uppercase tracking-wider text-indigo-300">Projected Portfolio</span>
              <div id="sim-display-total" class="text-3xl font-extrabold text-white tracking-tight mt-1">$1,791,240</div>
            </div>
            <div class="flex items-center gap-4 text-xs border-t sm:border-t-0 sm:border-l border-indigo-900 pt-3 sm:pt-0 sm:pl-5">
              <div>
                <div class="text-slate-400">Principal</div>
                <div id="sim-display-principal" class="font-bold text-slate-200">$650,000</div>
              </div>
              <div>
                <div class="text-indigo-300">Compound Gain</div>
                <div id="sim-display-gain" class="font-bold text-emerald-400">+$1,141,240</div>
              </div>
            </div>
          </div>

          <div class="space-y-4 text-xs">
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
              <div>
                <label class="text-slate-400">Starting Portfolio ($)</label>
                <input id="sim-starting" type="number" value="50000" class="w-full mt-1 px-3 py-2 bg-slate-800 border border-slate-700 rounded-xl text-white focus:ring-2 focus:ring-blue-500 focus:outline-none" />
              </div>
              <div>
                <label class="text-slate-400">Monthly Contribution ($)</label>
                <input id="sim-monthly" type="number" value="2500" class="w-full mt-1 px-3 py-2 bg-slate-800 border border-slate-700 rounded-xl text-white focus:ring-2 focus:ring-blue-500 focus:outline-none" />
              </div>
              <div>
                <label class="text-slate-400">Return Rate (% / yr)</label>
                <input id="sim-rate" type="number" step="0.5" value="8.5" class="w-full mt-1 px-3 py-2 bg-slate-800 border border-slate-700 rounded-xl text-white focus:ring-2 focus:ring-blue-500 focus:outline-none" />
              </div>
            </div>

            <div>
              <div class="flex justify-between text-slate-400 mb-1">
                <span>Horizon</span>
                <span id="sim-years-label" class="font-bold text-blue-400">20 Years</span>
              </div>
              <input id="sim-years" type="range" min="5" max="40" step="1" value="20" class="w-full accent-blue-500 cursor-pointer" />
            </div>
          </div>
        </div>

      </div>

      <!-- Drawer Footer -->
      <div class="p-5 border-t border-slate-800 bg-slate-900/90 flex items-center justify-between">
        <button id="btn-save-blueprint" class="inline-flex items-center gap-1.5 px-4 py-2 rounded-xl bg-blue-600 hover:bg-blue-500 text-white font-semibold text-xs shadow-md transition">
          <i data-lucide="save" class="w-4 h-4"></i>
          <span>Save Progress</span>
        </button>
        <button id="btn-export-blueprint" class="inline-flex items-center gap-1.5 px-3 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-300 font-semibold text-xs border border-slate-700 transition">
          <i data-lucide="download" class="w-4 h-4"></i>
          <span>Export JSON</span>
        </button>
      </div>

    </div>
  </div>

  <script>
    lucide.createIcons();

    // Sound synthesis
    let soundEnabled = true;
    function playFlipSound() {
      if (!soundEnabled) return;
      try {
        const AudioContext = window.AudioContext || window.webkitAudioContext;
        if (!AudioContext) return;
        const ctx = new AudioContext();
        const bufferSize = ctx.sampleRate * 0.08;
        const buffer = ctx.createBuffer(1, bufferSize, ctx.sampleRate);
        const data = buffer.getChannelData(0);
        for (let i = 0; i < bufferSize; i++) data[i] = Math.random() * 2 - 1;

        const noise = ctx.createBufferSource();
        noise.buffer = buffer;
        const filter = ctx.createBiquadFilter();
        filter.type = 'bandpass';
        filter.frequency.setValueAtTime(800, ctx.currentTime);
        filter.frequency.exponentialRampToValueAtTime(300, ctx.currentTime + 0.08);

        const gain = ctx.createGain();
        gain.gain.setValueAtTime(0.01, ctx.currentTime);
        gain.gain.linearRampToValueAtTime(0.18, ctx.currentTime + 0.02);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.08);

        noise.connect(filter);
        filter.connect(gain);
        gain.connect(ctx.destination);
        noise.start();
      } catch (e) {}
    }

    // PageFlip instance
    let pageFlip = null;

    function initReader() {
      const bookEl = document.getElementById('book');
      const isMobile = window.innerWidth < 768;
      const width = isMobile ? 360 : 450;
      const height = isMobile ? 520 : 620;

      pageFlip = new St.PageFlip(bookEl, {
        width,
        height,
        size: 'stretch',
        minWidth: 320,
        maxWidth: 600,
        minHeight: 480,
        maxHeight: 800,
        maxShadowOpacity: 0.6,
        showCover: true,
        mobileScrollSupport: true,
        useMouseEvents: true,
        swipeDistance: 30
      });

      pageFlip.loadFromHTML(document.querySelectorAll('.page'));

      pageFlip.on('flip', (e) => {
        playFlipSound();
        const total = pageFlip.getPageCount();
        const current = e.data + 1;
        document.getElementById('page-indicator').textContent = `Page ${current} / ${total}`;
        document.getElementById('progress-bar').style.width = `${(current / total) * 100}%`;
      });
    }

    // Worksheet Drawer Controls
    function openWorksheetTab(tabName) {
      document.getElementById('worksheet-drawer').classList.remove('hidden');
      ['networth', 'cashflow', 'compound'].forEach((tab) => {
        const btn = document.getElementById(`tab-btn-${tab}`);
        const content = document.getElementById(`tab-content-${tab}`);
        if (tab === tabName) {
          btn.className = 'py-3 px-4 border-b-2 border-blue-500 text-blue-400 flex items-center gap-1.5 whitespace-nowrap';
          content.classList.remove('hidden');
        } else {
          btn.className = 'py-3 px-4 border-b-2 border-transparent text-slate-400 hover:text-slate-200 flex items-center gap-1.5 whitespace-nowrap';
          content.classList.add('hidden');
        }
      });
    }

    // Calculation updates
    function updateCalculations() {
      // Net worth
      const cash = Number(document.getElementById('nw-cash').value) || 0;
      const eq = Number(document.getElementById('nw-equities').value) || 0;
      const re = Number(document.getElementById('nw-realestate').value) || 0;
      const mort = Number(document.getElementById('nw-mortgage').value) || 0;
      const loans = Number(document.getElementById('nw-loans').value) || 0;

      const assets = cash + eq + re;
      const liab = mort + loans;
      const nw = assets - liab;
      const ratio = assets > 0 ? ((liab / assets) * 100).toFixed(1) : 0;

      document.getElementById('nw-display-total').textContent = `$${nw.toLocaleString()}`;
      document.getElementById('nw-display-assets').textContent = `$${assets.toLocaleString()}`;
      document.getElementById('nw-display-liab').textContent = `$${liab.toLocaleString()}`;
      document.getElementById('nw-display-ratio').textContent = `${ratio}%`;

      // Cash flow
      const inc = Number(document.getElementById('cf-income').value) || 0;
      const tax = Number(document.getElementById('cf-taxes').value) || 0;
      const house = Number(document.getElementById('cf-housing').value) || 0;
      const liv = Number(document.getElementById('cf-living').value) || 0;

      const surplus = Math.max(0, inc - (tax + house + liv));
      const rate = inc > tax ? (((surplus) / (inc - tax)) * 100).toFixed(1) : 0;

      document.getElementById('cf-display-surplus').textContent = `$${surplus.toLocaleString()} / mo`;
      document.getElementById('cf-display-rate').textContent = `${rate}%`;
      document.getElementById('cf-display-annual').textContent = `$${(surplus * 12).toLocaleString()}`;

      // Compound simulator
      const p = Number(document.getElementById('sim-starting').value) || 0;
      const pmt = Number(document.getElementById('sim-monthly').value) || 0;
      const rYr = Number(document.getElementById('sim-rate').value) || 0;
      const yrs = Number(document.getElementById('sim-years').value) || 20;

      document.getElementById('sim-years-label').textContent = `${yrs} Years`;
      const rM = (rYr / 100) / 12;
      const n = yrs * 12;
      const fv = Math.round(p * Math.pow(1 + rM, n) + pmt * ((Math.pow(1 + rM, n) - 1) / rM));
      const principal = p + pmt * n;
      const gain = Math.max(0, fv - principal);

      document.getElementById('sim-display-total').textContent = `$${fv.toLocaleString()}`;
      document.getElementById('sim-display-principal').textContent = `$${principal.toLocaleString()}`;
      document.getElementById('sim-display-gain').textContent = `+$${gain.toLocaleString()}`;
    }

    window.addEventListener('DOMContentLoaded', () => {
      initReader();

      // Hook inputs
      ['nw-cash', 'nw-equities', 'nw-realestate', 'nw-mortgage', 'nw-loans', 'cf-income', 'cf-taxes', 'cf-housing', 'cf-living', 'sim-starting', 'sim-monthly', 'sim-rate', 'sim-years'].forEach((id) => {
        document.getElementById(id)?.addEventListener('input', updateCalculations);
      });

      // Controls
      document.getElementById('btn-prev').addEventListener('click', () => pageFlip?.flipPrev());
      document.getElementById('btn-next').addEventListener('click', () => pageFlip?.flipNext());
      document.getElementById('btn-open-worksheets').addEventListener('click', () => openWorksheetTab('networth'));
      document.getElementById('btn-close-worksheets').addEventListener('click', () => {
        document.getElementById('worksheet-drawer').classList.add('hidden');
      });

      document.getElementById('btn-sound').addEventListener('click', () => {
        soundEnabled = !soundEnabled;
        document.getElementById('btn-sound').className = soundEnabled
          ? 'p-2 rounded-lg text-blue-400 hover:bg-slate-800 transition'
          : 'p-2 rounded-lg text-slate-500 hover:bg-slate-800 transition';
      });

      let zoom = 1;
      document.getElementById('btn-zoom-in').addEventListener('click', () => {
        zoom = Math.min(1.4, zoom + 0.1);
        document.getElementById('flipbook-wrapper').style.transform = `scale(${zoom})`;
        document.getElementById('zoom-label').textContent = `${Math.round(zoom * 100)}%`;
      });
      document.getElementById('btn-zoom-out').addEventListener('click', () => {
        zoom = Math.max(0.8, zoom - 0.1);
        document.getElementById('flipbook-wrapper').style.transform = `scale(${zoom})`;
        document.getElementById('zoom-label').textContent = `${Math.round(zoom * 100)}%`;
      });

      document.getElementById('btn-fullscreen').addEventListener('click', () => {
        if (!document.fullscreenElement) {
          document.documentElement.requestFullscreen().catch(() => {});
        } else {
          document.exitFullscreen().catch(() => {});
        }
      });

      // Export JSON
      document.getElementById('btn-export-blueprint').addEventListener('click', () => {
        const data = {
          curriculum: 'Building Real Wealth — Personal Blueprint',
          exportedAt: new Date().toISOString(),
          netWorth: document.getElementById('nw-display-total').textContent,
          monthlySurplus: document.getElementById('cf-display-surplus').textContent,
          savingsRate: document.getElementById('cf-display-rate').textContent,
          projectedWealth: document.getElementById('sim-display-total').textContent
        };
        const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `BRW_Blueprint_${new Date().toISOString().split('T')[0]}.json`;
        a.click();
        URL.revokeObjectURL(url);
      });

      // Save toast
      document.getElementById('btn-save-blueprint').addEventListener('click', () => {
        alert('Your financial inputs have been saved to this session!');
      });

      // Keyboard
      window.addEventListener('keydown', (e) => {
        if (e.target.tagName === 'INPUT') return;
        if (e.key === 'ArrowRight' || e.key === ' ') pageFlip?.flipNext();
        if (e.key === 'ArrowLeft') pageFlip?.flipPrev();
        if (e.key === 'w' || e.key === 'W') openWorksheetTab('networth');
      });
    });
  </script>
</body>
</html>