diff --git a/client/src/App.vue b/client/src/App.vue
index c2da05a5..6a524db2 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -1,42 +1,79 @@
 <template>
   <div class="app">
-    <header class="top-nav">
-      <div class="nav-container">
-        <div class="logo">
-          <h1>{{ t('nav.companyName') }}</h1>
-          <span class="subtitle">{{ t('nav.subtitle') }}</span>
+    <aside class="sidebar">
+      <div class="sidebar-top">
+        <div class="sidebar-logo">
+          <div class="logo-icon">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+              <rect width="24" height="24" rx="6" fill="rgba(255,255,255,0.2)"/>
+              <path d="M7 8h10M7 12h10M7 16h6" stroke="white" stroke-width="2" stroke-linecap="round"/>
+            </svg>
+          </div>
+          <div class="logo-text">
+            <span class="logo-name">{{ t('nav.companyName') }}</span>
+            <span class="logo-subtitle">{{ t('nav.subtitle') }}</span>
+          </div>
         </div>
-        <nav class="nav-tabs">
-          <router-link to="/" :class="{ active: $route.path === '/' }">
-            {{ t('nav.overview') }}
+
+        <nav class="sidebar-nav">
+          <router-link to="/" :class="['nav-item', { active: $route.path === '/' }]">
+            <svg class="nav-icon" viewBox="0 0 20 20" fill="currentColor">
+              <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"/>
+            </svg>
+            <span>{{ t('nav.overview') }}</span>
           </router-link>
-          <router-link to="/inventory" :class="{ active: $route.path === '/inventory' }">
-            {{ t('nav.inventory') }}
+          <router-link to="/inventory" :class="['nav-item', { active: $route.path === '/inventory' }]">
+            <svg class="nav-icon" viewBox="0 0 20 20" fill="currentColor">
+              <path d="M4 3a2 2 0 100 4h12a2 2 0 100-4H4z"/>
+              <path fill-rule="evenodd" d="M3 8h14v7a2 2 0 01-2 2H5a2 2 0 01-2-2V8zm5 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z" clip-rule="evenodd"/>
+            </svg>
+            <span>{{ t('nav.inventory') }}</span>
           </router-link>
-          <router-link to="/orders" :class="{ active: $route.path === '/orders' }">
-            {{ t('nav.orders') }}
+          <router-link to="/orders" :class="['nav-item', { active: $route.path === '/orders' }]">
+            <svg class="nav-icon" viewBox="0 0 20 20" fill="currentColor">
+              <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"/>
+              <path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"/>
+            </svg>
+            <span>{{ t('nav.orders') }}</span>
           </router-link>
-          <router-link to="/spending" :class="{ active: $route.path === '/spending' }">
-            {{ t('nav.finance') }}
+          <router-link to="/spending" :class="['nav-item', { active: $route.path === '/spending' }]">
+            <svg class="nav-icon" viewBox="0 0 20 20" fill="currentColor">
+              <path d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4z"/>
+              <path fill-rule="evenodd" d="M18 9H2v5a2 2 0 002 2h12a2 2 0 002-2V9zM4 13a1 1 0 011-1h1a1 1 0 110 2H5a1 1 0 01-1-1zm5-1a1 1 0 100 2h1a1 1 0 100-2H9z" clip-rule="evenodd"/>
+            </svg>
+            <span>{{ t('nav.finance') }}</span>
           </router-link>
-          <router-link to="/demand" :class="{ active: $route.path === '/demand' }">
-            {{ t('nav.demandForecast') }}
+          <router-link to="/demand" :class="['nav-item', { active: $route.path === '/demand' }]">
+            <svg class="nav-icon" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd" d="M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z" clip-rule="evenodd"/>
+            </svg>
+            <span>{{ t('nav.demandForecast') }}</span>
           </router-link>
-          <router-link to="/reports" :class="{ active: $route.path === '/reports' }">
-            Reports
+          <router-link to="/reports" :class="['nav-item', { active: $route.path === '/reports' }]">
+            <svg class="nav-icon" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd" d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414A2 2 0 0015.414 6L12 2.586A2 2 0 0010.586 2H6zm2 10a1 1 0 10-2 0v3a1 1 0 102 0v-3zm2-3a1 1 0 011 1v5a1 1 0 11-2 0v-5a1 1 0 011-1zm4-1a1 1 0 10-2 0v7a1 1 0 102 0V8z" clip-rule="evenodd"/>
+            </svg>
+            <span>Reports</span>
           </router-link>
         </nav>
+      </div>
+
+      <div class="sidebar-bottom">
         <LanguageSwitcher />
+        <div class="sidebar-divider"></div>
         <ProfileMenu
           @show-profile-details="showProfileDetails = true"
           @show-tasks="showTasks = true"
         />
       </div>
-    </header>
-    <FilterBar />
-    <main class="main-content">
-      <router-view />
-    </main>
+    </aside>
+
+    <div class="main-wrapper">
+      <FilterBar />
+      <main class="main-content">
+        <router-view />
+      </main>
+    </div>
 
     <ProfileDetailsModal
       :is-open="showProfileDetails"
