diff --git a/README.md b/README.md
index 7d5b273..c86353b 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # Algoria
 
-![](https://img.shields.io/badge/Versão-1.2.0-black?style=for-the-badge)
+![](https://img.shields.io/badge/Versão-1.3.0-black?style=for-the-badge)
 
 Plataforma em português para estudar **algoritmos e decisões em código** através de leitura guiada: catálogo de problemas com várias soluções (brute-force, óptima, alternativa), **code player** linha-a-linha com três níveis de explicação, mini-guias em **Conceitos**, **curso modular** com avaliações locais, hub de **inglês técnico para entrevistas** (conteúdo em inglês) e guias de **engenharia aplicada** (front, back, DevOps).
 
@@ -11,7 +11,7 @@ Plataforma em português para estudar **algoritmos e decisões em código** atra
 ## Funcionalidades
 
 - 📚 **Catálogo de problemas** — enunciados em Markdown, tags, dificuldade e várias implementações lado a lado quando existirem
-- 🎯 **Code player** — navegação linha-a-linha, destaque sintaxe (Shiki), painel com níveis Resumo / Detalhado / Deep dive e atalhos de teclado
+- 🎯 **Code player** — navegação linha-a-linha, destaque sintaxe (Shiki), painel com níveis Resumo / Detalhado / Deep dive e atalhos de teclado, visualização de estruturas de dados e execução de código linha a linha.
 - 🧠 **Conceitos** — páginas longas (fundamentos, estruturas, padrões) carregadas do repositório em Markdown
 - 🎓 **Curso guiado** — trilha modular com exemplos, MCQs e certificado por capítulo (progresso no browser)
 - 🌍 **Interview English** — hub `/interview-en` com vocabulário e scripts 100% em inglês para entrevistas
diff --git a/app/admin/content/_components/dashboard/dashboard-filters.tsx b/app/admin/content/_components/dashboard/dashboard-filters.tsx
index 02c811e..3a47d3c 100644
--- a/app/admin/content/_components/dashboard/dashboard-filters.tsx
+++ b/app/admin/content/_components/dashboard/dashboard-filters.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { EDITORIAL_TYPES, SYSTEM_TYPE_OPTIONS, STATUS_FILTERS } from "./dashboard-types";
+import { EDITORIAL_TYPES, SYSTEM_TYPE_OPTIONS, STATUS_FILTERS, CATEGORY_OPTIONS } from "./dashboard-types";
 
 interface DashboardFiltersProps {
   tab: 'editorial' | 'sistema';
@@ -10,6 +10,8 @@ interface DashboardFiltersProps {
   onTypeFilterChange: (v: string) => void;
   statusFilter: string;
   onStatusFilterChange: (v: string) => void;
+  categoryFilter: string;
+  onCategoryFilterChange: (v: string) => void;
   onClearFilters: () => void;
 }
 
@@ -21,6 +23,8 @@ export function DashboardFilters({
   onTypeFilterChange,
   statusFilter,
   onStatusFilterChange,
+  categoryFilter,
+  onCategoryFilterChange,
   onClearFilters,
 }: DashboardFiltersProps) {
   const typeOptions = tab === 'editorial' ? EDITORIAL_TYPES : SYSTEM_TYPE_OPTIONS;
@@ -63,6 +67,20 @@ export function DashboardFilters({
           ))}
         </select>
 
+        {typeOptions === EDITORIAL_TYPES && (
+          <select
+            value={categoryFilter}
+            onChange={(e) => onCategoryFilterChange(e.target.value)}
+            className="h-10 rounded-md border border-input bg-background px-3 text-sm outline-none focus:ring-2 focus:ring-primary/20"
+          >
+            {CATEGORY_OPTIONS.map((opt) => (
+              <option key={opt.value} value={opt.value}>
+                {opt.label}
+              </option>
+            ))}
+          </select>
+        )}
+
         <select
           value={statusFilter}
           onChange={(e) => onStatusFilterChange(e.target.value)}
@@ -75,7 +93,7 @@ export function DashboardFilters({
           ))}
         </select>
 
-        {(search || typeFilter || statusFilter) && (
+        {(search || typeFilter || statusFilter || categoryFilter) && (
           <button
             onClick={onClearFilters}
             className="h-10 rounded-md px-3 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
diff --git a/app/admin/content/_components/dashboard/dashboard-types.ts b/app/admin/content/_components/dashboard/dashboard-types.ts
index 91ff3a6..b0bc60e 100644
--- a/app/admin/content/_components/dashboard/dashboard-types.ts
+++ b/app/admin/content/_components/dashboard/dashboard-types.ts
@@ -60,3 +60,25 @@ export const STATUS_FILTERS = [
   { value: "PUBLISHED", label: "Publicado" },
   { value: "REJECTED", label: "Rejeitado" },
 ];
+
+export const CATEGORY_OPTIONS = [
+  { value: "", label: "Todas as categorias" },
+  { value: "arrays", label: "Arrays" },
+  { value: "hash-tables", label: "Hash Tables" },
+  { value: "two-pointers", label: "Two Pointers" },
+  { value: "sliding-window", label: "Sliding Window" },
+  { value: "binary-search", label: "Binary Search" },
+  { value: "linked-list", label: "Linked List" },
+  { value: "trees", label: "Trees" },
+  { value: "graphs", label: "Graphs" },
+  { value: "dynamic-programming", label: "Dynamic Programming" },
+  { value: "greedy", label: "Greedy" },
+  { value: "backtracking", label: "Backtracking" },
+  { value: "bit-manipulation", label: "Bit Manipulation" },
+  { value: "math", label: "Math" },
+  { value: "strings", label: "Strings" },
+  { value: "stacks", label: "Stacks" },
+  { value: "queues", label: "Queues" },
+  { value: "recursion", label: "Recursion" },
+  { value: "sorting", label: "Sorting" },
+];
diff --git a/app/admin/content/_components/forms/problem-form.tsx b/app/admin/content/_components/forms/problem-form.tsx
index 5dfbad5..db32fdb 100644
--- a/app/admin/content/_components/forms/problem-form.tsx
+++ b/app/admin/content/_components/forms/problem-form.tsx
@@ -61,14 +61,15 @@ export function ProblemForm({
         ...meta,
         difficulty: importedMeta.difficulty || meta.difficulty,
         access: importedMeta.access || meta.access,
+        hasBespokeVisualizer: parsed.hasBespokeVisualizer ?? importedMeta.hasBespokeVisualizer ?? meta.hasBespokeVisualizer,
         estimatedMinutes: importedMeta.estimatedMinutes || meta.estimatedMinutes,
         recommendedOrder: importedMeta.recommendedOrder || meta.recommendedOrder,
-        categories: importedMeta.categories || meta.categories,
-        constraints: importedMeta.constraints || meta.constraints,
-        solutions: importedMeta.solutions || meta.solutions,
-        examples: importedMeta.examples || meta.examples,
-        tags: importedMeta.tags || meta.tags,
-        prerequisites: importedMeta.prerequisites || meta.prerequisites,
+        categories: importedMeta.categories || parsed.categories || meta.categories,
+        constraints: importedMeta.constraints || parsed.constraints || meta.constraints,
+        solutions: importedMeta.solutions || parsed.solutions || meta.solutions,
+        examples: importedMeta.examples || parsed.examples || meta.examples,
+        tags: importedMeta.tags || parsed.tags || meta.tags,
+        prerequisites: importedMeta.prerequisites || parsed.prerequisites || meta.prerequisites,
       });
 
       setIsImportOpen(false);
diff --git a/app/admin/content/_components/solutions-editor.tsx b/app/admin/content/_components/solutions-editor.tsx
index 39a79a1..f2b05be 100644
--- a/app/admin/content/_components/solutions-editor.tsx
+++ b/app/admin/content/_components/solutions-editor.tsx
@@ -332,6 +332,24 @@ export function SolutionsList({
                 />
               </FormField>
 
+              <FormField 
+                label="Simulator Code (Javascript)" 
+                hint="Função (input) => steps[] para gerar a simulação visual."
+              >
+                <textarea
+                  value={sol.meta.simulatorCode || ""}
+                  onChange={(e) =>
+                    updateSolution(idx, {
+                      ...sol,
+                      meta: { ...sol.meta, simulatorCode: e.target.value },
+                    })
+                  }
+                  className="w-full rounded-lg border border-border bg-[#080808] text-emerald-400 p-3 font-mono text-xs focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/30"
+                  rows={8}
+                  placeholder="(s) => { const steps = []; ... return steps; }"
+                />
+              </FormField>
+
               <div className="space-y-4 pt-4 border-t border-border">
                 <h4 className="text-xs font-black uppercase tracking-widest text-primary">
                   Implementações (Multi-Language)
diff --git a/app/admin/content/_components/types.ts b/app/admin/content/_components/types.ts
index 0e0f452..e1fa933 100644
--- a/app/admin/content/_components/types.ts
+++ b/app/admin/content/_components/types.ts
@@ -29,15 +29,20 @@ export interface EditorSolution {
     name: string;
     kind: string;
     language: string;
+    entryFunction?: string;
+    simulatorCode?: string;
     complexity: {
       time: string;
       space: string;
       rationale: string;
     };
-    entryFunction?: string;
   };
   codeByLanguage: Record<string, string>;
   introMd: string;
+  annotations: unknown[];
+  executionTrace?: {
+    steps: unknown[];
+  };
 }
 
 export type ContentStatus =
@@ -121,6 +126,7 @@ export const DEFAULT_META: Record<string, Record<string, unknown>> = {
   problem: {
     difficulty: "easy",
     categories: [],
+    hasBespokeVisualizer: false,
     estimatedMinutes: 15,
     access: "pro",
     recommendedOrder: 1,
diff --git a/app/admin/content/content-dashboard-client.tsx b/app/admin/content/content-dashboard-client.tsx
index b9a9450..9852bee 100644
--- a/app/admin/content/content-dashboard-client.tsx
+++ b/app/admin/content/content-dashboard-client.tsx
@@ -25,6 +25,7 @@ export default function ContentDashboardClient({ isAdmin }: { isAdmin: boolean }
   const [search, setSearch] = useState(searchParams.get('search') ?? '');
   const [typeFilter, setTypeFilter] = useState(searchParams.get('type') ?? '');
   const [statusFilter, setStatusFilter] = useState(searchParams.get('status') ?? '');
+  const [categoryFilter, setCategoryFilter] = useState(searchParams.get('category') ?? '');
   const [accessFilter, setAccessFilter] = useState(searchParams.get('access') ?? '');
   const [feedback, setFeedback] = useState<{ type: 'success' | 'error'; msg: string } | null>(null);
 
@@ -46,6 +47,7 @@ export default function ContentDashboardClient({ isAdmin }: { isAdmin: boolean }
     const urlType = searchParams.get('type') ?? '';
     const urlTab = searchParams.get('tab') ?? '';
     const urlStatus = searchParams.get('status') ?? '';
+    const urlCategory = searchParams.get('category') ?? '';
     const urlSearch = searchParams.get('search') ?? '';
     const urlAccess = searchParams.get('access') ?? '';
     const urlPage = parseInt(searchParams.get('page') || '1');
@@ -65,6 +67,7 @@ export default function ContentDashboardClient({ isAdmin }: { isAdmin: boolean }
 
       setTypeFilter(urlType);
       setStatusFilter(urlStatus);
+      setCategoryFilter(urlCategory);
       setSearch(urlSearch);
       setAccessFilter(urlAccess);
       setPage(urlPage);
@@ -77,6 +80,7 @@ export default function ContentDashboardClient({ isAdmin }: { isAdmin: boolean }
       search: s,
       type: typeFilter || undefined,
       status: statusFilter || undefined,
+      category: categoryFilter || undefined,
       tab,
       access: accessFilter || undefined,
     });
@@ -85,20 +89,21 @@ export default function ContentDashboardClient({ isAdmin }: { isAdmin: boolean }
       setRows(result.contents as unknown as ContentRow[]);
       setTotal(result.total);
     }
-  }, [typeFilter, statusFilter, tab, accessFilter]);
+  }, [typeFilter, statusFilter, categoryFilter, tab, accessFilter]);
 
   useEffect(() => {
     const timer = setTimeout(() => {
       load(page, search);
     }, 300);
     return () => clearTimeout(timer);
-  }, [page, typeFilter, statusFilter, search, tab, accessFilter, load]);
+  }, [page, typeFilter, statusFilter, categoryFilter, search, tab, accessFilter, load]);
 
   function handleTabChange(newTab: 'editorial' | 'sistema') {
     setTab(newTab);
     setPage(1);
     setTypeFilter('');
     setStatusFilter('');
+    setCategoryFilter('');
     setSearch('');
     
     // Update URL
@@ -106,6 +111,7 @@ export default function ContentDashboardClient({ isAdmin }: { isAdmin: boolean }
     params.set('tab', newTab);
     params.delete('type');
     params.delete('status');
+    params.delete('category');
     params.delete('search');
     params.set('page', '1');
     window.history.pushState(null, '', `?${params.toString()}`);
@@ -141,6 +147,7 @@ export default function ContentDashboardClient({ isAdmin }: { isAdmin: boolean }
     setSearch('');
     setTypeFilter('');
     setStatusFilter('');
+    setCategoryFilter('');
     setPage(1);
   }
 
@@ -182,7 +189,7 @@ export default function ContentDashboardClient({ isAdmin }: { isAdmin: boolean }
         )}
 
         <DashboardFilters 
-          tab={tab}
+          tab={accessFilter === 'pro' ? 'editorial' : tab}
           search={search}
           onSearchChange={(v) => {
             setSearch(v);
@@ -201,9 +208,15 @@ export default function ContentDashboardClient({ isAdmin }: { isAdmin: boolean }
             setPage(1);
             updateUrl({ status: v, page: '1' });
           }}
+          categoryFilter={categoryFilter}
+          onCategoryFilterChange={(v) => {
+            setCategoryFilter(v);
+            setPage(1);
+            updateUrl({ category: v, page: '1' });
+          }}
           onClearFilters={() => {
             clearFilters();
-            updateUrl({ type: null, status: null, search: null, page: '1' });
+            updateUrl({ type: null, status: null, category: null, search: null, page: '1' });
           }}
         />
 
diff --git a/app/admin/pricing/pricing-manager-client.tsx b/app/admin/pricing/pricing-manager-client.tsx
index a31fcb3..081f04b 100644
--- a/app/admin/pricing/pricing-manager-client.tsx
+++ b/app/admin/pricing/pricing-manager-client.tsx
@@ -1,10 +1,24 @@
 "use client";
 
-import { useState, useTransition, useEffect } from "react";
-import { updatePricingPlan, updateInventoryCategory, syncAllProContent, addPricingFeature, getPricingFeatures, removePricingFeature, updatePricingFeature, getPricingSummary, updateContentAccess } from "@/lib/actions/admin";
+import {
+  addPricingFeature,
+  getPricingFeatures,
+  getPricingSummary,
+  removePricingFeature,
+  syncAllProContent,
+  updateContentAccess,
+  updateInventoryCategory,
+  updatePricingFeature,
+  updatePricingPlan,
+} from "@/lib/actions/admin";
+import { useEffect, useState, useTransition } from "react";
+import {
+  CATEGORY_OPTIONS,
+  EDITORIAL_TYPES,
+} from "../content/_components/dashboard/dashboard-types";
 import { InventorySummary } from "./_components/inventory-summary";
-import { PlanConfigCard } from "./_components/plan-config-card";
 import { InventoryTable } from "./_components/inventory-table";
+import { PlanConfigCard } from "./_components/plan-config-card";
 
 interface Plan {
   id: string;
@@ -21,6 +35,7 @@ interface InventoryItem {
   contentTitle: string;
   contentType: string;
   contentSlug: string;
+  metadata?: unknown;
 }
 
 interface Feature {
@@ -39,26 +54,29 @@ interface PricingManagerClientProps {
   initialInventory: InventoryItem[];
 }
 
-export function PricingManagerClient({ 
-  initialPlans, 
-  initialInventory 
+export function PricingManagerClient({
+  initialPlans,
+  initialInventory,
 }: PricingManagerClientProps) {
   const [activeTab, setActiveTab] = useState<"plans" | "inventory">("plans");
   const [plans, setPlans] = useState<Plan[]>(initialPlans);
   const [inventory, setInventory] = useState<InventoryItem[]>(initialInventory);
   const [isPending, startTransition] = useTransition();
-  
+
   const [freeFeatures, setFreeFeatures] = useState<Feature[]>([]);
   const [proFeatures, setProFeatures] = useState<Feature[]>([]);
   const [summary, setSummary] = useState<PricingSummary>({ pro: [], free: [] });
 
+  const [categoryFilter, setCategoryFilter] = useState("");
+  const [typeFilter, setTypeFilter] = useState("");
+
   // Load data on mount
   useEffect(() => {
     async function loadData() {
       const [free, pro, summ] = await Promise.all([
         getPricingFeatures("free"),
         getPricingFeatures("pro"),
-        getPricingSummary()
+        getPricingSummary(),
       ]);
       setFreeFeatures(free as Feature[]);
       setProFeatures(pro as Feature[]);
@@ -67,11 +85,28 @@ export function PricingManagerClient({
     loadData();
   }, []);
 
+  // Filtered inventory based on algorithm category and content type
+  const filteredInventory = inventory.filter((item) => {
+    // Type filter
+    if (typeFilter && item.contentType !== typeFilter) return false;
+
+    // Category filter
+    if (categoryFilter) {
+      const meta = item.metadata as { categories?: string[] } | undefined;
+      const categories = meta?.categories;
+      if (!Array.isArray(categories) || !categories.includes(categoryFilter)) {
+        return false;
+      }
+    }
+
+    return true;
+  });
+
   async function handleAddFeature(planId: string, label: string) {
     startTransition(async () => {
-      await addPricingFeature(planId, 'manual', label);
+      await addPricingFeature(planId, "manual", label);
       const updated = await getPricingFeatures(planId);
-      if (planId === 'free') setFreeFeatures(updated as Feature[]);
+      if (planId === "free") setFreeFeatures(updated as Feature[]);
       else setProFeatures(updated as Feature[]);
     });
   }
@@ -80,17 +115,25 @@ export function PricingManagerClient({
     startTransition(async () => {
       await removePricingFeature(id);
       const updated = await getPricingFeatures(planId);
-      if (planId === 'free') setFreeFeatures(updated as Feature[]);
+      if (planId === "free") setFreeFeatures(updated as Feature[]);
       else setProFeatures(updated as Feature[]);
     });
   }
 
-  async function handleUpdateFeature(id: string, label: string, planId: string) {
+  async function handleUpdateFeature(
+    id: string,
+    label: string,
+    planId: string,
+  ) {
     // Update local state first for instant feedback
-    if (planId === 'free') {
-      setFreeFeatures(freeFeatures.map(f => f.id === id ? { ...f, label } : f));
+    if (planId === "free") {
+      setFreeFeatures(
+        freeFeatures.map((f) => (f.id === id ? { ...f, label } : f)),
+      );
     } else {
-      setProFeatures(proFeatures.map(f => f.id === id ? { ...f, label } : f));
+      setProFeatures(
+        proFeatures.map((f) => (f.id === id ? { ...f, label } : f)),
+      );
     }
 
     startTransition(async () => {
@@ -98,10 +141,16 @@ export function PricingManagerClient({
     });
   }
 
-  async function handleUpdatePlan(id: string, field: keyof Plan, value: string) {
-    const updatedPlans = plans.map(p => p.id === id ? { ...p, [field]: value } : p);
+  async function handleUpdatePlan(
+    id: string,
+    field: keyof Plan,
+    value: string,
+  ) {
+    const updatedPlans = plans.map((p) =>
+      p.id === id ? { ...p, [field]: value } : p,
+    );
     setPlans(updatedPlans);
-    
+
     startTransition(async () => {
       await updatePricingPlan(id, { [field]: value });
     });
@@ -110,7 +159,11 @@ export function PricingManagerClient({
   async function handleUpdateCategory(id: string, category: string) {
     startTransition(async () => {
       await updateInventoryCategory(id, category);
-      setInventory(inventory.map(item => item.id === id ? { ...item, pricingCategory: category } : item));
+      setInventory(
+        inventory.map((item) =>
+          item.id === id ? { ...item, pricingCategory: category } : item,
+        ),
+      );
       // Refresh summary
       const summ = await getPricingSummary();
       setSummary(summ as PricingSummary);
@@ -119,9 +172,9 @@ export function PricingManagerClient({
 
   async function handleMakeFree(contentId: string) {
     startTransition(async () => {
-      await updateContentAccess(contentId, 'free');
+      await updateContentAccess(contentId, "free");
       // Update local state: remove from inventory
-      setInventory(inventory.filter(item => item.contentId !== contentId));
+      setInventory(inventory.filter((item) => item.contentId !== contentId));
       // Refresh summary
       const summ = await getPricingSummary();
       setSummary(summ as PricingSummary);
@@ -169,10 +222,10 @@ export function PricingManagerClient({
 
           <div className="grid gap-6 lg:grid-cols-2">
             {plans.map((plan) => (
-              <PlanConfigCard 
+              <PlanConfigCard
                 key={plan.id}
                 plan={plan}
-                features={plan.id === 'free' ? freeFeatures : proFeatures}
+                features={plan.id === "free" ? freeFeatures : proFeatures}
                 onUpdate={handleUpdatePlan}
                 onAddFeature={handleAddFeature}
                 onRemoveFeature={handleRemoveFeature}
@@ -182,13 +235,63 @@ export function PricingManagerClient({
           </div>
         </div>
       ) : (
-        <InventoryTable 
-          items={inventory}
-          isPending={isPending}
-          onUpdateCategory={handleUpdateCategory}
-          onSync={handleSync}
-          onMakeFree={handleMakeFree}
-        />
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <label
+                htmlFor="type-filter"
+                className="text-sm font-medium text-muted-foreground"
+              >
+                Tipo:
+              </label>
+              <select
+                id="type-filter"
+                value={typeFilter}
+                onChange={(e) => setTypeFilter(e.target.value)}
+                className="h-9 rounded-md border border-input bg-background px-3 text-sm outline-none focus:ring-2 focus:ring-primary/20"
+              >
+                {EDITORIAL_TYPES.map((opt) => (
+                  <option key={opt.value} value={opt.value}>
+                    {opt.label}
+                  </option>
+                ))}
+              </select>
+
+              <label
+                htmlFor="cat-filter"
+                className="text-sm font-medium text-muted-foreground ml-2"
+              >
+                Categoria:
+              </label>
+              <select
+                id="cat-filter"
+                value={categoryFilter}
+                onChange={(e) => setCategoryFilter(e.target.value)}
+                className="h-9 rounded-md border border-input bg-background px-3 text-sm outline-none focus:ring-2 focus:ring-primary/20"
+              >
+                {CATEGORY_OPTIONS.map((opt) => (
+                  <option key={opt.value} value={opt.value}>
+                    {opt.label}
+                  </option>
+                ))}
+              </select>
+              {(categoryFilter || typeFilter) && (
+                <span className="text-xs text-muted-foreground italic">
+                  Mostrando {filteredInventory.length} de {inventory.length}{" "}
+                  itens
+                </span>
+              )}
+            </div>
+          </div>
+
+          <InventoryTable
+            items={filteredInventory}
+            isPending={isPending}
+            onUpdateCategory={handleUpdateCategory}
+            onSync={handleSync}
+            onMakeFree={handleMakeFree}
+          />
+        </div>
       )}
     </div>
   );
diff --git a/app/problems/[slug]/[solution]/page.tsx b/app/problems/[slug]/[solution]/page.tsx
index 846b18d..e01006e 100644
--- a/app/problems/[slug]/[solution]/page.tsx
+++ b/app/problems/[slug]/[solution]/page.tsx
@@ -10,7 +10,7 @@ import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Separator } from '@/components/ui/separator';
-import { CodePlayer } from '@/components/code-player/code-player';
+import { DynamicPlayerWrapper } from '@/components/code-player/dynamic-player-wrapper';
 import { ComplexityBadge } from '@/components/complexity/complexity-badge';
 import { DifficultyBadge } from '@/components/catalog/difficulty-badge';
 import { JsonLdScript } from '@/components/seo/json-ld';
@@ -201,14 +201,15 @@ export default async function SolutionPage({
         />
       ) : null}
 
-      <CodePlayer
+      <DynamicPlayerWrapper
         lines={lines}
         annotations={playerAnnotations}
         conceptTitles={conceptTitles}
         readOnlyExplanationMd={readOnlyExplanationMd}
-        executionTrace={lineSynced ? solution.executionTrace : undefined}
+        executionTrace={lineSynced ? (solution.executionTrace ?? []) : []}
         problemSlug={problem.meta.slug}
         solutionSlug={solutionSlug}
+        simulatorCode={solution.meta.simulatorCode}
       />
 
       <Separator className="my-10" />
diff --git a/app/tests/[track]/_components/tests-filters.tsx b/app/tests/[track]/_components/tests-filters.tsx
index 09a508d..c1d57b1 100644
--- a/app/tests/[track]/_components/tests-filters.tsx
+++ b/app/tests/[track]/_components/tests-filters.tsx
@@ -26,20 +26,39 @@ export function TestsFilters({
   const currentLevel = searchParams.get("level");
   const currentTopic = searchParams.get("topic");
   const currentDifficulty = searchParams.get("difficulty");
-  const [searchTerm, setSearchTerm] = useState(searchParams.get("q") || "");
+  const currentQ = searchParams.get("q") || "";
+  const [searchTerm, setSearchTerm] = useState(currentQ);
+  const [prevQ, setPrevQ] = useState(currentQ);
+
+  // Sync state with URL when it changes externally (e.g. back button)
+  // We do this during render to avoid cascading effects and lint errors
+  if (currentQ !== prevQ) {
+    setPrevQ(currentQ);
+    setSearchTerm(currentQ);
+  }
 
   const updateFilters = useCallback(
     (updates: Record<string, string | undefined>) => {
       const params = new URLSearchParams(searchParams.toString());
+      let hasChanges = false;
 
       Object.entries(updates).forEach(([key, value]) => {
-        if (value === undefined || value === "all") {
-          params.delete(key);
-        } else {
-          params.set(key, value);
+        const currentValue = params.get(key);
+        const newValue = value === "all" ? undefined : value;
+
+        if (newValue === undefined) {
+          if (params.has(key)) {
+            params.delete(key);
+            hasChanges = true;
+          }
+        } else if (currentValue !== newValue) {
+          params.set(key, newValue);
+          hasChanges = true;
         }
       });
 
+      if (!hasChanges) return;
+
       startTransition(() => {
         router.push(`/tests/${track}?${params.toString()}`);
       });
@@ -48,16 +67,22 @@ export function TestsFilters({
   );
 
   useEffect(() => {
+    // Only trigger if searchTerm is different from what's in the URL
+    const urlSearchTerm = searchParams.get("q") || "";
+    if (searchTerm === urlSearchTerm) return;
+
     const delayDebounceFn = setTimeout(() => {
       updateFilters({ q: searchTerm || undefined });
     }, 400);
 
     return () => clearTimeout(delayDebounceFn);
-  }, [searchTerm, updateFilters]);
+  }, [searchTerm, updateFilters, searchParams]);
 
   const clearFilters = () => {
     setSearchTerm("");
-    router.push(`/tests/${track}`);
+    if (searchParams.toString() !== "") {
+      router.push(`/tests/${track}`);
+    }
   };
 
   const hasActiveFilters =
diff --git a/components/code-player/code-player.tsx b/components/code-player/code-player.tsx
index 9bda05e..1ddfbff 100644
--- a/components/code-player/code-player.tsx
+++ b/components/code-player/code-player.tsx
@@ -1,20 +1,24 @@
-'use client';
+"use client";
 
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo } from "react";
 
-import type { ExecutionTraceStep, LineAnnotation } from '@/lib/content/schemas';
-import type { HighlightedLine } from '@/lib/content/shiki';
+import type { ExecutionTraceStep, LineAnnotation } from "@/lib/content/schemas";
+import type { HighlightedLine } from "@/lib/content/shiki";
 
-import { renderMarkdown } from '@/lib/content/markdown';
-import { getSolutionResumeLine, touchSolutionLastLine } from '@/lib/progress/local-progress';
+import { renderMarkdown } from "@/lib/content/markdown";
+import {
+  getSolutionResumeLine,
+  touchSolutionLastLine,
+} from "@/lib/progress/local-progress";
 
-import { CodeView } from './code-view';
-import { ExecutionTracePanel } from './execution-trace-panel';
-import { ExplanationPanel } from './explanation-panel';
-import { KeyboardShortcuts } from './keyboard-shortcuts';
-import { PlayerAnalyticsSync } from './player-analytics-sync';
-import { PlayerControls } from './player-controls';
-import { usePlayerStore } from './use-player-store';
+import { CodeView } from "./code-view";
+import { ExecutionTracePanel } from "./execution-trace-panel";
+import { ExplanationPanel } from "./explanation-panel";
+import { KeyboardShortcuts } from "./keyboard-shortcuts";
+import { PlayerAnalyticsSync } from "./player-analytics-sync";
+import { PlayerControls } from "./player-controls";
+import { usePlayerStore } from "./use-player-store";
+import { BESPOKE_VISUALIZERS, hasBespokeVisualizer } from "./visualizers";
 
 interface Props {
   lines: HighlightedLine[];
@@ -25,6 +29,7 @@ interface Props {
   executionTrace?: ExecutionTraceStep[];
   problemSlug?: string;
   solutionSlug?: string;
+  autoPlay?: boolean;
 }
 
 /**
@@ -45,11 +50,15 @@ export function CodePlayer({
   executionTrace,
   problemSlug,
   solutionSlug,
+  autoPlay,
 }: Props) {
   const initialize = usePlayerStore((s) => s.initialize);
 
   const tutorialMode = annotations.length > 0 && !readOnlyExplanationMd;
-  const annotatedLineSet = useMemo(() => new Set(annotations.map((a) => a.line)), [annotations]);
+  const annotatedLineSet = useMemo(
+    () => new Set(annotations.map((a) => a.line)),
+    [annotations],
+  );
   const annotatedLines = useMemo(
     () => annotations.map((a) => a.line).sort((a, b) => a - b),
     [annotations],
@@ -58,12 +67,22 @@ export function CodePlayer({
   useEffect(() => {
     if (tutorialMode) {
       const resume =
-        problemSlug && solutionSlug ? getSolutionResumeLine(problemSlug, solutionSlug, annotatedLines) : undefined;
-      initialize(annotatedLines, resume);
+        problemSlug && solutionSlug
+          ? getSolutionResumeLine(problemSlug, solutionSlug, annotatedLines)
+          : undefined;
+      initialize(annotatedLines, resume, executionTrace, autoPlay);
     } else {
-      initialize([], 1);
+      initialize([], 1, executionTrace, autoPlay);
     }
-  }, [annotatedLines, initialize, tutorialMode, problemSlug, solutionSlug]);
+  }, [
+    annotatedLines,
+    initialize,
+    tutorialMode,
+    problemSlug,
+    solutionSlug,
+    executionTrace,
+    autoPlay,
+  ]);
 
   useEffect(() => {
     if (!tutorialMode || !problemSlug || !solutionSlug) return;
@@ -74,7 +93,10 @@ export function CodePlayer({
       if (line === lastLine) return;
       lastLine = line;
       if (timer) clearTimeout(timer);
-      timer = setTimeout(() => touchSolutionLastLine(problemSlug, solutionSlug, line), 400);
+      timer = setTimeout(
+        () => touchSolutionLastLine(problemSlug, solutionSlug, line),
+        400,
+      );
     });
     return () => {
       if (timer) clearTimeout(timer);
@@ -97,10 +119,13 @@ export function CodePlayer({
           />
           {tutorialMode ? <PlayerControls /> : null}
           {tutorialMode ? (
-            <p className="text-[11px] text-zinc-500 px-1">
-              Atalhos: <kbd className="kbd">←</kbd>/<kbd className="kbd">→</kbd> mudar de linha,{' '}
-              <kbd className="kbd">espaço</kbd> play/pause, <kbd className="kbd">1</kbd>/<kbd className="kbd">2</kbd>/
-              <kbd className="kbd">3</kbd> mudar nível.
+            <p className="text-[10px] font-black uppercase tracking-widest text-zinc-400 px-1">
+              Atalhos: <kbd className="kbd rounded-none">←</kbd>/
+              <kbd className="kbd rounded-none">→</kbd> Navegar,{" "}
+              <kbd className="kbd rounded-none">Espaço</kbd> Play/Pause,{" "}
+              <kbd className="kbd rounded-none">1</kbd>/
+              <kbd className="kbd rounded-none">2</kbd>/
+              <kbd className="kbd rounded-none">3</kbd> Nível.
             </p>
           ) : null}
         </div>
@@ -113,14 +138,28 @@ export function CodePlayer({
               className="prose prose-zinc dark:prose-invert prose-sm max-w-none
                          prose-code:text-blue-600 dark:prose-code:text-blue-400
                          prose-code:before:content-none prose-code:after:content-none"
-              dangerouslySetInnerHTML={{ __html: renderMarkdown(readOnlyExplanationMd) }}
+              dangerouslySetInnerHTML={{
+                __html: renderMarkdown(readOnlyExplanationMd),
+              }}
             />
           </aside>
         ) : (
-          <ExplanationPanel annotations={annotations} conceptTitles={conceptTitles} />
+          <ExplanationPanel
+            annotations={annotations}
+            conceptTitles={conceptTitles}
+          />
         )}
       </div>
-      {showTrace ? <ExecutionTracePanel steps={executionTrace} /> : null}
+      {showTrace ? (
+        problemSlug && hasBespokeVisualizer(problemSlug) ? (
+          (() => {
+            const Visualizer = BESPOKE_VISUALIZERS[problemSlug];
+            return <Visualizer steps={executionTrace} solutionSlug={solutionSlug} />;
+          })()
+        ) : (
+          <ExecutionTracePanel steps={executionTrace} />
+        )
+      ) : null}
     </div>
   );
 }
diff --git a/components/code-player/code-view.tsx b/components/code-player/code-view.tsx
index 33bd1e2..ad0210b 100644
--- a/components/code-player/code-view.tsx
+++ b/components/code-player/code-view.tsx
@@ -31,19 +31,13 @@ export function CodeView({ lines, annotatedLineSet, interactiveSteps = true }: P
   const containerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    if (!interactiveSteps) return;
-    const container = containerRef.current;
-    if (!container) return;
-    const target = container.querySelector<HTMLElement>(`[data-line="${currentLine}"]`);
-    if (target) {
-      target.scrollIntoView({ behavior: 'smooth', block: 'center' });
-    }
+    // Scroll automático desativado a pedido do utilizador para evitar saltos de tela.
   }, [currentLine, interactiveSteps]);
 
   return (
     <div
       ref={containerRef}
-      className="relative font-mono text-[13px] leading-6 overflow-auto max-h-[70vh] rounded-xl border border-zinc-200 dark:border-zinc-800 bg-[var(--shiki-light-bg,#fff)] dark:bg-[var(--shiki-dark-bg,#0a0a0a)]"
+      className="relative font-mono text-[13px] leading-6 overflow-auto max-h-[70vh] border border-zinc-200 dark:border-zinc-800 bg-[var(--shiki-light-bg,#fff)] dark:bg-[var(--shiki-dark-bg,#0a0a0a)]"
       role="region"
       aria-label="Código com explicação por linha"
     >
diff --git a/components/code-player/dynamic-input-form.tsx b/components/code-player/dynamic-input-form.tsx
new file mode 100644
index 0000000..2864575
--- /dev/null
+++ b/components/code-player/dynamic-input-form.tsx
@@ -0,0 +1,160 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Play, RotateCcw } from "lucide-react";
+import { useState } from "react";
+
+interface Props {
+  onRun: (...args: unknown[]) => void;
+  onReset: () => void;
+  problemSlug: string;
+}
+
+export function DynamicInputForm({
+  onRun,
+  onReset,
+  problemSlug,
+}: Props) {
+  // Configurações por slug
+  const configs: Record<string, {
+    labels: string[];
+    placeholders: string[];
+    defaults: string[];
+    types: ("text" | "number")[];
+    parser: (vals: string[]) => unknown[];
+  }> = {
+    "two-sum": {
+      labels: ["Dados de Entrada (Números)", "Alvo (Target)"],
+      placeholders: ["Ex: 2, 7, 11, 15", "9"],
+      defaults: ["2, 7, 11, 15", "9"],
+      types: ["text", "number"],
+      parser: (vals) => [
+        vals[0].split(",").map(s => s.trim()).filter(Boolean).map(Number),
+        Number(vals[1])
+      ]
+    },
+    "minimum-window-substring": {
+      labels: ["String S (Texto Principal)", "String T (Caracteres Necessários)"],
+      placeholders: ["Ex: ADOBECODEBANC", "ABC"],
+      defaults: ["ADOBECODEBANC", "ABC"],
+      types: ["text", "text"],
+      parser: (vals) => [vals[0].trim(), vals[1].trim()]
+    },
+    "longest-substring-without-repeating": {
+      labels: ["String de Entrada (S)"],
+      placeholders: ["Ex: abcabcbb"],
+      defaults: ["abcabcbb"],
+      types: ["text"],
+      parser: (vals) => [vals[0].trim()]
+    },
+    "subarray-sum-equals-k": {
+      labels: ["Números (nums)", "Alvo (k)"],
+      placeholders: ["Ex: 1, 1, 1", "2"],
+      defaults: ["1, 1, 1", "2"],
+      types: ["text", "number"],
+      parser: (vals) => [
+        vals[0].split(",").map(s => s.trim()).filter(Boolean).map(Number),
+        Number(vals[1])
+      ]
+    },
+    "trapping-rain-water": {
+      labels: ["Alturas (height)"],
+      placeholders: ["Ex: 0, 1, 0, 2, 1, 0, 1, 3, 2, 1, 2, 1"],
+      defaults: ["0, 1, 0, 2, 1, 0, 1, 3, 2, 1, 2, 1"],
+      types: ["text"],
+      parser: (vals) => [
+        vals[0].split(",").map(s => s.trim()).filter(Boolean).map(Number)
+      ]
+    },
+    "group-anagrams": {
+      labels: ["Lista de Palavras (strs)"],
+      placeholders: ["Ex: eat, tea, tan, ate, nat, bat"],
+      defaults: ["eat, tea, tan, ate, nat, bat"],
+      types: ["text"],
+      parser: (vals) => [
+        vals[0].split(",").map(s => s.trim()).filter(Boolean)
+      ]
+    },
+    "daily-temperatures": {
+      labels: ["Temperaturas (Celsius)"],
+      placeholders: ["Ex: 73, 74, 75, 71, 69, 72, 76, 73"],
+      defaults: ["73, 74, 75, 71, 69, 72, 76, 73"],
+      types: ["text"],
+      parser: (vals) => [
+        vals[0].split(",").map(s => s.trim()).filter(Boolean).map(Number)
+      ]
+    },
+    "3sum": {
+      labels: ["Números (nums)"],
+      placeholders: ["Ex: -1, 0, 1, 2, -1, -4"],
+      defaults: ["-1, 0, 1, 2, -1, -4"],
+      types: ["text"],
+      parser: (vals) => [
+        vals[0].split(",").map(s => s.trim()).filter(Boolean).map(Number)
+      ]
+    }
+  };
+
+  const config = configs[problemSlug] || configs["two-sum"];
+  const [inputs, setInputs] = useState<string[]>(config.defaults);
+
+  const handleRun = () => {
+    const parsed = config.parser(inputs);
+    onRun(...parsed);
+  };
+
+  const updateInput = (idx: number, val: string) => {
+    const next = [...inputs];
+    next[idx] = val;
+    setInputs(next);
+  };
+
+  return (
+    <Card className="border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950 shadow-none rounded-none mb-4 overflow-hidden">
+      <CardContent className="p-4">
+        <div className="flex flex-col md:flex-row gap-4 items-end">
+          {config.labels.map((label, i) => (
+            <div key={i} className={`space-y-1.5 ${i === 0 ? 'flex-1' : 'w-full md:w-48'}`}>
+              <label className="text-[10px] font-black uppercase tracking-[0.2em] text-zinc-400">
+                {label}
+              </label>
+              <Input
+                value={inputs[i]}
+                onChange={(e) => updateInput(i, e.target.value)}
+                placeholder={config.placeholders[i]}
+                type={config.types[i]}
+                className="bg-zinc-50 dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 rounded-none h-12 text-base font-mono focus-visible:ring-zinc-900"
+              />
+            </div>
+          ))}
+          
+          <div className="flex gap-2 w-full md:w-auto">
+            <Button
+              onClick={handleRun}
+              className="flex-1 md:flex-none bg-zinc-900 hover:bg-zinc-800 dark:bg-zinc-100 dark:hover:bg-zinc-200 text-white dark:text-zinc-900 rounded-none px-8 h-12 font-black text-xs uppercase tracking-[0.2em] gap-3 transition-all active:translate-y-[1px]"
+            >
+              <Play className="h-4 w-4 fill-current" />
+              Executar
+            </Button>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setInputs(config.defaults);
+                onReset();
+              }}
+              className="rounded-none h-12 px-4 border-zinc-200 dark:border-zinc-800 hover:bg-zinc-50 dark:hover:bg-zinc-900"
+              title="Resetar para o padrão"
+            >
+              <RotateCcw className="h-4 w-4 text-zinc-500" />
+            </Button>
+          </div>
+        </div>
+        <p className="mt-2 text-[9px] text-zinc-400 font-bold uppercase tracking-tighter">
+          INFO: Configura o cenário de teste acima e dispara o motor de execução.
+        </p>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/components/code-player/dynamic-player-wrapper.tsx b/components/code-player/dynamic-player-wrapper.tsx
new file mode 100644
index 0000000..59010df
--- /dev/null
+++ b/components/code-player/dynamic-player-wrapper.tsx
@@ -0,0 +1,90 @@
+"use client";
+
+import { ExecutionTraceStep, LineAnnotation } from "@/lib/content/schemas";
+import { HighlightedLine } from "@/lib/content/shiki";
+import { getSimulator } from "@/lib/simulators";
+import { useCallback, useState } from "react";
+import { CodePlayer } from "./code-player";
+import { DynamicInputForm } from "./dynamic-input-form";
+import { hasBespokeVisualizer } from "./visualizers";
+
+interface Props {
+  lines: HighlightedLine[];
+  annotations: LineAnnotation[];
+  conceptTitles: Record<string, string>;
+  readOnlyExplanationMd?: string;
+  executionTrace: ExecutionTraceStep[];
+  problemSlug: string;
+  solutionSlug: string;
+  autoPlay?: boolean;
+  simulatorCode?: string;
+}
+
+export function DynamicPlayerWrapper(props: Props) {
+  const [dynamicTrace, setDynamicTrace] = useState<
+    ExecutionTraceStep[] | undefined
+  >(undefined);
+  const [shouldAutoPlay, setShouldAutoPlay] = useState(false);
+
+  const isBespoke = hasBespokeVisualizer(props.problemSlug);
+
+  const handleRun = useCallback(
+    (...args: unknown[]) => {
+      // 1. Prioridade para o código vindo do banco (Admin)
+      if (props.simulatorCode) {
+        try {
+          // Criamos uma função que aceita argumentos variáveis
+          const dynamicSim = new Function(
+            "...args",
+            `const simulate = ${props.simulatorCode};
+             return typeof simulate === 'function' ? simulate(...args) : null;`
+          );
+
+          const trace = dynamicSim(...args);
+          
+          if (trace && Array.isArray(trace) && trace.length > 0) {
+            setDynamicTrace(trace);
+            setShouldAutoPlay(true);
+            return;
+          }
+        } catch (err) {
+          console.error("Erro ao executar simulador dinâmico:", err);
+        }
+      }
+
+      // 2. Fallback para simuladores locais (legado)
+      const simulator = getSimulator(props.problemSlug, props.solutionSlug);
+      if (simulator) {
+        const trace = simulator(...args);
+        if (trace.length > 0) {
+          setDynamicTrace(trace);
+          setShouldAutoPlay(true);
+        }
+      }
+    },
+    [props.problemSlug, props.solutionSlug, props.simulatorCode],
+  );
+
+  const handleReset = useCallback(() => {
+    setDynamicTrace(undefined);
+    setShouldAutoPlay(false);
+  }, []);
+
+  return (
+    <div className="flex flex-col">
+      {isBespoke && (
+        <DynamicInputForm
+          onRun={handleRun}
+          onReset={handleReset}
+          problemSlug={props.problemSlug}
+        />
+      )}
+
+      <CodePlayer
+        {...props}
+        executionTrace={dynamicTrace || props.executionTrace}
+        autoPlay={shouldAutoPlay}
+      />
+    </div>
+  );
+}
diff --git a/components/code-player/execution-trace-panel.tsx b/components/code-player/execution-trace-panel.tsx
index 61a5892..8391296 100644
--- a/components/code-player/execution-trace-panel.tsx
+++ b/components/code-player/execution-trace-panel.tsx
@@ -13,11 +13,14 @@ interface Props {
 
 export function ExecutionTracePanel({ steps }: Props) {
   const currentLine = usePlayerStore((s) => s.currentLine);
+  const currentStepIndex = usePlayerStore((s) => s.currentStepIndex);
 
-  const snapshot = useMemo(
-    () => resolveExecutionSnapshot(currentLine, steps),
-    [currentLine, steps],
-  );
+  const snapshot = useMemo(() => {
+    if (currentStepIndex !== -1 && steps[currentStepIndex]) {
+      return steps[currentStepIndex].snapshot;
+    }
+    return resolveExecutionSnapshot(currentLine, steps);
+  }, [currentLine, currentStepIndex, steps]);
 
   if (!snapshot) {
     return (
@@ -25,7 +28,7 @@ export function ExecutionTracePanel({ steps }: Props) {
         className="rounded-xl border border-dashed border-zinc-300 bg-zinc-50/80 p-4 text-sm text-zinc-500 dark:border-zinc-700 dark:bg-zinc-950/40 dark:text-zinc-400"
         aria-label="Estado da execução (demonstração)"
       >
-        Sem modelo visual para esta linha — avança no player para ver arrays e mapas quando definidos no{' '}
+        Sem modelo visual para esta linha — avance no player para ver arrays e mapas quando definidos no{' '}
         <code className="text-xs">trace.json</code>.
       </section>
     );
diff --git a/components/code-player/explanation-panel.tsx b/components/code-player/explanation-panel.tsx
index efc83e9..847bf06 100644
--- a/components/code-player/explanation-panel.tsx
+++ b/components/code-player/explanation-panel.tsx
@@ -37,8 +37,8 @@ export function ExplanationPanel({ annotations, conceptTitles }: Props) {
 
   if (!annotation) {
     return (
-      <aside className="rounded-xl border border-dashed border-zinc-300 dark:border-zinc-700 p-6 text-sm text-zinc-500">
-        Esta linha não tem explicação curada.
+      <aside className="border border-dashed border-zinc-200 dark:border-zinc-800 p-6 text-xs uppercase tracking-widest text-zinc-400">
+        Nenhuma explicação disponível para esta linha.
       </aside>
     );
   }
@@ -49,29 +49,29 @@ export function ExplanationPanel({ annotations, conceptTitles }: Props) {
   return (
     <aside
       aria-live="polite"
-      className="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 shadow-sm"
+      className="border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950"
     >
       <header className="flex items-center justify-between gap-3 border-b border-zinc-100 dark:border-zinc-900 px-5 py-3">
         <div className="flex items-center gap-2">
-          <Badge variant="secondary" className="font-mono">
-            linha {annotation.line}
+          <Badge variant="secondary" className="font-mono rounded-none">
+            line {annotation.line}
           </Badge>
-          <span className="text-xs text-zinc-500">{LEVEL_DESCRIPTION[level]}</span>
+          <span className="text-[10px] font-bold text-zinc-400 uppercase tracking-tighter">{LEVEL_DESCRIPTION[level]}</span>
         </div>
         <LevelTabs level={level} setLevel={setLevel} availability={availability()} />
       </header>
 
       <div
         className="prose prose-zinc dark:prose-invert prose-sm max-w-none px-5 py-4
-                   prose-pre:bg-zinc-900 prose-pre:text-zinc-100 prose-code:text-blue-600 dark:prose-code:text-blue-400
+                   prose-pre:rounded-none prose-pre:bg-zinc-900 prose-pre:text-zinc-100 prose-code:text-blue-600 dark:prose-code:text-blue-400
                    prose-code:before:content-none prose-code:after:content-none"
         dangerouslySetInnerHTML={{ __html: html }}
       />
 
       {annotation.warnings && annotation.warnings.length > 0 ? (
-        <div className="mx-5 mb-4 rounded-lg border border-amber-300/40 bg-amber-50 dark:bg-amber-500/5 p-3">
-          <div className="flex items-center gap-2 text-amber-700 dark:text-amber-400 text-xs font-semibold mb-2">
-            <AlertTriangle className="h-3.5 w-3.5" /> Pegadinhas comuns
+        <div className="mx-5 mb-4 border border-amber-500/20 bg-amber-500/5 p-3">
+          <div className="flex items-center gap-2 text-amber-700 dark:text-amber-400 text-[10px] font-black uppercase tracking-widest mb-2">
+            <AlertTriangle className="h-3 w-3" /> ATENÇÃO
           </div>
           <ul className="space-y-1 text-sm text-amber-900 dark:text-amber-100">
             {annotation.warnings.map((w, i) => (
@@ -86,12 +86,12 @@ export function ExplanationPanel({ annotations, conceptTitles }: Props) {
       {annotation.concepts && annotation.concepts.length > 0 ? (
         <div className="border-t border-zinc-100 dark:border-zinc-900 px-5 py-3 flex items-center gap-2 flex-wrap">
           <BookOpen className="h-4 w-4 text-zinc-400" />
-          <span className="text-xs text-zinc-500">Conceitos:</span>
+          <span className="text-[10px] font-black uppercase tracking-widest text-zinc-400">Conceitos:</span>
           {annotation.concepts.map((slug) => (
             <Link
               key={slug}
               href={`/concepts/${slug}`}
-              className="text-xs px-2 py-0.5 rounded-full bg-blue-500/10 text-blue-600 dark:text-blue-400 hover:bg-blue-500/20 transition-colors"
+              className="text-[10px] font-black uppercase px-2 py-0.5 bg-zinc-100 text-zinc-600 dark:bg-zinc-900 dark:text-zinc-400 hover:bg-zinc-900 hover:text-white dark:hover:bg-zinc-100 dark:hover:text-zinc-900 transition-colors"
             >
               {conceptTitles[slug] ?? slug}
             </Link>
@@ -126,7 +126,7 @@ function LevelTabs({
   availability: Record<ExplanationLevel, boolean>;
 }) {
   return (
-    <div role="tablist" aria-label="Nível de explicação" className="inline-flex rounded-lg bg-zinc-100 dark:bg-zinc-900 p-0.5">
+    <div role="tablist" aria-label="Nível de explicação" className="inline-flex bg-zinc-100 dark:bg-zinc-900 p-0.5">
       {([1, 2, 3] as const).map((l) => {
         const active = level === l;
         const enabled = availability[l];
@@ -138,12 +138,12 @@ function LevelTabs({
             disabled={!enabled}
             onClick={() => enabled && setLevel(l)}
             className={cn(
-              'px-2.5 py-1 text-xs rounded-md transition-colors',
+              'px-2.5 py-1 text-[10px] font-black uppercase transition-colors',
               active
-                ? 'bg-white dark:bg-zinc-950 text-zinc-900 dark:text-zinc-100 shadow-sm font-medium'
+                ? 'bg-zinc-900 text-white dark:bg-zinc-100 dark:text-zinc-900'
                 : enabled
-                ? 'text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100'
-                : 'text-zinc-400 dark:text-zinc-600 cursor-not-allowed',
+                ? 'text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100'
+                : 'text-zinc-300 dark:text-zinc-700 cursor-not-allowed',
             )}
             title={`${LEVEL_LABEL[l]} (atalho ${l})`}
           >
diff --git a/components/code-player/player-controls.tsx b/components/code-player/player-controls.tsx
index 4433d58..b072255 100644
--- a/components/code-player/player-controls.tsx
+++ b/components/code-player/player-controls.tsx
@@ -16,10 +16,21 @@ const SPEED_OPTIONS = [
 ];
 
 export function PlayerControls() {
-  const { currentLine, annotatedLines, isPlaying, speedMs, prev, next, togglePlaying, setSpeed } = usePlayerStore();
+  const currentLine = usePlayerStore((s) => s.currentLine);
+  const annotatedLines = usePlayerStore((s) => s.annotatedLines);
+  const isPlaying = usePlayerStore((s) => s.isPlaying);
+  const speedMs = usePlayerStore((s) => s.speedMs);
+  const prev = usePlayerStore((s) => s.prev);
+  const next = usePlayerStore((s) => s.next);
+  const togglePlaying = usePlayerStore((s) => s.togglePlaying);
+  const setSpeed = usePlayerStore((s) => s.setSpeed);
+  const traceSteps = usePlayerStore((s) => s.traceSteps);
+  const currentStepIndex = usePlayerStore((s) => s.currentStepIndex);
 
-  const idx = annotatedLines.indexOf(currentLine);
-  const total = annotatedLines.length;
+  const isTraceMode = traceSteps.length > 0 && currentStepIndex !== -1;
+  const idx = isTraceMode ? currentStepIndex : annotatedLines.indexOf(currentLine);
+  const total = isTraceMode ? traceSteps.length : annotatedLines.length;
+  
   const progressPct = total > 0 ? ((idx + 1) / total) * 100 : 0;
 
   // Autoplay loop. We re-evaluate `speedMs` and `isPlaying` whenever they
@@ -29,13 +40,14 @@ export function PlayerControls() {
     if (!isPlaying) return;
     const t = setTimeout(() => next(), speedMs);
     return () => clearTimeout(t);
-  }, [isPlaying, speedMs, currentLine, next]);
+  }, [isPlaying, speedMs, currentLine, currentStepIndex, next]);
 
   return (
-    <div className="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-3 flex items-center gap-3">
+    <div className="border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-3 flex items-center gap-3">
       <Button
         variant="ghost"
         size="icon"
+        className="rounded-none"
         onClick={prev}
         disabled={idx <= 0}
         aria-label="Linha anterior (←)"
@@ -46,6 +58,7 @@ export function PlayerControls() {
       <Button
         variant="default"
         size="icon"
+        className="rounded-none"
         onClick={togglePlaying}
         disabled={idx >= total - 1 && !isPlaying}
         aria-label={isPlaying ? 'Pausar (espaço)' : 'Reproduzir (espaço)'}
@@ -56,6 +69,7 @@ export function PlayerControls() {
       <Button
         variant="ghost"
         size="icon"
+        className="rounded-none"
         onClick={next}
         disabled={idx >= total - 1}
         aria-label="Próxima linha (→)"
@@ -65,26 +79,26 @@ export function PlayerControls() {
       </Button>
 
       <div className="flex-1 min-w-[6rem]">
-        <div className="h-1.5 bg-zinc-100 dark:bg-zinc-800 rounded-full overflow-hidden">
+        <div className="h-1 bg-zinc-100 dark:bg-zinc-800 overflow-hidden">
           <div
-            className="h-full bg-blue-500 transition-[width]"
+            className="h-full bg-zinc-900 dark:bg-zinc-100 transition-[width]"
             style={{ width: `${progressPct}%` }}
             aria-hidden
           />
         </div>
-        <div className="text-xs text-zinc-500 mt-1 tabular-nums">
-          {idx + 1} / {total}
+        <div className="text-xs font-black text-zinc-500 mt-1 tabular-nums uppercase tracking-tighter">
+          Step {String(idx + 1).padStart(3, '0')} / {String(total).padStart(3, '0')}
         </div>
       </div>
 
       <div className="hidden sm:flex items-center gap-1">
-        <FastForward className="h-3.5 w-3.5 text-zinc-400" aria-hidden />
+        <FastForward className="h-4 w-4 text-zinc-400" aria-hidden />
         {SPEED_OPTIONS.map((opt) => (
           <button
             key={opt.ms}
             onClick={() => setSpeed(opt.ms)}
             className={cn(
-              'text-xs px-1.5 py-0.5 rounded transition-colors',
+              'text-[11px] font-black px-2 py-1 transition-colors uppercase tracking-widest',
               speedMs === opt.ms
                 ? 'bg-zinc-900 text-zinc-50 dark:bg-zinc-100 dark:text-zinc-900'
                 : 'text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-100',
diff --git a/components/code-player/use-player-store.ts b/components/code-player/use-player-store.ts
index 4796c5c..6c635b7 100644
--- a/components/code-player/use-player-store.ts
+++ b/components/code-player/use-player-store.ts
@@ -1,6 +1,7 @@
 'use client';
 
 import { create } from 'zustand';
+import type { ExecutionTraceStep } from '@/lib/content/schemas';
 
 export type ExplanationLevel = 1 | 2 | 3;
 
@@ -16,8 +17,14 @@ interface PlayerState {
   /** Milliseconds between autoplay steps. */
   speedMs: number;
 
-  initialize: (annotatedLines: number[], initial?: number) => void;
+  /** Dynamic execution steps (if available). */
+  traceSteps: ExecutionTraceStep[];
+  /** Current index in traceSteps. */
+  currentStepIndex: number;
+
+  initialize: (annotatedLines: number[], initial?: number, traceSteps?: ExecutionTraceStep[], autoPlay?: boolean) => void;
   setCurrentLine: (line: number) => void;
+  setCurrentStepIndex: (index: number) => void;
   next: () => void;
   prev: () => void;
   setLevel: (level: ExplanationLevel) => void;
@@ -32,22 +39,53 @@ export const usePlayerStore = create<PlayerState>((set, get) => ({
   level: 1,
   isPlaying: false,
   speedMs: 2500,
+  traceSteps: [],
+  currentStepIndex: -1,
 
-  initialize: (annotatedLines, initial) =>
+  initialize: (annotatedLines, initial, traceSteps = [], autoPlay = false) =>
     set({
       annotatedLines,
-      currentLine: initial ?? annotatedLines[0] ?? 1,
-      isPlaying: false,
+      traceSteps,
+      currentStepIndex: traceSteps.length > 0 ? 0 : -1,
+      currentLine: traceSteps.length > 0 
+        ? traceSteps[0].line 
+        : (initial ?? annotatedLines[0] ?? 1),
+      isPlaying: autoPlay,
     }),
 
   setCurrentLine: (line) => set({ currentLine: line }),
 
+  setCurrentStepIndex: (index) => {
+    const { traceSteps } = get();
+    if (index >= 0 && index < traceSteps.length) {
+      set({ 
+        currentStepIndex: index,
+        currentLine: traceSteps[index].line 
+      });
+    }
+  },
+
   next: () => {
-    const { annotatedLines, currentLine } = get();
+    const { annotatedLines, currentLine, traceSteps, currentStepIndex } = get();
+
+    // Se temos um trace ativo, navegamos pelos passos do trace
+    if (traceSteps.length > 0 && currentStepIndex !== -1) {
+      if (currentStepIndex === traceSteps.length - 1) {
+        set({ isPlaying: false });
+        return;
+      }
+      const nextIdx = currentStepIndex + 1;
+      set({ 
+        currentStepIndex: nextIdx,
+        currentLine: traceSteps[nextIdx].line
+      });
+      return;
+    }
+
+    // Caso contrário, navegamos pelas linhas anotadas estáticas
     const idx = annotatedLines.indexOf(currentLine);
     if (idx === -1) return;
     if (idx === annotatedLines.length - 1) {
-      // Reached the end — stop autoplay.
       set({ isPlaying: false });
       return;
     }
@@ -55,7 +93,18 @@ export const usePlayerStore = create<PlayerState>((set, get) => ({
   },
 
   prev: () => {
-    const { annotatedLines, currentLine } = get();
+    const { annotatedLines, currentLine, traceSteps, currentStepIndex } = get();
+
+    if (traceSteps.length > 0 && currentStepIndex !== -1) {
+      if (currentStepIndex <= 0) return;
+      const prevIdx = currentStepIndex - 1;
+      set({ 
+        currentStepIndex: prevIdx,
+        currentLine: traceSteps[prevIdx].line
+      });
+      return;
+    }
+
     const idx = annotatedLines.indexOf(currentLine);
     if (idx <= 0) return;
     set({ currentLine: annotatedLines[idx - 1] });
diff --git a/components/code-player/visualizers/generic-visualizer.tsx b/components/code-player/visualizers/generic-visualizer.tsx
new file mode 100644
index 0000000..12302da
--- /dev/null
+++ b/components/code-player/visualizers/generic-visualizer.tsx
@@ -0,0 +1,164 @@
+"use client";
+
+import { resolveExecutionSnapshot } from "@/lib/content/resolve-execution-snapshot";
+import type { ExecutionTraceStep } from "@/lib/content/schemas";
+import { AnimatePresence, motion } from "framer-motion";
+import { useMemo } from "react";
+import { usePlayerStore } from "../use-player-store";
+
+interface Props {
+  steps: ExecutionTraceStep[];
+  solutionSlug?: string;
+}
+
+export function GenericVisualizer({ steps, solutionSlug }: Props) {
+  const currentLine = usePlayerStore((s) => s.currentLine);
+  const currentStepIndex = usePlayerStore((s) => s.currentStepIndex);
+
+  const snapshot = useMemo(() => {
+    if (currentStepIndex !== -1 && steps[currentStepIndex]) {
+      return steps[currentStepIndex].snapshot;
+    }
+    return resolveExecutionSnapshot(currentLine, steps);
+  }, [currentLine, currentStepIndex, steps]);
+
+  if (!snapshot) {
+    return (
+      <section className="border border-dashed border-zinc-200 bg-zinc-50 p-6 text-[10px] font-black uppercase tracking-widest text-zinc-400">
+        Motor Offline / Aguardando dados de execução...
+      </section>
+    );
+  }
+
+  const arrays = snapshot.arrays || [];
+  const scalars = Object.entries(snapshot.scalars || {});
+  const mapEntries = snapshot.mapEntries || [];
+
+  return (
+    <section className="flex flex-col gap-10 border-x border-b border-zinc-200 bg-white p-10 select-none dark:border-zinc-800 dark:bg-zinc-950 shadow-sm">
+      {/* Header with Step Counter */}
+      <div className="flex items-center justify-between border-b-2 border-zinc-900 pb-8 dark:border-zinc-100">
+        <div className="flex flex-col gap-2">
+          <div className="flex items-center gap-2">
+            <div className="h-1.5 w-1.5 rounded-full bg-primary" />
+            <h3 className="text-[10px] font-black uppercase tracking-[0.4em] text-zinc-400">
+              Execution Monitor
+            </h3>
+          </div>
+          <div className="flex items-center gap-4">
+            <div className="bg-zinc-900 px-4 py-1.5 dark:bg-white">
+              <span className="font-mono text-base font-black text-white dark:text-zinc-900">
+                {String(currentStepIndex + 1).padStart(2, "0")}
+              </span>
+            </div>
+            <span className="text-[10px] font-bold text-zinc-400 uppercase tracking-widest">
+              Passo de {steps.length}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {/* Arrays Section */}
+      {arrays.map((arr, arrIdx) => (
+        <div key={arrIdx} className="flex flex-col gap-5">
+          <div className="flex items-center gap-4">
+            <span className="bg-zinc-900 px-3 py-1 text-[10px] font-black uppercase tracking-widest text-white dark:bg-zinc-100 dark:text-zinc-900">
+              {arr.label}
+            </span>
+            <div className="h-[1px] flex-1 bg-zinc-100 dark:bg-zinc-800" />
+            <span className="font-mono text-[9px] font-bold text-zinc-300 uppercase">
+              {arr.values.length} elementos
+            </span>
+          </div>
+          <div className="flex flex-wrap gap-2.5">
+            {arr.values.map((val, idx) => {
+              const isHighlighted = (arr.highlightIndices || []).includes(idx);
+              const isInRange = arr.range
+                ? idx >= arr.range[0] && idx <= arr.range[1]
+                : false;
+
+              return (
+                <div key={idx} className="relative flex flex-col items-center">
+                  <motion.div
+                    layout
+                    className={`flex h-14 min-w-[56px] px-4 items-center justify-center border-2 font-mono ${String(val).length > 4 ? "text-xs" : "text-lg"} font-black transition-all duration-300 ${
+                      isHighlighted
+                        ? "border-blue-600 bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400 scale-105 z-10 shadow-lg"
+                        : isInRange
+                          ? "border-zinc-400 bg-zinc-50 text-zinc-900 dark:border-zinc-500 dark:bg-zinc-900 dark:text-zinc-100"
+                          : "border-zinc-100 bg-white text-zinc-200 dark:border-zinc-800 dark:bg-zinc-950"
+                    }`}
+                  >
+                    {val}
+                  </motion.div>
+                  <div className="mt-1.5 font-mono text-[8px] font-bold text-zinc-300">
+                    #{idx}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      ))}
+
+      {/* Scalars & Map Section */}
+      {(scalars.length > 0 || mapEntries.length > 0) && (
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 border-t border-zinc-100 pt-8 dark:border-zinc-900">
+          {scalars.map(([key, value]) => (
+            <div
+              key={key}
+              className="flex flex-col border-2 border-zinc-100 bg-zinc-50/30 p-4 transition-all hover:border-zinc-200 dark:border-zinc-900 dark:bg-zinc-900/10"
+            >
+              <span className="text-[9px] font-black uppercase tracking-widest text-zinc-400 mb-2">
+                {key}
+              </span>
+              <span className="font-mono text-2xl font-black text-zinc-900 dark:text-zinc-100">
+                {value}
+              </span>
+            </div>
+          ))}
+          {mapEntries.map((entry, idx) => (
+            <div
+              key={idx}
+              className="col-span-2 flex flex-col border-2 border-zinc-100 bg-zinc-50/30 p-4 dark:border-zinc-900 dark:bg-zinc-900/10"
+            >
+              <div className="flex items-center justify-between mb-2">
+                <span className="text-[9px] font-black uppercase tracking-widest text-zinc-400">
+                  MAP ENTRY
+                </span>
+                <span className="text-[9px] font-mono font-bold text-zinc-300 uppercase">
+                  KEY: {entry.key}
+                </span>
+              </div>
+              <span className="font-mono text-sm font-bold text-zinc-900 dark:text-zinc-100 break-all leading-relaxed">
+                {entry.value}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Status Log */}
+      <AnimatePresence mode="wait">
+        {snapshot.caption && (
+          <motion.div
+            key={snapshot.caption}
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -10 }}
+            className="p-8 border-l-8 bg-zinc-900 border-zinc-700 text-white dark:bg-white dark:border-zinc-200 dark:text-zinc-900 shadow-xl"
+          >
+            <div className="flex flex-col gap-1">
+              <span className="text-[9px] font-black uppercase tracking-[0.4em] text-zinc-500 mb-1">
+                Log do Sistema
+              </span>
+              <p className="text-xl font-black uppercase tracking-tight leading-tight">
+                {snapshot.caption}
+              </p>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </section>
+  );
+}
diff --git a/components/code-player/visualizers/index.ts b/components/code-player/visualizers/index.ts
new file mode 100644
index 0000000..3bbdef1
--- /dev/null
+++ b/components/code-player/visualizers/index.ts
@@ -0,0 +1,27 @@
+'use client';
+
+import { TwoSumVisualizer } from './two-sum-visualizer';
+import { GenericVisualizer } from './generic-visualizer';
+import type { ExecutionTraceStep } from '@/lib/content/schemas';
+
+/**
+ * Mapeamento de Slugs de Problemas para os seus Visualizadores Pro.
+ * Adicionar um novo problema aqui "habilita" a funcionalidade premium para esse slug.
+ */
+export const BESPOKE_VISUALIZERS: Record<string, React.ComponentType<{ steps: ExecutionTraceStep[]; solutionSlug?: string }>> = {
+  'two-sum': TwoSumVisualizer,
+  'minimum-window-substring': GenericVisualizer,
+  'longest-substring-without-repeating': GenericVisualizer,
+  'subarray-sum-equals-k': GenericVisualizer,
+  'trapping-rain-water': GenericVisualizer,
+  'group-anagrams': GenericVisualizer,
+  'daily-temperatures': GenericVisualizer,
+  '3sum': GenericVisualizer,
+};
+
+/**
+ * Verifica se um problema tem suporte a visualização Pro.
+ */
+export function hasBespokeVisualizer(slug: string): boolean {
+  return !!BESPOKE_VISUALIZERS[slug];
+}
diff --git a/components/code-player/visualizers/two-sum-visualizer.tsx b/components/code-player/visualizers/two-sum-visualizer.tsx
new file mode 100644
index 0000000..902bca5
--- /dev/null
+++ b/components/code-player/visualizers/two-sum-visualizer.tsx
@@ -0,0 +1,343 @@
+"use client";
+
+import { resolveExecutionSnapshot } from "@/lib/content/resolve-execution-snapshot";
+import type { ExecutionTraceStep } from "@/lib/content/schemas";
+import { AnimatePresence, motion } from "framer-motion";
+import { useMemo } from "react";
+import { usePlayerStore } from "../use-player-store";
+
+interface Props {
+  steps: ExecutionTraceStep[];
+  solutionSlug?: string;
+}
+
+export function TwoSumVisualizer({ steps, solutionSlug }: Props) {
+  const currentLine = usePlayerStore((s) => s.currentLine);
+  const currentStepIndex = usePlayerStore((s) => s.currentStepIndex);
+
+  const snapshot = useMemo(() => {
+    if (currentStepIndex !== -1 && steps[currentStepIndex]) {
+      return steps[currentStepIndex].snapshot;
+    }
+    return resolveExecutionSnapshot(currentLine, steps);
+  }, [currentLine, currentStepIndex, steps]);
+
+  const foundAtStr = snapshot?.scalars?.found_at;
+  const foundAtIndices = useMemo(() => {
+    if (!foundAtStr) return [];
+    return foundAtStr
+      .replace(/[\[\]]/g, "")
+      .split(",")
+      .map((s) => parseInt(s.trim(), 10));
+  }, [foundAtStr]);
+
+  if (!snapshot) {
+    return (
+      <section className="border border-dashed border-zinc-200 bg-zinc-50 p-6 text-[10px] font-black uppercase tracking-widest text-zinc-400">
+        Motor Offline / Aguardando dados de execução...
+      </section>
+    );
+  }
+
+  const numsArray = snapshot.arrays?.find((a) => a.label === "nums");
+  const nums = numsArray ? (numsArray.values as number[]) : [];
+
+  const iStr = snapshot.scalars?.i;
+  const jStr = snapshot.scalars?.j;
+  const iIdx = iStr !== undefined ? parseInt(iStr, 10) : null;
+  const jIdx = jStr !== undefined ? parseInt(jStr, 10) : null;
+
+  const target = snapshot.scalars?.target;
+  const val = snapshot.scalars?.val;
+  const complement = snapshot.scalars?.complement;
+  const currentSum = snapshot.scalars?.current_sum;
+
+  const result = snapshot.scalars?.result;
+  const mapEntries = snapshot.mapEntries || [];
+
+  const isFound =
+    foundAtStr !== undefined ||
+    result !== undefined ||
+    (currentSum !== undefined && currentSum === target);
+
+  return (
+    <section className="flex flex-col gap-10 border-x border-b border-zinc-200 bg-white p-10 select-none dark:border-zinc-800 dark:bg-zinc-950 shadow-sm">
+      {/* Header Area */}
+      <div className="flex items-center justify-between border-b-2 border-zinc-900 pb-8 dark:border-zinc-100">
+        <div className="flex flex-col gap-2">
+          <div className="flex items-center gap-2">
+            <div className="h-1.5 w-1.5 rounded-full bg-primary" />
+            <h3 className="text-[10px] font-black uppercase tracking-[0.4em] text-zinc-400">
+              Execution Monitor
+            </h3>
+          </div>
+          <div className="flex items-center gap-4">
+            <div className="bg-zinc-900 px-4 py-1.5 dark:bg-white">
+              <span className="font-mono text-base font-black text-white dark:text-zinc-900">
+                {String(currentStepIndex + 1).padStart(2, "0")}
+              </span>
+            </div>
+            <span className="text-[10px] font-bold text-zinc-400 uppercase tracking-widest">
+              Passo de {steps.length}
+            </span>
+          </div>
+        </div>
+
+        {target !== undefined && (
+          <div className="flex flex-col items-end gap-1.5">
+            <span className="text-[9px] font-black uppercase tracking-widest text-zinc-400">
+              Target Value
+            </span>
+            <div
+              className={`flex min-w-[100px] items-center justify-center border-2 px-6 py-3 transition-all duration-500 ${
+                isFound
+                  ? "bg-emerald-500 border-emerald-500 text-white shadow-xl scale-105"
+                  : "bg-zinc-50 border-zinc-900 dark:bg-zinc-900 dark:border-zinc-100"
+              }`}
+            >
+              <span className="font-mono text-3xl font-black">{target}</span>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Array Visualization */}
+      <div className="relative flex flex-col items-center py-6">
+        <div className="flex flex-wrap justify-center gap-2.5">
+          {nums.map((num, idx) => {
+            const isI = idx === iIdx;
+            const isJ = idx === jIdx;
+            const isSolved = foundAtIndices.includes(idx);
+
+            return (
+              <div key={idx} className="relative flex flex-col items-center">
+                <motion.div
+                  layout
+                  className={`flex h-16 w-16 items-center justify-center border-2 font-mono text-xl font-black transition-all duration-300 ${
+                    isSolved
+                      ? "border-emerald-500 bg-emerald-500 text-white z-10 shadow-[8px_8px_0_0_rgba(16,185,129,0.15)]"
+                      : isI
+                        ? "border-blue-600 bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400 scale-110 z-10 shadow-lg"
+                        : isJ
+                          ? "border-orange-500 bg-orange-50 text-orange-500 dark:bg-orange-900/20 dark:text-orange-400 scale-110 z-10 shadow-lg"
+                          : "border-zinc-100 bg-white text-zinc-200 dark:border-zinc-800 dark:bg-zinc-950"
+                  }`}
+                >
+                  {num}
+                </motion.div>
+
+                <div className="mt-2 font-mono text-[9px] font-bold text-zinc-300">
+                  #{idx}
+                </div>
+
+                <AnimatePresence>
+                  {isI && (
+                    <motion.div
+                      layoutId="pointer-i"
+                      initial={{ opacity: 0, y: 15 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      exit={{ opacity: 0, y: 15 }}
+                      className="absolute -top-10 flex flex-col items-center"
+                      transition={{ type: "spring", stiffness: 400, damping: 30 }}
+                    >
+                      <div className="bg-blue-600 px-2 py-0.5 shadow-sm">
+                        <span className="font-mono text-[10px] font-black text-white">I</span>
+                      </div>
+                      <div className="h-2 w-[2px] bg-blue-600" />
+                    </motion.div>
+                  )}
+                  {isJ && (
+                    <motion.div
+                      layoutId="pointer-j"
+                      initial={{ opacity: 0, y: 15 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      exit={{ opacity: 0, y: 15 }}
+                      className="absolute -top-10 flex flex-col items-center"
+                      transition={{ type: "spring", stiffness: 400, damping: 30 }}
+                    >
+                      <div className="bg-orange-500 px-2 py-0.5 shadow-sm">
+                        <span className="font-mono text-[10px] font-black text-white">J</span>
+                      </div>
+                      <div className="h-2 w-[2px] bg-orange-500" />
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Logic Stage */}
+      <div
+        className={`relative overflow-hidden border-2 p-10 transition-all duration-700 ${
+          isFound
+            ? "bg-emerald-50 border-emerald-500/40 dark:bg-emerald-950/20"
+            : "bg-zinc-50 border-zinc-100 dark:bg-zinc-900/40 dark:border-zinc-900"
+        }`}
+      >
+        <AnimatePresence mode="wait">
+          {complement !== undefined && val !== undefined ? (
+            <motion.div
+              key="hash-logic"
+              initial={{ opacity: 0, scale: 0.98 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 1.02 }}
+              className="flex flex-col items-center gap-8"
+            >
+              <div className="flex items-center gap-3">
+                <div className="h-[1px] w-8 bg-zinc-200 dark:bg-zinc-800" />
+                <span className="text-[10px] font-black uppercase tracking-[0.5em] text-zinc-400">
+                  Lógica de Busca
+                </span>
+                <div className="h-[1px] w-8 bg-zinc-200 dark:bg-zinc-800" />
+              </div>
+              <div className="flex items-center gap-12">
+                <div className="flex flex-col items-center gap-1">
+                  <span className="text-[10px] font-bold text-zinc-400">Target</span>
+                  <span className="font-mono text-4xl font-black">{target}</span>
+                </div>
+                <span className="text-3xl font-light text-zinc-200">−</span>
+                <div className="flex flex-col items-center gap-1">
+                  <span className="text-[10px] font-bold text-blue-600/60">Atual</span>
+                  <span className="font-mono text-4xl font-black text-blue-600">{val}</span>
+                </div>
+                <span className="text-3xl font-light text-zinc-200">=</span>
+                <div className="flex flex-col items-center gap-1">
+                  <span className="text-[10px] font-bold text-orange-500/60">Complemento</span>
+                  <motion.span
+                    key={complement}
+                    initial={{ y: 10, opacity: 0 }}
+                    animate={{ y: 0, opacity: 1 }}
+                    className={`font-mono text-6xl font-black ${isFound ? "text-emerald-500" : "text-orange-500"}`}
+                  >
+                    {complement}
+                  </motion.span>
+                </div>
+              </div>
+            </motion.div>
+          ) : currentSum !== undefined ? (
+            <motion.div
+              key="brute-logic"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              className="flex flex-col items-center gap-8"
+            >
+              <div className="flex items-center gap-3">
+                <div className="h-[1px] w-8 bg-zinc-200 dark:bg-zinc-800" />
+                <span className="text-[10px] font-black uppercase tracking-[0.5em] text-zinc-400">
+                  Verificação de Soma
+                </span>
+                <div className="h-[1px] w-8 bg-zinc-200 dark:bg-zinc-800" />
+              </div>
+              <div className="flex items-center gap-12">
+                <div className="flex flex-col items-center gap-1">
+                  <span className="text-[10px] font-bold text-blue-600/60">num[i]</span>
+                  <span className="font-mono text-4xl font-black text-blue-600">{nums[iIdx!]}</span>
+                </div>
+                <span className="text-3xl font-light text-zinc-200">+</span>
+                <div className="flex flex-col items-center gap-1">
+                  <span className="text-[10px] font-bold text-orange-500/60">num[j]</span>
+                  <span className="font-mono text-4xl font-black text-orange-500">{nums[jIdx!]}</span>
+                </div>
+                <span className="text-3xl font-light text-zinc-200">=</span>
+                <div className="flex flex-col items-center gap-1">
+                  <span className="text-[10px] font-bold text-zinc-400">Total</span>
+                  <motion.span
+                    key={currentSum}
+                    className={`font-mono text-6xl font-black ${isFound ? "text-emerald-500" : "text-zinc-900 dark:text-white"}`}
+                  >
+                    {currentSum}
+                  </motion.span>
+                </div>
+              </div>
+            </motion.div>
+          ) : null}
+        </AnimatePresence>
+      </div>
+
+      {/* Memory Area */}
+      {(mapEntries.length > 0 || complement !== undefined) && (
+        <div className="flex flex-col gap-6">
+          <div className="flex items-center justify-between border-b border-zinc-100 pb-3 dark:border-zinc-900">
+            <h4 className="text-[10px] font-black uppercase tracking-[0.3em] text-zinc-400">
+              Memória (Hash Map)
+            </h4>
+            <div className="flex items-center gap-2">
+              <div className="h-1.5 w-1.5 rounded-full bg-zinc-200" />
+              <span className="font-mono text-[9px] font-bold text-zinc-300 uppercase">
+                {mapEntries.length} entradas ativas
+              </span>
+            </div>
+          </div>
+
+          <div className="flex flex-wrap gap-3 min-h-[60px]">
+            <AnimatePresence mode="popLayout">
+              {mapEntries.map((entry) => {
+                const isTargeted = String(entry.key) === String(complement) && isFound;
+                return (
+                  <motion.div
+                    key={entry.key}
+                    layout
+                    initial={{ opacity: 0, scale: 0.9 }}
+                    animate={{ opacity: 1, scale: 1 }}
+                    className={`flex items-center border-2 px-4 py-3 transition-all duration-300 ${
+                      isTargeted
+                        ? "border-emerald-500 bg-emerald-500 text-white z-10 shadow-xl scale-110"
+                        : "border-zinc-100 bg-zinc-50 dark:border-zinc-900 dark:bg-zinc-900/30"
+                    }`}
+                  >
+                    <div className="flex flex-col">
+                      <span className="text-[8px] font-black uppercase opacity-40 mb-0.5">Key</span>
+                      <span className="font-mono text-base font-black">{entry.key}</span>
+                    </div>
+                    <div className="mx-4 h-6 w-[1px] bg-zinc-200 dark:bg-zinc-800" />
+                    <div className="flex flex-col">
+                      <span className="text-[8px] font-black uppercase opacity-40 mb-0.5">Value</span>
+                      <span className="font-mono text-base font-bold text-zinc-400">{entry.value}</span>
+                    </div>
+                  </motion.div>
+                );
+              })}
+              {mapEntries.length === 0 && (
+                <div className="flex w-full items-center justify-center border-2 border-dashed border-zinc-100 py-10 dark:border-zinc-900">
+                  <span className="text-[10px] font-black uppercase tracking-[0.4em] text-zinc-200">
+                    Memória Vazia
+                  </span>
+                </div>
+              )}
+            </AnimatePresence>
+          </div>
+        </div>
+      )}
+
+      {/* System Status */}
+      <AnimatePresence mode="wait">
+        {snapshot.caption && (
+          <motion.div
+            key={snapshot.caption}
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -10 }}
+            className={`p-8 border-l-8 transition-all duration-500 ${
+              isFound
+                ? "bg-emerald-500 border-emerald-600 text-white shadow-lg"
+                : "bg-zinc-900 border-zinc-700 text-white"
+            }`}
+          >
+            <div className="flex flex-col gap-1">
+              <span className={`text-[9px] font-black uppercase tracking-[0.4em] ${isFound ? 'text-emerald-200' : 'text-zinc-500'}`}>
+                Status do Sistema
+              </span>
+              <p className="text-xl font-black uppercase tracking-tight leading-tight">
+                {snapshot.caption}
+              </p>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </section>
+  );
+}
+
diff --git a/components/layout/session-nav.tsx b/components/layout/session-nav.tsx
index 3da38fb..c10e5c6 100644
--- a/components/layout/session-nav.tsx
+++ b/components/layout/session-nav.tsx
@@ -12,9 +12,19 @@ import Image from "next/image";
 export function SessionNav() {
   const { data, isPending } = authClient.useSession();
   const [isOpen, setIsOpen] = useState(false);
+  const [mounted, setMounted] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
   const router = useRouter();
 
+  useEffect(() => {
+    // Usamos setTimeout para evitar o aviso de 'cascading renders' síncrono.
+    // Isto move a atualização para a próxima iteração do event loop.
+    const timer = setTimeout(() => {
+      setMounted(true);
+    }, 0);
+    return () => clearTimeout(timer);
+  }, []);
+
   useEffect(() => {
     if (!isOpen) return;
     const handleOutsideClick = (e: MouseEvent) => {
@@ -29,7 +39,7 @@ export function SessionNav() {
     return () => document.removeEventListener("mousedown", handleOutsideClick);
   }, [isOpen]);
 
-  if (isPending) {
+  if (!mounted || isPending) {
     return (
       <span className="hidden text-[10px] text-muted-foreground sm:inline">
         …
diff --git a/components/seo/json-ld.tsx b/components/seo/json-ld.tsx
index 8975128..2cd0c22 100644
--- a/components/seo/json-ld.tsx
+++ b/components/seo/json-ld.tsx
@@ -1,10 +1,15 @@
+import Script from "next/script";
+
 /**
- * Injeta JSON-LD no servidor (sem cliente).
+ * Injeta JSON-LD usando o componente Script do Next.js para evitar avisos de hidratação
+ * e garantir execução correta tanto no servidor quanto no cliente.
  */
 export function JsonLdScript(props: { data: Record<string, unknown> | Record<string, unknown>[] }) {
   return (
-    <script
+    <Script
+      id="json-ld-data"
       type="application/ld+json"
+      strategy="afterInteractive"
       dangerouslySetInnerHTML={{ __html: JSON.stringify(props.data) }}
     />
   );
diff --git a/lib/actions/admin.ts b/lib/actions/admin.ts
index 476c7c1..f555bdb 100644
--- a/lib/actions/admin.ts
+++ b/lib/actions/admin.ts
@@ -205,6 +205,7 @@ export async function listContents(params: {
   search?: string;
   tab?: 'editorial' | 'sistema';
   access?: string;
+  category?: string;
 }) {
   const admin = await getAuthenticatedStaff();
   if (!admin) return { error: 'Não autorizado', contents: [], total: 0 };
@@ -230,6 +231,13 @@ export async function listContents(params: {
       conditions.push(eq(contents.access, params.access as never));
     }
 
+    if (params.category) {
+      // Filtra dentro do JSONB metadata -> categories
+      conditions.push(
+        sql`${contents.metadata}->'categories' @> ${JSON.stringify([params.category])}::jsonb`
+      );
+    }
+
     if (params.status) conditions.push(eq(contents.status, params.status as never));
     if (params.search) {
       conditions.push(
@@ -868,7 +876,8 @@ export async function getPricingInventory() {
     createdAt: pricingInventory.createdAt,
     contentTitle: contents.title,
     contentType: contents.type,
-    contentSlug: contents.slug
+    contentSlug: contents.slug,
+    metadata: contents.metadata
   })
   .from(pricingInventory)
   .innerJoin(contents, eq(pricingInventory.contentId, contents.id))
diff --git a/lib/content/content-repository.ts b/lib/content/content-repository.ts
index 0910247..253bd49 100644
--- a/lib/content/content-repository.ts
+++ b/lib/content/content-repository.ts
@@ -277,6 +277,7 @@ class DbContentRepository implements ContentRepository {
         tags: (meta.tags as string[]) ?? [],
         estimatedMinutes: (meta.estimatedMinutes as number) ?? 15,
         recommendedOrder: meta.recommendedOrder as number | undefined,
+        hasBespokeVisualizer: (meta.hasBespokeVisualizer as boolean) ?? false,
         access: row.access as ContentAccess,
       },
       descriptionHtml: renderMarkdown(row.body),
@@ -290,6 +291,7 @@ class DbContentRepository implements ContentRepository {
             language: (sMeta.language as Language) || (s.language as Language),
             complexity: (sMeta.complexity as Complexity) || (s.complexity as Complexity), 
             entryFunction: (sMeta.entryFunction as string) || (s.entryFunction as string),
+            simulatorCode: sMeta.simulatorCode as string | undefined,
           },
           codeByLanguage: (s.codeByLanguage as Record<string, string>) ?? {},
           introHtml: (s.introHtml as string) || renderMarkdown((s.introMd as string) ?? ''),
diff --git a/lib/content/schemas.ts b/lib/content/schemas.ts
index 95e856f..aff3d2a 100644
--- a/lib/content/schemas.ts
+++ b/lib/content/schemas.ts
@@ -87,6 +87,8 @@ export const ProblemMeta = z.object({
   recommendedOrder: z.number().int().positive().optional(),
   /** `pro` = requer assinatura para player e soluções. Omisso = `pro`. */
   access: ContentAccess.default('pro'),
+  /** Ativa o visualizador industrial/dinâmico exclusivo para Pro. */
+  hasBespokeVisualizer: z.boolean().default(false),
 });
 export type ProblemMeta = z.infer<typeof ProblemMeta>;
 
@@ -99,6 +101,9 @@ export const SolutionMeta = z.object({
   /** Identifier of the function/method that holds the solution.
    * Used by the player to know what to highlight as "the entry point". */
   entryFunction: z.string().optional(),
+  /** Código JavaScript (string) que gera o ExecutionTraceStep[]. 
+   * Recebe (nums, target) e retorna o rastro. */
+  simulatorCode: z.string().optional(),
 });
 export type SolutionMeta = z.infer<typeof SolutionMeta>;
 
@@ -134,6 +139,7 @@ export const ExecutionTraceArraySnapshotSchema = z.object({
   label: z.string().min(1),
   values: z.array(z.union([z.number(), z.string(), z.null()])),
   highlightIndices: z.array(z.number().int().nonnegative()).default([]),
+  range: z.tuple([z.number(), z.number()]).optional(),
 });
 
 export const ExecutionTraceSnapshotSchema = z.object({
diff --git a/lib/simulators/index.ts b/lib/simulators/index.ts
new file mode 100644
index 0000000..b98755b
--- /dev/null
+++ b/lib/simulators/index.ts
@@ -0,0 +1,20 @@
+import type { ExecutionTraceStep } from '@/lib/content/schemas';
+
+/**
+ * Tipo genérico para funções de simulação.
+ * Usamos 'unknown[]' para garantir tipagem estrita e evitar o uso de 'any'.
+ */
+export type SimulatorFunction = (...args: unknown[]) => ExecutionTraceStep[];
+
+/**
+ * Mapeia Slugs + Soluções para funções de simulação locais (Legado).
+ * O sistema agora prioriza o 'simulatorCode' vindo do banco de dados.
+ */
+export const SIMULATOR_REGISTRY: Record<string, Record<string, SimulatorFunction>> = {
+  // Exemplo legado:
+  // 'two-sum': { ... }
+};
+
+export function getSimulator(problemSlug: string, solutionSlug: string): SimulatorFunction | undefined {
+  return SIMULATOR_REGISTRY[problemSlug]?.[solutionSlug];
+}