Vortex/index.html at main · MobiusBraid-ui/Vortex · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flux Weave Studio | Command</title>

  <!-- Fonts -->
  <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=Rajdhani:wght@300;400;500;600;700&display=swap" rel="stylesheet">

  <!-- Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>

  <!-- Custom Styles -->
  <link rel="stylesheet" href="styles.css">

  <!-- Libraries -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>

  <!-- Tailwind Config for Custom Colors/Fonts -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          fontFamily: {
            sans: ['Rajdhani', 'sans-serif'],
          },
          colors: {
            sinter: {
              bg: '#050508',
              surface: 'rgba(15, 20, 30, 0.65)',
              cyan: '#00f2fe',
              purple: '#4facfe',
              gold: '#f9d423'
            }
          }
        }
      }
    }
  </script>
</head>
<body class="bg-sinter-bg text-white overflow-hidden h-screen w-screen selection:bg-sinter-cyan selection:text-black">

  <!-- ======================== -->
  <!-- VIEW 1: The Manifold (2D)-->
  <!-- ======================== -->
  <main id="manifold-view" class="absolute inset-0 z-50 flex flex-col items-center justify-center bg-sinter-bg transition-opacity duration-1000">
    <div class="absolute inset-0 grid-bg opacity-20 pointer-events-none"></div>

    <div class="relative z-10 max-w-4xl px-6 text-center">
      <div class="mb-6 inline-block">
        <span class="text-xs tracking-[0.3em] text-sinter-cyan uppercase px-3 py-1 border border-sinter-cyan/30 rounded-full bg-sinter-cyan/5">Sinter Ecosystem Core</span>
      </div>

      <h1 class="text-5xl md:text-7xl font-bold mb-6 tracking-tight text-glow">
        FLUX WEAVE <span class="text-transparent bg-clip-text bg-gradient-to-r from-sinter-cyan to-sinter-purple">STUDIO</span>
      </h1>

      <p class="text-lg md:text-2xl text-gray-400 mb-4 max-w-2xl mx-auto leading-relaxed font-light">
        The Forge of the 5th Industrial Revolution.
      </p>

      <p class="text-md md:text-xl text-gray-500 mb-12 max-w-2xl mx-auto leading-relaxed italic">
        "Stop consuming. Start weaving. The 5th Industrial Revolution is built by those who can visualize the threads of the future."
      </p>

      <button id="enter-studio-btn" class="group relative inline-flex items-center justify-center px-8 py-4 text-lg font-bold tracking-widest text-white uppercase transition-all duration-300 bg-sinter-cyan/10 border border-sinter-cyan rounded hover:bg-sinter-cyan hover:text-black hover:shadow-[0_0_30px_rgba(0,242,254,0.6)]">
        <span class="absolute inset-0 w-full h-full -mt-1 rounded opacity-30 bg-gradient-to-b from-transparent via-transparent to-black"></span>
        <span class="relative">Enter The Loom</span>
        <svg class="w-5 h-5 ml-2 transition-transform duration-300 group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path></svg>
      </button>
    </div>
  </main>


  <!-- ======================== -->
  <!-- VIEW 2: The Loom (3D)    -->
  <!-- ======================== -->
  <div id="loom-view" class="absolute inset-0 z-10 opacity-0 pointer-events-none transition-opacity duration-1000 flex flex-col">
    <!-- 3D Canvas Container -->
    <div id="canvas-container" class="absolute inset-0 z-0"></div>

    <!-- UI Overlay (Header) -->
    <header class="relative z-20 flex justify-between items-center p-3 md:p-6 bg-gradient-to-b from-sinter-bg to-transparent">
      <div class="flex items-center space-x-2 md:space-x-3">
        <div class="w-6 h-6 md:w-8 md:h-8 rounded-full border border-sinter-cyan flex items-center justify-center shadow-[0_0_10px_rgba(0,242,254,0.5)]">
          <div class="w-3 h-3 md:w-4 md:h-4 bg-sinter-cyan rounded-full animate-pulse"></div>
        </div>
        <div>
          <h2 class="text-lg md:text-xl font-bold tracking-widest text-white leading-tight">FLUX WEAVE</h2>
          <div class="text-[8px] md:text-[10px] tracking-[0.2em] text-sinter-purple uppercase">Syntropic Link Active</div>
        </div>
      </div>

      <!-- Architect Rank -->
      <div class="glass-panel px-3 md:px-6 py-1.5 md:py-2 rounded-lg flex flex-col items-end border border-white/10">
        <div class="text-[10px] md:text-sm text-gray-400 uppercase tracking-widest mb-0.5 md:mb-1">Architect Rank</div>
        <div class="flex items-center space-x-2 md:space-x-3">
          <span id="rank-title" class="hidden md:inline text-sinter-cyan font-bold text-xs md:text-base">Novice Weaver</span>
          <div class="w-12 md:w-24 h-1 md:h-1.5 bg-gray-800 rounded-full overflow-hidden">
            <div id="xp-bar" class="h-full bg-gradient-to-r from-sinter-cyan to-sinter-purple w-[10%] transition-all duration-500"></div>
          </div>
          <span id="level-display" class="text-[10px] md:text-xs font-bold bg-white/10 px-1.5 md:px-2 py-0.5 rounded text-white">LVL 1</span>
        </div>
      </div>
    </header>

    <!-- Main Workspace Area -->
    <div class="relative z-20 flex-1 pointer-events-none w-full h-full">

      <!-- Pattern Templates (Sidebar on Desktop, Horizontal Scroll Bottom on Mobile) -->
      <aside class="absolute bottom-[110px] md:bottom-auto md:top-6 left-4 right-4 md:left-6 md:right-auto md:w-72 glass-panel rounded-xl border border-white/10 flex flex-col overflow-hidden pointer-events-auto shadow-2xl backdrop-blur-md z-30 transition-all">
        <div class="bg-white/5 px-3 md:px-4 py-2 md:py-3 border-b border-white/10 flex justify-between items-center">
          <h3 class="text-xs md:text-sm font-bold tracking-widest uppercase text-gray-300">Pattern Templates</h3>
          <span class="text-[10px] bg-sinter-purple/20 text-sinter-purple px-2 py-1 rounded hidden md:inline">CLICK</span>
        </div>

        <div class="p-2 md:p-3 flex flex-row md:flex-col space-x-3 md:space-x-0 md:space-y-3 overflow-x-auto md:overflow-y-auto custom-scrollbar max-h-48 md:max-h-[calc(100vh-12rem)]">

          <!-- Nodes Weave -->
          <button class="weave-btn flex-shrink-0 w-48 md:w-auto group relative flex flex-col p-3 rounded bg-white/5 border border-white/10 hover:border-orange-400/50 hover:bg-orange-400/5 transition-all text-left" data-type="nodes">
            <div class="flex items-center justify-between mb-1">
              <span class="text-orange-400 font-semibold tracking-wide text-sm">Node Topology</span>
              <svg class="w-4 h-4 text-gray-500 group-hover:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
            </div>
            <span class="text-[10px] md:text-xs text-gray-400">Distribute civilian & logistical node clusters.</span>
          </button>

          <!-- Military Advanced -->
          <button class="weave-btn flex-shrink-0 w-48 md:w-auto group relative flex flex-col p-3 rounded bg-white/5 border border-white/10 hover:border-red-500/50 hover:bg-red-500/5 transition-all text-left" data-type="military">
            <div class="flex items-center justify-between mb-1">
              <span class="text-red-500 font-semibold tracking-wide text-sm">Military Advanced</span>
              <svg class="w-4 h-4 text-gray-500 group-hover:text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path></svg>
            </div>
            <span class="text-[10px] md:text-xs text-gray-400">Deploy encrypted orbital strike grids & defense manifolds.</span>
          </button>

          <!-- E-commerce -->
          <button class="weave-btn flex-shrink-0 w-48 md:w-auto group relative flex flex-col p-3 rounded bg-white/5 border border-white/10 hover:border-sinter-cyan/50 hover:bg-sinter-cyan/5 transition-all text-left" data-type="ecommerce">
            <div class="flex items-center justify-between mb-1">
              <span class="text-sinter-cyan font-semibold tracking-wide text-sm">E-commerce</span>
              <svg class="w-4 h-4 text-gray-500 group-hover:text-sinter-cyan" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
            </div>
            <span class="text-[10px] md:text-xs text-gray-400">Synthesize decentralized storefront logic & payment threads.</span>
          </button>

          <!-- Governance -->
          <button class="weave-btn flex-shrink-0 w-48 md:w-auto group relative flex flex-col p-3 rounded bg-white/5 border border-white/10 hover:border-sinter-purple/50 hover:bg-sinter-purple/5 transition-all text-left" data-type="governance">
            <div class="flex items-center justify-between mb-1">
              <span class="text-sinter-purple font-semibold tracking-wide text-sm">Governance Weave</span>
              <svg class="w-4 h-4 text-gray-500 group-hover:text-sinter-purple" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path></svg>
            </div>
            <span class="text-[10px] md:text-xs text-gray-400">Deploy voting consensus and treasury management nodes.</span>
          </button>

          <!-- AI Neural -->
          <button class="weave-btn flex-shrink-0 w-48 md:w-auto group relative flex flex-col p-3 rounded bg-white/5 border border-white/10 hover:border-green-400/50 hover:bg-green-400/5 transition-all text-left" data-type="ai">
            <div class="flex items-center justify-between mb-1">
              <span class="text-green-400 font-semibold tracking-wide text-sm">AI Neural Thread</span>
              <svg class="w-4 h-4 text-gray-500 group-hover:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
            </div>
            <span class="text-[10px] md:text-xs text-gray-400">Inject automated logic models into the lattice structure.</span>
          </button>
        </div>
      </aside>

      <!-- Employees / Operatives Section (Top Right) -->
      <div class="hidden md:flex absolute top-24 right-6 w-64 glass-panel rounded-xl border border-white/10 flex-col overflow-hidden pointer-events-auto backdrop-blur-md z-30 shadow-xl">
        <div class="bg-white/5 px-4 py-2 border-b border-white/10 flex items-center space-x-2">
          <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
          <h3 class="text-sm font-bold tracking-widest uppercase text-gray-300">Active Operatives</h3>
        </div>
        <div class="p-3 flex flex-col space-y-3 max-h-48 overflow-y-auto custom-scrollbar">
          <div class="flex items-center space-x-3">
            <div class="relative flex-shrink-0">
              <div class="w-8 h-8 rounded bg-gray-800 border border-green-500/50 flex items-center justify-center text-xs font-bold text-green-400">VX</div>
              <div class="absolute -bottom-1 -right-1 w-3 h-3 rounded-full bg-green-500 border-2 border-sinter-bg"></div>
            </div>
            <div>
              <div class="text-xs text-white font-bold">Architect V. Xylo</div>
              <div class="text-[10px] text-gray-400">Sector Alpha • Node Tech</div>
            </div>
          </div>
          <div class="flex items-center space-x-3">
            <div class="relative flex-shrink-0">
              <div class="w-8 h-8 rounded bg-gray-800 border border-red-500/50 flex items-center justify-center text-xs font-bold text-red-500">CK</div>
              <div class="absolute -bottom-1 -right-1 w-3 h-3 rounded-full bg-red-500 border-2 border-sinter-bg"></div>
            </div>
            <div>
              <div class="text-xs text-white font-bold">Cmdr. Kael</div>
              <div class="text-[10px] text-gray-400">Mil-Sec • Orbital Def.</div>
            </div>
          </div>
          <div class="flex items-center space-x-3">
            <div class="relative flex-shrink-0">
              <div class="w-8 h-8 rounded bg-gray-800 border border-orange-400/50 flex items-center justify-center text-xs font-bold text-orange-400">R7</div>
              <div class="absolute -bottom-1 -right-1 w-3 h-3 rounded-full bg-sinter-gold border-2 border-sinter-bg"></div>
            </div>
            <div>
              <div class="text-xs text-white font-bold">Weaver Bot R-7</div>
              <div class="text-[10px] text-gray-400">Automated Logistics</div>
            </div>
          </div>
        </div>
      </div>

      <!-- Left Controls (AI Agent & Codex) -->
      <div class="absolute top-20 left-4 md:top-auto md:bottom-6 md:left-6 flex flex-col space-y-3 pointer-events-auto z-30">
        <button id="deploy-ai-btn" class="glass-panel w-12 h-12 md:w-48 p-0 md:px-4 md:py-3 rounded-full md:rounded-xl border border-[rgba(168,85,247,0.4)] hover:border-purple-500 hover:bg-purple-500/10 text-xs font-bold tracking-widest uppercase transition-all flex items-center justify-center md:justify-start space-x-0 md:space-x-3 shadow-lg">
          <svg class="w-5 h-5 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path></svg>
          <span class="hidden md:inline text-purple-400">Deploy AI Agent</span>
        </button>

        <button id="open-codex-btn" class="glass-panel w-12 h-12 md:w-48 p-0 md:px-4 md:py-3 rounded-full md:rounded-xl border border-sinter-cyan/30 hover:border-sinter-cyan hover:bg-sinter-cyan/10 text-xs font-bold tracking-widest uppercase transition-all flex items-center justify-center md:justify-start space-x-0 md:space-x-3 shadow-lg">
          <svg class="w-5 h-5 text-sinter-cyan" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
          <span class="hidden md:inline text-sinter-cyan">Navier-Stokes Guide</span>
        </button>
      </div>

      <!-- Reset View Control (Top Right on Mobile, Bottom Center on Desktop) -->
      <div class="absolute top-20 right-4 md:top-auto md:bottom-6 md:left-1/2 md:transform md:-translate-x-1/2 flex space-x-4 pointer-events-auto z-30">
         <button id="reset-view-btn" class="glass-panel w-12 h-12 md:w-auto md:px-4 md:py-2 rounded-full border border-white/10 hover:border-white/30 text-xs font-bold tracking-widest uppercase transition-all flex items-center justify-center md:justify-start space-x-0 md:space-x-2 shadow-lg">
            <svg class="w-5 h-5 md:w-4 md:h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>
            <span class="hidden md:inline">Reset Alignment</span>
         </button>
      </div>

      <!-- The Fabric Preview (Bottom) -->
      <div class="absolute bottom-4 left-4 right-4 md:left-auto md:bottom-6 md:right-6 md:w-80 glass-panel rounded-xl border border-white/10 flex flex-col overflow-hidden pointer-events-auto backdrop-blur-md z-30 shadow-xl">
        <div class="bg-white/5 px-3 md:px-4 py-2 border-b border-white/10 flex items-center space-x-2">
          <div class="w-2 h-2 rounded-full bg-sinter-cyan animate-pulse"></div>
          <h3 class="text-xs md:text-sm font-bold tracking-widest uppercase text-gray-300">Fabric Preview</h3>
        </div>
        <div class="p-3 md:p-4 bg-black/40 h-20 md:h-40 overflow-y-auto font-mono text-[10px] md:text-xs flex flex-col space-y-1 md:space-y-2" id="console-output">
          <div class="text-gray-500">> Vortex Engine Initialization... OK</div>
          <div class="text-gray-500">> Awaiting syntropic input...</div>
        </div>
        <div class="bg-white/5 p-2 md:p-3 border-t border-white/10 flex justify-between items-center">
          <span class="text-[10px] md:text-xs text-gray-400">Harmonic Resonance: <span id="resonance-val" class="text-white font-bold">0%</span></span>
          <button id="deploy-btn" class="px-3 py-1 bg-white/10 hover:bg-sinter-cyan hover:text-black transition-colors rounded text-[10px] md:text-xs font-bold uppercase disabled:opacity-50 disabled:cursor-not-allowed" disabled>Deploy</button>
        </div>
      </div>

    </div>
  </div>

  <!-- Navier-Stokes Codex Modal -->
  <div id="codex-modal" class="fixed inset-0 z-[100] hidden items-center justify-center bg-black/80 backdrop-blur-md opacity-0 transition-opacity duration-300 pointer-events-none p-4">
    <div class="glass-panel border border-sinter-cyan/40 rounded-2xl max-w-2xl w-full p-5 md:p-8 relative scale-95 transition-transform duration-300 shadow-[0_0_60px_rgba(0,242,254,0.15)] max-h-full flex flex-col pointer-events-auto">
      <button id="close-codex-btn" class="absolute top-3 right-3 md:top-4 md:right-4 text-gray-400 hover:text-white transition-colors bg-white/5 p-2 rounded-full hover:bg-white/10">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
      </button>

      <h2 class="text-lg md:text-2xl font-bold text-sinter-cyan mb-1 tracking-widest uppercase flex items-center gap-2 md:gap-3">
        <svg class="w-5 h-5 md:w-6 md:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
        Navier-Stokes Weaving Codex
      </h2>
      <div class="text-[9px] md:text-xs text-gray-500 tracking-[0.2em] mb-4 md:mb-6 uppercase border-b border-white/10 pb-3 md:pb-4">AI Guide to Non-Euclidean Fluid Dynamics</div>

      <div class="space-y-4 md:space-y-6 text-gray-300 text-xs md:text-sm leading-relaxed overflow-y-auto custom-scrollbar pr-2 md:pr-4 flex-1">

        <div>
          <strong class="text-white block mb-1 text-sm md:text-base">Directive 1: Fluid Node Distribution</strong>
          <p class="text-gray-400">Traditional networks rely on rigid graphs. The Flux Weave utilizes Navier-Stokes fluid dynamics to route civilian and military nodes. Treat your data packets as a viscous fluid flowing through a non-Euclidean workspace.</p>
        </div>

        <div>
          <strong class="text-white block mb-1 text-sm md:text-base">Directive 2: Maintaining Laminar Flow</strong>
          <p class="text-gray-400">When weaving <span class="text-orange-400 font-semibold">Node Topology</span>, ensure your connection angles avoid turbulence. Sharp geometries cause data-shear. Deploy your AI Agent to automatically calculate the Reynolds number of your network—keeping it under 2000 to maintain laminar syntropy.</p>
        </div>

        <div>
          <strong class="text-white block mb-1 text-sm md:text-base">Directive 3: Military Compression Waves</strong>
          <p class="text-gray-400">Deploying <span class="text-red-500 font-semibold">Military Advanced</span> grids introduces high-pressure shocks into the lattice. The Navier-Stokes equations must be modified to account for compressibility (Mach > 0.3). Use your AI Agent to stabilize these shockwaves by anchoring them to robust supply chain braids.</p>
        </div>

        <div class="bg-[rgba(0,242,254,0.05)] p-3 md:p-5 rounded-lg border border-sinter-cyan/20">
          <h4 class="text-sinter-cyan font-bold mb-2 md:mb-3 uppercase text-[10px] md:text-xs tracking-widest flex items-center gap-2">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path></svg>
            Mathematical Core
          </h4>
          <code class="text-[10px] md:text-sm text-sinter-purple block font-mono bg-black/40 p-2 md:p-3 rounded mb-2 md:mb-3 border border-white/5">
            ρ(∂v/∂t + v·∇v) = -∇p + μ∇²v + f
          </code>
          <p class="text-[10px] md:text-xs text-gray-400">Adjust the viscosity (<span class="text-white italic">μ</span>) of your governance threads to balance network pressure (<span class="text-white italic">p</span>) against external military forces (<span class="text-white italic">f</span>). The AI Agent handles the tensor calculus automatically when deployed.</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Miniapps AI SDK -->
  <script src="https://miniapps.ai/sdk/miniapps-ai-v1.js"></script>
  <script src="main.js"></script>
</body>
</html>