@@ -170,7 +207,7 @@ export default {
 
 body {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-  background: #f8fafc;
+  background: #f1f5f9;
   color: #1e293b;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -178,99 +215,143 @@ body {
 
 .app {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   min-height: 100vh;
 }
 
-.top-nav {
-  background: #ffffff;
-  border-bottom: 1px solid #e2e8f0;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
-  position: sticky;
+/* ─── Sidebar ─── */
+.sidebar {
+  width: 240px;
+  min-width: 240px;
+  background: linear-gradient(180deg, #1e3a8a 0%, #1e40af 100%);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  position: fixed;
   top: 0;
+  left: 0;
+  bottom: 0;
   z-index: 100;
+  overflow-y: auto;
 }
 
-.nav-container {
-  max-width: 1600px;
-  margin: 0 auto;
-  display: flex;
-  align-items: center;
-  padding: 0 2rem;
-  height: 70px;
+.sidebar-top {
+  padding: 1.25rem 0.75rem 0;
 }
 
-.nav-container > .nav-tabs {
-  margin-left: auto;
-  margin-right: 1rem;
+.sidebar-logo {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0 0.5rem;
+  margin-bottom: 1.5rem;
 }
 
-.nav-container > .language-switcher {
-  margin-right: 1rem;
+.logo-icon {
+  flex-shrink: 0;
 }
 
-.logo {
+.logo-text {
   display: flex;
-  align-items: baseline;
-  gap: 0.75rem;
+  flex-direction: column;
+  min-width: 0;
 }
 
-.logo h1 {
-  font-size: 1.375rem;
+.logo-name {
+  font-size: 1rem;
   font-weight: 700;
-  color: #0f172a;
+  color: #ffffff;
   letter-spacing: -0.025em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.subtitle {
-  font-size: 0.813rem;
-  color: #64748b;
+.logo-subtitle {
+  font-size: 0.688rem;
+  color: rgba(255, 255, 255, 0.5);
   font-weight: 400;
-  padding-left: 0.75rem;
-  border-left: 1px solid #e2e8f0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.nav-tabs {
+.sidebar-nav {
   display: flex;
-  gap: 0.25rem;
+  flex-direction: column;
+  gap: 2px;
 }
 
-.nav-tabs a {
-  padding: 0.625rem 1.25rem;
-  color: #64748b;
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.625rem 0.75rem;
+  color: rgba(255, 255, 255, 0.7);
   text-decoration: none;
   font-weight: 500;
-  font-size: 0.938rem;
-  border-radius: 6px;
-  transition: all 0.2s ease;
-  position: relative;
+  font-size: 0.875rem;
+  border-radius: 8px;
+  transition: all 0.15s ease;
 }
 
-.nav-tabs a:hover {
-  color: #0f172a;
-  background: #f1f5f9;
+.nav-item:hover {
+  color: #ffffff;
+  background: rgba(255, 255, 255, 0.1);
 }
 
-.nav-tabs a.active {
-  color: #2563eb;
-  background: #eff6ff;
+.nav-item.active {
+  color: #ffffff;
+  background: rgba(255, 255, 255, 0.18);
+  font-weight: 600;
 }
 
-.nav-tabs a.active::after {
-  content: '';
-  position: absolute;
-  bottom: -1px;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: #2563eb;
+.nav-icon {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  opacity: 0.85;
+}
+
+.nav-item.active .nav-icon {
+  opacity: 1;
+}
+
+/* ─── Sidebar Bottom ─── */
+.sidebar-bottom {
+  padding: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.sidebar-divider {
+  height: 1px;
+  background: rgba(255, 255, 255, 0.12);
+  margin: 0.25rem 0;
+}
+
+.sidebar-bottom :deep(.language-switcher) {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.sidebar-bottom :deep(.profile-menu) {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+/* ─── Main Content ─── */
+.main-wrapper {
+  flex: 1;
+  margin-left: 240px;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
 }
 
 .main-content {
   flex: 1;
-  max-width: 1600px;
+  max-width: 1400px;
   width: 100%;
-  margin: 0 auto;
   padding: 1.5rem 2rem;
 }
 
diff --git a/client/src/components/FilterBar.vue b/client/src/components/FilterBar.vue
index 9e12b694..f99d3845 100644
--- a/client/src/components/FilterBar.vue
+++ b/client/src/components/FilterBar.vue
@@ -102,17 +102,16 @@ export default {
 
 <style scoped>
 .filters-bar {
-  background: #f8fafc;
+  background: #ffffff;
   border-bottom: 1px solid #e2e8f0;
   padding: 0.75rem 0;
   position: sticky;
-  top: 70px;
+  top: 0;
   z-index: 90;
 }
 
 .filters-container {
-  max-width: 1600px;
-  margin: 0 auto;
+  max-width: 1400px;
   padding: 0 2rem;
   display: flex;
   align-items: center;
diff --git a/docs/architecture.html b/docs/architecture.html
new file mode 100644
index 00000000..8aa3f8a0
--- /dev/null
+++ b/docs/architecture.html
@@ -0,0 +1,267 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Inventory Management - Architecture Overview</title>
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #0f172a; color: #e2e8f0; padding: 40px; }
+  h1 { font-size: 28px; font-weight: 700; margin-bottom: 8px; color: #f8fafc; }
+  h2 { font-size: 18px; font-weight: 600; margin-bottom: 16px; color: #94a3b8; text-transform: uppercase; letter-spacing: 1px; }
+  h3 { font-size: 15px; font-weight: 600; margin-bottom: 10px; color: #cbd5e1; }
+  .subtitle { color: #64748b; font-size: 14px; margin-bottom: 40px; }
+  .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; margin-bottom: 40px; }
+  .card { background: #1e293b; border: 1px solid #334155; border-radius: 12px; padding: 24px; }
+  .card-accent-blue { border-top: 3px solid #3b82f6; }
+  .card-accent-green { border-top: 3px solid #22c55e; }
+  .card-accent-amber { border-top: 3px solid #f59e0b; }
+  .card-accent-purple { border-top: 3px solid #a855f7; }
+  .tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; margin-right: 4px; margin-bottom: 4px; }
+  .tag-blue { background: #1e3a5f; color: #93c5fd; }
+  .tag-green { background: #14532d; color: #86efac; }
+  .tag-amber { background: #451a03; color: #fcd34d; }
+  .tag-purple { background: #3b0764; color: #d8b4fe; }
+  .tag-slate { background: #334155; color: #94a3b8; }
+  ul { list-style: none; padding: 0; }
+  ul li { padding: 4px 0; font-size: 13px; color: #94a3b8; }
+  ul li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 8px; background: #475569; }
+  .flow { display: flex; align-items: stretch; gap: 0; margin-bottom: 40px; }
+  .flow-step { flex: 1; background: #1e293b; border: 1px solid #334155; padding: 20px; position: relative; text-align: center; }
+  .flow-step:first-child { border-radius: 12px 0 0 12px; }
+  .flow-step:last-child { border-radius: 0 12px 12px 0; }
+  .flow-arrow { display: flex; align-items: center; justify-content: center; font-size: 20px; color: #475569; background: #1e293b; border-top: 1px solid #334155; border-bottom: 1px solid #334155; padding: 0 4px; }
+  .flow-step h3 { margin-bottom: 8px; }
+  .flow-step p { font-size: 12px; color: #64748b; }
+  .flow-label { font-size: 11px; color: #3b82f6; font-weight: 600; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
+  .endpoints { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+  .endpoint { font-size: 12px; font-family: 'SF Mono', 'Fira Code', monospace; padding: 6px 10px; background: #0f172a; border-radius: 6px; color: #94a3b8; }
+  .endpoint .method { font-weight: 700; margin-right: 4px; }
+  .method-get { color: #22c55e; }
+  .method-post { color: #3b82f6; }
+  .method-patch { color: #f59e0b; }
+  .method-delete { color: #ef4444; }
+  .full-width { grid-column: 1 / -1; }
+  .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 40px; }
+  .file-tree { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12px; line-height: 1.8; color: #94a3b8; }
+  .file-tree .dir { color: #3b82f6; }
+  .file-tree .file { color: #cbd5e1; }
+  .file-tree .desc { color: #475569; }
+  .section { margin-bottom: 40px; }
+</style>
+</head>
+<body>
+
+<h1>Factory Inventory Management System</h1>
+<p class="subtitle">Architecture Overview &mdash; Vue 3 + FastAPI + JSON Data Store</p>
+
+<!-- Tech Stack -->
+<div class="section">
+  <h2>Tech Stack</h2>
+  <div class="grid">
+    <div class="card card-accent-blue">
+      <h3>Frontend</h3>
+      <div style="margin-bottom: 12px;">
+        <span class="tag tag-blue">Vue 3</span>
+        <span class="tag tag-blue">Composition API</span>
+        <span class="tag tag-blue">Vue Router 4</span>
+        <span class="tag tag-blue">Axios</span>
+        <span class="tag tag-blue">Vite</span>
+      </div>
+      <ul>
+        <li>7 view components (pages)</li>
+        <li>9 reusable components</li>
+        <li>3 composables (filters, auth, i18n)</li>
+        <li>i18n support (English / Japanese)</li>
+        <li>Dev server on port 3000</li>
+      </ul>
+    </div>
+    <div class="card card-accent-green">
+      <h3>Backend</h3>
+      <div style="margin-bottom: 12px;">
+        <span class="tag tag-green">FastAPI</span>
+        <span class="tag tag-green">Pydantic</span>
+        <span class="tag tag-green">Python 3.14</span>
+        <span class="tag tag-green">Uvicorn</span>
+      </div>
+      <ul>
+        <li>15+ REST API endpoints</li>
+        <li>Pydantic model validation</li>
+        <li>In-memory data filtering</li>
+        <li>CORS enabled (dev mode)</li>
+        <li>API server on port 8001</li>
+      </ul>
+    </div>
+    <div class="card card-accent-amber">
+      <h3>Data Layer</h3>
+      <div style="margin-bottom: 12px;">
+        <span class="tag tag-amber">JSON Files</span>
+        <span class="tag tag-amber">In-Memory</span>
+        <span class="tag tag-amber">Mock Data</span>
+      </div>
+      <ul>
+        <li>7 JSON data files</li>
+        <li>Loaded at server startup</li>
+        <li>No database (demo app)</li>
+        <li>Inventory, orders, spending, demand, backlog</li>
+        <li>Changes don't persist on restart</li>
+      </ul>
+    </div>
+  </div>
+</div>
+
+<!-- Data Flow -->
+<div class="section">
+  <h2>Data Flow</h2>
+  <div class="flow">
+    <div class="flow-step">
+      <div class="flow-label">User Interface</div>
+      <h3>FilterBar</h3>
+      <p>Time Period, Warehouse,<br>Category, Status</p>
+    </div>
+    <div class="flow-arrow">&rarr;</div>
+    <div class="flow-step">
+      <div class="flow-label">State</div>
+      <h3>useFilters()</h3>
+      <p>Composable with shared<br>reactive refs</p>
+    </div>
+    <div class="flow-arrow">&rarr;</div>
+    <div class="flow-step">
+      <div class="flow-label">HTTP Client</div>
+      <h3>api.js</h3>
+      <p>Axios GET/POST with<br>query parameters</p>
+    </div>
+    <div class="flow-arrow">&rarr;</div>
+    <div class="flow-step">
+      <div class="flow-label">API Server</div>
+      <h3>FastAPI</h3>
+      <p>Filter + validate<br>with Pydantic</p>
+    </div>
+    <div class="flow-arrow">&rarr;</div>
+    <div class="flow-step">
+      <div class="flow-label">Storage</div>
+      <h3>JSON Files</h3>
+      <p>7 files loaded into<br>memory arrays</p>
+    </div>
+  </div>
+</div>
+
+<!-- API Endpoints & Pages -->
+<div class="section">
+  <h2>API Endpoints</h2>
+  <div class="two-col">
+    <div class="card">
+      <h3>Inventory & Orders</h3>
+      <div style="display: flex; flex-direction: column; gap: 6px;">
+        <div class="endpoint"><span class="method method-get">GET</span>/api/inventory?warehouse&amp;category</div>
+        <div class="endpoint"><span class="method method-get">GET</span>/api/inventory/{id}</div>
+        <div class="endpoint"><span class="method method-get">GET</span>/api/orders?warehouse&amp;category&amp;status&amp;month</div>
+        <div class="endpoint"><span class="method method-get">GET</span>/api/orders/{id}</div>
+        <div class="endpoint"><span class="method method-get">GET</span>/api/demand</div>
+        <div class="endpoint"><span class="method method-get">GET</span>/api/backlog</div>
+      </div>
+    </div>
+    <div class="card">
+      <h3>Dashboard & Spending</h3>
+      <div style="display: flex; flex-direction: column; gap: 6px;">
+        <div class="endpoint"><span class="method method-get">GET</span>/api/dashboard/summary</div>
+        <div class="endpoint"><span class="method method-get">GET</span>/api/spending/summary</div>
+        <div class="endpoint"><span class="method method-get">GET</span>/api/spending/monthly</div>
+        <div class="endpoint"><span class="method method-get">GET</span>/api/spending/categories</div>
+        <div class="endpoint"><span class="method method-get">GET</span>/api/spending/transactions</div>
+        <div class="endpoint"><span class="method method-get">GET</span>/api/reports/quarterly</div>
+      </div>
+    </div>
+    <div class="card">
+      <h3>Tasks & Purchase Orders</h3>
+      <div style="display: flex; flex-direction: column; gap: 6px;">
+        <div class="endpoint"><span class="method method-get">GET</span>/api/tasks</div>
+        <div class="endpoint"><span class="method method-post">POST</span>/api/tasks</div>
+        <div class="endpoint"><span class="method method-patch">PATCH</span>/api/tasks/{id}</div>
+        <div class="endpoint"><span class="method method-delete">DEL</span>/api/tasks/{id}</div>
+        <div class="endpoint"><span class="method method-post">POST</span>/api/purchase-orders</div>
+        <div class="endpoint"><span class="method method-get">GET</span>/api/purchase-orders/{id}</div>
+      </div>
+    </div>
+    <div class="card">
+      <h3>Frontend Pages</h3>
+      <div style="display: flex; flex-direction: column; gap: 6px;">
+        <div class="endpoint"><span class="method" style="color:#f8fafc;">/</span> Dashboard &mdash; KPIs, charts, order health</div>
+        <div class="endpoint"><span class="method" style="color:#f8fafc;">/inventory</span> Stock levels &amp; search</div>
+        <div class="endpoint"><span class="method" style="color:#f8fafc;">/orders</span> Order tracking &amp; status</div>
+        <div class="endpoint"><span class="method" style="color:#f8fafc;">/demand</span> Forecasts &amp; trends</div>
+        <div class="endpoint"><span class="method" style="color:#f8fafc;">/spending</span> Financial analytics</div>
+        <div class="endpoint"><span class="method" style="color:#f8fafc;">/reports</span> Quarterly &amp; monthly</div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Key Files -->
+<div class="section">
+  <h2>Key Files</h2>
+  <div class="two-col">
+    <div class="card">
+      <h3>Client</h3>
+      <div class="file-tree">
+        <span class="dir">client/src/</span><br>
+        &nbsp;&nbsp;<span class="file">main.js</span> <span class="desc">&mdash; App init, router config</span><br>
+        &nbsp;&nbsp;<span class="file">api.js</span> <span class="desc">&mdash; 18 API methods (Axios)</span><br>
+        &nbsp;&nbsp;<span class="file">App.vue</span> <span class="desc">&mdash; Root layout, nav, filters</span><br>
+        &nbsp;&nbsp;<span class="dir">views/</span> <span class="desc">&mdash; 7 page components</span><br>
+        &nbsp;&nbsp;<span class="dir">components/</span> <span class="desc">&mdash; 9 reusable components</span><br>
+        &nbsp;&nbsp;<span class="dir">composables/</span><br>
+        &nbsp;&nbsp;&nbsp;&nbsp;<span class="file">useFilters.js</span> <span class="desc">&mdash; Shared filter state</span><br>
+        &nbsp;&nbsp;&nbsp;&nbsp;<span class="file">useAuth.js</span> <span class="desc">&mdash; Mock user &amp; tasks</span><br>
+        &nbsp;&nbsp;&nbsp;&nbsp;<span class="file">useI18n.js</span> <span class="desc">&mdash; EN/JA translations</span><br>
+      </div>
+    </div>
+    <div class="card">
+      <h3>Server</h3>
+      <div class="file-tree">
+        <span class="dir">server/</span><br>
+        &nbsp;&nbsp;<span class="file">main.py</span> <span class="desc">&mdash; FastAPI app, all endpoints</span><br>
+        &nbsp;&nbsp;<span class="file">mock_data.py</span> <span class="desc">&mdash; JSON loader</span><br>
+        &nbsp;&nbsp;<span class="dir">data/</span><br>
+        &nbsp;&nbsp;&nbsp;&nbsp;<span class="file">inventory.json</span> <span class="desc">&mdash; 20+ items with SKUs</span><br>
+        &nbsp;&nbsp;&nbsp;&nbsp;<span class="file">orders.json</span> <span class="desc">&mdash; 100+ orders, 12 months</span><br>
+        &nbsp;&nbsp;&nbsp;&nbsp;<span class="file">spending.json</span> <span class="desc">&mdash; Summary + monthly</span><br>
+        &nbsp;&nbsp;&nbsp;&nbsp;<span class="file">demand_forecasts.json</span> <span class="desc">&mdash; Trend data</span><br>
+        &nbsp;&nbsp;&nbsp;&nbsp;<span class="file">backlog_items.json</span> <span class="desc">&mdash; Delayed orders</span><br>
+        &nbsp;&nbsp;&nbsp;&nbsp;<span class="file">transactions.json</span> <span class="desc">&mdash; Recent transactions</span><br>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Architecture Pattern -->
+<div class="section">
+  <h2>Architecture Pattern</h2>
+  <div class="card" style="text-align: center; padding: 32px;">
+    <div style="display: flex; justify-content: center; align-items: center; gap: 40px; flex-wrap: wrap;">
+      <div style="background: #1e3a5f; border: 2px solid #3b82f6; border-radius: 12px; padding: 20px 32px;">
+        <div style="font-size: 13px; color: #93c5fd; font-weight: 600;">FRONTEND</div>
+        <div style="font-size: 18px; font-weight: 700; color: #f8fafc; margin: 4px 0;">Vue 3 SPA</div>
+        <div style="font-size: 12px; color: #64748b;">:3000</div>
+      </div>
+      <div style="font-size: 28px; color: #475569;">&harr;</div>
+      <div style="background: #14532d; border: 2px solid #22c55e; border-radius: 12px; padding: 20px 32px;">
+        <div style="font-size: 13px; color: #86efac; font-weight: 600;">BACKEND</div>
+        <div style="font-size: 18px; font-weight: 700; color: #f8fafc; margin: 4px 0;">FastAPI</div>
+        <div style="font-size: 12px; color: #64748b;">:8001</div>
+      </div>
+      <div style="font-size: 28px; color: #475569;">&harr;</div>
+      <div style="background: #451a03; border: 2px solid #f59e0b; border-radius: 12px; padding: 20px 32px;">
+        <div style="font-size: 13px; color: #fcd34d; font-weight: 600;">DATA</div>
+        <div style="font-size: 18px; font-weight: 700; color: #f8fafc; margin: 4px 0;">JSON Files</div>
+        <div style="font-size: 12px; color: #64748b;">In-Memory</div>
+      </div>
+    </div>
+    <div style="margin-top: 24px; font-size: 13px; color: #64748b;">
+      Composables manage shared state &bull; Axios handles HTTP &bull; Pydantic validates responses &bull; No database required
+    </div>
+  </div>
+</div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/hackathon/submissions/team_matt-johnson/CLAUDE.md b/hackathon/submissions/team_matt-johnson/CLAUDE.md
new file mode 100644
index 00000000..bc03437b
--- /dev/null
+++ b/hackathon/submissions/team_matt-johnson/CLAUDE.md
@@ -0,0 +1,243 @@
+# WorldView OSS
+
+## Critical: Tailwind CSS v4 + Next.js 16 Turbopack
+- MUST have `postcss.config.mjs` with `@tailwindcss/postcss` plugin — without it, `@import "tailwindcss"` produces ZERO utility classes (no error, just silently broken)
+- MUST pin `tailwindcss@4.0.7` and `@tailwindcss/postcss@4.0.7` — v4.1.18+ crashes Turbopack
+- Next.js 16 is Turbopack-only (no `--no-turbopack` flag exists)
+- If Tailwind classes aren't working, check postcss.config.mjs first
+
+## Architecture
+- 3-column flexbox layout: left panel (220px) | circular globe viewport | right panel (280px)
+- Center column is `flex-col`: globe viewport on top, TimelineSlider below
+- CesiumJS globe loaded via `next/dynamic` with `ssr: false` — Cesium cannot run server-side
+- State: Zustand store at `stores/worldview-store.ts`
+- **10 data layers**: flights, satellites, disasters, asteroids, weather, cameras, livestreams, news, militaryActions, carparks
+  - 3 expandable with sub-filters: flights (Regular/ISS), disasters (6 types), militaryActions (5 types)
+- View modes (EO/FLIR/CRT/NV): CSS filters in `components/effects/ViewModeFilter.tsx`
+- SVG filter `<defs>` (e.g. FLIR) must be rendered outside `overflow:hidden` containers — use `FlirFilterDefs` export at page level
+- Globe is clipped to circle via `.scope-viewport { border-radius: 50%; overflow: hidden }` in globals.css
+
+## Timeline / Historical Data System
+- **Timeline slider** beneath the globe viewport: `components/hud/TimelineSlider.tsx` + `CalendarPicker.tsx`
+- **Simulation state** in Zustand: `simulationDate`, `simulationHour`, `simulationMinute`, `isLive`
+  - Setters (`setSimulationDate`, `setSimulationTime`) sync CesiumJS clock via `Cesium.JulianDate.fromDate()`
+  - `resetToLive()` snaps back to current time and resumes CesiumJS clock animation
+- **TimelineSlider uses `mounted` state** to suppress hydration mismatch from `Date.now()` drift between SSR and client
+- **Data hooks** (`useNews`, `useDisasters`) check `isLive`:
+  - Live mode → `/api/news` (graph + RSS + Reddit), `/api/disasters`
+  - Historical mode → `/api/news/historical?date=YYYYMMDD&hour=HH`, `/api/disasters?date=YYYYMMDD`
+  - Both hooks use `AbortController` to cancel in-flight requests on cleanup
+- **Flights, cameras, livestreams, militaryActions** are always live (no historical data available)
+
+## JanusGraph + Cassandra (Knowledge Graph)
+- `docker-compose.yml` — Cassandra 4.1.7 + JanusGraph 1.0.0 (ports configurable via env vars)
+  - JanusGraph 1.0.0 requires `JANUS_PROPS_TEMPLATE=cql` (NOT `cassandra`)
+- `lib/graph/client.ts` — Gremlin client with **3s connection timeout** and **1min backoff** on failure
+  - Uses `mimeType: "application/vnd.gremlin-v3.0+json"` (GraphSON) — GraphBinary fails with JanusGraph custom types
+  - Uses `gremlin.process.traversal().with_(conn)` (v3.8 API) — NOT `graph.traversal().withRemote(conn)` (v3.6)
+  - If JanusGraph isn't running, graph queries fail fast and don't retry for 60s — app still works with RSS/Reddit only
+- `lib/graph/schema.ts` — Graph schema: article, person, organization, location, theme vertices + relationship edges
+- `scripts/init-graph-schema.ts` — Idempotent schema init (`npm run init-schema`)
+- `lib/graph/queries.ts` — Query functions: `getArticlesByDateRange`, `getArticlesByLocation`, `getPersonNetwork`, `getThemeTrends`
+- `types/gremlin.d.ts` — TypeScript declarations for the `gremlin` package (no `@types/gremlin` available)
+  - `Graph` lives in `gremlin.structure`, NOT `gremlin.driver`
+
+## GDELT GKG Ingestion Pipeline
+- `lib/graph/gkg-parser.ts` — Parses GDELT GKG 2.0 27-column TSV files (handles `\r\n` line endings)
+- `lib/graph/gkg-downloader.ts` — Downloads + extracts ZIP archives via `adm-zip` (NOT gzip — GDELT uses standard ZIP format)
+- `lib/graph/gkg-loader.ts` — Batch upserts into JanusGraph with get-or-create (upsert) pattern
+- `scripts/ingest-gkg.ts` — CLI: `--daily`, `--latest`, `--backfill --from YYYYMMDD --to YYYYMMDD`
+- GDELT URLs use HTTPS (configured in `lib/constants.ts`)
+- Cache/cursor paths configurable via `GKG_CACHE_DIR` and `GKG_CURSOR_PATH` env vars
+
+## News Data Flow (NO external GDELT Doc API)
+- `/api/news` — Primary endpoint: JanusGraph (last 4h) + RSS + Reddit. **Does NOT call GDELT Doc API** (removed due to chronic timeouts)
+- `/api/news/realtime` — Same sources as `/api/news`, plus DDG as supplemental (often rate-limited)
+- `/api/news/historical` — JanusGraph only, queries ±30min window around requested time
+- `lib/api/duckduckgo.ts` — DDG results have `NaN` lat/lon (no geo data); callers must filter accordingly
+- RSS feeds: BBC Middle East, BBC World, Al Jazeera, Jerusalem Post, France 24 ME, PressTV Iran
+  - Tehran Times removed (307 redirect loop), replaced with PressTV
+  - Arab News removed (Cloudflare blocked), replaced with France 24 Middle East
+
+## Military Actions Layer
+- `/api/military` — GDELT GEO API with `theme:MILITARY` + conflict keyword queries
+- `hooks/useMilitary.ts` — Polls every 5 min, stores in Zustand `militaryActions`
+- `components/layers/MilitaryLayer.tsx` — Red/orange dots on globe, click for details
+- Sub-filters in sidebar: Airstrikes, Missile Strikes, Ground Ops, Naval Ops, Other
+- GDELT GEO API returns geocoded locations with mention counts, no auth required
+- Category classification uses keyword matching on article titles
+
+## Agent Swarm System (Ollama)
+- `lib/agents/` — Agent swarm infrastructure for AI-powered intelligence gathering
+- `lib/agents/ollama-client.ts` — Ollama connection with 3s timeout, 1min backoff (same pattern as JanusGraph)
+- `lib/agents/agents.ts` — Agent definitions: News Scout, Military Analyst, Disaster Monitor, GEOINT Analyst
+- `lib/agents/swarm.ts` — Legacy orchestrator (runs all agents sequentially with big context)
+- `/api/agents` — GET for status, POST `{ "action": "run" }` to trigger legacy swarm
+- Preferred models: `sam860/lfm2:8b` (5.9GB, fits 12GB VRAM) > `lfm2:24b` > `lfm2:24b-a2b`
+  - **Ollama stores model names lowercase** — `sam860/lfm2:8b` not `sam860/LFM2:8b`
+  - **Avoid qwen3 on CPU** — thinking mode makes even tiny prompts take 60s+
+  - **Avoid `qwen3.5:27b` for tool calling** — broken renderer in Ollama (issue #14493)
+- Graceful degradation: app works fully without Ollama, agents just return empty results
+
+## Mission Control (Micro-Agent Pipeline)
+- Full-viewport modal (`components/mission-control/`) for geographic agent deployment
+- **Pipeline**: Pin-drop → web search → micro-agent LLM extraction → streaming results
+- `lib/agents/mission.ts` — Mission executor with pause/resume/cancel per agent
+- `lib/agents/micro-agents.ts` — Per-item LLM extraction (~400 char input, 128 token output, 20s timeout)
+  - **LLM speed probe** (15s) auto-detects GPU vs CPU at mission start
+  - GPU path: LLM extraction at ~150 tok/s (~0.8s per item, ~20s for 24 items)
+  - CPU fallback: direct extraction from search data (instant, lower confidence)
+- `lib/agents/geo-context.ts` — Web search (DDG) + RSS/USGS fallback for context gathering
+  - DDG rate-limits aggressively — RSS fallback (BBC, Al Jazeera, USGS) kicks in automatically
+  - Reverse geocodes deployment coords via Nominatim to build location-targeted queries
+- `lib/agents/mission-emitter.ts` — EventEmitter singleton (globalThis pattern) bridging executor → SSE
+  - Emits: `log`, `agent_status`, `phase`, `chat_token`, `chat_action` event types
+- `app/api/agents/mission/route.ts` — REST: deploy, abort, pause, resume, cancel, skip, set_prompt
+- `app/api/agents/mission/stream/route.ts` — SSE endpoint for live log/status/chat streaming
+- `hooks/useMissionControl.ts` — Client hook: SSE connection, API actions, agent state management
+  - **SSE is a module-level singleton** — multiple components call `useMissionControl()` but only one EventSource is created (ref-counted). Without this, tokens stream N times (once per hook instance)
+- `components/layers/DeploymentLayer.tsx` — Globe pin + radius circle (CesiumJS entities) + drag/resize
+- **globalThis singleton pattern** required for `mission-emitter.ts`, `mission.ts`, and `specialist-chat.ts` — without it, Turbopack creates separate module instances and SSE events never reach the client
+- Zustand `missionControl` slice: deploymentMode, deploymentArea, agentStates, missionLogs, missionResults, chatMessages, chatActive, chatGenerating, repositionMode
+  - `addMissionLog` and `addChatMessage` deduplicate by ID (SSE reconnects can replay events)
+
+## Specialist Chat (Conversational Agent Orchestrator)
+- `lib/agents/specialist-chat.ts` — Server-side orchestrator with ReAct-lite action parsing
+  - **globalThis singleton** for conversation history (survives Turbopack HMR)
+  - System prompt describes 4 available agents + deployment area context + action block syntax
+  - LLM emits `<<ACTION:dispatch|agent=news-scout>>` markers → orchestrator detects, pauses stream, dispatches agent pipeline, injects results, resumes generation for synthesis
+  - **Fallback**: if model ignores action syntax, keyword-based intent detection auto-dispatches agents
+  - Context budget: ~3000 tokens (20 message history + system prompt + agent results) fits lfm2:8b's 8192 window
+- `lib/agents/specialist-types.ts` — `ChatMessage`, `ChatAction` types
+- `app/api/agents/mission/chat/route.ts` — POST (message or abort), GET (history), DELETE (clear)
+- `components/mission-control/ChatPanel.tsx` — Chat UI with auto-scroll, SEND/STOP/CLEAR buttons
+- `components/mission-control/ChatMessage.tsx` — Message renderer with `react-markdown` for HUD-styled markdown
+  - Agent result cards show clickable source URLs, category badges, confidence, coordinates
+  - Results default to expanded so links are immediately visible
+- Toggle: SPECIALIST / LOG VIEW button in `MissionHeader.tsx` switches right panel between chat and log+results
+- Chat requires Ollama online — shows "SPECIALIST OFFLINE" when unavailable
+
+## Draggable / Resizable Deployment Zone
+- `components/layers/DeploymentLayer.tsx` — Full drag/resize system using `ScreenSpaceEventHandler`
+  - **Move**: drag center pin (entity tagged with `_deploymentRole = "center-pin"`)
+  - **Resize**: drag circle edge (haversine distance ≈ radius, ±15% tolerance, min 20km)
+  - **Scroll wheel**: adjust radius while hovering over zone (0.9x/1.1x per tick, clamped 10-5000km)
+  - **Hover feedback**: cursor changes (grab/ew-resize) + entity highlighting (brighter green, larger pin)
+  - Camera controls disabled during drag (`screenSpaceCameraController.enableRotate = false` etc.)
+  - **Stage-then-confirm**: all adjustments update a local `pendingAreaRef` (visual entity updates only). Zustand `setDeploymentArea()` only called when user clicks CONFIRM POSITION
+  - Escape cancels active drag or exits reposition mode
+- REPOSITION button in `MissionHeader.tsx` (configuring phase only) → collapses modal to bottom bar
+- `MissionControlModal.tsx` collapsed bar: shows coordinates, radius controls, CONFIRM/CANCEL, drag instructions
+- CONFIRM commits `pendingAreaRef` to Zustand and restores full modal
+
+## GDELT API — HTTPS vs HTTP
+- **HTTPS fails from Node.js** for `data.gdeltproject.org` and `api.gdeltproject.org` with TLS cert mismatch (hosts redirect to Google Cloud Storage which serves `*.storage.googleapis.com` certs)
+- **All GDELT URLs must use HTTP** from server-side code — `curl` works with HTTPS but Node.js `fetch` does not
+- This affects: `lib/constants.ts` (GKG download URLs), `app/api/military/route.ts`, `lib/agents/swarm.ts`
+
+## Shared Constants
+- `lib/constants.ts` — All configurable values: polling intervals, cache TTLs, GDELT URLs, entity caps, query defaults, dedup thresholds
+- When adding new configurable values, add them here instead of using inline magic numbers
+
+## Commands
+- `npm run dev` — starts dev server (check output for actual port, often not 3000)
+- `npm run build` — production build, use to verify compilation
+- `npm run init-schema` — initialize JanusGraph schema (requires `docker compose up -d`)
+- `npm run ingest-gkg` — daily GKG ingestion (last 24h or since cursor)
+- `npm run ingest-gkg-backfill` — historical backfill (add `-- --from YYYYMMDD --to YYYYMMDD`)
+- If dev server won't start: `rm -rf .next` to clear cache and stale lock files
+
+## CCTV Camera Feeds
+- Camera data: `lib/api/cameras.ts` — aggregates 3,000+ cameras from 10+ cities via live APIs
+- `getAllCameras()` uses `Promise.allSettled` — one source failure won't block others
+- Two reusable generic fetchers:
+  - `fetchArcGISCameras()` — for ArcGIS FeatureServer endpoints (WSDOT, IDOT/Travel Midwest)
+  - `fetchIteris511Cameras()` — for Iteris 511 DataTables endpoints (NV Roads, FL511)
+    - `latLng.geography` can be a string OR object `{ wellKnownText: "POINT (...)" }` — code handles both
+- City sources: Caltrans (CA), Austin, Houston TranStar, WSDOT (Seattle), IDOT (Chicago), NV Roads (Las Vegas), FL511 (Orlando), NYC DOT, UK Highways, HK Transport
+- Houston TranStar is the only hardcoded fallback (no JSON API, only HTML scraping)
+- Images proxied through `/api/cameras/feed?id={id}` to avoid CORS — never load external camera URLs directly in `<img>` tags
+- Feed proxy passes through actual Content-Type (some sources return PNG, not JPEG)
+- Detection overlay (canvas) should only render when the feed image has loaded (`onLoad` → `imgLoaded` state)
+
+## CCTV Clustering (3-tier progressive rendering)
+- `lib/camera-clusters.ts` — `buildCityClusters()` groups by city, merges within 80km (Caltrans granular `nearbyPlace` → super-clusters)
+- Three tiers by altitude in `components/layers/CameraLayer.tsx`:
+  - **GLOBAL** (>2,000km): One cluster dot per city with count label (~25-35 entities)
+  - **REGIONAL** (200km–2,000km): Individual camera dots for cities in viewport only
+  - **LOCAL** (<200km): Camera dots + feed preview billboards with 60s refresh
+- Entities are lazily created/destroyed per viewport — not all 3,000+ at once
+- Cluster click → `flyTo(center, 500km)` → seamless tier transition
+- Shared camera state in Zustand store (`cameras` / `setCameras`) — CameraLayer fetches, CameraList reads
+
+## Singapore Carparks Layer (Hackathon Addition)
+- `/api/carparks` — LTA DataMall `CarParkAvailabilityv2` with `AccountKey` header
+- `lib/api/carparks.ts` — Fetcher with pagination ($skip), Location string parsing ("lat lon")
+- `hooks/useCarparks.ts` — 60s polling interval
+- `components/layers/CarParkLayer.tsx` — Point entities (green/amber/red by availability) + 500m ellipses (heatmap)
+- Thresholds: >100 lots = green, 20-100 = amber, <20 = red
+- `distanceDisplayCondition`: points visible below 500km, labels below 50km, ellipses below 300km
+- Requires `LTA_DATAMALL_KEY` in `.env.local` (free from datamall.lta.gov.sg)
+
+## Adding New Data Layers
+Follow the 6-step pattern (all existing layers follow this):
+1. Add types to `types/index.ts` (LayerKey, LayerState, data interface, optional category type)
+2. Create data hook in `hooks/` (fetch + poll + AbortController cleanup)
+3. Update Zustand store (`stores/worldview-store.ts`) — data array + setter + optional sub-filters
+4. Create layer component in `components/layers/` (CustomDataSource + click handler + entities)
+5. Add to `components/hud/Sidebar.tsx` (layer toggle + optional expandable sub-filters)
+6. Add to `components/Globe.tsx` (conditional render) + `components/hud/DataFeed.tsx` (right panel)
+
+## Adding New CCTV City Sources
+
+Most US state DOTs use one of two platforms. Check which one before writing any code:
+
+**1. ArcGIS FeatureServer** (used by WSDOT, IDOT, many others)
+- Browse `https://services2.arcgis.com/` or the state DOT's GIS portal for a traffic cameras layer
+- Test the query endpoint in a browser — append `?where=1=1&outFields=*&f=json&outSR=4326&returnGeometry=true&resultRecordCount=5`
+- Identify the field names for camera title and snapshot URL (varies per DOT)
+- Add a wrapper that calls `fetchArcGISCameras()` with the endpoint URL, a bounding box, and the field names:
+```ts
+async function fetchDenverCameras(): Promise<Camera[]> {
+  return fetchArcGISCameras({
+    url: "https://example.arcgis.com/.../FeatureServer/0/query",
+    bbox: [-105.1, 39.6, -104.8, 39.9], // [minLon, minLat, maxLon, maxLat]
+    idPrefix: "den",
+    city: "Denver",
+    nameField: "CameraName",   // inspect the JSON to find these
+    imageField: "SnapshotURL",
+    limit: 500,
+  });
+}
+```
+
+**2. Iteris 511 platform** (used by NV Roads, FL511, many state 511 sites)
+- If the state's 511 site URL looks like `xx511.com` or `xxroads.com`, it's likely Iteris
+- Test: `https://{domain}/List/GetData/Cameras?query={"start":0,"length":5,"search":{"value":""}}&lang=en-US`
+- Add a wrapper that calls `fetchIteris511Cameras()` with the base URL and a search term (city name, county, or region):
+```ts
+async function fetchPhoenixCameras(): Promise<Camera[]> {
+  return fetchIteris511Cameras({
+    baseUrl: "https://az511.com",
+    searchTerm: "Maricopa",  // county name works well for filtering
+    idPrefix: "phx",
+    city: "Phoenix",
+    limit: 200,
+  });
+}
+```
+
+**3. Custom API** (Caltrans, Austin Socrata, etc.)
+- Write a dedicated fetcher following the existing patterns in `lib/api/cameras.ts`
+- Must return `Camera[]` with valid lat/lon and a direct image URL (JPEG or PNG)
+
+**After adding the fetcher:**
+1. Add it to the `Promise.allSettled` in `getAllCameras()` (uses allSettled — one failure won't block others)
+2. Run `npm run build` — zero errors
+3. The clustering system handles everything else automatically (no changes to CameraLayer needed)
+
+## Code Style
+- Green-on-black HUD/military aesthetic — use `#000a00` bg, `#00ff41` / green-400/500 text
+- Custom CSS classes in `globals.css` (`.panel-section`, `.panel-label`, `.scope-*`, `.hud-glow`, `.timeline-*`, `.calendar-*`) alongside Tailwind utilities
+- Font: monospace throughout (`font-mono`)
+- Text sizes: 8-11px for HUD elements, tracking-wide/wider
diff --git a/hackathon/submissions/team_matt-johnson/README.md b/hackathon/submissions/team_matt-johnson/README.md
new file mode 100644
index 00000000..5ffe0aaf
--- /dev/null
+++ b/hackathon/submissions/team_matt-johnson/README.md
@@ -0,0 +1,59 @@
+# Team Matt
+
+## Participants
+- Matt Johnson (PM, Architect, Developer, Data Engineer — all roles, solo)
+
+## Scenario
+**Wildcard**: Went off-script. Forked an open-source geospatial intelligence platform and extended it with real-time Singapore transport data.
+
+## What We Built
+Forked **WorldView OSS** — a real-time 3D globe intelligence dashboard (CesiumJS + Next.js 16 + Zustand) — and added a **10th data layer: Singapore Carpark Availability**. The layer pulls real-time data from the LTA DataMall API, showing 129+ carparks across Singapore as color-coded dots (green/amber/red by available lots) with a natural heatmap overlay created by overlapping semi-transparent ellipses.
+
+The implementation follows the exact 6-file architecture pattern established by the 9 existing layers (flights, satellites, disasters, etc.): API fetcher with pagination, Next.js API route with server-side caching, client-side polling hook, Zustand state management, CesiumJS entity rendering, and sidebar toggle integration. The carpark data refreshes every 60 seconds.
+
+Everything runs. Toggle "SG Carparks" in the sidebar, fly to Singapore, and you see real-time parking pressure zones light up across the island. Red clusters in the CBD during business hours, green in suburban HDB estates.
+
+## Challenges Attempted
+| # | Challenge | Status | Notes |
+|---|---|---|---|
+| 1 | Fork & run WorldView OSS on macOS (ARM) | Done | Fixed Linux-only `@next/swc` dependency |
+| 2 | Research Singapore real-time data sources | Done | LTA DataMall: taxis, MRT crowds, carparks, traffic |
+| 3 | Add CarPark layer (full 6-file pattern) | Done | 129+ carparks, color-coded dots + heatmap ellipses |
+| 4 | LTA API pagination & location parsing | Done | Handles $skip pagination, "lat lon" string parsing |
+| 5 | Heatmap effect via overlapping ellipses | Done | 500m radius, 12-18% alpha, blends naturally in dense areas |
+
+## Key Decisions
+1. **Carparks over taxis** — Taxis would have been more visually dramatic (thousands of GPS dots) but carparks offered clearer color semantics (green/amber/red) and the heatmap effect. See `/decisions/001-carpark-layer-architecture.md`.
+2. **Absolute lot thresholds, not percentages** — LTA API doesn't provide total capacity, only available lots. Used fixed thresholds (>100/20-100/<20) rather than building a static capacity lookup table.
+3. **Followed existing patterns exactly** — Rather than inventing new architecture, replicated the exact 6-file pattern of the 9 existing layers. This makes the code instantly reviewable by anyone familiar with the codebase.
+
+## How to Run It
+```bash
+# Prerequisites: Node.js 18+, free Cesium Ion token, free LTA DataMall API key
+git clone https://github.com/matthewgjohnson/worldview_oss.git
+cd worldview_oss
+npm install
+
+# Create .env.local with your tokens
+echo 'NEXT_PUBLIC_CESIUM_ION_TOKEN=your_cesium_token' > .env.local
+echo 'LTA_DATAMALL_KEY=your_lta_key' >> .env.local
+
+npm run dev
+# Open http://localhost:3000
+# Toggle "SG Carparks" in sidebar, navigate to Singapore
+```
+
+## If We Had Another Day
+1. **Add taxi layer** — LTA `Taxi-Availability` returns real-time GPS positions of all available taxis. Thousands of green dots swarming across Singapore would be the visual showstopper.
+2. **MRT crowd density** — Color-coded station markers using `PCDRealTime` endpoint.
+3. **Carpark capacity lookup** — Integrate a static dataset of total carpark capacity to show percentage-based colors instead of absolute lot counts.
+4. **Singapore Quick Nav button** — Add "SG" to the Quick Nav section for one-click flyTo.
+5. **Historical parking patterns** — Cache and replay carpark data over time using the timeline slider.
+
+## How We Used Claude Code
+- **Codebase exploration** — Used `Explore` agent to deeply understand the 6-file layer pattern across 9 existing layers before writing any code. This meant the implementation was right the first time.
+- **Parallel research** — Launched concurrent agents to research LTA DataMall APIs AND explore the WorldView architecture simultaneously. Saved significant time.
+- **AskUserQuestion** — Used interactive questions with ASCII previews for design decisions (sidebar theme for the inventory management warmup exercise).
+- **Plan mode** — Designed the full implementation plan before writing code, caught the pagination requirement and location parsing edge cases upfront.
+- **Environment setup** — Claude installed Node.js, uv, and gh CLI, authenticated GitHub, forked repos, and managed dev servers throughout.
+- **What surprised me** — Claude's ability to read an unfamiliar codebase and replicate its patterns exactly. The carpark layer follows the same architecture as the other 9 layers without any custom scaffolding.
diff --git a/hackathon/submissions/team_matt-johnson/sg-carparks-live.png b/hackathon/submissions/team_matt-johnson/sg-carparks-live.png
new file mode 100644
index 00000000..acb2ea20
Binary files /dev/null and b/hackathon/submissions/team_matt-johnson/sg-carparks-live.png differ
diff --git a/hackathon/submissions/team_matt-johnson/submission.html b/hackathon/submissions/team_matt-johnson/submission.html
new file mode 100644
index 00000000..3294bd86
--- /dev/null
+++ b/hackathon/submissions/team_matt-johnson/submission.html
@@ -0,0 +1,546 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>WorldView OSS + Singapore — Hackathon Presentation</title>
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+
+  :root {
+    --anthropic-bg: #1a1a2e;
+    --anthropic-surface: #16213e;
+    --anthropic-accent: #d4a574;
+    --anthropic-accent-light: #e8c9a0;
+    --anthropic-text: #f5f5f5;
+    --anthropic-text-muted: #a0a0b8;
+    --anthropic-border: #2a2a4a;
+    --anthropic-green: #4ade80;
+    --anthropic-amber: #fbbf24;
+    --anthropic-red: #f87171;
+  }
+
+  body {
+    font-family: 'Inter', -apple-system, sans-serif;
+    background: var(--anthropic-bg);
+    color: var(--anthropic-text);
+    overflow: hidden;
+    height: 100vh;
+    width: 100vw;
+  }
+
+  .slide {
+    display: none;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    width: 100vw;
+    padding: 60px 80px;
+    position: relative;
+  }
+
+  .slide.active { display: flex; }
+
+  /* Anthropic subtle gradient background */
+  .slide::before {
+    content: '';
+    position: absolute;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background: radial-gradient(ellipse at 30% 20%, rgba(212, 165, 116, 0.05) 0%, transparent 50%),
+                radial-gradient(ellipse at 70% 80%, rgba(212, 165, 116, 0.03) 0%, transparent 50%);
+    pointer-events: none;
+  }
+
+  .slide-content {
+    position: relative;
+    z-index: 1;
+    max-width: 1100px;
+    width: 100%;
+  }
+
+  /* Top bar */
+  .top-bar {
+    position: fixed;
+    top: 0; left: 0; right: 0;
+    height: 4px;
+    background: linear-gradient(90deg, var(--anthropic-accent), var(--anthropic-accent-light), var(--anthropic-accent));
+    z-index: 100;
+  }
+
+  /* Footer */
+  .footer {
+    position: fixed;
+    bottom: 20px;
+    left: 40px;
+    right: 40px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 12px;
+    color: var(--anthropic-text-muted);
+    z-index: 100;
+    letter-spacing: 0.05em;
+  }
+
+  .footer .anthropic-mark {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-weight: 600;
+    color: var(--anthropic-accent);
+  }
+
+  .footer .anthropic-mark svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  /* Typography */
+  h1 {
+    font-size: 56px;
+    font-weight: 800;
+    letter-spacing: -0.03em;
+    line-height: 1.1;
+    margin-bottom: 16px;
+  }
+
+  h1 .accent { color: var(--anthropic-accent); }
+
+  h2 {
+    font-size: 40px;
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    margin-bottom: 32px;
+    line-height: 1.2;
+  }
+
+  h3 {
+    font-size: 14px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.15em;
+    color: var(--anthropic-accent);
+    margin-bottom: 16px;
+  }
+
+  .subtitle {
+    font-size: 22px;
+    color: var(--anthropic-text-muted);
+    font-weight: 400;
+    line-height: 1.5;
+    max-width: 700px;
+  }
+
+  p { font-size: 18px; line-height: 1.7; color: var(--anthropic-text-muted); }
+
+  /* Cards */
+  .card-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 20px;
+    margin-top: 24px;
+  }
+
+  .card-grid-2 { grid-template-columns: repeat(2, 1fr); }
+
+  .card {
+    background: var(--anthropic-surface);
+    border: 1px solid var(--anthropic-border);
+    border-radius: 12px;
+    padding: 28px;
+  }
+
+  .card h4 {
+    font-size: 16px;
+    font-weight: 700;
+    margin-bottom: 8px;
+    color: var(--anthropic-text);
+  }
+
+  .card p {
+    font-size: 14px;
+    line-height: 1.6;
+    color: var(--anthropic-text-muted);
+  }
+
+  .card .tag {
+    display: inline-block;
+    padding: 3px 10px;
+    border-radius: 4px;
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.05em;
+    margin-bottom: 12px;
+  }
+
+  .tag-green { background: rgba(74, 222, 128, 0.15); color: var(--anthropic-green); }
+  .tag-amber { background: rgba(251, 191, 36, 0.15); color: var(--anthropic-amber); }
+  .tag-red { background: rgba(248, 113, 113, 0.15); color: var(--anthropic-red); }
+  .tag-accent { background: rgba(212, 165, 116, 0.15); color: var(--anthropic-accent); }
+
+  /* Flow diagram */
+  .flow {
+    display: flex;
+    align-items: center;
+    gap: 0;
+    margin: 32px 0;
+  }
+
+  .flow-step {
+    flex: 1;
+    background: var(--anthropic-surface);
+    border: 1px solid var(--anthropic-border);
+    padding: 20px;
+    text-align: center;
+    border-radius: 0;
+  }
+
+  .flow-step:first-child { border-radius: 10px 0 0 10px; }
+  .flow-step:last-child { border-radius: 0 10px 10px 0; }
+
+  .flow-step h4 { font-size: 14px; margin-bottom: 4px; color: var(--anthropic-accent); }
+  .flow-step p { font-size: 12px; }
+
+  .flow-arrow {
+    padding: 0 6px;
+    color: var(--anthropic-border);
+    font-size: 18px;
+    background: var(--anthropic-surface);
+    border-top: 1px solid var(--anthropic-border);
+    border-bottom: 1px solid var(--anthropic-border);
+    display: flex;
+    align-items: center;
+    height: 100%;
+    min-height: 80px;
+  }
+
+  /* Stat */
+  .stat { font-size: 48px; font-weight: 800; color: var(--anthropic-accent); letter-spacing: -0.02em; }
+  .stat-label { font-size: 14px; color: var(--anthropic-text-muted); margin-top: 4px; }
+
+  /* Code block */
+  .code {
+    background: #0d1117;
+    border: 1px solid var(--anthropic-border);
+    border-radius: 8px;
+    padding: 20px 24px;
+    font-family: 'SF Mono', 'Fira Code', monospace;
+    font-size: 13px;
+    line-height: 1.7;
+    color: #c9d1d9;
+    overflow-x: auto;
+    margin-top: 20px;
+  }
+
+  .code .comment { color: #8b949e; }
+  .code .keyword { color: #ff7b72; }
+  .code .string { color: #a5d6ff; }
+  .code .fn { color: #d2a8ff; }
+
+  /* Navigation */
+  .nav-hint {
+    position: fixed;
+    bottom: 20px;
+    right: 40px;
+    font-size: 12px;
+    color: var(--anthropic-text-muted);
+    z-index: 100;
+  }
+
+  .slide-counter {
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 12px;
+    color: var(--anthropic-text-muted);
+    z-index: 100;
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* Lists */
+  ul { list-style: none; padding: 0; }
+  ul li {
+    padding: 8px 0;
+    font-size: 16px;
+    color: var(--anthropic-text-muted);
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+  }
+  ul li::before {
+    content: '';
+    width: 6px; height: 6px;
+    border-radius: 50%;
+    background: var(--anthropic-accent);
+    flex-shrink: 0;
+    margin-top: 8px;
+  }
+
+  /* Title slide special */
+  .title-slide .team {
+    font-size: 16px;
+    color: var(--anthropic-text-muted);
+    margin-top: 24px;
+    font-weight: 500;
+  }
+
+  .badge-row {
+    display: flex;
+    gap: 8px;
+    margin-top: 20px;
+    flex-wrap: wrap;
+  }
+
+  .badge {
+    padding: 5px 14px;
+    border-radius: 6px;
+    font-size: 12px;
+    font-weight: 600;
+    border: 1px solid var(--anthropic-border);
+    color: var(--anthropic-text-muted);
+  }
+</style>
+</head>
+<body>
+
+<div class="top-bar"></div>
+
+<!-- Slide 1: Title -->
+<div class="slide active title-slide" id="slide-1">
+  <div class="slide-content">
+    <h3>Claude Code Hackathon</h3>
+    <h1>WorldView OSS<br><span class="accent">+ Singapore</span></h1>
+    <p class="subtitle">Real-time carpark intelligence on a 3D globe. 129 carparks. Live data. One afternoon.</p>
+    <p class="team">Matt Johnson &mdash; Solo Team</p>
+    <div class="badge-row">
+      <span class="badge">Next.js 16</span>
+      <span class="badge">CesiumJS</span>
+      <span class="badge">LTA DataMall</span>
+      <span class="badge">Zustand</span>
+      <span class="badge">TypeScript</span>
+    </div>
+  </div>
+</div>
+
+<!-- Slide 2: Live Demo Screenshot -->
+<div class="slide" id="slide-2">
+  <div class="slide-content" style="text-align: center;">
+    <h3>Live on the Globe</h3>
+    <h2>129 carparks. Real-time. Singapore.</h2>
+    <img src="sg-carparks-live.png" alt="WorldView OSS with Singapore Carparks" style="max-width: 100%; max-height: 60vh; border-radius: 12px; border: 1px solid var(--anthropic-border); margin-top: 24px; box-shadow: 0 8px 32px rgba(0,0,0,0.4);" />
+  </div>
+</div>
+
+<!-- Slide 3: The Problem -->
+<div class="slide" id="slide-3">
+  <div class="slide-content">
+    <h3>The Opportunity</h3>
+    <h2>WorldView has 9 global layers.<br>Zero local Singapore data.</h2>
+    <div class="card-grid">
+      <div class="card">
+        <span class="tag tag-accent">EXISTING</span>
+        <h4>Global Intelligence</h4>
+        <p>Flights, satellites, earthquakes, asteroids, weather, CCTV cameras, news, military actions, live streams</p>
+      </div>
+      <div class="card">
+        <span class="tag tag-red">MISSING</span>
+        <h4>Singapore Data</h4>
+        <p>No local transport, no parking, no MRT, no taxis. The dashboard ignores the city it's being demoed in.</p>
+      </div>
+      <div class="card">
+        <span class="tag tag-green">ADDED</span>
+        <h4>SG Carparks</h4>
+        <p>Real-time carpark availability from LTA DataMall. 129+ locations. Color-coded dots + heatmap overlay.</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Slide 4: Architecture -->
+<div class="slide" id="slide-4">
+  <div class="slide-content">
+    <h3>Architecture</h3>
+    <h2>Followed the existing pattern. Exactly.</h2>
+    <p>Every layer in WorldView follows a 6-file pattern. The carpark layer is file #10, not a hack.</p>
+    <div class="flow">
+      <div class="flow-step">
+        <h4>LTA API</h4>
+        <p>CarParkAvailabilityv2<br>paginated, 500/page</p>
+      </div>
+      <div class="flow-arrow">&rarr;</div>
+      <div class="flow-step">
+        <h4>API Route</h4>
+        <p>/api/carparks<br>60s server cache</p>
+      </div>
+      <div class="flow-arrow">&rarr;</div>
+      <div class="flow-step">
+        <h4>Hook</h4>
+        <p>useCarparks()<br>60s client polling</p>
+      </div>
+      <div class="flow-arrow">&rarr;</div>
+      <div class="flow-step">
+        <h4>Store</h4>
+        <p>Zustand<br>carparks[]</p>
+      </div>
+      <div class="flow-arrow">&rarr;</div>
+      <div class="flow-step">
+        <h4>Globe</h4>
+        <p>CesiumJS entities<br>points + ellipses</p>
+      </div>
+    </div>
+    <div class="code">
+      <span class="comment">// 8 files touched. 4 new. 4 modified. Zero new dependencies.</span><br>
+      lib/api/carparks.ts &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">// LTA fetcher + pagination</span><br>
+      app/api/carparks/route.ts &nbsp;&nbsp;&nbsp;<span class="comment">// Next.js API route</span><br>
+      hooks/useCarparks.ts &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">// Polling hook</span><br>
+      components/layers/CarParkLayer.tsx <span class="comment">// CesiumJS renderer</span><br>
+      <span class="keyword">+</span> types/index.ts &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">// LayerKey, CarPark interface</span><br>
+      <span class="keyword">+</span> stores/worldview-store.ts &nbsp;&nbsp;<span class="comment">// State + setter</span><br>
+      <span class="keyword">+</span> components/Globe.tsx &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">// Conditional render</span><br>
+      <span class="keyword">+</span> components/hud/Sidebar.tsx &nbsp;<span class="comment">// Toggle button</span>
+    </div>
+  </div>
+</div>
+
+<!-- Slide 5: The Heatmap -->
+<div class="slide" id="slide-5">
+  <div class="slide-content">
+    <h3>Visualization</h3>
+    <h2>Dots + Heatmap. No extra libraries.</h2>
+    <div class="card-grid card-grid-2">
+      <div class="card">
+        <span class="tag tag-green">POINTS</span>
+        <h4>Color-Coded Availability</h4>
+        <p>Each carpark renders as a 6px dot. Color indicates real-time availability:</p>
+        <ul>
+          <li><strong style="color: var(--anthropic-green);">Green</strong> &mdash; 100+ lots available</li>
+          <li><strong style="color: var(--anthropic-amber);">Amber</strong> &mdash; 20-100 lots available</li>
+          <li><strong style="color: var(--anthropic-red);">Red</strong> &mdash; Under 20 lots available</li>
+        </ul>
+      </div>
+      <div class="card">
+        <span class="tag tag-accent">HEATMAP</span>
+        <h4>Overlapping Ellipses</h4>
+        <p>Each carpark also renders a 500m radius semi-transparent ellipse (12-18% alpha). In dense areas like the CBD, dozens overlap to create a natural heatmap &mdash; no heatmap library needed.</p>
+        <ul>
+          <li>Dense red zones = parking pressure</li>
+          <li>Green glow = plenty of space</li>
+          <li>Auto-hides above 500km altitude</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Slide 6: How Claude Code Helped -->
+<div class="slide" id="slide-6">
+  <div class="slide-content">
+    <h3>Claude Code</h3>
+    <h2>How I used it. What surprised me.</h2>
+    <div class="card-grid">
+      <div class="card">
+        <span class="tag tag-accent">EXPLORE</span>
+        <h4>Codebase Deep Dive</h4>
+        <p>Launched an Explore agent to read all 9 existing layers, the store, hooks, and sidebar. Returned a complete architecture map in one shot. This meant the implementation was right the first time.</p>
+      </div>
+      <div class="card">
+        <span class="tag tag-green">PARALLEL</span>
+        <h4>Concurrent Research</h4>
+        <p>Ran two agents simultaneously: one exploring WorldView architecture, one researching Singapore transport APIs. Both returned results in parallel &mdash; huge time savings.</p>
+      </div>
+      <div class="card">
+        <span class="tag tag-amber">PLAN MODE</span>
+        <h4>Design Before Code</h4>
+        <p>Used Plan Mode to design the full 8-file implementation plan. Caught the LTA pagination requirement and location parsing edge cases before writing a single line.</p>
+      </div>
+    </div>
+    <div style="margin-top: 24px;">
+      <div class="card">
+        <h4>What surprised me most</h4>
+        <p>Claude read an unfamiliar 10,000+ line codebase and replicated its exact architectural patterns &mdash; matching naming conventions, file organization, Cesium entity lifecycle, and Zustand integration. The carpark layer is indistinguishable from the original 9.</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Slide 7: What's Next -->
+<div class="slide" id="slide-7">
+  <div class="slide-content">
+    <h3>Next Steps</h3>
+    <h2>If I had another day.</h2>
+    <div class="card-grid card-grid-2">
+      <div class="card">
+        <span class="tag tag-green">HIGH PRIORITY</span>
+        <h4>Real-Time Taxi Positions</h4>
+        <p>LTA Taxi-Availability API returns GPS positions of all available taxis. Thousands of green dots swarming across Singapore. The visual showstopper.</p>
+      </div>
+      <div class="card">
+        <span class="tag tag-green">HIGH PRIORITY</span>
+        <h4>MRT Crowd Density</h4>
+        <p>LTA PCDRealTime endpoint. Color-coded MRT stations showing crowding levels. Useful and unique.</p>
+      </div>
+      <div class="card">
+        <span class="tag tag-amber">NICE TO HAVE</span>
+        <h4>Capacity Percentages</h4>
+        <p>Integrate total carpark capacity dataset so colors show percentage full, not just absolute lot counts.</p>
+      </div>
+      <div class="card">
+        <span class="tag tag-amber">NICE TO HAVE</span>
+        <h4>Historical Replay</h4>
+        <p>Cache carpark snapshots and replay them via the timeline slider. See parking patterns emerge over hours.</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Slide 8: Thank You -->
+<div class="slide" id="slide-8">
+  <div class="slide-content" style="text-align: center;">
+    <h3>Thank You</h3>
+    <h1>10 layers. <span class="accent">129 carparks.</span><br>One afternoon.</h1>
+    <p class="subtitle" style="margin: 16px auto 0;">github.com/matthewgjohnson/worldview_oss</p>
+    <div class="badge-row" style="justify-content: center; margin-top: 32px;">
+      <span class="badge" style="border-color: var(--anthropic-accent); color: var(--anthropic-accent);">Built with Claude Code</span>
+    </div>
+  </div>
+</div>
+
+<div class="footer">
+  <span class="anthropic-mark">
+    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M13.827 3.52h3.603L24 19.83h-3.603L13.827 3.52zM6.57 3.52l-6.57 16.31h3.712l1.204-3.166h6.644l1.204 3.166H16.476L9.905 3.52H6.57zm-.753 10.2l2.42-6.353 2.42 6.352H5.817z"/></svg>
+    Anthropic
+  </span>
+  <span>Claude Code Hackathon &mdash; Singapore 2026</span>
+</div>
+
+<div class="slide-counter" id="counter">1 / 8</div>
+
+<script>
+  let current = 0;
+  const slides = document.querySelectorAll('.slide');
+  const counter = document.getElementById('counter');
+
+  function show(n) {
+    slides[current].classList.remove('active');
+    current = (n + slides.length) % slides.length;
+    slides[current].classList.add('active');
+    counter.textContent = `${current + 1} / 8`;
+  }
+
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'ArrowRight' || e.key === ' ') { e.preventDefault(); show(current + 1); }
+    if (e.key === 'ArrowLeft') { e.preventDefault(); show(current - 1); }
+  });
+
+  document.addEventListener('click', (e) => {
+    if (e.clientX > window.innerWidth / 2) show(current + 1);
+    else show(current - 1);
+  });
+</script>
+
+</body>
+</html>