Domain > dimension.click

More information on this domain is in AlienVault OTX

DNS Resolutions

Date	IP Address
2017-11-29	54.243.175.5 (ClassC)
2026-02-12	75.119.205.69 (ClassC)

HTTP/1.1 200 OKDate: Thu, 12 Feb 2026 19:09:13 GMTServer: ApacheUpgrade: h2Connection: UpgradeLast-Modified: Thu, 12 Feb 2026 14:13:26 GMTETag: 214d2-64aa117a0cb86Accept-Ranges: bytesContent-Length: 136402Cache-Control: max-age600Expires: Thu, 12 Feb 2026 19:19:13 GMTVary: Accept-Encoding,User-AgentX-Robots-Tag: noindex, nofollow, noarchive, nosnippet, noimageindexX-Content-Type-Options: nosniffX-Frame-Options: SAMEORIGINReferrer-Policy: strict-origin-when-cross-originContent-Type: text/html

!DOCTYPE html>html data-themedimension>head>    script iduxlab-prepaint>      (function() {        try {          var productTheme  dimension;          var currentProduct  dimension;          var productBasePage  currentProduct  index ? uxlab : currentProduct;          var storageProductKey  productBasePage;          document.documentElement.setAttribute(data-theme, productTheme);          function hexToRgb(hex) {            var m  /^#?(a-f\d{2})(a-f\d{2})(a-f\d{2})$/i.exec(hex);            if (!m) return null;            return { r: parseInt(m1, 16), g: parseInt(m2, 16), b: parseInt(m3, 16) };          }          function generateTones(accentHex) {            var rgb  hexToRgb(accentHex);            if (!rgb) return ;            var tones  ;            for (var i  0; i  10; i++) {              var factor  i / 9;              var r  Math.round(rgb.r * 0.5 * factor);              var g  Math.round(rgb.g * 0.5 * factor);              var b  Math.round(rgb.b * 0.5 * factor);              var h  # + r, g, b.map(function(x){ return x.toString(16).padStart(2,0); }).join();              tones.push(h);            }            return tones;          }          var accent  #ffd60a;          try {            accent               localStorage.getItem(accent-color- + storageProductKey) ||              localStorage.getItem(accent-color- + productTheme) ||              accent;          } catch (e) {}          var root  document.documentElement;          root.style.setProperty(--accent, accent, important);          var rgb  hexToRgb(accent);          if (rgb) {            var hoverR  Math.min(255, rgb.r + 16);            var hoverG  Math.min(255, rgb.g + 16);            var hoverB  Math.min(255, rgb.b + 16);            var hover  # + hoverR, hoverG, hoverB.map(function(x){ return x.toString(16).padStart(2,0); }).join();            root.style.setProperty(--accent-hover, hover, important);            root.style.setProperty(--glow, drop-shadow(0 0 12px  + accent + ), important);            root.style.setProperty(--panel-border, rgba( + rgb.r + ,  + rgb.g + ,  + rgb.b + , 0.35), important);          }          var toneIndex  5;          try {            var savedTone  localStorage.getItem(bg-tone- + storageProductKey);            if (savedTone ! null) {              var n  parseInt(savedTone, 10);              if (!Number.isNaN(n) && n > 0 && n  9) toneIndex  n;            }          } catch (e) {}          var tones  generateTones(accent);          var selectedTone  tonestoneIndex || accent;          var gradient  radial-gradient(circle at 50% 0%,  + selectedTone + , #000000);          root.style.setProperty(--bg-gradient, gradient, important);        } catch (e) {}      })();    /script>  meta charSetutf-8/>title>Dimension SDK – Production-Ready Spatial Media Framework for Apple/title>meta namedescription contentProduction ready SDK for building spatial media applications across Apple platforms. Enterprise grade framework ecosystem with Metal 4, RealityKit, and modern Swift./>meta nameviewport contentwidthdevice-width, initial-scale1, viewport-fitcover/>meta propertyog:type contentwebsite/>meta propertyog:url contenthttps://dimension.click/>meta propertyog:title contentDimension SDK, Production Ready Spatial Media Framework for Apple/>meta propertyog:description contentProduction ready SDK for building spatial media applications across Apple platforms. Enterprise grade framework ecosystem with Metal 4, RealityKit, and modern Swift./>meta propertyog:image content/dimension-icon.svg/>meta propertyog:site_name contentDimension/>meta nametwitter:card contentsummary_large_image/>meta nametwitter:url contenthttps://dimension.click/>meta nametwitter:title contentDimension SDK, Production Ready Spatial Media Framework for Apple/>meta nametwitter:description contentProduction ready SDK for building spatial media applications across Apple platforms. Enterprise grade framework ecosystem with Metal 4, RealityKit, and modern Swift./>meta nametwitter:image content/dimension-icon.svg/>meta namegooglebot contentnoindex, nofollow, noarchive, nosnippet, noimageindex/>meta namebingbot contentnoindex, nofollow, noarchive, nosnippet, noimageindex/>meta namerobots contentnoai, noimageai/>link relicon typeimage/svg+xml href/favicon.svg/>link relapple-touch-icon href/dimension-icon.svg/>meta namenext-head-count content20/>meta namerobots contentnoindex, nofollow, noarchive, nosnippet, noimageindex/>meta namegooglebot contentnoindex, nofollow, noarchive, nosnippet, noimageindex/>meta namebingbot contentnoindex, nofollow, noarchive, nosnippet, noimageindex/>meta namerobots contentnoai, noimageai/>script>              (function() {                try {                  var theme  dimension;                    }                  }                  // Set immediately on documentElement                  document.documentElement.setAttribute(data-theme, theme);                  // Also set on html element if it exists                  var htmlEl  document.getElementsByTagName(html)0;                  if (htmlEl) {                    htmlEl.setAttribute(data-theme, theme);                  }                } catch (e) {                  document.documentElement.setAttribute(data-theme, dimension-architectural);                }              })();            /script>script>              (function() {                try {                  // Detect Safari (not Chrome on iOS, not other browsers)                  var isSafari  /^((?!chrome|android).)*safari/i.test(navigator.userAgent);                  if (isSafari) {                    // Add data attribute to HTML element so components can check synchronously                    document.documentElement.setAttribute(data-safari, true);                    var htmlEl  document.getElementsByTagName(html)0;                    if (htmlEl) {                      htmlEl.setAttribute(data-safari, true);                    }                  }                } catch (e) {                  // Silently fail if detection doesnt work                }              })();            /script>link relpreload href/static/css/5be17ee7eb1a32d5.css asstyle/>link relstylesheet href/static/css/5be17ee7eb1a32d5.css data-n-g/>noscript data-n-css>/noscript>script defer nomodule src/static/chunks/polyfills-c67a75d1b6f99dc8.js>/script>script src/static/chunks/webpack-d5bbb0b8d9193a3e.js defer>/script>script src/static/chunks/framework-314c182fa7e2bf37.js defer>/script>script src/static/chunks/main-f9c4ac7aff317893.js defer>/script>script src/static/chunks/pages/_app-585fcfe6ea7989aa.js defer>/script>script src/static/chunks/35bf041d-e1bd362d7ac18465.js defer>/script>script src/static/chunks/bafe7e08-6a447ec05c114d54.js defer>/script>script src/static/chunks/22a29c3d-b0db8a40c4fadcfb.js defer>/script>script src/static/chunks/1375-203fe64d1d3d44bc.js defer>/script>script src/static/chunks/2959-481350c74c08ebad.js defer>/script>script src/static/chunks/8132-95dd8a386379b3df.js defer>/script>script src/static/chunks/pages/dimension-b0cca3dbfbc5fa01.js defer>/script>script src/static/BL0lGKhicQkqBNxAqbzQN/_buildManifest.js defer>/script>script src/static/BL0lGKhicQkqBNxAqbzQN/_ssgManifest.js defer>/script>style>  /* Complete theme CSS variables for all theme variants (matches React site) */  :rootdata-themedimension {    --accent: #ffd60a !important;    --accent-hover: #ffd60a !important;    --glow: drop-shadow(0 0 12px #ffd60a) !important;    --panel-bg: rgba(15, 25, 40, 0.4) !important;    --panel-border: rgba(255, 214, 10, 0.35) !important;    --bg-gradient: linear-gradient(135deg, #0f1929 0%, #1a2332 100%) !important;    --grid-opacity: 0.15 !important;  }:rootdata-themedimension-sci-fi {    --accent: #7a6eff !important;    --accent-hover: #8b7eff !important;    --glow: drop-shadow(0 0 16px #7a6eff) !important;    --panel-bg: rgba(20, 16, 48, 0.35) !important;    --panel-border: rgba(122, 110, 255, 0.3) !important;    --bg-gradient: radial-gradient(circle at 50% 0%, #1a1f2e, #0b0d13) !important;    --grid-opacity: 0.1 !important;  }:rootdata-themedimension-architectural {    --accent: #4a90e2 !important;    --accent-hover: #5ba0f2 !important;    --glow: drop-shadow(0 0 12px #4a90e2) !important;    --panel-bg: rgba(15, 25, 40, 0.4) !important;    --panel-border: rgba(74, 144, 226, 0.25) !important;    --bg-gradient: linear-gradient(135deg, #0f1929 0%, #1a2332 100%) !important;    --grid-opacity: 0.15 !important;  }:rootdata-themedimension-engineering {    --accent: #ff8c42 !important;    --accent-hover: #ff9c52 !important;    --glow: drop-shadow(0 0 14px #ff8c42) !important;    --panel-bg: rgba(40, 25, 15, 0.4) !important;    --panel-border: rgba(255, 140, 66, 0.3) !important;    --bg-gradient: radial-gradient(circle at 30% 20%, #1a1510, #0f0a05) !important;    --grid-opacity: 0.12 !important;  }:rootdata-themedimension-product-ios {    --accent: #007aff !important;    --accent-hover: #0088ff !important;    --glow: drop-shadow(0 0 10px rgba(0, 122, 255, 0.5)) !important;    --panel-bg: rgba(255, 255, 255, 0.08) !important;    --panel-border: rgba(255, 255, 255, 0.2) !important;    --bg-gradient: linear-gradient(180deg, #000000 0%, #1a1a1a 100%) !important;    --grid-opacity: 0.05 !important;  }:rootdata-themedimension-ai-lab {    --accent: #00ff88 !important;    --accent-hover: #10ff98 !important;    --glow: drop-shadow(0 0 20px #00ff88) !important;    --panel-bg: rgba(0, 30, 20, 0.4) !important;    --panel-border: rgba(0, 255, 136, 0.35) !important;    --bg-gradient: radial-gradient(circle at 50% 50%, #0a1a15, #000000) !important;    --grid-opacity: 0.18 !important;  }    /*  */  /* SITE SWITCHER HIDING - ULTRA AGGRESSIVE      */  /* Hide ThemeSwitcher component entirely        */  /*  */    /* Target by data attribute if present */  data-site-switcher,  data-product-switcher,  divclass*ThemeSwitcher,  divclass*ThemeSwitcher * {    display: none !important;    visibility: hidden !important;    opacity: 0 !important;    height: 0 !important;    width: 0 !important;    overflow: hidden !important;    pointer-events: none !important;    position: absolute !important;    left: -9999px !important;    z-index: -9999 !important;  }    /* Hide by aria-label patterns */  buttonaria-label*Product,  buttonaria-label*Switch product,  buttonaria-label*Change product,  buttonaria-label*Site,  buttonaria-label*Switch site {    display: none !important;    visibility: hidden !important;    opacity: 0 !important;    height: 0 !important;    width: 0 !important;    pointer-events: none !important;    position: absolute !important;    left: -9999px !important;  }    /* Hide nav containers that have product links (ThemeSwitcher dropdown structure) */  nav div.relative:has(ahref*/talkie/),  nav div.relative:has(ahref*/playback/),  nav div.relative:has(ahref*/remake/),  nav div.relative:has(ahref*/dimension/),  nav div.relative:has(ahref*/perception/),  nav div.relative:has(ahref*/generation/),  nav div.relative:has(ahref*/uxlab/) {    display: none !important;    visibility: hidden !important;    opacity: 0 !important;    height: 0 !important;    width: 0 !important;    pointer-events: none !important;    position: absolute !important;    left: -9999px !important;  }    /* Hide containers that have multiple product links */  nav div:has(ahref*/talkie):has(ahref*/playback),  nav div:has(ahref*/talkie):has(ahref*/remake),  nav div:has(ahref*/playback):has(ahref*/remake),  divclass*absolute:has(ahref*/talkie):has(ahref*/playback),  divclass*absolute:has(ahref*/playback):has(ahref*/remake) {    display: none !important;    visibility: hidden !important;    opacity: 0 !important;    pointer-events: none !important;  }    /* Match UXLab header: hide theme selector dropdown entirely */  divclass*ThemeSelector,  divclass*ThemeSelector *,  divclass*ThemeSelector button,  divclass*ThemeSelector buttonaria-label*Switch theme,  buttonaria-label*Switch theme,  buttonaria-label*theme,  buttonaria-label*Theme {    display: none !important;    visibility: hidden !important;    opacity: 0 !important;    pointer-events: none !important;    height: 0 !important;    width: 0 !important;    position: absolute !important;    left: -9999px !important;  }  /* Match UXLab header: hide top nav section labels (Home / Features / etc.) */  nav ahref^# {    display: none !important;    visibility: hidden !important;    opacity: 0 !important;    pointer-events: none !important;  }  /* Match UXLab header: force header background fully transparent (no frosted glass bar) */  navrolenavigation,  navaria-labelMain navigation,  nav {    background: transparent !important;    background-color: transparent !important;    box-shadow: none !important;    border-color: transparent !important;    backdrop-filter: none !important;    -webkit-backdrop-filter: none !important;  }  /* Some variants apply a glass class on scroll */  nav.glass-panel,  navclass*glass,  navclass*backdrop {    background: transparent !important;    background-color: transparent !important;    box-shadow: none !important;    border-color: transparent !important;    backdrop-filter: none !important;    -webkit-backdrop-filter: none !important;  }  /* EXPLICITLY ensure AccentColorSelector and BackgroundColorSelector are visible */  divclass*AccentColorSelector,  divclass*AccentColorSelector button,  divclass*AccentColorSelector buttonaria-label*accent,  divclass*AccentColorSelector buttonaria-label*Change accent,  buttonaria-label*background,  buttonaria-label*Adjust,  buttonaria-label*Background,  divclass*BackgroundColorSelector,  divclass*BackgroundColorSelector button {    display: flex !important;    visibility: visible !important;    opacity: 1 !important;    pointer-events: auto !important;  }      /* CRITICAL: Ensure FAQ accordions work correctly and are NOT affected by hiding rules */  sectionidfaq button,  sectionidfaq buttonaria-expanded,  sectionidfaq buttonaria-controls {    display: flex !important;    visibility: visible !important;    opacity: 1 !important;    pointer-events: auto !important;    height: auto !important;    width: auto !important;    cursor: pointer !important;  }/style>    script>      (function() {        const currentProduct  dimension;        const productName  Dimension;        const productBasePage  currentProduct  index ? uxlab : currentProduct;        // Use productBasePage for persistence keys (matches React components)        const storageProductKey  productBasePage;    const productTheme  dimension;    const accentColor  #ffd60a;    const themeName  ;    const allowedColors  #ffd60a,#ffe61a,#fff62a,#ffc600,#ffb600,#ffa600,#ff9600,#ff8600;        // Set theme immediately    document.documentElement.setAttribute(data-theme, productTheme);    var htmlEl  document.getElementsByTagName(html)0;    if (htmlEl) {      htmlEl.setAttribute(data-theme, productTheme);    }        // Function to apply accent color with all CSS variables    function applyAccentColor(color) {      const root  document.documentElement;      root.style.setProperty(--accent, color, important);            // Calculate hover color (slightly lighter)      const rgbMatch  /^#?(a-f\d{2})(a-f\d{2})(a-f\d{2})$/i.exec(color);      if (rgbMatch) {        const r  parseInt(rgbMatch1, 16);        const g  parseInt(rgbMatch2, 16);        const b  parseInt(rgbMatch3, 16);        const hoverR  Math.min(255, r + 16);        const hoverG  Math.min(255, g + 16);        const hoverB  Math.min(255, b + 16);        const hoverColor  # + hoverR, hoverG, hoverB.map(x > x.toString(16).padStart(2, 0)).join();        root.style.setProperty(--accent-hover, hoverColor, important);        root.style.setProperty(--glow, drop-shadow(0 0 12px  + color + ), important);        root.style.setProperty(--panel-border, rgba( + r + ,  + g + ,  + b + , 0.35), important);                // Also set theme-specific accent colors for all theme variants        // This ensures accent colors work across all theme variants        const themeVariants  , -sci-fi, -architectural, -engineering, -product-ios, -ai-lab;        themeVariants.forEach(variant > {          const themeKey  currentProduct + variant;          root.style.setProperty(--accent- + themeKey, color, important);        });      }            // CRITICAL: Dispatch accentColorChanged event to notify BackgroundColorSelector      // This ensures the background tones update when accent color changes      try {        window.dispatchEvent(new CustomEvent(accentColorChanged, { detail: { color: color } }));      } catch (e) {}    }        // Set theme colors immediately, but honor any saved user choice for this product export.    // This is what makes accent/background persistent across landing + static pages.    let initialAccent  accentColor;    try {      initialAccent         localStorage.getItem(accent-color- + storageProductKey) ||        localStorage.getItem(accent-color- + productTheme) ||        localStorage.getItem(accent-color- + productBasePage) ||        accentColor;    } catch (e) {}    applyAccentColor(initialAccent);        // Seed default accent colors in localStorage for all theme variants,    // but NEVER overwrite a user-selected value (persistence across pages depends on this).    try {      const themeVariants  , -sci-fi, -architectural, -engineering, -product-ios, -ai-lab;      const themeDefaultColors  {        : accentColor,        -sci-fi: #7a6eff,        -architectural: #4a90e2,        -engineering: #ff8c42,        -product-ios: #007aff,        -ai-lab: #00ff88,      };            themeVariants.forEach(variant > {        const themeKey  storageProductKey + variant;        const defaultColor  themeDefaultColorsvariant || accentColor;        if (localStorage.getItem(accent-color- + themeKey)  null) {          localStorage.setItem(accent-color- + themeKey, defaultColor);        }        if (localStorage.getItem(accent-color- + themeName + variant)  null) {          localStorage.setItem(accent-color- + themeName + variant, defaultColor);        }      });      if (localStorage.getItem(accent-color- + productTheme)  null) {        localStorage.setItem(accent-color- + productTheme, accentColor);      }      if (localStorage.getItem(accent-color- + themeName)  null) {        localStorage.setItem(accent-color- + themeName, accentColor);      }      if (localStorage.getItem(accent-color- + storageProductKey)  null) {        localStorage.setItem(accent-color- + storageProductKey, accentColor);      }    } catch (e) {}        // Allow AccentColorSelector to work normally - dont override it    // The AccentColorSelector will use the themes default color and allow users to change it    // This is needed so BackgroundColorSelector can generate correct tones from the accent color                // CRITICAL: Set correct defaults BEFORE React loads        if (typeof window ! undefined) {      // Override getBasePageFromPath globally - Navigation component should use this          window.getBasePageFromPath  function(path) {            // Always return the correct base page for this product export            return productBasePage;          };                    // Override getBasePage for ThemeSelector component          // This ensures ThemeSelector navigates to correct theme variant paths          window.getBasePage  function(route) {            if (!route || route  / || route  ) {              return productBasePage;            }            const cleanRoute  route.replace(/^//, ).replace(//$/, );            const themeMatch  cleanRoute.match(/^(.+?)-(sci-fi|architectural|engineering|product-ios|ai-lab)$/);            if (themeMatch) {              // If the matched base page is different from our product, return our product base page              const matchedBase  themeMatch1;              if (matchedBase  productBasePage || matchedBase  currentProduct) {                return productBasePage;              }              return matchedBase;            }            // If route matches our product, return productBasePage            if (cleanRoute  productBasePage || cleanRoute  currentProduct) {              return productBasePage;            }            return cleanRoute;          };                    if (!window.pageTitles) window.pageTitles  {};          window.pageTitlesproductBasePage  productName;          // Also set for all theme variants          const themeVariants  , -sci-fi, -architectural, -engineering, -product-ios, -ai-lab;          themeVariants.forEach(variant > {            const themeKey  productBasePage + variant;            window.pageTitlesthemeKey  productName;          });                    if (!window.pageIcons) window.pageIcons  {};          window.pageIconsproductBasePage  /dimension-icon.svg;          // Also set for all theme variants          themeVariants.forEach(variant > {            const themeKey  productBasePage + variant;            window.pageIconsthemeKey  /dimension-icon.svg;          });                    if (window.__NEXT_DATA__) {            window.__NEXT_DATA__.page  / + currentProduct;            window.__NEXT_DATA__.asPath  / + currentProduct;      }    }        // Function to fix navigation links for the current product    function fixNavigationLinks() {      // Get the correct nav links for this product      const productNavLinksMap  {        talkie:           { label: Home, href: #home },          { label: Features, href: #features },          { label: Platform, href: #platform-features },          { label: Cases, href: #use-cases },          { label: Pricing, href: #pricing },          { label: FAQ, href: #faq }        ,        playback:           { label: Home, href: #home },          { label: Features, href: #features },          { label: Platform, href: #platform-features },          { label: Cases, href: #use-cases },          { label: FAQ, href: #faq }        ,        remake:           { label: Home, href: #home },          { label: Features, href: #features },          { label: Workflows, href: #workflows },          { label: Platform, href: #platform-features },          { label: Cases, href: #use-cases },          { label: FAQ, href: #faq }        ,        dimension:           { label: Home, href: #home },          { label: Modules, href: #modules },          { label: Features, href: #features },          { label: Documentation, href: #documentation },          { label: Pricing, href: #pricing }        ,        perception:           { label: Home, href: #home },          { label: Components, href: #components },          { label: Features, href: #features },          { label: Documentation, href: #documentation },          { label: Pricing, href: #pricing }        ,        generation:           { label: Home, href: #home },          { label: Features, href: #features },          { label: Modules, href: #modules },          { label: Documentation, href: #documentation },          { label: Pricing, href: #pricing }        ,        uxlab:           { label: Apps, href: #consumer-apps },          { label: Pricing, href: #pricing },          { label: Values, href: #values },          { label: Questions, href: #faq },          { label: Frameworks, href: #developer-sdks },          { label: Technology, href: #technology }              };            const correctNavLinks  productNavLinksMapcurrentProduct || productNavLinksMaptalkie;            // Find the navigation container      const nav  document.querySelector(nav);      if (!nav) return;      // CRITICAL: Logo should always return to landing page for this domain      // (Static exports are hosted at the domain root, so / is always the landing page.)      const logoLink  nav.querySelector(ahref img) ? nav.querySelector(ahref img).closest(ahref) : null;      if (logoLink) {        logoLink.setAttribute(href, /);      }            // Find all navigation links in the desktop nav (not mobile menu)      const desktopNav  nav.querySelector(.hidden.md\:flex, class*hiddenclass*md:flex);      if (desktopNav) {        const navLinks  desktopNav.querySelectorAll(ahref^#);        let linkIndex  0;        navLinks.forEach((link) > {          // Skip logo/home link (has img)          if (link.querySelector(img)) {            return;          }                    // Update link text and href to match correct nav          if (linkIndex  correctNavLinks.length) {            const correctLink  correctNavLinkslinkIndex;            link.textContent  correctLink.label;            link.setAttribute(href, correctLink.href);            linkIndex++;            }          });        }              // Also update mobile menu links      const mobileNav  nav.querySelector(class*mobile, id*mobile);      if (mobileNav) {        const mobileLinks  mobileNav.querySelectorAll(ahref^#);        let linkIndex  0;        mobileLinks.forEach((link) > {          if (link.querySelector(img)) {            return;          }          if (linkIndex  correctNavLinks.length) {            const correctLink  correctNavLinkslinkIndex;            link.textContent  correctLink.label;            link.setAttribute(href, correctLink.href);            linkIndex++;          }        });      }            // Update the page title in navigation      const navTitle  nav.querySelector(span.text-2xl, a span, class*text-2xl);      if (navTitle) {        const titleText  navTitle.textContent || navTitle.innerText;        if (titleText && !titleText.includes(productName)) {          navTitle.textContent  productName;        }      }            // Update logo icon if it exists      const navIcon  nav.querySelector(imgalt, a img);      if (navIcon && navIcon.src) {        const expectedIcon  /dimension-icon.svg;        if (!navIcon.src.includes(dimension-icon)) {          navIcon.src  expectedIcon;          navIcon.alt  productName;        }      }    }        // Use the same hideThemeMenus function as UXLab export    // Hide ThemeSwitcher on ALL exported static pages (including UXLab)    function hideThemeMenus() {      // ULTRA AGGRESSIVE: Find and hide ALL buttons with product names      // ThemeSelector shows: Default, Futuristic, Architectural, etc.      // ThemeSwitcher shows: UXLab, Talkie, Playback, etc.      const productNames  UXLab, Talkie, Playback, Remake, Dimension, Perception, Generation;      const themeNames  Futuristic, Architectural, Engineering, Product, Design Lab, Default;            // Find ALL buttons in nav      const allButtons  document.querySelectorAll(nav button);            allButtons.forEach(btn > {        const text  (btn.textContent || btn.innerText || ).trim();                // Check if button text contains ONLY theme names (ThemeSelector)        const hasOnlyThemeName  themeNames.some(name > {          const nameIndex  text.indexOf(name);          if (nameIndex  -1) return false;          // Make sure it doesnt also contain a product name          const hasProduct  productNames.some(p > text.includes(p));          return !hasProduct;        });                // If it has ONLY theme names, KEEP IT VISIBLE (its ThemeSelector)        if (hasOnlyThemeName) {          return; // Skip - this is ThemeSelector        }                // Check if button text contains product names (ThemeSwitcher)        const hasProduct  productNames.some(name > {          const nameIndex  text.indexOf(name);          if (nameIndex  -1) return false;          return true;        });                // If it has a product name, HIDE IT IMMEDIATELY (its ThemeSwitcher)        if (hasProduct) {          // Prevent all events          const preventAllEvents  function(e) {            e.preventDefault();            e.stopPropagation();            e.stopImmediatePropagation();            return false;          };          click, mousedown, mouseup, touchstart, touchend, touchcancel.forEach(eventType > {            btn.addEventListener(eventType, preventAllEvents, true);          });                    // Hide the button          btn.style.display  none;          btn.style.visibility  hidden;          btn.style.opacity  0;          btn.style.pointerEvents  none;          btn.style.height  0;          btn.style.width  0;          btn.style.position  absolute;          btn.style.left  -9999px;          btn.style.zIndex  -9999;                    // Hide parent div.relative container          const parent  btn.closest(div.relative);          if (parent) {            // Check if parent contains product links in dropdown            const hasProductLinks  parent.querySelectorAll(ahref*/talkie/, ahref*/playback/, ahref*/remake/, ahref*/dimension/, ahref*/perception/, ahref*/generation/, ahref*/uxlab/).length > 0;                        if (hasProductLinks) {              // This is definitely ThemeSwitcher - hide the whole container              parent.style.display  none;              parent.style.visibility  hidden;              parent.style.opacity  0;              parent.style.pointerEvents  none;              parent.style.height  0;              parent.style.width  0;              parent.style.position  absolute;              parent.style.left  -9999px;              parent.style.zIndex  -9999;                            // Try to remove from DOM              try {                parent.remove();              } catch (e) {}            }          }        }      });            // ALSO: Target the exact structure - nav > div.ml-4 > div.relative (ThemeSwitcher)      const selectorContainers  document.querySelectorAll(nav div.ml-4, nav divclass*ml-4);      selectorContainers.forEach(parentContainer > {        // Find all div.relative children        const relativeDivs  parentContainer.querySelectorAll(div.relative, divclass*relative);        relativeDivs.forEach(container > {          // Skip if already hidden or removed or if its ThemeSelector          if (!container.parentElement || container.style.display  none || container.closest(divclass*ThemeSelector)) return;                    // Check if this div.relative contains a button with product name          const buttons  container.querySelectorAll(button);          let hasProductButton  false;          let hasThemeButton  false;                    buttons.forEach(btn > {            // Get text content            const text  (btn.textContent || btn.innerText || ).trim();            const productNames  UXLab, Talkie, Playback, Remake, Dimension, Perception, Generation;            const themeNames  Futuristic, Architectural, Engineering, Product iOS, Design Lab, Default;            // Check if text contains product name but NOT theme name            const hasProduct  productNames.some(name > {              const nameIndex  text.indexOf(name);              if (nameIndex  -1) return false;              const afterProduct  text.substring(nameIndex + name.length);              const hasThemeAfter  themeNames.some(theme > afterProduct.includes(theme));              return !hasThemeAfter;            });            const hasTheme  themeNames.some(name > text.includes(name));                        if (hasProduct) {              hasProductButton  true;            }            if (hasTheme) {              hasThemeButton  true;            }          });                    // Also check for product links in dropdown          const productLinks  container.querySelectorAll(ahref*/talkie/, ahref*/playback/, ahref*/remake/, ahref*/dimension/, ahref*/perception/, ahref*/generation/, ahref*/uxlab/);                    // Hide if it has product links OR product button (but NOT if it has theme button)          if ((productLinks.length > 0 || hasProductButton) && !hasThemeButton) {            // PREVENT ALL EVENTS on the container to stop header from disappearing            const preventAllEvents  function(e) {              e.preventDefault();              e.stopPropagation();              e.stopImmediatePropagation();              return false;            };            click, mousedown, mouseup, touchstart, touchend, touchcancel.forEach(eventType > {              container.addEventListener(eventType, preventAllEvents, true);            });                        // Try to remove from DOM entirely first (most effective)            try {              container.remove();            } catch (e) {              // If removal fails, hide aggressively              container.style.display  none;              container.style.visibility  hidden;              container.style.opacity  0;              container.style.pointerEvents  none;              container.style.height  0;              container.style.width  0;              container.style.position  absolute;              container.style.left  -9999px;              container.style.zIndex  -9999;              // Also hide all children              const children  container.querySelectorAll(*);              children.forEach(child > {                child.style.display  none;                child.style.visibility  hidden;                child.style.opacity  0;                child.style.pointerEvents  none;              });            }          }        });      });            // SECOND: Also check standalone nav containers (fallback for any that werent caught)      const navContainers  document.querySelectorAll(nav div.relative, nav divclass*relative);      navContainers.forEach(container > {        // Skip if already hidden or removed        if (!container.parentElement || container.style.display  none) return;                // Check if container has Links to product pages (ThemeSwitcher dropdown)        const productLinks  container.querySelectorAll(ahref*/talkie/, ahref*/playback/, ahref*/remake/, ahref*/dimension/, ahref*/perception/, ahref*/generation/, ahref*/uxlab/);                // If it has product links, its ThemeSwitcher - HIDE IT        if (productLinks.length > 0) {          container.style.display  none;          container.style.visibility  hidden;          container.style.opacity  0;          container.style.pointerEvents  none;          container.style.height  0;          container.style.width  0;          container.style.position  absolute;          container.style.left  -9999px;          container.style.zIndex  -9999;          try {            container.remove();          } catch (e) {}          return;        }                // Check if container has buttons with product names        const buttons  container.querySelectorAll(button);        let hasProductButton  false;        let hasThemeButton  false;                buttons.forEach(btn > {          const text  (btn.textContent || btn.innerText || ).trim();          const productNames  UXLab, Talkie, Playback, Remake, Dimension, Perception, Generation;          const themeNames  Futuristic, Architectural, Engineering, Product, Design Lab, Default;                    // Check if text contains ONLY theme names (ThemeSelector)          const hasOnlyThemeName  themeNames.some(name > {            const nameIndex  text.indexOf(name);            if (nameIndex  -1) return false;            const hasProduct  productNames.some(p > text.includes(p));            return !hasProduct;          });                    if (hasOnlyThemeName) {            hasThemeButton  true;            return; // This is ThemeSelector - keep it visible          }                    // Check if text contains product names (ThemeSwitcher)          const hasProduct  productNames.some(name > text.includes(name));                    if (hasProduct) {            hasProductButton  true;            // PREVENT ALL EVENTS on buttons that are ThemeSwitcher            const preventAllEvents  function(e) {              e.preventDefault();              e.stopPropagation();              e.stopImmediatePropagation();              return false;            };            click, mousedown, mouseup, touchstart, touchend, touchcancel, pointerdown, pointerup.forEach(eventType > {              btn.addEventListener(eventType, preventAllEvents, true);            });          }          if (hasTheme) {            hasThemeButton  true;          }        });                  // Hide if it has product links OR product button (but NOT if it has theme button)          if ((productLinks.length > 0 || hasProductButton) && !hasThemeButton) {            // PREVENT ALL EVENTS on the container to stop header from disappearing            const preventAllEvents  function(e) {              e.preventDefault();              e.stopPropagation();              e.stopImmediatePropagation();              return false;            };            click, mousedown, mouseup, touchstart, touchend, touchcancel.forEach(eventType > {              container.addEventListener(eventType, preventAllEvents, true);            });                        // Try to remove from DOM entirely first (most effective)            try {              container.remove();            } catch (e) {              // If removal fails, hide aggressively              container.style.display  none;              container.style.visibility  hidden;              container.style.opacity  0;              container.style.pointerEvents  none;              container.style.height  0;              container.style.width  0;              container.style.position  absolute;              container.style.left  -9999px;              container.style.zIndex  -9999;              // Also hide all children              const children  container.querySelectorAll(*);              children.forEach(child > {                child.style.display  none;                child.style.visibility  hidden;                child.style.opacity  0;                child.style.pointerEvents  none;              });            }          }      });            // Also check for ThemeSwitcher class directly and remove      const themeSwitcherContainers  document.querySelectorAll(divclass*ThemeSwitcher, class*ThemeSwitcher);      themeSwitcherContainers.forEach(container > {        // Remove from DOM entirely if possible, otherwise hide aggressively        try {          container.remove();        } catch (e) {        container.style.display  none;        container.style.visibility  hidden;        container.style.opacity  0;        container.style.pointerEvents  none;          container.style.height  0;          container.style.width  0;          container.style.position  absolute;          container.style.left  -9999px;          container.style.zIndex  -9999;          // Also hide all children          const children  container.querySelectorAll(*);          children.forEach(child > {            child.style.display  none;            child.style.visibility  hidden;            child.style.opacity  0;            child.style.pointerEvents  none;          });        }      });            // Find ThemeSwitcher (product switcher) components - hide these      // Look for buttons with text like Talkie, Playback, Remake, UXLab, Dimension, Perception, Generation      const allButtons  document.querySelectorAll(button);      allButtons.forEach(button > {        // Skip FAQ accordion buttons        if (button.hasAttribute(aria-expanded) || button.hasAttribute(aria-controls)) {          return;        }        // Skip buttons in FAQ sections        if (button.closest(sectionidfaq)) {          return;        }        // CRITICAL: Skip ALL buttons inside ThemeSelector or BackgroundColorSelector FIRST        // This prevents any accidental hiding        if (button.closest(divclass*ThemeSelector) || button.closest(divclass*BackgroundColorSelector)) {          return; // Keep ThemeSelector and BackgroundColorSelector completely visible        }                // Hide if button is inside ThemeSwitcher component        if (button.closest(divclass*ThemeSwitcher)) {          const parent  button.closest(divclass*ThemeSwitcher);          if (parent) {            parent.style.display  none;            parent.style.visibility  hidden;            parent.style.opacity  0;            parent.style.pointerEvents  none;          }          return;        }                // Skip accent color selector buttons (keep them visible - needed for background selector)        const ariaLabel  button.getAttribute(aria-label) || ;        if (ariaLabel.includes(accent) || ariaLabel.includes(Change accent)) {          // Keep accent color selector visible - its needed for background selector to work          return;        }                // Skip background color selector buttons (keep them visible)        if (ariaLabel.includes(background) || ariaLabel.includes(Adjust) || ariaLabel.includes(Background)) {          return;        }                // Skip if button is inside AccentColorSelector component (keep visible)        if (button.closest(divclass*AccentColorSelector)) {          return; // Keep AccentColorSelector visible - needed for background selector        }                const text  (button.textContent || ).trim();        const ariaLabelText  button.getAttribute(aria-label) || ;                // Check if button contains product names (ThemeSwitcher shows these)        const productNames  Talkie, Playback, Remake, UXLab, Dimension, Perception, Generation;        const hasProductName  productNames.some(name > text.includes(name));                // Check if button contains theme names (ThemeSelector shows these)        const themeNames  Futuristic, Architectural, Engineering, Product iOS, Design Lab, Default;        const hasThemeName  themeNames.some(name > text.includes(name));                // Hide if it has a product name but NOT a theme name        // Also check if its in a container that has product links        const isProductSwitcher  (hasProductName && !hasThemeName) ||                                  /^(Talkie|Playback|Remake|UXLab|Dimension|Perception|Generation|Product)s▼▾*$/i.test(text) ||                                  ariaLabelText.toLowerCase().includes(product) ||                                  ariaLabelText.toLowerCase().includes(switch product) ||                                  ariaLabelText.toLowerCase().includes(change product);                // But NOT if its a theme selector button (ThemeSelector shows theme names)        const isThemeSelector  hasThemeName ||                                /^(Futuristic|Architectural|Engineering|Product iOS|Design Lab|Default)s▼▾*$/i.test(text);                if (isProductSwitcher && !isThemeSelector) {          // Hide the button and its parent container (ThemeSwitcher) - VERY AGGRESSIVE          // Try multiple parent selectors to catch all cases          let parent  button.closest(divclass*ThemeSwitcher);          if (!parent) parent  button.closest(div.relative);          if (!parent) parent  button.closest(divclass*ml-4);          if (!parent) parent  button.closest(divclass*flex);          if (!parent) parent  button.parentElement;                    if (parent) {            parent.style.display  none;            parent.style.visibility  hidden;            parent.style.opacity  0;            parent.style.pointerEvents  none;            parent.style.height  0;            parent.style.width  0;            parent.style.position  absolute;            parent.style.left  -9999px;            parent.style.zIndex  -9999;            // Hide all children            const children  parent.querySelectorAll(*);            children.forEach(child > {              child.style.display  none;              child.style.visibility  hidden;              child.style.opacity  0;              child.style.pointerEvents  none;            });          }                    // Also hide the button itself            button.style.display  none;            button.style.visibility  hidden;          button.style.opacity  0;          button.style.pointerEvents  none;          button.style.height  0;          button.style.width  0;          button.style.position  absolute;          button.style.left  -9999px;          button.style.zIndex  -9999;        }      });            // Hide dropdown menus from product switchers (ThemeSwitcher) - but keep ThemeSelector dropdowns visible      const dropdowns  document.querySelectorAll(divclass*absolute, divrolemenu);      dropdowns.forEach(dropdown > {        // Skip FAQ dropdowns        if (dropdown.closest(sectionidfaq)) {          return;        }        // Skip if dropdown is part of ThemeSelector, AccentColorSelector, or BackgroundColorSelector (keep visible)        if (dropdown.closest(divclass*ThemeSelector) ||             dropdown.closest(divclass*AccentColorSelector) ||            dropdown.closest(divclass*BackgroundColorSelector)) {          return;        }        // Check if dropdown contains product links (ThemeSwitcher) - hide these        const hasProductLinks  dropdown.querySelector(ahref*/talkie/, ahref*/playback/, ahref*/remake/, ahref*/dimension/, ahref*/perception/, ahref*/generation/, ahref*/uxlab/);        const hasProductButtons  Array.from(dropdown.querySelectorAll(button)).some(btn > {          const text  (btn.textContent || ).trim();          const ariaLabel  btn.getAttribute(aria-label) || ;          return /^(Talkie|Playback|Remake|UXLab|Dimension|Perception|Generation|Product)$/i.test(text) ||                 ariaLabel.toLowerCase().includes(product) ||                 ariaLabel.toLowerCase().includes(switch product);        });                // Check if dropdown has multiple product links (ThemeSwitcher has groups)        const linkCount  dropdown.querySelectorAll(ahref*/talkie/, ahref*/playback/, ahref*/remake/, ahref*/dimension/, ahref*/perception/, ahref*/generation/, ahref*/uxlab/).length;                // Only hide if its a product switcher (has product links), not a theme selector        if (hasProductLinks || (hasProductButtons && linkCount > 0)) {          dropdown.style.display  none;          dropdown.style.visibility  hidden;          dropdown.style.opacity  0;          dropdown.style.pointerEvents  none;          dropdown.style.height  0;          dropdown.style.width  0;          dropdown.style.position  absolute;          dropdown.style.left  -9999px;          dropdown.style.zIndex  -9999;                    // Also hide the backdrop overlay (fixed inset-0)          const backdrop  dropdown.previousElementSibling;          if (backdrop && backdrop.classList && backdrop.classList.toString().includes(fixed) && backdrop.classList.toString().includes(inset-0)) {            backdrop.style.display  none;            backdrop.style.visibility  hidden;            backdrop.style.opacity  0;            backdrop.style.pointerEvents  none;          }        }      });            // Also hide any fixed overlay backdrops that are siblings of ThemeSwitcher dropdowns      const backdrops  document.querySelectorAll(divclass*fixedclass*inset-0);      backdrops.forEach(backdrop > {        const nextSibling  backdrop.nextElementSibling;        if (nextSibling) {          const hasProductLinks  nextSibling.querySelector(ahref*/talkie/, ahref*/playback/, ahref*/remake/, ahref*/dimension/, ahref*/perception/, ahref*/generation/, ahref*/uxlab/);          if (hasProductLinks) {            backdrop.style.display  none;            backdrop.style.visibility  hidden;            backdrop.style.opacity  0;            backdrop.style.pointerEvents  none;          }            }          });        }            // Lock theme and colors    function lockThemeAndColors() {      // Get current theme (dont force it - let ThemeSelector control it)      const currentTheme  document.documentElement.getAttribute(data-theme) || productTheme;            // Map theme variants to their complete default values (matching React site)      const themeDefaults  {        sci-fi: {          accent: #7a6eff,          accentHover: #8b7eff,          glow: drop-shadow(0 0 16px #7a6eff),          panelBg: rgba(20, 16, 48, 0.35),          panelBorder: rgba(122, 110, 255, 0.3),          bgGradient: radial-gradient(circle at 50% 0%, #1a1f2e, #0b0d13),          gridOpacity: 0.1,        },        architectural: {          accent: #4a90e2,          accentHover: #5ba0f2,          glow: drop-shadow(0 0 12px #4a90e2),          panelBg: rgba(15, 25, 40, 0.4),          panelBorder: rgba(74, 144, 226, 0.25),          bgGradient: linear-gradient(135deg, #0f1929 0%, #1a2332 100%),          gridOpacity: 0.15,        },        engineering: {          accent: #ff8c42,          accentHover: #ff9c52,          glow: drop-shadow(0 0 14px #ff8c42),          panelBg: rgba(40, 25, 15, 0.4),          panelBorder: rgba(255, 140, 66, 0.3),          bgGradient: radial-gradient(circle at 30% 20%, #1a1510, #0f0a05),          gridOpacity: 0.12,        },        product-ios: {          accent: #007aff,          accentHover: #0088ff,          glow: drop-shadow(0 0 10px rgba(0, 122, 255, 0.5)),          panelBg: rgba(255, 255, 255, 0.08),          panelBorder: rgba(255, 255, 255, 0.2),          bgGradient: linear-gradient(180deg, #000000 0%, #1a1a1a 100%),          gridOpacity: 0.05,        },        ai-lab: {          accent: #00ff88,          accentHover: #10ff98,          glow: drop-shadow(0 0 20px #00ff88),          panelBg: rgba(0, 30, 20, 0.4),          panelBorder: rgba(0, 255, 136, 0.35),          bgGradient: radial-gradient(circle at 50% 50%, #0a1a15, #000000),          gridOpacity: 0.18,        },      };            // Extract theme variant from current theme (e.g., uxlab-architectural -> architectural)      let themeVariant  ;      if (currentTheme.includes(-sci-fi)) themeVariant  sci-fi;      else if (currentTheme.includes(-architectural)) themeVariant  architectural;      else if (currentTheme.includes(-engineering)) themeVariant  engineering;      else if (currentTheme.includes(-product-ios)) themeVariant  product-ios;      else if (currentTheme.includes(-ai-lab)) themeVariant  ai-lab;            // Get theme defaults or use product defaults      const defaults  themeVariant && themeDefaultsthemeVariant         ? themeDefaultsthemeVariant        : {            accent: accentColor,            accentHover: accentColor,            glow: drop-shadow(0 0 12px  + accentColor + ),            panelBg: rgba(15, 25, 40, 0.4),            panelBorder: accentColor,            bgGradient: linear-gradient(135deg, #0f1929 0%, #1a2332 100%),            gridOpacity: 0.15,          };            // Apply background and panel variables      const root  document.documentElement;      root.style.setProperty(--accent-hover, defaults.accentHover, important);      root.style.setProperty(--glow, defaults.glow, important);      root.style.setProperty(--panel-bg, defaults.panelBg, important);      root.style.setProperty(--panel-border, defaults.panelBorder, important);      root.style.setProperty(--grid-opacity, defaults.gridOpacity.toString(), important);            // CRITICAL: Honor user-selected accent if present (persistence across pages).      // If no saved value exists for this theme/product, fall back to theme defaults.      let effectiveAccent  defaults.accent;      try {        effectiveAccent           localStorage.getItem(accent-color- + storageProductKey) ||          localStorage.getItem(accent-color- + currentTheme) ||          localStorage.getItem(accent-color- + themeVariant) ||          defaults.accent;      } catch (e) {}            root.style.setProperty(--accent, effectiveAccent, important);      applyAccentColor(effectiveAccent);            // Seed theme-specific keys ONLY if missing (never overwrite user choice)      try {        if (localStorage.getItem(accent-color- + currentTheme)  null) {          localStorage.setItem(accent-color- + currentTheme, effectiveAccent);        }        if (themeVariant && localStorage.getItem(accent-color- + themeVariant)  null) {          localStorage.setItem(accent-color- + themeVariant, effectiveAccent);        }      } catch (e) {}            // Generate background gradient from accent color (matching BackgroundColorSelector logic)      // Generate 10 tones from black to 50% of accent color      function generateTones(accentColor) {        const rgbMatch  /^#?(a-f\d{2})(a-f\d{2})(a-f\d{2})$/i.exec(accentColor);        if (!rgbMatch) return ;                const r  parseInt(rgbMatch1, 16);        const g  parseInt(rgbMatch2, 16);        const b  parseInt(rgbMatch3, 16);                const tones  ;        for (let i  0; i  10; i++) {          const factor  i / 9; // 0 to 1          const toneR  Math.round(r * 0.5 * factor);          const toneG  Math.round(g * 0.5 * factor);          const toneB  Math.round(b * 0.5 * factor);          const hex  # + toneR, toneG, toneB.map(x > {            const hex  x.toString(16).padStart(2, 0);            return hex;          }).join();          tones.push(hex);        }        return tones; // Index 0  darkest, Index 9  lightest      }            // Use default tone index 5 (middle tone) for background gradient      // This matches the BackgroundColorSelector default      const tones  generateTones(effectiveAccent);      let toneIndex  5;      try {        const savedTone           localStorage.getItem(bg-tone- + storageProductKey) ||          localStorage.getItem(bg-tone- + currentTheme) ||          (themeVariant ? localStorage.getItem(bg-tone- + themeVariant) : null);        const parsed  savedTone ! null ? parseInt(savedTone, 10) : NaN;        if (!Number.isNaN(parsed) && parsed > 0 && parsed  9) toneIndex  parsed;      } catch (e) {}      const selectedTone  tonestoneIndex || effectiveAccent;            // Set background gradient from selected tone to black      const bgGradient  radial-gradient(circle at 50% 0%,  + selectedTone + , #000000);      root.style.setProperty(--bg-gradient, bgGradient, important);            // Seed background tone preference keys ONLY if missing (never overwrite user choice)      try {        if (localStorage.getItem(bg-tone- + currentTheme)  null) {          localStorage.setItem(bg-tone- + currentTheme, toneIndex.toString());        }        if (themeVariant && localStorage.getItem(bg-tone- + themeVariant)  null) {          localStorage.setItem(bg-tone- + themeVariant, toneIndex.toString());        }        if (localStorage.getItem(bg-tone- + storageProductKey)  null) {          localStorage.setItem(bg-tone- + storageProductKey, toneIndex.toString());        }      } catch (e) {}            // Trigger BackgroundColorSelector to regenerate tones by dispatching custom events      // This ensures the component picks up the new accent color      try {        const themeChangeEvent  new CustomEvent(themeChanged, {          detail: { theme: currentTheme, accentColor: defaults.accent }        });        window.dispatchEvent(themeChangeEvent);                // CRITICAL: Also dispatch accentColorChanged event - this is what BackgroundColorSelector listens for        const accentColorEvent  new CustomEvent(accentColorChanged, {          detail: { color: defaults.accent }        });        window.dispatchEvent(accentColorEvent);      } catch (e) {}            // Seed theme defaults in localStorage for all variants,      // but NEVER overwrite user-selected values.      try {        const themeVariants  , -sci-fi, -architectural, -engineering, -product-ios, -ai-lab;        themeVariants.forEach(variant > {          const themeKey  storageProductKey + variant;          let variantTheme  ;          if (variant  -sci-fi) variantTheme  sci-fi;          else if (variant  -architectural) variantTheme  architectural;          else if (variant  -engineering) variantTheme  engineering;          else if (variant  -product-ios) variantTheme  product-ios;          else if (variant  -ai-lab) variantTheme  ai-lab;                    const defaultColor  variantTheme && themeDefaultsvariantTheme             ? themeDefaultsvariantTheme.accent             : accentColor;                    if (localStorage.getItem(accent-color- + themeKey)  null) {            localStorage.setItem(accent-color- + themeKey, defaultColor);          }          if (variantTheme && localStorage.getItem(accent-color- + variantTheme)  null) {            localStorage.setItem(accent-color- + variantTheme, defaultColor);          }                    // Also set default background tone (index 5  middle tone)          if (localStorage.getItem(bg-tone- + themeKey)  null) {            localStorage.setItem(bg-tone- + themeKey, 5);          }          if (variantTheme && localStorage.getItem(bg-tone- + variantTheme)  null) {            localStorage.setItem(bg-tone- + variantTheme, 5);          }        });      } catch (e) {}        }            // CRITICAL: Initialize interactive color selectors    // This replaces the non-functional React components with working vanilla JS    function initColorSelectors() {      const accentColors          { name: Blue, color: #4a90e2 },        { name: Purple, color: #7a6eff },        { name: Pink, color: #ff6b9d },        { name: Red, color: #ff4757 },        { name: Orange, color: #ff8c42 },        { name: Yellow, color: #ffd700 },        { name: Green, color: #06ffa5 },        { name: Teal, color: #00d4aa },        { name: Cyan, color: #00bcd4 },        { name: Indigo, color: #5c6bc0 },        { name: Deep Purple, color: #9c27b0 },        { name: Light Blue, color: #03a9f4 },      ;            // Get current accent color from localStorage or CSS      function getCurrentAccent() {        try {          const saved  localStorage.getItem(accent-color- + storageProductKey);          if (saved) return saved;        } catch (e) {}        return getComputedStyle(document.documentElement).getPropertyValue(--accent).trim() || accentColor;      }      function hexToRgb(hex) {        const m  /^#?(a-f\d{2})(a-f\d{2})(a-f\d{2})$/i.exec(hex);        if (!m) return null;        return { r: parseInt(m1, 16), g: parseInt(m2, 16), b: parseInt(m3, 16) };      }      // Generate 10 tones from black to 50% of accent color (matches BackgroundColorSelector.tsx)      function generateTones(accentHex) {        const rgb  hexToRgb(accentHex);        if (!rgb) return ;        const tones  ;        for (let i  0; i  10; i++) {          const factor  i / 9;          const r  Math.round(rgb.r * 0.5 * factor);          const g  Math.round(rgb.g * 0.5 * factor);          const b  Math.round(rgb.b * 0.5 * factor);          const h  # + r, g, b.map(x > x.toString(16).padStart(2, 0)).join();          tones.push(h);        }        return tones;      }      function getSavedToneIndex() {        try {          const saved  localStorage.getItem(bg-tone- + storageProductKey);          if (saved ! null) {            const n  parseInt(saved, 10);            if (!Number.isNaN(n) && n > 0 && n  9) return n;          }        } catch (e) {}        return 5;      }      function applyBackgroundFromAccent(accentHex) {        const tones  generateTones(accentHex);        const idx  getSavedToneIndex();        const selected  tonesidx || accentHex;        const bgGradient  radial-gradient(circle at 50% 0%,  + selected + , #000000);        document.documentElement.style.setProperty(--bg-gradient, bgGradient, important);        document.querySelectorAll(.BackgroundColorSelector .w-5.h-5).forEach(function(el) {          el.style.background  selected;        });      }            // Apply accent color to CSS variables      function applyAccent(color) {        const root  document.documentElement;        root.style.setProperty(--accent, color, important);                // Calculate hover color        const rgbMatch  /^#?(a-f\d{2})(a-f\d{2})(a-f\d{2})$/i.exec(color);        if (rgbMatch) {          const r  parseInt(rgbMatch1, 16);          const g  parseInt(rgbMatch2, 16);          const b  parseInt(rgbMatch3, 16);          const hoverR  Math.min(255, r + 16);          const hoverG  Math.min(255, g + 16);          const hoverB  Math.min(255, b + 16);          const hoverColor  # + hoverR, hoverG, hoverB.map(x > x.toString(16).padStart(2, 0)).join();          root.style.setProperty(--accent-hover, hoverColor, important);          root.style.setProperty(--glow, drop-shadow(0 0 12px  + color + ), important);          root.style.setProperty(--panel-border, rgba( + r + ,  + g + ,  + b + , 0.35), important);        }                // Save to localStorage        try {          localStorage.setItem(accent-color- + storageProductKey, color);        } catch (e) {}                // Update all color indicator buttons        document.querySelectorAll(.AccentColorSelector .w-5.h-5).forEach(function(el) {          el.style.background  color;        });                // Dispatch event for BackgroundColorSelector        window.dispatchEvent(new CustomEvent(accentColorChanged, { detail: { color: color } }));        // Keep background in sync with the saved tone when accent changes        applyBackgroundFromAccent(color);      }            // Create color palette dropdown      function createColorPalette(button, onSelect) {        // Remove any existing palette        const existing  document.querySelector(.color-palette-dropdown);        if (existing) existing.remove();                const palette  document.createElement(div);        palette.className  color-palette-dropdown;        palette.style.cssText  position:absolute;top:100%;right:0;margin-top:8px;z-index:9999;padding:12px;border-radius:12px;background:rgba(20,20,24,0.95);border:1px solid rgba(255,255,255,0.12);backdrop-filter:blur(24px);box-shadow:0 12px 40px rgba(0,0,0,0.5);display:grid;grid-template-columns:repeat(6,1fr);gap:6px;min-width:200px;;                accentColors.forEach(function(colorOption) {          const colorBtn  document.createElement(button);          colorBtn.style.cssText  width:28px;height:28px;border-radius:6px;border:2px solid rgba(255,255,255,0.1);cursor:pointer;transition:all 0.15s;background: + colorOption.color + ;;          colorBtn.title  colorOption.name;          colorBtn.onmouseenter  function() { this.style.transform  scale(1.1); this.style.borderColor  rgba(255,255,255,0.4); };          colorBtn.onmouseleave  function() { this.style.transform  scale(1); this.style.borderColor  rgba(255,255,255,0.1); };          colorBtn.onclick  function(e) {            e.stopPropagation();            onSelect(colorOption.color);            palette.remove();            document.removeEventListener(click, closePalette);          };          palette.appendChild(colorBtn);        });                button.parentElement.style.position  relative;        button.parentElement.appendChild(palette);                // Close on click outside        function closePalette(e) {          if (!palette.contains(e.target) && e.target ! button) {            palette.remove();            document.removeEventListener(click, closePalette);          }        }        setTimeout(function() {          document.addEventListener(click, closePalette);        }, 10);      }            // Initialize accent color selectors      document.querySelectorAll(.AccentColorSelector button).forEach(function(button) {        // Set initial color        const currentColor  getCurrentAccent();        const indicator  button.querySelector(.w-5.h-5);        if (indicator) {          indicator.style.background  currentColor;        }                // Remove React handlers and add our own        const newButton  button.cloneNode(true);        button.parentNode.replaceChild(newButton, button);                newButton.onclick  function(e) {          e.preventDefault();          e.stopPropagation();          createColorPalette(newButton, applyAccent);        };      });            // Initialize background tone selector (10 tones derived from current accent)      document.querySelectorAll(.BackgroundColorSelector button).forEach(function(button) {        // Ensure indicator reflects current accent + saved tone        applyBackgroundFromAccent(getCurrentAccent());        const newButton  button.cloneNode(true);        button.parentNode.replaceChild(newButton, button);                newButton.onclick  function(e) {          e.preventDefault();          e.stopPropagation();          // Build a tone palette (dark -> light) derived from current accent          const accentHex  getCurrentAccent();          const tones  generateTones(accentHex);          // Remove any existing palette          const existing  document.querySelector(.color-palette-dropdown);          if (existing) existing.remove();          const palette  document.createElement(div);          palette.className  color-palette-dropdown;          palette.style.cssText  position:absolute;top:100%;right:0;margin-top:8px;z-index:9999;padding:12px;border-radius:12px;background:rgba(20,20,24,0.95);border:1px solid rgba(255,255,255,0.12);backdrop-filter:blur(24px);box-shadow:0 12px 40px rgba(0,0,0,0.5);display:grid;grid-template-columns:repeat(5,1fr);gap:6px;min-width:200px;;          tones.forEach(function(tone, index) {            const toneBtn  document.createElement(button);            toneBtn.style.cssText  width:30px;height:30px;border-radius:8px;border:2px solid rgba(255,255,255,0.12);cursor:pointer;transition:all 0.15s;background: + tone + ;;            toneBtn.title  Tone  + (index + 1);            toneBtn.onmouseenter  function() { this.style.transform  scale(1.08); this.style.borderColor  rgba(255,255,255,0.38); };            toneBtn.onmouseleave  function() { this.style.transform  scale(1); this.style.borderColor  rgba(255,255,255,0.12); };            toneBtn.onclick  function(ev) {              ev.preventDefault();              ev.stopPropagation();              try { localStorage.setItem(bg-tone- + storageProductKey, String(index)); } catch (err) {}              applyBackgroundFromAccent(accentHex);              palette.remove();              document.removeEventListener(click, closePalette);            };            palette.appendChild(toneBtn);          });          newButton.parentElement.style.position  relative;          newButton.parentElement.appendChild(palette);          function closePalette(ev) {            if (!palette.contains(ev.target) && ev.target ! newButton) {              palette.remove();              document.removeEventListener(click, closePalette);            }          }          setTimeout(function() {            document.addEventListener(click, closePalette);          }, 10);        };      });            // Apply saved accent color on load      const savedColor  getCurrentAccent();      if (savedColor && savedColor ! accentColor) {        applyAccent(savedColor);      }      // Ensure background matches accent + saved tone on load      applyBackgroundFromAccent(getCurrentAccent());    }                // Run immediately    hideThemeMenus();    lockThemeAndColors();    fixNavigationLinks();        // Run after DOM loads    if (document.readyState  loading) {      document.addEventListener(DOMContentLoaded, function() {        hideThemeMenus();        lockThemeAndColors();        fixNavigationLinks();        initColorSelectors();      });    } else {      // DOM already loaded      initColorSelectors();    }        // Also run after hydration    setTimeout(initColorSelectors, 100);    setTimeout(initColorSelectors, 500);    setTimeout(initColorSelectors, 1000);                // Run after React hydration - MORE FREQUENTLY to catch ThemeSwitcher    // Run continuously to catch any ThemeSwitcher that appears    const hideInterval  setInterval(hideThemeMenus, 25); // Every 25ms forever (very frequent)    // Run immediately multiple times to catch it before any interaction    hideThemeMenus();    hideThemeMenus();    hideThemeMenus();    hideThemeMenus();    hideThemeMenus();    setTimeout(hideThemeMenus, 1);    setTimeout(hideThemeMenus, 5);    setTimeout(hideThemeMenus, 10);    setTimeout(hideThemeMenus, 25);    setTimeout(hideThemeMenus, 50);    setTimeout(hideThemeMenus, 100);    setTimeout(hideThemeMenus, 200);    setTimeout(hideThemeMenus, 500);    setTimeout(hideThemeMenus, 1000);    setTimeout(hideThemeMenus, 2000);    setTimeout(hideThemeMenus, 3000);    setTimeout(hideThemeMenus, 5000);    // Never clear the interval - keep hiding forever        setTimeout(lockThemeAndColors, 100);    setTimeout(lockThemeAndColors, 500);    setTimeout(lockThemeAndColors, 1000);        setTimeout(fixNavigationLinks, 100);    setTimeout(fixNavigationLinks, 500);    setTimeout(fixNavigationLinks, 1000);    setTimeout(fixNavigationLinks, 2000);        // Watch for theme changes and update background colors accordingly    if (document.body) {      const themeObserver  new MutationObserver(function(mutations) {        mutations.forEach(function(mutation) {          if (mutation.type  attributes && mutation.attributeName  data-theme) {            // Theme changed - update background colors            lockThemeAndColors();          }        });      });      themeObserver.observe(document.documentElement, {         attributes: true,         attributeFilter: data-theme       });    }        // Watch for dynamically added elements - MORE AGGRESSIVE    if (document.body) {      const observer  new MutationObserver(function(mutations) {        // Check if any new nodes were added that might be ThemeSwitcher        let shouldHide  false;        mutations.forEach(function(mutation) {          if (mutation.addedNodes.length > 0) {            mutation.addedNodes.forEach(function(node) {              if (node.nodeType  1) { // Element node                // Check if its a ThemeSwitcher or contains product names                const text  (node.textContent || ).trim();                const productNames  UXLab, Talkie, Playback, Remake, Dimension, Perception, Generation;                if (productNames.some(name > text.includes(name) && !text.includes(Futuristic) && !text.includes(Architectural) && !text.includes(Engineering))) {                  shouldHide  true;                }                // Also check if it has ThemeSwitcher class                if (node.classList && node.classList.toString().includes(ThemeSwitcher)) {                  shouldHide  true;                }                                // PREVENT EVENTS on any buttons with product names immediately                const buttons  node.querySelectorAll ? node.querySelectorAll(button) : ;                buttons.forEach(btn > {                  const btnText  (btn.textContent || ).trim();                  const hasProduct  productNames.some(name > btnText.includes(name) && !btnText.includes(Futuristic) && !btnText.includes(Architectural));                  if (hasProduct) {                    const preventAllEvents  function(e) {                      e.preventDefault();                      e.stopPropagation();                      e.stopImmediatePropagation();                      return false;                    };                    click, mousedown, mouseup, touchstart, touchend, touchcancel, pointerdown, pointerup.forEach(eventType > {                      btn.addEventListener(eventType, preventAllEvents, true);                    });                  }                });              }            });          }        });        if (shouldHide) {        hideThemeMenus();        }        lockThemeAndColors();        fixNavigationLinks();      });      observer.observe(document.body, {         childList: true,         subtree: true,        attributes: true,        attributeFilter: class, style      });            // ALSO add a global click handler on nav to prevent ThemeSwitcher clicks from affecting header      document.addEventListener(click, function(e) {        const target  e.target;        if (target && target.closest && target.closest(nav)) {          const button  target.closest(button);          if (button) {            const text  (button.textContent || ).trim();            const productNames  UXLab, Talkie, Playback, Remake, Dimension, Perception, Generation;            const themeNames  Futuristic, Architectural, Engineering, Product iOS, Design Lab, Default;            const hasProduct  productNames.some(name > text.includes(name));            const hasTheme  themeNames.some(name > text.includes(name));            // If its a product button but NOT a theme button, prevent the click            if (hasProduct && !hasTheme) {              e.preventDefault();              e.stopPropagation();              e.stopImmediatePropagation();              // Also hide it immediately              const container  button.closest(div.relative);              if (container) {                try {                  container.remove();                } catch (err) {                  container.style.display  none;                  container.style.visibility  hidden;                  container.style.opacity  0;                  container.style.pointerEvents  none;                }              }              return false;            }          }        }      }, true); // Use capture phase to run before other handlers        }      })();/script>/head>body stylebackground-color:#0b0d13;margin:0;padding:0; background-color: #0b0d13; data-productdimension data-product-nameDimension>div id__next>div>div>main classrelative w-full>nav classfixed top-0 left-0 right-0 z-50 transition-all duration-300 bg-transparent rolenavigation aria-labelMain navigation>div classmax-w-7xl mx-auto px-6 py-4>div classflex items-center justify-between>div classh-full  styleheight:100%;display:flex;flex-direction:column;min-height:0;will-change:transform, opacity;transform:none;backface-visibility:hidden;opacity:1>a href/ classflex items-center stylegap:12px>img src/dimension-icon.svg altDimension classh-12 stylewidth:48px;object-fit:contain/>span classtext-2xl font-bold>Dimension/span>/a>/div>div classhidden md:flex items-center gap-8>div classflex items-center gap-3 >div classrelative BackgroundColorSelector>button classglass-panel px-2 py-2 rounded-lg text-sm font-medium hover:opacity-90 transition stylebackground:var(--panel-bg);border-color:var(--panel-border) aria-labelAdjust background darkness aria-expandedfalse titleBackground Darkness>div classw-5 h-5 rounded stylebackground:var(--accent, #4a90e2)>/div>/button>/div>div classrelative AccentColorSelector>button classglass-panel px-2 py-2 rounded-lg text-sm font-medium hover:opacity-90 transition stylebackground:var(--panel-bg, var(--dimension-surface, rgba(255, 255, 255, 0.06)));border-color:var(--panel-border, var(--dimension-border-soft, rgba(255, 255, 255, 0.1))) aria-labelChange accent color aria-expandedfalse titleAccent Color>div classw-5 h-5 rounded stylebackground:var(--accent, #4a90e2)>/div>/button>/div>/div>/div>div classmd:hidden flex items-center gap-3>div classrelative BackgroundColorSelector>button classglass-panel px-2 py-2 rounded-lg text-sm font-medium hover:opacity-90 transition stylebackground:var(--panel-bg);border-color:var(--panel-border) aria-labelAdjust background darkness aria-expandedfalse titleBackground Darkness>div classw-5 h-5 rounded stylebackground:var(--accent, #4a90e2)>/div>/button>/div>div classrelative AccentColorSelector>button classglass-panel px-2 py-2 rounded-lg text-sm font-medium hover:opacity-90 transition stylebackground:var(--panel-bg, var(--dimension-surface, rgba(255, 255, 255, 0.06)));border-color:var(--panel-border, var(--dimension-border-soft, rgba(255, 255, 255, 0.1))) aria-labelChange accent color aria-expandedfalse titleAccent Color>div classw-5 h-5 rounded stylebackground:var(--accent, #4a90e2)>/div>/button>/div>/div>/div>/div>/nav>div classfixed inset-0 -z-10 stylebackground:var(--bg-gradient)>/div>div classfixed inset-0 -z-10 opacity-var(--grid-opacity,0.15) stylebackground-image:linear-gradient(var(--grid-color, rgba(255, 214, 10, 0.15)) 1px, transparent 1px),            linear-gradient(90deg, var(--grid-color, rgba(255, 214, 10, 0.15)) 1px, transparent 1px);background-size:24px 24px>/div>canvas classabsolute inset-0 pointer-events-none -z-9 stylewill-change:contents;transform:translateZ(0);backface-visibility:hidden;contain:layout style paint>/canvas>canvas classabsolute inset-0 pointer-events-none -z-9 stylewill-change:contents;transform:translateZ(0);backface-visibility:hidden;contain:layout style paint>/canvas>section idhome>section classrelative min-h-screen flex items-center px-4 md:px-6 py-16 md:py-20 overflow-visible>div classmax-w-7xl mx-auto w-full grid md:grid-cols-2 gap-8 md:gap-12 items-center overflow-visible>div classh-full  styleheight:100%;display:flex;flex-direction:column;min-height:0;will-change:transform, opacity;transform:none;backface-visibility:hidden;opacity:1>div classoverflow-visible>div classflex items-center gap-4 md:gap-6 mb-4 md:mb-6 overflow-visible p-8 -m-8>img src/dimension-icon.svg altDimension classh-16 w-16 md:h-28 md:w-28 stylefilter:var(--glow)/>h1 classtext-4xl md:text-7xl font-bold leading-tight stylefilter:var(--glow);text-shadow:0 0 40px rgba(122, 110, 255, 0.6)>Dimension/h1>/div>p classtext-lg md:text-3xl mb-3 md:mb-4 opacity-80 leading-snug md:leading-relaxed font-medium stylecolor:var(--accent)>Shape Reality/p>p classtext-base md:text-2xl mb-6 md:mb-8 opacity-90 leading-relaxed>Production ready SDK for building spatial media applications across Apple platforms. Enterprise grade framework ecosystem with Metal 4, RealityKit, and modern Swift./p>div classflex gap-3 md:gap-4 flex-nowrap>button classpx-6 py-3 rounded-xl font-semibold shadow-lg transition-all duration-300 hover:scale-105 bg-var(--accent) text-black hover:opacity-90 text-sm md:text-lg px-5 py-3 md:px-8 md:py-4 whitespace-nowrap stylebackground-color:var(--accent);background:var(--accent);filter:var(--glow);box-shadow:0 8px 24px rgba(var(--accent-rgb, 122, 110, 255), 0.15)>Get Started/button>button classpx-6 py-3 rounded-xl font-semibold shadow-lg transition-all duration-300 hover:scale-105 bg-transparent border-2 border-var(--accent) text-var(--accent) hover:bg-var(--accent)/10 text-sm md:text-lg px-5 py-3 md:px-8 md:py-4 whitespace-nowrap stylebackground-color:transparent;filter:none;box-shadow:none>Documentation/button>/div>/div>/div>div classh-full  styleheight:100%;display:flex;flex-direction:column;min-height:0;will-change:transform, opacity;transform:none;backface-visibility:hidden;opacity:1>div classrelative w-full h-full min-h-200px md:min-h-400px flex items-center justify-center hidden md:flex>/div>/div>/div>/section>/section>section classpy-32 px-6>div classmax-w-7xl mx-auto>div classh-full  styleheight:100%;display:flex;flex-direction:column;min-height:0;will-change:transform, opacity;transform:none;backface-visibility:hidden;opacity:1>div classglass-panel w-full h-full p-8 md:p-12 stylebackground:var(--panel-bg, rgba(255, 255, 255, 0.06));border-color:var(--panel-border, rgba(255, 255, 255, 0.15))>p classtext-lg md:text-xl opacity-80 leading-relaxed mb-8 max-w-4xl mx-auto text-center>Dimension SDK is a strong>production ready, enterprise grade framework ecosystem/strong> for building spatial media applications across Apple's platform. Built with Metal 4, RealityKit, and modern Swift, Dimension provides developers with modular, scalable tools for creating next generation immersive media experiences./p>div classtext-center>p classtext-sm opacity-60 mb-2>Value Proposition/p>p classtext-xl font-semibold stylecolor:var(--accent)>Reduce development time by 60 to 80% while delivering production quality spatial media features/p>/div>/div>/div>/div>/section>section classpy-32 px-6 aria-labelledbymodules-heading>div classmax-w-7xl mx-auto>div classh-full  styleheight:100%;display:flex;flex-direction:column;min-height:0;will-change:transform, opacity;transform:none;backface-visibility:hidden;opacity:1>h2 idmodules-heading classtext-5xl md:text-6xl font-bold text-center mb-4 stylefilter:var(--glow)>Modular Framework Structure/h2>p classtext-xl text-center mb-16 opacity-70 max-w-2xl mx-auto>9 specialized, independently-deployable frameworks/p>/div>div classgrid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6>div classh-full  styleheight:100%;display:flex;flex-direction:column;min-height:0;will-change:transform, opacity;transform:none;backface-visibility:hidden;opacity:1>div classglass-panel w-full h-full p-6 h-full stylebackground:var(--panel-bg, rgba(255, 255, 255, 0.06));border-color:var(--panel-border, rgba(255, 255, 255, 0.15))>div classmb-4 flex items-center justify-center>span classinline-flex items-center justify-center text-center stylewidth:100%;height:100%>span classinline-flex items-center justify-center text-var(--accent) stylewidth:48px;height:48px;display:flex;align-items:center;justify-content:center aria-labelfilm>svg xmlnshttp://www.w3.org/2000/svg width48 height48 fillcurrentColor viewBox0 0 256 256>path dM216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40ZM184,56h32V72H184ZM72,200H40V184H72ZM72,72H40V56H72Zm48,128H88V184h32Zm0-128H88V56h32Zm48,128H136V184h32Zm0-128H136V56h32Zm48,128H184V184h32v16Z>/path>/svg>/span>/span>/div>h3 classtext-xl font-bold mb-3 text-white>DimensionRender/h3>p classtext-sm opacity-70 leading-relaxed>Metal 4 rendering engine with RealityKit integration for high-performance 3D rendering and video playback/p>/div>/div>div classh-full  styleheight:100%;display:flex;flex-direction:column;min-height:0;will-change:transform, opacity;transform:none;backface-visibility:hidden;opacity:1>div classglass-panel w-full h-full p-6 h-full stylebackground:var(--panel-bg, rgba(255, 255, 255, 0.06));border-color:var(--panel-border, rgba(255, 255, 255, 0.15))>div classmb-4 flex items-center justify-center>span classinline-flex items-center justify-center text-center stylewidth:100%;height:100%>span classinline-flex items-center justify-center text-var(--accent) stylewidth:48px;height:48px;display:flex;align-items:center;justify-content:center aria-labelvisionpro>svg xmlnshttp://www.w3.org/2000/svg width48 height48 fillcurrentColor viewBox0 0 256 256>path dM123.49,98.81l-24,64a8,8,0,0,1-15,0l-24-64a8,8,0,1,1,15-5.62l16.51,44,16.51-44a8,8,0,1,1,15,5.62ZM256,128a80.09,80.09,0,0,1-80,80H80A80,80,0,0,1,80,48h96A80.09,80.09,0,0,1,256,128Zm-16,0a64.07,64.07,0,0,0-64-64H80a64,64,0,0,0,0,128h96A64.07,64.07,0,0,0,240,128Zm-59.16,10.35L191,156a8,8,0,0,1-13.9,7.94l-11.44-20c-.53,0-1.07.05-1.61.05H152v16a8,8,0,0,1-16,0V96a8,8,0,0,1,8-8h20a28,28,0,0,1,16.84,50.35ZM152,128h12a12,12,0,0,0,0-24H152Z>/path>/svg>/span>/span>/div>h3 classtext-xl font-bold mb-3 text-white>DimensionSpatial/h3>p classtext-sm opacity-70 leading-relaxed>Immersive spatial content and 3D interactions framework with environment and skybox management/p>/div>/div>div classh-full  styleheight:100%;display:flex;flex-direction:column;min-height:0;will-change:transform, opacity;transform:none;backface-visibility:hidden;opacity:1>div classglass-panel w-full h-full p-6 h-full stylebackground:var(--panel-bg, rgba(255, 255, 255, 0.06));border-color:var(--panel-border, rgba(255, 255, 255, 0.15))>div classmb-4 flex items-center justify-center>span classinline-flex items-center justify-center text-center stylewidth:100%;height:100%>span classinline-flex items-center justify-center text-var(--accent) stylewidth:48px;height:48px;display:flex;align-items:center;justify-content:center aria-labelaudio>svg xmlnshttp://www.w3.org/2000/svg width48 height48 fillcurrentColor viewBox0 0 256 256>path dM160,32.25V223.69a8.29,8.29,0,0,1-3.91,7.18,8,8,0,0,1-9-.56l-65.57-51A4,4,0,0,1,80,176.16V79.84a4,4,0,0,1,1.55-3.15l65.57-51a8,8,0,0,1,10,.16A8.27,8.27,0,0,1,160,32.25ZM60,80H32A16,16,0,0,0,16,96v64a16,16,0,0,0,16,16H60a4,4,0,0,0,4-4V84A4,4,0,0,0,60,80Zm126.77,20.84a8,8,0,0,0-.72,11.3,24,24,0,0,1,0,31.72,8,8,0,1,0,12,10.58,40,40,0,0,0,0-52.88A8,8,0,0,0,186.74,100.84Zm40.89-26.17a8,8,0,1,0-11.92,10.66,64,64,0,0,1,0,85.34,8,8,0,1,0,11.92,10.66,80,80,0,0,0,0-106.66Z>/path>/svg>/span>/span>/div>h3 classtext-xl font-bold mb-3 text-white>DimensionAudio/h3>p classtext-sm opacity-70 leading-relaxed>3D spatial audio engine with object positioning, head tracking, and room acoustics simulation/p>/div>/div>div classh-full  styleheight:100%;display:flex;flex-direction:column;min-height:0;will-change:transform, opacity;transform:none;backface-visibility:hidden;opacity:1>div classglass-panel w-full h-full p-6 h-full stylebackground:var(--panel-bg, rgba(255, 255, 255, 0.06));border-color:var(--panel-border, rgba(255, 255, 255, 0.15))>div classmb-4 flex items-center justify-center>span classinline-flex items-center justify-center text-center stylewidth:100%;height:100%>span classinline-flex items-center justify-center text-var(--accent) stylewidth:48px;height:48px;display:flex;align-items:center;justify-content:center aria-labelvideo>svg xmlnshttp://www.w3.org/2000/svg width48 height48 fillcurrentColor viewBox0 0 256 256>path dM128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm40.55,110.58-52,36A8,8,0,0,1,104,164V92a8,8,0,0,1,12.55-6.58l52,36a8,8,0,0,1,0,13.16Z>/path>/svg>/span>/span>/div>h3 classtext-xl font-bold mb-3 text-white>DimensionMedia/h3>p classtext-sm opacity-70 leading-relaxed>Media capture, editing, transcription, and playback pipeline with MV-HEVC support/p>/div>/div>div classh-full  styleheight:100%;display:flex;flex-direction:column;min-height:0;will-change:transform, opacity;transform:none;backface-visibility:hidden;opacity:1>div classglass-panel w-full h-full p-6 h-full stylebackground:var(--panel-bg, rgba(255, 255, 255, 0.06));border-color:var(--panel-border, rgba(255, 255, 255, 0.15))>div classmb-4 flex items-center justify-center>span classinline-flex items-center justify-center text-center stylewidth:100%;height:100%>span classinline-flex items-center justify-center text-var(--accent) stylewidth:48px;height:48px;display:flex;align-items:center;justify-content:center aria-labelexport>svg xmlnshttp://www.w3.org/2000/svg width48 height48 fillcurrentColor viewBox0 0 256 256>path dM74.34,77.66a8,8,0,0,1,0-11.32l48-48a8,8,0,0,1,11.32,0l48,48a8,8,0,0,1-11.32,11.32L136,43.31V128a8,8,0,0,1-16,0V43.31L85.66,77.66A8,8,0,0,1,74.34,77.66ZM240,136v64a16,16,0,0,1-16,16H32a16,16,0,0,1-16-16V136a16,16,0,0,1,16-16h68a4,4,0,0,1,4,4v3.46c0,13.45,11,24.79,24.46,24.54A24,24,0,0,0,152,128v-4a4,4,0,0,1,4-4h68A16,16,0,0,1,240,136Zm-40,32a12,12,0,1,0-12,12A12,12,0,0,0,200,168Z>/path>/svg>/span>/span>/div>h3 classtext-xl font-bold mb-3 text-white>DimensionExport/h3>p classtext-sm opacity-70 leading-relaxed>Multi-format export and conversion system with quality presets and metadata preservation/p>/div>/div>div classh-full  styleheight:100%;display:flex;flex-direction:column;min-height:0;will-change:transform, opacity;transform:none;backface-visibility:hidden;opacity:1>div classglass-panel w-full h-full p-6 h-full stylebackground:var(--panel-bg, rgba(255, 255, 255, 0.06));border-color:var(--panel-border, rgba(255, 255, 255, 0.15))>div classmb-4 flex items-center justify-center>span classinline-flex items-center justify-center text-center stylewidth:100%;height:100%>span classinline-flex items-center justify-center text-var(--accent) stylewidth:48px;height:48px;display:flex;align-items:center;justify-content:center aria-labellibrary>svg xmlnshttp://www.w3.org/2000/svg width48 height48 fillcurrentColor viewBox0 0 256 256>path dM231.65,194.55,198.46,36.75a16,16,0,0,0-19-12.39L132.65,34.42a16.08,16.08,0,0,0-12.3,19l33.19,157.8A16,16,0,0,0,169.16,224a16.25,16.25,0,0,0,3.38-.36l46.81-10.06A16.09,16.09,0,0,0,231.65,194.55ZM136,50.15c0-.06,0-.09,0-.09l46.8-10,3.33,15.87L139.33,66Zm10,47.38-3.35-15.9,46.82-10.06,3.34,15.9Zm70,100.41-46.8,10-3.33-15.87L212.67,182,216,197.85C216,197.91,216,197.94,216,197.94ZM104,32H56A16,16,0,0,0,40,48V208a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V48A16,16,0,0,0,104,32ZM56,48h48V64H56Zm48,160H56V192h48v16Z>/path>/svg>/span>/span>/div>h3 classtext-xl font-bold mb-3 text-white>DimensionPlaylist/h3>p classtext-sm opacity-70 leading-relaxed>Photos library integration and playlist management with CloudKit sync/p>/div>/div>div classh-full  styleheight:100%;display:flex;flex-direction:column;min-height:0;will-change:transform, opacity;transform:none;backface-visibility:hidden;opacity:1>div classglass-panel w-full h-full p-6 h-full stylebackground:var(--panel-bg, rgba(255, 255, 255, 0.06));border-color:var(--panel-border, rgba(255, 255, 255, 0.15))>div classmb-4 flex items-center justify-center>span classinline-flex items-center justify-center text-center stylewidth:100%;height:100%>span classinline-flex items-center justify-center text-var(--accent) stylewidth:48px;height:48px;display:flex;align-items:center;justify-content:center aria-labeltools>svg xmlnshttp://www.w3.org/2000/svg width48 height48 fillcurrentColor viewBox0 0 256 256>path dM224,64H176V56a24,24,0,0,0-24-24H104A24,24,0,0,0,80,56v8H32A16,16,0,0,0,16,80v28a4,4,0,0,0,4,4H64V96.27A8.17,8.17,0,0,1,71.47,88,8,8,0,0,1,80,96v16h96V96.27A8.17,8.17,0,0,1,183.47,88,8,8,0,0,1,192,96v16h44a4,4,0,0,0,4-4V80A16,16,0,0,0,224,64Zm-64,0H96V56a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8Zm80,68v60a16,16,0,0,1-16,16H32a16,16,0,0,1-16-16V132a4,4,0,0,1,4-4H64v16a8,8,0,0,0,8.53,8A8.17,8.17,0,0,0,80,143.73V128h96v16a8,8,0,0,0,8.53,8,8.17,8.17,0,0,0,7.47-8.25V128h44A4,4,0,0,1,240,132Z>/path>/svg>/span>/span>/div>h3 classtext-xl font-bold mb-3 text-white>DimensionTools/h3>p classtext-sm opacity-70 leading-relaxed>Utility tools and helpers for spatial operations, mesh processing, and media handling/p>/div>/div>div classh-full  styleheight:100%;display:flex;flex-direction:column;min-height:0;will-change:transform, opacity;transform:none;backface-visibility:hidden;opacity:1>div classglass-panel w-full h-full p-6 h-full stylebackground:var(--panel-bg, rgba(255, 255, 255, 0.06));border-color:var(--panel-border, rgba(255, 255, 255, 0.15))>div classmb-4 flex items-center justify-center>span classinline-flex items-center justify-center text-center stylewidth:100%;height:100%>span classinline-flex items-center justify-center text-var(--accent) stylewidth:48px;height:48px;display:flex;align-items:center;justify-content:center aria-labellink>svg xmlnshttp://www.w3.org/2000/svg width48 height48 fillcurrentColor viewBox0 0 256 256>path dM240,88.23a54.43,54.43,0,0,1-16,37L189.25,160a54.27,54.27,0,0,1-38.63,16h-.05A54.63,54.63,0,0,1,96,119.84a8,8,0,0,1,16,.45A38.62,38.62,0,0,0,150.58,160h0a38.39,38.39,0,0,0,27.31-11.31l34.75-34.75a38.63,38.63,0,0,0-54.63-54.63l-11,11A8,8,0,0,1,135.7,59l11-11A54.65,54.65,0,0,1,224,48,54.86,54.86,0,0,1,240,88.23ZM109,185.66l-11,11A38.41,38.41,0,0,1,70.6,208h0a38.63,38.63,0,0,1-27.29-65.94L78,107.31A38.63,38.63,0,0,1,144,135.71a8,8,0,0,0,16,.45A54.86,54.86,0,0,0,144,96a54.65,54.65,0,0,0-77.27,0L32,130.75A54.62,54.62,0,0,0,70.56,224h0a54.28,54.28,0,0,0,38.64-16l11-11A8,8,0,0,0,109,185.66Z>/path>/svg>/span>/span>/div>h3 classtext-xl font-bold mb-3 text-white>DimensionShared/h3>p classtext-sm opacity-70 leading-relaxed>Core utilities, types, and shared components across all modules/p>/div>/div>div classh-full  styleheight:100%;display:flex;flex-direction:column;min-height:0;will-change:transform, opacity;transform:none;backface-visibility:hidden;opacity:1>div classglass-panel w-full h-full p-6 h-full stylebackground:var(--panel-bg, rgba(255, 255, 255, 0.06));border-color:var(--panel-border, rgba(255, 255, 255, 0.15))>div classmb-4 flex items-center justify-center>span classinline-flex items-center justify-center text-center stylewidth:100%;height:100%>span classinline-flex items-center justify-center text-var(--accent) stylewidth:48px;height:48px;display:flex;align-items:center;justify-content:center aria-labelapple>svg xmlnshttp://www.w3.org/2000/svg width48 height48 fillcurrentColor viewBox0 0 256 256>path dM128.23,30A40,40,0,0,1,167,0h1a8,8,0,0,1,0,16h-1a24,24,0,0,0-23.24,18,8,8,0,1,1-15.5-4ZM223.3,169.59a8.07,8.07,0,0,0-2.8-3.4C203.53,154.53,200,134.64,200,120c0-17.67,13.47-33.06,21.5-40.67a8,8,0,0,0,0-11.62C208.82,55.74,187.82,48,168,48a72.23,72.23,0,0,0-40,12.13,71.56,71.56,0,0,0-90.71,9.09A74.63,74.63,0,0,0,16,123.4a127,127,0,0,0,40.14,89.73A39.8,39.8,0,0,0,83.59,224h87.68a39.84,39.84,0,0,0,29.12-12.57,125,125,0,0,0,17.82-24.6C225.23,174,224.33,172,223.3,169.59Z>/path>/svg>/span>/span>/div>h3 classtext-xl font-bold mb-3 text-white>DimensionAppleIntegration/h3>p classtext-sm opacity-70 leading-relaxed>Apple sample code patterns and best practices integration for consistent architecture/p>/div>/div>/div>/div>/section>section classpy-32 px-6 aria-labelledbysdk-features-heading>div classmax-w-7xl mx-auto>div classh-full  styleheight:100%;display:flex;flex-direction:column;min-height:0;will-change:transform, opacity;transform:none;backface-visibility:hidden;opacity:1>h2 idsdk-features-heading classtext-5xl md:text-6xl font-bold text-center mb-4 stylefilter:var(--glow)>Enterprise Features & Capabilities/h2>p classtext-xl text-center mb-16 opacity-70 max-w-2xl mx-auto>Comprehensive SDK for building spatial media applications/p>/div>div classspace-y-12>div classh-full  styleheight:100%;display:flex;flex-direction:column;min-height:0;will-change:transform, opacity;transform:none;backface-visibility:hidden;opacity:1>div classglass-panel w-full h-full p-8 md:p-12 stylebackground:var(--panel-bg, rgba(255, 255, 255, 0.06));border-color:var(--panel-border, rgba(255, 255, 255, 0.15))>div classgrid md:grid-cols-12 gap-8 items-start>div classmd:col-span-4>div classmb-4 flex items-center justify-start>span classinline-flex items-center justify-center text-center stylewidth:100%;height:100%>span classinline-flex items-center justify-center text-var(--accent) stylewidth:64px;height:64px;display:flex;align-items:center;justify-content:center aria-labelvideo>svg xmlnshttp://www.w3.org/2000/svg width64 height64 fillcurrentColor viewBox0 0 256 256>path dM128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm40.55,110.58-52,36A8,8,0,0,1,104,164V92a8,8,0,0,1,12.55-6.58l52,36a8,8,0,0,1,0,13.16Z>/path>/svg>/span>/span>/div>h3 classtext-3xl font-bold mb-4>Spatial Media Capture/h3>p classtext-lg opacity-80 leading-relaxed>Multi platform support with Spatial Video (mv-hevc) recording, document scanning, and real time spatial audio capture with 3D positioning./p>/div>div classmd:col-span-8>ul classspace-y-3>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Real time spatial audio capture/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Spatial metadata preservation/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Multi device coordination/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Frame accurate capture/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Unified API for iOS, visionOS, macOS, tvOS/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Spatial Video recording (mv-hevc) (iPhone & Vision)/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Document scanning with VisionKit/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Continuity Camera support/span>/li>/ul>/div>/div>/div>/div>div classh-full  styleheight:100%;display:flex;flex-direction:column;min-height:0;will-change:transform, opacity;transform:none;backface-visibility:hidden;opacity:1>div classglass-panel w-full h-full p-8 md:p-12 stylebackground:var(--panel-bg, rgba(255, 255, 255, 0.06));border-color:var(--panel-border, rgba(255, 255, 255, 0.15))>div classgrid md:grid-cols-12 gap-8 items-start>div classmd:col-span-4>div classmb-4 flex items-center justify-start>span classinline-flex items-center justify-center text-center stylewidth:100%;height:100%>span classinline-flex items-center justify-center text-var(--accent) stylewidth:64px;height:64px;display:flex;align-items:center;justify-content:center aria-labelscissors>svg xmlnshttp://www.w3.org/2000/svg width64 height64 fillcurrentColor viewBox0 0 256 256>path dM157.73,113.13A8,8,0,0,1,159.82,102L227.48,55.7a8,8,0,0,1,9,13.21l-67.67,46.3a7.92,7.92,0,0,1-4.51,1.4A8,8,0,0,1,157.73,113.13Zm80.87,85.09a8,8,0,0,1-11.12,2.08L136,137.7,93.49,166.78a36,36,0,1,1-9-13.19L121.83,128,84.44,102.41a35.86,35.86,0,1,1,9-13.19l143,97.87A8,8,0,0,1,238.6,198.22ZM80,180a20,20,0,1,0-5.86,14.14A19.85,19.85,0,0,0,80,180ZM74.14,90.13a20,20,0,1,0-28.28,0A19.85,19.85,0,0,0,74.14,90.13Z>/path>/svg>/span>/span>/div>h3 classtext-3xl font-bold mb-4>Media Processing/h3>p classtext-lg opacity-80 leading-relaxed>GPU accelerated video filters, real time color correction, frame accurate trimming, and 3D spatial audio editing with object positioning./p>/div>div classmd:col-span-8>ul classspace-y-3>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Real time color correction and grading/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Frame accurate video trimming/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>3D spatial audio editing/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Spatial video format conversion/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>GPU accelerated video processing/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Memory efficient processing/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Stereo format conversion/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Custom shader support/span>/li>/ul>/div>/div>/div>/div>div classh-full  styleheight:100%;display:flex;flex-direction:column;min-height:0;will-change:transform, opacity;transform:none;backface-visibility:hidden;opacity:1>div classglass-panel w-full h-full p-8 md:p-12 stylebackground:var(--panel-bg, rgba(255, 255, 255, 0.06));border-color:var(--panel-border, rgba(255, 255, 255, 0.15))>div classgrid md:grid-cols-12 gap-8 items-start>div classmd:col-span-4>div classmb-4 flex items-center justify-start>span classinline-flex items-center justify-center text-center stylewidth:100%;height:100%>span classinline-flex items-center justify-center text-var(--accent) stylewidth:64px;height:64px;display:flex;align-items:center;justify-content:center aria-labelpaintbrush>svg xmlnshttp://www.w3.org/2000/svg width64 height64 fillcurrentColor viewBox0 0 256 256>path dM232,32a8,8,0,0,0-8-8c-44.08,0-89.31,49.71-114.43,82.63A60,60,0,0,0,32,164c0,30.88-19.54,44.73-20.47,45.37A8,8,0,0,0,16,224H92a60,60,0,0,0,57.37-77.57C182.3,121.31,232,76.08,232,32ZM124.42,113.55q5.14-6.66,10.09-12.55A76.23,76.23,0,0,1,155,121.49q-5.9,4.94-12.55,10.09A60.54,60.54,0,0,0,124.42,113.55Zm42.7-2.68a92.57,92.57,0,0,0-22-22c31.78-34.53,55.75-45,69.9-47.91C212.17,55.12,201.65,79.09,167.12,110.87Z>/path>/svg>/span>/span>/div>h3 classtext-3xl font-bold mb-4>Rendering & Visualization/h3>p classtext-lg opacity-80 leading-relaxed>Metal 4 rendering pipeline with RealityKit integration for immersive video playback in 3D space with 60fps targets./p>/div>div classmd:col-span-8>ul classspace-y-3>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Immersive video playback/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Environment & skybox rendering/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>60fps rendering targets/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>GPU accelerated processing/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>RealityKit integration/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Metal 4 rendering with Metal 3 fallback/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Residency set management/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Precompiled shader support/span>/li>/ul>/div>/div>/div>/div>div classh-full  styleheight:100%;display:flex;flex-direction:column;min-height:0;will-change:transform, opacity;transform:none;backface-visibility:hidden;opacity:1>div classglass-panel w-full h-full p-8 md:p-12 stylebackground:var(--panel-bg, rgba(255, 255, 255, 0.06));border-color:var(--panel-border, rgba(255, 255, 255, 0.15))>div classgrid md:grid-cols-12 gap-8 items-start>div classmd:col-span-4>div classmb-4 flex items-center justify-start>span classinline-flex items-center justify-center text-center stylewidth:100%;height:100%>span classinline-flex items-center justify-center text-var(--accent) stylewidth:64px;height:64px;display:flex;align-items:center;justify-content:center aria-labelexport>svg xmlnshttp://www.w3.org/2000/svg width64 height64 fillcurrentColor viewBox0 0 256 256>path dM74.34,77.66a8,8,0,0,1,0-11.32l48-48a8,8,0,0,1,11.32,0l48,48a8,8,0,0,1-11.32,11.32L136,43.31V128a8,8,0,0,1-16,0V43.31L85.66,77.66A8,8,0,0,1,74.34,77.66ZM240,136v64a16,16,0,0,1-16,16H32a16,16,0,0,1-16-16V136a16,16,0,0,1,16-16h68a4,4,0,0,1,4,4v3.46c0,13.45,11,24.79,24.46,24.54A24,24,0,0,0,152,128v-4a4,4,0,0,1,4-4h68A16,16,0,0,1,240,136Zm-40,32a12,12,0,1,0-12,12A12,12,0,0,0,200,168Z>/path>/svg>/span>/span>/div>h3 classtext-3xl font-bold mb-4>Export & Conversion/h3>p classtext-lg opacity-80 leading-relaxed>Multi-format export system supporting MP4, MOV, ProRes, MV-HEVC, M4A, MP3, WAV, and more with quality presets./p>/div>div classmd:col-span-8>ul classspace-y-3>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Quality presets (Draft, Standard, High, Maximum)/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Batch export operations/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Metadata preservation/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Progress tracking/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Video: MP4, MOV, M4V, ProRes 422/4444, HLS, MV-HEVC/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Audio: M4A, MP3, WAV, AAC, 48kHz/24-bit/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Image: PNG, JPG, PDF/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Document: PDF, HTML, Markdown, DOCX, EPUB/span>/li>/ul>/div>/div>/div>/div>div classh-full  styleheight:100%;display:flex;flex-direction:column;min-height:0;will-change:transform, opacity;transform:none;backface-visibility:hidden;opacity:1>div classglass-panel w-full h-full p-8 md:p-12 stylebackground:var(--panel-bg, rgba(255, 255, 255, 0.06));border-color:var(--panel-border, rgba(255, 255, 255, 0.15))>div classgrid md:grid-cols-12 gap-8 items-start>div classmd:col-span-4>div classmb-4 flex items-center justify-start>span classinline-flex items-center justify-center text-center stylewidth:100%;height:100%>span classinline-flex items-center justify-center text-var(--accent) stylewidth:64px;height:64px;display:flex;align-items:center;justify-content:center aria-labelmusic>svg xmlnshttp://www.w3.org/2000/svg width64 height64 fillcurrentColor viewBox0 0 256 256>path dM210.3,56.34l-80-24A8,8,0,0,0,120,40V148.26A48,48,0,1,0,136,184V98.75l69.7,20.91A8,8,0,0,0,216,112V64A8,8,0,0,0,210.3,56.34ZM88,216a32,32,0,1,1,32-32A32,32,0,0,1,88,216ZM200,101.25l-64-19.2V50.75L200,70Z>/path>/svg>/span>/span>/div>h3 classtext-3xl font-bold mb-4>Spatial Audio/h3>p classtext-lg opacity-80 leading-relaxed>Object based spatial audio (APAC format) with 6DOF positioning, room acoustics simulation, and head tracking integration./p>/div>div classmd:col-span-8>ul classspace-y-3>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Realtime object placement/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Room acoustics & reverb/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Head tracking integration/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Multiple audio objects in 3D space/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Audio scene management/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Object based audio (APAC)/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>6DOF audio positioning/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Spatial metadata I/O/span>/li>/ul>/div>/div>/div>/div>div classh-full  styleheight:100%;display:flex;flex-direction:column;min-height:0;will-change:transform, opacity;transform:none;backface-visibility:hidden;opacity:1>div classglass-panel w-full h-full p-8 md:p-12 stylebackground:var(--panel-bg, rgba(255, 255, 255, 0.06));border-color:var(--panel-border, rgba(255, 255, 255, 0.15))>div classgrid md:grid-cols-12 gap-8 items-start>div classmd:col-span-4>div classmb-4 flex items-center justify-start>span classinline-flex items-center justify-center text-center stylewidth:100%;height:100%>span classinline-flex items-center justify-center text-var(--accent) stylewidth:64px;height:64px;display:flex;align-items:center;justify-content:center aria-labellibrary>svg xmlnshttp://www.w3.org/2000/svg width64 height64 fillcurrentColor viewBox0 0 256 256>path dM231.65,194.55,198.46,36.75a16,16,0,0,0-19-12.39L132.65,34.42a16.08,16.08,0,0,0-12.3,19l33.19,157.8A16,16,0,0,0,169.16,224a16.25,16.25,0,0,0,3.38-.36l46.81-10.06A16.09,16.09,0,0,0,231.65,194.55ZM136,50.15c0-.06,0-.09,0-.09l46.8-10,3.33,15.87L139.33,66Zm10,47.38-3.35-15.9,46.82-10.06,3.34,15.9Zm70,100.41-46.8,10-3.33-15.87L212.67,182,216,197.85C216,197.91,216,197.94,216,197.94ZM104,32H56A16,16,0,0,0,40,48V208a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V48A16,16,0,0,0,104,32ZM56,48h48V64H56Zm48,160H56V192h48v16Z>/path>/svg>/span>/span>/div>h3 classtext-3xl font-bold mb-4>Playlist & Library/h3>p classtext-lg opacity-80 leading-relaxed>Photos Framework integration with CloudKit synchronization, cross-device playlist sync, and Core Data persistence./p>/div>div classmd:col-span-8>ul classspace-y-3>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Cross device playlist sync/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Playlist collection management/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Smart collections/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Metadata editing/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>External drive support/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>CloudKit synchronization/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Photos app reference management/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Core Data persistence/span>/li>/ul>/div>/div>/div>/div>/div>/div>/section>section classpy-32 px-6 aria-labelledbyplatforms-heading>div classmax-w-7xl mx-auto>div classh-full  styleheight:100%;display:flex;flex-direction:column;min-height:0;will-change:transform, opacity;transform:none;backface-visibility:hidden;opacity:1>h2 idplatforms-heading classtext-5xl md:text-6xl font-bold text-center mb-4 stylefilter:var(--glow)>Platform Support/h2>p classtext-xl text-center mb-16 opacity-70 max-w-2xl mx-auto>Comprehensive support across all Apple platforms/p>/div>div classgrid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6>div classh-full  styleheight:100%;display:flex;flex-direction:column;min-height:0;will-change:transform, opacity;transform:none;backface-visibility:hidden;opacity:1>div classglass-panel w-full h-full p-6 h-full stylebackground:var(--panel-bg, rgba(255, 255, 255, 0.06));border-color:var(--panel-border, rgba(255, 255, 255, 0.15))>h3 classtext-2xl font-bold mb-2 stylecolor:var(--accent)>iOS/h3>p classtext-sm opacity-60 mb-3>18.0+/p>p classtext-sm opacity-70 leading-relaxed>Full support for spatial media capture, editing, and playback on iPhone and iPad/p>/div>/div>div classh-full  styleheight:100%;display:flex;flex-direction:column;min-height:0;will-change:transform, opacity;transform:none;backface-visibility:hidden;opacity:1>div classglass-panel w-full h-full p-6 h-full stylebackground:var(--panel-bg, rgba(255, 255, 255, 0.06));border-color:var(--panel-border, rgba(255, 255, 255, 0.15))>h3 classtext-2xl font-bold mb-2 stylecolor:var(--accent)>visionOS/h3>p classtext-sm opacity-60 mb-3>2.0+/p>p classtext-sm opacity-70 leading-relaxed>Native spatial video capture and immersive playback with 3D spatial audio and hand tracking/p>/div>/div>div classh-full  styleheight:100%;display:flex;flex-direction:column;min-height:0;will-change:transform, opacity;transform:none;backface-visibility:hidden;opacity:1>div classglass-panel w-full h-full p-6 h-full stylebackground:var(--panel-bg, rgba(255, 255, 255, 0.06));border-color:var(--panel-border, rgba(255, 255, 255, 0.15))>h3 classtext-2xl font-bold mb-2 stylecolor:var(--accent)>macOS/h3>p classtext-sm opacity-60 mb-3>15.0+/p>p classtext-sm opacity-70 leading-relaxed>Desktop editing interface with keyboard shortcuts, timeline editing, and advanced export options/p>/div>/div>div classh-full  styleheight:100%;display:flex;flex-direction:column;min-height:0;will-change:transform, opacity;transform:none;backface-visibility:hidden;opacity:1>div classglass-panel w-full h-full p-6 h-full stylebackground:var(--panel-bg, rgba(255, 255, 255, 0.06));border-color:var(--panel-border, rgba(255, 255, 255, 0.15))>h3 classtext-2xl font-bold mb-2 stylecolor:var(--accent)>tvOS/h3>p classtext-sm opacity-60 mb-3>17.0+/p>p classtext-sm opacity-70 leading-relaxed>Media playback and streaming support for Apple TV/p>/div>/div>/div>/div>/section>section classpy-32 px-6>div classmax-w-7xl mx-auto>div classh-full  styleheight:100%;display:flex;flex-direction:column;min-height:0;will-change:transform, opacity;transform:none;backface-visibility:hidden;opacity:1>h2 classtext-5xl md:text-6xl font-bold text-center mb-4 stylefilter:var(--glow)>Technical Architecture/h2>p classtext-xl text-center mb-16 opacity-70 max-w-2xl mx-auto>Modern Swift architecture with comprehensive integration/p>/div>div classgrid md:grid-cols-2 gap-8>div classh-full  styleheight:100%;display:flex;flex-direction:column;min-height:0;will-change:transform, opacity;transform:none;backface-visibility:hidden;opacity:1>div classglass-panel w-full h-full p-8 stylebackground:var(--panel-bg, rgba(255, 255, 255, 0.06));border-color:var(--panel-border, rgba(255, 255, 255, 0.15))>h3 classtext-2xl font-bold mb-4>Architecture Benefits/h3>ul classspace-y-3>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Use only the modules you need/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Independent versioning and deployment/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Clear dependency management/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Easy integration into existing codebases/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Minimal footprint per module/span>/li>/ul>/div>/div>div classh-full  styleheight:100%;display:flex;flex-direction:column;min-height:0;will-change:transform, opacity;transform:none;backface-visibility:hidden;opacity:1>div classglass-panel w-full h-full p-8 stylebackground:var(--panel-bg, rgba(255, 255, 255, 0.06));border-color:var(--panel-border, rgba(255, 255, 255, 0.15))>h3 classtext-2xl font-bold mb-4>Technology Stack/h3>ul classspace-y-3>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Swift 6.2+ with async/await/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Metal 4 (Metal 3 fallback)/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>RealityKit integration/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Swift Package Manager/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>100+ comprehensive unit tests/span>/li>/ul>/div>/div>/div>/div>/section>section classpy-32 px-6 aria-labelledbyadvantages-heading>div classmax-w-7xl mx-auto>div classh-full  styleheight:100%;display:flex;flex-direction:column;min-height:0;will-change:transform, opacity;transform:none;backface-visibility:hidden;opacity:1>h2 idadvantages-heading classtext-5xl md:text-6xl font-bold text-center mb-4 stylefilter:var(--glow)>Competitive Advantages/h2>p classtext-xl text-center mb-16 opacity-70 max-w-2xl mx-auto>Why choose Dimension SDK/p>/div>div classgrid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6>div classh-full  styleheight:100%;display:flex;flex-direction:column;min-height:0;will-change:transform, opacity;transform:none;backface-visibility:hidden;opacity:1>div classglass-panel w-full h-full p-6 h-full stylebackground:var(--panel-bg, rgba(255, 255, 255, 0.06));border-color:var(--panel-border, rgba(255, 255, 255, 0.15))>h3 classtext-xl font-bold mb-3>Production Ready/h3>p classtext-sm opacity-70 leading-relaxed>Comprehensive test suite, documentation, examples, and proven in production environments/p>/div>/div>div classh-full  styleheight:100%;display:flex;flex-direction:column;min-height:0;will-change:transform, opacity;transform:none;backface-visibility:hidden;opacity:1>div classglass-panel w-full h-full p-6 h-full stylebackground:var(--panel-bg, rgba(255, 255, 255, 0.06));border-color:var(--panel-border, rgba(255, 255, 255, 0.15))>h3 classtext-xl font-bold mb-3>Frameworks, Not Middleware/h3>p classtext-sm opacity-70 leading-relaxed>9 specialized modules, use only what you need with independent versioning and deployment/p>/div>/div>div classh-full  styleheight:100%;display:flex;flex-direction:column;min-height:0;will-change:transform, opacity;transform:none;backface-visibility:hidden;opacity:1>div classglass-panel w-full h-full p-6 h-full stylebackground:var(--panel-bg, rgba(255, 255, 255, 0.06));border-color:var(--panel-border, rgba(255, 255, 255, 0.15))>h3 classtext-xl font-bold mb-3>Apple Integration/h3>p classtext-sm opacity-70 leading-relaxed>Deep integration with Apple's ecosystem, best practices, and sample code patterns/p>/div>/div>div classh-full  styleheight:100%;display:flex;flex-direction:column;min-height:0;will-change:transform, opacity;transform:none;backface-visibility:hidden;opacity:1>div classglass-panel w-full h-full p-6 h-full stylebackground:var(--panel-bg, rgba(255, 255, 255, 0.06));border-color:var(--panel-border, rgba(255, 255, 255, 0.15))>h3 classtext-xl font-bold mb-3>We Write Shaders/h3>p classtext-sm opacity-70 leading-relaxed>GPU accelerated, memory efficient processing with 60fps rendering targets. We write shaders, not wrappers./p>/div>/div>div classh-full  styleheight:100%;display:flex;flex-direction:column;min-height:0;will-change:transform, opacity;transform:none;backface-visibility:hidden;opacity:1>div classglass-panel w-full h-full p-6 h-full stylebackground:var(--panel-bg, rgba(255, 255, 255, 0.06));border-color:var(--panel-border, rgba(255, 255, 255, 0.15))>h3 classtext-xl font-bold mb-3>Cross-Platform/h3>p classtext-sm opacity-70 leading-relaxed>Single codebase for iOS, visionOS, macOS, and tvOS with unified APIs/p>/div>/div>div classh-full  styleheight:100%;display:flex;flex-direction:column;min-height:0;will-change:transform, opacity;transform:none;backface-visibility:hidden;opacity:1>div classglass-panel w-full h-full p-6 h-full stylebackground:var(--panel-bg, rgba(255, 255, 255, 0.06));border-color:var(--panel-border, rgba(255, 255, 255, 0.15))>h3 classtext-xl font-bold mb-3>Modern Architecture/h3>p classtext-sm opacity-70 leading-relaxed>Swift 6.2+, async/await, protocol based design with comprehensive error handling/p>/div>/div>div classh-full  styleheight:100%;display:flex;flex-direction:column;min-height:0;will-change:transform, opacity;transform:none;backface-visibility:hidden;opacity:1>div classglass-panel w-full h-full p-6 h-full stylebackground:var(--panel-bg, rgba(255, 255, 255, 0.06));border-color:var(--panel-border, rgba(255, 255, 255, 0.15))>h3 classtext-xl font-bold mb-3>Enterprise Support/h3>p classtext-sm opacity-70 leading-relaxed>Comprehensive documentation, training, and consulting services available/p>/div>/div>div classh-full  styleheight:100%;display:flex;flex-direction:column;min-height:0;will-change:transform, opacity;transform:none;backface-visibility:hidden;opacity:1>div classglass-panel w-full h-full p-6 h-full stylebackground:var(--panel-bg, rgba(255, 255, 255, 0.06));border-color:var(--panel-border, rgba(255, 255, 255, 0.15))>h3 classtext-xl font-bold mb-3>Proven Technology/h3>p classtext-sm opacity-70 leading-relaxed>Based on Apple sample code patterns and best practices, production tested/p>/div>/div>/div>/div>/section>section classpy-32 px-6 aria-labelledbyroi-heading>div classmax-w-7xl mx-auto>div classh-full  styleheight:100%;display:flex;flex-direction:column;min-height:0;will-change:transform, opacity;transform:none;backface-visibility:hidden;opacity:1>h2 idroi-heading classtext-5xl md:text-6xl font-bold text-center mb-4 stylefilter:var(--glow)>ROI & Business Value/h2>p classtext-xl text-center mb-16 opacity-70 max-w-2xl mx-auto>Significant time and cost savings for your development team/p>/div>div classgrid md:grid-cols-2 gap-8 mb-12>div classh-full  styleheight:100%;display:flex;flex-direction:column;min-height:0;will-change:transform, opacity;transform:none;backface-visibility:hidden;opacity:1>div classglass-panel w-full h-full p-8 stylebackground:var(--panel-bg, rgba(255, 255, 255, 0.06));border-color:var(--panel-border, rgba(255, 255, 255, 0.15))>h3 classtext-3xl font-bold mb-6>Development Time Savings/h3>div classspace-y-4 mb-6>div>p classtext-sm opacity-60 mb-1>Custom Implementation/p>p classtext-2xl font-bold>6 to 12 months/p>/div>div>p classtext-sm opacity-60 mb-1>With Dimension SDK/p>p classtext-2xl font-bold stylecolor:var(--accent)>1 to 3 months/p>/div>div classpt-4 border-t border-white/10>p classtext-sm opacity-60 mb-1>Time Savings/p>p classtext-4xl font-bold stylecolor:var(--accent)>60 to 80%/p>/div>/div>/div>/div>div classh-full  styleheight:100%;display:flex;flex-direction:column;min-height:0;will-change:transform, opacity;transform:none;backface-visibility:hidden;opacity:1>div classglass-panel w-full h-full p-8 stylebackground:var(--panel-bg, rgba(255, 255, 255, 0.06));border-color:var(--panel-border, rgba(255, 255, 255, 0.15))>h3 classtext-3xl font-bold mb-6>Cost Benefits/h3>ul classspace-y-3>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Reduced engineering costs/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Faster time to market/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Lower maintenance burden/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Reduced testing requirements/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Production ready architecture/span>/li>li classflex items-start gap-3>span classtext-var(--accent) mt-1>✓/span>span classopacity-80>Cross platform consistency/span>/li>/ul>/div>/div>/div>/div>/section>section classpy-32 px-6>div classmax-w-7xl mx-auto>div classh-full  styleheight:100%;display:flex;flex-direction:column;min-height:0;will-change:transform, opacity;transform:none;backface-visibility:hidden;opacity:1>h2 classtext-5xl md:text-6xl font-bold text-center mb-4 stylefilter:var(--glow)>Easy Integration/h2>p classtext-xl text-center mb-16 opacity-70 max-w-2xl mx-auto>Swift Package Manager integration with modular deployment/p>/div>div classh-full  styleheight:100%;display:flex;flex-direction:column;min-height:0;will-change:transform, opacity;transform:none;backface-visibility:hidden;opacity:1>div classglass-panel w-full h-full p-8 md:p-12 stylebackground:var(--panel-bg, rgba(255, 255, 255, 0.06));border-color:var(--panel-border, rgba(255, 255, 255, 0.15))>div classmax-w-3xl mx-auto>h3 classtext-2xl font-bold mb-6 text-center>Swift Package Manager/h3>div classbg-black/40 rounded-lg p-6 font-mono text-sm overflow-x-auto>pre classtext-white/80>dependencies:     .package(url: "https://github.com/yourorg/dimension-sdk", from: "1.0.0"),targets:     .target(        name: "YourApp",        dependencies:             .product(name: "DimensionRender", package: "dimension-sdk"),            .product(name: "DimensionAudio", package: "dimension-sdk"),            // Add only what you need            )/pre>/div>p classtext-center mt-6 opacity-70 text-sm>Import only required frameworks • Minimal binary size impact • Independent versioning/p>/div>/div>/div>/div>/section>section classpy-32 px-6 aria-labelledbycta-heading>div classmax-w-4xl mx-auto>div classh-full  styleheight:100%;display:flex;flex-direction:column;min-height:0;will-change:transform, opacity;transform:none;backface-visibility:hidden;opacity:1>div classglass-panel w-full h-full p-12 md:p-16 text-center stylebackground:var(--panel-bg, rgba(255, 255, 255, 0.06));border-color:var(--panel-border, rgba(255, 255, 255, 0.15))>h2 idcta-heading classtext-4xl md:text-5xl font-bold mb-6 stylefilter:var(--glow)>Ready to Build with Dimension?/h2>p classtext-xl mb-8 opacity-80 leading-relaxed max-w-2xl mx-auto>Start building next generation immersive media apps with production ready SDK modules./p>div classflex gap-4 justify-center flex-wrap>button classpx-6 py-3 rounded-xl font-semibold shadow-lg transition-all duration-300 hover:scale-105 bg-var(--accent) text-black hover:opacity-90 text-lg px-8 py-4 stylebackground-color:var(--accent);background:var(--accent);filter:var(--glow);box-shadow:0 8px 24px rgba(var(--accent-rgb, 122, 110, 255), 0.15)>Get Started/button>button classpx-6 py-3 rounded-xl font-semibold shadow-lg transition-all duration-300 hover:scale-105 bg-transparent border-2 border-var(--accent) text-var(--accent) hover:bg-var(--accent)/10 text-lg px-8 py-4 stylebackground-color:transparent;filter:none;box-shadow:none>View Documentation/button>/div>/div>/div>/div>/section>footer classpy-16 px-6 border-t border-white/10 rolecontentinfo>div classmax-w-7xl mx-auto>div classgrid grid-cols-2 md:grid-cols-5 gap-8 mb-12>div classcol-span-2 md:col-span-2>div classh-full  styleheight:100%;display:flex;flex-direction:column;min-height:0;will-change:transform, opacity;transform:none;backface-visibility:hidden;opacity:1>div classflex items-center gap-3 mb-4>img src/dimension-icon.svg altDimension classh-12 w-12/>h3 classtext-2xl font-bold>Dimension/h3>/div>p classtext-sm opacity-60 mb-4 max-w-xs>Voice-first AI companion with AR experiences and document processing. Natural conversations powered by advanced AI./p>/div>/div>div classh-full  styleheight:100%;display:flex;flex-direction:column;min-height:0;will-change:transform, opacity;transform:none;backface-visibility:hidden;opacity:1>div>h4 classfont-semibold mb-4 text-sm>Products/h4>nav classspace-y-2>a href/ classblock text-sm opacity-60 hover:opacity-100 transition>Dimension/a>a hrefhttps://talkie.click/ classblock text-sm opacity-60 hover:opacity-100 transition>Talkie/a>a hrefhttps://playback.click/ classblock text-sm opacity-60 hover:opacity-100 transition>Playback/a>a hrefhttps://remake.click/ classblock text-sm opacity-60 hover:opacity-100 transition>Remake/a>a href/ classblock text-sm opacity-60 hover:opacity-100 transition>Dimension/a>a hrefhttps://perception.click/ classblock text-sm opacity-60 hover:opacity-100 transition>Perception/a>a hrefhttps://generation.click/ classblock text-sm opacity-60 hover:opacity-100 transition>Generation/a>/nav>/div>/div>div classh-full  styleheight:100%;display:flex;flex-direction:column;min-height:0;will-change:transform, opacity;transform:none;backface-visibility:hidden;opacity:1>div>h4 classfont-semibold mb-4 text-sm>Company/h4>nav classspace-y-2>a href/about classblock text-sm opacity-60 hover:opacity-100 transition>About/a>a href/beta classblock text-sm opacity-60 hover:opacity-100 transition>Beta/a>a href/developers classblock text-sm opacity-60 hover:opacity-100 transition>Developers/a>a href/investors classblock text-sm opacity-60 hover:opacity-100 transition>Investors/a>a href/studio classblock text-sm opacity-60 hover:opacity-100 transition>Applied R&D/a>a href/support classblock text-sm opacity-60 hover:opacity-100 transition>Support/a>a href/contact classblock text-sm opacity-60 hover:opacity-100 transition>Contact/a>/nav>/div>/div>div classh-full  styleheight:100%;display:flex;flex-direction:column;min-height:0;will-change:transform, opacity;transform:none;backface-visibility:hidden;opacity:1>div>h4 classfont-semibold mb-4 text-sm>Legal/h4>nav classspace-y-2>a href/privacy classblock text-sm opacity-60 hover:opacity-100 transition>Privacy/a>a href/terms classblock text-sm opacity-60 hover:opacity-100 transition>Terms/a>a href/security classblock text-sm opacity-60 hover:opacity-100 transition>Security/a>a href/cookies classblock text-sm opacity-60 hover:opacity-100 transition>Cookies/a>/nav>/div>/div>/div>div classpt-8 border-t border-white/10 flex flex-col md:flex-row justify-between items-center gap-4>div classtext-sm opacity-60>© 2025 Dimension. All rights reserved./div>nav classflex gap-6>a href# classtext-sm opacity-60 hover:opacity-100 transition aria-labelTwitter>Twitter/a>a href# classtext-sm opacity-60 hover:opacity-100 transition aria-labelGitHub>GitHub/a>a href# classtext-sm opacity-60 hover:opacity-100 transition aria-labelLinkedIn>LinkedIn/a>/nav>/div>/div>/footer>/main>/div>/div>/div>script id__NEXT_DATA__ typeapplication/json>{props:{pageProps:{}},page:/dimension,query:{},buildId:BL0lGKhicQkqBNxAqbzQN,nextExport:true,autoExport:true,isFallback:false,scriptLoader:}/script>/body>/html>

Port 443

View on OTX | View on ThreatMiner

Data with thanks to AlienVault OTX, VirusTotal, Malwr and others. [Sitemap]

Domain > dimension.click

Is this malicious?

DNS Resolutions

Port 80

Port 443