From 691f643edc96920e5a6652ccd53f78aebedb711a Mon Sep 17 00:00:00 2001
From: PageZ948 <zpage948@gmail.com>
Date: Sat, 4 Apr 2026 12:50:24 +0000
Subject: [PATCH] =?UTF-8?q?Initial=20commit=20=E2=80=94=20Alta=20Video=20P?=
 =?UTF-8?q?layer=20(WebAVP)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Web-based surveillance video player for Alta/Ava Security camera exports
with multi-camera sync, timeline, digital zoom, motion analytics, and
cryptographic integrity verification.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 CLAUDE.md            |  107 +
 app.py               |   85 +
 design.md            |  322 +++
 requirements.txt     |    3 +
 static/jszip.min.js  |   13 +
 templates/index.html | 5038 ++++++++++++++++++++++++++++++++++++++++++
 6 files changed, 5568 insertions(+)
 create mode 100644 CLAUDE.md
 create mode 100644 app.py
 create mode 100644 design.md
 create mode 100644 requirements.txt
 create mode 100644 static/jszip.min.js
 create mode 100644 templates/index.html

diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..a857a6d
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,107 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+**Alta Video Player (WebAVP)** — a web-based surveillance video player for Alta/Ava Security camera exports. Users drag-drop video files or ZIP archives (including AES-256 encrypted ones) and get a multi-camera synchronized playback experience with timeline, digital zoom, cryptographic integrity verification, and automatic motion analytics.
+
+## Running the App
+
+```bash
+python3 app.py
+# Serves on http://0.0.0.0:5152
+```
+
+No build step. No dependencies needed at runtime — `app.py` uses only Python stdlib (`http.server`). The `requirements.txt` (flask, requests, gunicorn) is vestigial; the server was rewritten to pure stdlib.
+
+## Architecture
+
+### Backend (`app.py`)
+
+Minimal HTTP server with three routes:
+- `GET /` — serves `templates/index.html`
+- `GET /static/*` — serves static files with path traversal protection
+- `GET /api/verify-cert?serial=...&certificateHash=...` — proxies certificate verification to `https://aware.avasecurity.com/api/v1/public/verifyServerCertificate`
+
+### Frontend (`templates/index.html`)
+
+Single self-contained HTML file (~5000 lines) with inline CSS and JavaScript in an IIFE. This is the entire application — there is no framework, no build system, no separate JS modules.
+
+**State model:** Global `channels` Map keyed by channel name. Each channel holds segments (video blobs + time ranges), metadata, DOM references, color, and zoom state. Global timeline state (`globalStart`, `globalEnd`, `currentTime`) synchronizes all cameras. Motion analytics state lives in the `motionState` object.
+
+**Key subsystems:**
+- **File ingestion** — drag-drop files/folders, ZIP extraction (JSZip for plain, custom AES-256-CTR for encrypted), metadata pairing by base filename, concurrent import guard (`isImporting` flag)
+- **Multi-camera grid** — responsive CSS grid (1–9 cameras), drag-to-reorder, click-to-expand
+- **Playback engine** — `requestAnimationFrame` tick loop, per-channel segment visibility management, variable speed (0.25x–8x), frame stepping
+- **Timeline** — interactive scrub bar with zoom (mouse wheel), minimap, per-channel segment indicators with color-coded dots, motion heatmap row
+- **Digital zoom** — per-camera scroll-to-zoom (up to 10x) with click-drag panning
+- **Magnifier tool** — draw rectangle to zoom into region
+- **Slideshow mode** — animated grid showing only currently active feeds with transitions
+- **Motion analytics** — automatic background motion detection on load (see below)
+- **Integrity verification** — offline X.509 certificate parsing, RSASSA-PKCS1-v1_5 and ECDSA signature verification via Web Crypto API, optional cloud verification through `/api/verify-cert`
+- **Session persistence** — IndexedDB caching of video blobs and metadata for page refresh survival
+
+**External dependency:** `/static/jszip.min.js` (vendored, for unencrypted ZIP parsing).
+
+## Motion Analytics Subsystem
+
+Zero-dependency canvas-based motion detection that runs automatically when videos are loaded.
+
+### How it works
+1. **Auto-scan on load** — `scheduleAutoScan()` is called from `flushPending()` and `loadSessionData()` after videos finish loading. Debounced 800ms to batch all segments.
+2. **Dedicated scan videos** — scan creates temporary offscreen `<video>` elements per segment (with `preload='auto'` for fast seeking) that don't interfere with the playback engine. Each is destroyed after its segment is processed.
+3. **Pixel-diff at 160x120** — frames are drawn to a small offscreen canvas. Each pixel's RGB delta is compared against a threshold. Changed pixels are counted and mapped to a 10x8 hotspot grid.
+4. **Sensitivity slider (1–100)** — maps to two internal thresholds via `sensitivityToThresholds()`: `pixelThreshold` (how different a pixel must be) and `changeThreshold` (what % of pixels must change). Presets: Indoor (30), Default (40), Parking (45), Outdoor (55).
+5. **Motion clusters** — consecutive motion detections within `clusterGap` (5s) are merged into clusters with start/end times, peak change %, and hotspot data.
+6. **Results visualization** — motion heatmap row on timeline (purple/red intensity), clickable cluster markers, scrollable event cards in the analytics panel with hotspot mini-grids.
+
+### Key state: `motionState`
+- `sensitivity` (1–100), `scanInterval` (2s default), `clusterGap` (5s)
+- `detector.canvas` / `detector.ctx` — 160x120 offscreen canvas for pixel comparison
+- `detector.prevFrames` — Map of channelName → previous ImageData
+- `motionProfiles` — Map of channelName → array of `{ time, changePercent, hotspots, hasMotion }`
+- `motionClusters` — sorted array of `{ startTime, endTime, channelName, peakChange, ... }`
+- `isScanning` / `scanAbort` — scan lifecycle
+- `isMonitoring` — live monitor mode flag
+
+### Key functions
+- `detectMotion(videoEl, channelName)` — core pixel-diff, returns `{ hasMotion, changePercent, hotspots }`
+- `scanTimeline({ auto })` — full scan orchestrator, creates offscreen videos, yields to UI every 12 frames
+- `scheduleAutoScan()` — debounced auto-trigger after video load
+- `setScanUIState('scanning'|'idle')` — manages rail button grey-out and progress UI
+- `seekToMotion(direction)` — skip to next/previous motion cluster
+- `monitorTick(absTime)` — called from `tick()` during playback for live detection
+- `buildMotionClusters()` — post-scan cluster identification
+- `renderMotionResults()` — populates panel: sparkline, summary, event cards
+
+### UI elements
+- **Analytics panel** — right slide-out (400px), class `.analytics-panel`, toggled via `railAnalyticsBtn`
+- **Rail button** — greyed out with pulsing purple border (`.scanning` class) during auto-scan
+- **Skip-to-motion buttons** — `btnPrevMotion` / `btnNextMotion` in transport controls
+- **Keyboard shortcuts** — Shift+N (next motion), Shift+P (previous motion)
+
+### Two-tier distribution strategy
+The browser version provides motion detection only (zero dependencies, fully offline). A future downloadable local app will add:
+- Object classification via bundled ONNX/YOLO model (person/vehicle/animal detection)
+- BYOA (Bring Your Own Agent) cloud AI integration for scene understanding, license plates, cross-camera tracking
+- Optional local LLM support (Ollama) for fully offline AI reasoning
+
+## Memory Management
+
+Video elements must be properly destroyed to avoid browser memory exhaustion:
+- **`destroyVideoEl(videoEl)`** — pauses video, removes `src`, calls `.load()` to force browser to release buffered data. Must be called before removing video elements from DOM.
+- **`video.preload = 'metadata'`** — all playback videos use metadata-only preloading to avoid buffering entire files into RAM. Scan videos use `'auto'` temporarily and are destroyed after use.
+- **`newSession()`** — comprehensive teardown: stops scan/monitor, destroys all video elements, revokes all blob URLs, nulls blob references, releases WebGL contexts, clears all state.
+- **`isImporting` guard** — prevents concurrent file imports which could cause race conditions and duplicate segments.
+- Slideshow video elements are destroyed on pane transitions and when slideshow is toggled off.
+
+## Key Conventions
+
+- All frontend code lives in `templates/index.html` — CSS at top, then the IIFE script block
+- Video elements are created on-demand and hidden (not removed) for performance
+- Segment visibility is recalculated every animation frame during playback
+- The `batchingSegments` flag defers rendering during bulk file imports
+- Keyboard shortcuts are defined inline (Space=play/pause, arrows=seek, S=slideshow, M=magnifier, F=fullscreen, [/]=speed, 0=reset zoom, Shift+N/P=skip motion)
+- Motion scan runs automatically on load — the analytics rail button is disabled until scan completes
+- Right-side panels (log, analytics) auto-close when the other opens
diff --git a/app.py b/app.py
new file mode 100644
index 0000000..18447e6
--- /dev/null
+++ b/app.py
@@ -0,0 +1,85 @@
+#!/usr/bin/env python3
+"""Alta Video Player — lightweight HTTPS server using only Python stdlib."""
+
+import json
+import mimetypes
+import os
+from http.server import HTTPServer, SimpleHTTPRequestHandler
+from urllib.parse import parse_qs, urlencode, urlparse
+from urllib.request import urlopen
+from urllib.error import URLError
+
+PORT = 5152
+BASE_DIR = os.path.dirname(os.path.abspath(__file__))
+STATIC_DIR = os.path.join(BASE_DIR, "static")
+TEMPLATES_DIR = os.path.join(BASE_DIR, "templates")
+
+
+class Handler(SimpleHTTPRequestHandler):
+    def do_GET(self):
+        parsed = urlparse(self.path)
+        path = parsed.path
+
+        if path == "/":
+            self._serve_file(os.path.join(TEMPLATES_DIR, "index.html"), "text/html")
+        elif path.startswith("/static/"):
+            rel = path[len("/static/"):]
+            file_path = os.path.join(STATIC_DIR, rel)
+            if not os.path.realpath(file_path).startswith(os.path.realpath(STATIC_DIR)):
+                self.send_error(403)
+                return
+            mime = mimetypes.guess_type(file_path)[0] or "application/octet-stream"
+            self._serve_file(file_path, mime)
+        elif path == "/api/verify-cert":
+            self._proxy_verify(parsed.query)
+        else:
+            self.send_error(404)
+
+    def _serve_file(self, file_path, content_type):
+        try:
+            with open(file_path, "rb") as f:
+                data = f.read()
+            self.send_response(200)
+            self.send_header("Content-Type", content_type)
+            self.send_header("Content-Length", len(data))
+            self.end_headers()
+            self.wfile.write(data)
+        except FileNotFoundError:
+            self.send_error(404)
+
+    def _proxy_verify(self, query_string):
+        params = parse_qs(query_string)
+        serial = params.get("serial", [""])[0]
+        cert_hash = params.get("certificateHash", [""])[0]
+
+        if not serial or not cert_hash:
+            self._json_response(400, {"verified": False, "error": "Missing parameters"})
+            return
+
+        try:
+            qs = urlencode({"serial": serial, "certificateHash": cert_hash})
+            url = f"https://aware.avasecurity.com/api/v1/public/verifyServerCertificate?{qs}"
+            resp = urlopen(url, timeout=10)
+            if 200 <= resp.status < 300:
+                self._json_response(200, {"verified": True})
+            else:
+                self._json_response(200, {"verified": False, "error": f"HTTP {resp.status}"})
+        except URLError as e:
+            self._json_response(200, {"verified": False, "error": str(e)})
+
+    def _json_response(self, status, data):
+        body = json.dumps(data).encode()
+        self.send_response(status)
+        self.send_header("Content-Type", "application/json")
+        self.send_header("Content-Length", len(body))
+        self.end_headers()
+        self.wfile.write(body)
+
+    def log_message(self, fmt, *args):
+        print(f"[AVP] {args[0]}")
+
+
+if __name__ == "__main__":
+    server = HTTPServer(("0.0.0.0", PORT), Handler)
+    print(f"Alta Video Player running on http://0.0.0.0:{PORT}")
+    server.serve_forever()
diff --git a/design.md b/design.md
new file mode 100644
index 0000000..0ea0051
--- /dev/null
+++ b/design.md
@@ -0,0 +1,322 @@
+# Design System — Alta Style
+
+> This document defines the visual identity for all tools and interfaces built under
+> the Alta brand. It covers colors, typography, component styling, and interaction
+> patterns. It does NOT prescribe layouts, page structures, or application architecture —
+> use whatever structure fits your application.
+>
+> Apply this to web apps, Electron apps, dashboards, internal tools, Chrome extensions,
+> or any UI that should feel like part of the Alta product family.
+>
+> Colors are sourced from the Alta Video platform's global CSS variables
+> (`--colorPrimary`, `--colorLink`, etc.) and computed element styles.
+
+---
+
+## 1. Color Palette
+
+### 1.1 Backgrounds
+
+| Token                | Value                        | When to use                                    |
+|----------------------|------------------------------|------------------------------------------------|
+| `--bg-app`           | `#121826`                    | Page/body background — deep navy               |
+| `--bg-panel`         | `#121826`                    | Headers, nav bars, top-level panels             |
+| `--bg-surface`       | `#181F32`                    | Cards, containers, secondary sections           |
+| `--bg-surface-hover` | `rgba(0, 110, 215, 0.12)`   | Hovered rows, list items, interactive elements  |
+| `--bg-surface-active`| `rgba(0, 110, 215, 0.20)`   | Selected/pressed/active states                  |
+| `--bg-input`         | `rgba(0, 110, 215, 0.10)`   | Text inputs, search bars, selects, dropdowns    |
+| `--bg-button`        | `rgba(0, 110, 215, 0.20)`   | Default button background                       |
+| `--bg-button-hover`  | `rgba(0, 110, 215, 0.32)`   | Hovered button background                       |
+
+> **Key principle:** Alta layers semi-transparent tints of the brand blue
+> (`rgba(0, 110, 215, *)`) on the navy background. The secondary surface color
+> `#181F32` provides a subtle lift for cards and sections without transparency.
+
+### 1.2 Borders
+
+| Token              | Value       | When to use                                        |
+|--------------------|-------------|----------------------------------------------------|
+| `--border-default` | `#C2C7CC`   | Standard borders on components in dark context      |
+| `--border-light`   | `#EBEEF0`   | Lighter borders, dividers within cards/panels       |
+| `--border-subtle`  | `rgba(244, 244, 246, 0.12)` | Very subtle separators on dark backgrounds |
+
+> Alta uses light-colored borders (`#C2C7CC`, `#EBEEF0`) even on the dark theme.
+> These are typically used at low opacity or on specific components. For most
+> dark-on-dark dividers, use `--border-subtle`.
+
+### 1.3 Text
+
+| Token              | Value       | When to use                              |
+|--------------------|-------------|------------------------------------------|
+| `--text-primary`   | `#F4F4F6`   | Headings, labels, body content            |
+| `--text-secondary` | `#656972`   | Descriptions, metadata, timestamps        |
+| `--text-muted`     | `#8D9399`   | Placeholders, disabled text, hints        |
+| `--text-on-accent` | `#FFFFFF`   | Text on accent or status backgrounds      |
+
+> Primary text is off-white (`#F4F4F6`), not pure white. Reserve `#FFFFFF` for
+> text on accent-colored or status-colored backgrounds.
+
+### 1.4 Accent & Brand
+
+| Token                    | Value                        | When to use                           |
+|--------------------------|------------------------------|---------------------------------------|
+| `--accent-primary`       | `#006ED7`                    | Brand blue — links, primary actions, active states (Alta `--colorPrimary` / `--colorLink`) |
+| `--accent-primary-hover` | `#0080F0`                    | Hovered links and primary elements    |
+| `--accent-primary-muted` | `rgba(0, 110, 215, 0.20)`   | Tinted backgrounds using brand blue   |
+
+### 1.5 Status
+
+| Token              | Value     | When to use                                       |
+|--------------------|-----------|---------------------------------------------------|
+| `--status-success` | `#20C62F` | Success, connected, healthy, complete              |
+| `--status-error`   | `#DE1111` | Error, failed, disconnected, destructive actions   |
+| `--status-warning` | `#EAA301` | Warning, caution, pending, needs attention         |
+| `--status-info`    | `#8D9399` | Informational, neutral, secondary indicators       |
+| `--status-purple`  | `#8957E5` | Special category badges, analytics                 |
+| `--status-motion`  | `#A855F7` | Activity, progress, event indicators               |
+
+### 1.6 Overlays
+
+| Token             | Value                      | When to use                          |
+|-------------------|----------------------------|--------------------------------------|
+| `--overlay-dark`  | `rgba(18, 24, 38, 0.60)`  | Dimming layer behind modals/dialogs  |
+| `--overlay-panel` | `rgba(18, 24, 38, 0.85)`  | Floating panels, dropdown backdrops  |
+
+---
+
+## 2. Typography
+
+**Font stack:** `'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif`
+
+| Role               | Size  | Weight | Notes                            |
+|--------------------|-------|--------|----------------------------------|
+| Page / section title | 16px | 600   |                                  |
+| Body / labels      | 14px  | 400    |                                  |
+| Emphasized labels  | 14px  | 600    | Selected items, active states    |
+| Compact labels     | 13px  | 500    | Dense UI, toolbar text           |
+| Captions           | 12px  | 400    | Metadata, timestamps, subtitles  |
+| Badges             | 10px  | 600    | Inline status/category badges    |
+| Micro              | 11px  | 600    | Tiny indicators, status labels   |
+
+**Spacing:** letter-spacing `-0.01em` on titles, `0` on body.
+**Line-height:** `1.3` titles, `1.4` body.
+
+---
+
+## 3. Component Styles
+
+### 3.1 Buttons
+
+| Variant    | Background                | Text               | Hover                          |
+|------------|---------------------------|---------------------|--------------------------------|
+| Primary    | `--accent-primary`        | `#FFFFFF`           | `--accent-primary-hover`       |
+| Secondary  | `--bg-button`             | `--text-primary`    | `--bg-button-hover`            |
+| Ghost/Icon | `transparent`             | `--text-secondary`  | `--bg-button`, text brightens  |
+| Danger     | `--status-error`          | `#FFFFFF`           | lighten ~10%                   |
+
+- No visible borders on buttons — Alta buttons are borderless
+- Border-radius: `6px`
+- Padding: `8px 16px` (text) / `8px` (icon-only)
+- Heights: `32px` small, `36px` default, `40px` large
+- Font: 13px, weight 500
+
+### 3.2 Inputs
+
+- Height: `36px`
+- Background: `--bg-input`
+- Border: `1px solid var(--border-subtle)`, radius `6px`
+- Placeholder: `--text-muted`
+- Focus: border changes to `--accent-primary`, add `var(--shadow-focus)` ring
+
+### 3.3 Badges
+
+- Padding: `2px 6px`, radius `4px`
+- Font: 10px, weight 600, `#FFFFFF` text
+- Use `--status-purple` for special/category badges
+- Use `--accent-primary` for general tags
+
+### 3.4 Status Indicators
+
+- Dot size: `8px` circle
+- Colors: `--status-success`, `--status-error`, `--status-warning`
+- Always pair with a text label or icon — never color alone
+- Pulsing dots: `animation: pulse 1.5s ease-in-out infinite` (opacity 1 → 0.35)
+
+### 3.5 Cards & Containers
+
+- Background: `--bg-surface` (`#181F32`)
+- Border: `1px solid var(--border-subtle)`
+- Border-radius: `8px`
+- Elevated variant adds: `var(--shadow-elevated)`
+
+### 3.6 Tables & Lists
+
+- Header row: `--text-muted`, 11px, weight 600, uppercase, `letter-spacing: 0.05em`
+- Body rows: `--text-primary`, 13–14px
+- Row hover: `--bg-surface-hover`
+- Selected row: `--bg-surface-active`
+- Row dividers: `rgba(244, 244, 246, 0.08)`
+
+### 3.7 Tooltips & Popovers
+
+- Background: `--bg-surface`
+- Border: `1px solid var(--border-subtle)`
+- Border-radius: `8px`, padding `8px 12px`
+- Shadow: `var(--shadow-elevated)`
+- Text: `--text-primary`, 13px
+
+### 3.8 Navigation Items
+
+- Default: icon/text in `--text-secondary`
+- Hover: bg `--bg-surface-hover`, text brightens to `--text-primary`
+- Active: bg `--accent-primary`, text/icon `#FFFFFF`, radius `8px`
+
+### 3.9 Modals & Dialogs
+
+- Backdrop: `--overlay-dark`
+- Panel: `--bg-surface` background, `1px solid var(--border-subtle)`, radius `12px`
+- Shadow: `var(--shadow-elevated)`
+- Title: 16px weight 600, body: 14px weight 400
+
+### 3.10 Tabs
+
+- Inactive: `--text-secondary`, transparent background
+- Active: `--text-primary`, bottom border `2px solid var(--accent-primary)`
+- Hover: text brightens toward `--text-primary`
+
+### 3.11 Progress & Bar Charts
+
+- Track: `--bg-input`
+- Fill: use status colors based on meaning (green good, yellow caution, red bad)
+- Height: `8px`, radius `4px`
+
+### 3.12 Toast / Notification
+
+- Background: `--bg-surface`
+- Border-left: `3px solid` using appropriate status color
+- Border-radius: `8px`
+- Shadow: `var(--shadow-elevated)`
+- Auto-dismiss with fade-out
+
+---
+
+## 4. Iconography
+
+- **Style:** Outline, 1.5px stroke weight
+- **Library:** Lucide Icons (preferred) or Heroicons Outline
+- **Sizes:** `20px` navigation, `16px` inline, `14px` compact/dense UI
+- **Colors:** `--text-secondary` default → `--text-primary` on hover → `#FFFFFF` on accent backgrounds
+- Don't mix filled and outline styles in the same interface
+
+---
+
+## 5. Animation & Transitions
+
+| What                | Duration | Easing                     |
+|---------------------|----------|----------------------------|
+| Hover states        | 150ms    | `ease-out`                 |
+| Panel open/close    | 250ms    | `cubic-bezier(.4,0,.2,1)` |
+| Fade in/out         | 150ms    | `ease`                     |
+| Pulse indicators    | 1500ms   | `ease-in-out` (infinite)   |
+| Content transitions | 200ms    | `ease-out`                 |
+
+All motion is functional. No decorative animation.
+
+---
+
+## 6. Theme Rules
+
+1. **Dark-only.** No light mode.
+2. **Navy, not black.** The base is `#121826`. Never use `#000000` for backgrounds.
+3. **Two surface levels.** `#121826` for the page, `#181F32` for elevated cards/sections.
+4. **Vivid brand blue.** The accent is `#006ED7` — a strong, saturated blue. Not muted, not pastel.
+5. **Off-white text.** Use `#F4F4F6`, not `#FFFFFF`. Pure white is only for accent backgrounds.
+6. **Real status colors.** Green `#20C62F`, red `#DE1111`, orange `#EAA301` — these are vivid and intentional.
+7. **Pair color with meaning.** Never use color alone for status — always include a label or icon.
+8. **WCAG AA contrast.** All text must meet ≥ 4.5:1 ratio against its background.
+
+---
+
+## 7. CSS Variables
+
+```css
+:root {
+  /* Backgrounds */
+  --bg-app: #121826;
+  --bg-panel: #121826;
+  --bg-surface: #181F32;
+  --bg-surface-hover: rgba(0, 110, 215, 0.12);
+  --bg-surface-active: rgba(0, 110, 215, 0.20);
+  --bg-input: rgba(0, 110, 215, 0.10);
+  --bg-button: rgba(0, 110, 215, 0.20);
+  --bg-button-hover: rgba(0, 110, 215, 0.32);
+
+  /* Borders */
+  --border-default: #C2C7CC;
+  --border-light: #EBEEF0;
+  --border-subtle: rgba(244, 244, 246, 0.12);
+
+  /* Text */
+  --text-primary: #F4F4F6;
+  --text-secondary: #656972;
+  --text-muted: #8D9399;
+  --text-on-accent: #FFFFFF;
+
+  /* Accent */
+  --accent-primary: #006ED7;
+  --accent-primary-hover: #0080F0;
+  --accent-primary-muted: rgba(0, 110, 215, 0.20);
+
+  /* Status */
+  --status-success: #20C62F;
+  --status-error: #DE1111;
+  --status-warning: #EAA301;
+  --status-info: #8D9399;
+  --status-purple: #8957E5;
+  --status-motion: #A855F7;
+
+  /* Overlays */
+  --overlay-dark: rgba(18, 24, 38, 0.60);
+  --overlay-panel: rgba(18, 24, 38, 0.85);
+
+  /* Spacing */
+  --space-xs: 4px;
+  --space-sm: 8px;
+  --space-md: 12px;
+  --space-lg: 16px;
+  --space-xl: 24px;
+  --space-2xl: 32px;
+
+  /* Radii */
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+
+  /* Shadows */
+  --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.4);
+  --shadow-focus: 0 0 0 3px rgba(0, 110, 215, 0.25);
+
+  /* Typography */
+  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+}
+```
+
+---
+
+## 8. Applying This System
+
+When starting any new UI:
+
+1. Set `body { background: var(--bg-app); color: var(--text-primary); font-family: var(--font-family); }`
+2. Use `--bg-surface` (`#181F32`) for any card or container — not a custom gray
+3. Use `--accent-primary` (`#006ED7`) for links, active states, and primary actions
+4. Use `--bg-button` / `--bg-button-hover` for secondary buttons
+5. Apply hover/active states using the brand blue opacity scale
+6. Pick status colors from the status tokens — `#20C62F` green, `#DE1111` red, `#EAA301` orange
+7. Keep transitions ≤ 250ms and functional
+8. Use Lucide outline icons at 1.5px stroke weight
+
+This system works for dashboards, forms, data tables, settings pages, tools,
+admin panels, extensions, or any other interface. The layout is yours —
+the colors, type, and component feel are Alta.
diff --git a/requirements.txt b/requirements.txt
new file mode 100644
index 0000000..e3562d5
--- /dev/null
+++ b/requirements.txt
@@ -0,0 +1,3 @@
+flask
+requests
+gunicorn
diff --git a/static/jszip.min.js b/static/jszip.min.js
new file mode 100644
index 0000000..ff4cfd5
--- /dev/null
+++ b/static/jszip.min.js
@@ -0,0 +1,13 @@
+/*!
+
+JSZip v3.10.1 - A JavaScript class for generating and reading zip files
+<http://stuartk.com/jszip>
+
+(c) 2009-2016 Stuart Knightley <stuart [at] stuartk.com>
+Dual licenced under the MIT license or GPLv3. See https://raw.github.com/Stuk/jszip/main/LICENSE.markdown.
+
+JSZip uses the library pako released under the MIT license :
+https://github.com/nodeca/pako/blob/main/LICENSE
+*/
+
+!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{("undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this).JSZip=e()}}(function(){return function s(a,o,h){function u(r,e){if(!o[r]){if(!a[r]){var t="function"==typeof require&&require;if(!e&&t)return t(r,!0);if(l)return l(r,!0);var n=new Error("Cannot find module '"+r+"'");throw n.code="MODULE_NOT_FOUND",n}var i=o[r]={exports:{}};a[r][0].call(i.exports,function(e){var t=a[r][1][e];return u(t||e)},i,i.exports,s,a,o,h)}return o[r].exports}for(var l="function"==typeof require&&require,e=0;e<h.length;e++)u(h[e]);return u}({1:[function(e,t,r){"use strict";var d=e("./utils"),c=e("./support"),p="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";r.encode=function(e){for(var t,r,n,i,s,a,o,h=[],u=0,l=e.length,f=l,c="string"!==d.getTypeOf(e);u<e.length;)f=l-u,n=c?(t=e[u++],r=u<l?e[u++]:0,u<l?e[u++]:0):(t=e.charCodeAt(u++),r=u<l?e.charCodeAt(u++):0,u<l?e.charCodeAt(u++):0),i=t>>2,s=(3&t)<<4|r>>4,a=1<f?(15&r)<<2|n>>6:64,o=2<f?63&n:64,h.push(p.charAt(i)+p.charAt(s)+p.charAt(a)+p.charAt(o));return h.join("")},r.decode=function(e){var t,r,n,i,s,a,o=0,h=0,u="data:";if(e.substr(0,u.length)===u)throw new Error("Invalid base64 input, it looks like a data url.");var l,f=3*(e=e.replace(/[^A-Za-z0-9+/=]/g,"")).length/4;if(e.charAt(e.length-1)===p.charAt(64)&&f--,e.charAt(e.length-2)===p.charAt(64)&&f--,f%1!=0)throw new Error("Invalid base64 input, bad content length.");for(l=c.uint8array?new Uint8Array(0|f):new Array(0|f);o<e.length;)t=p.indexOf(e.charAt(o++))<<2|(i=p.indexOf(e.charAt(o++)))>>4,r=(15&i)<<4|(s=p.indexOf(e.charAt(o++)))>>2,n=(3&s)<<6|(a=p.indexOf(e.charAt(o++))),l[h++]=t,64!==s&&(l[h++]=r),64!==a&&(l[h++]=n);return l}},{"./support":30,"./utils":32}],2:[function(e,t,r){"use strict";var n=e("./external"),i=e("./stream/DataWorker"),s=e("./stream/Crc32Probe"),a=e("./stream/DataLengthProbe");function o(e,t,r,n,i){this.compressedSize=e,this.uncompressedSize=t,this.crc32=r,this.compression=n,this.compressedContent=i}o.prototype={getContentWorker:function(){var e=new i(n.Promise.resolve(this.compressedContent)).pipe(this.compression.uncompressWorker()).pipe(new a("data_length")),t=this;return e.on("end",function(){if(this.streamInfo.data_length!==t.uncompressedSize)throw new Error("Bug : uncompressed data size mismatch")}),e},getCompressedWorker:function(){return new i(n.Promise.resolve(this.compressedContent)).withStreamInfo("compressedSize",this.compressedSize).withStreamInfo("uncompressedSize",this.uncompressedSize).withStreamInfo("crc32",this.crc32).withStreamInfo("compression",this.compression)}},o.createWorkerFrom=function(e,t,r){return e.pipe(new s).pipe(new a("uncompressedSize")).pipe(t.compressWorker(r)).pipe(new a("compressedSize")).withStreamInfo("compression",t)},t.exports=o},{"./external":6,"./stream/Crc32Probe":25,"./stream/DataLengthProbe":26,"./stream/DataWorker":27}],3:[function(e,t,r){"use strict";var n=e("./stream/GenericWorker");r.STORE={magic:"\0\0",compressWorker:function(){return new n("STORE compression")},uncompressWorker:function(){return new n("STORE decompression")}},r.DEFLATE=e("./flate")},{"./flate":7,"./stream/GenericWorker":28}],4:[function(e,t,r){"use strict";var n=e("./utils");var o=function(){for(var e,t=[],r=0;r<256;r++){e=r;for(var n=0;n<8;n++)e=1&e?3988292384^e>>>1:e>>>1;t[r]=e}return t}();t.exports=function(e,t){return void 0!==e&&e.length?"string"!==n.getTypeOf(e)?function(e,t,r,n){var i=o,s=n+r;e^=-1;for(var a=n;a<s;a++)e=e>>>8^i[255&(e^t[a])];return-1^e}(0|t,e,e.length,0):function(e,t,r,n){var i=o,s=n+r;e^=-1;for(var a=n;a<s;a++)e=e>>>8^i[255&(e^t.charCodeAt(a))];return-1^e}(0|t,e,e.length,0):0}},{"./utils":32}],5:[function(e,t,r){"use strict";r.base64=!1,r.binary=!1,r.dir=!1,r.createFolders=!0,r.date=null,r.compression=null,r.compressionOptions=null,r.comment=null,r.unixPermissions=null,r.dosPermissions=null},{}],6:[function(e,t,r){"use strict";var n=null;n="undefined"!=typeof Promise?Promise:e("lie"),t.exports={Promise:n}},{lie:37}],7:[function(e,t,r){"use strict";var n="undefined"!=typeof Uint8Array&&"undefined"!=typeof Uint16Array&&"undefined"!=typeof Uint32Array,i=e("pako"),s=e("./utils"),a=e("./stream/GenericWorker"),o=n?"uint8array":"array";function h(e,t){a.call(this,"FlateWorker/"+e),this._pako=null,this._pakoAction=e,this._pakoOptions=t,this.meta={}}r.magic="\b\0",s.inherits(h,a),h.prototype.processChunk=function(e){this.meta=e.meta,null===this._pako&&this._createPako(),this._pako.push(s.transformTo(o,e.data),!1)},h.prototype.flush=function(){a.prototype.flush.call(this),null===this._pako&&this._createPako(),this._pako.push([],!0)},h.prototype.cleanUp=function(){a.prototype.cleanUp.call(this),this._pako=null},h.prototype._createPako=function(){this._pako=new i[this._pakoAction]({raw:!0,level:this._pakoOptions.level||-1});var t=this;this._pako.onData=function(e){t.push({data:e,meta:t.meta})}},r.compressWorker=function(e){return new h("Deflate",e)},r.uncompressWorker=function(){return new h("Inflate",{})}},{"./stream/GenericWorker":28,"./utils":32,pako:38}],8:[function(e,t,r){"use strict";function A(e,t){var r,n="";for(r=0;r<t;r++)n+=String.fromCharCode(255&e),e>>>=8;return n}function n(e,t,r,n,i,s){var a,o,h=e.file,u=e.compression,l=s!==O.utf8encode,f=I.transformTo("string",s(h.name)),c=I.transformTo("string",O.utf8encode(h.name)),d=h.comment,p=I.transformTo("string",s(d)),m=I.transformTo("string",O.utf8encode(d)),_=c.length!==h.name.length,g=m.length!==d.length,b="",v="",y="",w=h.dir,k=h.date,x={crc32:0,compressedSize:0,uncompressedSize:0};t&&!r||(x.crc32=e.crc32,x.compressedSize=e.compressedSize,x.uncompressedSize=e.uncompressedSize);var S=0;t&&(S|=8),l||!_&&!g||(S|=2048);var z=0,C=0;w&&(z|=16),"UNIX"===i?(C=798,z|=function(e,t){var r=e;return e||(r=t?16893:33204),(65535&r)<<16}(h.unixPermissions,w)):(C=20,z|=function(e){return 63&(e||0)}(h.dosPermissions)),a=k.getUTCHours(),a<<=6,a|=k.getUTCMinutes(),a<<=5,a|=k.getUTCSeconds()/2,o=k.getUTCFullYear()-1980,o<<=4,o|=k.getUTCMonth()+1,o<<=5,o|=k.getUTCDate(),_&&(v=A(1,1)+A(B(f),4)+c,b+="up"+A(v.length,2)+v),g&&(y=A(1,1)+A(B(p),4)+m,b+="uc"+A(y.length,2)+y);var E="";return E+="\n\0",E+=A(S,2),E+=u.magic,E+=A(a,2),E+=A(o,2),E+=A(x.crc32,4),E+=A(x.compressedSize,4),E+=A(x.uncompressedSize,4),E+=A(f.length,2),E+=A(b.length,2),{fileRecord:R.LOCAL_FILE_HEADER+E+f+b,dirRecord:R.CENTRAL_FILE_HEADER+A(C,2)+E+A(p.length,2)+"\0\0\0\0"+A(z,4)+A(n,4)+f+b+p}}var I=e("../utils"),i=e("../stream/GenericWorker"),O=e("../utf8"),B=e("../crc32"),R=e("../signature");function s(e,t,r,n){i.call(this,"ZipFileWorker"),this.bytesWritten=0,this.zipComment=t,this.zipPlatform=r,this.encodeFileName=n,this.streamFiles=e,this.accumulate=!1,this.contentBuffer=[],this.dirRecords=[],this.currentSourceOffset=0,this.entriesCount=0,this.currentFile=null,this._sources=[]}I.inherits(s,i),s.prototype.push=function(e){var t=e.meta.percent||0,r=this.entriesCount,n=this._sources.length;this.accumulate?this.contentBuffer.push(e):(this.bytesWritten+=e.data.length,i.prototype.push.call(this,{data:e.data,meta:{currentFile:this.currentFile,percent:r?(t+100*(r-n-1))/r:100}}))},s.prototype.openedSource=function(e){this.currentSourceOffset=this.bytesWritten,this.currentFile=e.file.name;var t=this.streamFiles&&!e.file.dir;if(t){var r=n(e,t,!1,this.currentSourceOffset,this.zipPlatform,this.encodeFileName);this.push({data:r.fileRecord,meta:{percent:0}})}else this.accumulate=!0},s.prototype.closedSource=function(e){this.accumulate=!1;var t=this.streamFiles&&!e.file.dir,r=n(e,t,!0,this.currentSourceOffset,this.zipPlatform,this.encodeFileName);if(this.dirRecords.push(r.dirRecord),t)this.push({data:function(e){return R.DATA_DESCRIPTOR+A(e.crc32,4)+A(e.compressedSize,4)+A(e.uncompressedSize,4)}(e),meta:{percent:100}});else for(this.push({data:r.fileRecord,meta:{percent:0}});this.contentBuffer.length;)this.push(this.contentBuffer.shift());this.currentFile=null},s.prototype.flush=function(){for(var e=this.bytesWritten,t=0;t<this.dirRecords.length;t++)this.push({data:this.dirRecords[t],meta:{percent:100}});var r=this.bytesWritten-e,n=function(e,t,r,n,i){var s=I.transformTo("string",i(n));return R.CENTRAL_DIRECTORY_END+"\0\0\0\0"+A(e,2)+A(e,2)+A(t,4)+A(r,4)+A(s.length,2)+s}(this.dirRecords.length,r,e,this.zipComment,this.encodeFileName);this.push({data:n,meta:{percent:100}})},s.prototype.prepareNextSource=function(){this.previous=this._sources.shift(),this.openedSource(this.previous.streamInfo),this.isPaused?this.previous.pause():this.previous.resume()},s.prototype.registerPrevious=function(e){this._sources.push(e);var t=this;return e.on("data",function(e){t.processChunk(e)}),e.on("end",function(){t.closedSource(t.previous.streamInfo),t._sources.length?t.prepareNextSource():t.end()}),e.on("error",function(e){t.error(e)}),this},s.prototype.resume=function(){return!!i.prototype.resume.call(this)&&(!this.previous&&this._sources.length?(this.prepareNextSource(),!0):this.previous||this._sources.length||this.generatedError?void 0:(this.end(),!0))},s.prototype.error=function(e){var t=this._sources;if(!i.prototype.error.call(this,e))return!1;for(var r=0;r<t.length;r++)try{t[r].error(e)}catch(e){}return!0},s.prototype.lock=function(){i.prototype.lock.call(this);for(var e=this._sources,t=0;t<e.length;t++)e[t].lock()},t.exports=s},{"../crc32":4,"../signature":23,"../stream/GenericWorker":28,"../utf8":31,"../utils":32}],9:[function(e,t,r){"use strict";var u=e("../compressions"),n=e("./ZipFileWorker");r.generateWorker=function(e,a,t){var o=new n(a.streamFiles,t,a.platform,a.encodeFileName),h=0;try{e.forEach(function(e,t){h++;var r=function(e,t){var r=e||t,n=u[r];if(!n)throw new Error(r+" is not a valid compression method !");return n}(t.options.compression,a.compression),n=t.options.compressionOptions||a.compressionOptions||{},i=t.dir,s=t.date;t._compressWorker(r,n).withStreamInfo("file",{name:e,dir:i,date:s,comment:t.comment||"",unixPermissions:t.unixPermissions,dosPermissions:t.dosPermissions}).pipe(o)}),o.entriesCount=h}catch(e){o.error(e)}return o}},{"../compressions":3,"./ZipFileWorker":8}],10:[function(e,t,r){"use strict";function n(){if(!(this instanceof n))return new n;if(arguments.length)throw new Error("The constructor with parameters has been removed in JSZip 3.0, please check the upgrade guide.");this.files=Object.create(null),this.comment=null,this.root="",this.clone=function(){var e=new n;for(var t in this)"function"!=typeof this[t]&&(e[t]=this[t]);return e}}(n.prototype=e("./object")).loadAsync=e("./load"),n.support=e("./support"),n.defaults=e("./defaults"),n.version="3.10.1",n.loadAsync=function(e,t){return(new n).loadAsync(e,t)},n.external=e("./external"),t.exports=n},{"./defaults":5,"./external":6,"./load":11,"./object":15,"./support":30}],11:[function(e,t,r){"use strict";var u=e("./utils"),i=e("./external"),n=e("./utf8"),s=e("./zipEntries"),a=e("./stream/Crc32Probe"),l=e("./nodejsUtils");function f(n){return new i.Promise(function(e,t){var r=n.decompressed.getContentWorker().pipe(new a);r.on("error",function(e){t(e)}).on("end",function(){r.streamInfo.crc32!==n.decompressed.crc32?t(new Error("Corrupted zip : CRC32 mismatch")):e()}).resume()})}t.exports=function(e,o){var h=this;return o=u.extend(o||{},{base64:!1,checkCRC32:!1,optimizedBinaryString:!1,createFolders:!1,decodeFileName:n.utf8decode}),l.isNode&&l.isStream(e)?i.Promise.reject(new Error("JSZip can't accept a stream when loading a zip file.")):u.prepareContent("the loaded zip file",e,!0,o.optimizedBinaryString,o.base64).then(function(e){var t=new s(o);return t.load(e),t}).then(function(e){var t=[i.Promise.resolve(e)],r=e.files;if(o.checkCRC32)for(var n=0;n<r.length;n++)t.push(f(r[n]));return i.Promise.all(t)}).then(function(e){for(var t=e.shift(),r=t.files,n=0;n<r.length;n++){var i=r[n],s=i.fileNameStr,a=u.resolve(i.fileNameStr);h.file(a,i.decompressed,{binary:!0,optimizedBinaryString:!0,date:i.date,dir:i.dir,comment:i.fileCommentStr.length?i.fileCommentStr:null,unixPermissions:i.unixPermissions,dosPermissions:i.dosPermissions,createFolders:o.createFolders}),i.dir||(h.file(a).unsafeOriginalName=s)}return t.zipComment.length&&(h.comment=t.zipComment),h})}},{"./external":6,"./nodejsUtils":14,"./stream/Crc32Probe":25,"./utf8":31,"./utils":32,"./zipEntries":33}],12:[function(e,t,r){"use strict";var n=e("../utils"),i=e("../stream/GenericWorker");function s(e,t){i.call(this,"Nodejs stream input adapter for "+e),this._upstreamEnded=!1,this._bindStream(t)}n.inherits(s,i),s.prototype._bindStream=function(e){var t=this;(this._stream=e).pause(),e.on("data",function(e){t.push({data:e,meta:{percent:0}})}).on("error",function(e){t.isPaused?this.generatedError=e:t.error(e)}).on("end",function(){t.isPaused?t._upstreamEnded=!0:t.end()})},s.prototype.pause=function(){return!!i.prototype.pause.call(this)&&(this._stream.pause(),!0)},s.prototype.resume=function(){return!!i.prototype.resume.call(this)&&(this._upstreamEnded?this.end():this._stream.resume(),!0)},t.exports=s},{"../stream/GenericWorker":28,"../utils":32}],13:[function(e,t,r){"use strict";var i=e("readable-stream").Readable;function n(e,t,r){i.call(this,t),this._helper=e;var n=this;e.on("data",function(e,t){n.push(e)||n._helper.pause(),r&&r(t)}).on("error",function(e){n.emit("error",e)}).on("end",function(){n.push(null)})}e("../utils").inherits(n,i),n.prototype._read=function(){this._helper.resume()},t.exports=n},{"../utils":32,"readable-stream":16}],14:[function(e,t,r){"use strict";t.exports={isNode:"undefined"!=typeof Buffer,newBufferFrom:function(e,t){if(Buffer.from&&Buffer.from!==Uint8Array.from)return Buffer.from(e,t);if("number"==typeof e)throw new Error('The "data" argument must not be a number');return new Buffer(e,t)},allocBuffer:function(e){if(Buffer.alloc)return Buffer.alloc(e);var t=new Buffer(e);return t.fill(0),t},isBuffer:function(e){return Buffer.isBuffer(e)},isStream:function(e){return e&&"function"==typeof e.on&&"function"==typeof e.pause&&"function"==typeof e.resume}}},{}],15:[function(e,t,r){"use strict";function s(e,t,r){var n,i=u.getTypeOf(t),s=u.extend(r||{},f);s.date=s.date||new Date,null!==s.compression&&(s.compression=s.compression.toUpperCase()),"string"==typeof s.unixPermissions&&(s.unixPermissions=parseInt(s.unixPermissions,8)),s.unixPermissions&&16384&s.unixPermissions&&(s.dir=!0),s.dosPermissions&&16&s.dosPermissions&&(s.dir=!0),s.dir&&(e=g(e)),s.createFolders&&(n=_(e))&&b.call(this,n,!0);var a="string"===i&&!1===s.binary&&!1===s.base64;r&&void 0!==r.binary||(s.binary=!a),(t instanceof c&&0===t.uncompressedSize||s.dir||!t||0===t.length)&&(s.base64=!1,s.binary=!0,t="",s.compression="STORE",i="string");var o=null;o=t instanceof c||t instanceof l?t:p.isNode&&p.isStream(t)?new m(e,t):u.prepareContent(e,t,s.binary,s.optimizedBinaryString,s.base64);var h=new d(e,o,s);this.files[e]=h}var i=e("./utf8"),u=e("./utils"),l=e("./stream/GenericWorker"),a=e("./stream/StreamHelper"),f=e("./defaults"),c=e("./compressedObject"),d=e("./zipObject"),o=e("./generate"),p=e("./nodejsUtils"),m=e("./nodejs/NodejsStreamInputAdapter"),_=function(e){"/"===e.slice(-1)&&(e=e.substring(0,e.length-1));var t=e.lastIndexOf("/");return 0<t?e.substring(0,t):""},g=function(e){return"/"!==e.slice(-1)&&(e+="/"),e},b=function(e,t){return t=void 0!==t?t:f.createFolders,e=g(e),this.files[e]||s.call(this,e,null,{dir:!0,createFolders:t}),this.files[e]};function h(e){return"[object RegExp]"===Object.prototype.toString.call(e)}var n={load:function(){throw new Error("This method has been removed in JSZip 3.0, please check the upgrade guide.")},forEach:function(e){var t,r,n;for(t in this.files)n=this.files[t],(r=t.slice(this.root.length,t.length))&&t.slice(0,this.root.length)===this.root&&e(r,n)},filter:function(r){var n=[];return this.forEach(function(e,t){r(e,t)&&n.push(t)}),n},file:function(e,t,r){if(1!==arguments.length)return e=this.root+e,s.call(this,e,t,r),this;if(h(e)){var n=e;return this.filter(function(e,t){return!t.dir&&n.test(e)})}var i=this.files[this.root+e];return i&&!i.dir?i:null},folder:function(r){if(!r)return this;if(h(r))return this.filter(function(e,t){return t.dir&&r.test(e)});var e=this.root+r,t=b.call(this,e),n=this.clone();return n.root=t.name,n},remove:function(r){r=this.root+r;var e=this.files[r];if(e||("/"!==r.slice(-1)&&(r+="/"),e=this.files[r]),e&&!e.dir)delete this.files[r];else for(var t=this.filter(function(e,t){return t.name.slice(0,r.length)===r}),n=0;n<t.length;n++)delete this.files[t[n].name];return this},generate:function(){throw new Error("This method has been removed in JSZip 3.0, please check the upgrade guide.")},generateInternalStream:function(e){var t,r={};try{if((r=u.extend(e||{},{streamFiles:!1,compression:"STORE",compressionOptions:null,type:"",platform:"DOS",comment:null,mimeType:"application/zip",encodeFileName:i.utf8encode})).type=r.type.toLowerCase(),r.compression=r.compression.toUpperCase(),"binarystring"===r.type&&(r.type="string"),!r.type)throw new Error("No output type specified.");u.checkSupport(r.type),"darwin"!==r.platform&&"freebsd"!==r.platform&&"linux"!==r.platform&&"sunos"!==r.platform||(r.platform="UNIX"),"win32"===r.platform&&(r.platform="DOS");var n=r.comment||this.comment||"";t=o.generateWorker(this,r,n)}catch(e){(t=new l("error")).error(e)}return new a(t,r.type||"string",r.mimeType)},generateAsync:function(e,t){return this.generateInternalStream(e).accumulate(t)},generateNodeStream:function(e,t){return(e=e||{}).type||(e.type="nodebuffer"),this.generateInternalStream(e).toNodejsStream(t)}};t.exports=n},{"./compressedObject":2,"./defaults":5,"./generate":9,"./nodejs/NodejsStreamInputAdapter":12,"./nodejsUtils":14,"./stream/GenericWorker":28,"./stream/StreamHelper":29,"./utf8":31,"./utils":32,"./zipObject":35}],16:[function(e,t,r){"use strict";t.exports=e("stream")},{stream:void 0}],17:[function(e,t,r){"use strict";var n=e("./DataReader");function i(e){n.call(this,e);for(var t=0;t<this.data.length;t++)e[t]=255&e[t]}e("../utils").inherits(i,n),i.prototype.byteAt=function(e){return this.data[this.zero+e]},i.prototype.lastIndexOfSignature=function(e){for(var t=e.charCodeAt(0),r=e.charCodeAt(1),n=e.charCodeAt(2),i=e.charCodeAt(3),s=this.length-4;0<=s;--s)if(this.data[s]===t&&this.data[s+1]===r&&this.data[s+2]===n&&this.data[s+3]===i)return s-this.zero;return-1},i.prototype.readAndCheckSignature=function(e){var t=e.charCodeAt(0),r=e.charCodeAt(1),n=e.charCodeAt(2),i=e.charCodeAt(3),s=this.readData(4);return t===s[0]&&r===s[1]&&n===s[2]&&i===s[3]},i.prototype.readData=function(e){if(this.checkOffset(e),0===e)return[];var t=this.data.slice(this.zero+this.index,this.zero+this.index+e);return this.index+=e,t},t.exports=i},{"../utils":32,"./DataReader":18}],18:[function(e,t,r){"use strict";var n=e("../utils");function i(e){this.data=e,this.length=e.length,this.index=0,this.zero=0}i.prototype={checkOffset:function(e){this.checkIndex(this.index+e)},checkIndex:function(e){if(this.length<this.zero+e||e<0)throw new Error("End of data reached (data length = "+this.length+", asked index = "+e+"). Corrupted zip ?")},setIndex:function(e){this.checkIndex(e),this.index=e},skip:function(e){this.setIndex(this.index+e)},byteAt:function(){},readInt:function(e){var t,r=0;for(this.checkOffset(e),t=this.index+e-1;t>=this.index;t--)r=(r<<8)+this.byteAt(t);return this.index+=e,r},readString:function(e){return n.transformTo("string",this.readData(e))},readData:function(){},lastIndexOfSignature:function(){},readAndCheckSignature:function(){},readDate:function(){var e=this.readInt(4);return new Date(Date.UTC(1980+(e>>25&127),(e>>21&15)-1,e>>16&31,e>>11&31,e>>5&63,(31&e)<<1))}},t.exports=i},{"../utils":32}],19:[function(e,t,r){"use strict";var n=e("./Uint8ArrayReader");function i(e){n.call(this,e)}e("../utils").inherits(i,n),i.prototype.readData=function(e){this.checkOffset(e);var t=this.data.slice(this.zero+this.index,this.zero+this.index+e);return this.index+=e,t},t.exports=i},{"../utils":32,"./Uint8ArrayReader":21}],20:[function(e,t,r){"use strict";var n=e("./DataReader");function i(e){n.call(this,e)}e("../utils").inherits(i,n),i.prototype.byteAt=function(e){return this.data.charCodeAt(this.zero+e)},i.prototype.lastIndexOfSignature=function(e){return this.data.lastIndexOf(e)-this.zero},i.prototype.readAndCheckSignature=function(e){return e===this.readData(4)},i.prototype.readData=function(e){this.checkOffset(e);var t=this.data.slice(this.zero+this.index,this.zero+this.index+e);return this.index+=e,t},t.exports=i},{"../utils":32,"./DataReader":18}],21:[function(e,t,r){"use strict";var n=e("./ArrayReader");function i(e){n.call(this,e)}e("../utils").inherits(i,n),i.prototype.readData=function(e){if(this.checkOffset(e),0===e)return new Uint8Array(0);var t=this.data.subarray(this.zero+this.index,this.zero+this.index+e);return this.index+=e,t},t.exports=i},{"../utils":32,"./ArrayReader":17}],22:[function(e,t,r){"use strict";var n=e("../utils"),i=e("../support"),s=e("./ArrayReader"),a=e("./StringReader"),o=e("./NodeBufferReader"),h=e("./Uint8ArrayReader");t.exports=function(e){var t=n.getTypeOf(e);return n.checkSupport(t),"string"!==t||i.uint8array?"nodebuffer"===t?new o(e):i.uint8array?new h(n.transformTo("uint8array",e)):new s(n.transformTo("array",e)):new a(e)}},{"../support":30,"../utils":32,"./ArrayReader":17,"./NodeBufferReader":19,"./StringReader":20,"./Uint8ArrayReader":21}],23:[function(e,t,r){"use strict";r.LOCAL_FILE_HEADER="PK",r.CENTRAL_FILE_HEADER="PK
",r.CENTRAL_DIRECTORY_END="PK",r.ZIP64_CENTRAL_DIRECTORY_LOCATOR="PK",r.ZIP64_CENTRAL_DIRECTORY_END="PK",r.DATA_DESCRIPTOR="PK\b"},{}],24:[function(e,t,r){"use strict";var n=e("./GenericWorker"),i=e("../utils");function s(e){n.call(this,"ConvertWorker to "+e),this.destType=e}i.inherits(s,n),s.prototype.processChunk=function(e){this.push({data:i.transformTo(this.destType,e.data),meta:e.meta})},t.exports=s},{"../utils":32,"./GenericWorker":28}],25:[function(e,t,r){"use strict";var n=e("./GenericWorker"),i=e("../crc32");function s(){n.call(this,"Crc32Probe"),this.withStreamInfo("crc32",0)}e("../utils").inherits(s,n),s.prototype.processChunk=function(e){this.streamInfo.crc32=i(e.data,this.streamInfo.crc32||0),this.push(e)},t.exports=s},{"../crc32":4,"../utils":32,"./GenericWorker":28}],26:[function(e,t,r){"use strict";var n=e("../utils"),i=e("./GenericWorker");function s(e){i.call(this,"DataLengthProbe for "+e),this.propName=e,this.withStreamInfo(e,0)}n.inherits(s,i),s.prototype.processChunk=function(e){if(e){var t=this.streamInfo[this.propName]||0;this.streamInfo[this.propName]=t+e.data.length}i.prototype.processChunk.call(this,e)},t.exports=s},{"../utils":32,"./GenericWorker":28}],27:[function(e,t,r){"use strict";var n=e("../utils"),i=e("./GenericWorker");function s(e){i.call(this,"DataWorker");var t=this;this.dataIsReady=!1,this.index=0,this.max=0,this.data=null,this.type="",this._tickScheduled=!1,e.then(function(e){t.dataIsReady=!0,t.data=e,t.max=e&&e.length||0,t.type=n.getTypeOf(e),t.isPaused||t._tickAndRepeat()},function(e){t.error(e)})}n.inherits(s,i),s.prototype.cleanUp=function(){i.prototype.cleanUp.call(this),this.data=null},s.prototype.resume=function(){return!!i.prototype.resume.call(this)&&(!this._tickScheduled&&this.dataIsReady&&(this._tickScheduled=!0,n.delay(this._tickAndRepeat,[],this)),!0)},s.prototype._tickAndRepeat=function(){this._tickScheduled=!1,this.isPaused||this.isFinished||(this._tick(),this.isFinished||(n.delay(this._tickAndRepeat,[],this),this._tickScheduled=!0))},s.prototype._tick=function(){if(this.isPaused||this.isFinished)return!1;var e=null,t=Math.min(this.max,this.index+16384);if(this.index>=this.max)return this.end();switch(this.type){case"string":e=this.data.substring(this.index,t);break;case"uint8array":e=this.data.subarray(this.index,t);break;case"array":case"nodebuffer":e=this.data.slice(this.index,t)}return this.index=t,this.push({data:e,meta:{percent:this.max?this.index/this.max*100:0}})},t.exports=s},{"../utils":32,"./GenericWorker":28}],28:[function(e,t,r){"use strict";function n(e){this.name=e||"default",this.streamInfo={},this.generatedError=null,this.extraStreamInfo={},this.isPaused=!0,this.isFinished=!1,this.isLocked=!1,this._listeners={data:[],end:[],error:[]},this.previous=null}n.prototype={push:function(e){this.emit("data",e)},end:function(){if(this.isFinished)return!1;this.flush();try{this.emit("end"),this.cleanUp(),this.isFinished=!0}catch(e){this.emit("error",e)}return!0},error:function(e){return!this.isFinished&&(this.isPaused?this.generatedError=e:(this.isFinished=!0,this.emit("error",e),this.previous&&this.previous.error(e),this.cleanUp()),!0)},on:function(e,t){return this._listeners[e].push(t),this},cleanUp:function(){this.streamInfo=this.generatedError=this.extraStreamInfo=null,this._listeners=[]},emit:function(e,t){if(this._listeners[e])for(var r=0;r<this._listeners[e].length;r++)this._listeners[e][r].call(this,t)},pipe:function(e){return e.registerPrevious(this)},registerPrevious:function(e){if(this.isLocked)throw new Error("The stream '"+this+"' has already been used.");this.streamInfo=e.streamInfo,this.mergeStreamInfo(),this.previous=e;var t=this;return e.on("data",function(e){t.processChunk(e)}),e.on("end",function(){t.end()}),e.on("error",function(e){t.error(e)}),this},pause:function(){return!this.isPaused&&!this.isFinished&&(this.isPaused=!0,this.previous&&this.previous.pause(),!0)},resume:function(){if(!this.isPaused||this.isFinished)return!1;var e=this.isPaused=!1;return this.generatedError&&(this.error(this.generatedError),e=!0),this.previous&&this.previous.resume(),!e},flush:function(){},processChunk:function(e){this.push(e)},withStreamInfo:function(e,t){return this.extraStreamInfo[e]=t,this.mergeStreamInfo(),this},mergeStreamInfo:function(){for(var e in this.extraStreamInfo)Object.prototype.hasOwnProperty.call(this.extraStreamInfo,e)&&(this.streamInfo[e]=this.extraStreamInfo[e])},lock:function(){if(this.isLocked)throw new Error("The stream '"+this+"' has already been used.");this.isLocked=!0,this.previous&&this.previous.lock()},toString:function(){var e="Worker "+this.name;return this.previous?this.previous+" -> "+e:e}},t.exports=n},{}],29:[function(e,t,r){"use strict";var h=e("../utils"),i=e("./ConvertWorker"),s=e("./GenericWorker"),u=e("../base64"),n=e("../support"),a=e("../external"),o=null;if(n.nodestream)try{o=e("../nodejs/NodejsStreamOutputAdapter")}catch(e){}function l(e,o){return new a.Promise(function(t,r){var n=[],i=e._internalType,s=e._outputType,a=e._mimeType;e.on("data",function(e,t){n.push(e),o&&o(t)}).on("error",function(e){n=[],r(e)}).on("end",function(){try{var e=function(e,t,r){switch(e){case"blob":return h.newBlob(h.transformTo("arraybuffer",t),r);case"base64":return u.encode(t);default:return h.transformTo(e,t)}}(s,function(e,t){var r,n=0,i=null,s=0;for(r=0;r<t.length;r++)s+=t[r].length;switch(e){case"string":return t.join("");case"array":return Array.prototype.concat.apply([],t);case"uint8array":for(i=new Uint8Array(s),r=0;r<t.length;r++)i.set(t[r],n),n+=t[r].length;return i;case"nodebuffer":return Buffer.concat(t);default:throw new Error("concat : unsupported type '"+e+"'")}}(i,n),a);t(e)}catch(e){r(e)}n=[]}).resume()})}function f(e,t,r){var n=t;switch(t){case"blob":case"arraybuffer":n="uint8array";break;case"base64":n="string"}try{this._internalType=n,this._outputType=t,this._mimeType=r,h.checkSupport(n),this._worker=e.pipe(new i(n)),e.lock()}catch(e){this._worker=new s("error"),this._worker.error(e)}}f.prototype={accumulate:function(e){return l(this,e)},on:function(e,t){var r=this;return"data"===e?this._worker.on(e,function(e){t.call(r,e.data,e.meta)}):this._worker.on(e,function(){h.delay(t,arguments,r)}),this},resume:function(){return h.delay(this._worker.resume,[],this._worker),this},pause:function(){return this._worker.pause(),this},toNodejsStream:function(e){if(h.checkSupport("nodestream"),"nodebuffer"!==this._outputType)throw new Error(this._outputType+" is not supported by this method");return new o(this,{objectMode:"nodebuffer"!==this._outputType},e)}},t.exports=f},{"../base64":1,"../external":6,"../nodejs/NodejsStreamOutputAdapter":13,"../support":30,"../utils":32,"./ConvertWorker":24,"./GenericWorker":28}],30:[function(e,t,r){"use strict";if(r.base64=!0,r.array=!0,r.string=!0,r.arraybuffer="undefined"!=typeof ArrayBuffer&&"undefined"!=typeof Uint8Array,r.nodebuffer="undefined"!=typeof Buffer,r.uint8array="undefined"!=typeof Uint8Array,"undefined"==typeof ArrayBuffer)r.blob=!1;else{var n=new ArrayBuffer(0);try{r.blob=0===new Blob([n],{type:"application/zip"}).size}catch(e){try{var i=new(self.BlobBuilder||self.WebKitBlobBuilder||self.MozBlobBuilder||self.MSBlobBuilder);i.append(n),r.blob=0===i.getBlob("application/zip").size}catch(e){r.blob=!1}}}try{r.nodestream=!!e("readable-stream").Readable}catch(e){r.nodestream=!1}},{"readable-stream":16}],31:[function(e,t,s){"use strict";for(var o=e("./utils"),h=e("./support"),r=e("./nodejsUtils"),n=e("./stream/GenericWorker"),u=new Array(256),i=0;i<256;i++)u[i]=252<=i?6:248<=i?5:240<=i?4:224<=i?3:192<=i?2:1;u[254]=u[254]=1;function a(){n.call(this,"utf-8 decode"),this.leftOver=null}function l(){n.call(this,"utf-8 encode")}s.utf8encode=function(e){return h.nodebuffer?r.newBufferFrom(e,"utf-8"):function(e){var t,r,n,i,s,a=e.length,o=0;for(i=0;i<a;i++)55296==(64512&(r=e.charCodeAt(i)))&&i+1<a&&56320==(64512&(n=e.charCodeAt(i+1)))&&(r=65536+(r-55296<<10)+(n-56320),i++),o+=r<128?1:r<2048?2:r<65536?3:4;for(t=h.uint8array?new Uint8Array(o):new Array(o),i=s=0;s<o;i++)55296==(64512&(r=e.charCodeAt(i)))&&i+1<a&&56320==(64512&(n=e.charCodeAt(i+1)))&&(r=65536+(r-55296<<10)+(n-56320),i++),r<128?t[s++]=r:(r<2048?t[s++]=192|r>>>6:(r<65536?t[s++]=224|r>>>12:(t[s++]=240|r>>>18,t[s++]=128|r>>>12&63),t[s++]=128|r>>>6&63),t[s++]=128|63&r);return t}(e)},s.utf8decode=function(e){return h.nodebuffer?o.transformTo("nodebuffer",e).toString("utf-8"):function(e){var t,r,n,i,s=e.length,a=new Array(2*s);for(t=r=0;t<s;)if((n=e[t++])<128)a[r++]=n;else if(4<(i=u[n]))a[r++]=65533,t+=i-1;else{for(n&=2===i?31:3===i?15:7;1<i&&t<s;)n=n<<6|63&e[t++],i--;1<i?a[r++]=65533:n<65536?a[r++]=n:(n-=65536,a[r++]=55296|n>>10&1023,a[r++]=56320|1023&n)}return a.length!==r&&(a.subarray?a=a.subarray(0,r):a.length=r),o.applyFromCharCode(a)}(e=o.transformTo(h.uint8array?"uint8array":"array",e))},o.inherits(a,n),a.prototype.processChunk=function(e){var t=o.transformTo(h.uint8array?"uint8array":"array",e.data);if(this.leftOver&&this.leftOver.length){if(h.uint8array){var r=t;(t=new Uint8Array(r.length+this.leftOver.length)).set(this.leftOver,0),t.set(r,this.leftOver.length)}else t=this.leftOver.concat(t);this.leftOver=null}var n=function(e,t){var r;for((t=t||e.length)>e.length&&(t=e.length),r=t-1;0<=r&&128==(192&e[r]);)r--;return r<0?t:0===r?t:r+u[e[r]]>t?r:t}(t),i=t;n!==t.length&&(h.uint8array?(i=t.subarray(0,n),this.leftOver=t.subarray(n,t.length)):(i=t.slice(0,n),this.leftOver=t.slice(n,t.length))),this.push({data:s.utf8decode(i),meta:e.meta})},a.prototype.flush=function(){this.leftOver&&this.leftOver.length&&(this.push({data:s.utf8decode(this.leftOver),meta:{}}),this.leftOver=null)},s.Utf8DecodeWorker=a,o.inherits(l,n),l.prototype.processChunk=function(e){this.push({data:s.utf8encode(e.data),meta:e.meta})},s.Utf8EncodeWorker=l},{"./nodejsUtils":14,"./stream/GenericWorker":28,"./support":30,"./utils":32}],32:[function(e,t,a){"use strict";var o=e("./support"),h=e("./base64"),r=e("./nodejsUtils"),u=e("./external");function n(e){return e}function l(e,t){for(var r=0;r<e.length;++r)t[r]=255&e.charCodeAt(r);return t}e("setimmediate"),a.newBlob=function(t,r){a.checkSupport("blob");try{return new Blob([t],{type:r})}catch(e){try{var n=new(self.BlobBuilder||self.WebKitBlobBuilder||self.MozBlobBuilder||self.MSBlobBuilder);return n.append(t),n.getBlob(r)}catch(e){throw new Error("Bug : can't construct the Blob.")}}};var i={stringifyByChunk:function(e,t,r){var n=[],i=0,s=e.length;if(s<=r)return String.fromCharCode.apply(null,e);for(;i<s;)"array"===t||"nodebuffer"===t?n.push(String.fromCharCode.apply(null,e.slice(i,Math.min(i+r,s)))):n.push(String.fromCharCode.apply(null,e.subarray(i,Math.min(i+r,s)))),i+=r;return n.join("")},stringifyByChar:function(e){for(var t="",r=0;r<e.length;r++)t+=String.fromCharCode(e[r]);return t},applyCanBeUsed:{uint8array:function(){try{return o.uint8array&&1===String.fromCharCode.apply(null,new Uint8Array(1)).length}catch(e){return!1}}(),nodebuffer:function(){try{return o.nodebuffer&&1===String.fromCharCode.apply(null,r.allocBuffer(1)).length}catch(e){return!1}}()}};function s(e){var t=65536,r=a.getTypeOf(e),n=!0;if("uint8array"===r?n=i.applyCanBeUsed.uint8array:"nodebuffer"===r&&(n=i.applyCanBeUsed.nodebuffer),n)for(;1<t;)try{return i.stringifyByChunk(e,r,t)}catch(e){t=Math.floor(t/2)}return i.stringifyByChar(e)}function f(e,t){for(var r=0;r<e.length;r++)t[r]=e[r];return t}a.applyFromCharCode=s;var c={};c.string={string:n,array:function(e){return l(e,new Array(e.length))},arraybuffer:function(e){return c.string.uint8array(e).buffer},uint8array:function(e){return l(e,new Uint8Array(e.length))},nodebuffer:function(e){return l(e,r.allocBuffer(e.length))}},c.array={string:s,array:n,arraybuffer:function(e){return new Uint8Array(e).buffer},uint8array:function(e){return new Uint8Array(e)},nodebuffer:function(e){return r.newBufferFrom(e)}},c.arraybuffer={string:function(e){return s(new Uint8Array(e))},array:function(e){return f(new Uint8Array(e),new Array(e.byteLength))},arraybuffer:n,uint8array:function(e){return new Uint8Array(e)},nodebuffer:function(e){return r.newBufferFrom(new Uint8Array(e))}},c.uint8array={string:s,array:function(e){return f(e,new Array(e.length))},arraybuffer:function(e){return e.buffer},uint8array:n,nodebuffer:function(e){return r.newBufferFrom(e)}},c.nodebuffer={string:s,array:function(e){return f(e,new Array(e.length))},arraybuffer:function(e){return c.nodebuffer.uint8array(e).buffer},uint8array:function(e){return f(e,new Uint8Array(e.length))},nodebuffer:n},a.transformTo=function(e,t){if(t=t||"",!e)return t;a.checkSupport(e);var r=a.getTypeOf(t);return c[r][e](t)},a.resolve=function(e){for(var t=e.split("/"),r=[],n=0;n<t.length;n++){var i=t[n];"."===i||""===i&&0!==n&&n!==t.length-1||(".."===i?r.pop():r.push(i))}return r.join("/")},a.getTypeOf=function(e){return"string"==typeof e?"string":"[object Array]"===Object.prototype.toString.call(e)?"array":o.nodebuffer&&r.isBuffer(e)?"nodebuffer":o.uint8array&&e instanceof Uint8Array?"uint8array":o.arraybuffer&&e instanceof ArrayBuffer?"arraybuffer":void 0},a.checkSupport=function(e){if(!o[e.toLowerCase()])throw new Error(e+" is not supported by this platform")},a.MAX_VALUE_16BITS=65535,a.MAX_VALUE_32BITS=-1,a.pretty=function(e){var t,r,n="";for(r=0;r<(e||"").length;r++)n+="\\x"+((t=e.charCodeAt(r))<16?"0":"")+t.toString(16).toUpperCase();return n},a.delay=function(e,t,r){setImmediate(function(){e.apply(r||null,t||[])})},a.inherits=function(e,t){function r(){}r.prototype=t.prototype,e.prototype=new r},a.extend=function(){var e,t,r={};for(e=0;e<arguments.length;e++)for(t in arguments[e])Object.prototype.hasOwnProperty.call(arguments[e],t)&&void 0===r[t]&&(r[t]=arguments[e][t]);return r},a.prepareContent=function(r,e,n,i,s){return u.Promise.resolve(e).then(function(n){return o.blob&&(n instanceof Blob||-1!==["[object File]","[object Blob]"].indexOf(Object.prototype.toString.call(n)))&&"undefined"!=typeof FileReader?new u.Promise(function(t,r){var e=new FileReader;e.onload=function(e){t(e.target.result)},e.onerror=function(e){r(e.target.error)},e.readAsArrayBuffer(n)}):n}).then(function(e){var t=a.getTypeOf(e);return t?("arraybuffer"===t?e=a.transformTo("uint8array",e):"string"===t&&(s?e=h.decode(e):n&&!0!==i&&(e=function(e){return l(e,o.uint8array?new Uint8Array(e.length):new Array(e.length))}(e))),e):u.Promise.reject(new Error("Can't read the data of '"+r+"'. Is it in a supported JavaScript type (String, Blob, ArrayBuffer, etc) ?"))})}},{"./base64":1,"./external":6,"./nodejsUtils":14,"./support":30,setimmediate:54}],33:[function(e,t,r){"use strict";var n=e("./reader/readerFor"),i=e("./utils"),s=e("./signature"),a=e("./zipEntry"),o=e("./support");function h(e){this.files=[],this.loadOptions=e}h.prototype={checkSignature:function(e){if(!this.reader.readAndCheckSignature(e)){this.reader.index-=4;var t=this.reader.readString(4);throw new Error("Corrupted zip or bug: unexpected signature ("+i.pretty(t)+", expected "+i.pretty(e)+")")}},isSignature:function(e,t){var r=this.reader.index;this.reader.setIndex(e);var n=this.reader.readString(4)===t;return this.reader.setIndex(r),n},readBlockEndOfCentral:function(){this.diskNumber=this.reader.readInt(2),this.diskWithCentralDirStart=this.reader.readInt(2),this.centralDirRecordsOnThisDisk=this.reader.readInt(2),this.centralDirRecords=this.reader.readInt(2),this.centralDirSize=this.reader.readInt(4),this.centralDirOffset=this.reader.readInt(4),this.zipCommentLength=this.reader.readInt(2);var e=this.reader.readData(this.zipCommentLength),t=o.uint8array?"uint8array":"array",r=i.transformTo(t,e);this.zipComment=this.loadOptions.decodeFileName(r)},readBlockZip64EndOfCentral:function(){this.zip64EndOfCentralSize=this.reader.readInt(8),this.reader.skip(4),this.diskNumber=this.reader.readInt(4),this.diskWithCentralDirStart=this.reader.readInt(4),this.centralDirRecordsOnThisDisk=this.reader.readInt(8),this.centralDirRecords=this.reader.readInt(8),this.centralDirSize=this.reader.readInt(8),this.centralDirOffset=this.reader.readInt(8),this.zip64ExtensibleData={};for(var e,t,r,n=this.zip64EndOfCentralSize-44;0<n;)e=this.reader.readInt(2),t=this.reader.readInt(4),r=this.reader.readData(t),this.zip64ExtensibleData[e]={id:e,length:t,value:r}},readBlockZip64EndOfCentralLocator:function(){if(this.diskWithZip64CentralDirStart=this.reader.readInt(4),this.relativeOffsetEndOfZip64CentralDir=this.reader.readInt(8),this.disksCount=this.reader.readInt(4),1<this.disksCount)throw new Error("Multi-volumes zip are not supported")},readLocalFiles:function(){var e,t;for(e=0;e<this.files.length;e++)t=this.files[e],this.reader.setIndex(t.localHeaderOffset),this.checkSignature(s.LOCAL_FILE_HEADER),t.readLocalPart(this.reader),t.handleUTF8(),t.processAttributes()},readCentralDir:function(){var e;for(this.reader.setIndex(this.centralDirOffset);this.reader.readAndCheckSignature(s.CENTRAL_FILE_HEADER);)(e=new a({zip64:this.zip64},this.loadOptions)).readCentralPart(this.reader),this.files.push(e);if(this.centralDirRecords!==this.files.length&&0!==this.centralDirRecords&&0===this.files.length)throw new Error("Corrupted zip or bug: expected "+this.centralDirRecords+" records in central dir, got "+this.files.length)},readEndOfCentral:function(){var e=this.reader.lastIndexOfSignature(s.CENTRAL_DIRECTORY_END);if(e<0)throw!this.isSignature(0,s.LOCAL_FILE_HEADER)?new Error("Can't find end of central directory : is this a zip file ? If it is, see https://stuk.github.io/jszip/documentation/howto/read_zip.html"):new Error("Corrupted zip: can't find end of central directory");this.reader.setIndex(e);var t=e;if(this.checkSignature(s.CENTRAL_DIRECTORY_END),this.readBlockEndOfCentral(),this.diskNumber===i.MAX_VALUE_16BITS||this.diskWithCentralDirStart===i.MAX_VALUE_16BITS||this.centralDirRecordsOnThisDisk===i.MAX_VALUE_16BITS||this.centralDirRecords===i.MAX_VALUE_16BITS||this.centralDirSize===i.MAX_VALUE_32BITS||this.centralDirOffset===i.MAX_VALUE_32BITS){if(this.zip64=!0,(e=this.reader.lastIndexOfSignature(s.ZIP64_CENTRAL_DIRECTORY_LOCATOR))<0)throw new Error("Corrupted zip: can't find the ZIP64 end of central directory locator");if(this.reader.setIndex(e),this.checkSignature(s.ZIP64_CENTRAL_DIRECTORY_LOCATOR),this.readBlockZip64EndOfCentralLocator(),!this.isSignature(this.relativeOffsetEndOfZip64CentralDir,s.ZIP64_CENTRAL_DIRECTORY_END)&&(this.relativeOffsetEndOfZip64CentralDir=this.reader.lastIndexOfSignature(s.ZIP64_CENTRAL_DIRECTORY_END),this.relativeOffsetEndOfZip64CentralDir<0))throw new Error("Corrupted zip: can't find the ZIP64 end of central directory");this.reader.setIndex(this.relativeOffsetEndOfZip64CentralDir),this.checkSignature(s.ZIP64_CENTRAL_DIRECTORY_END),this.readBlockZip64EndOfCentral()}var r=this.centralDirOffset+this.centralDirSize;this.zip64&&(r+=20,r+=12+this.zip64EndOfCentralSize);var n=t-r;if(0<n)this.isSignature(t,s.CENTRAL_FILE_HEADER)||(this.reader.zero=n);else if(n<0)throw new Error("Corrupted zip: missing "+Math.abs(n)+" bytes.")},prepareReader:function(e){this.reader=n(e)},load:function(e){this.prepareReader(e),this.readEndOfCentral(),this.readCentralDir(),this.readLocalFiles()}},t.exports=h},{"./reader/readerFor":22,"./signature":23,"./support":30,"./utils":32,"./zipEntry":34}],34:[function(e,t,r){"use strict";var n=e("./reader/readerFor"),s=e("./utils"),i=e("./compressedObject"),a=e("./crc32"),o=e("./utf8"),h=e("./compressions"),u=e("./support");function l(e,t){this.options=e,this.loadOptions=t}l.prototype={isEncrypted:function(){return 1==(1&this.bitFlag)},useUTF8:function(){return 2048==(2048&this.bitFlag)},readLocalPart:function(e){var t,r;if(e.skip(22),this.fileNameLength=e.readInt(2),r=e.readInt(2),this.fileName=e.readData(this.fileNameLength),e.skip(r),-1===this.compressedSize||-1===this.uncompressedSize)throw new Error("Bug or corrupted zip : didn't get enough information from the central directory (compressedSize === -1 || uncompressedSize === -1)");if(null===(t=function(e){for(var t in h)if(Object.prototype.hasOwnProperty.call(h,t)&&h[t].magic===e)return h[t];return null}(this.compressionMethod)))throw new Error("Corrupted zip : compression "+s.pretty(this.compressionMethod)+" unknown (inner file : "+s.transformTo("string",this.fileName)+")");this.decompressed=new i(this.compressedSize,this.uncompressedSize,this.crc32,t,e.readData(this.compressedSize))},readCentralPart:function(e){this.versionMadeBy=e.readInt(2),e.skip(2),this.bitFlag=e.readInt(2),this.compressionMethod=e.readString(2),this.date=e.readDate(),this.crc32=e.readInt(4),this.compressedSize=e.readInt(4),this.uncompressedSize=e.readInt(4);var t=e.readInt(2);if(this.extraFieldsLength=e.readInt(2),this.fileCommentLength=e.readInt(2),this.diskNumberStart=e.readInt(2),this.internalFileAttributes=e.readInt(2),this.externalFileAttributes=e.readInt(4),this.localHeaderOffset=e.readInt(4),this.isEncrypted())throw new Error("Encrypted zip are not supported");e.skip(t),this.readExtraFields(e),this.parseZIP64ExtraField(e),this.fileComment=e.readData(this.fileCommentLength)},processAttributes:function(){this.unixPermissions=null,this.dosPermissions=null;var e=this.versionMadeBy>>8;this.dir=!!(16&this.externalFileAttributes),0==e&&(this.dosPermissions=63&this.externalFileAttributes),3==e&&(this.unixPermissions=this.externalFileAttributes>>16&65535),this.dir||"/"!==this.fileNameStr.slice(-1)||(this.dir=!0)},parseZIP64ExtraField:function(){if(this.extraFields[1]){var e=n(this.extraFields[1].value);this.uncompressedSize===s.MAX_VALUE_32BITS&&(this.uncompressedSize=e.readInt(8)),this.compressedSize===s.MAX_VALUE_32BITS&&(this.compressedSize=e.readInt(8)),this.localHeaderOffset===s.MAX_VALUE_32BITS&&(this.localHeaderOffset=e.readInt(8)),this.diskNumberStart===s.MAX_VALUE_32BITS&&(this.diskNumberStart=e.readInt(4))}},readExtraFields:function(e){var t,r,n,i=e.index+this.extraFieldsLength;for(this.extraFields||(this.extraFields={});e.index+4<i;)t=e.readInt(2),r=e.readInt(2),n=e.readData(r),this.extraFields[t]={id:t,length:r,value:n};e.setIndex(i)},handleUTF8:function(){var e=u.uint8array?"uint8array":"array";if(this.useUTF8())this.fileNameStr=o.utf8decode(this.fileName),this.fileCommentStr=o.utf8decode(this.fileComment);else{var t=this.findExtraFieldUnicodePath();if(null!==t)this.fileNameStr=t;else{var r=s.transformTo(e,this.fileName);this.fileNameStr=this.loadOptions.decodeFileName(r)}var n=this.findExtraFieldUnicodeComment();if(null!==n)this.fileCommentStr=n;else{var i=s.transformTo(e,this.fileComment);this.fileCommentStr=this.loadOptions.decodeFileName(i)}}},findExtraFieldUnicodePath:function(){var e=this.extraFields[28789];if(e){var t=n(e.value);return 1!==t.readInt(1)?null:a(this.fileName)!==t.readInt(4)?null:o.utf8decode(t.readData(e.length-5))}return null},findExtraFieldUnicodeComment:function(){var e=this.extraFields[25461];if(e){var t=n(e.value);return 1!==t.readInt(1)?null:a(this.fileComment)!==t.readInt(4)?null:o.utf8decode(t.readData(e.length-5))}return null}},t.exports=l},{"./compressedObject":2,"./compressions":3,"./crc32":4,"./reader/readerFor":22,"./support":30,"./utf8":31,"./utils":32}],35:[function(e,t,r){"use strict";function n(e,t,r){this.name=e,this.dir=r.dir,this.date=r.date,this.comment=r.comment,this.unixPermissions=r.unixPermissions,this.dosPermissions=r.dosPermissions,this._data=t,this._dataBinary=r.binary,this.options={compression:r.compression,compressionOptions:r.compressionOptions}}var s=e("./stream/StreamHelper"),i=e("./stream/DataWorker"),a=e("./utf8"),o=e("./compressedObject"),h=e("./stream/GenericWorker");n.prototype={internalStream:function(e){var t=null,r="string";try{if(!e)throw new Error("No output type specified.");var n="string"===(r=e.toLowerCase())||"text"===r;"binarystring"!==r&&"text"!==r||(r="string"),t=this._decompressWorker();var i=!this._dataBinary;i&&!n&&(t=t.pipe(new a.Utf8EncodeWorker)),!i&&n&&(t=t.pipe(new a.Utf8DecodeWorker))}catch(e){(t=new h("error")).error(e)}return new s(t,r,"")},async:function(e,t){return this.internalStream(e).accumulate(t)},nodeStream:function(e,t){return this.internalStream(e||"nodebuffer").toNodejsStream(t)},_compressWorker:function(e,t){if(this._data instanceof o&&this._data.compression.magic===e.magic)return this._data.getCompressedWorker();var r=this._decompressWorker();return this._dataBinary||(r=r.pipe(new a.Utf8EncodeWorker)),o.createWorkerFrom(r,e,t)},_decompressWorker:function(){return this._data instanceof o?this._data.getContentWorker():this._data instanceof h?this._data:new i(this._data)}};for(var u=["asText","asBinary","asNodeBuffer","asUint8Array","asArrayBuffer"],l=function(){throw new Error("This method has been removed in JSZip 3.0, please check the upgrade guide.")},f=0;f<u.length;f++)n.prototype[u[f]]=l;t.exports=n},{"./compressedObject":2,"./stream/DataWorker":27,"./stream/GenericWorker":28,"./stream/StreamHelper":29,"./utf8":31}],36:[function(e,l,t){(function(t){"use strict";var r,n,e=t.MutationObserver||t.WebKitMutationObserver;if(e){var i=0,s=new e(u),a=t.document.createTextNode("");s.observe(a,{characterData:!0}),r=function(){a.data=i=++i%2}}else if(t.setImmediate||void 0===t.MessageChannel)r="document"in t&&"onreadystatechange"in t.document.createElement("script")?function(){var e=t.document.createElement("script");e.onreadystatechange=function(){u(),e.onreadystatechange=null,e.parentNode.removeChild(e),e=null},t.document.documentElement.appendChild(e)}:function(){setTimeout(u,0)};else{var o=new t.MessageChannel;o.port1.onmessage=u,r=function(){o.port2.postMessage(0)}}var h=[];function u(){var e,t;n=!0;for(var r=h.length;r;){for(t=h,h=[],e=-1;++e<r;)t[e]();r=h.length}n=!1}l.exports=function(e){1!==h.push(e)||n||r()}}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}],37:[function(e,t,r){"use strict";var i=e("immediate");function u(){}var l={},s=["REJECTED"],a=["FULFILLED"],n=["PENDING"];function o(e){if("function"!=typeof e)throw new TypeError("resolver must be a function");this.state=n,this.queue=[],this.outcome=void 0,e!==u&&d(this,e)}function h(e,t,r){this.promise=e,"function"==typeof t&&(this.onFulfilled=t,this.callFulfilled=this.otherCallFulfilled),"function"==typeof r&&(this.onRejected=r,this.callRejected=this.otherCallRejected)}function f(t,r,n){i(function(){var e;try{e=r(n)}catch(e){return l.reject(t,e)}e===t?l.reject(t,new TypeError("Cannot resolve promise with itself")):l.resolve(t,e)})}function c(e){var t=e&&e.then;if(e&&("object"==typeof e||"function"==typeof e)&&"function"==typeof t)return function(){t.apply(e,arguments)}}function d(t,e){var r=!1;function n(e){r||(r=!0,l.reject(t,e))}function i(e){r||(r=!0,l.resolve(t,e))}var s=p(function(){e(i,n)});"error"===s.status&&n(s.value)}function p(e,t){var r={};try{r.value=e(t),r.status="success"}catch(e){r.status="error",r.value=e}return r}(t.exports=o).prototype.finally=function(t){if("function"!=typeof t)return this;var r=this.constructor;return this.then(function(e){return r.resolve(t()).then(function(){return e})},function(e){return r.resolve(t()).then(function(){throw e})})},o.prototype.catch=function(e){return this.then(null,e)},o.prototype.then=function(e,t){if("function"!=typeof e&&this.state===a||"function"!=typeof t&&this.state===s)return this;var r=new this.constructor(u);this.state!==n?f(r,this.state===a?e:t,this.outcome):this.queue.push(new h(r,e,t));return r},h.prototype.callFulfilled=function(e){l.resolve(this.promise,e)},h.prototype.otherCallFulfilled=function(e){f(this.promise,this.onFulfilled,e)},h.prototype.callRejected=function(e){l.reject(this.promise,e)},h.prototype.otherCallRejected=function(e){f(this.promise,this.onRejected,e)},l.resolve=function(e,t){var r=p(c,t);if("error"===r.status)return l.reject(e,r.value);var n=r.value;if(n)d(e,n);else{e.state=a,e.outcome=t;for(var i=-1,s=e.queue.length;++i<s;)e.queue[i].callFulfilled(t)}return e},l.reject=function(e,t){e.state=s,e.outcome=t;for(var r=-1,n=e.queue.length;++r<n;)e.queue[r].callRejected(t);return e},o.resolve=function(e){if(e instanceof this)return e;return l.resolve(new this(u),e)},o.reject=function(e){var t=new this(u);return l.reject(t,e)},o.all=function(e){var r=this;if("[object Array]"!==Object.prototype.toString.call(e))return this.reject(new TypeError("must be an array"));var n=e.length,i=!1;if(!n)return this.resolve([]);var s=new Array(n),a=0,t=-1,o=new this(u);for(;++t<n;)h(e[t],t);return o;function h(e,t){r.resolve(e).then(function(e){s[t]=e,++a!==n||i||(i=!0,l.resolve(o,s))},function(e){i||(i=!0,l.reject(o,e))})}},o.race=function(e){var t=this;if("[object Array]"!==Object.prototype.toString.call(e))return this.reject(new TypeError("must be an array"));var r=e.length,n=!1;if(!r)return this.resolve([]);var i=-1,s=new this(u);for(;++i<r;)a=e[i],t.resolve(a).then(function(e){n||(n=!0,l.resolve(s,e))},function(e){n||(n=!0,l.reject(s,e))});var a;return s}},{immediate:36}],38:[function(e,t,r){"use strict";var n={};(0,e("./lib/utils/common").assign)(n,e("./lib/deflate"),e("./lib/inflate"),e("./lib/zlib/constants")),t.exports=n},{"./lib/deflate":39,"./lib/inflate":40,"./lib/utils/common":41,"./lib/zlib/constants":44}],39:[function(e,t,r){"use strict";var a=e("./zlib/deflate"),o=e("./utils/common"),h=e("./utils/strings"),i=e("./zlib/messages"),s=e("./zlib/zstream"),u=Object.prototype.toString,l=0,f=-1,c=0,d=8;function p(e){if(!(this instanceof p))return new p(e);this.options=o.assign({level:f,method:d,chunkSize:16384,windowBits:15,memLevel:8,strategy:c,to:""},e||{});var t=this.options;t.raw&&0<t.windowBits?t.windowBits=-t.windowBits:t.gzip&&0<t.windowBits&&t.windowBits<16&&(t.windowBits+=16),this.err=0,this.msg="",this.ended=!1,this.chunks=[],this.strm=new s,this.strm.avail_out=0;var r=a.deflateInit2(this.strm,t.level,t.method,t.windowBits,t.memLevel,t.strategy);if(r!==l)throw new Error(i[r]);if(t.header&&a.deflateSetHeader(this.strm,t.header),t.dictionary){var n;if(n="string"==typeof t.dictionary?h.string2buf(t.dictionary):"[object ArrayBuffer]"===u.call(t.dictionary)?new Uint8Array(t.dictionary):t.dictionary,(r=a.deflateSetDictionary(this.strm,n))!==l)throw new Error(i[r]);this._dict_set=!0}}function n(e,t){var r=new p(t);if(r.push(e,!0),r.err)throw r.msg||i[r.err];return r.result}p.prototype.push=function(e,t){var r,n,i=this.strm,s=this.options.chunkSize;if(this.ended)return!1;n=t===~~t?t:!0===t?4:0,"string"==typeof e?i.input=h.string2buf(e):"[object ArrayBuffer]"===u.call(e)?i.input=new Uint8Array(e):i.input=e,i.next_in=0,i.avail_in=i.input.length;do{if(0===i.avail_out&&(i.output=new o.Buf8(s),i.next_out=0,i.avail_out=s),1!==(r=a.deflate(i,n))&&r!==l)return this.onEnd(r),!(this.ended=!0);0!==i.avail_out&&(0!==i.avail_in||4!==n&&2!==n)||("string"===this.options.to?this.onData(h.buf2binstring(o.shrinkBuf(i.output,i.next_out))):this.onData(o.shrinkBuf(i.output,i.next_out)))}while((0<i.avail_in||0===i.avail_out)&&1!==r);return 4===n?(r=a.deflateEnd(this.strm),this.onEnd(r),this.ended=!0,r===l):2!==n||(this.onEnd(l),!(i.avail_out=0))},p.prototype.onData=function(e){this.chunks.push(e)},p.prototype.onEnd=function(e){e===l&&("string"===this.options.to?this.result=this.chunks.join(""):this.result=o.flattenChunks(this.chunks)),this.chunks=[],this.err=e,this.msg=this.strm.msg},r.Deflate=p,r.deflate=n,r.deflateRaw=function(e,t){return(t=t||{}).raw=!0,n(e,t)},r.gzip=function(e,t){return(t=t||{}).gzip=!0,n(e,t)}},{"./utils/common":41,"./utils/strings":42,"./zlib/deflate":46,"./zlib/messages":51,"./zlib/zstream":53}],40:[function(e,t,r){"use strict";var c=e("./zlib/inflate"),d=e("./utils/common"),p=e("./utils/strings"),m=e("./zlib/constants"),n=e("./zlib/messages"),i=e("./zlib/zstream"),s=e("./zlib/gzheader"),_=Object.prototype.toString;function a(e){if(!(this instanceof a))return new a(e);this.options=d.assign({chunkSize:16384,windowBits:0,to:""},e||{});var t=this.options;t.raw&&0<=t.windowBits&&t.windowBits<16&&(t.windowBits=-t.windowBits,0===t.windowBits&&(t.windowBits=-15)),!(0<=t.windowBits&&t.windowBits<16)||e&&e.windowBits||(t.windowBits+=32),15<t.windowBits&&t.windowBits<48&&0==(15&t.windowBits)&&(t.windowBits|=15),this.err=0,this.msg="",this.ended=!1,this.chunks=[],this.strm=new i,this.strm.avail_out=0;var r=c.inflateInit2(this.strm,t.windowBits);if(r!==m.Z_OK)throw new Error(n[r]);this.header=new s,c.inflateGetHeader(this.strm,this.header)}function o(e,t){var r=new a(t);if(r.push(e,!0),r.err)throw r.msg||n[r.err];return r.result}a.prototype.push=function(e,t){var r,n,i,s,a,o,h=this.strm,u=this.options.chunkSize,l=this.options.dictionary,f=!1;if(this.ended)return!1;n=t===~~t?t:!0===t?m.Z_FINISH:m.Z_NO_FLUSH,"string"==typeof e?h.input=p.binstring2buf(e):"[object ArrayBuffer]"===_.call(e)?h.input=new Uint8Array(e):h.input=e,h.next_in=0,h.avail_in=h.input.length;do{if(0===h.avail_out&&(h.output=new d.Buf8(u),h.next_out=0,h.avail_out=u),(r=c.inflate(h,m.Z_NO_FLUSH))===m.Z_NEED_DICT&&l&&(o="string"==typeof l?p.string2buf(l):"[object ArrayBuffer]"===_.call(l)?new Uint8Array(l):l,r=c.inflateSetDictionary(this.strm,o)),r===m.Z_BUF_ERROR&&!0===f&&(r=m.Z_OK,f=!1),r!==m.Z_STREAM_END&&r!==m.Z_OK)return this.onEnd(r),!(this.ended=!0);h.next_out&&(0!==h.avail_out&&r!==m.Z_STREAM_END&&(0!==h.avail_in||n!==m.Z_FINISH&&n!==m.Z_SYNC_FLUSH)||("string"===this.options.to?(i=p.utf8border(h.output,h.next_out),s=h.next_out-i,a=p.buf2string(h.output,i),h.next_out=s,h.avail_out=u-s,s&&d.arraySet(h.output,h.output,i,s,0),this.onData(a)):this.onData(d.shrinkBuf(h.output,h.next_out)))),0===h.avail_in&&0===h.avail_out&&(f=!0)}while((0<h.avail_in||0===h.avail_out)&&r!==m.Z_STREAM_END);return r===m.Z_STREAM_END&&(n=m.Z_FINISH),n===m.Z_FINISH?(r=c.inflateEnd(this.strm),this.onEnd(r),this.ended=!0,r===m.Z_OK):n!==m.Z_SYNC_FLUSH||(this.onEnd(m.Z_OK),!(h.avail_out=0))},a.prototype.onData=function(e){this.chunks.push(e)},a.prototype.onEnd=function(e){e===m.Z_OK&&("string"===this.options.to?this.result=this.chunks.join(""):this.result=d.flattenChunks(this.chunks)),this.chunks=[],this.err=e,this.msg=this.strm.msg},r.Inflate=a,r.inflate=o,r.inflateRaw=function(e,t){return(t=t||{}).raw=!0,o(e,t)},r.ungzip=o},{"./utils/common":41,"./utils/strings":42,"./zlib/constants":44,"./zlib/gzheader":47,"./zlib/inflate":49,"./zlib/messages":51,"./zlib/zstream":53}],41:[function(e,t,r){"use strict";var n="undefined"!=typeof Uint8Array&&"undefined"!=typeof Uint16Array&&"undefined"!=typeof Int32Array;r.assign=function(e){for(var t=Array.prototype.slice.call(arguments,1);t.length;){var r=t.shift();if(r){if("object"!=typeof r)throw new TypeError(r+"must be non-object");for(var n in r)r.hasOwnProperty(n)&&(e[n]=r[n])}}return e},r.shrinkBuf=function(e,t){return e.length===t?e:e.subarray?e.subarray(0,t):(e.length=t,e)};var i={arraySet:function(e,t,r,n,i){if(t.subarray&&e.subarray)e.set(t.subarray(r,r+n),i);else for(var s=0;s<n;s++)e[i+s]=t[r+s]},flattenChunks:function(e){var t,r,n,i,s,a;for(t=n=0,r=e.length;t<r;t++)n+=e[t].length;for(a=new Uint8Array(n),t=i=0,r=e.length;t<r;t++)s=e[t],a.set(s,i),i+=s.length;return a}},s={arraySet:function(e,t,r,n,i){for(var s=0;s<n;s++)e[i+s]=t[r+s]},flattenChunks:function(e){return[].concat.apply([],e)}};r.setTyped=function(e){e?(r.Buf8=Uint8Array,r.Buf16=Uint16Array,r.Buf32=Int32Array,r.assign(r,i)):(r.Buf8=Array,r.Buf16=Array,r.Buf32=Array,r.assign(r,s))},r.setTyped(n)},{}],42:[function(e,t,r){"use strict";var h=e("./common"),i=!0,s=!0;try{String.fromCharCode.apply(null,[0])}catch(e){i=!1}try{String.fromCharCode.apply(null,new Uint8Array(1))}catch(e){s=!1}for(var u=new h.Buf8(256),n=0;n<256;n++)u[n]=252<=n?6:248<=n?5:240<=n?4:224<=n?3:192<=n?2:1;function l(e,t){if(t<65537&&(e.subarray&&s||!e.subarray&&i))return String.fromCharCode.apply(null,h.shrinkBuf(e,t));for(var r="",n=0;n<t;n++)r+=String.fromCharCode(e[n]);return r}u[254]=u[254]=1,r.string2buf=function(e){var t,r,n,i,s,a=e.length,o=0;for(i=0;i<a;i++)55296==(64512&(r=e.charCodeAt(i)))&&i+1<a&&56320==(64512&(n=e.charCodeAt(i+1)))&&(r=65536+(r-55296<<10)+(n-56320),i++),o+=r<128?1:r<2048?2:r<65536?3:4;for(t=new h.Buf8(o),i=s=0;s<o;i++)55296==(64512&(r=e.charCodeAt(i)))&&i+1<a&&56320==(64512&(n=e.charCodeAt(i+1)))&&(r=65536+(r-55296<<10)+(n-56320),i++),r<128?t[s++]=r:(r<2048?t[s++]=192|r>>>6:(r<65536?t[s++]=224|r>>>12:(t[s++]=240|r>>>18,t[s++]=128|r>>>12&63),t[s++]=128|r>>>6&63),t[s++]=128|63&r);return t},r.buf2binstring=function(e){return l(e,e.length)},r.binstring2buf=function(e){for(var t=new h.Buf8(e.length),r=0,n=t.length;r<n;r++)t[r]=e.charCodeAt(r);return t},r.buf2string=function(e,t){var r,n,i,s,a=t||e.length,o=new Array(2*a);for(r=n=0;r<a;)if((i=e[r++])<128)o[n++]=i;else if(4<(s=u[i]))o[n++]=65533,r+=s-1;else{for(i&=2===s?31:3===s?15:7;1<s&&r<a;)i=i<<6|63&e[r++],s--;1<s?o[n++]=65533:i<65536?o[n++]=i:(i-=65536,o[n++]=55296|i>>10&1023,o[n++]=56320|1023&i)}return l(o,n)},r.utf8border=function(e,t){var r;for((t=t||e.length)>e.length&&(t=e.length),r=t-1;0<=r&&128==(192&e[r]);)r--;return r<0?t:0===r?t:r+u[e[r]]>t?r:t}},{"./common":41}],43:[function(e,t,r){"use strict";t.exports=function(e,t,r,n){for(var i=65535&e|0,s=e>>>16&65535|0,a=0;0!==r;){for(r-=a=2e3<r?2e3:r;s=s+(i=i+t[n++]|0)|0,--a;);i%=65521,s%=65521}return i|s<<16|0}},{}],44:[function(e,t,r){"use strict";t.exports={Z_NO_FLUSH:0,Z_PARTIAL_FLUSH:1,Z_SYNC_FLUSH:2,Z_FULL_FLUSH:3,Z_FINISH:4,Z_BLOCK:5,Z_TREES:6,Z_OK:0,Z_STREAM_END:1,Z_NEED_DICT:2,Z_ERRNO:-1,Z_STREAM_ERROR:-2,Z_DATA_ERROR:-3,Z_BUF_ERROR:-5,Z_NO_COMPRESSION:0,Z_BEST_SPEED:1,Z_BEST_COMPRESSION:9,Z_DEFAULT_COMPRESSION:-1,Z_FILTERED:1,Z_HUFFMAN_ONLY:2,Z_RLE:3,Z_FIXED:4,Z_DEFAULT_STRATEGY:0,Z_BINARY:0,Z_TEXT:1,Z_UNKNOWN:2,Z_DEFLATED:8}},{}],45:[function(e,t,r){"use strict";var o=function(){for(var e,t=[],r=0;r<256;r++){e=r;for(var n=0;n<8;n++)e=1&e?3988292384^e>>>1:e>>>1;t[r]=e}return t}();t.exports=function(e,t,r,n){var i=o,s=n+r;e^=-1;for(var a=n;a<s;a++)e=e>>>8^i[255&(e^t[a])];return-1^e}},{}],46:[function(e,t,r){"use strict";var h,c=e("../utils/common"),u=e("./trees"),d=e("./adler32"),p=e("./crc32"),n=e("./messages"),l=0,f=4,m=0,_=-2,g=-1,b=4,i=2,v=8,y=9,s=286,a=30,o=19,w=2*s+1,k=15,x=3,S=258,z=S+x+1,C=42,E=113,A=1,I=2,O=3,B=4;function R(e,t){return e.msg=n[t],t}function T(e){return(e<<1)-(4<e?9:0)}function D(e){for(var t=e.length;0<=--t;)e[t]=0}function F(e){var t=e.state,r=t.pending;r>e.avail_out&&(r=e.avail_out),0!==r&&(c.arraySet(e.output,t.pending_buf,t.pending_out,r,e.next_out),e.next_out+=r,t.pending_out+=r,e.total_out+=r,e.avail_out-=r,t.pending-=r,0===t.pending&&(t.pending_out=0))}function N(e,t){u._tr_flush_block(e,0<=e.block_start?e.block_start:-1,e.strstart-e.block_start,t),e.block_start=e.strstart,F(e.strm)}function U(e,t){e.pending_buf[e.pending++]=t}function P(e,t){e.pending_buf[e.pending++]=t>>>8&255,e.pending_buf[e.pending++]=255&t}function L(e,t){var r,n,i=e.max_chain_length,s=e.strstart,a=e.prev_length,o=e.nice_match,h=e.strstart>e.w_size-z?e.strstart-(e.w_size-z):0,u=e.window,l=e.w_mask,f=e.prev,c=e.strstart+S,d=u[s+a-1],p=u[s+a];e.prev_length>=e.good_match&&(i>>=2),o>e.lookahead&&(o=e.lookahead);do{if(u[(r=t)+a]===p&&u[r+a-1]===d&&u[r]===u[s]&&u[++r]===u[s+1]){s+=2,r++;do{}while(u[++s]===u[++r]&&u[++s]===u[++r]&&u[++s]===u[++r]&&u[++s]===u[++r]&&u[++s]===u[++r]&&u[++s]===u[++r]&&u[++s]===u[++r]&&u[++s]===u[++r]&&s<c);if(n=S-(c-s),s=c-S,a<n){if(e.match_start=t,o<=(a=n))break;d=u[s+a-1],p=u[s+a]}}}while((t=f[t&l])>h&&0!=--i);return a<=e.lookahead?a:e.lookahead}function j(e){var t,r,n,i,s,a,o,h,u,l,f=e.w_size;do{if(i=e.window_size-e.lookahead-e.strstart,e.strstart>=f+(f-z)){for(c.arraySet(e.window,e.window,f,f,0),e.match_start-=f,e.strstart-=f,e.block_start-=f,t=r=e.hash_size;n=e.head[--t],e.head[t]=f<=n?n-f:0,--r;);for(t=r=f;n=e.prev[--t],e.prev[t]=f<=n?n-f:0,--r;);i+=f}if(0===e.strm.avail_in)break;if(a=e.strm,o=e.window,h=e.strstart+e.lookahead,u=i,l=void 0,l=a.avail_in,u<l&&(l=u),r=0===l?0:(a.avail_in-=l,c.arraySet(o,a.input,a.next_in,l,h),1===a.state.wrap?a.adler=d(a.adler,o,l,h):2===a.state.wrap&&(a.adler=p(a.adler,o,l,h)),a.next_in+=l,a.total_in+=l,l),e.lookahead+=r,e.lookahead+e.insert>=x)for(s=e.strstart-e.insert,e.ins_h=e.window[s],e.ins_h=(e.ins_h<<e.hash_shift^e.window[s+1])&e.hash_mask;e.insert&&(e.ins_h=(e.ins_h<<e.hash_shift^e.window[s+x-1])&e.hash_mask,e.prev[s&e.w_mask]=e.head[e.ins_h],e.head[e.ins_h]=s,s++,e.insert--,!(e.lookahead+e.insert<x)););}while(e.lookahead<z&&0!==e.strm.avail_in)}function Z(e,t){for(var r,n;;){if(e.lookahead<z){if(j(e),e.lookahead<z&&t===l)return A;if(0===e.lookahead)break}if(r=0,e.lookahead>=x&&(e.ins_h=(e.ins_h<<e.hash_shift^e.window[e.strstart+x-1])&e.hash_mask,r=e.prev[e.strstart&e.w_mask]=e.head[e.ins_h],e.head[e.ins_h]=e.strstart),0!==r&&e.strstart-r<=e.w_size-z&&(e.match_length=L(e,r)),e.match_length>=x)if(n=u._tr_tally(e,e.strstart-e.match_start,e.match_length-x),e.lookahead-=e.match_length,e.match_length<=e.max_lazy_match&&e.lookahead>=x){for(e.match_length--;e.strstart++,e.ins_h=(e.ins_h<<e.hash_shift^e.window[e.strstart+x-1])&e.hash_mask,r=e.prev[e.strstart&e.w_mask]=e.head[e.ins_h],e.head[e.ins_h]=e.strstart,0!=--e.match_length;);e.strstart++}else e.strstart+=e.match_length,e.match_length=0,e.ins_h=e.window[e.strstart],e.ins_h=(e.ins_h<<e.hash_shift^e.window[e.strstart+1])&e.hash_mask;else n=u._tr_tally(e,0,e.window[e.strstart]),e.lookahead--,e.strstart++;if(n&&(N(e,!1),0===e.strm.avail_out))return A}return e.insert=e.strstart<x-1?e.strstart:x-1,t===f?(N(e,!0),0===e.strm.avail_out?O:B):e.last_lit&&(N(e,!1),0===e.strm.avail_out)?A:I}function W(e,t){for(var r,n,i;;){if(e.lookahead<z){if(j(e),e.lookahead<z&&t===l)return A;if(0===e.lookahead)break}if(r=0,e.lookahead>=x&&(e.ins_h=(e.ins_h<<e.hash_shift^e.window[e.strstart+x-1])&e.hash_mask,r=e.prev[e.strstart&e.w_mask]=e.head[e.ins_h],e.head[e.ins_h]=e.strstart),e.prev_length=e.match_length,e.prev_match=e.match_start,e.match_length=x-1,0!==r&&e.prev_length<e.max_lazy_match&&e.strstart-r<=e.w_size-z&&(e.match_length=L(e,r),e.match_length<=5&&(1===e.strategy||e.match_length===x&&4096<e.strstart-e.match_start)&&(e.match_length=x-1)),e.prev_length>=x&&e.match_length<=e.prev_length){for(i=e.strstart+e.lookahead-x,n=u._tr_tally(e,e.strstart-1-e.prev_match,e.prev_length-x),e.lookahead-=e.prev_length-1,e.prev_length-=2;++e.strstart<=i&&(e.ins_h=(e.ins_h<<e.hash_shift^e.window[e.strstart+x-1])&e.hash_mask,r=e.prev[e.strstart&e.w_mask]=e.head[e.ins_h],e.head[e.ins_h]=e.strstart),0!=--e.prev_length;);if(e.match_available=0,e.match_length=x-1,e.strstart++,n&&(N(e,!1),0===e.strm.avail_out))return A}else if(e.match_available){if((n=u._tr_tally(e,0,e.window[e.strstart-1]))&&N(e,!1),e.strstart++,e.lookahead--,0===e.strm.avail_out)return A}else e.match_available=1,e.strstart++,e.lookahead--}return e.match_available&&(n=u._tr_tally(e,0,e.window[e.strstart-1]),e.match_available=0),e.insert=e.strstart<x-1?e.strstart:x-1,t===f?(N(e,!0),0===e.strm.avail_out?O:B):e.last_lit&&(N(e,!1),0===e.strm.avail_out)?A:I}function M(e,t,r,n,i){this.good_length=e,this.max_lazy=t,this.nice_length=r,this.max_chain=n,this.func=i}function H(){this.strm=null,this.status=0,this.pending_buf=null,this.pending_buf_size=0,this.pending_out=0,this.pending=0,this.wrap=0,this.gzhead=null,this.gzindex=0,this.method=v,this.last_flush=-1,this.w_size=0,this.w_bits=0,this.w_mask=0,this.window=null,this.window_size=0,this.prev=null,this.head=null,this.ins_h=0,this.hash_size=0,this.hash_bits=0,this.hash_mask=0,this.hash_shift=0,this.block_start=0,this.match_length=0,this.prev_match=0,this.match_available=0,this.strstart=0,this.match_start=0,this.lookahead=0,this.prev_length=0,this.max_chain_length=0,this.max_lazy_match=0,this.level=0,this.strategy=0,this.good_match=0,this.nice_match=0,this.dyn_ltree=new c.Buf16(2*w),this.dyn_dtree=new c.Buf16(2*(2*a+1)),this.bl_tree=new c.Buf16(2*(2*o+1)),D(this.dyn_ltree),D(this.dyn_dtree),D(this.bl_tree),this.l_desc=null,this.d_desc=null,this.bl_desc=null,this.bl_count=new c.Buf16(k+1),this.heap=new c.Buf16(2*s+1),D(this.heap),this.heap_len=0,this.heap_max=0,this.depth=new c.Buf16(2*s+1),D(this.depth),this.l_buf=0,this.lit_bufsize=0,this.last_lit=0,this.d_buf=0,this.opt_len=0,this.static_len=0,this.matches=0,this.insert=0,this.bi_buf=0,this.bi_valid=0}function G(e){var t;return e&&e.state?(e.total_in=e.total_out=0,e.data_type=i,(t=e.state).pending=0,t.pending_out=0,t.wrap<0&&(t.wrap=-t.wrap),t.status=t.wrap?C:E,e.adler=2===t.wrap?0:1,t.last_flush=l,u._tr_init(t),m):R(e,_)}function K(e){var t=G(e);return t===m&&function(e){e.window_size=2*e.w_size,D(e.head),e.max_lazy_match=h[e.level].max_lazy,e.good_match=h[e.level].good_length,e.nice_match=h[e.level].nice_length,e.max_chain_length=h[e.level].max_chain,e.strstart=0,e.block_start=0,e.lookahead=0,e.insert=0,e.match_length=e.prev_length=x-1,e.match_available=0,e.ins_h=0}(e.state),t}function Y(e,t,r,n,i,s){if(!e)return _;var a=1;if(t===g&&(t=6),n<0?(a=0,n=-n):15<n&&(a=2,n-=16),i<1||y<i||r!==v||n<8||15<n||t<0||9<t||s<0||b<s)return R(e,_);8===n&&(n=9);var o=new H;return(e.state=o).strm=e,o.wrap=a,o.gzhead=null,o.w_bits=n,o.w_size=1<<o.w_bits,o.w_mask=o.w_size-1,o.hash_bits=i+7,o.hash_size=1<<o.hash_bits,o.hash_mask=o.hash_size-1,o.hash_shift=~~((o.hash_bits+x-1)/x),o.window=new c.Buf8(2*o.w_size),o.head=new c.Buf16(o.hash_size),o.prev=new c.Buf16(o.w_size),o.lit_bufsize=1<<i+6,o.pending_buf_size=4*o.lit_bufsize,o.pending_buf=new c.Buf8(o.pending_buf_size),o.d_buf=1*o.lit_bufsize,o.l_buf=3*o.lit_bufsize,o.level=t,o.strategy=s,o.method=r,K(e)}h=[new M(0,0,0,0,function(e,t){var r=65535;for(r>e.pending_buf_size-5&&(r=e.pending_buf_size-5);;){if(e.lookahead<=1){if(j(e),0===e.lookahead&&t===l)return A;if(0===e.lookahead)break}e.strstart+=e.lookahead,e.lookahead=0;var n=e.block_start+r;if((0===e.strstart||e.strstart>=n)&&(e.lookahead=e.strstart-n,e.strstart=n,N(e,!1),0===e.strm.avail_out))return A;if(e.strstart-e.block_start>=e.w_size-z&&(N(e,!1),0===e.strm.avail_out))return A}return e.insert=0,t===f?(N(e,!0),0===e.strm.avail_out?O:B):(e.strstart>e.block_start&&(N(e,!1),e.strm.avail_out),A)}),new M(4,4,8,4,Z),new M(4,5,16,8,Z),new M(4,6,32,32,Z),new M(4,4,16,16,W),new M(8,16,32,32,W),new M(8,16,128,128,W),new M(8,32,128,256,W),new M(32,128,258,1024,W),new M(32,258,258,4096,W)],r.deflateInit=function(e,t){return Y(e,t,v,15,8,0)},r.deflateInit2=Y,r.deflateReset=K,r.deflateResetKeep=G,r.deflateSetHeader=function(e,t){return e&&e.state?2!==e.state.wrap?_:(e.state.gzhead=t,m):_},r.deflate=function(e,t){var r,n,i,s;if(!e||!e.state||5<t||t<0)return e?R(e,_):_;if(n=e.state,!e.output||!e.input&&0!==e.avail_in||666===n.status&&t!==f)return R(e,0===e.avail_out?-5:_);if(n.strm=e,r=n.last_flush,n.last_flush=t,n.status===C)if(2===n.wrap)e.adler=0,U(n,31),U(n,139),U(n,8),n.gzhead?(U(n,(n.gzhead.text?1:0)+(n.gzhead.hcrc?2:0)+(n.gzhead.extra?4:0)+(n.gzhead.name?8:0)+(n.gzhead.comment?16:0)),U(n,255&n.gzhead.time),U(n,n.gzhead.time>>8&255),U(n,n.gzhead.time>>16&255),U(n,n.gzhead.time>>24&255),U(n,9===n.level?2:2<=n.strategy||n.level<2?4:0),U(n,255&n.gzhead.os),n.gzhead.extra&&n.gzhead.extra.length&&(U(n,255&n.gzhead.extra.length),U(n,n.gzhead.extra.length>>8&255)),n.gzhead.hcrc&&(e.adler=p(e.adler,n.pending_buf,n.pending,0)),n.gzindex=0,n.status=69):(U(n,0),U(n,0),U(n,0),U(n,0),U(n,0),U(n,9===n.level?2:2<=n.strategy||n.level<2?4:0),U(n,3),n.status=E);else{var a=v+(n.w_bits-8<<4)<<8;a|=(2<=n.strategy||n.level<2?0:n.level<6?1:6===n.level?2:3)<<6,0!==n.strstart&&(a|=32),a+=31-a%31,n.status=E,P(n,a),0!==n.strstart&&(P(n,e.adler>>>16),P(n,65535&e.adler)),e.adler=1}if(69===n.status)if(n.gzhead.extra){for(i=n.pending;n.gzindex<(65535&n.gzhead.extra.length)&&(n.pending!==n.pending_buf_size||(n.gzhead.hcrc&&n.pending>i&&(e.adler=p(e.adler,n.pending_buf,n.pending-i,i)),F(e),i=n.pending,n.pending!==n.pending_buf_size));)U(n,255&n.gzhead.extra[n.gzindex]),n.gzindex++;n.gzhead.hcrc&&n.pending>i&&(e.adler=p(e.adler,n.pending_buf,n.pending-i,i)),n.gzindex===n.gzhead.extra.length&&(n.gzindex=0,n.status=73)}else n.status=73;if(73===n.status)if(n.gzhead.name){i=n.pending;do{if(n.pending===n.pending_buf_size&&(n.gzhead.hcrc&&n.pending>i&&(e.adler=p(e.adler,n.pending_buf,n.pending-i,i)),F(e),i=n.pending,n.pending===n.pending_buf_size)){s=1;break}s=n.gzindex<n.gzhead.name.length?255&n.gzhead.name.charCodeAt(n.gzindex++):0,U(n,s)}while(0!==s);n.gzhead.hcrc&&n.pending>i&&(e.adler=p(e.adler,n.pending_buf,n.pending-i,i)),0===s&&(n.gzindex=0,n.status=91)}else n.status=91;if(91===n.status)if(n.gzhead.comment){i=n.pending;do{if(n.pending===n.pending_buf_size&&(n.gzhead.hcrc&&n.pending>i&&(e.adler=p(e.adler,n.pending_buf,n.pending-i,i)),F(e),i=n.pending,n.pending===n.pending_buf_size)){s=1;break}s=n.gzindex<n.gzhead.comment.length?255&n.gzhead.comment.charCodeAt(n.gzindex++):0,U(n,s)}while(0!==s);n.gzhead.hcrc&&n.pending>i&&(e.adler=p(e.adler,n.pending_buf,n.pending-i,i)),0===s&&(n.status=103)}else n.status=103;if(103===n.status&&(n.gzhead.hcrc?(n.pending+2>n.pending_buf_size&&F(e),n.pending+2<=n.pending_buf_size&&(U(n,255&e.adler),U(n,e.adler>>8&255),e.adler=0,n.status=E)):n.status=E),0!==n.pending){if(F(e),0===e.avail_out)return n.last_flush=-1,m}else if(0===e.avail_in&&T(t)<=T(r)&&t!==f)return R(e,-5);if(666===n.status&&0!==e.avail_in)return R(e,-5);if(0!==e.avail_in||0!==n.lookahead||t!==l&&666!==n.status){var o=2===n.strategy?function(e,t){for(var r;;){if(0===e.lookahead&&(j(e),0===e.lookahead)){if(t===l)return A;break}if(e.match_length=0,r=u._tr_tally(e,0,e.window[e.strstart]),e.lookahead--,e.strstart++,r&&(N(e,!1),0===e.strm.avail_out))return A}return e.insert=0,t===f?(N(e,!0),0===e.strm.avail_out?O:B):e.last_lit&&(N(e,!1),0===e.strm.avail_out)?A:I}(n,t):3===n.strategy?function(e,t){for(var r,n,i,s,a=e.window;;){if(e.lookahead<=S){if(j(e),e.lookahead<=S&&t===l)return A;if(0===e.lookahead)break}if(e.match_length=0,e.lookahead>=x&&0<e.strstart&&(n=a[i=e.strstart-1])===a[++i]&&n===a[++i]&&n===a[++i]){s=e.strstart+S;do{}while(n===a[++i]&&n===a[++i]&&n===a[++i]&&n===a[++i]&&n===a[++i]&&n===a[++i]&&n===a[++i]&&n===a[++i]&&i<s);e.match_length=S-(s-i),e.match_length>e.lookahead&&(e.match_length=e.lookahead)}if(e.match_length>=x?(r=u._tr_tally(e,1,e.match_length-x),e.lookahead-=e.match_length,e.strstart+=e.match_length,e.match_length=0):(r=u._tr_tally(e,0,e.window[e.strstart]),e.lookahead--,e.strstart++),r&&(N(e,!1),0===e.strm.avail_out))return A}return e.insert=0,t===f?(N(e,!0),0===e.strm.avail_out?O:B):e.last_lit&&(N(e,!1),0===e.strm.avail_out)?A:I}(n,t):h[n.level].func(n,t);if(o!==O&&o!==B||(n.status=666),o===A||o===O)return 0===e.avail_out&&(n.last_flush=-1),m;if(o===I&&(1===t?u._tr_align(n):5!==t&&(u._tr_stored_block(n,0,0,!1),3===t&&(D(n.head),0===n.lookahead&&(n.strstart=0,n.block_start=0,n.insert=0))),F(e),0===e.avail_out))return n.last_flush=-1,m}return t!==f?m:n.wrap<=0?1:(2===n.wrap?(U(n,255&e.adler),U(n,e.adler>>8&255),U(n,e.adler>>16&255),U(n,e.adler>>24&255),U(n,255&e.total_in),U(n,e.total_in>>8&255),U(n,e.total_in>>16&255),U(n,e.total_in>>24&255)):(P(n,e.adler>>>16),P(n,65535&e.adler)),F(e),0<n.wrap&&(n.wrap=-n.wrap),0!==n.pending?m:1)},r.deflateEnd=function(e){var t;return e&&e.state?(t=e.state.status)!==C&&69!==t&&73!==t&&91!==t&&103!==t&&t!==E&&666!==t?R(e,_):(e.state=null,t===E?R(e,-3):m):_},r.deflateSetDictionary=function(e,t){var r,n,i,s,a,o,h,u,l=t.length;if(!e||!e.state)return _;if(2===(s=(r=e.state).wrap)||1===s&&r.status!==C||r.lookahead)return _;for(1===s&&(e.adler=d(e.adler,t,l,0)),r.wrap=0,l>=r.w_size&&(0===s&&(D(r.head),r.strstart=0,r.block_start=0,r.insert=0),u=new c.Buf8(r.w_size),c.arraySet(u,t,l-r.w_size,r.w_size,0),t=u,l=r.w_size),a=e.avail_in,o=e.next_in,h=e.input,e.avail_in=l,e.next_in=0,e.input=t,j(r);r.lookahead>=x;){for(n=r.strstart,i=r.lookahead-(x-1);r.ins_h=(r.ins_h<<r.hash_shift^r.window[n+x-1])&r.hash_mask,r.prev[n&r.w_mask]=r.head[r.ins_h],r.head[r.ins_h]=n,n++,--i;);r.strstart=n,r.lookahead=x-1,j(r)}return r.strstart+=r.lookahead,r.block_start=r.strstart,r.insert=r.lookahead,r.lookahead=0,r.match_length=r.prev_length=x-1,r.match_available=0,e.next_in=o,e.input=h,e.avail_in=a,r.wrap=s,m},r.deflateInfo="pako deflate (from Nodeca project)"},{"../utils/common":41,"./adler32":43,"./crc32":45,"./messages":51,"./trees":52}],47:[function(e,t,r){"use strict";t.exports=function(){this.text=0,this.time=0,this.xflags=0,this.os=0,this.extra=null,this.extra_len=0,this.name="",this.comment="",this.hcrc=0,this.done=!1}},{}],48:[function(e,t,r){"use strict";t.exports=function(e,t){var r,n,i,s,a,o,h,u,l,f,c,d,p,m,_,g,b,v,y,w,k,x,S,z,C;r=e.state,n=e.next_in,z=e.input,i=n+(e.avail_in-5),s=e.next_out,C=e.output,a=s-(t-e.avail_out),o=s+(e.avail_out-257),h=r.dmax,u=r.wsize,l=r.whave,f=r.wnext,c=r.window,d=r.hold,p=r.bits,m=r.lencode,_=r.distcode,g=(1<<r.lenbits)-1,b=(1<<r.distbits)-1;e:do{p<15&&(d+=z[n++]<<p,p+=8,d+=z[n++]<<p,p+=8),v=m[d&g];t:for(;;){if(d>>>=y=v>>>24,p-=y,0===(y=v>>>16&255))C[s++]=65535&v;else{if(!(16&y)){if(0==(64&y)){v=m[(65535&v)+(d&(1<<y)-1)];continue t}if(32&y){r.mode=12;break e}e.msg="invalid literal/length code",r.mode=30;break e}w=65535&v,(y&=15)&&(p<y&&(d+=z[n++]<<p,p+=8),w+=d&(1<<y)-1,d>>>=y,p-=y),p<15&&(d+=z[n++]<<p,p+=8,d+=z[n++]<<p,p+=8),v=_[d&b];r:for(;;){if(d>>>=y=v>>>24,p-=y,!(16&(y=v>>>16&255))){if(0==(64&y)){v=_[(65535&v)+(d&(1<<y)-1)];continue r}e.msg="invalid distance code",r.mode=30;break e}if(k=65535&v,p<(y&=15)&&(d+=z[n++]<<p,(p+=8)<y&&(d+=z[n++]<<p,p+=8)),h<(k+=d&(1<<y)-1)){e.msg="invalid distance too far back",r.mode=30;break e}if(d>>>=y,p-=y,(y=s-a)<k){if(l<(y=k-y)&&r.sane){e.msg="invalid distance too far back",r.mode=30;break e}if(S=c,(x=0)===f){if(x+=u-y,y<w){for(w-=y;C[s++]=c[x++],--y;);x=s-k,S=C}}else if(f<y){if(x+=u+f-y,(y-=f)<w){for(w-=y;C[s++]=c[x++],--y;);if(x=0,f<w){for(w-=y=f;C[s++]=c[x++],--y;);x=s-k,S=C}}}else if(x+=f-y,y<w){for(w-=y;C[s++]=c[x++],--y;);x=s-k,S=C}for(;2<w;)C[s++]=S[x++],C[s++]=S[x++],C[s++]=S[x++],w-=3;w&&(C[s++]=S[x++],1<w&&(C[s++]=S[x++]))}else{for(x=s-k;C[s++]=C[x++],C[s++]=C[x++],C[s++]=C[x++],2<(w-=3););w&&(C[s++]=C[x++],1<w&&(C[s++]=C[x++]))}break}}break}}while(n<i&&s<o);n-=w=p>>3,d&=(1<<(p-=w<<3))-1,e.next_in=n,e.next_out=s,e.avail_in=n<i?i-n+5:5-(n-i),e.avail_out=s<o?o-s+257:257-(s-o),r.hold=d,r.bits=p}},{}],49:[function(e,t,r){"use strict";var I=e("../utils/common"),O=e("./adler32"),B=e("./crc32"),R=e("./inffast"),T=e("./inftrees"),D=1,F=2,N=0,U=-2,P=1,n=852,i=592;function L(e){return(e>>>24&255)+(e>>>8&65280)+((65280&e)<<8)+((255&e)<<24)}function s(){this.mode=0,this.last=!1,this.wrap=0,this.havedict=!1,this.flags=0,this.dmax=0,this.check=0,this.total=0,this.head=null,this.wbits=0,this.wsize=0,this.whave=0,this.wnext=0,this.window=null,this.hold=0,this.bits=0,this.length=0,this.offset=0,this.extra=0,this.lencode=null,this.distcode=null,this.lenbits=0,this.distbits=0,this.ncode=0,this.nlen=0,this.ndist=0,this.have=0,this.next=null,this.lens=new I.Buf16(320),this.work=new I.Buf16(288),this.lendyn=null,this.distdyn=null,this.sane=0,this.back=0,this.was=0}function a(e){var t;return e&&e.state?(t=e.state,e.total_in=e.total_out=t.total=0,e.msg="",t.wrap&&(e.adler=1&t.wrap),t.mode=P,t.last=0,t.havedict=0,t.dmax=32768,t.head=null,t.hold=0,t.bits=0,t.lencode=t.lendyn=new I.Buf32(n),t.distcode=t.distdyn=new I.Buf32(i),t.sane=1,t.back=-1,N):U}function o(e){var t;return e&&e.state?((t=e.state).wsize=0,t.whave=0,t.wnext=0,a(e)):U}function h(e,t){var r,n;return e&&e.state?(n=e.state,t<0?(r=0,t=-t):(r=1+(t>>4),t<48&&(t&=15)),t&&(t<8||15<t)?U:(null!==n.window&&n.wbits!==t&&(n.window=null),n.wrap=r,n.wbits=t,o(e))):U}function u(e,t){var r,n;return e?(n=new s,(e.state=n).window=null,(r=h(e,t))!==N&&(e.state=null),r):U}var l,f,c=!0;function j(e){if(c){var t;for(l=new I.Buf32(512),f=new I.Buf32(32),t=0;t<144;)e.lens[t++]=8;for(;t<256;)e.lens[t++]=9;for(;t<280;)e.lens[t++]=7;for(;t<288;)e.lens[t++]=8;for(T(D,e.lens,0,288,l,0,e.work,{bits:9}),t=0;t<32;)e.lens[t++]=5;T(F,e.lens,0,32,f,0,e.work,{bits:5}),c=!1}e.lencode=l,e.lenbits=9,e.distcode=f,e.distbits=5}function Z(e,t,r,n){var i,s=e.state;return null===s.window&&(s.wsize=1<<s.wbits,s.wnext=0,s.whave=0,s.window=new I.Buf8(s.wsize)),n>=s.wsize?(I.arraySet(s.window,t,r-s.wsize,s.wsize,0),s.wnext=0,s.whave=s.wsize):(n<(i=s.wsize-s.wnext)&&(i=n),I.arraySet(s.window,t,r-n,i,s.wnext),(n-=i)?(I.arraySet(s.window,t,r-n,n,0),s.wnext=n,s.whave=s.wsize):(s.wnext+=i,s.wnext===s.wsize&&(s.wnext=0),s.whave<s.wsize&&(s.whave+=i))),0}r.inflateReset=o,r.inflateReset2=h,r.inflateResetKeep=a,r.inflateInit=function(e){return u(e,15)},r.inflateInit2=u,r.inflate=function(e,t){var r,n,i,s,a,o,h,u,l,f,c,d,p,m,_,g,b,v,y,w,k,x,S,z,C=0,E=new I.Buf8(4),A=[16,17,18,0,8,7,9,6,10,5,11,4,12,3,13,2,14,1,15];if(!e||!e.state||!e.output||!e.input&&0!==e.avail_in)return U;12===(r=e.state).mode&&(r.mode=13),a=e.next_out,i=e.output,h=e.avail_out,s=e.next_in,n=e.input,o=e.avail_in,u=r.hold,l=r.bits,f=o,c=h,x=N;e:for(;;)switch(r.mode){case P:if(0===r.wrap){r.mode=13;break}for(;l<16;){if(0===o)break e;o--,u+=n[s++]<<l,l+=8}if(2&r.wrap&&35615===u){E[r.check=0]=255&u,E[1]=u>>>8&255,r.check=B(r.check,E,2,0),l=u=0,r.mode=2;break}if(r.flags=0,r.head&&(r.head.done=!1),!(1&r.wrap)||(((255&u)<<8)+(u>>8))%31){e.msg="incorrect header check",r.mode=30;break}if(8!=(15&u)){e.msg="unknown compression method",r.mode=30;break}if(l-=4,k=8+(15&(u>>>=4)),0===r.wbits)r.wbits=k;else if(k>r.wbits){e.msg="invalid window size",r.mode=30;break}r.dmax=1<<k,e.adler=r.check=1,r.mode=512&u?10:12,l=u=0;break;case 2:for(;l<16;){if(0===o)break e;o--,u+=n[s++]<<l,l+=8}if(r.flags=u,8!=(255&r.flags)){e.msg="unknown compression method",r.mode=30;break}if(57344&r.flags){e.msg="unknown header flags set",r.mode=30;break}r.head&&(r.head.text=u>>8&1),512&r.flags&&(E[0]=255&u,E[1]=u>>>8&255,r.check=B(r.check,E,2,0)),l=u=0,r.mode=3;case 3:for(;l<32;){if(0===o)break e;o--,u+=n[s++]<<l,l+=8}r.head&&(r.head.time=u),512&r.flags&&(E[0]=255&u,E[1]=u>>>8&255,E[2]=u>>>16&255,E[3]=u>>>24&255,r.check=B(r.check,E,4,0)),l=u=0,r.mode=4;case 4:for(;l<16;){if(0===o)break e;o--,u+=n[s++]<<l,l+=8}r.head&&(r.head.xflags=255&u,r.head.os=u>>8),512&r.flags&&(E[0]=255&u,E[1]=u>>>8&255,r.check=B(r.check,E,2,0)),l=u=0,r.mode=5;case 5:if(1024&r.flags){for(;l<16;){if(0===o)break e;o--,u+=n[s++]<<l,l+=8}r.length=u,r.head&&(r.head.extra_len=u),512&r.flags&&(E[0]=255&u,E[1]=u>>>8&255,r.check=B(r.check,E,2,0)),l=u=0}else r.head&&(r.head.extra=null);r.mode=6;case 6:if(1024&r.flags&&(o<(d=r.length)&&(d=o),d&&(r.head&&(k=r.head.extra_len-r.length,r.head.extra||(r.head.extra=new Array(r.head.extra_len)),I.arraySet(r.head.extra,n,s,d,k)),512&r.flags&&(r.check=B(r.check,n,d,s)),o-=d,s+=d,r.length-=d),r.length))break e;r.length=0,r.mode=7;case 7:if(2048&r.flags){if(0===o)break e;for(d=0;k=n[s+d++],r.head&&k&&r.length<65536&&(r.head.name+=String.fromCharCode(k)),k&&d<o;);if(512&r.flags&&(r.check=B(r.check,n,d,s)),o-=d,s+=d,k)break e}else r.head&&(r.head.name=null);r.length=0,r.mode=8;case 8:if(4096&r.flags){if(0===o)break e;for(d=0;k=n[s+d++],r.head&&k&&r.length<65536&&(r.head.comment+=String.fromCharCode(k)),k&&d<o;);if(512&r.flags&&(r.check=B(r.check,n,d,s)),o-=d,s+=d,k)break e}else r.head&&(r.head.comment=null);r.mode=9;case 9:if(512&r.flags){for(;l<16;){if(0===o)break e;o--,u+=n[s++]<<l,l+=8}if(u!==(65535&r.check)){e.msg="header crc mismatch",r.mode=30;break}l=u=0}r.head&&(r.head.hcrc=r.flags>>9&1,r.head.done=!0),e.adler=r.check=0,r.mode=12;break;case 10:for(;l<32;){if(0===o)break e;o--,u+=n[s++]<<l,l+=8}e.adler=r.check=L(u),l=u=0,r.mode=11;case 11:if(0===r.havedict)return e.next_out=a,e.avail_out=h,e.next_in=s,e.avail_in=o,r.hold=u,r.bits=l,2;e.adler=r.check=1,r.mode=12;case 12:if(5===t||6===t)break e;case 13:if(r.last){u>>>=7&l,l-=7&l,r.mode=27;break}for(;l<3;){if(0===o)break e;o--,u+=n[s++]<<l,l+=8}switch(r.last=1&u,l-=1,3&(u>>>=1)){case 0:r.mode=14;break;case 1:if(j(r),r.mode=20,6!==t)break;u>>>=2,l-=2;break e;case 2:r.mode=17;break;case 3:e.msg="invalid block type",r.mode=30}u>>>=2,l-=2;break;case 14:for(u>>>=7&l,l-=7&l;l<32;){if(0===o)break e;o--,u+=n[s++]<<l,l+=8}if((65535&u)!=(u>>>16^65535)){e.msg="invalid stored block lengths",r.mode=30;break}if(r.length=65535&u,l=u=0,r.mode=15,6===t)break e;case 15:r.mode=16;case 16:if(d=r.length){if(o<d&&(d=o),h<d&&(d=h),0===d)break e;I.arraySet(i,n,s,d,a),o-=d,s+=d,h-=d,a+=d,r.length-=d;break}r.mode=12;break;case 17:for(;l<14;){if(0===o)break e;o--,u+=n[s++]<<l,l+=8}if(r.nlen=257+(31&u),u>>>=5,l-=5,r.ndist=1+(31&u),u>>>=5,l-=5,r.ncode=4+(15&u),u>>>=4,l-=4,286<r.nlen||30<r.ndist){e.msg="too many length or distance symbols",r.mode=30;break}r.have=0,r.mode=18;case 18:for(;r.have<r.ncode;){for(;l<3;){if(0===o)break e;o--,u+=n[s++]<<l,l+=8}r.lens[A[r.have++]]=7&u,u>>>=3,l-=3}for(;r.have<19;)r.lens[A[r.have++]]=0;if(r.lencode=r.lendyn,r.lenbits=7,S={bits:r.lenbits},x=T(0,r.lens,0,19,r.lencode,0,r.work,S),r.lenbits=S.bits,x){e.msg="invalid code lengths set",r.mode=30;break}r.have=0,r.mode=19;case 19:for(;r.have<r.nlen+r.ndist;){for(;g=(C=r.lencode[u&(1<<r.lenbits)-1])>>>16&255,b=65535&C,!((_=C>>>24)<=l);){if(0===o)break e;o--,u+=n[s++]<<l,l+=8}if(b<16)u>>>=_,l-=_,r.lens[r.have++]=b;else{if(16===b){for(z=_+2;l<z;){if(0===o)break e;o--,u+=n[s++]<<l,l+=8}if(u>>>=_,l-=_,0===r.have){e.msg="invalid bit length repeat",r.mode=30;break}k=r.lens[r.have-1],d=3+(3&u),u>>>=2,l-=2}else if(17===b){for(z=_+3;l<z;){if(0===o)break e;o--,u+=n[s++]<<l,l+=8}l-=_,k=0,d=3+(7&(u>>>=_)),u>>>=3,l-=3}else{for(z=_+7;l<z;){if(0===o)break e;o--,u+=n[s++]<<l,l+=8}l-=_,k=0,d=11+(127&(u>>>=_)),u>>>=7,l-=7}if(r.have+d>r.nlen+r.ndist){e.msg="invalid bit length repeat",r.mode=30;break}for(;d--;)r.lens[r.have++]=k}}if(30===r.mode)break;if(0===r.lens[256]){e.msg="invalid code -- missing end-of-block",r.mode=30;break}if(r.lenbits=9,S={bits:r.lenbits},x=T(D,r.lens,0,r.nlen,r.lencode,0,r.work,S),r.lenbits=S.bits,x){e.msg="invalid literal/lengths set",r.mode=30;break}if(r.distbits=6,r.distcode=r.distdyn,S={bits:r.distbits},x=T(F,r.lens,r.nlen,r.ndist,r.distcode,0,r.work,S),r.distbits=S.bits,x){e.msg="invalid distances set",r.mode=30;break}if(r.mode=20,6===t)break e;case 20:r.mode=21;case 21:if(6<=o&&258<=h){e.next_out=a,e.avail_out=h,e.next_in=s,e.avail_in=o,r.hold=u,r.bits=l,R(e,c),a=e.next_out,i=e.output,h=e.avail_out,s=e.next_in,n=e.input,o=e.avail_in,u=r.hold,l=r.bits,12===r.mode&&(r.back=-1);break}for(r.back=0;g=(C=r.lencode[u&(1<<r.lenbits)-1])>>>16&255,b=65535&C,!((_=C>>>24)<=l);){if(0===o)break e;o--,u+=n[s++]<<l,l+=8}if(g&&0==(240&g)){for(v=_,y=g,w=b;g=(C=r.lencode[w+((u&(1<<v+y)-1)>>v)])>>>16&255,b=65535&C,!(v+(_=C>>>24)<=l);){if(0===o)break e;o--,u+=n[s++]<<l,l+=8}u>>>=v,l-=v,r.back+=v}if(u>>>=_,l-=_,r.back+=_,r.length=b,0===g){r.mode=26;break}if(32&g){r.back=-1,r.mode=12;break}if(64&g){e.msg="invalid literal/length code",r.mode=30;break}r.extra=15&g,r.mode=22;case 22:if(r.extra){for(z=r.extra;l<z;){if(0===o)break e;o--,u+=n[s++]<<l,l+=8}r.length+=u&(1<<r.extra)-1,u>>>=r.extra,l-=r.extra,r.back+=r.extra}r.was=r.length,r.mode=23;case 23:for(;g=(C=r.distcode[u&(1<<r.distbits)-1])>>>16&255,b=65535&C,!((_=C>>>24)<=l);){if(0===o)break e;o--,u+=n[s++]<<l,l+=8}if(0==(240&g)){for(v=_,y=g,w=b;g=(C=r.distcode[w+((u&(1<<v+y)-1)>>v)])>>>16&255,b=65535&C,!(v+(_=C>>>24)<=l);){if(0===o)break e;o--,u+=n[s++]<<l,l+=8}u>>>=v,l-=v,r.back+=v}if(u>>>=_,l-=_,r.back+=_,64&g){e.msg="invalid distance code",r.mode=30;break}r.offset=b,r.extra=15&g,r.mode=24;case 24:if(r.extra){for(z=r.extra;l<z;){if(0===o)break e;o--,u+=n[s++]<<l,l+=8}r.offset+=u&(1<<r.extra)-1,u>>>=r.extra,l-=r.extra,r.back+=r.extra}if(r.offset>r.dmax){e.msg="invalid distance too far back",r.mode=30;break}r.mode=25;case 25:if(0===h)break e;if(d=c-h,r.offset>d){if((d=r.offset-d)>r.whave&&r.sane){e.msg="invalid distance too far back",r.mode=30;break}p=d>r.wnext?(d-=r.wnext,r.wsize-d):r.wnext-d,d>r.length&&(d=r.length),m=r.window}else m=i,p=a-r.offset,d=r.length;for(h<d&&(d=h),h-=d,r.length-=d;i[a++]=m[p++],--d;);0===r.length&&(r.mode=21);break;case 26:if(0===h)break e;i[a++]=r.length,h--,r.mode=21;break;case 27:if(r.wrap){for(;l<32;){if(0===o)break e;o--,u|=n[s++]<<l,l+=8}if(c-=h,e.total_out+=c,r.total+=c,c&&(e.adler=r.check=r.flags?B(r.check,i,c,a-c):O(r.check,i,c,a-c)),c=h,(r.flags?u:L(u))!==r.check){e.msg="incorrect data check",r.mode=30;break}l=u=0}r.mode=28;case 28:if(r.wrap&&r.flags){for(;l<32;){if(0===o)break e;o--,u+=n[s++]<<l,l+=8}if(u!==(4294967295&r.total)){e.msg="incorrect length check",r.mode=30;break}l=u=0}r.mode=29;case 29:x=1;break e;case 30:x=-3;break e;case 31:return-4;case 32:default:return U}return e.next_out=a,e.avail_out=h,e.next_in=s,e.avail_in=o,r.hold=u,r.bits=l,(r.wsize||c!==e.avail_out&&r.mode<30&&(r.mode<27||4!==t))&&Z(e,e.output,e.next_out,c-e.avail_out)?(r.mode=31,-4):(f-=e.avail_in,c-=e.avail_out,e.total_in+=f,e.total_out+=c,r.total+=c,r.wrap&&c&&(e.adler=r.check=r.flags?B(r.check,i,c,e.next_out-c):O(r.check,i,c,e.next_out-c)),e.data_type=r.bits+(r.last?64:0)+(12===r.mode?128:0)+(20===r.mode||15===r.mode?256:0),(0==f&&0===c||4===t)&&x===N&&(x=-5),x)},r.inflateEnd=function(e){if(!e||!e.state)return U;var t=e.state;return t.window&&(t.window=null),e.state=null,N},r.inflateGetHeader=function(e,t){var r;return e&&e.state?0==(2&(r=e.state).wrap)?U:((r.head=t).done=!1,N):U},r.inflateSetDictionary=function(e,t){var r,n=t.length;return e&&e.state?0!==(r=e.state).wrap&&11!==r.mode?U:11===r.mode&&O(1,t,n,0)!==r.check?-3:Z(e,t,n,n)?(r.mode=31,-4):(r.havedict=1,N):U},r.inflateInfo="pako inflate (from Nodeca project)"},{"../utils/common":41,"./adler32":43,"./crc32":45,"./inffast":48,"./inftrees":50}],50:[function(e,t,r){"use strict";var D=e("../utils/common"),F=[3,4,5,6,7,8,9,10,11,13,15,17,19,23,27,31,35,43,51,59,67,83,99,115,131,163,195,227,258,0,0],N=[16,16,16,16,16,16,16,16,17,17,17,17,18,18,18,18,19,19,19,19,20,20,20,20,21,21,21,21,16,72,78],U=[1,2,3,4,5,7,9,13,17,25,33,49,65,97,129,193,257,385,513,769,1025,1537,2049,3073,4097,6145,8193,12289,16385,24577,0,0],P=[16,16,16,16,17,17,18,18,19,19,20,20,21,21,22,22,23,23,24,24,25,25,26,26,27,27,28,28,29,29,64,64];t.exports=function(e,t,r,n,i,s,a,o){var h,u,l,f,c,d,p,m,_,g=o.bits,b=0,v=0,y=0,w=0,k=0,x=0,S=0,z=0,C=0,E=0,A=null,I=0,O=new D.Buf16(16),B=new D.Buf16(16),R=null,T=0;for(b=0;b<=15;b++)O[b]=0;for(v=0;v<n;v++)O[t[r+v]]++;for(k=g,w=15;1<=w&&0===O[w];w--);if(w<k&&(k=w),0===w)return i[s++]=20971520,i[s++]=20971520,o.bits=1,0;for(y=1;y<w&&0===O[y];y++);for(k<y&&(k=y),b=z=1;b<=15;b++)if(z<<=1,(z-=O[b])<0)return-1;if(0<z&&(0===e||1!==w))return-1;for(B[1]=0,b=1;b<15;b++)B[b+1]=B[b]+O[b];for(v=0;v<n;v++)0!==t[r+v]&&(a[B[t[r+v]]++]=v);if(d=0===e?(A=R=a,19):1===e?(A=F,I-=257,R=N,T-=257,256):(A=U,R=P,-1),b=y,c=s,S=v=E=0,l=-1,f=(C=1<<(x=k))-1,1===e&&852<C||2===e&&592<C)return 1;for(;;){for(p=b-S,_=a[v]<d?(m=0,a[v]):a[v]>d?(m=R[T+a[v]],A[I+a[v]]):(m=96,0),h=1<<b-S,y=u=1<<x;i[c+(E>>S)+(u-=h)]=p<<24|m<<16|_|0,0!==u;);for(h=1<<b-1;E&h;)h>>=1;if(0!==h?(E&=h-1,E+=h):E=0,v++,0==--O[b]){if(b===w)break;b=t[r+a[v]]}if(k<b&&(E&f)!==l){for(0===S&&(S=k),c+=y,z=1<<(x=b-S);x+S<w&&!((z-=O[x+S])<=0);)x++,z<<=1;if(C+=1<<x,1===e&&852<C||2===e&&592<C)return 1;i[l=E&f]=k<<24|x<<16|c-s|0}}return 0!==E&&(i[c+E]=b-S<<24|64<<16|0),o.bits=k,0}},{"../utils/common":41}],51:[function(e,t,r){"use strict";t.exports={2:"need dictionary",1:"stream end",0:"","-1":"file error","-2":"stream error","-3":"data error","-4":"insufficient memory","-5":"buffer error","-6":"incompatible version"}},{}],52:[function(e,t,r){"use strict";var i=e("../utils/common"),o=0,h=1;function n(e){for(var t=e.length;0<=--t;)e[t]=0}var s=0,a=29,u=256,l=u+1+a,f=30,c=19,_=2*l+1,g=15,d=16,p=7,m=256,b=16,v=17,y=18,w=[0,0,0,0,0,0,0,0,1,1,1,1,2,2,2,2,3,3,3,3,4,4,4,4,5,5,5,5,0],k=[0,0,0,0,1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10,11,11,12,12,13,13],x=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,3,7],S=[16,17,18,0,8,7,9,6,10,5,11,4,12,3,13,2,14,1,15],z=new Array(2*(l+2));n(z);var C=new Array(2*f);n(C);var E=new Array(512);n(E);var A=new Array(256);n(A);var I=new Array(a);n(I);var O,B,R,T=new Array(f);function D(e,t,r,n,i){this.static_tree=e,this.extra_bits=t,this.extra_base=r,this.elems=n,this.max_length=i,this.has_stree=e&&e.length}function F(e,t){this.dyn_tree=e,this.max_code=0,this.stat_desc=t}function N(e){return e<256?E[e]:E[256+(e>>>7)]}function U(e,t){e.pending_buf[e.pending++]=255&t,e.pending_buf[e.pending++]=t>>>8&255}function P(e,t,r){e.bi_valid>d-r?(e.bi_buf|=t<<e.bi_valid&65535,U(e,e.bi_buf),e.bi_buf=t>>d-e.bi_valid,e.bi_valid+=r-d):(e.bi_buf|=t<<e.bi_valid&65535,e.bi_valid+=r)}function L(e,t,r){P(e,r[2*t],r[2*t+1])}function j(e,t){for(var r=0;r|=1&e,e>>>=1,r<<=1,0<--t;);return r>>>1}function Z(e,t,r){var n,i,s=new Array(g+1),a=0;for(n=1;n<=g;n++)s[n]=a=a+r[n-1]<<1;for(i=0;i<=t;i++){var o=e[2*i+1];0!==o&&(e[2*i]=j(s[o]++,o))}}function W(e){var t;for(t=0;t<l;t++)e.dyn_ltree[2*t]=0;for(t=0;t<f;t++)e.dyn_dtree[2*t]=0;for(t=0;t<c;t++)e.bl_tree[2*t]=0;e.dyn_ltree[2*m]=1,e.opt_len=e.static_len=0,e.last_lit=e.matches=0}function M(e){8<e.bi_valid?U(e,e.bi_buf):0<e.bi_valid&&(e.pending_buf[e.pending++]=e.bi_buf),e.bi_buf=0,e.bi_valid=0}function H(e,t,r,n){var i=2*t,s=2*r;return e[i]<e[s]||e[i]===e[s]&&n[t]<=n[r]}function G(e,t,r){for(var n=e.heap[r],i=r<<1;i<=e.heap_len&&(i<e.heap_len&&H(t,e.heap[i+1],e.heap[i],e.depth)&&i++,!H(t,n,e.heap[i],e.depth));)e.heap[r]=e.heap[i],r=i,i<<=1;e.heap[r]=n}function K(e,t,r){var n,i,s,a,o=0;if(0!==e.last_lit)for(;n=e.pending_buf[e.d_buf+2*o]<<8|e.pending_buf[e.d_buf+2*o+1],i=e.pending_buf[e.l_buf+o],o++,0===n?L(e,i,t):(L(e,(s=A[i])+u+1,t),0!==(a=w[s])&&P(e,i-=I[s],a),L(e,s=N(--n),r),0!==(a=k[s])&&P(e,n-=T[s],a)),o<e.last_lit;);L(e,m,t)}function Y(e,t){var r,n,i,s=t.dyn_tree,a=t.stat_desc.static_tree,o=t.stat_desc.has_stree,h=t.stat_desc.elems,u=-1;for(e.heap_len=0,e.heap_max=_,r=0;r<h;r++)0!==s[2*r]?(e.heap[++e.heap_len]=u=r,e.depth[r]=0):s[2*r+1]=0;for(;e.heap_len<2;)s[2*(i=e.heap[++e.heap_len]=u<2?++u:0)]=1,e.depth[i]=0,e.opt_len--,o&&(e.static_len-=a[2*i+1]);for(t.max_code=u,r=e.heap_len>>1;1<=r;r--)G(e,s,r);for(i=h;r=e.heap[1],e.heap[1]=e.heap[e.heap_len--],G(e,s,1),n=e.heap[1],e.heap[--e.heap_max]=r,e.heap[--e.heap_max]=n,s[2*i]=s[2*r]+s[2*n],e.depth[i]=(e.depth[r]>=e.depth[n]?e.depth[r]:e.depth[n])+1,s[2*r+1]=s[2*n+1]=i,e.heap[1]=i++,G(e,s,1),2<=e.heap_len;);e.heap[--e.heap_max]=e.heap[1],function(e,t){var r,n,i,s,a,o,h=t.dyn_tree,u=t.max_code,l=t.stat_desc.static_tree,f=t.stat_desc.has_stree,c=t.stat_desc.extra_bits,d=t.stat_desc.extra_base,p=t.stat_desc.max_length,m=0;for(s=0;s<=g;s++)e.bl_count[s]=0;for(h[2*e.heap[e.heap_max]+1]=0,r=e.heap_max+1;r<_;r++)p<(s=h[2*h[2*(n=e.heap[r])+1]+1]+1)&&(s=p,m++),h[2*n+1]=s,u<n||(e.bl_count[s]++,a=0,d<=n&&(a=c[n-d]),o=h[2*n],e.opt_len+=o*(s+a),f&&(e.static_len+=o*(l[2*n+1]+a)));if(0!==m){do{for(s=p-1;0===e.bl_count[s];)s--;e.bl_count[s]--,e.bl_count[s+1]+=2,e.bl_count[p]--,m-=2}while(0<m);for(s=p;0!==s;s--)for(n=e.bl_count[s];0!==n;)u<(i=e.heap[--r])||(h[2*i+1]!==s&&(e.opt_len+=(s-h[2*i+1])*h[2*i],h[2*i+1]=s),n--)}}(e,t),Z(s,u,e.bl_count)}function X(e,t,r){var n,i,s=-1,a=t[1],o=0,h=7,u=4;for(0===a&&(h=138,u=3),t[2*(r+1)+1]=65535,n=0;n<=r;n++)i=a,a=t[2*(n+1)+1],++o<h&&i===a||(o<u?e.bl_tree[2*i]+=o:0!==i?(i!==s&&e.bl_tree[2*i]++,e.bl_tree[2*b]++):o<=10?e.bl_tree[2*v]++:e.bl_tree[2*y]++,s=i,u=(o=0)===a?(h=138,3):i===a?(h=6,3):(h=7,4))}function V(e,t,r){var n,i,s=-1,a=t[1],o=0,h=7,u=4;for(0===a&&(h=138,u=3),n=0;n<=r;n++)if(i=a,a=t[2*(n+1)+1],!(++o<h&&i===a)){if(o<u)for(;L(e,i,e.bl_tree),0!=--o;);else 0!==i?(i!==s&&(L(e,i,e.bl_tree),o--),L(e,b,e.bl_tree),P(e,o-3,2)):o<=10?(L(e,v,e.bl_tree),P(e,o-3,3)):(L(e,y,e.bl_tree),P(e,o-11,7));s=i,u=(o=0)===a?(h=138,3):i===a?(h=6,3):(h=7,4)}}n(T);var q=!1;function J(e,t,r,n){P(e,(s<<1)+(n?1:0),3),function(e,t,r,n){M(e),n&&(U(e,r),U(e,~r)),i.arraySet(e.pending_buf,e.window,t,r,e.pending),e.pending+=r}(e,t,r,!0)}r._tr_init=function(e){q||(function(){var e,t,r,n,i,s=new Array(g+1);for(n=r=0;n<a-1;n++)for(I[n]=r,e=0;e<1<<w[n];e++)A[r++]=n;for(A[r-1]=n,n=i=0;n<16;n++)for(T[n]=i,e=0;e<1<<k[n];e++)E[i++]=n;for(i>>=7;n<f;n++)for(T[n]=i<<7,e=0;e<1<<k[n]-7;e++)E[256+i++]=n;for(t=0;t<=g;t++)s[t]=0;for(e=0;e<=143;)z[2*e+1]=8,e++,s[8]++;for(;e<=255;)z[2*e+1]=9,e++,s[9]++;for(;e<=279;)z[2*e+1]=7,e++,s[7]++;for(;e<=287;)z[2*e+1]=8,e++,s[8]++;for(Z(z,l+1,s),e=0;e<f;e++)C[2*e+1]=5,C[2*e]=j(e,5);O=new D(z,w,u+1,l,g),B=new D(C,k,0,f,g),R=new D(new Array(0),x,0,c,p)}(),q=!0),e.l_desc=new F(e.dyn_ltree,O),e.d_desc=new F(e.dyn_dtree,B),e.bl_desc=new F(e.bl_tree,R),e.bi_buf=0,e.bi_valid=0,W(e)},r._tr_stored_block=J,r._tr_flush_block=function(e,t,r,n){var i,s,a=0;0<e.level?(2===e.strm.data_type&&(e.strm.data_type=function(e){var t,r=4093624447;for(t=0;t<=31;t++,r>>>=1)if(1&r&&0!==e.dyn_ltree[2*t])return o;if(0!==e.dyn_ltree[18]||0!==e.dyn_ltree[20]||0!==e.dyn_ltree[26])return h;for(t=32;t<u;t++)if(0!==e.dyn_ltree[2*t])return h;return o}(e)),Y(e,e.l_desc),Y(e,e.d_desc),a=function(e){var t;for(X(e,e.dyn_ltree,e.l_desc.max_code),X(e,e.dyn_dtree,e.d_desc.max_code),Y(e,e.bl_desc),t=c-1;3<=t&&0===e.bl_tree[2*S[t]+1];t--);return e.opt_len+=3*(t+1)+5+5+4,t}(e),i=e.opt_len+3+7>>>3,(s=e.static_len+3+7>>>3)<=i&&(i=s)):i=s=r+5,r+4<=i&&-1!==t?J(e,t,r,n):4===e.strategy||s===i?(P(e,2+(n?1:0),3),K(e,z,C)):(P(e,4+(n?1:0),3),function(e,t,r,n){var i;for(P(e,t-257,5),P(e,r-1,5),P(e,n-4,4),i=0;i<n;i++)P(e,e.bl_tree[2*S[i]+1],3);V(e,e.dyn_ltree,t-1),V(e,e.dyn_dtree,r-1)}(e,e.l_desc.max_code+1,e.d_desc.max_code+1,a+1),K(e,e.dyn_ltree,e.dyn_dtree)),W(e),n&&M(e)},r._tr_tally=function(e,t,r){return e.pending_buf[e.d_buf+2*e.last_lit]=t>>>8&255,e.pending_buf[e.d_buf+2*e.last_lit+1]=255&t,e.pending_buf[e.l_buf+e.last_lit]=255&r,e.last_lit++,0===t?e.dyn_ltree[2*r]++:(e.matches++,t--,e.dyn_ltree[2*(A[r]+u+1)]++,e.dyn_dtree[2*N(t)]++),e.last_lit===e.lit_bufsize-1},r._tr_align=function(e){P(e,2,3),L(e,m,z),function(e){16===e.bi_valid?(U(e,e.bi_buf),e.bi_buf=0,e.bi_valid=0):8<=e.bi_valid&&(e.pending_buf[e.pending++]=255&e.bi_buf,e.bi_buf>>=8,e.bi_valid-=8)}(e)}},{"../utils/common":41}],53:[function(e,t,r){"use strict";t.exports=function(){this.input=null,this.next_in=0,this.avail_in=0,this.total_in=0,this.output=null,this.next_out=0,this.avail_out=0,this.total_out=0,this.msg="",this.state=null,this.data_type=2,this.adler=0}},{}],54:[function(e,t,r){(function(e){!function(r,n){"use strict";if(!r.setImmediate){var i,s,t,a,o=1,h={},u=!1,l=r.document,e=Object.getPrototypeOf&&Object.getPrototypeOf(r);e=e&&e.setTimeout?e:r,i="[object process]"==={}.toString.call(r.process)?function(e){process.nextTick(function(){c(e)})}:function(){if(r.postMessage&&!r.importScripts){var e=!0,t=r.onmessage;return r.onmessage=function(){e=!1},r.postMessage("","*"),r.onmessage=t,e}}()?(a="setImmediate$"+Math.random()+"$",r.addEventListener?r.addEventListener("message",d,!1):r.attachEvent("onmessage",d),function(e){r.postMessage(a+e,"*")}):r.MessageChannel?((t=new MessageChannel).port1.onmessage=function(e){c(e.data)},function(e){t.port2.postMessage(e)}):l&&"onreadystatechange"in l.createElement("script")?(s=l.documentElement,function(e){var t=l.createElement("script");t.onreadystatechange=function(){c(e),t.onreadystatechange=null,s.removeChild(t),t=null},s.appendChild(t)}):function(e){setTimeout(c,0,e)},e.setImmediate=function(e){"function"!=typeof e&&(e=new Function(""+e));for(var t=new Array(arguments.length-1),r=0;r<t.length;r++)t[r]=arguments[r+1];var n={callback:e,args:t};return h[o]=n,i(o),o++},e.clearImmediate=f}function f(e){delete h[e]}function c(e){if(u)setTimeout(c,0,e);else{var t=h[e];if(t){u=!0;try{!function(e){var t=e.callback,r=e.args;switch(r.length){case 0:t();break;case 1:t(r[0]);break;case 2:t(r[0],r[1]);break;case 3:t(r[0],r[1],r[2]);break;default:t.apply(n,r)}}(t)}finally{f(e),u=!1}}}}function d(e){e.source===r&&"string"==typeof e.data&&0===e.data.indexOf(a)&&c(+e.data.slice(a.length))}}("undefined"==typeof self?void 0===e?this:e:self)}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}]},{},[10])(10)});
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..619ca98
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,5038 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; connect-src 'self'; media-src blob:; img-src 'self' data:;">
+<title>Alta Video Player</title>
+<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect rx='20' width='100' height='100' fill='%23121826'/><polygon points='38,25 38,75 78,50' fill='%23006ED7'/></svg>">
+<script src="/static/jszip.min.js"></script>
+<style>
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+  :root {
+    /* Backgrounds */
+    --bg-app: #121826;
+    --bg-panel: #121826;
+    --bg-surface: #181F32;
+    --bg-surface-hover: rgba(0, 110, 215, 0.12);
+    --bg-surface-active: rgba(0, 110, 215, 0.20);
+    --bg-input: rgba(0, 110, 215, 0.10);
+    --bg-button: rgba(0, 110, 215, 0.20);
+    --bg-button-hover: rgba(0, 110, 215, 0.32);
+
+    /* Borders */
+    --border-default: rgba(244, 244, 246, 0.12);
+    --border-light: #EBEEF0;
+    --border-subtle: rgba(244, 244, 246, 0.12);
+
+    /* Text */
+    --text-primary: #F4F4F6;
+    --text-secondary: #656972;
+    --text-muted: #8D9399;
+    --text-on-accent: #FFFFFF;
+
+    /* Accent */
+    --accent-primary: #006ED7;
+    --accent-primary-hover: #0080F0;
+    --accent-primary-muted: rgba(0, 110, 215, 0.20);
+
+    /* Status */
+    --status-success: #20C62F;
+    --status-error: #DE1111;
+    --status-warning: #EAA301;
+    --status-info: #8D9399;
+    --status-purple: #8957E5;
+    --status-motion: #A855F7;
+
+    /* Overlays */
+    --overlay-dark: rgba(18, 24, 38, 0.60);
+    --overlay-panel: rgba(18, 24, 38, 0.85);
+
+    /* Spacing */
+    --space-xs: 4px;
+    --space-sm: 8px;
+    --space-md: 12px;
+    --space-lg: 16px;
+    --space-xl: 24px;
+    --space-2xl: 32px;
+
+    /* Radii */
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-lg: 8px;
+    --radius-xl: 12px;
+
+    /* Shadows */
+    --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.4);
+    --shadow-focus: 0 0 0 3px rgba(0, 110, 215, 0.25);
+
+    /* Typography */
+    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  }
+
+  body {
+    font-family: var(--font-family);
+    background: var(--bg-app);
+    color: var(--text-primary);
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    user-select: none;
+  }
+
+  /* Icon Rail */
+  .icon-rail {
+    width: 72px; height: 100vh; background: var(--bg-app);
+    display: flex; flex-direction: column; align-items: center;
+    padding: 16px 0; flex-shrink: 0;
+    border-right: 1px solid var(--border-default);
+    position: fixed; left: 0; top: 0; z-index: 60;
+  }
+  .icon-rail .rail-logo {
+    width: 36px; height: 36px; background: var(--accent-primary);
+    border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center;
+    margin-bottom: 4px;
+  }
+  .icon-rail .rail-logo svg { width: 20px; height: 20px; fill: #fff; }
+  .icon-rail .rail-label {
+    font-size: 10px; color: var(--text-secondary); text-transform: uppercase;
+    letter-spacing: 0.05em; margin-bottom: 20px; font-weight: 600;
+  }
+  .icon-rail .rail-sep { width: 32px; height: 1px; background: var(--border-default); margin: 8px 0; }
+  .icon-rail .rail-btn {
+    width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
+    border-radius: var(--radius-lg); cursor: pointer; transition: background 0.15s ease-out;
+    border: none; background: none; color: var(--text-secondary); margin-bottom: 4px;
+  }
+  .icon-rail .rail-btn:hover { background: var(--bg-surface-hover); color: var(--text-primary); }
+  .icon-rail .rail-btn.active { background: var(--accent-primary); color: #fff; }
+  .icon-rail .rail-btn svg { width: 20px; height: 20px; fill: currentColor; }
+  .icon-rail .rail-spacer { flex: 1; }
+
+  /* Header */
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 24px;
+    height: 56px;
+    background: var(--bg-panel);
+    border-bottom: 1px solid var(--border-default);
+    flex-shrink: 0;
+    margin-left: 72px;
+  }
+  .header-left { display: flex; align-items: center; gap: 12px; }
+  .header-title-badge {
+    width: 32px; height: 32px; background: var(--accent-primary); border-radius: var(--radius-md);
+    display: flex; align-items: center; justify-content: center;
+  }
+  .header-title-badge svg { width: 16px; height: 16px; fill: #fff; }
+  .header h1 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary); }
+  .header .header-subtitle { font-size: 12px; color: var(--text-secondary); font-weight: 400; }
+  .header-actions { display: flex; gap: 8px; align-items: center; }
+  .header .cam-count { font-size: 12px; color: var(--text-secondary); }
+
+  /* Offset body content for rail */
+  .drop-zone, .player-area { margin-left: 72px; transition: margin-left 0.2s ease-out; }
+  .header { transition: margin-left 0.2s ease-out; }
+  .loading-overlay { padding-left: 72px; transition: padding-left 0.2s ease-out; }
+
+  /* Drop zone */
+  .drop-zone {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border: 2px dashed var(--border-subtle);
+    border-radius: var(--radius-lg);
+    margin: 32px;
+    transition: border-color 0.15s ease-out, background 0.15s ease-out;
+    cursor: pointer;
+    position: relative;
+    background: var(--bg-surface);
+  }
+  .drop-zone.drag-over { border-color: var(--accent-primary); background: var(--bg-surface-hover); }
+  .drop-zone.hidden { display: none; }
+  .drop-zone .drop-icon-wrap {
+    width: 80px; height: 80px; border-radius: 50%; background: var(--bg-input);
+    display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
+    border: 1px solid var(--border-default);
+  }
+  .drop-zone svg { width: 36px; height: 36px; fill: var(--accent-primary); }
+  .drop-zone p { font-size: 16px; color: var(--text-primary); margin-bottom: 8px; font-weight: 600; }
+  .drop-zone small { font-size: 13px; color: var(--text-secondary); max-width: 400px; text-align: center; line-height: 1.4; }
+
+  /* Loading overlay */
+  .loading-overlay {
+    position: fixed; inset: 0; background: var(--overlay-panel);
+    display: flex; flex-direction: column; align-items: center; justify-content: center;
+    z-index: 100;
+  }
+  .loading-overlay.hidden { display: none; }
+  .loading-spinner {
+    width: 40px; height: 40px; border: 3px solid var(--border-default);
+    border-top-color: var(--accent-primary); border-radius: 50%;
+    animation: spin 0.8s linear infinite; margin-bottom: 16px;
+  }
+  @keyframes spin { to { transform: rotate(360deg); } }
+  .loading-text { font-size: 13px; color: var(--text-secondary); }
+  .loading-detail { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
+
+  /* Player area */
+  .player-area { flex: 1; display: none; flex-direction: column; min-height: 0; }
+  .player-area.active { display: flex; }
+
+  /* Camera grid — always fills available height */
+  .camera-grid {
+    flex: 1; display: grid; gap: 2px; padding: 2px; min-height: 0; background: #000;
+    grid-auto-rows: 1fr;
+  }
+  .camera-grid.cams-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
+  .camera-grid.cams-2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
+  .camera-grid.cams-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
+  .camera-grid.cams-3 .cam-cell:first-child { grid-column: 1 / -1; }
+  .camera-grid.cams-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
+  .camera-grid.cams-5 { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
+  .camera-grid.cams-6 { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
+  .camera-grid.cams-7 { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; }
+  .camera-grid.cams-8 { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; }
+  .camera-grid.cams-9 { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; }
+
+  .cam-cell {
+    position: relative; background: #000; overflow: hidden; cursor: pointer;
+    min-height: 0; min-width: 0;
+    border-left: 3px solid var(--cam-color, transparent);
+  }
+  .cam-cell video {
+    width: 100%; height: 100%; object-fit: contain; display: block;
+    position: absolute; inset: 0;
+  }
+  .cam-cell .hidden-video { display: none; }
+  .cam-cell.expanded {
+    position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 50;
+    grid-column: auto; grid-row: auto;
+  }
+  .player-area.has-expanded .controls-panel {
+    position: fixed; bottom: 0; left: 72px; right: 0; z-index: 51;
+    border-top: 1px solid var(--border-default);
+  }
+  .player-area.has-expanded .cam-cell.expanded {
+    bottom: 0; padding-bottom: 140px;
+  }
+
+  .cam-label {
+    position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 6px;
+    background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, transparent 100%);
+    padding: 10px 12px; border-radius: 0;
+    font-size: 13px; font-weight: 500; z-index: 2; color: #fff;
+  }
+  .cam-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+
+  .cam-info-badge {
+    position: absolute; top: 10px; right: 12px;
+    background: transparent; padding: 3px 8px; border-radius: var(--radius-sm);
+    font-size: 10px; color: #fff; z-index: 2; opacity: 0.8;
+  }
+
+  .cam-timestamp {
+    position: absolute; bottom: 8px; left: 8px;
+    background: transparent; padding: 3px 8px; border-radius: 0;
+    font-size: 11px; font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
+    color: #fff; z-index: 2;
+  }
+
+  .cam-segment-info {
+    position: absolute; bottom: 8px; right: 8px;
+    background: transparent; padding: 3px 8px; border-radius: 0;
+    font-size: 11px; color: var(--text-secondary); z-index: 2;
+  }
+
+  /* Bottom gradient overlay for video tiles */
+  .cam-cell::after {
+    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 40px;
+    background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, transparent 100%);
+    z-index: 1; pointer-events: none;
+  }
+
+  /* Panning cursor when zoomed */
+  .cam-cell.zoomed-in { cursor: grab; }
+  .cam-cell.zoomed-in.panning { cursor: grabbing; }
+
+  /* Drag-to-reorder */
+  .cam-cell.drag-source { opacity: 0.4; }
+  .cam-cell.drag-over { outline: 2px solid var(--cam-color, var(--accent-primary)); outline-offset: -2px; }
+  .cam-cell .drag-handle {
+    position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
+    background: rgba(0,0,0,0.7); padding: 2px 8px; border-radius: 4px;
+    font-size: 10px; color: var(--text-secondary); z-index: 3;
+    cursor: grab; opacity: 0; transition: opacity 0.15s;
+    display: flex; align-items: center; gap: 4px;
+  }
+  .cam-cell:hover .drag-handle { opacity: 1; }
+  .cam-cell .drag-handle svg { width: 12px; height: 12px; fill: var(--text-secondary); }
+
+  .cam-cell .zoom-indicator {
+    position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
+    background: rgba(0,0,0,0.7); padding: 3px 8px; border-radius: 4px;
+    font-size: 10px; color: var(--accent-primary); z-index: 3;
+    display: none; font-family: monospace;
+  }
+  .cam-cell .zoom-indicator.visible { display: block; }
+
+  /* Dewarp button & canvas */
+  .dewarp-btn {
+    position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
+    background: rgba(0,0,0,0.75); border: 1px solid var(--border-default); color: var(--text-secondary);
+    padding: 4px 12px; border-radius: 4px; font-size: 11px; font-weight: 600;
+    cursor: pointer; z-index: 5; opacity: 0; transition: opacity 0.15s;
+    display: flex; align-items: center; gap: 5px; letter-spacing: 0.3px;
+    pointer-events: none;
+  }
+  .cam-cell:hover .dewarp-btn { opacity: 1; pointer-events: auto; }
+  .dewarp-btn:hover { background: rgba(0,0,0,0.9); color: var(--text-primary); border-color: var(--accent-primary); box-shadow: var(--shadow-focus); }
+  .dewarp-btn.active { background: var(--accent-primary); color: #fff; border-color: var(--accent-primary); opacity: 1; pointer-events: auto; }
+  .dewarp-btn svg { width: 14px; height: 14px; fill: currentColor; }
+  .dewarp-canvas {
+    position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
+    display: none;
+  }
+  .dewarp-canvas.active { display: block; }
+  .cam-cell.dewarped video { visibility: hidden; }
+  .cam-cell.dewarped .no-signal { z-index: 0; }
+  .cam-cell.dewarped { cursor: grab; }
+  .cam-cell.dewarped.panning { cursor: grabbing; }
+
+  /* Magnifier selection rectangle */
+  .mag-selection {
+    position: absolute; border: 2px solid var(--accent-primary); background: rgba(0,110,215,0.12);
+    pointer-events: none; z-index: 4; display: none;
+  }
+  .mag-selection.active { display: block; }
+
+  /* Magnifier button */
+  .btn-mag { position: relative; }
+  .btn-mag.active { background: var(--accent-primary); color: #fff; }
+  .btn-mag.active:hover { background: var(--accent-primary-hover); }
+
+  /* Crosshair cursor when magnifier is active */
+  .cam-cell.mag-mode { cursor: crosshair; }
+
+  /* Slideshow mode */
+  .slideshow-container {
+    display: none; position: relative; flex: 1; background: #000; min-height: 0; overflow: hidden;
+  }
+  .slideshow-container.active { display: flex; }
+  .player-area.slideshow-mode .camera-grid { display: none; }
+
+  .slideshow-stage {
+    flex: 1; position: relative; min-height: 0;
+  }
+
+  .ss-pane {
+    position: absolute; inset: 0; background: #000; overflow: hidden;
+    animation: ssSlideIn 0.4s ease both;
+  }
+  .ss-pane.ss-exit {
+    animation: ssSlideOut 0.3s ease both;
+    pointer-events: none;
+  }
+  .ss-pane video {
+    width: 100%; height: 100%; object-fit: contain; display: block;
+  }
+  .ss-pane .ss-label {
+    position: absolute; bottom: 16px; left: 16px;
+    display: flex; align-items: center; gap: 8px;
+    background: rgba(0,0,0,0.80); padding: 8px 16px; border-radius: 6px;
+    font-size: 13px; font-weight: 600; z-index: 2;
+  }
+  .ss-pane .ss-label .cam-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
+  .ss-pane .ss-counter {
+    position: absolute; top: 16px; right: 16px;
+    background: rgba(0,0,0,0.70); padding: 4px 12px; border-radius: 4px;
+    font-size: 11px; color: var(--text-muted); z-index: 2;
+  }
+
+  @keyframes ssSlideIn {
+    from { opacity: 0; transform: scale(0.96) translateX(30px); }
+    to { opacity: 1; transform: scale(1) translateX(0); }
+  }
+  @keyframes ssSlideOut {
+    from { opacity: 1; transform: scale(1) translateX(0); }
+    to { opacity: 0; transform: scale(0.96) translateX(-30px); }
+  }
+
+  .btn-slideshow { position: relative; }
+  .btn-slideshow.active { background: var(--accent-primary); color: #fff; }
+  .btn-slideshow.active:hover { background: var(--accent-primary-hover); }
+
+  .no-signal {
+    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
+    font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 2px;
+    background: repeating-linear-gradient(0deg, #121826 0px, #121826 2px, #0e1320 2px, #0e1320 4px);
+    z-index: 1;
+  }
+
+  /* Controls panel */
+  .controls-panel {
+    background: var(--bg-panel); border-top: 1px solid var(--border-default);
+    padding: 8px 16px 4px; flex-shrink: 0;
+  }
+
+  .timeline-container { margin-bottom: 8px; }
+  .timeline-labels {
+    display: flex; justify-content: space-between;
+    font-size: 10px; color: var(--text-secondary); margin-bottom: 4px;
+    font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
+  }
+  .timeline-zoom-info {
+    font-size: 9px; color: var(--text-muted); text-align: center;
+    margin-top: 2px; font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
+  }
+  .timeline-outer {
+    position: relative; border-radius: 4px; overflow: hidden;
+  }
+  .timeline-track {
+    position: relative; background: var(--bg-input); border-radius: var(--radius-md);
+    cursor: pointer; min-height: 32px; overflow: hidden;
+  }
+  .timeline-segment {
+    position: absolute; height: 8px; border-radius: 2px; opacity: 0.7;
+    transition: opacity 0.15s;
+  }
+  .timeline-segment.active-segment { opacity: 1; box-shadow: 0 0 6px currentColor, 0 0 2px currentColor; }
+  .timeline-gap {
+    position: absolute; height: 8px;
+    background: repeating-linear-gradient(90deg, transparent, transparent 3px, var(--border-default) 3px, var(--border-default) 6px);
+    opacity: 0.3;
+  }
+  .timeline-playhead {
+    position: absolute; top: 0; bottom: 0; width: 2px;
+    background: #fff; z-index: 3; pointer-events: none;
+    box-shadow: 0 0 4px rgba(255,255,255,0.5);
+  }
+  .timeline-hover {
+    position: absolute; top: -20px; transform: translateX(-50%);
+    background: var(--bg-surface); border: 1px solid var(--border-default); padding: 2px 6px; border-radius: var(--radius-sm);
+    font-size: 10px; color: var(--text-primary); display: none; z-index: 4;
+    font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
+    box-shadow: var(--shadow-elevated);
+  }
+  .timeline-tick {
+    position: absolute; top: 0; width: 1px; background: rgba(255,255,255,0.08);
+    z-index: 1; pointer-events: none;
+  }
+  .timeline-tick.major { background: rgba(255,255,255,0.15); }
+  .timeline-tick-label {
+    position: absolute; top: 1px; transform: translateX(-50%);
+    font-size: 8px; color: var(--text-muted); z-index: 2; pointer-events: none;
+    font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
+    white-space: nowrap;
+  }
+  /* Mini-map showing full timeline when zoomed */
+  .timeline-minimap {
+    position: relative; height: 6px; background: var(--bg-input);
+    border-radius: 2px; margin-top: 3px; cursor: pointer; display: none;
+  }
+  .timeline-minimap.visible { display: block; }
+  .timeline-minimap .minimap-seg {
+    position: absolute; height: 100%; border-radius: 1px; opacity: 0.5;
+  }
+  .timeline-minimap .minimap-viewport {
+    position: absolute; top: 0; height: 100%;
+    border: 1px solid rgba(255,255,255,0.7); border-radius: 2px;
+    background: rgba(255,255,255,0.08); z-index: 2;
+  }
+
+  .transport {
+    display: flex; align-items: center; justify-content: space-between; gap: 8px;
+  }
+  .transport-left, .transport-right { display: flex; align-items: center; gap: 4px; }
+  .transport-center { display: flex; align-items: center; gap: 4px; }
+
+  .btn {
+    display: flex; align-items: center; justify-content: center;
+    background: none; border: none; color: var(--text-secondary); cursor: pointer;
+    border-radius: var(--radius-md); transition: background 0.15s ease-out, color 0.15s ease-out;
+  }
+  .btn:hover { background: var(--bg-button-hover); color: var(--text-primary); }
+  .btn svg { fill: currentColor; }
+  .btn-icon { width: 36px; height: 36px; }
+  .btn-icon svg { width: 20px; height: 20px; }
+  .btn-play { width: 40px; height: 40px; background: var(--accent-primary); border-radius: 50%; color: #fff; }
+  .btn-play:hover { background: var(--accent-primary-hover); }
+  .btn-play svg { width: 20px; height: 20px; fill: #fff; }
+
+  .speed-display {
+    font-size: 13px; font-weight: 500; min-width: 44px; text-align: center;
+    padding: 4px 8px; background: var(--bg-input); border: 1px solid var(--border-default);
+    border-radius: var(--radius-md); font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
+  }
+  .speed-display.highlight { color: var(--accent-primary); }
+
+  .time-display {
+    font-size: 13px; font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
+    color: var(--text-primary); padding: 0 8px; white-space: nowrap;
+  }
+
+  .kb-hints {
+    display: flex; justify-content: center; gap: 16px; padding: 4px 16px 8px;
+    font-size: 10px; color: var(--text-muted); flex-wrap: wrap;
+  }
+  .kb-hints kbd {
+    background: var(--bg-input); border: 1px solid var(--border-default); border-radius: var(--radius-sm);
+    padding: 1px 5px; font-family: inherit; font-size: 10px; color: var(--text-secondary);
+  }
+
+  .btn-add {
+    padding: 8px 16px; font-size: 13px; font-weight: 500; gap: 6px;
+    border: none; border-radius: var(--radius-md); background: var(--bg-button);
+    color: var(--text-primary); transition: background 0.15s ease-out;
+  }
+  .btn-add:hover { background: var(--bg-button-hover); }
+  .btn-add svg { width: 14px; height: 14px; fill: currentColor; }
+
+  ::-webkit-scrollbar { width: 6px; }
+  ::-webkit-scrollbar-track { background: var(--bg-panel); }
+  ::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 3px; }
+
+  #fileInput { display: none; }
+
+  :fullscreen .header { display: none; }
+  :fullscreen .icon-rail { display: none; }
+  :fullscreen .player-area { margin-left: 0; }
+  :fullscreen .kb-hints { display: none; }
+
+  /* Verification badge */
+  .verify-badge {
+    display: none; align-items: center; gap: 6px; padding: 4px 10px;
+    border-radius: var(--radius-md); font-size: 11px; font-weight: 600; cursor: pointer;
+    border: 1px solid transparent; transition: background 0.15s ease-out;
+  }
+  .verify-badge.visible { display: flex; }
+  .verify-badge .verify-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+  .verify-badge.status-verifying { color: var(--text-secondary); border-color: var(--border-default); }
+  .verify-badge.status-verifying .verify-dot { background: var(--text-secondary); animation: pulse 1.5s ease-in-out infinite; }
+  .verify-badge.status-success { color: var(--status-success); border-color: rgba(32,198,47,0.3); background: rgba(32,198,47,0.1); }
+  .verify-badge.status-success .verify-dot { background: var(--status-success); }
+  .verify-badge.status-unverified { color: var(--status-warning); border-color: rgba(234,163,1,0.3); background: rgba(234,163,1,0.1); }
+  .verify-badge.status-unverified .verify-dot { background: var(--status-warning); }
+  .verify-badge.status-failed { color: var(--status-error); border-color: rgba(222,17,17,0.3); background: rgba(222,17,17,0.1); }
+  .verify-badge.status-failed .verify-dot { background: var(--status-error); }
+  .verify-badge.status-none { color: var(--text-secondary); border-color: var(--border-default); }
+  .verify-badge.status-none .verify-dot { background: var(--text-secondary); }
+  @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
+
+  /* Verification modal */
+  .verify-modal-overlay {
+    position: fixed; inset: 0; background: var(--overlay-dark);
+    display: flex; align-items: center; justify-content: center; z-index: 200;
+  }
+  .verify-modal-overlay.hidden { display: none; }
+  .verify-modal {
+    background: var(--bg-app); border: 1px solid var(--border-default); border-radius: var(--radius-xl);
+    padding: 20px; max-width: 520px; width: 90%; max-height: 70vh; overflow-y: auto;
+    box-shadow: var(--shadow-elevated);
+  }
+  .verify-modal h2 { font-size: 14px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
+  .verify-modal .verify-summary { font-size: 12px; color: var(--text-secondary); margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border-default); }
+  .verify-modal .verify-cert-info { font-size: 11px; color: var(--text-secondary); margin-bottom: 12px; padding: 8px; background: var(--bg-surface-hover); border-radius: 4px; }
+  .verify-modal .verify-cert-info span { color: var(--text-primary); }
+  .verify-file-list { list-style: none; }
+  .verify-file-list li {
+    display: flex; align-items: center; gap: 8px; padding: 4px 0;
+    font-size: 11px; font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
+  }
+  .verify-file-list .vf-icon { flex-shrink: 0; font-size: 13px; }
+  .verify-file-list .vf-name { color: var(--text-primary); word-break: break-all; }
+  .verify-modal .close-btn {
+    margin-top: 16px; width: 100%; padding: 8px; background: var(--bg-button);
+    border: none; border-radius: var(--radius-md); color: var(--text-primary);
+    cursor: pointer; font-size: 13px; font-weight: 500;
+    transition: background 0.15s ease-out;
+  }
+  .verify-modal .close-btn:hover { background: var(--bg-button-hover); }
+
+  /* Password modal */
+  .password-modal-overlay {
+    position: fixed; inset: 0; background: var(--overlay-dark);
+    display: flex; align-items: center; justify-content: center; z-index: 300;
+  }
+  .password-modal-overlay.hidden { display: none; }
+  .password-modal {
+    background: var(--bg-app); border: 1px solid var(--border-default); border-radius: var(--radius-xl);
+    padding: 24px; max-width: 400px; width: 90%; text-align: center;
+    box-shadow: var(--shadow-elevated);
+  }
+  .password-modal .pw-icon { font-size: 32px; margin-bottom: 12px; }
+  .password-modal h2 { font-size: 14px; margin-bottom: 4px; }
+  .password-modal p { font-size: 12px; color: var(--text-secondary); margin-bottom: 16px; }
+  .password-modal .pw-error {
+    font-size: 11px; color: var(--status-error); margin-bottom: 8px; min-height: 16px;
+  }
+  .password-modal input[type="password"] {
+    width: 100%; padding: 10px 12px; background: var(--bg-input); border: 1px solid var(--border-default);
+    border-radius: var(--radius-md); color: var(--text-primary); font-size: 14px; outline: none;
+    font-family: inherit; margin-bottom: 12px;
+    transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
+  }
+  .password-modal input[type="password"]:focus { border-color: var(--accent-primary); box-shadow: var(--shadow-focus); }
+  .password-modal .pw-buttons { display: flex; gap: 8px; }
+  .password-modal .pw-btn {
+    flex: 1; padding: 8px; border-radius: var(--radius-md); border: none;
+    cursor: pointer; font-size: 13px; font-weight: 500; font-family: inherit;
+  }
+  .password-modal .pw-btn-cancel { background: var(--bg-button); color: var(--text-primary); }
+  .password-modal .pw-btn-cancel:hover { background: var(--bg-button-hover); }
+  .password-modal .pw-btn-submit { background: var(--accent-primary); color: #fff; }
+  .password-modal .pw-btn-submit:hover { background: var(--accent-primary-hover); }
+
+  /* Log panel */
+  .log-panel {
+    position: fixed; right: 0; top: 0; width: 360px; height: 100vh;
+    background: var(--bg-app); border-left: 1px solid var(--border-default);
+    z-index: 150; display: flex; flex-direction: column;
+    transform: translateX(0); transition: transform 0.2s ease-out;
+  }
+  .log-panel.hidden { transform: translateX(100%); pointer-events: none; }
+  .log-panel-header {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 14px 16px; border-bottom: 1px solid var(--border-default); flex-shrink: 0;
+  }
+  .log-panel-header h2 { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
+  .log-panel-header h2 svg { width: 16px; height: 16px; fill: var(--text-secondary); }
+  .log-panel-actions { display: flex; gap: 6px; }
+  .log-panel-actions button {
+    background: var(--bg-button); border: none; border-radius: var(--radius-sm);
+    color: var(--text-secondary); cursor: pointer; font-size: 11px; padding: 4px 10px;
+    font-family: inherit; transition: background 0.15s ease-out;
+  }
+  .log-panel-actions button:hover { background: var(--bg-button-hover); color: var(--text-primary); }
+  .log-entries {
+    flex: 1; overflow-y: auto; padding: 8px 12px;
+    scrollbar-width: thin; scrollbar-color: var(--border-default) transparent;
+  }
+  .log-entries::-webkit-scrollbar { width: 5px; }
+  .log-entries::-webkit-scrollbar-track { background: transparent; }
+  .log-entries::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 3px; }
+  .log-entry {
+    display: flex; gap: 8px; padding: 6px 8px; border-radius: var(--radius-sm);
+    font-size: 11px; line-height: 1.5; border-left: 3px solid transparent;
+    margin-bottom: 2px; word-break: break-word;
+  }
+  .log-entry:hover { background: var(--bg-surface-hover); }
+  .log-entry .log-time { color: var(--text-muted); white-space: nowrap; flex-shrink: 0; font-family: monospace; font-size: 10px; }
+  .log-entry .log-msg { color: var(--text-primary); flex: 1; }
+  .log-entry.log-info { border-left-color: var(--accent-primary); }
+  .log-entry.log-warn { border-left-color: var(--status-warning); }
+  .log-entry.log-warn .log-msg { color: var(--status-warning); }
+  .log-entry.log-error { border-left-color: var(--status-error); }
+  .log-entry.log-error .log-msg { color: var(--status-error); }
+  .log-entry.log-success { border-left-color: var(--status-success); }
+  .log-entry.log-success .log-msg { color: var(--status-success); }
+  .log-empty {
+    display: flex; align-items: center; justify-content: center;
+    height: 100%; color: var(--text-muted); font-size: 12px;
+  }
+  .rail-btn .log-badge {
+    position: absolute; top: 4px; right: 4px; width: 8px; height: 8px;
+    border-radius: 50%; background: var(--status-error); display: none;
+  }
+  .rail-btn { position: relative; }
+
+  /* Layout panel — pushes content */
+  .layout-panel {
+    position: fixed; left: 72px; top: 0; width: 280px; height: 100vh;
+    background: var(--bg-app); border-right: 1px solid var(--border-default);
+    z-index: 55; display: flex; flex-direction: column;
+    transform: translateX(0); transition: transform 0.2s ease-out;
+  }
+  .layout-panel.hidden { transform: translateX(-100%); pointer-events: none; }
+  /* When layout panel is open, push all content right */
+  body.layout-open .header,
+  body.layout-open .drop-zone,
+  body.layout-open .player-area { margin-left: 352px; }
+  body.layout-open .loading-overlay { padding-left: 352px; }
+  body.layout-open .player-area.has-expanded .controls-panel { left: 352px; }
+  .layout-panel-header {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 14px 16px; border-bottom: 1px solid var(--border-default); flex-shrink: 0;
+  }
+  .layout-panel-header h2 { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
+  .layout-panel-header h2 svg { width: 16px; height: 16px; fill: var(--text-secondary); }
+  .layout-section { padding: 12px 16px; border-bottom: 1px solid var(--border-default); }
+  .layout-section-title { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 10px; }
+  .layout-presets { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 6px; margin-bottom: 8px; }
+  .layout-preset-btn {
+    display: flex; flex-direction: column; align-items: center; gap: 4px;
+    padding: 8px 4px; background: var(--bg-button); border: 1px solid transparent;
+    border-radius: var(--radius-md); cursor: pointer; color: var(--text-secondary);
+    font-size: 10px; font-weight: 500; transition: all 0.15s ease-out;
+  }
+  .layout-preset-btn:hover { background: var(--bg-button-hover); color: var(--text-primary); }
+  .layout-preset-btn.active { background: var(--accent-primary-muted); border-color: var(--accent-primary); color: var(--accent-primary); }
+  .layout-preset-btn svg { width: 22px; height: 22px; fill: currentColor; }
+  .layout-custom-row {
+    display: flex; align-items: center; gap: 6px; margin-top: 8px;
+  }
+  .layout-custom-row input {
+    width: 44px; padding: 5px 6px; background: var(--bg-input); border: 1px solid var(--border-default);
+    border-radius: var(--radius-sm); color: var(--text-primary); font-size: 12px; text-align: center;
+    font-family: inherit; outline: none;
+  }
+  .layout-custom-row input:focus { border-color: var(--accent-primary); }
+  .layout-custom-row span { color: var(--text-muted); font-size: 12px; }
+  .layout-custom-row button {
+    padding: 5px 12px; background: var(--bg-button); border: none; border-radius: var(--radius-sm);
+    color: var(--text-primary); font-size: 11px; cursor: pointer; font-family: inherit;
+    transition: background 0.15s ease-out;
+  }
+  .layout-custom-row button:hover { background: var(--bg-button-hover); }
+  .layout-device-list {
+    flex: 1; overflow-y: auto; padding: 8px 12px;
+    scrollbar-width: thin; scrollbar-color: var(--border-default) transparent;
+  }
+  .layout-device-item {
+    display: flex; align-items: center; gap: 8px; padding: 8px 10px;
+    border-radius: var(--radius-sm); cursor: pointer; transition: background 0.1s;
+  }
+  .layout-device-item:hover { background: var(--bg-surface-hover); }
+  .layout-device-item .dev-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
+  .layout-device-item .dev-info { flex: 1; min-width: 0; }
+  .layout-device-item .dev-name { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .layout-device-item .dev-meta { font-size: 10px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .layout-device-item .dev-toggle {
+    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
+    border-radius: var(--radius-sm); border: none; background: none; cursor: pointer;
+    color: var(--text-secondary); transition: all 0.15s;
+  }
+  .layout-device-item .dev-toggle:hover { background: var(--bg-button); }
+  .layout-device-item .dev-toggle.hidden-cam { color: var(--text-muted); opacity: 0.4; }
+  .layout-device-item .dev-toggle svg { width: 16px; height: 16px; fill: currentColor; }
+  .layout-device-empty { padding: 24px; text-align: center; color: var(--text-muted); font-size: 12px; }
+
+  /* ─── Analytics (Motion) Panel ─── */
+  .analytics-panel {
+    position: fixed; right: 0; top: 0; width: 400px; height: 100vh;
+    background: var(--bg-app); border-left: 1px solid var(--border-default);
+    z-index: 150; display: flex; flex-direction: column;
+    transform: translateX(0); transition: transform 0.2s ease-out;
+  }
+  .analytics-panel.hidden { transform: translateX(100%); pointer-events: none; }
+  .analytics-panel-header {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 14px 16px; border-bottom: 1px solid var(--border-default); flex-shrink: 0;
+  }
+  .analytics-panel-header h2 {
+    font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px;
+    color: var(--text-primary);
+  }
+  .analytics-panel-header h2 svg { width: 16px; height: 16px; fill: var(--status-motion); }
+
+  .analytics-section {
+    padding: 12px 16px; border-bottom: 1px solid var(--border-default);
+  }
+  .analytics-section-title {
+    font-size: 10px; font-weight: 600; text-transform: uppercase;
+    letter-spacing: 1px; color: var(--text-muted); margin-bottom: 10px;
+  }
+
+  /* Sensitivity slider */
+  .sensitivity-row {
+    display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
+  }
+  .sensitivity-row label { font-size: 11px; color: var(--text-secondary); white-space: nowrap; min-width: 28px; }
+  .sensitivity-slider {
+    -webkit-appearance: none; appearance: none;
+    flex: 1; height: 4px; border-radius: 2px;
+    background: linear-gradient(to right, var(--bg-button) 0%, var(--status-motion) 100%);
+    outline: none; cursor: pointer;
+  }
+  .sensitivity-slider::-webkit-slider-thumb {
+    -webkit-appearance: none; appearance: none;
+    width: 14px; height: 14px; border-radius: 50%;
+    background: var(--text-primary); cursor: pointer;
+    border: 2px solid var(--status-motion);
+    box-shadow: 0 0 4px rgba(168, 85, 247, 0.4);
+  }
+  .sensitivity-slider::-moz-range-thumb {
+    width: 14px; height: 14px; border-radius: 50%;
+    background: var(--text-primary); cursor: pointer;
+    border: 2px solid var(--status-motion);
+    box-shadow: 0 0 4px rgba(168, 85, 247, 0.4);
+  }
+  .sensitivity-value {
+    font-size: 11px; color: var(--status-motion); font-weight: 600;
+    min-width: 24px; text-align: right; font-family: monospace;
+  }
+
+  .sensitivity-presets {
+    display: flex; gap: 6px; margin-bottom: 8px;
+  }
+  .sensitivity-preset-btn {
+    flex: 1; padding: 5px 4px; background: var(--bg-button); border: 1px solid transparent;
+    border-radius: var(--radius-sm); cursor: pointer; color: var(--text-secondary);
+    font-size: 10px; font-weight: 500; font-family: inherit;
+    transition: all 0.15s ease-out; text-align: center;
+  }
+  .sensitivity-preset-btn:hover { background: var(--bg-button-hover); color: var(--text-primary); }
+  .sensitivity-preset-btn.active { background: var(--accent-primary-muted); border-color: var(--status-motion); color: var(--status-motion); }
+
+  .sensitivity-preview {
+    font-size: 11px; color: var(--text-muted); padding: 4px 0;
+    font-family: monospace;
+  }
+  .sensitivity-preview .motion-pct { color: var(--status-motion); font-weight: 600; }
+
+  /* Scan controls */
+  .scan-controls { display: flex; gap: 8px; margin-bottom: 8px; }
+  .scan-btn {
+    flex: 1; padding: 8px 12px; border-radius: var(--radius-md); border: none;
+    cursor: pointer; font-size: 12px; font-weight: 500; font-family: inherit;
+    display: flex; align-items: center; justify-content: center; gap: 6px;
+    transition: all 0.15s ease-out;
+  }
+  .scan-btn-primary { background: var(--status-motion); color: #fff; }
+  .scan-btn-primary:hover { filter: brightness(1.15); }
+  .scan-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; filter: none; }
+  .scan-btn-stop { background: var(--status-error); color: #fff; display: none; }
+  .scan-btn-stop:hover { filter: brightness(1.15); }
+  .scan-btn-monitor { background: var(--bg-button); color: var(--text-primary); }
+  .scan-btn-monitor:hover { background: var(--bg-button-hover); }
+  .scan-btn-monitor.active { background: var(--status-motion); color: #fff; }
+
+  .scan-progress { display: none; margin-bottom: 4px; }
+  .scan-progress-bar {
+    height: 4px; border-radius: 2px; background: var(--bg-button); overflow: hidden;
+  }
+  .scan-progress-fill {
+    height: 100%; background: var(--status-motion); border-radius: 2px;
+    transition: width 0.2s ease-out; width: 0%;
+  }
+  .scan-progress-label {
+    display: flex; justify-content: space-between;
+    font-size: 10px; color: var(--text-muted); margin-top: 4px;
+  }
+
+  /* Activity summary */
+  .activity-summary { display: none; }
+  .activity-sparkline {
+    display: flex; align-items: flex-end; height: 24px; gap: 1px; margin-bottom: 6px;
+  }
+  .activity-sparkline .spark-bar {
+    flex: 1; min-width: 2px; background: var(--status-motion);
+    border-radius: 1px 1px 0 0; opacity: 0.6;
+    transition: opacity 0.15s;
+  }
+  .activity-sparkline .spark-bar:hover { opacity: 1; }
+  .activity-summary-text {
+    font-size: 11px; color: var(--text-muted); line-height: 1.5;
+  }
+
+  /* Motion events list */
+  .motion-events-list {
+    flex: 1; overflow-y: auto; padding: 8px 12px;
+    scrollbar-width: thin; scrollbar-color: var(--border-default) transparent;
+  }
+  .motion-events-list::-webkit-scrollbar { width: 5px; }
+  .motion-events-list::-webkit-scrollbar-track { background: transparent; }
+  .motion-events-list::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 3px; }
+
+  .motion-event-card {
+    display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px;
+    border-radius: var(--radius-sm); cursor: pointer;
+    transition: background 0.1s; border-left: 3px solid var(--status-motion);
+    margin-bottom: 4px;
+  }
+  .motion-event-card:hover { background: var(--bg-surface-hover); }
+  .motion-event-info { flex: 1; min-width: 0; }
+  .motion-event-header {
+    display: flex; align-items: center; justify-content: space-between;
+    margin-bottom: 2px;
+  }
+  .motion-event-time { font-size: 11px; font-weight: 500; color: var(--text-primary); font-family: monospace; }
+  .motion-event-pct { font-size: 10px; font-weight: 600; color: var(--status-motion); font-family: monospace; }
+  .motion-event-camera { font-size: 10px; color: var(--text-muted); margin-bottom: 4px; }
+  .motion-event-hotspot {
+    display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(8, 1fr);
+    gap: 1px; width: 60px; height: 32px;
+  }
+  .motion-event-hotspot .hs-cell {
+    border-radius: 1px;
+    background: var(--bg-button);
+  }
+  .motion-event-jump {
+    padding: 3px 8px; background: var(--bg-button); border: none;
+    border-radius: var(--radius-sm); color: var(--text-secondary);
+    cursor: pointer; font-size: 10px; font-family: inherit;
+    transition: all 0.15s; flex-shrink: 0; align-self: center;
+  }
+  .motion-event-jump:hover { background: var(--bg-button-hover); color: var(--text-primary); }
+
+  .motion-events-empty {
+    display: flex; align-items: center; justify-content: center;
+    height: 100px; color: var(--text-muted); font-size: 12px;
+  }
+
+  /* Analytics panel footer */
+  .analytics-footer {
+    padding: 12px 16px; border-top: 1px solid var(--border-default);
+    flex-shrink: 0;
+  }
+  .analytics-footer-actions { display: flex; gap: 6px; margin-bottom: 10px; }
+  .analytics-footer-actions button {
+    background: var(--bg-button); border: none; border-radius: var(--radius-sm);
+    color: var(--text-secondary); cursor: pointer; font-size: 11px; padding: 4px 10px;
+    font-family: inherit; transition: background 0.15s ease-out;
+  }
+  .analytics-footer-actions button:hover { background: var(--bg-button-hover); color: var(--text-primary); }
+
+  .analytics-teaser {
+    padding: 10px 12px; background: var(--bg-surface); border-radius: var(--radius-md);
+    border: 1px solid var(--border-default);
+  }
+  .analytics-teaser-title {
+    font-size: 11px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px;
+    display: flex; align-items: center; gap: 6px;
+  }
+  .analytics-teaser-text { font-size: 10px; color: var(--text-muted); line-height: 1.5; }
+
+  /* Skip-to-motion buttons in transport */
+  .btn-skip-motion svg { fill: var(--status-motion); }
+
+  /* Scanning indicator on rail button */
+  .rail-btn.scanning {
+    position: relative;
+  }
+  .rail-btn.scanning::after {
+    content: '';
+    position: absolute; inset: 4px;
+    border-radius: var(--radius-sm);
+    border: 2px solid var(--status-motion);
+    animation: scan-pulse 1.2s ease-in-out infinite;
+    pointer-events: none;
+  }
+  @keyframes scan-pulse {
+    0%, 100% { opacity: 0.3; }
+    50% { opacity: 1; }
+  }
+</style>
+</head>
+<body>
+
+<nav class="icon-rail">
+  <div class="rail-logo">
+    <svg viewBox="0 0 24 24"><polygon points="8,5 8,19 19,12"/></svg>
+  </div>
+  <span class="rail-label">Video</span>
+  <div class="rail-sep"></div>
+  <button class="rail-btn" title="Grid Layout" id="railGridBtn">
+    <svg viewBox="0 0 24 24"><path d="M3 3v8h8V3H3zm6 6H5V5h4v4zm-6 4v8h8v-8H3zm6 6H5v-4h4v4zm4-16v8h8V3h-8zm6 6h-4V5h4v4zm-6 4v8h8v-8h-8zm6 6h-4v-4h4v4z"/></svg>
+  </button>
+  <button class="rail-btn" title="Motion Analytics" id="railAnalyticsBtn">
+    <svg viewBox="0 0 24 24"><path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/></svg>
+  </button>
+  <div class="rail-sep"></div>
+  <button class="rail-btn" title="Activity Log" id="railLogBtn">
+    <svg viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>
+    <span class="log-badge" id="logBadge"></span>
+  </button>
+  <div class="rail-spacer"></div>
+  <button class="rail-btn" title="Add Files" id="railAddBtn">
+    <svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
+  </button>
+</nav>
+
+<div class="header">
+  <div class="header-left">
+    <div class="header-title-badge">
+      <svg viewBox="0 0 24 24"><path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"/></svg>
+    </div>
+    <div>
+      <h1>Alta Video Player</h1>
+    </div>
+  </div>
+  <div class="header-actions">
+    <div class="verify-badge" id="verifyBadge" title="Click for details">
+      <span class="verify-dot"></span>
+      <span class="verify-label">Integrity</span>
+    </div>
+    <span class="cam-count" id="camCount"></span>
+    <button class="btn btn-add" id="addFilesBtn" style="display:none">
+      <svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
+      Add Files
+    </button>
+    <button class="btn btn-add" id="newSessionBtn" style="display:none" title="Clear all loaded data and start fresh">
+      <svg viewBox="0 0 24 24"><path d="M17.65 6.35A7.958 7.958 0 0012 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0112 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>
+      New Session
+    </button>
+  </div>
+</div>
+
+<div class="drop-zone" id="dropZone">
+  <div class="drop-icon-wrap">
+    <svg viewBox="0 0 24 24"><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/></svg>
+  </div>
+  <p>Drop export folder or ZIP files here</p>
+  <small>Supports ZIP archives, folders, or individual MP4 + TXT files from Alta exports</small>
+</div>
+
+<div class="loading-overlay hidden" id="loadingOverlay">
+  <div class="loading-spinner"></div>
+  <div class="loading-text" id="loadingText">Extracting files...</div>
+  <div class="loading-detail" id="loadingDetail"></div>
+</div>
+
+<div class="player-area" id="playerArea">
+  <div class="camera-grid" id="cameraGrid"></div>
+  <div class="slideshow-container" id="slideshowContainer">
+    <div class="slideshow-stage" id="slideshowStage"></div>
+  </div>
+  <div class="controls-panel">
+    <div class="timeline-container">
+      <div class="timeline-labels">
+        <span id="tlStart">00:00:00</span>
+        <span id="tlEnd">00:00:00</span>
+      </div>
+      <div class="timeline-outer" id="timelineOuter">
+        <div class="timeline-track" id="timelineTrack">
+          <div class="timeline-playhead" id="playhead" style="left:0"></div>
+          <div class="timeline-hover" id="timelineHover">00:00:00</div>
+        </div>
+        <div class="timeline-minimap" id="timelineMinimap">
+          <div class="minimap-viewport" id="minimapViewport"></div>
+        </div>
+      </div>
+      <div class="timeline-zoom-info" id="tlZoomInfo"></div>
+    </div>
+    <div class="transport">
+      <div class="transport-left">
+        <div class="time-display" id="timeDisplay">00:00:00 / 00:00:00</div>
+      </div>
+      <div class="transport-center">
+        <button class="btn btn-icon" id="btnSkipBack" title="Skip back 10s (Shift+Left)">
+          <svg viewBox="0 0 24 24"><path d="M11.99 5V1l-5 5 5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6h-2c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/></svg>
+        </button>
+        <button class="btn btn-icon" id="btnFrameBack" title="Frame back (Left)">
+          <svg viewBox="0 0 24 24"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg>
+        </button>
+        <button class="btn btn-play" id="btnPlay" title="Play/Pause (Space)">
+          <svg viewBox="0 0 24 24" id="playIcon"><path d="M8 5v14l11-7z"/></svg>
+        </button>
+        <button class="btn btn-icon" id="btnFrameFwd" title="Frame forward (Right)">
+          <svg viewBox="0 0 24 24"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/></svg>
+        </button>
+        <button class="btn btn-icon" id="btnSkipFwd" title="Skip forward 10s (Shift+Right)">
+          <svg viewBox="0 0 24 24"><path d="M12.01 5V1l5 5-5 5V7c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6h2c0 4.42-3.58 8-8 8s-8-3.58-8-8 3.58-8 8-8z"/></svg>
+        </button>
+        <span style="width:1px;height:18px;background:var(--border-default);margin:0 4px;flex-shrink:0;"></span>
+        <button class="btn btn-icon btn-skip-motion" id="btnPrevMotion" title="Previous motion event (Shift+P)">
+          <svg viewBox="0 0 24 24"><path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"/></svg>
+        </button>
+        <button class="btn btn-icon btn-skip-motion" id="btnNextMotion" title="Next motion event (Shift+N)">
+          <svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>
+        </button>
+      </div>
+      <div class="transport-right">
+        <button class="btn btn-icon" id="btnSpeedDown" title="Slow down ([)">
+          <svg viewBox="0 0 24 24"><path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"/></svg>
+        </button>
+        <div class="speed-display" id="speedDisplay">1.0x</div>
+        <button class="btn btn-icon" id="btnSpeedUp" title="Speed up (])">
+          <svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>
+        </button>
+        <button class="btn btn-icon btn-slideshow" id="btnSlideshow" title="Slideshow mode (S)">
+          <svg viewBox="0 0 24 24"><path d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H8V4h12v12zm-7-1l5-3.5-5-3.5z"/></svg>
+        </button>
+        <button class="btn btn-icon btn-mag" id="btnMagnifier" title="Region zoom (M)">
+          <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
+        </button>
+        <button class="btn btn-icon" id="btnFullscreen" title="Fullscreen (F)">
+          <svg viewBox="0 0 24 24"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>
+        </button>
+      </div>
+    </div>
+    <div class="kb-hints">
+      <span><kbd>Space</kbd> Play/Pause</span>
+      <span><kbd>&#8592;</kbd><kbd>&#8594;</kbd> Frame step</span>
+      <span><kbd>Shift</kbd>+<kbd>&#8592;</kbd><kbd>&#8594;</kbd> Skip 10s</span>
+      <span><kbd>[</kbd><kbd>]</kbd> Speed</span>
+      <span><kbd>F</kbd> Fullscreen</span>
+      <span><kbd>S</kbd> Slideshow</span>
+      <span><kbd>M</kbd> Region zoom</span>
+      <span><kbd>Scroll</kbd> Zoom video</span>
+      <span><kbd>0</kbd> Reset timeline zoom</span>
+      <span><kbd>Shift</kbd>+<kbd>N</kbd>/<kbd>P</kbd> Next/Prev motion</span>
+      <span>Click camera to expand</span>
+    </div>
+  </div>
+</div>
+
+<div class="verify-modal-overlay hidden" id="verifyModal">
+  <div class="verify-modal">
+    <h2 id="verifyModalTitle">Export Integrity Verification</h2>
+    <div class="verify-summary" id="verifySummary"></div>
+    <div class="verify-cert-info" id="verifyCertInfo" style="display:none"></div>
+    <ul class="verify-file-list" id="verifyFileList"></ul>
+    <button class="close-btn" id="verifyModalClose">Close</button>
+  </div>
+</div>
+
+<div class="log-panel hidden" id="logPanel">
+  <div class="log-panel-header">
+    <h2><svg viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg> Activity Log</h2>
+    <div class="log-panel-actions">
+      <button id="logClearBtn">Clear</button>
+      <button id="logCloseBtn">Close</button>
+    </div>
+  </div>
+  <div class="log-entries" id="logEntries">
+    <div class="log-empty" id="logEmpty">No activity yet</div>
+  </div>
+</div>
+
+<div class="analytics-panel hidden" id="analyticsPanel">
+  <div class="analytics-panel-header">
+    <h2><svg viewBox="0 0 24 24"><path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/></svg> Motion Analytics</h2>
+    <div style="display:flex;gap:6px;">
+      <button id="analyticsCloseBtn" style="background:var(--bg-button);border:none;border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;font-size:11px;padding:4px 10px;font-family:inherit;">Close</button>
+    </div>
+  </div>
+
+  <div class="analytics-section">
+    <div class="analytics-section-title">Sensitivity</div>
+    <div class="sensitivity-row">
+      <label>Low</label>
+      <input type="range" class="sensitivity-slider" id="sensitivitySlider" min="1" max="100" value="40">
+      <label>High</label>
+      <span class="sensitivity-value" id="sensitivityValue">40</span>
+    </div>
+    <div class="sensitivity-presets" id="sensitivityPresets">
+      <button class="sensitivity-preset-btn" data-value="30">Indoor</button>
+      <button class="sensitivity-preset-btn active" data-value="40">Default</button>
+      <button class="sensitivity-preset-btn" data-value="55">Outdoor</button>
+      <button class="sensitivity-preset-btn" data-value="45">Parking</button>
+    </div>
+    <div class="sensitivity-preview" id="sensitivityPreview">
+      Current frame motion: <span class="motion-pct" id="liveMotionPct">--</span>
+    </div>
+  </div>
+
+  <div class="analytics-section">
+    <div class="analytics-section-title">Actions</div>
+    <div class="scan-controls">
+      <button class="scan-btn scan-btn-primary" id="btnScanTimeline" title="Re-scan with current sensitivity">
+        <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M17.65 6.35A7.958 7.958 0 0012 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0112 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>
+        Rescan
+      </button>
+      <button class="scan-btn scan-btn-stop" id="btnScanStop">
+        <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M6 6h12v12H6z"/></svg>
+        Stop
+      </button>
+      <button class="scan-btn scan-btn-monitor" id="btnMonitor" title="Detect motion during playback">
+        Live
+      </button>
+    </div>
+    <div class="scan-progress" id="scanProgress">
+      <div class="scan-progress-bar">
+        <div class="scan-progress-fill" id="scanProgressFill"></div>
+      </div>
+      <div class="scan-progress-label">
+        <span id="scanProgressCamera">--</span>
+        <span id="scanProgressPct">0%</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="analytics-section activity-summary" id="activitySummary">
+    <div class="analytics-section-title">Activity Summary</div>
+    <div class="activity-sparkline" id="activitySparkline"></div>
+    <div class="activity-summary-text" id="activitySummaryText"></div>
+  </div>
+
+  <div class="motion-events-list" id="motionEventsList">
+    <div class="motion-events-empty" id="motionEventsEmpty">
+      Motion scan runs automatically when videos load
+    </div>
+  </div>
+
+  <div class="analytics-footer">
+    <div class="analytics-footer-actions">
+      <button id="btnExportMotion">Export JSON</button>
+      <button id="btnClearMotion">Clear</button>
+    </div>
+    <div class="analytics-teaser">
+      <div class="analytics-teaser-title">
+        <svg viewBox="0 0 24 24" width="14" height="14" fill="var(--status-motion)"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z"/></svg>
+        Want AI-powered object detection?
+      </div>
+      <div class="analytics-teaser-text">
+        Download the local app for person, vehicle, and object detection powered by on-device AI. No internet required.
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="layout-panel hidden" id="layoutPanel">
+  <div class="layout-panel-header">
+    <h2><svg viewBox="0 0 24 24"><path d="M3 3v8h8V3H3zm6 6H5V5h4v4zm-6 4v8h8v-8H3zm6 6H5v-4h4v4zm4-16v8h8V3h-8zm6 6h-4V5h4v4zm-6 4v8h8v-8h-8zm6 6h-4v-4h4v4z"/></svg> Grid Layout</h2>
+    <button id="layoutCloseBtn" style="background:var(--bg-button);border:none;border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;font-size:11px;padding:4px 10px;font-family:inherit;">Close</button>
+  </div>
+  <div class="layout-section">
+    <div class="layout-section-title">Layout</div>
+    <div class="layout-presets" id="layoutPresets">
+      <button class="layout-preset-btn active" data-layout="auto" title="Auto">
+        <svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"/></svg>
+        Auto
+      </button>
+      <button class="layout-preset-btn" data-layout="1x1" title="1x1">
+        <svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2" fill="none" stroke="currentColor" stroke-width="2"/></svg>
+        1x1
+      </button>
+      <button class="layout-preset-btn" data-layout="2x2" title="2x2">
+        <svg viewBox="0 0 24 24"><rect x="3" y="3" width="8" height="8" rx="1" fill="none" stroke="currentColor" stroke-width="1.5"/><rect x="13" y="3" width="8" height="8" rx="1" fill="none" stroke="currentColor" stroke-width="1.5"/><rect x="3" y="13" width="8" height="8" rx="1" fill="none" stroke="currentColor" stroke-width="1.5"/><rect x="13" y="13" width="8" height="8" rx="1" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>
+        2x2
+      </button>
+      <button class="layout-preset-btn" data-layout="3x3" title="3x3">
+        <svg viewBox="0 0 24 24"><rect x="2" y="2" width="5.5" height="5.5" rx="1" fill="none" stroke="currentColor" stroke-width="1.2"/><rect x="9.25" y="2" width="5.5" height="5.5" rx="1" fill="none" stroke="currentColor" stroke-width="1.2"/><rect x="16.5" y="2" width="5.5" height="5.5" rx="1" fill="none" stroke="currentColor" stroke-width="1.2"/><rect x="2" y="9.25" width="5.5" height="5.5" rx="1" fill="none" stroke="currentColor" stroke-width="1.2"/><rect x="9.25" y="9.25" width="5.5" height="5.5" rx="1" fill="none" stroke="currentColor" stroke-width="1.2"/><rect x="16.5" y="9.25" width="5.5" height="5.5" rx="1" fill="none" stroke="currentColor" stroke-width="1.2"/><rect x="2" y="16.5" width="5.5" height="5.5" rx="1" fill="none" stroke="currentColor" stroke-width="1.2"/><rect x="9.25" y="16.5" width="5.5" height="5.5" rx="1" fill="none" stroke="currentColor" stroke-width="1.2"/><rect x="16.5" y="16.5" width="5.5" height="5.5" rx="1" fill="none" stroke="currentColor" stroke-width="1.2"/></svg>
+        3x3
+      </button>
+    </div>
+    <div class="layout-custom-row">
+      <input type="number" id="layoutCols" min="1" max="6" value="2" placeholder="C">
+      <span>&times;</span>
+      <input type="number" id="layoutRows" min="1" max="6" value="2" placeholder="R">
+      <button id="layoutApplyCustom">Apply</button>
+    </div>
+  </div>
+  <div class="layout-section" style="padding-bottom:6px;">
+    <div class="layout-section-title">Devices</div>
+  </div>
+  <div class="layout-device-list" id="layoutDeviceList">
+    <div class="layout-device-empty">No cameras loaded</div>
+  </div>
+</div>
+
+<div class="password-modal-overlay hidden" id="passwordModal">
+  <div class="password-modal">
+    <div class="pw-icon">&#128274;</div>
+    <h2>Password Protected Export</h2>
+    <p>This export is encrypted with AES-256. Enter the password to decrypt.</p>
+    <div class="pw-error" id="pwError"></div>
+    <input type="password" id="pwInput" placeholder="Enter export password" autocomplete="off">
+    <div class="pw-buttons">
+      <button class="pw-btn pw-btn-cancel" id="pwCancel">Cancel</button>
+      <button class="pw-btn pw-btn-submit" id="pwSubmit">Decrypt</button>
+    </div>
+  </div>
+</div>
+
+<input type="file" id="fileInput" multiple accept=".mp4,.txt,.mov,.avi,.mkv,.zip">
+
+<script>
+(() => {
+  // ─── Web Crypto: ASN.1 / X.509 Helpers ───
+
+  function pemToDer(pem) {
+    const b64 = pem.replace(/-----[^-]+-----/g, '').replace(/\s+/g, '');
+    const bin = atob(b64);
+    const bytes = new Uint8Array(bin.length);
+    for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
+    return bytes;
+  }
+
+  function parseAsn1(data, offset) {
+    const tag = data[offset];
+    let len = data[offset + 1];
+    let hdr = 2;
+    if (len & 0x80) {
+      const n = len & 0x7f;
+      len = 0;
+      for (let i = 0; i < n; i++) len = (len << 8) | data[offset + 2 + i];
+      hdr = 2 + n;
+    }
+    return { tag, len, hdr, body: offset + hdr, end: offset + hdr + len };
+  }
+
+  function asn1Children(data, node) {
+    const kids = [];
+    let p = node.body;
+    while (p < node.end) {
+      const child = parseAsn1(data, p);
+      kids.push(child);
+      p = child.end;
+    }
+    return kids;
+  }
+
+  function asn1Bytes(data, node) {
+    return data.slice(node.body, node.end);
+  }
+
+  function asn1Raw(data, node) {
+    return data.slice(node.body - node.hdr, node.end);
+  }
+
+  function asn1Utf8(data, node) {
+    return new TextDecoder().decode(data.slice(node.body, node.end));
+  }
+
+  const DN_OIDS = {
+    '550403': 'CN', '550406': 'C', '550407': 'L', '550408': 'ST',
+    '55040a': 'O', '55040b': 'OU',
+  };
+
+  function parseOidHex(data, node) {
+    return Array.from(data.slice(node.body, node.end))
+      .map(b => b.toString(16).padStart(2, '0')).join('');
+  }
+
+  function parseDN(data, node) {
+    const parts = [];
+    for (const set of asn1Children(data, node)) {
+      for (const seq of asn1Children(data, set)) {
+        const kids = asn1Children(data, seq);
+        const oidHex = parseOidHex(data, kids[0]);
+        const label = DN_OIDS[oidHex] || oidHex;
+        const value = asn1Utf8(data, kids[1]);
+        parts.push(`${label}=${value}`);
+      }
+    }
+    return parts.join(', ');
+  }
+
+  function findCN(data, node) {
+    for (const set of asn1Children(data, node)) {
+      for (const seq of asn1Children(data, set)) {
+        const kids = asn1Children(data, seq);
+        if (parseOidHex(data, kids[0]) === '550403') {
+          return asn1Utf8(data, kids[1]);
+        }
+      }
+    }
+    return '';
+  }
+
+  function parseTime(data, node) {
+    const s = asn1Utf8(data, node);
+    // UTCTime: YYMMDDHHMMSSZ
+    if (node.tag === 0x17) {
+      const yy = parseInt(s.slice(0, 2));
+      const year = yy >= 50 ? 1900 + yy : 2000 + yy;
+      return `${year}-${s.slice(2,4)}-${s.slice(4,6)} ${s.slice(6,8)}:${s.slice(8,10)}:${s.slice(10,12)} UTC`;
+    }
+    // GeneralizedTime: YYYYMMDDHHMMSSZ
+    return `${s.slice(0,4)}-${s.slice(4,6)}-${s.slice(6,8)} ${s.slice(8,10)}:${s.slice(10,12)}:${s.slice(12,14)} UTC`;
+  }
+
+  function parseCertificate(pemString) {
+    try {
+      const der = pemToDer(pemString);
+      const cert = parseAsn1(der, 0);
+      const tbs = asn1Children(der, cert)[0];
+      const tbsKids = asn1Children(der, tbs);
+
+      // version is context-tagged [0] (0xA0) — if present, shift index
+      let idx = 0;
+      if (tbsKids[0].tag === 0xa0) idx = 1;
+
+      const issuerNode = tbsKids[idx + 2];
+      const validityNode = tbsKids[idx + 3];
+      const subjectNode = tbsKids[idx + 4];
+      const spkiNode = tbsKids[idx + 5];
+
+      const validityKids = asn1Children(der, validityNode);
+
+      return {
+        commonName: findCN(der, subjectNode),
+        issuer: parseDN(der, issuerNode),
+        validFrom: parseTime(der, validityKids[0]),
+        validTo: parseTime(der, validityKids[1]),
+        spkiDer: asn1Raw(der, spkiNode),
+      };
+    } catch (err) {
+      return { error: err.message };
+    }
+  }
+
+  // Detect key algorithm from SPKI
+  function detectKeyAlgo(spkiDer) {
+    const spki = parseAsn1(spkiDer, 0);
+    const algoSeq = asn1Children(spkiDer, spki)[0];
+    const oid = asn1Children(spkiDer, algoSeq)[0];
+    const oidHex = parseOidHex(spkiDer, oid);
+
+    // RSA: 1.2.840.113549.1.1.1 → 2a864886f70d010101
+    if (oidHex.startsWith('2a864886f70d0101')) {
+      return { name: 'RSASSA-PKCS1-v1_5', hash: 'SHA-256' };
+    }
+    // EC: 1.2.840.10045.2.1 → 2a8648ce3d0201
+    if (oidHex.startsWith('2a8648ce3d0201')) {
+      // Read the curve OID from params
+      const params = asn1Children(spkiDer, algoSeq)[1];
+      const curveHex = parseOidHex(spkiDer, params);
+      let namedCurve = 'P-256';
+      if (curveHex === '2b81040022') namedCurve = 'P-384';
+      else if (curveHex === '2b81040023') namedCurve = 'P-521';
+      return { name: 'ECDSA', namedCurve, hash: 'SHA-256' };
+    }
+    // Fallback: try RSA
+    return { name: 'RSASSA-PKCS1-v1_5', hash: 'SHA-256' };
+  }
+
+  // Convert DER-encoded ECDSA signature to raw (r || s)
+  function derSigToRaw(der, keySize) {
+    const seq = parseAsn1(der, 0);
+    const kids = asn1Children(der, seq);
+    const r = asn1Bytes(der, kids[0]);
+    const s = asn1Bytes(der, kids[1]);
+    const raw = new Uint8Array(keySize * 2);
+    // r and s may have leading zero padding; trim or pad to keySize
+    if (r.length <= keySize) {
+      raw.set(r, keySize - r.length);
+    } else {
+      raw.set(r.slice(r.length - keySize), 0);
+    }
+    if (s.length <= keySize) {
+      raw.set(s, keySize * 2 - s.length);
+    } else {
+      raw.set(s.slice(s.length - keySize), keySize);
+    }
+    return raw;
+  }
+
+  async function verifySignature(certPem, fileData, sigData) {
+    try {
+      const certInfo = parseCertificate(certPem);
+      if (certInfo.error) return false;
+
+      const algo = detectKeyAlgo(certInfo.spkiDer);
+      const importAlgo = algo.name === 'ECDSA'
+        ? { name: 'ECDSA', namedCurve: algo.namedCurve }
+        : { name: 'RSASSA-PKCS1-v1_5', hash: algo.hash };
+
+      const key = await crypto.subtle.importKey('spki', certInfo.spkiDer, importAlgo, false, ['verify']);
+
+      let sig = sigData instanceof Uint8Array ? sigData : new Uint8Array(sigData);
+
+      // For ECDSA, convert DER signature to raw format
+      if (algo.name === 'ECDSA' && sig[0] === 0x30) {
+        const keySizes = { 'P-256': 32, 'P-384': 48, 'P-521': 66 };
+        sig = derSigToRaw(sig, keySizes[algo.namedCurve] || 32);
+      }
+
+      const verifyAlgo = algo.name === 'ECDSA'
+        ? { name: 'ECDSA', hash: 'SHA-256' }
+        : 'RSASSA-PKCS1-v1_5';
+
+      return await crypto.subtle.verify(verifyAlgo, key, sig, fileData);
+    } catch (err) {
+      avpLog('error', 'Signature verification error: ' + err.message);
+      return false;
+    }
+  }
+
+  async function verifyCertificateOnline(certPemBytes, serial) {
+    try {
+      const hashBuf = await crypto.subtle.digest('SHA-256', certPemBytes);
+      const hash = btoa(String.fromCharCode(...new Uint8Array(hashBuf)));
+      const url = `/api/verify-cert?serial=${encodeURIComponent(serial.toLowerCase())}&certificateHash=${encodeURIComponent(hash)}`;
+
+      const res = await fetch(url);
+      if (res.ok) {
+        return { verified: true };
+      }
+      return { verified: false, error: `HTTP ${res.status}` };
+    } catch (err) {
+      // CORS or network error — degrade gracefully
+      return { verified: false, error: err.message || 'Network error (possible CORS restriction)' };
+    }
+  }
+
+  // ─── Session Cache (IndexedDB) ───
+  const SESSION_DB = 'avp-session';
+  const SESSION_VERSION = 1;
+
+  function openSessionDB() {
+    return new Promise((resolve, reject) => {
+      const req = indexedDB.open(SESSION_DB, SESSION_VERSION);
+      req.onupgradeneeded = () => {
+        const db = req.result;
+        if (!db.objectStoreNames.contains('videos')) db.createObjectStore('videos', { keyPath: 'fileName' });
+        if (!db.objectStoreNames.contains('metas')) db.createObjectStore('metas', { keyPath: 'fileName' });
+        if (!db.objectStoreNames.contains('sign')) db.createObjectStore('sign', { keyPath: 'key' });
+      };
+      req.onsuccess = () => resolve(req.result);
+      req.onerror = () => reject(req.error);
+    });
+  }
+
+  function idbPut(db, store, item) {
+    return new Promise((resolve, reject) => {
+      const tx = db.transaction(store, 'readwrite');
+      tx.objectStore(store).put(item);
+      tx.oncomplete = () => resolve();
+      tx.onerror = () => reject(tx.error);
+    });
+  }
+
+  function idbGetAll(db, store) {
+    return new Promise((resolve, reject) => {
+      const tx = db.transaction(store, 'readonly');
+      const req = tx.objectStore(store).getAll();
+      req.onsuccess = () => resolve(req.result);
+      req.onerror = () => reject(req.error);
+    });
+  }
+
+  function idbClear(db, store) {
+    return new Promise((resolve, reject) => {
+      const tx = db.transaction(store, 'readwrite');
+      tx.objectStore(store).clear();
+      tx.oncomplete = () => resolve();
+      tx.onerror = () => reject(tx.error);
+    });
+  }
+
+  async function saveSessionData() {
+    try {
+      const db = await openSessionDB();
+      // Save each channel's segments' blobs and metadata
+      for (const [name, ch] of channels) {
+        for (const seg of ch.segments) {
+          if (seg.blob) {
+            await idbPut(db, 'videos', { fileName: name + '|' + (seg.startTime || 0), blob: seg.blob });
+          }
+          await idbPut(db, 'metas', {
+            fileName: name + '|' + (seg.startTime || 0),
+            meta: seg.meta || {},
+            cameraName: name
+          });
+        }
+      }
+      // Save sign data (per-certificate)
+      let certIdx = 0;
+      for (const [, certEntry] of signCerts) {
+        await idbPut(db, 'sign', { key: `cert|${certIdx}|pem`, value: certEntry.pem });
+        await idbPut(db, 'sign', { key: `cert|${certIdx}|bytes`, value: certEntry.bytes });
+        for (const [sigName, sigData] of certEntry.signatures) {
+          await idbPut(db, 'sign', { key: `cert|${certIdx}|sig|${sigName}`, value: sigData });
+        }
+        certIdx++;
+      }
+      db.close();
+    } catch (e) {
+      avpLog('warn', 'Session save failed: ' + e.message);
+    }
+  }
+
+  async function loadSessionData() {
+    try {
+      const db = await openSessionDB();
+      const videos = await idbGetAll(db, 'videos');
+      const metas = await idbGetAll(db, 'metas');
+      const signItems = await idbGetAll(db, 'sign');
+      db.close();
+
+      if (videos.length === 0 && metas.length === 0) return false;
+
+      // Restore sign data (per-certificate)
+      const certMap = new Map(); // idx -> { pem, bytes, sigs }
+      for (const item of signItems) {
+        const parts = item.key.split('|');
+        if (parts[0] !== 'cert') continue;
+        const idx = parts[1];
+        if (!certMap.has(idx)) certMap.set(idx, { pem: null, bytes: null, sigs: new Map() });
+        const c = certMap.get(idx);
+        if (parts[2] === 'pem') c.pem = item.value;
+        else if (parts[2] === 'bytes') c.bytes = item.value;
+        else if (parts[2] === 'sig') c.sigs.set(parts.slice(3).join('|'), item.value);
+      }
+      for (const [, c] of certMap) {
+        if (c.pem && c.sigs.size > 0) {
+          signCerts.set(c.pem, { pem: c.pem, bytes: c.bytes, signatures: c.sigs });
+        }
+      }
+
+      // Build a map of metas by key
+      const metaMap = new Map();
+      for (const m of metas) metaMap.set(m.fileName, m);
+
+      // Restore segments
+      batchingSegments = true;
+      for (const v of videos) {
+        const m = metaMap.get(v.fileName);
+        if (m && m.meta && m.meta['Name']) {
+          addSegment(m.cameraName, m.meta, v.blob);
+        } else {
+          // Video without proper meta
+          const cameraName = m ? m.cameraName : v.fileName.split('|')[0];
+          const ch = getOrCreateChannel(cameraName);
+          const url = URL.createObjectURL(v.blob);
+          ch.segments.push({ startTime: null, endTime: null, url, blob: v.blob, meta: m ? m.meta : {}, videoEl: null, loaded: false });
+        }
+      }
+      batchingSegments = false;
+
+      if (channels.size > 0) {
+        recalcGlobals();
+        renderAll();
+        showPlayer();
+        if (signCerts.size > 0) runVerification();
+        scheduleAutoScan();
+        return true;
+      }
+      return false;
+    } catch (e) {
+      avpLog('warn', 'Session restore failed: ' + e.message);
+      return false;
+    }
+  }
+
+  async function clearSessionDB() {
+    try {
+      const db = await openSessionDB();
+      await idbClear(db, 'videos');
+      await idbClear(db, 'metas');
+      await idbClear(db, 'sign');
+      db.close();
+    } catch (e) {
+      avpLog('warn', 'Session clear failed: ' + e.message);
+    }
+  }
+
+  // ─── Data Model ───
+  const channels = new Map();
+  const CAM_COLORS = ['#006ED7', '#ff6b35', '#20C62F', '#DE1111', '#8957E5', '#EAA301', '#26c6da', '#A855F7', '#ec407a'];
+  const SPEEDS = [0.25, 0.5, 1, 2, 4, 8];
+  let currentSpeedIdx = 2;
+  let isPlaying = false;
+  let globalStart = Infinity;
+  let globalEnd = -Infinity;
+  let globalDuration = 0;
+  let currentTime = 0;
+  let animFrame = null;
+  let lastTick = 0;
+
+  const pendingVideos = [];
+  const pendingMetas = [];
+
+  // ─── Verification State ───
+  let verifyStatus = 'none';
+  let verifyResults = [];      // [{ certId, fileName, passed, detail? }]
+  let verifyCertInfos = [];    // [{ certId, certInfo, cloudResult }]
+  // Per-certificate store: certId -> { pem, bytes, signatures: Map<fileName, Uint8Array> }
+  const signCerts = new Map();
+
+  // ─── Elements ───
+  const dropZone = document.getElementById('dropZone');
+  const playerArea = document.getElementById('playerArea');
+  const cameraGrid = document.getElementById('cameraGrid');
+  const camCount = document.getElementById('camCount');
+  const addFilesBtn = document.getElementById('addFilesBtn');
+  const fileInput = document.getElementById('fileInput');
+  const timelineTrack = document.getElementById('timelineTrack');
+  const playhead = document.getElementById('playhead');
+  const timelineHover = document.getElementById('timelineHover');
+  const tlStart = document.getElementById('tlStart');
+  const tlEnd = document.getElementById('tlEnd');
+  const timeDisplay = document.getElementById('timeDisplay');
+  const btnPlay = document.getElementById('btnPlay');
+  const playIcon = document.getElementById('playIcon');
+  const speedDisplay = document.getElementById('speedDisplay');
+  const loadingOverlay = document.getElementById('loadingOverlay');
+  const loadingText = document.getElementById('loadingText');
+  const loadingDetail = document.getElementById('loadingDetail');
+  const verifyBadge = document.getElementById('verifyBadge');
+  const verifyLabel = verifyBadge.querySelector('.verify-label');
+  const verifyModal = document.getElementById('verifyModal');
+  const verifySummary = document.getElementById('verifySummary');
+  const verifyCertInfoEl = document.getElementById('verifyCertInfo');
+  const verifyFileList = document.getElementById('verifyFileList');
+
+  // ─── Activity Log ───
+  const logPanel = document.getElementById('logPanel');
+  const logEntries = document.getElementById('logEntries');
+  const logEmpty = document.getElementById('logEmpty');
+  const logBadge = document.getElementById('logBadge');
+  const railLogBtn = document.getElementById('railLogBtn');
+  const logStore = [];
+  let logErrorCount = 0;
+
+  function avpLog(level, message) {
+    const now = new Date();
+    const time = now.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });
+    const entry = { time, level, message };
+    logStore.push(entry);
+
+    if (logEmpty) logEmpty.style.display = 'none';
+
+    const el = document.createElement('div');
+    el.className = `log-entry log-${level}`;
+    const timeSpan = document.createElement('span');
+    timeSpan.className = 'log-time';
+    timeSpan.textContent = time;
+    const msgSpan = document.createElement('span');
+    msgSpan.className = 'log-msg';
+    msgSpan.textContent = message;
+    el.appendChild(timeSpan);
+    el.appendChild(msgSpan);
+    logEntries.appendChild(el);
+    logEntries.scrollTop = logEntries.scrollHeight;
+
+    if (level === 'error' || level === 'warn') {
+      logErrorCount++;
+      logBadge.style.display = 'block';
+    }
+  }
+
+  railLogBtn.addEventListener('click', () => {
+    logPanel.classList.toggle('hidden');
+    if (!logPanel.classList.contains('hidden')) {
+      logErrorCount = 0;
+      logBadge.style.display = 'none';
+    }
+  });
+
+  document.getElementById('logCloseBtn').addEventListener('click', () => {
+    logPanel.classList.add('hidden');
+  });
+
+  document.getElementById('logClearBtn').addEventListener('click', () => {
+    logStore.length = 0;
+    logEntries.innerHTML = '';
+    logEmpty.style.display = '';
+    logEntries.appendChild(logEmpty);
+    logErrorCount = 0;
+    logBadge.style.display = 'none';
+  });
+
+  // ─── Grid Layout Panel ───
+  const layoutPanel = document.getElementById('layoutPanel');
+  const layoutPresets = document.getElementById('layoutPresets');
+  const layoutDeviceList = document.getElementById('layoutDeviceList');
+  const railGridBtn = document.getElementById('railGridBtn');
+  const hiddenCameras = new Set(); // names of hidden cameras
+  let gridLayoutOverride = null;   // null = auto, or {cols, rows}
+
+  function toggleLayoutPanel(forceClose) {
+    if (forceClose) {
+      layoutPanel.classList.add('hidden');
+    } else {
+      layoutPanel.classList.toggle('hidden');
+    }
+    const isOpen = !layoutPanel.classList.contains('hidden');
+    document.body.classList.toggle('layout-open', isOpen);
+    railGridBtn.classList.toggle('active', isOpen);
+    if (isOpen) renderDeviceList();
+  }
+
+  railGridBtn.addEventListener('click', () => toggleLayoutPanel());
+
+  document.getElementById('layoutCloseBtn').addEventListener('click', () => toggleLayoutPanel(true));
+
+  // Preset buttons
+  layoutPresets.addEventListener('click', (e) => {
+    const btn = e.target.closest('.layout-preset-btn');
+    if (!btn) return;
+    layoutPresets.querySelectorAll('.layout-preset-btn').forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+
+    const layout = btn.dataset.layout;
+    if (layout === 'auto') {
+      gridLayoutOverride = null;
+    } else {
+      const [c, r] = layout.split('x').map(Number);
+      gridLayoutOverride = { cols: c, rows: r };
+    }
+    applyGridLayout();
+  });
+
+  // Custom layout
+  document.getElementById('layoutApplyCustom').addEventListener('click', () => {
+    const cols = Math.max(1, Math.min(6, parseInt(document.getElementById('layoutCols').value) || 2));
+    const rows = Math.max(1, Math.min(6, parseInt(document.getElementById('layoutRows').value) || 2));
+    document.getElementById('layoutCols').value = cols;
+    document.getElementById('layoutRows').value = rows;
+    gridLayoutOverride = { cols, rows };
+    layoutPresets.querySelectorAll('.layout-preset-btn').forEach(b => b.classList.remove('active'));
+    applyGridLayout();
+  });
+
+  function applyGridLayout() {
+    applyCameraVisibility();
+    if (!gridLayoutOverride) {
+      // Auto mode — restore cams-N class
+      cameraGrid.style.gridTemplateColumns = '';
+      cameraGrid.style.gridTemplateRows = '';
+      const visibleCount = countVisibleCameras();
+      cameraGrid.className = `camera-grid cams-${Math.min(visibleCount, 9)}`;
+    } else {
+      // Override mode
+      cameraGrid.className = 'camera-grid';
+      cameraGrid.style.gridTemplateColumns = `repeat(${gridLayoutOverride.cols}, 1fr)`;
+      cameraGrid.style.gridTemplateRows = `repeat(${gridLayoutOverride.rows}, 1fr)`;
+    }
+  }
+
+  function countVisibleCameras() {
+    let count = 0;
+    for (const ch of channels.values()) {
+      if (!hiddenCameras.has(ch.name)) count++;
+    }
+    return count;
+  }
+
+  function renderDeviceList() {
+    layoutDeviceList.innerHTML = '';
+    if (channels.size === 0) {
+      layoutDeviceList.innerHTML = '<div class="layout-device-empty">No cameras loaded</div>';
+      return;
+    }
+
+    const maxSlots = gridLayoutOverride ? gridLayoutOverride.cols * gridLayoutOverride.rows : Infinity;
+    let visibleIdx = 0;
+
+    for (const ch of channels.values()) {
+      const isManuallyHidden = hiddenCameras.has(ch.name);
+      const isOverflow = !isManuallyHidden && visibleIdx >= maxSlots;
+      if (!isManuallyHidden) visibleIdx++;
+
+      const item = document.createElement('div');
+      item.className = 'layout-device-item';
+      if (isManuallyHidden || isOverflow) item.style.opacity = '0.45';
+
+      const dot = document.createElement('span');
+      dot.className = 'dev-dot';
+      dot.style.background = ch.color;
+
+      const info = document.createElement('div');
+      info.className = 'dev-info';
+      const name = document.createElement('div');
+      name.className = 'dev-name';
+      name.textContent = ch.name;
+      info.appendChild(name);
+
+      const clips = ch.segments.length;
+      const metaLine = [];
+      if (clips > 0) metaLine.push(`${clips} clip${clips !== 1 ? 's' : ''}`);
+      if (ch.meta && ch.meta['Model']) metaLine.push(ch.meta['Model']);
+      if (isOverflow) metaLine.push('not in layout');
+      if (isManuallyHidden) metaLine.push('hidden');
+      if (metaLine.length > 0) {
+        const meta = document.createElement('div');
+        meta.className = 'dev-meta';
+        meta.textContent = metaLine.join(' \u00B7 ');
+        info.appendChild(meta);
+      }
+
+      // Visibility toggle
+      const eyeShow = '<svg viewBox="0 0 24 24"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>';
+      const eyeHide = '<svg viewBox="0 0 24 24"><path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46A11.804 11.804 0 001 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"/></svg>';
+
+      const toggle = document.createElement('button');
+      toggle.className = 'dev-toggle' + (isManuallyHidden ? ' hidden-cam' : '');
+      toggle.title = isManuallyHidden ? 'Show camera' : 'Hide camera';
+      toggle.innerHTML = isManuallyHidden ? eyeHide : eyeShow;
+
+      const chName = ch.name;
+      toggle.addEventListener('click', (e) => {
+        e.stopPropagation();
+        if (hiddenCameras.has(chName)) {
+          hiddenCameras.delete(chName);
+        } else {
+          hiddenCameras.add(chName);
+        }
+        applyGridLayout();
+        renderDeviceList();
+      });
+
+      // Click name to expand camera
+      info.style.cursor = 'pointer';
+      info.addEventListener('click', () => {
+        if (ch.cellEl && !isManuallyHidden && !isOverflow) ch.cellEl.click();
+      });
+
+      item.appendChild(dot);
+      item.appendChild(info);
+      item.appendChild(toggle);
+      layoutDeviceList.appendChild(item);
+    }
+  }
+
+  function applyCameraVisibility() {
+    const maxSlots = gridLayoutOverride ? gridLayoutOverride.cols * gridLayoutOverride.rows : Infinity;
+    let visibleIdx = 0;
+    for (const ch of channels.values()) {
+      if (!ch.cellEl) continue;
+      const manuallyHidden = hiddenCameras.has(ch.name);
+      const overflowHidden = visibleIdx >= maxSlots;
+      ch.cellEl.style.display = (manuallyHidden || overflowHidden) ? 'none' : '';
+      if (!manuallyHidden) visibleIdx++;
+    }
+  }
+
+  // ─── Motion Analytics Panel ───
+  const analyticsPanel = document.getElementById('analyticsPanel');
+  const railAnalyticsBtn = document.getElementById('railAnalyticsBtn');
+  const sensitivitySlider = document.getElementById('sensitivitySlider');
+  const sensitivityValue = document.getElementById('sensitivityValue');
+  const sensitivityPresets = document.getElementById('sensitivityPresets');
+  const liveMotionPct = document.getElementById('liveMotionPct');
+  const btnScanTimeline = document.getElementById('btnScanTimeline');
+  const btnScanStop = document.getElementById('btnScanStop');
+  const btnMonitor = document.getElementById('btnMonitor');
+  const scanProgress = document.getElementById('scanProgress');
+  const scanProgressFill = document.getElementById('scanProgressFill');
+  const scanProgressCamera = document.getElementById('scanProgressCamera');
+  const scanProgressPct = document.getElementById('scanProgressPct');
+  const activitySummary = document.getElementById('activitySummary');
+  const activitySparkline = document.getElementById('activitySparkline');
+  const activitySummaryText = document.getElementById('activitySummaryText');
+  const motionEventsList = document.getElementById('motionEventsList');
+  const motionEventsEmpty = document.getElementById('motionEventsEmpty');
+
+  // Motion analytics state
+  const motionState = {
+    sensitivity: 40,
+    scanInterval: 2.0,
+    clusterGap: 5.0,
+    detector: {
+      canvas: document.createElement('canvas'),
+      ctx: null,
+      prevFrames: new Map(),
+    },
+    motionProfiles: new Map(),
+    motionClusters: [],
+    isScanning: false,
+    scanAbort: null,
+    isMonitoring: false,
+    monitorLastCapture: new Map(),
+    findings: [],
+  };
+  motionState.detector.canvas.width = 160;
+  motionState.detector.canvas.height = 120;
+  motionState.detector.ctx = motionState.detector.canvas.getContext('2d', { willReadFrequently: true });
+
+  // Sensitivity mapping
+  function sensitivityToThresholds(sliderValue) {
+    const t = sliderValue / 100;
+    const pixelThreshold = Math.round(120 - (105 * t));
+    const changeThreshold = 0.08 - (0.077 * t);
+    return { pixelThreshold, changeThreshold };
+  }
+
+  // Panel toggle
+  function toggleAnalyticsPanel(forceClose) {
+    if (forceClose) {
+      analyticsPanel.classList.add('hidden');
+    } else {
+      analyticsPanel.classList.toggle('hidden');
+      // Close log panel if analytics opens
+      if (!analyticsPanel.classList.contains('hidden') && !logPanel.classList.contains('hidden')) {
+        logPanel.classList.add('hidden');
+      }
+    }
+    railAnalyticsBtn.classList.toggle('active', !analyticsPanel.classList.contains('hidden'));
+  }
+
+  railAnalyticsBtn.addEventListener('click', () => toggleAnalyticsPanel());
+  document.getElementById('analyticsCloseBtn').addEventListener('click', () => toggleAnalyticsPanel(true));
+
+  // Sensitivity slider
+  sensitivitySlider.addEventListener('input', () => {
+    const val = parseInt(sensitivitySlider.value);
+    motionState.sensitivity = val;
+    sensitivityValue.textContent = val;
+    // Update preset buttons
+    sensitivityPresets.querySelectorAll('.sensitivity-preset-btn').forEach(b => {
+      b.classList.toggle('active', parseInt(b.dataset.value) === val);
+    });
+    updateLiveMotionPreview();
+  });
+
+  // Preset buttons
+  sensitivityPresets.addEventListener('click', (e) => {
+    const btn = e.target.closest('.sensitivity-preset-btn');
+    if (!btn) return;
+    const val = parseInt(btn.dataset.value);
+    sensitivitySlider.value = val;
+    motionState.sensitivity = val;
+    sensitivityValue.textContent = val;
+    sensitivityPresets.querySelectorAll('.sensitivity-preset-btn').forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    updateLiveMotionPreview();
+  });
+
+  // Persist sensitivity
+  const savedSensitivity = localStorage.getItem('avp_motion_sensitivity');
+  if (savedSensitivity) {
+    const val = parseInt(savedSensitivity);
+    sensitivitySlider.value = val;
+    motionState.sensitivity = val;
+    sensitivityValue.textContent = val;
+    sensitivityPresets.querySelectorAll('.sensitivity-preset-btn').forEach(b => {
+      b.classList.toggle('active', parseInt(b.dataset.value) === val);
+    });
+  }
+  sensitivitySlider.addEventListener('change', () => {
+    localStorage.setItem('avp_motion_sensitivity', motionState.sensitivity);
+  });
+
+  // Live motion preview — detect motion on current frame
+  function updateLiveMotionPreview() {
+    if (channels.size === 0) { liveMotionPct.textContent = '--'; return; }
+    // Use first visible channel with an active segment
+    for (const ch of channels.values()) {
+      if (ch.activeSegIdx >= 0 && ch.segments[ch.activeSegIdx] && ch.segments[ch.activeSegIdx].videoEl) {
+        const result = detectMotion(ch.segments[ch.activeSegIdx].videoEl, ch.name);
+        if (result !== null) {
+          liveMotionPct.textContent = result.changePercent.toFixed(1) + '%';
+          liveMotionPct.style.color = result.hasMotion ? 'var(--status-motion)' : 'var(--text-muted)';
+          return;
+        }
+      }
+    }
+    liveMotionPct.textContent = '--';
+  }
+
+  // Core motion detection — canvas pixel-diff
+  function detectMotion(videoEl, channelName) {
+    if (!videoEl || videoEl.readyState < 2) return null;
+    const det = motionState.detector;
+    const w = det.canvas.width, h = det.canvas.height;
+    det.ctx.drawImage(videoEl, 0, 0, w, h);
+    const currentData = det.ctx.getImageData(0, 0, w, h);
+    const prevData = det.prevFrames.get(channelName);
+    det.prevFrames.set(channelName, currentData);
+    if (!prevData) return { hasMotion: false, changePercent: 0, hotspots: new Uint8Array(80) };
+
+    const { pixelThreshold, changeThreshold } = sensitivityToThresholds(motionState.sensitivity);
+    const cur = currentData.data;
+    const prev = prevData.data;
+    const totalPixels = w * h;
+    let changedPixels = 0;
+    const hotspots = new Uint8Array(80); // 10 cols x 8 rows
+    const cellW = w / 10, cellH = h / 8;
+    const cellPixelCounts = new Uint16Array(80);
+
+    for (let i = 0; i < totalPixels; i++) {
+      const idx = i * 4;
+      const diff = Math.abs(cur[idx] - prev[idx]) + Math.abs(cur[idx+1] - prev[idx+1]) + Math.abs(cur[idx+2] - prev[idx+2]);
+      if (diff > pixelThreshold) {
+        changedPixels++;
+        const px = i % w, py = Math.floor(i / w);
+        const cx = Math.min(9, Math.floor(px / cellW));
+        const cy = Math.min(7, Math.floor(py / cellH));
+        cellPixelCounts[cy * 10 + cx]++;
+      }
+    }
+
+    // Normalize hotspot cells to 0-255
+    const cellTotal = Math.ceil(cellW) * Math.ceil(cellH);
+    for (let i = 0; i < 80; i++) {
+      hotspots[i] = Math.min(255, Math.round((cellPixelCounts[i] / cellTotal) * 255));
+    }
+
+    const changePercent = (changedPixels / totalPixels) * 100;
+    const hasMotion = changePercent > (changeThreshold * 100);
+    return { hasMotion, changePercent, hotspots };
+  }
+
+  // Seek a video element and wait for the frame to be ready
+  function seekVideo(videoEl, time) {
+    return new Promise(resolve => {
+      const clampedTime = Math.max(0, Math.min(time, videoEl.duration || 0));
+      if (Math.abs(videoEl.currentTime - clampedTime) < 0.05) { resolve(); return; }
+      const onSeeked = () => { videoEl.removeEventListener('seeked', onSeeked); resolve(); };
+      videoEl.addEventListener('seeked', onSeeked);
+      videoEl.currentTime = clampedTime;
+      setTimeout(resolve, 300); // fallback — don't hang forever
+    });
+  }
+
+  // Timeline scan — creates dedicated offscreen video elements for speed
+  async function scanTimeline(opts = {}) {
+    if (motionState.isScanning) return;
+    if (channels.size === 0) return;
+    const isAutoScan = opts.auto === true;
+    motionState.isScanning = true;
+    motionState.scanAbort = new AbortController();
+    motionState.motionProfiles.clear();
+    motionState.motionClusters = [];
+    motionState.findings = [];
+    motionState.detector.prevFrames.clear();
+
+    // UI updates
+    setScanUIState('scanning');
+    if (!isAutoScan) avpLog('info', 'Motion scan started');
+
+    const interval = motionState.scanInterval;
+    const channelList = [...channels.values()];
+    const totalSteps = channelList.reduce((sum, ch) => {
+      return sum + ch.segments.reduce((s, seg) => {
+        if (seg.startTime == null || seg.endTime == null) return s;
+        return s + Math.ceil((seg.endTime - seg.startTime) / interval);
+      }, 0);
+    }, 0);
+    let stepsDone = 0;
+
+    try {
+      for (const ch of channelList) {
+        if (motionState.scanAbort.signal.aborted) break;
+        scanProgressCamera.textContent = ch.name;
+        const profile = [];
+        motionState.detector.prevFrames.delete(ch.name);
+
+        for (const seg of ch.segments) {
+          if (motionState.scanAbort.signal.aborted) break;
+          if (seg.startTime == null || seg.endTime == null) continue;
+          if (!seg.url) continue;
+
+          // Create a dedicated offscreen video for scanning — doesn't interfere with playback
+          const scanVid = document.createElement('video');
+          scanVid.muted = true;
+          scanVid.preload = 'auto'; // intentional: scan video needs full buffering for fast seeks
+          scanVid.src = seg.url;
+
+          // Wait for enough data to seek
+          await new Promise((resolve, reject) => {
+            const onReady = () => { scanVid.removeEventListener('loadeddata', onReady); scanVid.removeEventListener('error', onErr); resolve(); };
+            const onErr = () => { scanVid.removeEventListener('loadeddata', onReady); scanVid.removeEventListener('error', onErr); reject(new Error('Video load failed')); };
+            scanVid.addEventListener('loadeddata', onReady);
+            scanVid.addEventListener('error', onErr);
+            if (scanVid.readyState >= 2) { resolve(); return; }
+          }).catch(() => {
+            stepsDone += Math.ceil((seg.endTime - seg.startTime) / interval);
+            return; // skip this segment
+          });
+
+          const segDuration = seg.endTime - seg.startTime;
+          const segSteps = Math.ceil(segDuration / interval);
+
+          for (let si = 0; si < segSteps; si++) {
+            if (motionState.scanAbort.signal.aborted) break;
+            const localTime = si * interval;
+            const absTime = seg.startTime + localTime;
+
+            await seekVideo(scanVid, localTime);
+            const result = detectMotion(scanVid, ch.name);
+            if (result) {
+              profile.push({ time: absTime, changePercent: result.changePercent, hotspots: result.hotspots, hasMotion: result.hasMotion });
+            }
+            stepsDone++;
+
+            // Update progress — batch UI updates for speed
+            if (stepsDone % 8 === 0 || si === segSteps - 1) {
+              const pct = totalSteps > 0 ? Math.round((stepsDone / totalSteps) * 100) : 0;
+              scanProgressFill.style.width = pct + '%';
+              scanProgressPct.textContent = pct + '%';
+              railAnalyticsBtn.title = `Scanning... ${pct}%`;
+            }
+
+            // Yield to UI periodically — every 12 frames keeps scan fast while UI responsive
+            if (stepsDone % 12 === 0) await new Promise(r => setTimeout(r, 0));
+          }
+
+          // Destroy the scan video to free memory immediately
+          destroyVideoEl(scanVid);
+        }
+        motionState.motionProfiles.set(ch.name, profile);
+      }
+
+      if (!motionState.scanAbort.signal.aborted) {
+        buildMotionClusters();
+        renderMotionResults();
+        renderTimeline();
+        const totalEvents = motionState.motionClusters.length;
+        avpLog('success', `Motion scan complete: ${totalEvents} event${totalEvents !== 1 ? 's' : ''} detected across ${channelList.length} camera(s)`);
+      }
+    } catch (err) {
+      if (err.name !== 'AbortError') avpLog('error', 'Scan error: ' + err.message);
+    } finally {
+      motionState.isScanning = false;
+      motionState.scanAbort = null;
+      setScanUIState('idle');
+    }
+  }
+
+  function stopScan() {
+    if (motionState.scanAbort) motionState.scanAbort.abort();
+  }
+
+  // Manage scan UI state + rail button appearance
+  function setScanUIState(state) {
+    if (state === 'scanning') {
+      btnScanTimeline.disabled = true;
+      btnScanTimeline.style.display = 'none';
+      btnScanStop.style.display = '';
+      scanProgress.style.display = '';
+      motionEventsEmpty.style.display = 'none';
+      motionEventsList.querySelectorAll('.motion-event-card').forEach(el => el.remove());
+      railAnalyticsBtn.classList.add('scanning');
+      railAnalyticsBtn.disabled = true;
+      railAnalyticsBtn.style.opacity = '0.5';
+      railAnalyticsBtn.style.pointerEvents = 'none';
+      railAnalyticsBtn.title = 'Scanning...';
+    } else {
+      btnScanTimeline.disabled = false;
+      btnScanTimeline.style.display = '';
+      btnScanStop.style.display = 'none';
+      scanProgress.style.display = 'none';
+      railAnalyticsBtn.classList.remove('scanning');
+      railAnalyticsBtn.disabled = false;
+      railAnalyticsBtn.style.opacity = '';
+      railAnalyticsBtn.style.pointerEvents = '';
+      railAnalyticsBtn.title = 'Motion Analytics';
+    }
+  }
+
+  // Auto-scan: triggered after videos finish loading
+  let autoScanTimer = null;
+  function scheduleAutoScan() {
+    // Debounce — wait a moment for all segments to finish loading
+    if (autoScanTimer) clearTimeout(autoScanTimer);
+    autoScanTimer = setTimeout(() => {
+      autoScanTimer = null;
+      if (channels.size > 0 && !motionState.isScanning) {
+        scanTimeline({ auto: true });
+      }
+    }, 800);
+  }
+
+  // Build motion clusters from profiles
+  function buildMotionClusters() {
+    motionState.motionClusters = [];
+    for (const [chName, profile] of motionState.motionProfiles) {
+      let cluster = null;
+      for (const pt of profile) {
+        if (!pt.hasMotion) {
+          if (cluster) {
+            motionState.motionClusters.push(cluster);
+            cluster = null;
+          }
+          continue;
+        }
+        if (cluster && (pt.time - cluster.endTime) <= motionState.clusterGap) {
+          cluster.endTime = pt.time;
+          cluster.peakChange = Math.max(cluster.peakChange, pt.changePercent);
+          cluster.totalChange += pt.changePercent;
+          cluster.frameCount++;
+          if (pt.changePercent > cluster.peakHotspotChange) {
+            cluster.peakHotspots = pt.hotspots;
+            cluster.peakHotspotChange = pt.changePercent;
+          }
+        } else {
+          if (cluster) motionState.motionClusters.push(cluster);
+          cluster = {
+            startTime: pt.time, endTime: pt.time,
+            channelName: chName, peakChange: pt.changePercent,
+            totalChange: pt.changePercent, frameCount: 1,
+            peakHotspots: pt.hotspots, peakHotspotChange: pt.changePercent,
+          };
+        }
+      }
+      if (cluster) motionState.motionClusters.push(cluster);
+    }
+    // Sort by time
+    motionState.motionClusters.sort((a, b) => a.startTime - b.startTime);
+  }
+
+  // Render motion results in the panel
+  function renderMotionResults() {
+    // Activity summary
+    activitySummary.style.display = '';
+    renderActivitySparkline();
+
+    const totalEvents = motionState.motionClusters.length;
+    const totalFrames = [...motionState.motionProfiles.values()].reduce((s, p) => s + p.length, 0);
+    const motionFrames = [...motionState.motionProfiles.values()].reduce((s, p) => s + p.filter(f => f.hasMotion).length, 0);
+    const staticPct = totalFrames > 0 ? Math.round((1 - motionFrames / totalFrames) * 100) : 0;
+    const camCount = motionState.motionProfiles.size;
+    activitySummaryText.textContent = `${totalEvents} motion event${totalEvents !== 1 ? 's' : ''} across ${camCount} camera${camCount !== 1 ? 's' : ''}. ${staticPct}% of footage is static.`;
+
+    // Events list
+    motionEventsList.querySelectorAll('.motion-event-card').forEach(el => el.remove());
+    motionEventsEmpty.style.display = totalEvents === 0 ? '' : 'none';
+
+    for (const cluster of motionState.motionClusters) {
+      const card = document.createElement('div');
+      card.className = 'motion-event-card';
+
+      const ch = channels.get(cluster.channelName);
+      if (ch) card.style.borderLeftColor = ch.color;
+
+      const info = document.createElement('div');
+      info.className = 'motion-event-info';
+
+      const header = document.createElement('div');
+      header.className = 'motion-event-header';
+      const timeEl = document.createElement('span');
+      timeEl.className = 'motion-event-time';
+      timeEl.textContent = formatAbsTime(cluster.startTime);
+      const pctEl = document.createElement('span');
+      pctEl.className = 'motion-event-pct';
+      pctEl.textContent = cluster.peakChange.toFixed(1) + '%';
+      header.appendChild(timeEl);
+      header.appendChild(pctEl);
+
+      const cameraEl = document.createElement('div');
+      cameraEl.className = 'motion-event-camera';
+      const duration = cluster.endTime - cluster.startTime;
+      cameraEl.textContent = cluster.channelName + (duration > 0 ? ` \u00B7 ${duration.toFixed(0)}s` : '');
+
+      const hotspotEl = document.createElement('div');
+      hotspotEl.className = 'motion-event-hotspot';
+      if (cluster.peakHotspots) {
+        for (let i = 0; i < 80; i++) {
+          const cell = document.createElement('div');
+          cell.className = 'hs-cell';
+          const intensity = cluster.peakHotspots[i] / 255;
+          if (intensity > 0.05) {
+            cell.style.background = `rgba(168, 85, 247, ${Math.min(1, intensity * 1.5)})`;
+          }
+          hotspotEl.appendChild(cell);
+        }
+      }
+
+      info.appendChild(header);
+      info.appendChild(cameraEl);
+      info.appendChild(hotspotEl);
+
+      const jumpBtn = document.createElement('button');
+      jumpBtn.className = 'motion-event-jump';
+      jumpBtn.textContent = 'Jump';
+      jumpBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        seekTo(cluster.startTime - globalStart);
+      });
+
+      card.appendChild(info);
+      card.appendChild(jumpBtn);
+
+      card.addEventListener('click', () => seekTo(cluster.startTime - globalStart));
+
+      motionEventsList.appendChild(card);
+    }
+  }
+
+  // Activity sparkline
+  function renderActivitySparkline() {
+    activitySparkline.innerHTML = '';
+    if (motionState.motionProfiles.size === 0) return;
+    const bucketCount = 60;
+    const buckets = new Float32Array(bucketCount);
+    const duration = globalEnd - globalStart;
+    if (duration <= 0) return;
+
+    for (const profile of motionState.motionProfiles.values()) {
+      for (const pt of profile) {
+        const offset = pt.time - globalStart;
+        const idx = Math.min(bucketCount - 1, Math.max(0, Math.floor((offset / duration) * bucketCount)));
+        buckets[idx] = Math.max(buckets[idx], pt.changePercent);
+      }
+    }
+
+    const maxVal = Math.max(1, ...buckets);
+    for (let i = 0; i < bucketCount; i++) {
+      const bar = document.createElement('div');
+      bar.className = 'spark-bar';
+      const h = Math.max(1, (buckets[i] / maxVal) * 24);
+      bar.style.height = h + 'px';
+      if (buckets[i] === 0) bar.style.opacity = '0.15';
+      activitySparkline.appendChild(bar);
+    }
+  }
+
+  function formatAbsTime(absTimeSec) {
+    const d = new Date(absTimeSec * 1000);
+    return d.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });
+  }
+
+  // Skip to next/previous motion
+  function seekToMotion(direction) {
+    if (motionState.motionClusters.length === 0) return;
+    const absNow = globalStart + currentTime;
+    if (direction > 0) {
+      const next = motionState.motionClusters.find(c => c.startTime > absNow + 0.5);
+      if (next) seekTo(next.startTime - globalStart);
+    } else {
+      for (let i = motionState.motionClusters.length - 1; i >= 0; i--) {
+        if (motionState.motionClusters[i].startTime < absNow - 0.5) {
+          seekTo(motionState.motionClusters[i].startTime - globalStart);
+          return;
+        }
+      }
+    }
+  }
+
+  // Live monitor mode
+  function toggleMonitor() {
+    motionState.isMonitoring = !motionState.isMonitoring;
+    btnMonitor.classList.toggle('active', motionState.isMonitoring);
+    btnMonitor.textContent = motionState.isMonitoring ? 'Live (On)' : 'Live';
+    if (motionState.isMonitoring) {
+      motionState.monitorLastCapture.clear();
+      motionState.detector.prevFrames.clear();
+      avpLog('info', 'Live motion monitor enabled');
+    } else {
+      avpLog('info', 'Live motion monitor disabled');
+    }
+  }
+
+  // Called from tick() during playback to detect motion in real-time
+  function monitorTick(absTime) {
+    if (!motionState.isMonitoring || !isPlaying) return;
+    for (const ch of channels.values()) {
+      const lastT = motionState.monitorLastCapture.get(ch.name) || 0;
+      if (absTime - lastT < 1.0) continue; // check every ~1s
+      motionState.monitorLastCapture.set(ch.name, absTime);
+
+      if (ch.activeSegIdx >= 0) {
+        const seg = ch.segments[ch.activeSegIdx];
+        if (seg && seg.videoEl && seg.videoEl.readyState >= 2) {
+          const result = detectMotion(seg.videoEl, ch.name);
+          if (result && result.hasMotion) {
+            // Flash camera border
+            if (ch.cellEl) {
+              ch.cellEl.style.boxShadow = `inset 0 0 0 2px var(--status-motion)`;
+              setTimeout(() => { if (ch.cellEl) ch.cellEl.style.boxShadow = ''; }, 800);
+            }
+            // Add to clusters/findings if not too close to last
+            const existing = motionState.motionClusters.find(
+              c => c.channelName === ch.name && Math.abs(c.endTime - absTime) < motionState.clusterGap
+            );
+            if (existing) {
+              existing.endTime = absTime;
+              existing.peakChange = Math.max(existing.peakChange, result.changePercent);
+              existing.frameCount++;
+            } else {
+              motionState.motionClusters.push({
+                startTime: absTime, endTime: absTime,
+                channelName: ch.name, peakChange: result.changePercent,
+                totalChange: result.changePercent, frameCount: 1,
+                peakHotspots: result.hotspots, peakHotspotChange: result.changePercent,
+              });
+            }
+            renderTimeline();
+          }
+        }
+      }
+    }
+  }
+
+  // Wire up scan buttons
+  btnScanTimeline.addEventListener('click', scanTimeline);
+  btnScanStop.addEventListener('click', stopScan);
+  btnMonitor.addEventListener('click', toggleMonitor);
+  document.getElementById('btnPrevMotion').addEventListener('click', () => seekToMotion(-1));
+  document.getElementById('btnNextMotion').addEventListener('click', () => seekToMotion(1));
+
+  // Export and clear
+  document.getElementById('btnExportMotion').addEventListener('click', () => {
+    if (motionState.motionClusters.length === 0) { avpLog('warn', 'No motion events to export'); return; }
+    const data = {
+      exportedAt: new Date().toISOString(),
+      sensitivity: motionState.sensitivity,
+      events: motionState.motionClusters.map(c => ({
+        startTime: formatAbsTime(c.startTime),
+        endTime: formatAbsTime(c.endTime),
+        camera: c.channelName,
+        peakMotion: c.peakChange.toFixed(1) + '%',
+        durationSec: (c.endTime - c.startTime).toFixed(1),
+      })),
+    };
+    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 = 'motion-events.json'; a.click();
+    URL.revokeObjectURL(url);
+    avpLog('success', `Exported ${data.events.length} motion events`);
+  });
+
+  document.getElementById('btnClearMotion').addEventListener('click', () => {
+    motionState.motionProfiles.clear();
+    motionState.motionClusters = [];
+    motionState.findings = [];
+    motionState.detector.prevFrames.clear();
+    activitySummary.style.display = 'none';
+    motionEventsList.querySelectorAll('.motion-event-card').forEach(el => el.remove());
+    motionEventsEmpty.style.display = '';
+    renderTimeline();
+    avpLog('info', 'Motion events cleared');
+  });
+
+  // ─── Parsing ───
+  function parseMeta(text) {
+    const meta = {};
+    for (const line of text.split('\n')) {
+      const idx = line.indexOf(':');
+      if (idx === -1) continue;
+      meta[line.slice(0, idx).trim()] = line.slice(idx + 1).trim();
+    }
+    return meta;
+  }
+
+  function parseTimestamp(str) {
+    if (!str) return null;
+    const m = str.match(/^(\d{4}-\d{2}-\d{2})\s+(\d{2}:\d{2}:\d{2})\.?(\d*)\s*([\+\-]\d{4})/);
+    if (!m) return null;
+    const iso = `${m[1]}T${m[2]}.${m[3] || '0'}${m[4].slice(0,3)}:${m[4].slice(3)}`;
+    return new Date(iso).getTime() / 1000;
+  }
+
+  function formatTime(sec) {
+    if (!isFinite(sec) || sec < 0) sec = 0;
+    const h = Math.floor(sec / 3600);
+    const m = Math.floor((sec % 3600) / 60);
+    const s = Math.floor(sec % 60);
+    return `${String(h).padStart(2,'0')}:${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}`;
+  }
+
+  function formatLocalTime(epochSec) {
+    return new Date(epochSec * 1000).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: true });
+  }
+
+  function formatLocalDateTime(epochSec) {
+    return new Date(epochSec * 1000).toLocaleString([], {
+      month: 'short', day: 'numeric',
+      hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: true
+    });
+  }
+
+  function baseName(fileName) {
+    const name = fileName.split('/').pop();
+    return name.replace(/\.(mp4|mov|avi|mkv|txt)$/i, '');
+  }
+
+  // ─── Channel / Segment Management ───
+
+  function getOrCreateChannel(name) {
+    if (channels.has(name)) return channels.get(name);
+    const ch = {
+      name,
+      color: CAM_COLORS[channels.size % CAM_COLORS.length],
+      segments: [],
+      meta: null,
+      cellEl: null,
+      activeSegIdx: -1,
+    };
+    channels.set(name, ch);
+    return ch;
+  }
+
+  // Batch flag: when true, skip per-segment rendering
+  let batchingSegments = false;
+  // Track which camera is expanded (null = none)
+  let expandedChannel = null;
+
+  // ─── Timeline Zoom State ───
+  // viewStart/viewEnd define the visible window in seconds (offset from globalStart)
+  let tlZoom = 1;        // 1 = full view, higher = more zoomed in
+  let tlViewCenter = 0;  // center of view in seconds offset from globalStart
+  const TL_MIN_ZOOM = 1;
+  const TL_MAX_ZOOM = 200;
+
+  function getViewWindow() {
+    const viewDur = globalDuration / tlZoom;
+    let start = tlViewCenter - viewDur / 2;
+    let end = tlViewCenter + viewDur / 2;
+    // Clamp to global bounds
+    if (start < 0) { start = 0; end = Math.min(viewDur, globalDuration); }
+    if (end > globalDuration) { end = globalDuration; start = Math.max(0, end - viewDur); }
+    return { start, end, dur: end - start };
+  }
+
+  // Convert absolute time offset (from globalStart) to percentage within the view
+  function timeToViewPct(t) {
+    const vw = getViewWindow();
+    return ((t - vw.start) / vw.dur) * 100;
+  }
+
+  function resetTimelineZoom() {
+    tlZoom = 1;
+    tlViewCenter = globalDuration / 2;
+  }
+
+  function addSegment(channelName, meta, videoBlob) {
+    const ch = getOrCreateChannel(channelName);
+    if (!ch.meta) ch.meta = meta;
+
+    const startTime = parseTimestamp(meta['Recording start time']);
+    const endTime = parseTimestamp(meta['Recording end time']);
+    const url = URL.createObjectURL(videoBlob);
+
+    if (ch.segments.find(s => s.startTime === startTime)) return;
+
+    const seg = { startTime, endTime, url, blob: videoBlob, meta, videoEl: null, loaded: false };
+    ch.segments.push(seg);
+    ch.segments.sort((a, b) => (a.startTime || 0) - (b.startTime || 0));
+
+    if (!batchingSegments) {
+      recalcGlobals();
+      renderAll();
+      showPlayer();
+    }
+  }
+
+  function tryMatchPending() {
+    for (let vi = pendingVideos.length - 1; vi >= 0; vi--) {
+      const v = pendingVideos[vi];
+      const vBase = baseName(v.fileName);
+      for (let mi = pendingMetas.length - 1; mi >= 0; mi--) {
+        const m = pendingMetas[mi];
+        if (vBase === baseName(m.fileName)) {
+          const cameraName = m.meta['Name'] || `Camera ${channels.size + 1}`;
+          addSegment(cameraName, m.meta, v.blob);
+          pendingVideos.splice(vi, 1);
+          pendingMetas.splice(mi, 1);
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
+  function flushPending() {
+    batchingSegments = true;
+    while (tryMatchPending()) { /* keep matching */ }
+
+    // Remaining videos without metadata
+    for (const v of pendingVideos) {
+      const name = baseName(v.fileName).replace(/_/g, ' ');
+      const ch = getOrCreateChannel(name);
+      const url = URL.createObjectURL(v.blob);
+      ch.segments.push({ startTime: null, endTime: null, url, blob: v.blob, meta: {}, videoEl: null, loaded: false });
+    }
+    pendingVideos.length = 0;
+    pendingMetas.length = 0;
+    batchingSegments = false;
+
+    if (channels.size > 0) {
+      recalcGlobals();
+      renderAll();
+      showPlayer();
+      avpLog('info', `Player ready: ${channels.size} camera(s) loaded`);
+      scheduleAutoScan();
+    }
+  }
+
+  // ─── Global Timeline ───
+
+  function recalcGlobals() {
+    globalStart = Infinity;
+    globalEnd = -Infinity;
+
+    for (const ch of channels.values()) {
+      for (const seg of ch.segments) {
+        if (seg.startTime != null && seg.startTime < globalStart) globalStart = seg.startTime;
+        if (seg.endTime != null && seg.endTime > globalEnd) globalEnd = seg.endTime;
+      }
+    }
+
+    if (!isFinite(globalStart)) { globalStart = 0; globalEnd = 0; }
+    globalDuration = globalEnd - globalStart;
+    if (globalDuration <= 0) globalDuration = 1;
+
+    // Reset zoom if it's the first load
+    if (tlZoom === 1) tlViewCenter = globalDuration / 2;
+
+    updateTimelineLabels();
+  }
+
+  // ─── Rendering ───
+
+  function renderAll() {
+    renderGrid();
+    renderTimeline();
+    updateSegmentVisibility();
+    updateUI();
+    if (!layoutPanel.classList.contains('hidden')) renderDeviceList();
+  }
+
+  function renderGrid() {
+    const count = channels.size;
+    camCount.textContent = `${count} camera${count !== 1 ? 's' : ''} | ${totalSegments()} clips`;
+
+    if (gridLayoutOverride) {
+      cameraGrid.className = 'camera-grid';
+      cameraGrid.style.gridTemplateColumns = `repeat(${gridLayoutOverride.cols}, 1fr)`;
+      cameraGrid.style.gridTemplateRows = `repeat(${gridLayoutOverride.rows}, 1fr)`;
+    } else {
+      const visibleCount = countVisibleCameras();
+      cameraGrid.className = `camera-grid cams-${Math.min(visibleCount, 9)}`;
+      cameraGrid.style.gridTemplateColumns = '';
+      cameraGrid.style.gridTemplateRows = '';
+    }
+    applyCameraVisibility();
+
+    let idx = 0;
+    for (const ch of channels.values()) {
+      if (!ch.cellEl) {
+        ch.cellEl = createCamCell(ch, idx);
+        cameraGrid.appendChild(ch.cellEl);
+      }
+      for (const seg of ch.segments) {
+        if (!seg.videoEl) {
+          const video = document.createElement('video');
+          video.src = seg.url;
+          video.preload = 'metadata';
+          video.muted = true;
+          video.playsInline = true;
+          video.className = 'hidden-video';
+          video.addEventListener('loadedmetadata', () => {
+            seg.loaded = true;
+            if (seg.startTime == null) {
+              seg.startTime = 0;
+              seg.endTime = video.duration;
+              recalcGlobals();
+              renderTimeline();
+            }
+          });
+          ch.cellEl.appendChild(video);
+          seg.videoEl = video;
+        }
+      }
+      idx++;
+    }
+  }
+
+  function createCamCell(ch) {
+    const cell = document.createElement('div');
+    cell.className = 'cam-cell' + (magActive ? ' mag-mode' : '');
+    cell.style.setProperty('--cam-color', ch.color);
+
+    const noSig = document.createElement('div');
+    noSig.className = 'no-signal';
+    noSig.textContent = 'No Signal';
+    cell.appendChild(noSig);
+    ch._noSignalEl = noSig;
+
+    const label = document.createElement('div');
+    label.className = 'cam-label';
+    const dot = document.createElement('span');
+    dot.className = 'cam-dot';
+    dot.style.background = ch.color;
+    const nameSpan = document.createElement('span');
+    nameSpan.textContent = ch.name;
+    label.appendChild(dot);
+    label.appendChild(nameSpan);
+    cell.appendChild(label);
+
+    if (ch.meta) {
+      const model = ch.meta['Model'] || '';
+      const serial = ch.meta['Serial number'] || '';
+      if (model || serial) {
+        const info = document.createElement('div');
+        info.className = 'cam-info-badge';
+        info.textContent = [model, serial ? `S/N: ${serial}` : ''].filter(Boolean).join(' | ');
+        cell.appendChild(info);
+      }
+    }
+
+    const ts = document.createElement('div');
+    ts.className = 'cam-timestamp';
+    ts.textContent = '--:--:--';
+    cell.appendChild(ts);
+    ch._tsEl = ts;
+
+    const segInfo = document.createElement('div');
+    segInfo.className = 'cam-segment-info';
+    segInfo.textContent = `${ch.segments.length} clips`;
+    cell.appendChild(segInfo);
+    ch._segInfoEl = segInfo;
+
+    // Dewarp button
+    const dewarpBtn = document.createElement('button');
+    dewarpBtn.className = 'dewarp-btn';
+    dewarpBtn.innerHTML = '<svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg> Dewarp';
+    dewarpBtn.title = 'Toggle fisheye dewarp';
+    dewarpBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      toggleDewarp(cell, ch.name);
+    });
+    cell.appendChild(dewarpBtn);
+
+    setupDragHandle(cell);
+
+    cell.addEventListener('click', (e) => {
+      if (magActive) return;
+      if (e.target.closest('.drag-handle')) return;
+      if (e.target.closest('.dewarp-btn')) return;
+      // Don't expand when dewarped (click is used for pan)
+      const _ds = dewarpState.get(ch.name);
+      if (_ds && _ds.active) return;
+      const z = getZoom(cell);
+      if (z.scale > 1) return;
+      const wasExpanded = cell.classList.contains('expanded');
+      cameraGrid.querySelectorAll('.cam-cell.expanded').forEach(c => {
+        c.classList.remove('expanded');
+        resetZoom(c);
+      });
+      if (!wasExpanded) {
+        cell.classList.add('expanded');
+        expandedChannel = ch.name;
+      } else {
+        expandedChannel = null;
+      }
+      playerArea.classList.toggle('has-expanded', !!expandedChannel);
+      renderTimeline();
+    });
+
+    return cell;
+  }
+
+  function totalSegments() {
+    let n = 0;
+    for (const ch of channels.values()) n += ch.segments.length;
+    return n;
+  }
+
+  // Tick interval steps in seconds
+  const TICK_STEPS = [5, 10, 15, 30, 60, 2*60, 5*60, 10*60, 15*60, 30*60, 60*60, 2*3600, 6*3600];
+
+  function pickTickInterval(viewDurSec, trackWidthPx) {
+    // Aim for a tick every ~80-120px
+    const targetCount = Math.max(2, Math.floor(trackWidthPx / 100));
+    const idealInterval = viewDurSec / targetCount;
+    for (const step of TICK_STEPS) {
+      if (step >= idealInterval) return step;
+    }
+    return TICK_STEPS[TICK_STEPS.length - 1];
+  }
+
+  function formatTickLabel(epochSec, interval, hasAbsolute) {
+    if (hasAbsolute) {
+      const d = new Date(epochSec * 1000);
+      if (interval < 60) {
+        return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false });
+      }
+      return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false });
+    }
+    const sec = epochSec;
+    const h = Math.floor(sec / 3600);
+    const m = Math.floor((sec % 3600) / 60);
+    const s = Math.floor(sec % 60);
+    if (interval < 60) return `${String(h).padStart(2,'0')}:${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}`;
+    return `${String(h).padStart(2,'0')}:${String(m).padStart(2,'0')}`;
+  }
+
+  function updateTimelineLabels() {
+    const vw = getViewWindow();
+    const hasAbsolute = globalStart > 0;
+    if (hasAbsolute) {
+      tlStart.textContent = formatLocalTime(globalStart + vw.start);
+      tlEnd.textContent = formatLocalTime(globalStart + vw.end);
+    } else {
+      tlStart.textContent = formatTime(vw.start);
+      tlEnd.textContent = formatTime(vw.end);
+    }
+
+    const minimap = document.getElementById('timelineMinimap');
+    const viewport = document.getElementById('minimapViewport');
+    const tlZoomInfo = document.getElementById('tlZoomInfo');
+    if (tlZoom > 1) {
+      minimap.classList.add('visible');
+      viewport.style.left = (vw.start / globalDuration * 100) + '%';
+      viewport.style.width = (vw.dur / globalDuration * 100) + '%';
+      tlZoomInfo.textContent = `${tlZoom.toFixed(1)}x zoom \u2014 scroll to zoom, drag to pan`;
+      timelineTrack.style.cursor = 'grab';
+    } else {
+      minimap.classList.remove('visible');
+      tlZoomInfo.textContent = '';
+      timelineTrack.style.cursor = '';
+    }
+  }
+
+  function renderTimeline() {
+    // Clear dynamic elements
+    timelineTrack.querySelectorAll('.timeline-segment, .timeline-gap, .timeline-tick, .timeline-tick-label, .motion-heatmap-bar, .motion-cluster-mark').forEach(el => el.remove());
+
+    const vw = getViewWindow();
+    const hasAbsolute = globalStart > 0;
+    const trackWidth = timelineTrack.offsetWidth || 600;
+
+    const rowH = 10;
+    const pad = 2;
+    const visibleChannels = expandedChannel
+      ? [channels.get(expandedChannel)].filter(Boolean)
+      : [...channels.values()];
+    const tickAreaH = 14;
+    const hasMotionData = motionState.motionClusters.length > 0;
+    const motionRowH = hasMotionData ? 8 : 0;
+    const motionRowPad = hasMotionData ? 2 : 0;
+    timelineTrack.style.height = Math.max(32, visibleChannels.length * (rowH + pad) + pad + tickAreaH + motionRowH + motionRowPad) + 'px';
+
+    // Draw tick marks
+    const interval = pickTickInterval(vw.dur, trackWidth);
+    // First tick aligned to interval
+    const absViewStart = globalStart + vw.start;
+    const absViewEnd = globalStart + vw.end;
+    const firstTick = Math.ceil(absViewStart / interval) * interval;
+
+    for (let t = firstTick; t <= absViewEnd; t += interval) {
+      const offset = t - globalStart; // seconds from globalStart
+      const pct = timeToViewPct(offset);
+      if (pct < 0 || pct > 100) continue;
+
+      const tick = document.createElement('div');
+      tick.className = 'timeline-tick major';
+      tick.style.cssText = `left:${pct}%;height:100%;`;
+      timelineTrack.appendChild(tick);
+
+      const label = document.createElement('div');
+      label.className = 'timeline-tick-label';
+      label.style.left = pct + '%';
+      label.textContent = formatTickLabel(hasAbsolute ? t : offset, interval, hasAbsolute);
+      timelineTrack.appendChild(label);
+    }
+
+    // Draw sub-ticks (half-intervals, no labels)
+    const subInterval = interval / 2;
+    if (subInterval >= 1) {
+      const firstSub = Math.ceil(absViewStart / subInterval) * subInterval;
+      for (let t = firstSub; t <= absViewEnd; t += subInterval) {
+        // Skip if it's a major tick
+        if (Math.abs(t / interval - Math.round(t / interval)) < 0.001) continue;
+        const offset = t - globalStart;
+        const pct = timeToViewPct(offset);
+        if (pct < 0 || pct > 100) continue;
+
+        const tick = document.createElement('div');
+        tick.className = 'timeline-tick';
+        tick.style.cssText = `left:${pct}%;height:100%;`;
+        timelineTrack.appendChild(tick);
+      }
+    }
+
+    // Draw segments and gaps
+    let row = 0;
+    for (const ch of visibleChannels) {
+      const y = pad + tickAreaH + row * (rowH + pad);
+
+      for (let i = 0; i < ch.segments.length; i++) {
+        const seg = ch.segments[i];
+        if (seg.startTime == null || seg.endTime == null) continue;
+
+        const segStart = seg.startTime - globalStart;
+        const segEnd = seg.endTime - globalStart;
+        // Skip if entirely outside view
+        if (segEnd < vw.start || segStart > vw.end) continue;
+
+        const left = timeToViewPct(segStart);
+        const right = timeToViewPct(segEnd);
+        const width = right - left;
+
+        const el = document.createElement('div');
+        el.className = 'timeline-segment';
+        el.dataset.channel = ch.name;
+        el.dataset.segIdx = i;
+        el.style.cssText = `left:${left}%;width:${width}%;top:${y}px;background:${ch.color};`;
+        timelineTrack.appendChild(el);
+
+        if (i > 0) {
+          const prev = ch.segments[i - 1];
+          if (prev.endTime != null && seg.startTime - prev.endTime > 1) {
+            const gapStart = prev.endTime - globalStart;
+            const gapEnd = segStart;
+            if (gapEnd < vw.start || gapStart > vw.end) continue;
+            const gapLeft = timeToViewPct(gapStart);
+            const gapRight = timeToViewPct(gapEnd);
+            const gap = document.createElement('div');
+            gap.className = 'timeline-gap';
+            gap.style.cssText = `left:${gapLeft}%;width:${gapRight - gapLeft}%;top:${y}px;`;
+            timelineTrack.appendChild(gap);
+          }
+        }
+      }
+      row++;
+    }
+
+    // Motion heatmap row
+    if (hasMotionData && globalDuration > 0) {
+      const heatY = pad + tickAreaH + visibleChannels.length * (rowH + pad) + motionRowPad;
+      // Render heatmap bars from motion profiles
+      const bucketCount = Math.min(200, Math.max(40, trackWidth / 4));
+      const buckets = new Float32Array(bucketCount);
+      for (const profile of motionState.motionProfiles.values()) {
+        for (const pt of profile) {
+          const offset = pt.time - globalStart;
+          const pct = timeToViewPct(offset);
+          if (pct < 0 || pct > 100) continue;
+          const idx = Math.min(bucketCount - 1, Math.max(0, Math.floor((pct / 100) * bucketCount)));
+          buckets[idx] = Math.max(buckets[idx], pt.changePercent);
+        }
+      }
+      const barW = 100 / bucketCount;
+      for (let i = 0; i < bucketCount; i++) {
+        if (buckets[i] < 0.1) continue;
+        const bar = document.createElement('div');
+        bar.className = 'motion-heatmap-bar';
+        const intensity = Math.min(1, buckets[i] / 15);
+        const color = buckets[i] > 10
+          ? `rgba(222, 17, 17, ${0.3 + intensity * 0.5})`
+          : `rgba(168, 85, 247, ${0.2 + intensity * 0.6})`;
+        bar.style.cssText = `position:absolute;left:${i * barW}%;width:${barW + 0.1}%;top:${heatY}px;height:${motionRowH}px;background:${color};pointer-events:none;`;
+        timelineTrack.appendChild(bar);
+      }
+
+      // Render cluster markers
+      for (const cluster of motionState.motionClusters) {
+        const offset = cluster.startTime - globalStart;
+        const pct = timeToViewPct(offset);
+        if (pct < -1 || pct > 101) continue;
+        const ch = channels.get(cluster.channelName);
+        const mark = document.createElement('div');
+        mark.className = 'motion-cluster-mark';
+        mark.style.cssText = `position:absolute;left:${pct}%;top:${heatY - 2}px;width:4px;height:${motionRowH + 4}px;background:${ch ? ch.color : 'var(--status-motion)'};border-radius:1px;cursor:pointer;z-index:2;`;
+        mark.title = `${formatAbsTime(cluster.startTime)} - ${cluster.channelName} (${cluster.peakChange.toFixed(1)}%)`;
+        mark.addEventListener('click', () => seekTo(cluster.startTime - globalStart));
+        timelineTrack.appendChild(mark);
+      }
+    }
+
+    // Update minimap segments
+    renderMinimap(visibleChannels);
+    updateTimelineLabels();
+  }
+
+  function renderMinimap(visibleChannels) {
+    const minimap = document.getElementById('timelineMinimap');
+    minimap.querySelectorAll('.minimap-seg').forEach(el => el.remove());
+
+    for (const ch of visibleChannels) {
+      for (const seg of ch.segments) {
+        if (seg.startTime == null || seg.endTime == null) continue;
+        const left = ((seg.startTime - globalStart) / globalDuration) * 100;
+        const width = ((seg.endTime - seg.startTime) / globalDuration) * 100;
+        const el = document.createElement('div');
+        el.className = 'minimap-seg';
+        el.style.cssText = `left:${left}%;width:${width}%;background:${ch.color};`;
+        minimap.appendChild(el);
+      }
+    }
+  }
+
+  // ─── Segment Switching ───
+
+  function findActiveSegment(ch, absTime) {
+    for (let i = 0; i < ch.segments.length; i++) {
+      const seg = ch.segments[i];
+      if (seg.startTime == null) continue;
+      if (absTime >= seg.startTime && absTime <= seg.endTime) return i;
+    }
+    return -1;
+  }
+
+  function updateSegmentVisibility() {
+    const absTime = globalStart + currentTime;
+
+    for (const ch of channels.values()) {
+      const newIdx = findActiveSegment(ch, absTime);
+
+      if (ch._noSignalEl) {
+        ch._noSignalEl.style.display = newIdx === -1 ? 'flex' : 'none';
+      }
+
+      if (newIdx !== ch.activeSegIdx) {
+        if (ch.activeSegIdx >= 0 && ch.segments[ch.activeSegIdx]?.videoEl) {
+          const oldVid = ch.segments[ch.activeSegIdx].videoEl;
+          oldVid.pause();
+          oldVid.classList.add('hidden-video');
+        }
+
+        ch.activeSegIdx = newIdx;
+
+        if (newIdx >= 0) {
+          const seg = ch.segments[newIdx];
+          if (seg.videoEl) {
+            seg.videoEl.classList.remove('hidden-video');
+            const localTime = absTime - seg.startTime;
+            seg.videoEl.currentTime = Math.max(0, Math.min(localTime, seg.videoEl.duration || 0));
+            seg.videoEl.playbackRate = SPEEDS[currentSpeedIdx];
+            if (isPlaying) seg.videoEl.play();
+          }
+        }
+        // Re-apply zoom to newly visible video (skip if dewarped)
+        if (ch.cellEl) {
+          const _ds = dewarpState.get(ch.name);
+          if (!_ds || !_ds.active) applyZoom(ch.cellEl);
+        }
+      }
+
+      if (ch._segInfoEl) {
+        const total = ch.segments.length;
+        ch._segInfoEl.textContent = newIdx >= 0
+          ? `Clip ${newIdx + 1}/${total}`
+          : `${total} clips`;
+      }
+    }
+  }
+
+  // ─── Player State ───
+
+  function showPlayer() {
+    dropZone.classList.add('hidden');
+    playerArea.classList.add('active');
+    addFilesBtn.style.display = 'flex';
+    document.getElementById('newSessionBtn').style.display = 'flex';
+  }
+
+  function showLoading(msg, detail) {
+    loadingText.textContent = msg || 'Processing...';
+    loadingDetail.textContent = detail || '';
+    loadingOverlay.classList.remove('hidden');
+  }
+
+  function hideLoading() {
+    loadingOverlay.classList.add('hidden');
+  }
+
+  function play() {
+    isPlaying = true;
+    lastTick = 0;
+    playIcon.innerHTML = '<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>';
+
+    for (const ch of channels.values()) {
+      const idx = ch.activeSegIdx;
+      if (idx >= 0) {
+        const seg = ch.segments[idx];
+        if (seg.videoEl && seg.videoEl.readyState >= 2) {
+          seg.videoEl.playbackRate = SPEEDS[currentSpeedIdx];
+          seg.videoEl.play();
+        }
+      }
+    }
+    tick();
+  }
+
+  function pause() {
+    isPlaying = false;
+    playIcon.innerHTML = '<path d="M8 5v14l11-7z"/>';
+    for (const ch of channels.values()) {
+      for (const seg of ch.segments) {
+        if (seg.videoEl) seg.videoEl.pause();
+      }
+    }
+    if (animFrame) { cancelAnimationFrame(animFrame); animFrame = null; }
+  }
+
+  function togglePlay() { isPlaying ? pause() : play(); }
+
+  function seekTo(time) {
+    currentTime = Math.max(0, Math.min(time, globalDuration));
+    const absTime = globalStart + currentTime;
+
+    updateSegmentVisibility();
+
+    for (const ch of channels.values()) {
+      const idx = ch.activeSegIdx;
+      if (idx >= 0) {
+        const seg = ch.segments[idx];
+        if (seg.videoEl) {
+          seg.videoEl.currentTime = Math.max(0, absTime - seg.startTime);
+          if (isPlaying) seg.videoEl.play();
+        }
+      }
+    }
+    updateUI();
+  }
+
+  function setSpeed(idx) {
+    currentSpeedIdx = Math.max(0, Math.min(idx, SPEEDS.length - 1));
+    const speed = SPEEDS[currentSpeedIdx];
+    speedDisplay.textContent = speed + 'x';
+    speedDisplay.classList.toggle('highlight', speed !== 1);
+    for (const ch of channels.values()) {
+      for (const seg of ch.segments) {
+        if (seg.videoEl) seg.videoEl.playbackRate = speed;
+      }
+    }
+    if (slideshowActive) {
+      const v = slideshowStage.querySelector('.ss-pane:not(.ss-exit) video');
+      if (v) v.playbackRate = speed;
+    }
+  }
+
+  function frameStep(dir) {
+    pause();
+    seekTo(currentTime + dir * (1 / 30));
+  }
+
+  function tick() {
+    if (!isPlaying) return;
+    const now = performance.now();
+    if (lastTick) {
+      const dt = (now - lastTick) / 1000;
+      currentTime += dt * SPEEDS[currentSpeedIdx];
+      if (currentTime >= globalDuration) {
+        currentTime = globalDuration;
+        pause();
+        updateUI();
+        return;
+      }
+      updateSegmentVisibility();
+      monitorTick(globalStart + currentTime);
+    }
+    lastTick = now;
+    updateUI();
+    animFrame = requestAnimationFrame(tick);
+  }
+
+  function updateUI() {
+    const pct = timeToViewPct(currentTime);
+    playhead.style.left = Math.max(0, Math.min(100, pct)) + '%';
+    // Hide playhead if outside view
+    playhead.style.display = (pct < -1 || pct > 101) ? 'none' : '';
+
+    const absTime = globalStart + currentTime;
+    const hasAbsolute = globalStart > 0;
+
+    timeDisplay.textContent = hasAbsolute
+      ? formatLocalDateTime(absTime)
+      : `${formatTime(currentTime)} / ${formatTime(globalDuration)}`;
+
+    for (const ch of channels.values()) {
+      if (!ch._tsEl) continue;
+      if (hasAbsolute) {
+        ch._tsEl.textContent = formatLocalTime(absTime);
+      } else {
+        const idx = ch.activeSegIdx;
+        if (idx >= 0 && ch.segments[idx].videoEl) {
+          ch._tsEl.textContent = formatTime(ch.segments[idx].videoEl.currentTime);
+        }
+      }
+    }
+
+    timelineTrack.querySelectorAll('.timeline-segment').forEach(el => {
+      const chName = el.dataset.channel;
+      const segIdx = parseInt(el.dataset.segIdx);
+      const ch = channels.get(chName);
+      el.classList.toggle('active-segment', ch && ch.activeSegIdx === segIdx);
+    });
+
+    if (slideshowActive) updateSlideshow();
+  }
+
+  // ─── Timeline Interaction ───
+  let isDragging = false;
+  let tlPanning = false;
+  let tlPanStartX = 0;
+  let tlPanStartCenter = 0;
+
+  function timelineSeek(e) {
+    const rect = timelineTrack.getBoundingClientRect();
+    const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+    const vw = getViewWindow();
+    seekTo(vw.start + pct * vw.dur);
+  }
+
+  const TL_DRAG_THRESHOLD = 5; // pixels before drag becomes a pan
+  let tlMouseDownX = 0;
+  let tlMouseDownHandled = false;
+
+  timelineTrack.addEventListener('mousedown', e => {
+    if (tlZoom > 1) {
+      // When zoomed, start potential pan — decide on mousemove whether it's pan or seek
+      tlMouseDownX = e.clientX;
+      tlPanStartX = e.clientX;
+      tlPanStartCenter = tlViewCenter;
+      tlMouseDownHandled = false;
+      isDragging = true; // will become either seek or pan
+      e.preventDefault();
+    } else {
+      isDragging = true;
+      timelineSeek(e);
+    }
+  });
+
+  document.addEventListener('mousemove', e => {
+    if (tlPanning) {
+      const rect = timelineTrack.getBoundingClientRect();
+      const dx = e.clientX - tlPanStartX;
+      const vw = getViewWindow();
+      const timeDelta = -(dx / rect.width) * vw.dur;
+      tlViewCenter = Math.max(0, Math.min(globalDuration, tlPanStartCenter + timeDelta));
+      timelineTrack.style.cursor = 'grabbing';
+      renderTimeline();
+      updateUI();
+      return;
+    }
+    if (isDragging && tlZoom > 1 && !tlMouseDownHandled) {
+      const dx = Math.abs(e.clientX - tlMouseDownX);
+      if (dx > TL_DRAG_THRESHOLD) {
+        // Exceeded threshold — this is a pan
+        tlPanning = true;
+        tlMouseDownHandled = true;
+        return;
+      }
+    }
+    if (isDragging && !tlPanning) timelineSeek(e);
+    const rect = timelineTrack.getBoundingClientRect();
+    if (e.clientX >= rect.left && e.clientX <= rect.right &&
+        e.clientY >= rect.top && e.clientY <= rect.bottom) {
+      const pct = (e.clientX - rect.left) / rect.width;
+      const vw = getViewWindow();
+      const t = vw.start + pct * vw.dur;
+      const hasAbs = globalStart > 0;
+      timelineHover.textContent = hasAbs ? formatLocalTime(globalStart + t) : formatTime(t);
+      timelineHover.style.left = (pct * 100) + '%';
+      timelineHover.style.display = 'block';
+    } else {
+      timelineHover.style.display = 'none';
+    }
+  });
+  document.addEventListener('mouseup', e => {
+    // If zoomed and mouse didn't move past threshold, treat as a seek click
+    if (isDragging && tlZoom > 1 && !tlMouseDownHandled) {
+      timelineSeek(e);
+    }
+    isDragging = false;
+    tlPanning = false;
+    timelineTrack.style.cursor = '';
+  });
+
+  // Scroll wheel on timeline = zoom in/out
+  timelineTrack.addEventListener('wheel', e => {
+    e.preventDefault();
+    const rect = timelineTrack.getBoundingClientRect();
+    const mousePct = (e.clientX - rect.left) / rect.width;
+    const vw = getViewWindow();
+    // Time under cursor
+    const timeAtCursor = vw.start + mousePct * vw.dur;
+
+    const factor = e.deltaY < 0 ? 1.3 : 1 / 1.3;
+    tlZoom = Math.max(TL_MIN_ZOOM, Math.min(TL_MAX_ZOOM, tlZoom * factor));
+
+    // Keep the time under cursor at the same screen position
+    const newDur = globalDuration / tlZoom;
+    tlViewCenter = timeAtCursor - (mousePct - 0.5) * newDur;
+    tlViewCenter = Math.max(0, Math.min(globalDuration, tlViewCenter));
+
+    renderTimeline();
+    updateUI();
+  }, { passive: false });
+
+  // Minimap click to jump view
+  document.getElementById('timelineMinimap').addEventListener('mousedown', e => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+    tlViewCenter = pct * globalDuration;
+    renderTimeline();
+    updateUI();
+  });
+
+  // ─── Button Handlers ───
+  btnPlay.addEventListener('click', togglePlay);
+  document.getElementById('btnSkipBack').addEventListener('click', () => seekTo(currentTime - 10));
+  document.getElementById('btnSkipFwd').addEventListener('click', () => seekTo(currentTime + 10));
+  document.getElementById('btnFrameBack').addEventListener('click', () => frameStep(-1));
+  document.getElementById('btnFrameFwd').addEventListener('click', () => frameStep(1));
+  document.getElementById('btnSpeedDown').addEventListener('click', () => setSpeed(currentSpeedIdx - 1));
+  document.getElementById('btnSpeedUp').addEventListener('click', () => setSpeed(currentSpeedIdx + 1));
+  document.getElementById('btnFullscreen').addEventListener('click', () => {
+    if (document.fullscreenElement) document.exitFullscreen();
+    else playerArea.requestFullscreen();
+  });
+
+  // ─── Keyboard ───
+  document.addEventListener('keydown', e => {
+    if (e.target.tagName === 'INPUT') return;
+    switch (e.key) {
+      case ' ': e.preventDefault(); togglePlay(); break;
+      case 'ArrowLeft':
+        e.preventDefault();
+        e.shiftKey ? seekTo(currentTime - 10) : frameStep(-1);
+        break;
+      case 'ArrowRight':
+        e.preventDefault();
+        e.shiftKey ? seekTo(currentTime + 10) : frameStep(1);
+        break;
+      case '[': setSpeed(currentSpeedIdx - 1); break;
+      case ']': setSpeed(currentSpeedIdx + 1); break;
+      case 'f': case 'F':
+        if (document.fullscreenElement) document.exitFullscreen();
+        else playerArea.requestFullscreen();
+        break;
+      case '0':
+        resetTimelineZoom();
+        renderTimeline();
+        updateUI();
+        break;
+      case 's': case 'S':
+        toggleSlideshow();
+        break;
+      case 'm': case 'M':
+        toggleMagnifier();
+        break;
+      case 'n': case 'N':
+        if (e.shiftKey) { e.preventDefault(); seekToMotion(1); }
+        break;
+      case 'p': case 'P':
+        if (e.shiftKey) { e.preventDefault(); seekToMotion(-1); }
+        break;
+      case 'Escape':
+        if (magActive) toggleMagnifier();
+        break;
+    }
+  });
+
+  // ─── Digital Zoom ───
+
+  const btnMagnifier = document.getElementById('btnMagnifier');
+  let magActive = false;
+
+  const zoomState = new Map();
+
+  function getZoom(cell) {
+    if (!zoomState.has(cell)) zoomState.set(cell, { scale: 1, ox: 50, oy: 50 });
+    return zoomState.get(cell);
+  }
+
+  function applyZoom(cell) {
+    const z = getZoom(cell);
+    const videos = cell.querySelectorAll('video:not(.hidden-video)');
+    for (const v of videos) {
+      if (z.scale <= 1) {
+        v.style.transform = '';
+        v.style.transformOrigin = '';
+      } else {
+        v.style.transform = `scale(${z.scale})`;
+        v.style.transformOrigin = `${z.ox}% ${z.oy}%`;
+      }
+    }
+    cell.classList.toggle('zoomed-in', z.scale > 1);
+    let indicator = cell.querySelector('.zoom-indicator');
+    if (!indicator) {
+      indicator = document.createElement('div');
+      indicator.className = 'zoom-indicator';
+      cell.appendChild(indicator);
+    }
+    if (z.scale > 1) {
+      indicator.textContent = `${z.scale.toFixed(1)}x`;
+      indicator.classList.add('visible');
+    } else {
+      indicator.classList.remove('visible');
+    }
+  }
+
+  function resetZoom(cell) {
+    zoomState.set(cell, { scale: 1, ox: 50, oy: 50 });
+    applyZoom(cell);
+  }
+
+  // Scroll-wheel zoom
+  cameraGrid.addEventListener('wheel', e => {
+    const cell = e.target.closest('.cam-cell');
+    if (!cell) return;
+    e.preventDefault();
+
+    // Dewarp zoom: adjust FOV
+    const ds = getDewarpForCell(cell);
+    if (ds && ds.active) {
+      const delta = e.deltaY > 0 ? 0.05 : -0.05;
+      ds.fov = Math.max(0.2, Math.min(Math.PI, ds.fov + delta));
+      return;
+    }
+
+    const z = getZoom(cell);
+    const rect = cell.getBoundingClientRect();
+    const mx = ((e.clientX - rect.left) / rect.width) * 100;
+    const my = ((e.clientY - rect.top) / rect.height) * 100;
+
+    const delta = e.deltaY > 0 ? -0.25 : 0.25;
+    const newScale = Math.max(1, Math.min(10, z.scale + delta));
+
+    if (newScale <= 1) {
+      z.scale = 1; z.ox = 50; z.oy = 50;
+    } else {
+      z.ox = mx; z.oy = my; z.scale = newScale;
+    }
+    applyZoom(cell);
+  }, { passive: false });
+
+  // Double-click to reset zoom
+  cameraGrid.addEventListener('dblclick', e => {
+    const cell = e.target.closest('.cam-cell');
+    if (!cell) return;
+    // Dewarp: reset view on double-click
+    const ds = getDewarpForCell(cell);
+    if (ds && ds.active) {
+      e.stopPropagation();
+      ds.yaw = 0;
+      ds.pitch = 0;
+      ds.fov = Math.PI * 0.5;
+      return;
+    }
+    const z = getZoom(cell);
+    if (z.scale > 1) {
+      e.stopPropagation();
+      resetZoom(cell);
+    }
+  });
+
+  // ─── Pan (click+drag while zoomed) ───
+  let panCell = null;
+  let panStartX = 0, panStartY = 0;
+  let panStartOx = 0, panStartOy = 0;
+
+  cameraGrid.addEventListener('mousedown', e => {
+    if (magActive) return; // magnifier takes priority
+    if (e.target.closest('.drag-handle')) return; // drag handle takes priority
+    if (e.target.closest('.dewarp-btn')) return; // dewarp button takes priority
+    const cell = e.target.closest('.cam-cell');
+    if (!cell) return;
+
+    // Dewarp pan
+    const ds = getDewarpForCell(cell);
+    if (ds && ds.active) {
+      e.preventDefault();
+      e.stopPropagation();
+      dewarpPanCell = cell;
+      dewarpPanStartX = e.clientX;
+      dewarpPanStartY = e.clientY;
+      dewarpPanStartYaw = ds.yaw;
+      dewarpPanStartPitch = ds.pitch;
+      cell.classList.add('panning');
+      return;
+    }
+
+    const z = getZoom(cell);
+    if (z.scale <= 1) return;
+
+    e.preventDefault();
+    e.stopPropagation();
+    panCell = cell;
+    panStartX = e.clientX;
+    panStartY = e.clientY;
+    panStartOx = z.ox;
+    panStartOy = z.oy;
+    cell.classList.add('panning');
+  });
+
+  document.addEventListener('mousemove', e => {
+    // Dewarp pan
+    if (dewarpPanCell) {
+      const ds = getDewarpForCell(dewarpPanCell);
+      if (ds) {
+        const rect = dewarpPanCell.getBoundingClientRect();
+        const sensitivity = ds.fov / rect.width;
+        ds.yaw = dewarpPanStartYaw - (e.clientX - dewarpPanStartX) * sensitivity;
+        ds.pitch = Math.max(-Math.PI * 0.45, Math.min(Math.PI * 0.45,
+          dewarpPanStartPitch + (e.clientY - dewarpPanStartY) * sensitivity));
+      }
+      return;
+    }
+    if (!panCell) return;
+    const z = getZoom(panCell);
+    const rect = panCell.getBoundingClientRect();
+    // Convert pixel drag to percentage shift (invert for natural panning)
+    const dx = ((e.clientX - panStartX) / rect.width) * 100;
+    const dy = ((e.clientY - panStartY) / rect.height) * 100;
+    // Clamp origin to keep image from sliding too far off
+    z.ox = Math.max(0, Math.min(100, panStartOx - dx));
+    z.oy = Math.max(0, Math.min(100, panStartOy - dy));
+    applyZoom(panCell);
+  });
+
+  document.addEventListener('mouseup', () => {
+    if (dewarpPanCell) {
+      dewarpPanCell.classList.remove('panning');
+      dewarpPanCell = null;
+    }
+    if (panCell) {
+      panCell.classList.remove('panning');
+      panCell = null;
+    }
+  });
+
+  // ─── Magnifier tool (one-use) ───
+  function toggleMagnifier() {
+    magActive = !magActive;
+    btnMagnifier.classList.toggle('active', magActive);
+    document.querySelectorAll('.cam-cell').forEach(c => {
+      c.classList.toggle('mag-mode', magActive);
+    });
+  }
+
+  btnMagnifier.addEventListener('click', e => {
+    e.stopPropagation();
+    toggleMagnifier();
+  });
+
+  let magDragging = false;
+  let magStartX = 0, magStartY = 0;
+  let magCell = null;
+  let magSelEl = null;
+
+  cameraGrid.addEventListener('mousedown', e => {
+    if (!magActive) return;
+    const cell = e.target.closest('.cam-cell');
+    if (!cell) return;
+    e.preventDefault();
+    e.stopPropagation();
+
+    magDragging = true;
+    magCell = cell;
+    const rect = cell.getBoundingClientRect();
+    magStartX = e.clientX - rect.left;
+    magStartY = e.clientY - rect.top;
+
+    if (!magSelEl) {
+      magSelEl = document.createElement('div');
+      magSelEl.className = 'mag-selection';
+    }
+    magSelEl.style.left = magStartX + 'px';
+    magSelEl.style.top = magStartY + 'px';
+    magSelEl.style.width = '0';
+    magSelEl.style.height = '0';
+    magSelEl.classList.add('active');
+    cell.appendChild(magSelEl);
+  }, true);
+
+  document.addEventListener('mousemove', e => {
+    if (!magDragging || !magCell) return;
+    const rect = magCell.getBoundingClientRect();
+    const curX = Math.max(0, Math.min(e.clientX - rect.left, rect.width));
+    const curY = Math.max(0, Math.min(e.clientY - rect.top, rect.height));
+
+    magSelEl.style.left = Math.min(magStartX, curX) + 'px';
+    magSelEl.style.top = Math.min(magStartY, curY) + 'px';
+    magSelEl.style.width = Math.abs(curX - magStartX) + 'px';
+    magSelEl.style.height = Math.abs(curY - magStartY) + 'px';
+  });
+
+  document.addEventListener('mouseup', e => {
+    if (!magDragging || !magCell) return;
+    magDragging = false;
+
+    const rect = magCell.getBoundingClientRect();
+    const curX = Math.max(0, Math.min(e.clientX - rect.left, rect.width));
+    const curY = Math.max(0, Math.min(e.clientY - rect.top, rect.height));
+
+    const left = Math.min(magStartX, curX);
+    const top = Math.min(magStartY, curY);
+    const w = Math.abs(curX - magStartX);
+    const h = Math.abs(curY - magStartY);
+
+    if (magSelEl) magSelEl.classList.remove('active');
+
+    if (w < 10 || h < 10) { magCell = null; return; }
+
+    const scale = Math.min(rect.width / w, rect.height / h);
+    const z = getZoom(magCell);
+    z.scale = Math.max(1, Math.min(10, scale));
+    z.ox = ((left + w / 2) / rect.width) * 100;
+    z.oy = ((top + h / 2) / rect.height) * 100;
+    applyZoom(magCell);
+
+    magCell = null;
+    // Auto-deactivate after use
+    toggleMagnifier();
+  });
+
+  // ─── Fisheye Dewarp (WebGL) ───
+
+  const dewarpState = new Map(); // keyed by channel name
+
+  function getDewarpState(chName) {
+    if (!dewarpState.has(chName)) {
+      dewarpState.set(chName, {
+        active: false,
+        canvas: null,
+        gl: null,
+        program: null,
+        texture: null,
+        animFrameId: null,
+        // View: yaw/pitch in radians, fov in radians
+        yaw: 0,
+        pitch: 0,
+        fov: Math.PI * 0.5, // 90° default FOV
+      });
+    }
+    return dewarpState.get(chName);
+  }
+
+  const DEWARP_VS = `
+    attribute vec2 aPos;
+    varying vec2 vUv;
+    void main() {
+      vUv = aPos * 0.5 + 0.5;
+      gl_Position = vec4(aPos, 0.0, 1.0);
+    }
+  `;
+
+  // Equidistant fisheye → rectilinear with pan/tilt/zoom
+  // Maps each output pixel to a direction, then finds the corresponding
+  // point on the fisheye source image.
+  const DEWARP_FS = `
+    precision highp float;
+    varying vec2 vUv;
+    uniform sampler2D uTex;
+    uniform float uYaw;    // horizontal pan (radians)
+    uniform float uPitch;  // vertical tilt (radians)
+    uniform float uFov;    // field of view (radians)
+    uniform float uAspect; // video aspect ratio (w/h)
+
+    void main() {
+      // Map UV to normalized device coords centered at 0
+      vec2 ndc = (vUv - 0.5) * 2.0;
+      ndc.x *= uAspect;
+
+      // Convert screen point to 3D ray direction (rectilinear)
+      float halfFov = uFov * 0.5;
+      float d = 1.0 / tan(halfFov);
+      vec3 ray = normalize(vec3(ndc.x, ndc.y, d));
+
+      // Rotate ray by pitch (around X axis)
+      float cp = cos(uPitch), sp = sin(uPitch);
+      ray = vec3(ray.x, cp * ray.y - sp * ray.z, sp * ray.y + cp * ray.z);
+
+      // Rotate ray by yaw (around Y axis)
+      float cy = cos(uYaw), sy = sin(uYaw);
+      ray = vec3(cy * ray.x + sy * ray.z, ray.y, -sy * ray.x + cy * ray.z);
+
+      // 3D ray → equidistant fisheye coordinates
+      // theta = angle from optical axis (Z+), phi = azimuth
+      float theta = acos(clamp(ray.z, -1.0, 1.0));
+      float phi = atan(ray.y, ray.x);
+
+      // Equidistant projection: r = theta / (pi/2) maps hemisphere to unit circle
+      // We use pi to support full 360° fisheye
+      float r = theta / 3.14159265;
+
+      // Map to texture coordinates (fisheye circle centered in frame)
+      vec2 fishUv = vec2(0.5) + r * vec2(cos(phi), sin(phi));
+
+      // Account for non-square video: fisheye circle fits the shorter dimension
+      // If video is wider than tall, squeeze x; if taller, squeeze y
+      if (uAspect > 1.0) {
+        fishUv.x = 0.5 + (fishUv.x - 0.5) / uAspect;
+      } else {
+        fishUv.y = 0.5 + (fishUv.y - 0.5) * uAspect;
+      }
+
+      // Clamp to valid range and fade edges
+      float dist = length(fishUv - 0.5) * 2.0;
+      if (fishUv.x < 0.0 || fishUv.x > 1.0 || fishUv.y < 0.0 || fishUv.y > 1.0 || dist > 1.0) {
+        gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
+        return;
+      }
+
+      // Flip Y for WebGL texture coordinates
+      fishUv.y = 1.0 - fishUv.y;
+      gl_FragColor = texture2D(uTex, fishUv);
+    }
+  `;
+
+  function compileShader(gl, type, src) {
+    const s = gl.createShader(type);
+    gl.shaderSource(s, src);
+    gl.compileShader(s);
+    if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {
+      avpLog('error', 'Shader compile error: ' + gl.getShaderInfoLog(s));
+      gl.deleteShader(s);
+      return null;
+    }
+    return s;
+  }
+
+  function initDewarpGL(cell) {
+    const canvas = document.createElement('canvas');
+    canvas.className = 'dewarp-canvas';
+    cell.appendChild(canvas);
+
+    const gl = canvas.getContext('webgl', { antialias: false, premultipliedAlpha: false });
+    if (!gl) { avpLog('error', 'WebGL not available'); return null; }
+
+    const vs = compileShader(gl, gl.VERTEX_SHADER, DEWARP_VS);
+    const fs = compileShader(gl, gl.FRAGMENT_SHADER, DEWARP_FS);
+    const prog = gl.createProgram();
+    gl.attachShader(prog, vs);
+    gl.attachShader(prog, fs);
+    gl.linkProgram(prog);
+    if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
+      avpLog('error', 'Program link error: ' + gl.getProgramInfoLog(prog));
+      return null;
+    }
+    gl.useProgram(prog);
+
+    // Full-screen quad
+    const buf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1,1, 1,1]), gl.STATIC_DRAW);
+    const aPos = gl.getAttribLocation(prog, 'aPos');
+    gl.enableVertexAttribArray(aPos);
+    gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);
+
+    // Texture
+    const tex = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, tex);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+
+    return { canvas, gl, program: prog, texture: tex };
+  }
+
+  function renderDewarpFrame(chName) {
+    const ds = dewarpState.get(chName);
+    if (!ds || !ds.active) return;
+
+    const ch = channels.get(chName);
+    if (!ch || !ch.cellEl) return;
+
+    const video = ch.cellEl.querySelector('video:not(.hidden-video)');
+    if (!video || video.readyState < 2) {
+      ds.animFrameId = requestAnimationFrame(() => renderDewarpFrame(chName));
+      return;
+    }
+
+    const { canvas, gl, program, texture } = ds;
+
+    // Resize canvas to match cell
+    const rect = ch.cellEl.getBoundingClientRect();
+    const dpr = window.devicePixelRatio || 1;
+    const w = Math.round(rect.width * dpr);
+    const h = Math.round(rect.height * dpr);
+    if (canvas.width !== w || canvas.height !== h) {
+      canvas.width = w;
+      canvas.height = h;
+      gl.viewport(0, 0, w, h);
+    }
+
+    // Upload video frame
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, video);
+
+    // Set uniforms
+    gl.useProgram(program);
+    gl.uniform1f(gl.getUniformLocation(program, 'uYaw'), ds.yaw);
+    gl.uniform1f(gl.getUniformLocation(program, 'uPitch'), ds.pitch);
+    gl.uniform1f(gl.getUniformLocation(program, 'uFov'), ds.fov);
+
+    const videoAspect = video.videoWidth / (video.videoHeight || 1);
+    gl.uniform1f(gl.getUniformLocation(program, 'uAspect'), videoAspect);
+
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+
+    ds.animFrameId = requestAnimationFrame(() => renderDewarpFrame(chName));
+  }
+
+  function toggleDewarp(cell, chName) {
+    const ds = getDewarpState(chName);
+    ds.active = !ds.active;
+
+    const btn = cell.querySelector('.dewarp-btn');
+    if (btn) btn.classList.toggle('active', ds.active);
+
+    if (ds.active) {
+      // Initialize WebGL if needed
+      if (!ds.gl) {
+        const init = initDewarpGL(cell);
+        if (!init) { ds.active = false; btn?.classList.remove('active'); return; }
+        Object.assign(ds, init);
+      }
+      ds.canvas.classList.add('active');
+      cell.classList.add('dewarped');
+      // Reset normal CSS zoom — dewarp has its own zoom
+      resetZoom(cell);
+      // Start render loop
+      renderDewarpFrame(chName);
+    } else {
+      // Stop render loop
+      if (ds.animFrameId) { cancelAnimationFrame(ds.animFrameId); ds.animFrameId = null; }
+      if (ds.canvas) ds.canvas.classList.remove('active');
+      cell.classList.remove('dewarped');
+      // Reset dewarp view
+      ds.yaw = 0;
+      ds.pitch = 0;
+      ds.fov = Math.PI * 0.5;
+    }
+  }
+
+  // ─── Dewarp zoom (scroll wheel) and pan (click+drag) ───
+  let dewarpPanCell = null;
+  let dewarpPanStartX = 0, dewarpPanStartY = 0;
+  let dewarpPanStartYaw = 0, dewarpPanStartPitch = 0;
+
+  function getDewarpForCell(cell) {
+    const chName = findChForCell(cell);
+    return chName ? dewarpState.get(chName) : null;
+  }
+
+  // ─── Camera Reorder (drag & drop) ───
+
+  let dragSrcCell = null;
+  let dragSrcChName = null;
+
+  function findChForCell(cell) {
+    for (const ch of channels.values()) {
+      if (ch.cellEl === cell) return ch.name;
+    }
+    return null;
+  }
+
+  function setupDragHandle(cell) {
+    const handle = document.createElement('div');
+    handle.className = 'drag-handle';
+    handle.setAttribute('draggable', 'true');
+    handle.innerHTML = '<svg viewBox="0 0 24 24"><path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg> move';
+    handle.title = 'Drag to reorder';
+
+    handle.addEventListener('dragstart', e => {
+      dragSrcCell = cell;
+      dragSrcChName = findChForCell(cell);
+      cell.classList.add('drag-source');
+      e.dataTransfer.effectAllowed = 'move';
+      e.dataTransfer.setData('text/plain', '');
+    });
+
+    handle.addEventListener('dragend', () => {
+      cell.classList.remove('drag-source');
+      document.querySelectorAll('.cam-cell.drag-over').forEach(c => c.classList.remove('drag-over'));
+      dragSrcCell = null;
+      dragSrcChName = null;
+    });
+
+    cell.addEventListener('dragover', e => {
+      if (!dragSrcCell || dragSrcCell === cell) return;
+      e.preventDefault();
+      e.dataTransfer.dropEffect = 'move';
+      cell.classList.add('drag-over');
+    });
+
+    cell.addEventListener('dragleave', () => {
+      cell.classList.remove('drag-over');
+    });
+
+    cell.addEventListener('drop', e => {
+      e.preventDefault();
+      cell.classList.remove('drag-over');
+      if (!dragSrcCell || dragSrcCell === cell) return;
+
+      const targetChName = findChForCell(cell);
+      if (!dragSrcChName || !targetChName) return;
+
+      // Swap the two channels' positions in the Map and DOM
+      swapChannels(dragSrcChName, targetChName);
+    });
+
+    cell.appendChild(handle);
+  }
+
+  function swapChannels(nameA, nameB) {
+    const chA = channels.get(nameA);
+    const chB = channels.get(nameB);
+    if (!chA || !chB) return;
+
+    const cellA = chA.cellEl;
+    const cellB = chB.cellEl;
+
+    // Swap DOM positions
+    const placeholder = document.createElement('div');
+    cameraGrid.insertBefore(placeholder, cellA);
+    cameraGrid.insertBefore(cellA, cellB);
+    cameraGrid.insertBefore(cellB, placeholder);
+    placeholder.remove();
+
+    // Rebuild channel Map to preserve new order
+    const entries = [...channels.entries()];
+    const idxA = entries.findIndex(([n]) => n === nameA);
+    const idxB = entries.findIndex(([n]) => n === nameB);
+    [entries[idxA], entries[idxB]] = [entries[idxB], entries[idxA]];
+
+    channels.clear();
+    for (const [n, ch] of entries) channels.set(n, ch);
+
+    // Update colors to match new positions
+    let i = 0;
+    for (const ch of channels.values()) {
+      ch.color = CAM_COLORS[i % CAM_COLORS.length];
+      ch.cellEl.style.setProperty('--cam-color', ch.color);
+      const dot = ch.cellEl.querySelector('.cam-dot');
+      if (dot) dot.style.background = ch.color;
+      i++;
+    }
+
+    renderTimeline();
+  }
+
+  // ─── Slideshow Mode ───
+
+  const btnSlideshow = document.getElementById('btnSlideshow');
+  const slideshowContainer = document.getElementById('slideshowContainer');
+  const slideshowStage = document.getElementById('slideshowStage');
+  let slideshowActive = false;
+  let ssActiveList = [];     // current list of active cameras
+  let ssIndex = 0;           // which camera in ssActiveList we're showing
+  let ssCurrentName = '';     // name of currently displayed camera (for change detection)
+  let ssRotateTimer = null;   // auto-advance timer
+  const SS_ROTATE_INTERVAL = 5000; // ms between auto-advances
+
+  function toggleSlideshow() {
+    slideshowActive = !slideshowActive;
+    btnSlideshow.classList.toggle('active', slideshowActive);
+    playerArea.classList.toggle('slideshow-mode', slideshowActive);
+    slideshowContainer.classList.toggle('active', slideshowActive);
+
+    if (slideshowActive) {
+      ssIndex = 0;
+      ssCurrentName = '';
+      updateSlideshow();
+      startSsRotation();
+    } else {
+      stopSsRotation();
+      // Destroy slideshow video elements before clearing
+      slideshowStage.querySelectorAll('video').forEach(v => destroyVideoEl(v));
+      slideshowStage.innerHTML = '';
+      ssActiveList = [];
+      ssCurrentName = '';
+    }
+  }
+
+  function startSsRotation() {
+    stopSsRotation();
+    ssRotateTimer = setInterval(() => {
+      if (!slideshowActive || ssActiveList.length <= 1) return;
+      ssIndex = (ssIndex + 1) % ssActiveList.length;
+      ssCurrentName = '';  // force rebuild
+      updateSlideshow();
+    }, SS_ROTATE_INTERVAL);
+  }
+
+  function stopSsRotation() {
+    if (ssRotateTimer) { clearInterval(ssRotateTimer); ssRotateTimer = null; }
+  }
+
+  btnSlideshow.addEventListener('click', e => {
+    e.stopPropagation();
+    toggleSlideshow();
+  });
+
+  function getActiveCamerasAtTime(absTime) {
+    const active = [];
+    for (const ch of channels.values()) {
+      const idx = findActiveSegment(ch, absTime);
+      if (idx >= 0) {
+        active.push({ ch, segIdx: idx, seg: ch.segments[idx] });
+      }
+    }
+    return active;
+  }
+
+  function updateSlideshow() {
+    if (!slideshowActive) return;
+
+    const absTime = globalStart + currentTime;
+    const active = getActiveCamerasAtTime(absTime);
+    ssActiveList = active;
+
+    if (active.length === 0) {
+      // No active feeds — show placeholder if not already showing
+      if (ssCurrentName !== '__none__') {
+        ssCurrentName = '__none__';
+        transitionSsPane(null, 0, 0);
+      }
+      return;
+    }
+
+    // Keep index in bounds
+    if (ssIndex >= active.length) ssIndex = 0;
+
+    // If the camera we were showing is still active, stay on it
+    if (ssCurrentName) {
+      const stillIdx = active.findIndex(a => a.ch.name === ssCurrentName);
+      if (stillIdx >= 0) {
+        ssIndex = stillIdx;
+      } else {
+        // Current camera went inactive — jump to next available
+        if (ssIndex >= active.length) ssIndex = 0;
+      }
+    }
+
+    const current = active[ssIndex];
+    const showingName = current.ch.name + ':' + current.segIdx;
+
+    if (showingName !== ssCurrentName) {
+      // Camera changed — animate transition
+      ssCurrentName = showingName;
+      transitionSsPane(current, active.length, absTime);
+    } else {
+      // Same camera — just sync video time
+      syncSsVideo(absTime);
+    }
+  }
+
+  function transitionSsPane(activeCam, totalActive, absTime) {
+    // Animate out old pane and destroy its video elements
+    const oldPanes = slideshowStage.querySelectorAll('.ss-pane');
+    for (const p of oldPanes) {
+      p.classList.add('ss-exit');
+    }
+    setTimeout(() => {
+      for (const p of oldPanes) {
+        p.querySelectorAll('video').forEach(v => destroyVideoEl(v));
+        p.remove();
+      }
+    }, 300);
+
+    // Build new pane
+    const pane = document.createElement('div');
+    pane.className = 'ss-pane';
+
+    if (!activeCam) {
+      pane.innerHTML = '<div style="display:flex;align-items:center;justify-content:center;height:100%;color:#555;font-size:14px;letter-spacing:2px;text-transform:uppercase;">No Active Feeds</div>';
+      slideshowStage.appendChild(pane);
+      return;
+    }
+
+    const video = document.createElement('video');
+    video.src = activeCam.seg.url;
+    video.muted = true;
+    video.playsInline = true;
+    video.preload = 'metadata';
+
+    const localTime = absTime - activeCam.seg.startTime;
+    video.currentTime = Math.max(0, localTime);
+    video.playbackRate = SPEEDS[currentSpeedIdx];
+    if (isPlaying) video.play();
+
+    pane.appendChild(video);
+
+    // Camera label
+    const label = document.createElement('div');
+    label.className = 'ss-label';
+    const dot = document.createElement('span');
+    dot.className = 'cam-dot';
+    dot.style.background = activeCam.ch.color;
+    const nameSpan = document.createElement('span');
+    nameSpan.textContent = activeCam.ch.name;
+    label.appendChild(dot);
+    label.appendChild(nameSpan);
+    pane.appendChild(label);
+
+    // Counter (e.g. "2 / 5")
+    if (totalActive > 1) {
+      const counter = document.createElement('div');
+      counter.className = 'ss-counter';
+      counter.textContent = `${ssIndex + 1} / ${totalActive}`;
+      pane.appendChild(counter);
+    }
+
+    pane._ssVideo = video;
+    pane._ssSeg = activeCam.seg;
+    pane._ssCh = activeCam.ch;
+
+    slideshowStage.appendChild(pane);
+
+    // Reset rotation timer on manual or auto transitions
+    startSsRotation();
+  }
+
+  function syncSsVideo(absTime) {
+    const pane = slideshowStage.querySelector('.ss-pane:not(.ss-exit)');
+    if (!pane || !pane._ssVideo || !pane._ssSeg) return;
+    const localTime = absTime - pane._ssSeg.startTime;
+    const drift = Math.abs(pane._ssVideo.currentTime - localTime);
+    if (drift > 0.5) {
+      pane._ssVideo.currentTime = Math.max(0, localTime);
+    }
+    pane._ssVideo.playbackRate = SPEEDS[currentSpeedIdx];
+  }
+
+  // Sync slideshow play/pause state
+  const origPlay = play;
+  play = function() {
+    origPlay();
+    if (slideshowActive) {
+      const v = slideshowStage.querySelector('.ss-pane:not(.ss-exit) video');
+      if (v) { v.playbackRate = SPEEDS[currentSpeedIdx]; v.play(); }
+    }
+  };
+
+  const origPause = pause;
+  pause = function() {
+    origPause();
+    if (slideshowActive) {
+      const v = slideshowStage.querySelector('.ss-pane:not(.ss-exit) video');
+      if (v) v.pause();
+    }
+  };
+
+  // ─── AES-256 for Encrypted ZIPs ───
+
+  // AES S-box
+  const SB = new Uint8Array([
+    0x63,0x7c,0x77,0x7b,0xf2,0x6b,0x6f,0xc5,0x30,0x01,0x67,0x2b,0xfe,0xd7,0xab,0x76,
+    0xca,0x82,0xc9,0x7d,0xfa,0x59,0x47,0xf0,0xad,0xd4,0xa2,0xaf,0x9c,0xa4,0x72,0xc0,
+    0xb7,0xfd,0x93,0x26,0x36,0x3f,0xf7,0xcc,0x34,0xa5,0xe5,0xf1,0x71,0xd8,0x31,0x15,
+    0x04,0xc7,0x23,0xc3,0x18,0x96,0x05,0x9a,0x07,0x12,0x80,0xe2,0xeb,0x27,0xb2,0x75,
+    0x09,0x83,0x2c,0x1a,0x1b,0x6e,0x5a,0xa0,0x52,0x3b,0xd6,0xb3,0x29,0xe3,0x2f,0x84,
+    0x53,0xd1,0x00,0xed,0x20,0xfc,0xb1,0x5b,0x6a,0xcb,0xbe,0x39,0x4a,0x4c,0x58,0xcf,
+    0xd0,0xef,0xaa,0xfb,0x43,0x4d,0x33,0x85,0x45,0xf9,0x02,0x7f,0x50,0x3c,0x9f,0xa8,
+    0x51,0xa3,0x40,0x8f,0x92,0x9d,0x38,0xf5,0xbc,0xb6,0xda,0x21,0x10,0xff,0xf3,0xd2,
+    0xcd,0x0c,0x13,0xec,0x5f,0x97,0x44,0x17,0xc4,0xa7,0x7e,0x3d,0x64,0x5d,0x19,0x73,
+    0x60,0x81,0x4f,0xdc,0x22,0x2a,0x90,0x88,0x46,0xee,0xb8,0x14,0xde,0x5e,0x0b,0xdb,
+    0xe0,0x32,0x3a,0x0a,0x49,0x06,0x24,0x5c,0xc2,0xd3,0xac,0x62,0x91,0x95,0xe4,0x79,
+    0xe7,0xc8,0x37,0x6d,0x8d,0xd5,0x4e,0xa9,0x6c,0x56,0xf4,0xea,0x65,0x7a,0xae,0x08,
+    0xba,0x78,0x25,0x2e,0x1c,0xa6,0xb4,0xc6,0xe8,0xdd,0x74,0x1f,0x4b,0xbd,0x8b,0x8a,
+    0x70,0x3e,0xb5,0x66,0x48,0x03,0xf6,0x0e,0x61,0x35,0x57,0xb9,0x86,0xc1,0x1d,0x9e,
+    0xe1,0xf8,0x98,0x11,0x69,0xd9,0x8e,0x94,0x9b,0x1e,0x87,0xe9,0xce,0x55,0x28,0xdf,
+    0x8c,0xa1,0x89,0x0d,0xbf,0xe6,0x42,0x68,0x41,0x99,0x2d,0x0f,0xb0,0x54,0xbb,0x16
+  ]);
+  const RCON = [0x01,0x02,0x04,0x08,0x10,0x20,0x40,0x80,0x1b,0x36];
+
+  // Generate T-tables for fast AES rounds
+  const T0=new Uint32Array(256),T1=new Uint32Array(256),T2=new Uint32Array(256),T3=new Uint32Array(256);
+  (function(){
+    function xt(a){return((a<<1)^((a>>7)*0x1b))&0xff;}
+    for(let i=0;i<256;i++){
+      const s=SB[i],x=xt(s),x3=x^s;
+      T0[i]=(x<<24|s<<16|s<<8|x3)>>>0;
+      T1[i]=(x3<<24|x<<16|s<<8|s)>>>0;
+      T2[i]=(s<<24|x3<<16|x<<8|s)>>>0;
+      T3[i]=(s<<24|s<<16|x3<<8|x)>>>0;
+    }
+  })();
+
+  function aesExpandKey(key){
+    const rk=new Uint32Array(60);
+    for(let i=0;i<8;i++) rk[i]=(key[4*i]<<24|key[4*i+1]<<16|key[4*i+2]<<8|key[4*i+3])>>>0;
+    for(let i=8;i<60;i++){
+      let t=rk[i-1];
+      if(i%8===0){
+        t=(SB[(t>>16)&0xff]<<24|SB[(t>>8)&0xff]<<16|SB[t&0xff]<<8|SB[t>>>24])>>>0;
+        t=(t^(RCON[i/8-1]<<24))>>>0;
+      }else if(i%8===4){
+        t=(SB[t>>>24]<<24|SB[(t>>16)&0xff]<<16|SB[(t>>8)&0xff]<<8|SB[t&0xff])>>>0;
+      }
+      rk[i]=(rk[i-8]^t)>>>0;
+    }
+    return rk;
+  }
+
+  function aesEncBlock(b,rk){
+    let s0=(b[0]<<24|b[1]<<16|b[2]<<8|b[3])^rk[0],
+        s1=(b[4]<<24|b[5]<<16|b[6]<<8|b[7])^rk[1],
+        s2=(b[8]<<24|b[9]<<16|b[10]<<8|b[11])^rk[2],
+        s3=(b[12]<<24|b[13]<<16|b[14]<<8|b[15])^rk[3];
+    for(let r=1;r<14;r++){
+      const t0=T0[s0>>>24]^T1[(s1>>16)&0xff]^T2[(s2>>8)&0xff]^T3[s3&0xff]^rk[4*r],
+            t1=T0[s1>>>24]^T1[(s2>>16)&0xff]^T2[(s3>>8)&0xff]^T3[s0&0xff]^rk[4*r+1],
+            t2=T0[s2>>>24]^T1[(s3>>16)&0xff]^T2[(s0>>8)&0xff]^T3[s1&0xff]^rk[4*r+2],
+            t3=T0[s3>>>24]^T1[(s0>>16)&0xff]^T2[(s1>>8)&0xff]^T3[s2&0xff]^rk[4*r+3];
+      s0=t0>>>0;s1=t1>>>0;s2=t2>>>0;s3=t3>>>0;
+    }
+    const o=new Uint8Array(16),k=56;
+    o[0]=SB[s0>>>24]^(rk[k]>>>24);     o[1]=SB[(s1>>16)&0xff]^((rk[k]>>16)&0xff);
+    o[2]=SB[(s2>>8)&0xff]^((rk[k]>>8)&0xff); o[3]=SB[s3&0xff]^(rk[k]&0xff);
+    o[4]=SB[s1>>>24]^(rk[k+1]>>>24);   o[5]=SB[(s2>>16)&0xff]^((rk[k+1]>>16)&0xff);
+    o[6]=SB[(s3>>8)&0xff]^((rk[k+1]>>8)&0xff); o[7]=SB[s0&0xff]^(rk[k+1]&0xff);
+    o[8]=SB[s2>>>24]^(rk[k+2]>>>24);   o[9]=SB[(s3>>16)&0xff]^((rk[k+2]>>16)&0xff);
+    o[10]=SB[(s0>>8)&0xff]^((rk[k+2]>>8)&0xff); o[11]=SB[s1&0xff]^(rk[k+2]&0xff);
+    o[12]=SB[s3>>>24]^(rk[k+3]>>>24);  o[13]=SB[(s0>>16)&0xff]^((rk[k+3]>>16)&0xff);
+    o[14]=SB[(s1>>8)&0xff]^((rk[k+3]>>8)&0xff); o[15]=SB[s2&0xff]^(rk[k+3]&0xff);
+    return o;
+  }
+
+  // AES-CTR decryption with little-endian counter (WinZip AES format)
+  function aesCtrDecrypt(encKey, data) {
+    const rk = aesExpandKey(encKey);
+    const out = new Uint8Array(data.length);
+    const ctr = new Uint8Array(16);
+    ctr[0] = 1; // WinZip starts at 1
+    for (let off = 0; off < data.length; off += 16) {
+      const ks = aesEncBlock(ctr, rk);
+      const len = Math.min(16, data.length - off);
+      for (let j = 0; j < len; j++) out[off + j] = data[off + j] ^ ks[j];
+      // Increment LE counter (read stored value after increment to handle Uint8Array wrapping)
+      for (let j = 0; j < 16; j++) { ctr[j] = (ctr[j] + 1) & 0xff; if (ctr[j] !== 0) break; }
+    }
+    return out;
+  }
+
+  // ─── ZIP Encrypted Entry Parser ───
+
+  function readU16(buf, off) { return buf[off] | (buf[off+1] << 8); }
+  function readU32(buf, off) { return (buf[off] | (buf[off+1]<<8) | (buf[off+2]<<16) | (buf[off+3]<<24)) >>> 0; }
+
+  function isZipEncrypted(buf) {
+    const d = new Uint8Array(buf);
+    // Check first local file header
+    if (d.length < 30) return false;
+    if (readU32(d, 0) !== 0x04034b50) return false;
+    const flags = readU16(d, 6);
+    return (flags & 1) !== 0;
+  }
+
+  // Parse ZIP and extract encrypted entries
+  function parseEncryptedZip(buf) {
+    const d = new Uint8Array(buf);
+    const entries = [];
+
+    // Find End of Central Directory
+    let eocdOff = -1;
+    for (let i = d.length - 22; i >= 0; i--) {
+      if (readU32(d, i) === 0x06054b50) { eocdOff = i; break; }
+    }
+    if (eocdOff === -1) return entries;
+
+    const cdOffset = readU32(d, eocdOff + 16);
+    const cdEntries = readU16(d, eocdOff + 10);
+
+    // Parse central directory
+    let pos = cdOffset;
+    for (let e = 0; e < cdEntries; e++) {
+      if (readU32(d, pos) !== 0x02014b50) break;
+      const flags = readU16(d, pos + 8);
+      const method = readU16(d, pos + 10);
+      const compSize = readU32(d, pos + 20);
+      const uncompSize = readU32(d, pos + 24);
+      const nameLen = readU16(d, pos + 28);
+      const extraLen = readU16(d, pos + 30);
+      const commentLen = readU16(d, pos + 32);
+      const localOff = readU32(d, pos + 42);
+      const name = new TextDecoder().decode(d.slice(pos + 46, pos + 46 + nameLen));
+
+      // Parse AES extra field from central directory extra
+      let aesStrength = 0, actualMethod = 0;
+      if (method === 99) {
+        const extraData = d.slice(pos + 46 + nameLen, pos + 46 + nameLen + extraLen);
+        for (let x = 0; x < extraData.length - 4;) {
+          const hid = readU16(extraData, x);
+          const hlen = readU16(extraData, x + 2);
+          if (hid === 0x9901 && hlen >= 7) {
+            aesStrength = extraData[x + 8]; // 1=128,2=192,3=256
+            actualMethod = readU16(extraData, x + 9);
+          }
+          x += 4 + hlen;
+        }
+      }
+
+      if ((flags & 1) && method === 99 && aesStrength > 0) {
+        // Find data offset from local file header
+        const lNameLen = readU16(d, localOff + 26);
+        const lExtraLen = readU16(d, localOff + 28);
+        const dataOff = localOff + 30 + lNameLen + lExtraLen;
+
+        const saltSize = [0, 8, 12, 16][aesStrength];
+        const salt = d.slice(dataOff, dataOff + saltSize);
+        const pwVerify = d.slice(dataOff + saltSize, dataOff + saltSize + 2);
+        const authCode = d.slice(dataOff + compSize - 10, dataOff + compSize);
+        const encData = d.slice(dataOff + saltSize + 2, dataOff + compSize - 10);
+
+        entries.push({
+          name, compSize, uncompSize, aesStrength, actualMethod,
+          salt, pwVerify, authCode, encData,
+          isDir: name.endsWith('/'),
+        });
+      }
+
+      pos += 46 + nameLen + extraLen + commentLen;
+    }
+    return entries;
+  }
+
+  async function deriveAesKey(password, salt, strength) {
+    const keyLen = [0, 16, 24, 32][strength];
+    const derivedLen = keyLen * 2 + 2; // encKey + hmacKey + verification
+    const enc = new TextEncoder();
+    const keyMaterial = await crypto.subtle.importKey('raw', enc.encode(password), 'PBKDF2', false, ['deriveBits']);
+    const bits = await crypto.subtle.deriveBits(
+      { name: 'PBKDF2', salt, iterations: 1000, hash: 'SHA-1' },
+      keyMaterial, derivedLen * 8
+    );
+    const derived = new Uint8Array(bits);
+    return {
+      encKey: derived.slice(0, keyLen),
+      hmacKey: derived.slice(keyLen, keyLen * 2),
+      verify: derived.slice(keyLen * 2, keyLen * 2 + 2),
+    };
+  }
+
+  async function inflateData(data) {
+    try {
+      const ds = new DecompressionStream('deflate-raw');
+      const writer = ds.writable.getWriter();
+      writer.write(data);
+      writer.close();
+      const reader = ds.readable.getReader();
+      const chunks = [];
+      let total = 0;
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        chunks.push(value);
+        total += value.length;
+      }
+      const out = new Uint8Array(total);
+      let off = 0;
+      for (const c of chunks) { out.set(c, off); off += c.length; }
+      return out;
+    } catch {
+      return data; // fallback: return as-is
+    }
+  }
+
+  async function decryptZipEntries(buf, password) {
+    const entries = parseEncryptedZip(buf);
+    if (entries.length === 0) throw new Error('No encrypted entries found');
+
+    // Verify password with first entry
+    const first = entries[0];
+    const keys = await deriveAesKey(password, first.salt, first.aesStrength);
+    if (keys.verify[0] !== first.pwVerify[0] || keys.verify[1] !== first.pwVerify[1]) {
+      throw new Error('wrong_password');
+    }
+
+    const decrypted = [];
+    for (let i = 0; i < entries.length; i++) {
+      const entry = entries[i];
+      if (entry.isDir) continue;
+
+      loadingDetail.textContent = `Decrypting ${i + 1}/${entries.length}: ${entry.name.split('/').pop()}`;
+
+      const ek = (i === 0) ? keys : await deriveAesKey(password, entry.salt, entry.aesStrength);
+      let data = aesCtrDecrypt(ek.encKey, entry.encData);
+
+      // Decompress if needed
+      if (entry.actualMethod === 8) {
+        data = await inflateData(data);
+      }
+
+      decrypted.push({ name: entry.name, data });
+    }
+    return decrypted;
+  }
+
+  // ─── Password Prompt ───
+
+  function promptPassword(errorMsg) {
+    return new Promise((resolve, reject) => {
+      const overlay = document.getElementById('passwordModal');
+      const input = document.getElementById('pwInput');
+      const errorEl = document.getElementById('pwError');
+      const submitBtn = document.getElementById('pwSubmit');
+      const cancelBtn = document.getElementById('pwCancel');
+
+      overlay.classList.remove('hidden');
+      input.value = '';
+      errorEl.textContent = errorMsg || '';
+      input.focus();
+
+      function cleanup() {
+        overlay.classList.add('hidden');
+        submitBtn.removeEventListener('click', onSubmit);
+        cancelBtn.removeEventListener('click', onCancel);
+        input.removeEventListener('keydown', onKey);
+      }
+      function onSubmit() {
+        const pw = input.value;
+        if (!pw) { errorEl.textContent = 'Please enter a password'; return; }
+        cleanup();
+        resolve(pw);
+      }
+      function onCancel() { cleanup(); reject(new Error('cancelled')); }
+      function onKey(e) { if (e.key === 'Enter') onSubmit(); else if (e.key === 'Escape') onCancel(); }
+
+      submitBtn.addEventListener('click', onSubmit);
+      cancelBtn.addEventListener('click', onCancel);
+      input.addEventListener('keydown', onKey);
+    });
+  }
+
+  // ─── File Handling ───
+
+  const zipFileDataForVerify = new Map();
+  let lastZipPassword = null; // cached password for multi-ZIP uploads
+
+  async function processDecryptedEntries(decrypted, zipName) {
+    // Process SIGN files first so signatures are available
+    let zipCertPem = null, zipCertBytes = null;
+    const zipSigs = new Map();
+    for (const entry of decrypted) {
+      const name = entry.name.split('/').pop();
+      if (!entry.name.includes('SIGN/')) continue;
+      if (name === 'certificate.pem') {
+        zipCertBytes = entry.data;
+        zipCertPem = new TextDecoder().decode(entry.data);
+      } else if (/\.sig$/i.test(name)) {
+        const origName = name.replace(/\.sig$/i, '');
+        zipSigs.set(origName, entry.data);
+      }
+    }
+    // Register this ZIP's certificate and signatures
+    if (zipCertPem && zipSigs.size > 0) {
+      const certId = zipCertPem;
+      if (!signCerts.has(certId)) {
+        signCerts.set(certId, { pem: zipCertPem, bytes: zipCertBytes, signatures: new Map() });
+      }
+      const cert = signCerts.get(certId);
+      for (const [fn, sig] of zipSigs) cert.signatures.set(fn, sig);
+      avpLog('info', `Found certificate with ${zipSigs.size} signature(s) in ${zipName}`);
+    }
+    // Process metadata and videos
+    for (const entry of decrypted) {
+      const name = entry.name.split('/').pop();
+      if (entry.name.includes('SIGN/')) continue;
+      if (/\.txt$/i.test(name)) {
+        loadingDetail.textContent = `Reading ${name}`;
+        const text = new TextDecoder().decode(entry.data);
+        pendingMetas.push({ fileName: name, meta: parseMeta(text) });
+        zipFileDataForVerify.set(name, entry.data);
+      } else if (/\.(mp4|mov|avi|mkv)$/i.test(name)) {
+        loadingDetail.textContent = `Processing ${name}`;
+        if (zipSigs.has(name)) {
+          zipFileDataForVerify.set(name, entry.data);
+        }
+        pendingVideos.push({ fileName: name, blob: new Blob([entry.data]) });
+      }
+    }
+  }
+
+  async function processZip(zipBlob, zipName) {
+    avpLog('info', 'Processing ZIP: ' + zipName);
+    showLoading('Extracting ZIP...', zipName);
+    try {
+      const buf = await zipBlob.arrayBuffer();
+
+      // Check if ZIP is encrypted (AES)
+      if (isZipEncrypted(buf)) {
+        let password;
+        let pwError = null;
+
+        // Try cached password first
+        if (lastZipPassword) {
+          try {
+            showLoading('Decrypting ZIP...', zipName);
+            const decrypted = await decryptZipEntries(buf, lastZipPassword);
+            password = lastZipPassword;
+            avpLog('success', 'ZIP decrypted with cached password: ' + zipName);
+            await processDecryptedEntries(decrypted, zipName);
+            return;
+          } catch (err) {
+            if (err.message === 'wrong_password') {
+              avpLog('info', 'Cached password did not work for: ' + zipName);
+              // Fall through to manual prompt
+            } else {
+              throw err;
+            }
+          }
+        }
+
+        while (true) {
+          try {
+            password = await promptPassword(pwError);
+          } catch {
+            // User cancelled
+            return;
+          }
+          try {
+            showLoading('Decrypting ZIP...', zipName);
+            const decrypted = await decryptZipEntries(buf, password);
+            lastZipPassword = password;
+            avpLog('success', 'ZIP decrypted successfully: ' + zipName);
+            await processDecryptedEntries(decrypted, zipName);
+            break; // success
+          } catch (err) {
+            if (err.message === 'wrong_password') {
+              avpLog('warn', 'Wrong password for ZIP: ' + zipName);
+              pwError = 'Wrong password, please try again.';
+              continue; // re-prompt
+            }
+            throw err;
+          }
+        }
+        return;
+      }
+
+      // Not encrypted — use JSZip
+      const zip = await JSZip.loadAsync(buf);
+      const entries = Object.entries(zip.files).filter(([, f]) => !f.dir);
+
+      const txts = [];
+      const videos = [];
+      const signFiles = [];
+      for (const [path, file] of entries) {
+        const name = path.split('/').pop();
+        if (path.includes('SIGN/')) {
+          signFiles.push({ path, name, file });
+        } else if (/\.txt$/i.test(name)) {
+          txts.push({ path, name, file });
+        } else if (/\.(mp4|mov|avi|mkv)$/i.test(name)) {
+          videos.push({ path, name, file });
+        }
+      }
+
+      // Extract SIGN/ files
+      let zipCertPem = null, zipCertBytes = null;
+      const zipSigs = new Map();
+      for (const sf of signFiles) {
+        if (sf.name === 'certificate.pem') {
+          const bytes = await sf.file.async('uint8array');
+          zipCertBytes = bytes;
+          zipCertPem = new TextDecoder().decode(bytes);
+        } else if (/\.sig$/i.test(sf.name)) {
+          const origName = sf.name.replace(/\.sig$/i, '');
+          zipSigs.set(origName, await sf.file.async('uint8array'));
+        }
+      }
+      // Register this ZIP's certificate and signatures
+      if (zipCertPem && zipSigs.size > 0) {
+        const certId = zipCertPem;
+        if (!signCerts.has(certId)) {
+          signCerts.set(certId, { pem: zipCertPem, bytes: zipCertBytes, signatures: new Map() });
+        }
+        const cert = signCerts.get(certId);
+        for (const [fn, sig] of zipSigs) cert.signatures.set(fn, sig);
+        avpLog('info', `Found certificate with ${zipSigs.size} signature(s) in ${zipName}`);
+      }
+
+      // Read metadata
+      for (const t of txts) {
+        loadingDetail.textContent = `Reading ${t.name}`;
+        const text = await t.file.async('text');
+        pendingMetas.push({ fileName: t.name, meta: parseMeta(text) });
+        zipFileDataForVerify.set(t.name, new TextEncoder().encode(text));
+      }
+
+      // Extract videos — extract as uint8array once if signature exists, otherwise as blob
+      for (let i = 0; i < videos.length; i++) {
+        const v = videos[i];
+        loadingDetail.textContent = `Extracting video ${i + 1}/${videos.length}: ${v.name}`;
+
+        if (zipSigs.has(v.name)) {
+          const raw = await v.file.async('uint8array');
+          zipFileDataForVerify.set(v.name, raw);
+          pendingVideos.push({ fileName: v.name, blob: new Blob([raw]) });
+        } else {
+          pendingVideos.push({ fileName: v.name, blob: await v.file.async('blob') });
+        }
+      }
+    } catch (err) {
+      avpLog('error', 'ZIP extraction error: ' + err.message);
+    }
+  }
+
+  async function handleFiles(fileList) {
+    if (isImporting) {
+      avpLog('warn', 'Import already in progress — please wait');
+      return;
+    }
+    isImporting = true;
+
+    try {
+      const files = Array.from(fileList);
+      const zips = files.filter(f => /\.zip$/i.test(f.name));
+      const txts = files.filter(f => /\.txt$/i.test(f.name));
+      const vids = files.filter(f => /\.(mp4|mov|avi|mkv)$/i.test(f.name));
+
+      avpLog('info', `Received ${files.length} file(s): ${zips.length} ZIP, ${vids.length} video, ${txts.length} metadata`);
+
+      if (zips.length > 0) {
+        showLoading('Processing ZIP files...', `${zips.length} archive(s)`);
+      }
+
+      for (let i = 0; i < zips.length; i++) {
+        await processZip(zips[i], `${i + 1}/${zips.length}: ${zips[i].name}`);
+      }
+
+      for (const f of txts) {
+        const text = await f.text();
+        pendingMetas.push({ fileName: f.name, meta: parseMeta(text) });
+        avpLog('info', 'Loaded metadata: ' + f.name);
+      }
+
+      for (const f of vids) {
+        pendingVideos.push({ fileName: f.name, blob: f });
+        avpLog('info', 'Loaded video: ' + f.name);
+      }
+
+      flushPending();
+      hideLoading();
+
+      if (signCerts.size > 0) {
+        runVerification();
+      }
+
+      // Cache session for refresh persistence
+      saveSessionData();
+    } catch (err) {
+      avpLog('error', 'File import error: ' + err.message);
+      hideLoading();
+    } finally {
+      isImporting = false;
+    }
+  }
+
+  // ─── New Session ───
+
+  // Properly destroy a video element to release memory
+  function destroyVideoEl(videoEl) {
+    if (!videoEl) return;
+    videoEl.pause();
+    videoEl.removeAttribute('src');
+    videoEl.load(); // forces browser to release buffered data
+  }
+
+  // Guard against concurrent imports
+  let isImporting = false;
+
+  function newSession() {
+    avpLog('info', 'New session started');
+    // Clear cached session
+    clearSessionDB();
+
+    // Stop playback
+    if (isPlaying) pause();
+    if (animFrame) { cancelAnimationFrame(animFrame); animFrame = null; }
+
+    // Stop any running/pending motion scan
+    if (autoScanTimer) { clearTimeout(autoScanTimer); autoScanTimer = null; }
+    if (motionState.isScanning) stopScan();
+    if (motionState.isMonitoring) toggleMonitor();
+    motionState.motionProfiles.clear();
+    motionState.motionClusters = [];
+    motionState.findings = [];
+    motionState.detector.prevFrames.clear();
+    activitySummary.style.display = 'none';
+    motionEventsList.querySelectorAll('.motion-event-card').forEach(el => el.remove());
+    motionEventsEmpty.style.display = '';
+    setScanUIState('idle');
+
+    // Turn off slideshow BEFORE destroying video elements
+    if (slideshowActive) toggleSlideshow();
+
+    // Destroy all slideshow video elements that may linger
+    slideshowStage.querySelectorAll('video').forEach(v => destroyVideoEl(v));
+    slideshowStage.innerHTML = '';
+
+    // Properly destroy all video elements and revoke blob URLs
+    for (const [, ch] of channels) {
+      for (const seg of ch.segments) {
+        destroyVideoEl(seg.videoEl);
+        seg.videoEl = null;
+        if (seg.url) URL.revokeObjectURL(seg.url);
+        seg.url = null;
+        seg.blob = null; // release blob reference for GC
+      }
+      ch.segments.length = 0;
+      ch.cellEl = null;
+      ch._noSignalEl = null;
+      ch._tsEl = null;
+      ch._segInfoEl = null;
+    }
+
+    // Clear data structures
+    channels.clear();
+    pendingVideos.length = 0;
+    pendingMetas.length = 0;
+    signCerts.clear();
+    zipFileDataForVerify.clear();
+    lastZipPassword = null;
+    zoomState.clear();
+    verifyCertInfos = [];
+    verifyResults = [];
+    verifyStatus = 'none';
+    gridLayoutOverride = null;
+    hiddenCameras.clear();
+    isImporting = false;
+    layoutPresets.querySelectorAll('.layout-preset-btn').forEach(b => b.classList.remove('active'));
+    layoutPresets.querySelector('[data-layout="auto"]').classList.add('active');
+
+    // Reset global state
+    globalStart = Infinity;
+    globalEnd = -Infinity;
+    globalDuration = 0;
+    currentTime = 0;
+    currentSpeedIdx = 2;
+    expandedChannel = null;
+    tlZoom = 1;
+    tlViewCenter = 0;
+
+    // Cleanup dewarp state
+    for (const [, ds] of dewarpState) {
+      if (ds.animFrameId) cancelAnimationFrame(ds.animFrameId);
+      if (ds.gl) {
+        const ext = ds.gl.getExtension('WEBGL_lose_context');
+        if (ext) ext.loseContext(); // force WebGL context release
+        ds.gl.deleteTexture(ds.texture);
+        ds.gl.deleteProgram(ds.program);
+      }
+    }
+    dewarpState.clear();
+
+    // Reset DOM — destroy any remaining video elements first
+    cameraGrid.querySelectorAll('video').forEach(v => destroyVideoEl(v));
+    cameraGrid.innerHTML = '';
+    cameraGrid.className = 'camera-grid';
+    timelineTrack.querySelectorAll('.timeline-segment, .timeline-gap, .timeline-tick, .timeline-tick-label, .motion-heatmap-bar, .motion-cluster-mark').forEach(el => el.remove());
+    playhead.style.left = '0%';
+    camCount.textContent = '';
+    document.getElementById('tlZoomInfo').textContent = '';
+    document.getElementById('timelineMinimap').classList.remove('visible');
+
+    // Reset verification badge
+    const badge = document.getElementById('verifyBadge');
+    const dot = badge.querySelector('.verify-dot');
+    dot.className = 'verify-dot';
+    badge.querySelector('.verify-label').textContent = 'Integrity';
+
+    // Reset speed display
+    document.getElementById('speedDisplay').textContent = '1×';
+
+    // Hide player and panels, show drop zone
+    playerArea.classList.remove('active');
+    playerArea.classList.remove('has-expanded');
+    dropZone.classList.remove('hidden');
+    addFilesBtn.style.display = 'none';
+    document.getElementById('newSessionBtn').style.display = 'none';
+    toggleLayoutPanel(true);
+    toggleAnalyticsPanel(true);
+
+    // Reset timeline labels
+    document.getElementById('tlStart').textContent = '--:--';
+    document.getElementById('tlEnd').textContent = '--:--';
+    document.getElementById('tlCurrent').textContent = '--:--';
+
+    // Reset time display
+    timeDisplay.textContent = '00:00:00 / 00:00:00';
+  }
+
+  // ─── Drag & Drop ───
+  dropZone.addEventListener('click', () => fileInput.click());
+  addFilesBtn.addEventListener('click', () => fileInput.click());
+  document.getElementById('newSessionBtn').addEventListener('click', newSession);
+  fileInput.addEventListener('change', e => handleFiles(e.target.files));
+
+  document.addEventListener('dragover', e => {
+    e.preventDefault();
+    if (!dropZone.classList.contains('hidden')) dropZone.classList.add('drag-over');
+  });
+  document.addEventListener('dragleave', e => {
+    if (!e.relatedTarget || e.relatedTarget === document.documentElement) {
+      dropZone.classList.remove('drag-over');
+    }
+  });
+  document.addEventListener('drop', async e => {
+    e.preventDefault();
+    dropZone.classList.remove('drag-over');
+
+    const items = e.dataTransfer.items;
+    if (items) {
+      const allFiles = await collectDroppedFiles(items);
+      if (allFiles.length > 0) await handleFiles(allFiles);
+    } else {
+      await handleFiles(e.dataTransfer.files);
+    }
+  });
+
+  // ─── Verification ───
+
+  async function runVerification() {
+    setVerifyStatus('verifying', 'Verifying...');
+    verifyResults = [];
+    verifyCertInfos = [];
+    avpLog('info', `Starting verification for ${signCerts.size} certificate(s)`);
+
+    let allPassed = true;
+    let totalFiles = 0;
+    let anyCloudUnverified = false;
+
+    for (const [certId, certEntry] of signCerts) {
+      const certInfo = parseCertificate(certEntry.pem);
+      if (certInfo.error) {
+        avpLog('error', 'Invalid certificate: ' + certInfo.error);
+        setVerifyStatus('failed', 'Invalid Certificate');
+        verifyResults.push({ certId, fileName: 'certificate.pem', passed: false, detail: certInfo.error });
+        verifyCertInfos.push({ certId, certInfo: null, cloudResult: null, error: certInfo.error });
+        allPassed = false;
+        continue;
+      }
+
+      const certResults = [];
+      for (const [fileName, sig] of certEntry.signatures) {
+        const fileData = zipFileDataForVerify.get(fileName);
+        if (!fileData) continue;
+
+        totalFiles++;
+        const passed = await verifySignature(certEntry.pem, fileData, sig);
+        certResults.push({ certId, fileName, passed });
+        avpLog(passed ? 'success' : 'error', `${fileName}: signature ${passed ? 'valid' : 'FAILED'} (${certInfo.commonName})`);
+        if (!passed) allPassed = false;
+      }
+      verifyResults.push(...certResults);
+
+      // Cloud verification per certificate
+      let cloudResult = null;
+      if (certResults.length > 0 && certResults.every(r => r.passed)) {
+        setVerifyStatus('verifying', `Checking cloud (${certInfo.commonName})...`);
+        cloudResult = await verifyCertificateOnline(certEntry.bytes, certInfo.commonName);
+        avpLog(cloudResult.verified ? 'success' : 'warn', `Cloud check for ${certInfo.commonName}: ${cloudResult.verified ? 'verified' : (cloudResult.error || 'not verified')}`);
+        if (!cloudResult.verified) anyCloudUnverified = true;
+      }
+
+      verifyCertInfos.push({ certId, certInfo, cloudResult });
+    }
+
+    zipFileDataForVerify.clear();
+
+    if (totalFiles === 0) {
+      setVerifyStatus('none', 'No Signatures');
+      avpLog('info', 'No file data available for signature verification');
+      return;
+    }
+
+    if (!allPassed) {
+      setVerifyStatus('failed', 'Integrity Failed');
+    } else if (anyCloudUnverified) {
+      setVerifyStatus('unverified', 'Unverified');
+    } else {
+      setVerifyStatus('success', 'Verified');
+    }
+  }
+
+  function setVerifyStatus(status, label) {
+    verifyStatus = status;
+    verifyBadge.className = `verify-badge visible status-${status}`;
+    verifyLabel.textContent = label;
+  }
+
+  // Modal
+  verifyBadge.addEventListener('click', () => {
+    const statusLabels = {
+      success: 'All files verified — certificates confirmed by Alta cloud.',
+      unverified: 'All file signatures are valid, but one or more certificates could not be confirmed by the Alta cloud service.',
+      failed: 'One or more files failed signature verification. The export may have been tampered with.',
+      verifying: 'Verification in progress...',
+      none: 'No SIGN data found in the export. Integrity verification is not available.',
+    };
+    verifySummary.textContent = statusLabels[verifyStatus] || '';
+
+    verifyCertInfoEl.style.display = 'none';
+    verifyCertInfoEl.textContent = '';
+
+    verifyFileList.innerHTML = '';
+
+    if (verifyCertInfos.length > 0) {
+      for (const entry of verifyCertInfos) {
+        // Device header
+        const header = document.createElement('li');
+        header.style.cssText = 'font-size:12px; font-weight:600; padding:8px 0 4px; border-bottom:1px solid var(--border-default); margin-top:8px; display:flex; align-items:center; gap:6px;';
+
+        if (entry.certInfo) {
+          header.textContent = 'Device S/N: ' + entry.certInfo.commonName;
+
+          if (entry.cloudResult) {
+            const cloudTag = document.createElement('span');
+            cloudTag.style.cssText = `font-size:10px; font-weight:500; padding:1px 6px; border-radius:3px; margin-left:auto;`;
+            if (entry.cloudResult.verified) {
+              cloudTag.style.background = 'rgba(32,198,47,0.15)';
+              cloudTag.style.color = 'var(--status-success)';
+              cloudTag.textContent = 'Cloud verified';
+            } else {
+              cloudTag.style.background = 'rgba(234,163,1,0.15)';
+              cloudTag.style.color = 'var(--status-warning)';
+              cloudTag.textContent = entry.cloudResult.error || 'Not verified';
+            }
+            header.appendChild(cloudTag);
+          }
+        } else {
+          header.style.color = 'var(--status-error)';
+          header.textContent = 'Invalid certificate: ' + (entry.error || 'parse error');
+        }
+        verifyFileList.appendChild(header);
+
+        // File results for this certificate
+        const certResults = verifyResults.filter(r => r.certId === entry.certId);
+        for (const r of certResults) {
+          const li = document.createElement('li');
+          const icon = document.createElement('span');
+          icon.className = 'vf-icon';
+          icon.textContent = r.passed ? '\u2705' : '\u274C';
+          const name = document.createElement('span');
+          name.className = 'vf-name';
+          name.textContent = r.fileName;
+          li.appendChild(icon);
+          li.appendChild(name);
+          verifyFileList.appendChild(li);
+        }
+      }
+    }
+
+    verifyModal.classList.remove('hidden');
+  });
+
+  document.getElementById('verifyModalClose').addEventListener('click', () => {
+    verifyModal.classList.add('hidden');
+  });
+  verifyModal.addEventListener('click', (e) => {
+    if (e.target === verifyModal) verifyModal.classList.add('hidden');
+  });
+
+  function collectDroppedFiles(items) {
+    return new Promise(resolve => {
+      const allFiles = [];
+      let pending = 0;
+      let hasEntries = false;
+
+      function checkDone() {
+        if (pending === 0 && hasEntries) resolve(allFiles);
+      }
+
+      function processEntry(entry) {
+        if (entry.isFile) {
+          pending++;
+          entry.file(f => {
+            allFiles.push(f);
+            pending--;
+            checkDone();
+          });
+        } else if (entry.isDirectory) {
+          pending++;
+          const reader = entry.createReader();
+          readAllEntries(reader, entries => {
+            for (const ent of entries) processEntry(ent);
+            pending--;
+            checkDone();
+          });
+        }
+      }
+
+      function readAllEntries(reader, cb) {
+        const all = [];
+        function read() {
+          reader.readEntries(entries => {
+            if (entries.length === 0) { cb(all); return; }
+            all.push(...entries);
+            read();
+          });
+        }
+        read();
+      }
+
+      for (const item of items) {
+        const entry = item.webkitGetAsEntry ? item.webkitGetAsEntry() : null;
+        if (entry) {
+          hasEntries = true;
+          processEntry(entry);
+        }
+      }
+
+      // If no entries found at all, resolve immediately
+      if (!hasEntries) resolve(allFiles);
+    });
+  }
+
+  // ─── Restore cached session on page load ───
+  loadSessionData().then(restored => {
+    if (restored) avpLog('info', 'Session restored from cache');
+  });
+})();
+</script>
+</body>
+</html>