@tn3w/openage 1.0.0

package/dist/openage.umd.js

@@ -0,0 +1,3408 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.OpenAge = {}));
+})(this, (function (exports) { 'use strict';
+
+  const FACE_SVG = `<svg viewBox="0 0 100 120"
+  fill="none" class="oa-face-svg">
+  <ellipse cx="50" cy="55" rx="35" ry="45"
+    stroke="currentColor" stroke-width="1.8"/>
+  <ellipse cx="36" cy="45" rx="5" ry="3.5"
+    fill="currentColor" class="oa-eye"/>
+  <ellipse cx="64" cy="45" rx="5" ry="3.5"
+    fill="currentColor" class="oa-eye"/>
+  <line x1="50" y1="52" x2="48" y2="62"
+    stroke="currentColor" stroke-width="1.5"
+    stroke-linecap="round"/>
+  <path d="M40 72 Q50 79 60 72"
+    stroke="currentColor" stroke-width="1.5"
+    stroke-linecap="round" fill="none"/>
+</svg>`;
+
+  const FACE_ICON_SVG = `<svg viewBox="0 0 100 120"
+  fill="none" class="oa-face-icon-svg">
+  <ellipse cx="50" cy="55" rx="35" ry="45"
+    stroke="currentColor" stroke-width="2"/>
+  <ellipse cx="36" cy="45" rx="5" ry="3.5"
+    fill="currentColor" class="oa-eye"/>
+  <ellipse cx="64" cy="45" rx="5" ry="3.5"
+    fill="currentColor" class="oa-eye"/>
+  <line x1="50" y1="52" x2="48" y2="62"
+    stroke="currentColor" stroke-width="1.65"
+    stroke-linecap="round"/>
+  <path d="M40 72 Q50 79 60 72"
+    stroke="currentColor" stroke-width="1.65"
+    stroke-linecap="round" fill="none"/>
+</svg>`;
+
+  const FACE_GUIDE_SVG = `<svg viewBox="0 0 100 120"
+  fill="none" class="oa-face-svg">
+  <ellipse cx="50" cy="55" rx="35" ry="45"
+    stroke="currentColor" stroke-width="1.8"
+    stroke-dasharray="6 4"/>
+  <ellipse cx="36" cy="45" rx="5" ry="3.5"
+    fill="currentColor" class="oa-eye"/>
+  <ellipse cx="64" cy="45" rx="5" ry="3.5"
+    fill="currentColor" class="oa-eye"/>
+  <line x1="50" y1="52" x2="48" y2="62"
+    stroke="currentColor" stroke-width="1.5"
+    stroke-linecap="round"/>
+  <path d="M40 72 Q50 79 60 72"
+    stroke="currentColor" stroke-width="1.5"
+    stroke-linecap="round" fill="none"/>
+</svg>`;
+
+  const CHECK_SVG = `<svg viewBox="0 0 24 24"
+  fill="none" stroke="currentColor" stroke-width="2.5"
+  stroke-linecap="round" stroke-linejoin="round">
+  <polyline points="20 6 9 17 4 12"/>
+</svg>`;
+
+  const CLOSE_SVG = `<svg viewBox="0 0 24 24"
+  fill="none" stroke="currentColor" stroke-width="2"
+  stroke-linecap="round">
+  <line x1="18" y1="6" x2="6" y2="18"/>
+  <line x1="6" y1="6" x2="18" y2="18"/>
+</svg>`;
+
+  const RETRY_SVG = `<svg viewBox="0 0 16 16"
+  xmlns="http://www.w3.org/2000/svg"
+  fill="currentColor">
+  <path d="m14.955 7.986.116.01a1 1 0 0 1 .85 1.13 8 8 0 0 1-13.374 4.728l-.84.84c-.63.63-1.707.184-1.707-.707V10h3.987c.89 0 1.337 1.077.707 1.707l-.731.731a6 6 0 0 0 8.347-.264 6 6 0 0 0 1.63-3.33 1 1 0 0 1 1.131-.848zM11.514.813a8 8 0 0 1 1.942 1.336l.837-.837c.63-.63 1.707-.184 1.707.707V6h-3.981c-.89 0-1.337-1.077-.707-1.707l.728-.729a6 6 0 0 0-9.98 3.591 1 1 0 1 1-1.98-.281A8 8 0 0 1 11.514.813"/>
+</svg>`;
+
+  const SPINNER_SVG = `<svg viewBox="0 0 24 24"
+  fill="none" stroke="currentColor" stroke-width="2.5">
+  <circle cx="12" cy="12" r="10" opacity="0.2"/>
+  <path d="M12 2 A10 10 0 0 1 22 12"
+    stroke-linecap="round">
+    <animateTransform attributeName="transform"
+      type="rotate" from="0 12 12" to="360 12 12"
+      dur="0.8s" repeatCount="indefinite"/>
+  </path>
+</svg>`;
+
+  const SHIELD_SVG = `<svg viewBox="0 0 24 24"
+  fill="none" stroke="currentColor" stroke-width="1.5">
+  <path d="M12 2l8 4v6c0 5.5-3.8 10-8 12
+    C7.8 22 4 17.5 4 12V6l8-4z"/>
+  <path d="M9 12l2 2 4-4" stroke-width="2"
+    stroke-linecap="round" stroke-linejoin="round"/>
+</svg>`;
+
+  function resolveTheme(theme) {
+      if (theme === 'light' || theme === 'dark') return theme;
+      return resolveAutoTheme();
+  }
+
+  function watchTheme(host, theme) {
+      if (theme === 'light' || theme === 'dark') return;
+      if (typeof window === 'undefined') return;
+
+      const update = () => {
+          host.setAttribute('data-theme', resolveAutoTheme());
+      };
+
+      const cleanups = [];
+
+      for (const query of ['(prefers-color-scheme: dark)', '(prefers-color-scheme: light)']) {
+          const cleanup = watchMediaQuery(query, update);
+          if (cleanup) cleanups.push(cleanup);
+      }
+
+      if (typeof MutationObserver === 'function') {
+          const observer = new MutationObserver(update);
+          const options = {
+              attributes: true,
+              attributeFilter: ['class', 'data-theme', 'style'],
+          };
+
+          if (document.documentElement) {
+              observer.observe(document.documentElement, options);
+          }
+
+          if (document.body) {
+              observer.observe(document.body, options);
+          }
+
+          cleanups.push(() => observer.disconnect());
+      }
+
+      return () => {
+          for (const cleanup of cleanups) {
+              cleanup();
+          }
+      };
+  }
+
+  function resolveAutoTheme() {
+      if (typeof window === 'undefined') return 'dark';
+
+      const documentTheme = resolveDocumentTheme();
+      if (documentTheme) return documentTheme;
+
+      const systemTheme = resolveSystemTheme();
+      if (systemTheme) return systemTheme;
+
+      return 'dark';
+  }
+
+  function resolveSystemTheme() {
+      if (typeof window.matchMedia !== 'function') {
+          return null;
+      }
+
+      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+          return 'dark';
+      }
+
+      if (window.matchMedia('(prefers-color-scheme: light)').matches) {
+          return 'light';
+      }
+
+      return null;
+  }
+
+  function resolveDocumentTheme() {
+      if (typeof document === 'undefined') return null;
+
+      for (const element of [document.documentElement, document.body]) {
+          const theme = readThemeHint(element);
+          if (theme) return theme;
+      }
+
+      return null;
+  }
+
+  function readThemeHint(element) {
+      if (!element || typeof window.getComputedStyle !== 'function') {
+          return null;
+      }
+
+      const explicit = readExplicitTheme(element);
+      if (explicit) return explicit;
+
+      const styles = window.getComputedStyle(element);
+      const scheme = parseColorScheme(styles.colorScheme);
+      if (scheme) return scheme;
+
+      return parseBackgroundTheme(styles.backgroundColor);
+  }
+
+  function readExplicitTheme(element) {
+      const attrTheme = element.getAttribute('data-theme');
+      if (attrTheme === 'light' || attrTheme === 'dark') {
+          return attrTheme;
+      }
+
+      const className = element.className;
+      if (typeof className !== 'string') return null;
+
+      if (/\bdark\b|theme-dark|dark-theme/i.test(className)) {
+          return 'dark';
+      }
+
+      if (/\blight\b|theme-light|light-theme/i.test(className)) {
+          return 'light';
+      }
+
+      return null;
+  }
+
+  function parseColorScheme(value) {
+      if (!value || value === 'normal') return null;
+
+      const normalized = value.toLowerCase();
+      const hasDark = normalized.includes('dark');
+      const hasLight = normalized.includes('light');
+
+      if (hasDark && !hasLight) return 'dark';
+      if (hasLight && !hasDark) return 'light';
+
+      return null;
+  }
+
+  function parseBackgroundTheme(value) {
+      if (!value || value === 'transparent') return null;
+
+      const match = value.match(/rgba?\(([^)]+)\)/i);
+      if (!match) return null;
+
+      const parts = match[1]
+          .split(',')
+          .slice(0, 3)
+          .map((part) => Number.parseFloat(part.trim()));
+
+      if (parts.length !== 3 || parts.some(Number.isNaN)) {
+          return null;
+      }
+
+      const [red, green, blue] = parts;
+      const brightness = (red * 299 + green * 587 + blue * 114) / 1000;
+
+      if (brightness <= 140) return 'dark';
+      if (brightness >= 180) return 'light';
+
+      return null;
+  }
+
+  function watchMediaQuery(query, listener) {
+      if (typeof window.matchMedia !== 'function') {
+          return null;
+      }
+
+      const mediaQuery = window.matchMedia(query);
+
+      if (typeof mediaQuery.addEventListener === 'function') {
+          mediaQuery.addEventListener('change', listener);
+          return () => {
+              mediaQuery.removeEventListener('change', listener);
+          };
+      }
+
+      if (typeof mediaQuery.addListener === 'function') {
+          mediaQuery.addListener(listener);
+          return () => {
+              mediaQuery.removeListener(listener);
+          };
+      }
+
+      return null;
+  }
+
+  const STYLES = `
+:host {
+  --oa-bg: #0b0d11;
+  --oa-surface: #14161d;
+  --oa-border: #1f2230;
+  --oa-text: #e8e8ed;
+  --oa-text-muted: #7a7d8c;
+  --oa-accent: #4ae68a;
+  --oa-accent-dim: rgba(74, 230, 138, 0.12);
+  --oa-danger: #ef4444;
+  --oa-warn: #f59e0b;
+  --oa-radius: 16px;
+  --oa-font: 'DM Sans', system-ui, -apple-system,
+    sans-serif;
+  --oa-mono: 'Space Mono', monospace;
+
+  display: block;
+  font-family: var(--oa-font);
+  color: var(--oa-text);
+  line-height: 1.4;
+}
+
+:host([data-theme="light"]) {
+  --oa-bg: #f8f9fb;
+  --oa-surface: #ffffff;
+  --oa-border: #e2e4ea;
+  --oa-text: #1a1c24;
+  --oa-text-muted: #6b6e7b;
+  --oa-accent: #22c55e;
+  --oa-accent-dim: rgba(34, 197, 94, 0.1);
+}
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+/* ── Checkbox ────────────────────────────────── */
+
+.oa-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  background: var(--oa-surface);
+  border: 2px solid var(--oa-border);
+  border-radius: var(--oa-radius);
+  cursor: pointer;
+  user-select: none;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.oa-checkbox:hover {
+  border-color: var(--oa-text-muted);
+}
+
+.oa-checkbox.oa-verified {
+  border-color: var(--oa-accent);
+  cursor: default;
+}
+
+.oa-checkbox.oa-failed {
+  border-color: var(--oa-danger);
+}
+
+.oa-checkbox.oa-retry {
+  border-color: var(--oa-danger);
+}
+
+.oa-checkbox.oa-expired {
+  border-color: var(--oa-warn);
+}
+
+.oa-checkbox.oa-loading {
+  align-items: center;
+}
+
+.oa-check-box {
+  width: 24px;
+  height: 24px;
+  border: 2px solid var(--oa-border);
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: all 0.2s;
+}
+
+.oa-loading .oa-check-box {
+  border-color: transparent;
+  background: transparent;
+}
+
+.oa-loading .oa-check-box .oa-spinner {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: translateY(2px);
+}
+
+.oa-verified .oa-check-box {
+  background: var(--oa-accent);
+  border-color: var(--oa-accent);
+  color: var(--oa-bg);
+}
+
+.oa-failed .oa-check-box {
+  background: var(--oa-danger);
+  border-color: var(--oa-danger);
+  color: white;
+}
+
+.oa-retry .oa-check-box {
+  background: var(--oa-danger);
+  border-color: var(--oa-danger);
+  color: white;
+}
+
+.oa-check-box svg {
+  width: 14px;
+  height: 14px;
+}
+
+.oa-check-box .oa-spinner svg {
+  width: 18px;
+  height: 18px;
+}
+
+.oa-label {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  flex: 1;
+  min-width: 0;
+}
+
+.oa-label-text {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.oa-right-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+.oa-face-icon-wrap {
+  width: 18px;
+  height: 22px;
+  color: var(--oa-text-muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.oa-face-icon-wrap .oa-face-icon-svg {
+  width: 100%;
+  height: 100%;
+}
+
+.oa-face-icon-wrap .oa-eye {
+  transform-box: fill-box;
+  transform-origin: center;
+  animation: oa-idle-blink 5s ease-in-out infinite;
+}
+
+.oa-face-icon-wrap .oa-face-icon-svg {
+  animation: oa-breathe 4s ease-in-out infinite;
+}
+
+.oa-branding-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+}
+
+.oa-branding-link {
+  font-size: 10px;
+  font-weight: 700;
+  font-family: var(--oa-mono);
+  color: var(--oa-text-muted);
+  text-decoration: none;
+  letter-spacing: -0.02em;
+  cursor: pointer;
+}
+
+.oa-branding-link:hover {
+  color: var(--oa-text);
+}
+
+.oa-links-row {
+  display: flex;
+  gap: 6px;
+  justify-content: center;
+}
+
+.oa-links-row a {
+  font-size: 9px;
+  color: var(--oa-text-muted);
+  text-decoration: none;
+  opacity: 0.7;
+  cursor: pointer;
+}
+
+.oa-links-row a:hover {
+  opacity: 1;
+  text-decoration: underline;
+}
+
+.oa-compact .oa-label-text {
+  font-size: 11px;
+}
+
+.oa-compact .oa-face-icon-wrap {
+  width: 16px;
+  height: 20px;
+}
+
+/* ── Error banner (inline in checkbox) ───────── */
+
+.oa-error-banner {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  margin-top: 6px;
+  background: rgba(239, 68, 68, 0.08);
+  border: 1px solid rgba(239, 68, 68, 0.2);
+  border-radius: 8px;
+  font-size: 12px;
+  color: var(--oa-danger);
+  animation: oa-fade-in 0.3s ease;
+}
+
+.oa-error-banner button {
+  margin-left: auto;
+  background: none;
+  border: 1px solid var(--oa-danger);
+  border-radius: 6px;
+  color: var(--oa-danger);
+  font-size: 11px;
+  font-weight: 600;
+  padding: 3px 10px;
+  cursor: pointer;
+  font-family: var(--oa-font);
+  flex-shrink: 0;
+}
+
+.oa-error-banner button:hover {
+  background: rgba(239, 68, 68, 0.1);
+}
+
+/* ── Popup / Modal shell ─────────────────────── */
+
+.oa-popup {
+  position: fixed;
+  z-index: 100000;
+  background: var(--oa-bg);
+  border: 1px solid var(--oa-border);
+  border-radius: var(--oa-radius);
+  box-shadow: 0 20px 60px rgba(0,0,0,0.4),
+    0 0 0 1px rgba(0,0,0,0.08);
+  width: 340px;
+  max-height: 90vh;
+  overflow: hidden;
+  animation: oa-popup-in 0.25s ease;
+  display: flex;
+  flex-direction: column;
+}
+
+.oa-modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 99999;
+  background: rgba(0,0,0,0.65);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: oa-fade-in 0.2s ease;
+  backdrop-filter: blur(6px);
+}
+
+.oa-modal {
+  background: var(--oa-bg);
+  border: 1px solid var(--oa-border);
+  border-radius: var(--oa-radius);
+  width: 360px;
+  max-width: 95vw;
+  max-height: 95vh;
+  overflow: hidden;
+  animation: oa-slide-in 0.3s ease;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ── Header ──────────────────────────────────── */
+
+.oa-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--oa-border);
+  flex-shrink: 0;
+}
+
+.oa-logo {
+  font-family: var(--oa-mono);
+  font-size: 0.85rem;
+  letter-spacing: -0.03em;
+  color: var(--oa-text-muted);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.oa-logo:hover {
+  color: var(--oa-text);
+}
+
+.oa-logo strong {
+  color: var(--oa-text);
+  font-weight: 700;
+}
+
+.oa-badge {
+  font-size: 0.55rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--oa-accent);
+  background: var(--oa-accent-dim);
+  padding: 2px 6px;
+  border-radius: 100px;
+  margin-left: 6px;
+}
+
+.oa-title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.oa-close-btn {
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  color: var(--oa-text-muted);
+  transition: background 0.15s, color 0.15s;
+}
+
+.oa-close-btn:hover {
+  background: var(--oa-border);
+  color: var(--oa-text);
+}
+
+.oa-close-btn svg {
+  width: 16px;
+  height: 16px;
+}
+
+/* ── Body (viewport) ─────────────────────────── */
+
+.oa-body {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+}
+
+/* ── Hero / start screen ─────────────────────── */
+
+.oa-hero {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  padding: 2rem 1.2rem 1.2rem;
+  background: var(--oa-surface);
+  border: 1px solid var(--oa-border);
+  border-radius: var(--oa-radius);
+  margin: 10px;
+  animation: oa-fade-in 0.4s ease;
+}
+
+.oa-hero-icon {
+  width: 80px;
+  height: 96px;
+  color: var(--oa-text-muted);
+}
+
+.oa-hero-icon .oa-face-svg.oa-idle {
+  animation: oa-breathe 4s ease-in-out infinite;
+}
+
+.oa-hero-icon .oa-eye {
+  transform-box: fill-box;
+  transform-origin: center;
+  animation: oa-idle-blink 5s ease-in-out infinite;
+}
+
+.oa-hero-status {
+  color: var(--oa-text-muted);
+  font-size: 0.8rem;
+  font-weight: 500;
+  text-align: center;
+  min-height: 1.4em;
+}
+
+.oa-hero-privacy {
+  font-size: 0.68rem;
+  color: var(--oa-text-muted);
+  text-align: center;
+  line-height: 1.5;
+  max-width: 260px;
+  opacity: 0.7;
+}
+
+.oa-hero-privacy svg {
+  width: 10px;
+  height: 10px;
+  vertical-align: -2px;
+  margin-right: 2px;
+}
+
+/* ── Start / Retry button ────────────────────── */
+
+.oa-actions {
+  display: flex;
+  justify-content: center;
+  padding: 0 14px 14px;
+  flex-shrink: 0;
+}
+
+.oa-btn {
+  font-family: var(--oa-font);
+  padding: 0.55rem 1.5rem;
+  border: none;
+  border-radius: 10px;
+  font-size: 0.8rem;
+  font-weight: 600;
+  cursor: pointer;
+  background: var(--oa-accent);
+  color: var(--oa-bg);
+  transition: transform 0.12s, opacity 0.15s;
+  width: 100%;
+  max-width: 240px;
+}
+
+.oa-btn:hover { opacity: 0.88; }
+.oa-btn:active { transform: scale(0.97); }
+
+/* ── Video area ──────────────────────────────── */
+
+.oa-video-area {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 3/4;
+  max-height: 55vh;
+  background: var(--oa-surface);
+  overflow: hidden;
+  border-radius: var(--oa-radius);
+  margin: 10px;
+  width: calc(100% - 20px);
+  border: 1px solid var(--oa-border);
+  animation: oa-fade-in 0.3s ease;
+}
+
+.oa-video-area video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transform: scaleX(-1);
+}
+
+/* ── Face guide overlay ──────────────────────── */
+
+.oa-face-guide {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 80%;
+  max-width: 360px;
+  aspect-ratio: 5/6;
+  perspective: 400px;
+  color: rgba(255, 255, 255, 0.45);
+  pointer-events: none;
+  z-index: 2;
+  transition: opacity 0.4s ease;
+}
+
+.oa-face-guide .oa-face-svg {
+  width: 100%;
+  height: 100%;
+  transform-origin: center center;
+  filter: drop-shadow(
+    0 0 16px rgba(15, 23, 42, 0.16)
+  );
+}
+
+.oa-face-guide .oa-eye {
+  transform-box: fill-box;
+  transform-origin: center;
+}
+
+.oa-face-guide[data-task="turn-left"] .oa-face-svg {
+  animation: oa-turn-left 2s ease-in-out infinite;
+}
+.oa-face-guide[data-task="turn-right"] .oa-face-svg {
+  animation: oa-turn-right 2s ease-in-out infinite;
+}
+.oa-face-guide[data-task="nod"] .oa-face-svg {
+  animation: oa-nod 2s ease-in-out infinite;
+}
+.oa-face-guide[data-task="blink-twice"] .oa-eye {
+  animation: oa-blink 2.4s ease-in-out infinite;
+}
+.oa-face-guide[data-task="move-closer"] .oa-face-svg {
+  animation: oa-closer 2.5s ease-in-out infinite;
+}
+
+/* ── Challenge HUD (bottom gradient overlay) ── */
+
+.oa-challenge-hud {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 1rem 0.8rem 0.6rem;
+  background: linear-gradient(
+    to top,
+    rgba(11, 13, 17, 0.92) 0%,
+    rgba(11, 13, 17, 0) 100%
+  );
+  z-index: 3;
+  pointer-events: none;
+}
+
+.oa-challenge-text {
+  font-size: 0.85rem;
+  font-weight: 600;
+  text-align: center;
+  color: var(--oa-text);
+  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
+  margin-bottom: 0.4rem;
+}
+
+.oa-challenge-bar {
+  height: 3px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.oa-challenge-fill {
+  height: 100%;
+  background: var(--oa-accent);
+  border-radius: 2px;
+  transition: width 0.25s ease;
+}
+
+/* ── Video status (top gradient overlay) ─────── */
+
+.oa-video-status {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  padding: 0.8rem 0.8rem 1.2rem;
+  background: linear-gradient(
+    to bottom,
+    rgba(11, 13, 17, 0.85) 0%,
+    rgba(11, 13, 17, 0) 100%
+  );
+  z-index: 3;
+  pointer-events: none;
+}
+
+.oa-video-status p {
+  font-size: 0.75rem;
+  font-weight: 500;
+  text-align: center;
+  color: var(--oa-text-muted);
+  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
+}
+
+/* ── Result area ─────────────────────────────── */
+
+.oa-result {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 2rem 1.2rem;
+  background: var(--oa-surface);
+  border: 1px solid var(--oa-border);
+  border-radius: var(--oa-radius);
+  margin: 10px;
+  animation: oa-fade-in 0.4s ease;
+}
+
+.oa-result-icon {
+  font-size: 2.4rem;
+  line-height: 1;
+}
+
+.oa-result-text {
+  font-size: 0.85rem;
+  font-weight: 500;
+  text-align: center;
+}
+
+.oa-result-pass { color: var(--oa-accent); }
+.oa-result-fail { color: var(--oa-danger); }
+.oa-result-retry { color: var(--oa-warn); }
+
+.oa-hidden { display: none !important; }
+
+/* ── Animations ──────────────────────────────── */
+
+@keyframes oa-popup-in {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+@keyframes oa-fade-in {
+  from { opacity: 0; transform: translateY(6px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes oa-slide-in {
+  from { opacity: 0; transform: translateY(16px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes oa-breathe {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.04); }
+}
+
+@keyframes oa-idle-blink {
+  0%, 42%, 48%, 100% { transform: scaleY(1); }
+  44%, 46% { transform: scaleY(0.05); }
+}
+
+@keyframes oa-turn-left {
+  0%, 100% { transform: rotateY(0); }
+  35%, 65% { transform: rotateY(-30deg); }
+}
+
+@keyframes oa-turn-right {
+  0%, 100% { transform: rotateY(0); }
+  35%, 65% { transform: rotateY(30deg); }
+}
+
+@keyframes oa-nod {
+  0%, 100% { transform: rotateX(0); }
+  30%, 50% { transform: rotateX(25deg); }
+}
+
+@keyframes oa-blink {
+  0%, 18%, 32%, 50%, 100% { transform: scaleY(1); }
+  22%, 28% { transform: scaleY(0.05); }
+  40%, 46% { transform: scaleY(0.05); }
+}
+
+@keyframes oa-closer {
+  0%, 100% { transform: scale(1); }
+  35%, 55% { transform: scale(1.3); }
+}
+`;
+
+  function checkboxTemplate(labelText) {
+      return `
+    <div class="oa-widget-wrap">
+      <div class="oa-checkbox" role="checkbox"
+        aria-checked="false" tabindex="0">
+        <div class="oa-check-box"></div>
+        <div class="oa-label">
+          <span class="oa-label-text">${labelText}</span>
+        </div>
+        <div class="oa-right-section">
+          <div class="oa-branding-row">
+            <div class="oa-face-icon-wrap">
+              ${FACE_ICON_SVG}
+            </div>
+            <a class="oa-branding-link"
+              href="https://github.com/tn3w/OpenAge"
+              target="_blank" rel="noopener">OpenAge</a>
+          </div>
+          <div class="oa-links-row">
+            <a href="https://github.com/tn3w/OpenAge"
+              target="_blank"
+              rel="noopener">Terms</a>
+            <a href="https://github.com/tn3w/OpenAge"
+              target="_blank"
+              rel="noopener">Privacy</a>
+          </div>
+        </div>
+      </div>
+      <div class="oa-error-slot"></div>
+    </div>
+  `;
+  }
+
+  function heroTemplate(statusText) {
+      return `
+    <div class="oa-hero">
+      <div class="oa-hero-icon">
+        ${FACE_SVG.replace('class="oa-face-svg"', 'class="oa-face-svg oa-idle"')}
+      </div>
+      <p class="oa-hero-status">${statusText}</p>
+      <p class="oa-hero-privacy">
+        ${SHIELD_SVG}
+        Open-source &amp; privacy-focused.
+        No photos or camera data leave your device.
+      </p>
+    </div>
+  `;
+  }
+
+  function challengeTemplate() {
+      return `
+    <div class="oa-video-area">
+      <video autoplay playsinline muted></video>
+      <div class="oa-face-guide">
+        ${FACE_GUIDE_SVG}
+      </div>
+      <div class="oa-challenge-hud oa-hidden">
+        <p class="oa-challenge-text"></p>
+        <div class="oa-challenge-bar">
+          <div class="oa-challenge-fill"
+            style="width:0%"></div>
+        </div>
+      </div>
+      <div class="oa-video-status">
+        <p></p>
+      </div>
+    </div>
+  `;
+  }
+
+  function resultTemplate(outcome, message) {
+      const icons = {
+          fail: '✕',
+          retry: '↻',
+      };
+      const classes = {
+          fail: 'oa-result-fail',
+          retry: 'oa-result-retry',
+      };
+      return `
+    <div class="oa-result ${classes[outcome] || ''}">
+      <div class="oa-result-icon">
+        ${icons[outcome] || '?'}
+      </div>
+      <div class="oa-result-text">${message}</div>
+    </div>
+  `;
+  }
+
+  const VERSION = '1.0.0';
+
+  const MEDIAPIPE_CDN = 'https://cdn.jsdelivr.net/npm/' + '@mediapipe/tasks-vision@0.10.17';
+
+  const MEDIAPIPE_WASM = `${MEDIAPIPE_CDN}/wasm`;
+
+  const MEDIAPIPE_VISION = `${MEDIAPIPE_CDN}/vision_bundle.mjs`;
+
+  const MEDIAPIPE_MODEL =
+      'https://storage.googleapis.com/mediapipe-models/' +
+      'face_landmarker/face_landmarker/float16/latest/' +
+      'face_landmarker.task';
+
+  const FACEAPI_CDN =
+      'https://cdn.jsdelivr.net/npm/' + 'face-api.js@0.22.2/dist/face-api.min.js';
+
+  const FACEAPI_MODEL_CDN = 'https://cdn.jsdelivr.net/npm/' + 'face-api.js@0.22.2/weights';
+
+  const MAX_RETRIES = 3;
+  const BURST_FRAMES = 5;
+  const BURST_INTERVAL_MS = 200;
+  const POSITION_CHECK_MS = 100;
+  const MOTION_CAPTURE_MS = 3000;
+  const MOTION_SAMPLE_MS = 100;
+  const TOKEN_EXPIRY_S = 300;
+  const STABLE_FRAMES_REQUIRED = 10;
+
+  const TASK_TIMEOUT_MS = 8000;
+  const MIN_TASK_TIME_MS = 500;
+  const TASK_COUNT = 3;
+  const REQUIRED_TASK_PASSES = 2;
+
+  const POPUP_MIN_WIDTH = 340;
+  const POPUP_MIN_HEIGHT = 520;
+  const POPUP_MARGIN = 12;
+
+  let widgetCounter = 0;
+
+  class Widget {
+      constructor(container, params) {
+          this.id = `oa-${++widgetCounter}`;
+          this.params = params;
+          this.container = resolveContainer(container);
+          this.anchorElement = null;
+          this.state = 'idle';
+          this.token = null;
+          this.popup = null;
+          this.shadow = null;
+          this.elements = {};
+          this.onChallenge = null;
+          this.onStartClick = null;
+          this.popupFrame = 0;
+          this.themeCleanup = null;
+
+          this.render();
+      }
+
+      render() {
+          const host = document.createElement('div');
+          host.id = this.id;
+          this.shadow = host.attachShadow({ mode: 'open' });
+
+          const style = document.createElement('style');
+          style.textContent = STYLES;
+          this.shadow.appendChild(style);
+
+          const theme = resolveTheme(this.params.theme);
+          host.setAttribute('data-theme', theme);
+          this.themeCleanup = watchTheme(host, this.params.theme);
+
+          if (this.params.size === 'invisible') {
+              host.style.display = 'none';
+              this.container.appendChild(host);
+              this.host = host;
+              return;
+          }
+
+          const label = 'I am of age';
+
+          const wrapper = document.createElement('div');
+          wrapper.innerHTML = checkboxTemplate(label);
+          this.shadow.appendChild(wrapper.firstElementChild);
+
+          const checkbox = this.shadow.querySelector('.oa-checkbox');
+
+          if (this.params.size === 'compact') {
+              checkbox.classList.add('oa-compact');
+          }
+
+          checkbox.addEventListener('click', (event) => {
+              if (event.target.closest('a')) return;
+              if (this.state === 'verified') return;
+              if (this.state === 'loading') return;
+              this.clearError();
+              this.startChallenge();
+          });
+
+          checkbox.addEventListener('keydown', (event) => {
+              if (event.key === 'Enter' || event.key === ' ') {
+                  event.preventDefault();
+                  checkbox.click();
+              }
+          });
+
+          this.elements.checkbox = checkbox;
+          this.elements.checkBox = this.shadow.querySelector('.oa-check-box');
+          this.elements.errorSlot = this.shadow.querySelector('.oa-error-slot');
+
+          this.container.appendChild(host);
+          this.host = host;
+      }
+
+      startChallenge() {
+          this.setState('loading');
+
+          if (this.onChallenge) {
+              this.onChallenge(this);
+          }
+      }
+
+      createPopupShell() {
+          const theme = resolveTheme(this.params.theme);
+          const popupHost = document.createElement('div');
+          popupHost.setAttribute('data-theme', theme);
+          const popupShadow = popupHost.attachShadow({
+              mode: 'open',
+          });
+
+          const style = document.createElement('style');
+          style.textContent = STYLES;
+          popupShadow.appendChild(style);
+
+          const themeCleanup = watchTheme(popupHost, this.params.theme);
+
+          return {
+              popupHost,
+              popupShadow,
+              themeCleanup,
+          };
+      }
+
+      openPopup() {
+          if (this.popup) return this.getVideo();
+
+          const anchor = this.getPopupAnchor();
+
+          if (!anchor) {
+              return this.openModal();
+          }
+
+          const { popupHost, popupShadow, themeCleanup } = this.createPopupShell();
+
+          const popup = document.createElement('div');
+          popup.className = 'oa-popup';
+          popup.innerHTML = this.buildPopupContent();
+          popup.style.visibility = 'hidden';
+          popup.style.pointerEvents = 'none';
+
+          popupShadow.appendChild(popup);
+          document.body.appendChild(popupHost);
+
+          this.popup = {
+              anchor,
+              host: popupHost,
+              root: popup,
+              themeCleanup,
+          };
+
+          const anchorRect = anchor.getBoundingClientRect();
+          const popupRect = popup.getBoundingClientRect();
+          const position = findPopupPosition(anchorRect, popupRect);
+
+          if (position.mode === 'modal') {
+              popupHost.remove();
+              themeCleanup?.();
+              this.popup = null;
+              return this.openModal();
+          }
+
+          this.bindPopupEvents(popup, popupShadow);
+          this.updatePopupPosition();
+          this.startPopupTracking();
+          return this.getVideo();
+      }
+
+      openModal() {
+          const { popupHost, popupShadow, themeCleanup } = this.createPopupShell();
+
+          const overlay = document.createElement('div');
+          overlay.className = 'oa-modal-overlay';
+
+          const modal = document.createElement('div');
+          modal.className = 'oa-modal';
+          modal.innerHTML = this.buildPopupContent();
+
+          overlay.appendChild(modal);
+          popupShadow.appendChild(overlay);
+          document.body.appendChild(popupHost);
+
+          overlay.addEventListener('click', (event) => {
+              if (event.target === overlay) this.closePopup();
+          });
+
+          this.popup = {
+              host: popupHost,
+              root: modal,
+              overlay,
+              themeCleanup,
+          };
+          this.bindPopupEvents(modal, popupShadow);
+          return this.getVideo();
+      }
+
+      getPopupAnchor() {
+          return this.anchorElement || this.elements.checkbox || this.host || null;
+      }
+
+      startPopupTracking() {
+          if (!this.popup || this.popup.overlay) return;
+
+          const schedule = () => {
+              this.schedulePopupPosition();
+          };
+
+          const cleanups = [];
+          const addWindowListener = (name, options) => {
+              window.addEventListener(name, schedule, options);
+              cleanups.push(() => {
+                  window.removeEventListener(name, schedule, options);
+              });
+          };
+
+          addWindowListener('resize', { passive: true });
+          addWindowListener('scroll', {
+              capture: true,
+              passive: true,
+          });
+
+          if (window.visualViewport) {
+              const viewport = window.visualViewport;
+              viewport.addEventListener('resize', schedule);
+              viewport.addEventListener('scroll', schedule);
+              cleanups.push(() => {
+                  viewport.removeEventListener('resize', schedule);
+                  viewport.removeEventListener('scroll', schedule);
+              });
+          }
+
+          if (typeof ResizeObserver === 'function') {
+              const observer = new ResizeObserver(() => {
+                  schedule();
+              });
+              observer.observe(this.popup.root);
+              observer.observe(this.popup.anchor);
+              observer.observe(document.documentElement);
+              if (document.body) {
+                  observer.observe(document.body);
+              }
+              cleanups.push(() => observer.disconnect());
+          }
+
+          this.popup.cleanup = () => {
+              if (this.popupFrame) {
+                  cancelAnimationFrame(this.popupFrame);
+                  this.popupFrame = 0;
+              }
+              for (const cleanup of cleanups) {
+                  cleanup();
+              }
+          };
+      }
+
+      schedulePopupPosition() {
+          if (!this.popup || this.popup.overlay) return;
+          if (this.popupFrame) return;
+
+          this.popupFrame = requestAnimationFrame(() => {
+              this.popupFrame = 0;
+              this.updatePopupPosition();
+          });
+      }
+
+      updatePopupPosition() {
+          if (!this.popup || this.popup.overlay) return;
+
+          const anchor = this.getPopupAnchor();
+          if (!anchor || !anchor.isConnected) {
+              this.closePopup();
+              return;
+          }
+
+          this.popup.anchor = anchor;
+
+          const anchorRect = anchor.getBoundingClientRect();
+          const popupRect = this.popup.root.getBoundingClientRect();
+          const position = findPopupPosition(anchorRect, popupRect);
+
+          if (position.mode === 'modal') {
+              this.closePopup();
+              this.openModal();
+              return;
+          }
+
+          const top = `${Math.round(position.top)}px`;
+          const left = `${Math.round(position.left)}px`;
+
+          if (this.popup.root.style.top !== top) {
+              this.popup.root.style.top = top;
+          }
+
+          if (this.popup.root.style.left !== left) {
+              this.popup.root.style.left = left;
+          }
+
+          this.popup.root.dataset.placement = position.placement;
+          this.popup.root.style.visibility = 'visible';
+          this.popup.root.style.pointerEvents = 'auto';
+      }
+
+      buildPopupContent() {
+          return `
+      <div class="oa-header">
+        <div class="oa-title">
+          <a class="oa-logo"
+            href="https://github.com/tn3w/OpenAge"
+            target="_blank" rel="noopener">
+            Open<strong>Age</strong>
+          </a>
+          <span class="oa-badge">on-device</span>
+        </div>
+        <button class="oa-close-btn"
+          aria-label="Close">
+          ${CLOSE_SVG}
+        </button>
+      </div>
+      <div class="oa-body">
+        ${heroTemplate('Initializing…')}
+      </div>
+      <div class="oa-actions oa-hidden">
+        <button class="oa-btn oa-start-btn">
+          Begin Verification
+        </button>
+      </div>
+    `;
+      }
+
+      bindPopupEvents(root, shadow) {
+          const closeBtn = root.querySelector('.oa-close-btn');
+          if (closeBtn) {
+              closeBtn.addEventListener('click', () => {
+                  this.closePopup();
+                  this.params.closeCallback?.();
+              });
+          }
+
+          const startBtn = root.querySelector('.oa-start-btn');
+          if (startBtn) {
+              startBtn.addEventListener('click', () => {
+                  if (this.onStartClick) this.onStartClick();
+              });
+          }
+
+          this.popupElements = {
+              body: root.querySelector('.oa-body'),
+              actions: root.querySelector('.oa-actions'),
+              startBtn,
+              heroStatus: root.querySelector('.oa-hero-status'),
+          };
+      }
+
+      getVideo() {
+          if (!this.popup) return null;
+          return this.popup.root.querySelector('video');
+      }
+
+      showHero(statusText) {
+          if (!this.popupElements?.body) return;
+          this.popupElements.body.innerHTML = heroTemplate(statusText);
+          this.popupElements.heroStatus = this.popupElements.body.querySelector('.oa-hero-status');
+          this.hideActions();
+      }
+
+      showReady() {
+          this.setHeroStatus('Ready to verify your age.');
+          this.showActions('Begin Verification');
+      }
+
+      showCamera() {
+          if (!this.popupElements?.body) return;
+          this.popupElements.body.innerHTML = challengeTemplate();
+
+          this.popupElements.video = this.popupElements.body.querySelector('video');
+          this.popupElements.faceGuide = this.popupElements.body.querySelector('.oa-face-guide');
+          this.popupElements.challengeHud =
+              this.popupElements.body.querySelector('.oa-challenge-hud');
+          this.popupElements.challengeText =
+              this.popupElements.body.querySelector('.oa-challenge-text');
+          this.popupElements.challengeFill =
+              this.popupElements.body.querySelector('.oa-challenge-fill');
+          this.popupElements.videoStatus =
+              this.popupElements.body.querySelector('.oa-video-status p');
+
+          this.hideActions();
+          return this.popupElements.video;
+      }
+
+      showLiveness() {
+          if (this.popupElements?.faceGuide) {
+              this.popupElements.faceGuide.classList.remove('oa-hidden');
+          }
+          if (this.popupElements?.challengeHud) {
+              this.popupElements.challengeHud.classList.remove('oa-hidden');
+          }
+      }
+
+      setHeroStatus(text) {
+          if (this.popupElements?.heroStatus) {
+              this.popupElements.heroStatus.textContent = text;
+          }
+      }
+
+      setVideoStatus(text) {
+          if (this.popupElements?.videoStatus) {
+              this.popupElements.videoStatus.textContent = text;
+          }
+      }
+
+      setInstruction(text) {
+          if (this.popupElements?.challengeText) {
+              this.popupElements.challengeText.textContent = text;
+          }
+      }
+
+      setStatus(text) {
+          this.setVideoStatus(text);
+      }
+
+      setProgress(fraction) {
+          if (this.popupElements?.challengeFill) {
+              this.popupElements.challengeFill.style.width = `${Math.round(fraction * 100)}%`;
+          }
+      }
+
+      setTask(taskId) {
+          if (this.popupElements?.faceGuide) {
+              this.popupElements.faceGuide.setAttribute('data-task', taskId || '');
+          }
+      }
+
+      showActions(label) {
+          if (!this.popupElements?.actions) return;
+          this.popupElements.actions.classList.remove('oa-hidden');
+          if (this.popupElements.startBtn) {
+              this.popupElements.startBtn.textContent = label;
+          }
+      }
+
+      hideActions() {
+          if (this.popupElements?.actions) {
+              this.popupElements.actions.classList.add('oa-hidden');
+          }
+      }
+
+      showResult(outcome, message) {
+          if (outcome === 'pass') {
+              this.closePopup();
+              this.setState('verified');
+              return;
+          }
+
+          if (outcome === 'fail') {
+              if (this.params.size === 'invisible') {
+                  if (this.popupElements?.body) {
+                      this.popupElements.body.innerHTML = resultTemplate(outcome, message);
+                  }
+                  this.hideActions();
+                  this.showActions('Try Again');
+              } else {
+                  this.closePopup();
+                  this.setState('retry');
+              }
+              return;
+          }
+
+          if (outcome === 'retry') {
+              if (this.params.size !== 'invisible') {
+                  this.closePopup();
+                  this.setState('retry');
+                  return;
+              }
+
+              if (this.popupElements?.body) {
+                  this.popupElements.body.innerHTML = resultTemplate(outcome, message);
+              }
+              this.hideActions();
+              this.showActions('Try Again');
+          }
+      }
+
+      showError() {
+          this.setState('retry');
+      }
+
+      clearError() {
+          if (this.elements.errorSlot) {
+              this.elements.errorSlot.innerHTML = '';
+          }
+      }
+
+      closePopup() {
+          if (!this.popup) return;
+          this.popup.cleanup?.();
+          this.popup.themeCleanup?.();
+          this.popup.host.remove();
+          this.popup = null;
+          this.popupElements = null;
+
+          if (this.state === 'loading') {
+              this.setState('idle');
+          }
+      }
+
+      setState(newState) {
+          this.state = newState;
+          const cb = this.elements.checkbox;
+          const box = this.elements.checkBox;
+          if (!cb || !box) return;
+
+          cb.classList.remove('oa-loading', 'oa-verified', 'oa-failed', 'oa-retry', 'oa-expired');
+          cb.setAttribute('aria-checked', 'false');
+          box.innerHTML = '';
+
+          switch (newState) {
+              case 'loading':
+                  cb.classList.add('oa-loading');
+                  box.innerHTML = `<span class="oa-spinner">` + `${SPINNER_SVG}</span>`;
+                  break;
+              case 'verified':
+                  cb.classList.add('oa-verified');
+                  cb.setAttribute('aria-checked', 'true');
+                  box.innerHTML = CHECK_SVG;
+                  break;
+              case 'failed':
+                  cb.classList.add('oa-failed');
+                  box.innerHTML = '✕';
+                  break;
+              case 'retry':
+                  cb.classList.add('oa-retry');
+                  box.innerHTML = RETRY_SVG;
+                  break;
+              case 'expired':
+                  cb.classList.add('oa-expired');
+                  cb.setAttribute('aria-checked', 'false');
+                  break;
+          }
+      }
+
+      getToken() {
+          return this.token;
+      }
+
+      reset() {
+          this.token = null;
+          this.closePopup();
+          this.setState('idle');
+      }
+
+      destroy() {
+          this.closePopup();
+          this.themeCleanup?.();
+          this.host?.remove();
+      }
+  }
+
+  function createModalWidget(params) {
+      const widget = new Widget(document.createElement('div'), { ...params, size: 'invisible' });
+      return widget;
+  }
+
+  function resolveContainer(container) {
+      if (typeof container === 'string') {
+          return document.querySelector(container);
+      }
+      return container;
+  }
+
+  function findPopupPosition(anchorRect, popupRect) {
+      const viewport = {
+          width: window.innerWidth,
+          height: window.innerHeight,
+      };
+
+      const popupWidth = Math.max(popupRect.width || 0, POPUP_MIN_WIDTH);
+      const popupHeight = Math.max(popupRect.height || 0, POPUP_MIN_HEIGHT);
+      const availableWidth = viewport.width - POPUP_MARGIN * 2;
+      const availableHeight = viewport.height - POPUP_MARGIN * 2;
+
+      if (popupWidth > availableWidth || popupHeight > availableHeight) {
+          return { mode: 'modal' };
+      }
+
+      const left = clampLeft(
+          anchorRect.left + anchorRect.width / 2 - popupWidth / 2,
+          viewport.width,
+          popupWidth
+      );
+
+      const topBelow = anchorRect.bottom + POPUP_MARGIN;
+      const topAbove = anchorRect.top - popupHeight - POPUP_MARGIN;
+      const fitsBelow = topBelow + popupHeight <= viewport.height - POPUP_MARGIN;
+      const fitsAbove = topAbove >= POPUP_MARGIN;
+
+      if (fitsBelow || !fitsAbove) {
+          return {
+              mode: 'popup',
+              placement: 'below',
+              top: clampTop(topBelow, viewport.height, popupHeight),
+              left,
+          };
+      }
+
+      return {
+          mode: 'popup',
+          placement: 'above',
+          top: clampTop(topAbove, viewport.height, popupHeight),
+          left,
+      };
+  }
+
+  function clampLeft(left, viewportWidth, popupWidth) {
+      return Math.min(Math.max(POPUP_MARGIN, left), viewportWidth - popupWidth - POPUP_MARGIN);
+  }
+
+  function clampTop(top, viewportHeight, popupHeight) {
+      return Math.min(Math.max(POPUP_MARGIN, top), viewportHeight - popupHeight - POPUP_MARGIN);
+  }
+
+  let FaceLandmarker = null;
+  let landmarker = null;
+  let lastTimestampMs = -1;
+  let visionModule = null;
+
+  async function loadVision() {
+      if (visionModule) return visionModule;
+      visionModule = await import(MEDIAPIPE_VISION);
+      FaceLandmarker = visionModule.FaceLandmarker;
+      return visionModule;
+  }
+
+  async function loadModel() {
+      const response = await fetch(MEDIAPIPE_MODEL);
+      if (!response.ok) {
+          throw new Error('Failed to load face landmarker model');
+      }
+      return new Uint8Array(await response.arrayBuffer());
+  }
+
+  async function initTracker(modelBuffer) {
+      const vision = await loadVision();
+      const resolver = await vision.FilesetResolver.forVisionTasks(MEDIAPIPE_WASM);
+
+      if (landmarker) {
+          landmarker.close();
+      }
+      lastTimestampMs = -1;
+
+      landmarker = await FaceLandmarker.createFromOptions(resolver, {
+          baseOptions: {
+              modelAssetBuffer: new Uint8Array(modelBuffer),
+              delegate: 'GPU',
+          },
+          runningMode: 'VIDEO',
+          numFaces: 2,
+          outputFaceBlendshapes: true,
+          outputFacialTransformationMatrixes: true,
+      });
+  }
+
+  function track(video, timestampMs) {
+      if (!landmarker) return null;
+
+      const normalized = normalizeTimestamp(timestampMs);
+      const result = landmarker.detectForVideo(video, normalized);
+      const faceCount = result.faceLandmarks?.length ?? 0;
+
+      if (faceCount === 0) {
+          return { faceCount: 0, timestampMs: normalized };
+      }
+
+      const landmarks = result.faceLandmarks[0];
+
+      return {
+          faceCount,
+          timestampMs: normalized,
+          landmarks,
+          blendshapes: parseBlendshapes(result.faceBlendshapes?.[0]),
+          headPose: extractHeadPose(result.facialTransformationMatrixes?.[0]),
+          boundingBox: computeBoundingBox(landmarks),
+      };
+  }
+
+  function destroyTracker() {
+      if (landmarker) {
+          landmarker.close();
+          landmarker = null;
+      }
+      lastTimestampMs = -1;
+  }
+
+  function normalizeTimestamp(timestampMs) {
+      const safe = Number.isFinite(timestampMs) ? timestampMs : performance.now();
+      const whole = Math.floor(safe);
+      const normalized = Math.max(whole, lastTimestampMs + 1);
+      lastTimestampMs = normalized;
+      return normalized;
+  }
+
+  function parseBlendshapes(blendshapeResult) {
+      if (!blendshapeResult?.categories) return {};
+      const map = {};
+      for (const category of blendshapeResult.categories) {
+          map[category.categoryName] = category.score;
+      }
+      return map;
+  }
+
+  function extractHeadPose(matrix) {
+      if (!matrix?.data || matrix.data.length < 16) {
+          return { yaw: 0, pitch: 0, roll: 0 };
+      }
+      const m = matrix.data;
+      const deg = 180 / Math.PI;
+      return {
+          yaw: Math.atan2(m[8], m[10]) * deg,
+          pitch: Math.asin(-Math.max(-1, Math.min(1, m[9]))) * deg,
+          roll: Math.atan2(m[1], m[5]) * deg,
+      };
+  }
+
+  function computeBoundingBox(landmarks) {
+      let minX = 1,
+          minY = 1,
+          maxX = 0,
+          maxY = 0;
+
+      for (const point of landmarks) {
+          if (point.x < minX) minX = point.x;
+          if (point.y < minY) minY = point.y;
+          if (point.x > maxX) maxX = point.x;
+          if (point.y > maxY) maxY = point.y;
+      }
+
+      const width = maxX - minX;
+      const height = maxY - minY;
+
+      return {
+          x: minX,
+          y: minY,
+          width,
+          height,
+          area: width * height,
+      };
+  }
+
+  function startPositioning(video, callbacks) {
+      let stableFrames = 0;
+      let cancelled = false;
+
+      const check = () => {
+          if (cancelled) return;
+
+          const result = track(video, performance.now());
+
+          if (!result || result.faceCount === 0) {
+              callbacks.onStatus?.('Look at the camera');
+              stableFrames = 0;
+          } else if (result.faceCount > 1) {
+              callbacks.onStatus?.('Only one person please');
+              stableFrames = 0;
+          } else {
+              callbacks.onStatus?.('Hold still…');
+              stableFrames++;
+          }
+
+          if (stableFrames >= STABLE_FRAMES_REQUIRED) {
+              callbacks.onReady?.();
+              return;
+          }
+
+          setTimeout(check, POSITION_CHECK_MS);
+      };
+
+      check();
+
+      return {
+          cancel: () => {
+              cancelled = true;
+          },
+      };
+  }
+
+  let initialized = false;
+  let faceapi = null;
+
+  function loadScript$1(url) {
+      return new Promise((resolve, reject) => {
+          if (typeof window === 'undefined') {
+              return reject(new Error('No DOM available'));
+          }
+
+          const existing = document.querySelector(`script[src="${url}"]`);
+          if (existing) {
+              if (window.faceapi) return resolve(window.faceapi);
+              existing.addEventListener('load', () => resolve(window.faceapi));
+              return;
+          }
+
+          const script = document.createElement('script');
+          script.src = url;
+          script.crossOrigin = 'anonymous';
+          script.onload = () => resolve(window.faceapi);
+          script.onerror = () => reject(new Error(`Failed to load ${url}`));
+          document.head.appendChild(script);
+      });
+  }
+
+  async function initAgeEstimator() {
+      if (initialized) return;
+
+      faceapi = await loadScript$1(FACEAPI_CDN);
+
+      await Promise.all([
+          faceapi.nets.tinyFaceDetector.loadFromUri(FACEAPI_MODEL_CDN),
+          faceapi.nets.faceLandmark68TinyNet.loadFromUri(FACEAPI_MODEL_CDN),
+          faceapi.nets.ageGenderNet.loadFromUri(FACEAPI_MODEL_CDN),
+      ]);
+
+      initialized = true;
+  }
+
+  async function estimateAge(canvas) {
+      if (!faceapi) {
+          throw new Error('Age estimator not initialized');
+      }
+
+      const detection = await faceapi
+          .detectSingleFace(
+              canvas,
+              new faceapi.TinyFaceDetectorOptions({
+                  inputSize: 224,
+              })
+          )
+          .withFaceLandmarks(true)
+          .withAgeAndGender();
+
+      if (!detection) return null;
+
+      return {
+          age: detection.age,
+          gender: detection.gender,
+          confidence: detection.detection.score,
+      };
+  }
+
+  async function estimateAgeBurst(frames) {
+      const results = [];
+      for (const frame of frames) {
+          const result = await estimateAge(frame);
+          if (result) results.push(result);
+      }
+      return results;
+  }
+
+  const TASKS = [
+      {
+          id: 'turn-left',
+          instruction: 'Turn your head to the left',
+          check: (h) => detectYawShift(h, 20),
+      },
+      {
+          id: 'turn-right',
+          instruction: 'Turn your head to the right',
+          check: (h) => detectYawShift(h, -20),
+      },
+      {
+          id: 'nod',
+          instruction: 'Nod your head down then up',
+          check: (h) => detectNod(h),
+      },
+      {
+          id: 'blink-twice',
+          instruction: 'Blink twice',
+          check: (h) => detectDoubleBlink(h),
+      },
+      {
+          id: 'move-closer',
+          instruction: 'Move closer then back',
+          check: (h) => detectDistanceChange(h),
+      },
+  ];
+
+  function pickTasks(count = TASK_COUNT) {
+      const shuffled = [...TASKS].sort(() => Math.random() - 0.5);
+      return shuffled.slice(0, count);
+  }
+
+  function createSession(tasks) {
+      return {
+          tasks: pickTasks(),
+          currentIndex: 0,
+          history: [],
+          taskStartTime: 0,
+          completedTasks: 0,
+          requiredPasses: REQUIRED_TASK_PASSES,
+          failed: false,
+          failReason: null,
+      };
+  }
+
+  function processFrame(session, trackingResult) {
+      if (session.failed || isComplete(session)) return;
+      if (session.currentIndex >= session.tasks.length) return;
+      if (!trackingResult || trackingResult.faceCount === 0) return;
+
+      if (trackingResult.faceCount > 1) {
+          session.failed = true;
+          session.failReason = null;
+          return;
+      }
+
+      const entry = {
+          timestamp: trackingResult.timestampMs,
+          headPose: trackingResult.headPose,
+          blendshapes: trackingResult.blendshapes,
+          boundingBox: trackingResult.boundingBox,
+      };
+
+      if (session.history.length === 0) {
+          session.taskStartTime = trackingResult.timestampMs;
+      }
+
+      session.history.push(entry);
+
+      const elapsed = trackingResult.timestampMs - session.taskStartTime;
+
+      if (elapsed > TASK_TIMEOUT_MS) {
+          advanceTask(session);
+          return;
+      }
+
+      if (elapsed < MIN_TASK_TIME_MS) return;
+
+      const task = session.tasks[session.currentIndex];
+      if (!task.check(session.history)) return;
+
+      if (isSuspicious(session.history)) {
+          session.failed = true;
+          session.failReason = null;
+          return;
+      }
+
+      session.completedTasks++;
+      advanceTask(session);
+  }
+
+  function isComplete(session) {
+      return session.currentIndex >= session.tasks.length;
+  }
+
+  function isPassed(session) {
+      return session.completedTasks >= session.requiredPasses;
+  }
+
+  function currentInstruction(session) {
+      if (session.currentIndex >= session.tasks.length) {
+          return null;
+      }
+      return session.tasks[session.currentIndex].instruction;
+  }
+
+  function currentTaskId(session) {
+      if (session.currentIndex >= session.tasks.length) {
+          return null;
+      }
+      return session.tasks[session.currentIndex].id;
+  }
+
+  function progress(session) {
+      if (session.tasks.length === 0) return 1;
+      return Math.min(session.currentIndex / session.tasks.length, 1);
+  }
+
+  function advanceTask(session) {
+      session.currentIndex++;
+      session.history = [];
+      session.taskStartTime = 0;
+
+      const remaining = session.tasks.length - session.currentIndex;
+      const canStillPass = session.completedTasks + remaining >= session.requiredPasses;
+
+      if (!canStillPass) {
+          session.failed = true;
+          session.failReason = null;
+      }
+  }
+
+  function detectYawShift(history, targetDelta) {
+      if (history.length < 5) return false;
+      const baseYaw = history[0].headPose.yaw;
+      const direction = Math.sign(targetDelta);
+      const threshold = Math.abs(targetDelta);
+
+      return history.some((entry) => {
+          const delta = (entry.headPose.yaw - baseYaw) * direction;
+          return delta > threshold;
+      });
+  }
+
+  function detectNod(history) {
+      if (history.length < 10) return false;
+      const basePitch = history[0].headPose.pitch;
+      let wentDown = false;
+      let cameBack = false;
+
+      for (const entry of history) {
+          const delta = entry.headPose.pitch - basePitch;
+          if (delta > 15) wentDown = true;
+          if (wentDown && Math.abs(delta) < 8) cameBack = true;
+      }
+
+      return wentDown && cameBack;
+  }
+
+  function detectDoubleBlink(history) {
+      if (history.length < 10) return false;
+      let blinkCount = 0;
+      let eyesClosed = false;
+
+      for (const entry of history) {
+          const left = entry.blendshapes.eyeBlinkLeft ?? 0;
+          const right = entry.blendshapes.eyeBlinkRight ?? 0;
+          const bothClosed = left > 0.6 && right > 0.6;
+
+          if (bothClosed && !eyesClosed) {
+              blinkCount++;
+              eyesClosed = true;
+          } else if (!bothClosed) {
+              eyesClosed = false;
+          }
+      }
+
+      return blinkCount >= 2;
+  }
+
+  function detectDistanceChange(history) {
+      if (history.length < 10) return false;
+      const baseArea = history[0].boundingBox.area;
+      let wentCloser = false;
+      let cameBack = false;
+
+      for (const entry of history) {
+          const ratio = entry.boundingBox.area / baseArea;
+          if (ratio > 1.3) wentCloser = true;
+          if (wentCloser && ratio < 1.15) cameBack = true;
+      }
+
+      return wentCloser && cameBack;
+  }
+
+  function isSuspicious(history) {
+      if (history.length < 5) return false;
+
+      const deltas = [];
+      for (let i = 1; i < history.length; i++) {
+          const dy = Math.abs(history[i].headPose.yaw - history[i - 1].headPose.yaw);
+          const dp = Math.abs(history[i].headPose.pitch - history[i - 1].headPose.pitch);
+          deltas.push(dy + dp);
+      }
+
+      if (deltas.every((d) => d < 0.1)) return true;
+
+      const mean = deltas.reduce((a, b) => a + b, 0) / deltas.length;
+      const variance = deltas.reduce((s, d) => s + (d - mean) ** 2, 0) / deltas.length;
+
+      return variance < 0.01 && mean > 0.5;
+  }
+
+  function base64UrlEncode(data) {
+      const text = typeof data === 'string' ? data : String.fromCharCode(...new Uint8Array(data));
+      return btoa(text).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+  }
+
+  function base64UrlDecode(str) {
+      const padded = str + '='.repeat((4 - (str.length % 4)) % 4);
+      const binary = atob(padded.replace(/-/g, '+').replace(/_/g, '/'));
+      return Uint8Array.from(binary, (c) => c.charCodeAt(0));
+  }
+
+  async function getSigningKey() {
+      const raw = crypto.getRandomValues(new Uint8Array(32));
+      return crypto.subtle.importKey('raw', raw, { name: 'HMAC', hash: 'SHA-256' }, false, [
+          'sign',
+          'verify',
+      ]);
+  }
+
+  let cachedKey = null;
+
+  async function ensureKey() {
+      if (!cachedKey) cachedKey = await getSigningKey();
+      return cachedKey;
+  }
+
+  async function createToken(payload) {
+      const key = await ensureKey();
+
+      const header = base64UrlEncode(JSON.stringify({ alg: 'HS256', typ: 'JWT' }));
+
+      const body = base64UrlEncode(
+          JSON.stringify({
+              ...payload,
+              iat: Math.floor(Date.now() / 1000),
+              exp: Math.floor(Date.now() / 1000) + TOKEN_EXPIRY_S,
+          })
+      );
+
+      const data = new TextEncoder().encode(`${header}.${body}`);
+      const signature = await crypto.subtle.sign('HMAC', key, data);
+
+      return `${header}.${body}.${base64UrlEncode(signature)}`;
+  }
+
+  async function verifyToken(token) {
+      const key = await ensureKey();
+      const [header, body, sig] = token.split('.');
+
+      if (!header || !body || !sig) return null;
+
+      let signature;
+      let data;
+      try {
+          data = new TextEncoder().encode(`${header}.${body}`);
+          signature = base64UrlDecode(sig);
+      } catch {
+          return null;
+      }
+
+      const valid = await crypto.subtle.verify('HMAC', key, signature, data);
+
+      if (!valid) return null;
+
+      const decoded = JSON.parse(new TextDecoder().decode(base64UrlDecode(body)));
+
+      if (decoded.exp && decoded.exp < Date.now() / 1000) {
+          return null;
+      }
+
+      return decoded;
+  }
+
+  function decodeToken(token) {
+      const [, body] = token.split('.');
+      if (!body) return null;
+      return JSON.parse(new TextDecoder().decode(base64UrlDecode(body)));
+  }
+
+  function createTransport(mode, options = {}) {
+      if (mode === 'serverless') {
+          return createServerlessTransport();
+      }
+
+      const baseUrl = mode === 'custom' ? options.server : 'https://api.openage.dev';
+
+      return createServerTransport(baseUrl, options);
+  }
+
+  function createServerlessTransport(options) {
+      return {
+          async verify(payload) {
+              const { estimatedAge, livenessOk } = payload;
+
+              if (!livenessOk) {
+                  return { success: false, token: null };
+              }
+
+              const token = await createToken({
+                  estimatedAge,
+                  livenessOk: true,
+                  mode: 'serverless',
+              });
+
+              return { success: true, token };
+          },
+          close() {},
+      };
+  }
+
+  function createServerTransport(baseUrl, options) {
+      let session = null;
+      let channel = null;
+
+      return {
+          async createSession() {
+              const transports = [];
+              if (typeof WebSocket !== 'undefined') {
+                  transports.push('websocket');
+              }
+              transports.push('poll');
+
+              const response = await fetch(`${baseUrl}/api/session`, {
+                  method: 'POST',
+                  headers: {
+                      'Content-Type': 'application/json',
+                  },
+                  body: JSON.stringify({
+                      sitekey: options.sitekey,
+                      action: options.action,
+                      supportedTransports: transports,
+                  }),
+              });
+
+              if (!response.ok) {
+                  throw new Error('Request failed');
+              }
+
+              session = await response.json();
+              return session;
+          },
+
+          openChannel() {
+              if (!session) {
+                  throw new Error('No session');
+              }
+
+              if (session.transport === 'websocket') {
+                  channel = createWsChannel(baseUrl, session.sessionId);
+              } else {
+                  channel = createPollChannel(baseUrl, session.sessionId);
+              }
+          },
+
+          async receive() {
+              if (!channel) return null;
+              return channel.receive();
+          },
+
+          async send(data) {
+              if (!channel) return;
+              return channel.send(data);
+          },
+
+          async sendAndReceive(data) {
+              if (!channel) return null;
+              return channel.sendAndReceive(data);
+          },
+
+          async verify(payload) {
+              if (channel) {
+                  return this.verifyViaChannel(payload);
+              }
+
+              const response = await fetch(`${baseUrl}/verify`, {
+                  method: 'POST',
+                  headers: {
+                      'Content-Type': 'application/json',
+                  },
+                  body: JSON.stringify({
+                      response: payload.token,
+                      sitekey: options.sitekey,
+                      action: options.action,
+                  }),
+              });
+
+              if (!response.ok) {
+                  return {
+                      success: false,
+                      token: null,
+                  };
+              }
+
+              return response.json();
+          },
+
+          async verifyViaChannel(payload) {
+              await channel.send(payload);
+              return channel.receive();
+          },
+
+          getSession() {
+              return session;
+          },
+
+          close() {
+              channel?.close();
+              channel = null;
+              session = null;
+          },
+      };
+  }
+
+  function createWsChannel(baseUrl, sessionId) {
+      const wsUrl = baseUrl.replace(/^http/, 'ws').replace(/\/$/, '');
+      const url = `${wsUrl}/api/ws/${sessionId}`;
+      const ws = new WebSocket(url);
+      let pending = [];
+      let closed = false;
+
+      const waitReady = new Promise((resolve, reject) => {
+          ws.onopen = () => {
+              resolve();
+          };
+          ws.onerror = () => {
+              reject(new Error('Connection failed'));
+          };
+      });
+
+      ws.onmessage = (event) => {
+          const message = JSON.parse(event.data);
+          const resolver = pending.shift();
+          if (resolver) resolver(message);
+      };
+
+      ws.onclose = () => {
+          closed = true;
+          for (const resolver of pending) resolver(null);
+          pending = [];
+      };
+
+      return {
+          receive() {
+              if (closed) return Promise.resolve(null);
+              return new Promise((resolve) => {
+                  pending.push(resolve);
+              });
+          },
+          async send(data) {
+              await waitReady;
+              ws.send(JSON.stringify(data));
+          },
+          async sendAndReceive(data) {
+              await waitReady;
+              ws.send(JSON.stringify(data));
+              return this.receive();
+          },
+          close() {
+              closed = true;
+              ws.close();
+          },
+      };
+  }
+
+  function createPollChannel(baseUrl, sessionId) {
+      return {
+          async receive() {
+              const response = await fetch(`${baseUrl}/api/poll/${sessionId}`);
+              if (!response.ok) {
+                  throw new Error('Request failed');
+              }
+              return response.json();
+          },
+          async send(data) {
+              const response = await fetch(`${baseUrl}/api/verify/${sessionId}`, {
+                  method: 'POST',
+                  headers: {
+                      'Content-Type': 'application/json',
+                  },
+                  body: JSON.stringify(data),
+              });
+              if (!response.ok) {
+                  throw new Error('Request failed');
+              }
+          },
+          async sendAndReceive(data) {
+              const response = await fetch(`${baseUrl}/api/verify/${sessionId}`, {
+                  method: 'POST',
+                  headers: {
+                      'Content-Type': 'application/json',
+                  },
+                  body: JSON.stringify(data),
+              });
+              if (!response.ok) {
+                  throw new Error('Request failed');
+              }
+              return response.json();
+          },
+          close() {},
+      };
+  }
+
+  let wasmModule = null;
+  let vmSession = null;
+  let challengeBundle = null;
+  let _faceData = null;
+  let _challengeParams = null;
+  let _bridge = null;
+
+  function loadScript(url) {
+      return new Promise((resolve, reject) => {
+          const existing = document.querySelector(`script[src="${url}"]`);
+          if (existing) return resolve();
+
+          const script = document.createElement('script');
+          script.src = url;
+          script.onload = resolve;
+          script.onerror = () => {
+              reject(new Error(`Failed to load ${url}`));
+          };
+          document.head.appendChild(script);
+      });
+  }
+
+  async function initVM(session) {
+      vmSession = session;
+
+      await loadScript(session.wasmJs);
+
+      const loaderModule = await import(session.loaderJs);
+      wasmModule = await loaderModule.initModule(session.wasmBin);
+
+      const initFn = session.exports.vm_init;
+      const result = wasmModule[`_${initFn}`]();
+      if (result !== 0) throw new Error('VM init failed');
+
+      const bundleResponse = await fetch(session.challengeVmbc);
+      challengeBundle = new Uint8Array(await bundleResponse.arrayBuffer());
+  }
+
+  async function decryptModel(session, modelId) {
+      if (!wasmModule || !vmSession) {
+          throw new Error('VM not loaded');
+      }
+
+      const modelInfo = session.models[modelId];
+      if (!modelInfo) {
+          throw new Error(`Unknown model: ${modelId}`);
+      }
+
+      const response = await fetch(modelInfo.url);
+      if (!response.ok) {
+          throw new Error(`Failed to fetch model: ${modelId}`);
+      }
+
+      const encrypted = new Uint8Array(await response.arrayBuffer());
+
+      const decryptFn = session.exports.vm_decrypt_blob;
+      const freeFn = session.exports.vm_free;
+      const length = encrypted.length;
+
+      const inputPtr = wasmModule._malloc(length);
+      wasmModule.HEAPU8.set(encrypted, inputPtr);
+
+      const outLenPtr = wasmModule._malloc(4);
+      const outPtr = wasmModule[`_${decryptFn}`](inputPtr, length, outLenPtr);
+      wasmModule._free(inputPtr);
+
+      if (!outPtr) {
+          wasmModule._free(outLenPtr);
+          throw new Error(`Decryption failed: ${modelId}`);
+      }
+
+      const outLen = readU32(wasmModule, outLenPtr);
+      wasmModule._free(outLenPtr);
+
+      const result = new Uint8Array(outLen);
+      result.set(wasmModule.HEAPU8.subarray(outPtr, outPtr + outLen));
+      wasmModule[`_${freeFn}`](outPtr);
+      return result.buffer;
+  }
+
+  function readU32(mod, ptr) {
+      return (
+          mod.HEAPU8[ptr] |
+          (mod.HEAPU8[ptr + 1] << 8) |
+          (mod.HEAPU8[ptr + 2] << 16) |
+          (mod.HEAPU8[ptr + 3] << 24)
+      );
+  }
+
+  function defineVmGlobal(name, getter) {
+      try {
+          delete window[name];
+      } catch (_) {}
+      Object.defineProperty(window, name, {
+          get: getter,
+          set() {},
+          configurable: true,
+      });
+  }
+
+  function setFaceData(faceData) {
+      _faceData = faceData;
+      defineVmGlobal('__vmFaceData', () => _faceData);
+  }
+
+  function setChallengeParams(params) {
+      _challengeParams = params;
+      defineVmGlobal('__vmChallenge', () => _challengeParams);
+  }
+
+  function registerBridge(bridge) {
+      _bridge = Object.freeze({ ...bridge });
+      defineVmGlobal('__vmBridge', () => _bridge);
+  }
+
+  function unregisterBridge() {
+      _bridge = null;
+      try {
+          delete window.__vmBridge;
+      } catch (_) {}
+  }
+
+  function executeChallenge() {
+      if (!wasmModule || !challengeBundle) {
+          throw new Error('VM not loaded');
+      }
+
+      const execFn = vmSession.exports.vm_exec_bytecode;
+      const freeFn = vmSession.exports.vm_free;
+      const length = challengeBundle.length;
+
+      const inputPtr = wasmModule._malloc(length);
+      wasmModule.HEAPU8.set(challengeBundle, inputPtr);
+
+      const outLenPtr = wasmModule._malloc(4);
+      const outPtr = wasmModule[`_${execFn}`](inputPtr, length, outLenPtr);
+      wasmModule._free(inputPtr);
+
+      if (!outPtr) {
+          wasmModule._free(outLenPtr);
+          const errFn = vmSession.exports.vm_last_error;
+          let message = 'VM execution failed';
+          if (errFn) {
+              const errPtr = wasmModule[`_${errFn}`]();
+              if (errPtr) {
+                  const detail = wasmModule.UTF8ToString(errPtr);
+                  if (detail) message = detail;
+              }
+          }
+          throw new Error(message);
+      }
+
+      const outLen = readU32(wasmModule, outLenPtr);
+      wasmModule._free(outLenPtr);
+
+      const result = new Uint8Array(outLen);
+      result.set(wasmModule.HEAPU8.subarray(outPtr, outPtr + outLen));
+      wasmModule[`_${freeFn}`](outPtr);
+      return result;
+  }
+
+  function toBase64(bytes) {
+      let binary = '';
+      for (let i = 0; i < bytes.length; i++) {
+          binary += String.fromCharCode(bytes[i]);
+      }
+      return btoa(binary);
+  }
+
+  function destroyVM() {
+      if (!wasmModule || !vmSession) return;
+
+      const destroyFn = vmSession.exports.vm_destroy;
+      if (destroyFn) {
+          wasmModule[`_${destroyFn}`]();
+      }
+
+      wasmModule = null;
+      vmSession = null;
+      challengeBundle = null;
+      _faceData = null;
+      _challengeParams = null;
+      _bridge = null;
+
+      for (const name of ['__vmFaceData', '__vmChallenge', '__vmBridge']) {
+          try {
+              delete window[name];
+          } catch (_) {}
+      }
+  }
+
+  const decryptedCache = new Map();
+
+  async function decryptAndCache(session, modelId) {
+      if (decryptedCache.has(modelId)) {
+          return decryptedCache.get(modelId);
+      }
+
+      const buffer = await decryptModel(session, modelId);
+      decryptedCache.set(modelId, buffer);
+      return buffer;
+  }
+
+  async function ensureModels(session, onProgress) {
+      await decryptAndCache(session, 'mediapipe');
+  }
+
+  async function getMediaPipeModelBuffer(session) {
+      return decryptAndCache(session, 'mediapipe');
+  }
+
+  function clearModelCache() {
+      decryptedCache.clear();
+  }
+
+  let stream = null;
+  let videoElement = null;
+
+  const CAMERA_CONSTRAINTS = {
+      video: {
+          facingMode: 'user',
+          width: { ideal: 640 },
+          height: { ideal: 480 },
+      },
+  };
+
+  function startCamera(video) {
+      return navigator.mediaDevices.getUserMedia(CAMERA_CONSTRAINTS).then((s) => {
+          stream = s;
+          video.srcObject = stream;
+          videoElement = video;
+
+          return new Promise((resolve) => {
+              video.onloadedmetadata = () => {
+                  video.play();
+                  resolve({
+                      width: video.videoWidth,
+                      height: video.videoHeight,
+                  });
+              };
+          });
+      });
+  }
+
+  function captureFrame() {
+      if (!videoElement) return null;
+
+      const canvas = document.createElement('canvas');
+      canvas.width = videoElement.videoWidth;
+      canvas.height = videoElement.videoHeight;
+
+      const context = canvas.getContext('2d');
+      context.drawImage(videoElement, 0, 0);
+      return canvas;
+  }
+
+  function stopCamera() {
+      if (stream) {
+          stream.getTracks().forEach((track) => track.stop());
+          stream = null;
+      }
+      if (videoElement) {
+          videoElement.srcObject = null;
+          videoElement = null;
+      }
+  }
+
+  function computeAge(ageResults) {
+      if (!ageResults || ageResults.length === 0) return null;
+
+      const ages = ageResults.map((r) => r.age).sort((a, b) => a - b);
+
+      const trimmed = ages.length >= 3 ? ages.slice(1, -1) : ages;
+
+      return trimmed.reduce((s, a) => s + a, 0) / trimmed.length;
+  }
+
+  const TASK_LABELS = {
+      'turn-left': 'Turn your head left',
+      'turn-right': 'Turn your head right',
+      nod: 'Nod your head',
+      'blink-twice': 'Blink twice',
+      'move-closer': 'Move closer then back',
+  };
+
+  function sleep(ms) {
+      return new Promise((r) => setTimeout(r, ms));
+  }
+
+  async function runChallenge(widget, emitter) {
+      const mode = widget.params.mode || 'serverless';
+
+      if (mode !== 'serverless' && !widget.params.sitekey) {
+          const err = new Error('Configuration error');
+          widget.showResult?.('fail', 'Verification failed');
+          emitter.emit('error', err, widget.id);
+          widget.params.errorCallback?.(err);
+          return;
+      }
+
+      if (mode === 'serverless') {
+          return runServerless(widget, emitter);
+      }
+      return runServer(widget, emitter);
+  }
+
+  async function runServerless(widget, emitter) {
+      const params = widget.params;
+      let retryCount = 0;
+      let modelBuffer = null;
+
+      try {
+          widget.openPopup();
+          widget.setHeroStatus('Loading…');
+
+          await Promise.all([loadVision(), initAgeEstimator()]);
+
+          modelBuffer = await loadModel();
+          widget.showReady();
+
+          await waitForStart(widget);
+          await startCameraFlow(widget, modelBuffer);
+
+          const transport = createTransport('serverless', params);
+
+          const attempt = async () => {
+              widget.showLiveness();
+              widget.setInstruction('');
+              widget.setVideoStatus('Verifying…');
+
+              const session = createSession();
+              await runLivenessLoop(widget.popupElements.video, session, widget);
+
+              if (session.failed || !isPassed(session)) {
+                  return { outcome: 'retry' };
+              }
+
+              widget.setInstruction('Hold still…');
+              widget.setVideoStatus('Processing…');
+              const frames = await captureFrameBurst(BURST_FRAMES, BURST_INTERVAL_MS);
+
+              const ageResults = await estimateAgeBurst(frames);
+              const estimatedAge = computeAge(ageResults);
+
+              const result = await transport.verify({
+                  estimatedAge,
+                  livenessOk: true,
+              });
+
+              return {
+                  outcome: result.token ? 'pass' : 'fail',
+                  token: result.token,
+              };
+          };
+
+          let result = await attempt();
+
+          while (result.outcome === 'retry' && retryCount < MAX_RETRIES) {
+              retryCount++;
+              widget.showResult('retry', 'Please try again');
+              await waitForStart(widget);
+              await startCameraFlow(widget, modelBuffer);
+              result = await attempt();
+          }
+
+          cleanupLocal();
+          emitResult(widget, emitter, result);
+      } catch (error) {
+          cleanupLocal();
+          widget.showResult('fail', 'Verification failed');
+          emitter.emit('error', error, widget.id);
+          params.errorCallback?.(error);
+      }
+  }
+
+  async function runServer(widget, emitter) {
+      const params = widget.params;
+
+      try {
+          widget.openPopup();
+          widget.setHeroStatus('Connecting…');
+
+          const transport = createTransport(params.mode, params);
+          const session = await transport.createSession();
+
+          widget.setHeroStatus('Loading…');
+          await initVM(session);
+
+          widget.setHeroStatus('Preparing…');
+          await ensureModels(session, () => {});
+
+          await loadVision();
+          const buf = await getMediaPipeModelBuffer(session);
+          await initTracker(buf);
+
+          registerBridge({
+              trackFace: () => {
+                  const video = widget.popupElements?.video;
+                  if (!video) return 'null';
+                  const r = track(video, performance.now());
+                  if (!r) return 'null';
+                  return JSON.stringify({
+                      ts: r.timestampMs ?? performance.now(),
+                      faceCount: r.faceCount,
+                      headPose: r.headPose || null,
+                      blendshapes: r.blendshapes || null,
+                      boundingBox: r.boundingBox || null,
+                  });
+              },
+              captureFrame: () => (captureFrame() ? 'true' : 'null'),
+          });
+
+          widget.showReady();
+          await waitForStart(widget);
+
+          const video = widget.showCamera();
+          widget.setVideoStatus('Requesting camera…');
+          await startCamera(video);
+          exposeMirrorVideo(video);
+
+          widget.setVideoStatus('Position your face');
+          await waitForPositioning(video, widget);
+
+          widget.showLiveness();
+          transport.openChannel();
+
+          let challenge = await transport.receive();
+          const rounds = session.rounds;
+
+          for (let i = 0; i < rounds; i++) {
+              if (!challenge) {
+                  cleanupVM(transport);
+                  widget.showResult('fail', 'Verification failed');
+                  emitter.emit('error', 'failed', widget.id);
+                  return;
+              }
+
+              if (challenge.type === 'verdict') {
+                  cleanupVM(transport);
+                  emitVerdict(widget, emitter, challenge);
+                  return;
+              }
+
+              if (challenge.type === 'timeout') {
+                  cleanupVM(transport);
+                  widget.showResult('fail', 'Verification failed');
+                  emitter.emit('error', 'failed', widget.id);
+                  return;
+              }
+
+              widget.setVideoStatus(`Step ${i + 1} of ${rounds}`);
+
+              const task = challenge.token?.task;
+              widget.setInstruction(TASK_LABELS[task] ?? 'Look at the camera');
+              widget.setTask(task);
+              widget.setProgress(i / rounds);
+
+              const faceData = await captureMotion(widget);
+              setFaceData(faceData);
+              setChallengeParams(challenge.token);
+
+              let vmOut;
+              try {
+                  vmOut = executeChallenge();
+              } catch {
+                  cleanupVM(transport);
+                  widget.showResult('fail', 'Verification failed');
+                  emitter.emit('error', 'failed', widget.id);
+                  return;
+              }
+
+              const payload = {
+                  token: challenge.token,
+                  tokenSignature: challenge.tokenSignature,
+                  response: toBase64(vmOut),
+              };
+
+              const result = await transport.sendAndReceive(payload);
+
+              if (!result) {
+                  cleanupVM(transport);
+                  widget.showResult('fail', 'Verification failed');
+                  emitter.emit('error', 'failed', widget.id);
+                  return;
+              }
+
+              if (result.complete) {
+                  cleanupVM(transport);
+                  emitVerdict(widget, emitter, result);
+                  return;
+              }
+
+              if (result.hint) {
+                  widget.setVideoStatus(result.hint);
+                  await sleep(1000);
+              }
+
+              challenge = result.nextChallenge || null;
+          }
+
+          cleanupVM(transport);
+      } catch (error) {
+          cleanupVM();
+          widget.showResult('fail', 'Verification failed');
+          emitter.emit('error', error, widget.id);
+          params.errorCallback?.(error);
+      }
+  }
+
+  function emitVerdict(widget, emitter, response) {
+      const verdict = response?.verdict || response;
+      const token = verdict?.token || null;
+      const params = widget.params;
+
+      if (token) {
+          widget.token = token;
+          widget.showResult('pass', 'Verified');
+          emitter.emit('verified', token, widget.id);
+          params.callback?.(token);
+          return;
+      }
+
+      widget.showResult('fail', 'Verification failed');
+      emitter.emit('error', 'failed', widget.id);
+      params.errorCallback?.('failed');
+  }
+
+  async function captureMotion(widget) {
+      const video = widget.popupElements?.video;
+      const history = [];
+      const start = performance.now();
+
+      while (performance.now() - start < MOTION_CAPTURE_MS) {
+          const r = track(video, performance.now());
+          if (r && r.faceCount === 1) {
+              history.push({
+                  ts: r.timestampMs,
+                  headPose: r.headPose,
+                  blendshapes: r.blendshapes,
+                  boundingBox: r.boundingBox,
+              });
+          }
+          await sleep(MOTION_SAMPLE_MS);
+      }
+
+      return {
+          faceCount: history.length > 0 ? 1 : 0,
+          motionHistory: history,
+      };
+  }
+
+  function emitResult(widget, emitter, result) {
+      const params = widget.params;
+
+      if (result.outcome === 'pass') {
+          widget.token = result.token || null;
+          widget.showResult('pass', 'Verified');
+          emitter.emit('verified', result.token, widget.id);
+          params.callback?.(result.token);
+      } else {
+          widget.showResult('fail', 'Verification failed');
+          emitter.emit('error', 'failed', widget.id);
+          params.errorCallback?.('failed');
+      }
+  }
+
+  function waitForStart(widget) {
+      return new Promise((resolve) => {
+          widget.onStartClick = () => {
+              widget.onStartClick = null;
+              resolve();
+          };
+      });
+  }
+
+  async function startCameraFlow(widget, modelBuffer) {
+      const video = widget.showCamera();
+      widget.setVideoStatus('Requesting camera…');
+      await startCamera(video);
+
+      widget.setVideoStatus('Preparing…');
+      await initTracker(modelBuffer);
+
+      widget.setVideoStatus('Position your face');
+      await waitForPositioning(video, widget);
+  }
+
+  function waitForPositioning(video, widget) {
+      return new Promise((resolve, reject) => {
+          const handle = startPositioning(video, {
+              onStatus: (text) => widget.setVideoStatus(text),
+              onReady: () => resolve(),
+          });
+
+          setTimeout(() => {
+              handle.cancel();
+              reject(new Error('Positioning timeout'));
+          }, 30000);
+      });
+  }
+
+  async function runLivenessLoop(video, session, widget) {
+      return new Promise((resolve) => {
+          const loop = () => {
+              const tracking = track(video, performance.now());
+              if (tracking) processFrame(session, tracking);
+
+              widget.setInstruction(currentInstruction(session) || 'Done');
+              widget.setTask(currentTaskId(session));
+              widget.setProgress(progress(session));
+              widget.setVideoStatus(
+                  `Check ` +
+                      `${Math.min(session.currentIndex + 1, session.tasks.length)}` +
+                      ` of ${session.tasks.length}`
+              );
+
+              if (session.failed || isComplete(session)) {
+                  resolve();
+                  return;
+              }
+
+              requestAnimationFrame(loop);
+          };
+
+          requestAnimationFrame(loop);
+      });
+  }
+
+  async function captureFrameBurst(count, interval) {
+      const frames = [];
+      for (let i = 0; i < count; i++) {
+          const frame = captureFrame();
+          if (frame) frames.push(frame);
+          if (i < count - 1) await sleep(interval);
+      }
+      return frames;
+  }
+
+  function cleanupLocal() {
+      stopCamera();
+      destroyTracker();
+  }
+
+  function cleanupVM(transport) {
+      stopCamera();
+      removeMirrorVideo();
+      destroyTracker();
+      unregisterBridge();
+      destroyVM();
+      clearModelCache();
+      transport?.close();
+  }
+
+  function exposeMirrorVideo(source) {
+      removeMirrorVideo();
+      if (!source?.srcObject) return;
+      const mirror = document.createElement('video');
+      mirror.id = '__openage_mirror';
+      mirror.srcObject = source.srcObject;
+      mirror.autoplay = true;
+      mirror.muted = true;
+      mirror.playsInline = true;
+      mirror.style.cssText =
+          'position:fixed;width:1px;height:1px;' + 'opacity:0;pointer-events:none;z-index:-1;';
+      document.body.appendChild(mirror);
+  }
+
+  function removeMirrorVideo() {
+      document.getElementById('__openage_mirror')?.remove();
+  }
+
+  class EventEmitter {
+      constructor() {
+          this.listeners = new Map();
+      }
+
+      on(event, handler) {
+          if (!this.listeners.has(event)) {
+              this.listeners.set(event, new Set());
+          }
+          this.listeners.get(event).add(handler);
+          return this;
+      }
+
+      off(event, handler) {
+          const handlers = this.listeners.get(event);
+          if (handlers) handlers.delete(handler);
+          return this;
+      }
+
+      once(event, handler) {
+          const wrapper = (...args) => {
+              this.off(event, wrapper);
+              handler(...args);
+          };
+          wrapper._original = handler;
+          return this.on(event, wrapper);
+      }
+
+      emit(event, ...args) {
+          const handlers = this.listeners.get(event);
+          if (!handlers) return;
+          for (const handler of [...handlers]) {
+              handler(...args);
+          }
+      }
+
+      removeAllListeners(event) {
+          if (event) {
+              this.listeners.delete(event);
+          } else {
+              this.listeners.clear();
+          }
+          return this;
+      }
+  }
+
+  const emitter = new EventEmitter();
+  const widgets = new Map();
+
+  function normalizeParams(params) {
+      const globalConfig = typeof window !== 'undefined' ? window.openage || {} : {};
+
+      return {
+          mode: 'serverless',
+          theme: 'auto',
+          size: 'normal',
+          minAge: 18,
+          ...globalConfig,
+          ...params,
+      };
+  }
+
+  function startWidget(widget) {
+      widget.onChallenge = () => {
+          emitter.emit('opened', widget.id);
+          runChallenge(widget, emitter);
+      };
+  }
+
+  function render(container, params = {}) {
+      const normalized = normalizeParams(params);
+      const widget = new Widget(container, normalized);
+      widgets.set(widget.id, widget);
+      startWidget(widget);
+      return widget.id;
+  }
+
+  function open(params = {}) {
+      const normalized = normalizeParams(params);
+      const widget = createModalWidget(normalized);
+      widget.anchorElement = normalized.anchorElement || null;
+      widgets.set(widget.id, widget);
+
+      widget.onChallenge = () => {
+          emitter.emit('opened', widget.id);
+          runChallenge(widget, emitter);
+      };
+
+      widget.startChallenge();
+      return widget.id;
+  }
+
+  function bind(element, params = {}) {
+      const normalized = normalizeParams(params);
+      const target = typeof element === 'string' ? document.querySelector(element) : element;
+
+      if (!target) {
+          throw new Error('OpenAge: element not found');
+      }
+
+      let isReplayingClick = false;
+      let activeWidgetId = null;
+
+      const replayTargetClick = () => {
+          isReplayingClick = true;
+          try {
+              target.click();
+          } finally {
+              isReplayingClick = false;
+          }
+      };
+
+      const clearActiveWidget = () => {
+          activeWidgetId = null;
+      };
+
+      const handler = (event) => {
+          if (isReplayingClick || activeWidgetId) {
+              return;
+          }
+
+          event.preventDefault();
+          event.stopPropagation();
+          event.stopImmediatePropagation?.();
+
+          const widgetId = open({
+              ...normalized,
+              anchorElement: target,
+              callback: (token) => {
+                  normalized.callback?.(token);
+                  clearActiveWidget();
+                  replayTargetClick();
+              },
+              errorCallback: (error) => {
+                  clearActiveWidget();
+                  normalized.errorCallback?.(error);
+              },
+              closeCallback: () => {
+                  clearActiveWidget();
+                  normalized.closeCallback?.();
+              },
+          });
+
+          activeWidgetId = widgetId;
+
+          return widgetId;
+      };
+
+      target.addEventListener('click', handler, true);
+
+      return () => {
+          target.removeEventListener('click', handler, true);
+      };
+  }
+
+  function reset(widgetId) {
+      widgets.get(widgetId)?.reset();
+  }
+
+  function remove(widgetId) {
+      const widget = widgets.get(widgetId);
+      if (!widget) return;
+      widget.destroy();
+      widgets.delete(widgetId);
+  }
+
+  function getToken(widgetId) {
+      return widgets.get(widgetId)?.getToken() || null;
+  }
+
+  function execute(widgetId) {
+      const widget = widgets.get(widgetId);
+      if (!widget) return;
+      widget.startChallenge();
+  }
+
+  function challenge(params = {}) {
+      return new Promise((resolve, reject) => {
+          open({
+              ...params,
+              callback: (token) => resolve(token),
+              errorCallback: (error) => reject(typeof error === 'string' ? new Error(error) : error),
+              closeCallback: () => reject(new Error('User dismissed')),
+          });
+      });
+  }
+
+  function on(event, handler) {
+      emitter.on(event, handler);
+  }
+
+  function off(event, handler) {
+      emitter.off(event, handler);
+  }
+
+  function once(event, handler) {
+      emitter.once(event, handler);
+  }
+
+  function autoRender() {
+      if (typeof document === 'undefined') return;
+
+      const globalConfig = typeof window !== 'undefined' ? window.openage || {} : {};
+
+      if (globalConfig.render === 'explicit') return;
+
+      const elements = document.querySelectorAll('.openage');
+
+      for (const element of elements) {
+          const params = {
+              sitekey: element.dataset.sitekey,
+              theme: element.dataset.theme,
+              size: element.dataset.size,
+              action: element.dataset.action,
+              mode: element.dataset.mode,
+              server: element.dataset.server,
+          };
+
+          if (element.dataset.callback) {
+              params.callback = (token) => {
+                  const fn = window[element.dataset.callback];
+                  if (typeof fn === 'function') fn(token);
+              };
+          }
+
+          if (element.dataset.errorCallback) {
+              params.errorCallback = (error) => {
+                  const fn = window[element.dataset.errorCallback];
+                  if (typeof fn === 'function') fn(error);
+              };
+          }
+
+          if (element.dataset.expiredCallback) {
+              params.expiredCallback = () => {
+                  const fn = window[element.dataset.expiredCallback];
+                  if (typeof fn === 'function') fn();
+              };
+          }
+
+          if (element.dataset.bind) {
+              const target = document.getElementById(element.dataset.bind);
+              if (target) {
+                  bind(target, params);
+                  continue;
+              }
+          }
+
+          render(element, params);
+      }
+
+      const onloadName = document.currentScript?.dataset?.onload;
+      if (onloadName && typeof window[onloadName] === 'function') {
+          window[onloadName]();
+      }
+  }
+
+  if (typeof document !== 'undefined') {
+      if (document.readyState === 'loading') {
+          document.addEventListener('DOMContentLoaded', autoRender);
+      } else {
+          autoRender();
+      }
+  }
+
+  const OpenAge = {
+      render,
+      open,
+      bind,
+      reset,
+      remove,
+      getToken,
+      execute,
+      challenge,
+      on,
+      off,
+      once,
+      verify: verifyToken,
+      decode: decodeToken,
+      version: VERSION,
+  };
+
+  exports.EventEmitter = EventEmitter;
+  exports.bind = bind;
+  exports.challenge = challenge;
+  exports.decode = decodeToken;
+  exports.default = OpenAge;
+  exports.execute = execute;
+  exports.getToken = getToken;
+  exports.off = off;
+  exports.on = on;
+  exports.once = once;
+  exports.open = open;
+  exports.remove = remove;
+  exports.render = render;
+  exports.reset = reset;
+  exports.verify = verifyToken;
+  exports.version = VERSION;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+}));
+//# sourceMappingURL=openage.umd.js.map