Spaces:
Running
Running
| <html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/e4af272ccee01ff0-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="stylesheet" href="/_next/static/css/010afec7547c6d1a.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-8f7c4246348aad30.js"/><script src="/_next/static/chunks/fd9d1056-51face16839d2cb0.js" async=""></script><script src="/_next/static/chunks/23-3c786d31948a49f2.js" async=""></script><script src="/_next/static/chunks/main-app-dda775df53745ffe.js" async=""></script><script src="/_next/static/chunks/506-f293b903a260cb45.js" async=""></script><script src="/_next/static/chunks/app/page-24a4cfd26a3ffdcb.js" async=""></script><title>DAT Creativity Game Progress</title><meta name="description" content="Interactive visualization of my progress in the DAT creativity game using hillclimbing optimization"/><meta name="next-size-adjust"/><script src="/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js" noModule=""></script></head><body class="__className_e8ce0c"><div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100"><div class="container mx-auto px-4 py-8"><div class="text-center mb-12"><h1 class="text-4xl font-bold text-gray-900 mb-4">DAT Creativity Game Progress</h1><p class="text-xl text-gray-600 max-w-2xl mx-auto">An interactive visualization of my journey through the Divergent Association Task (DAT) creativity game, showcasing the hillclimbing optimization technique.</p></div><div class="space-y-8"><div class="rounded-lg border bg-card text-card-foreground shadow-sm"><div class="flex flex-col space-y-1.5 p-6"><div class="text-2xl font-semibold leading-none tracking-tight flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chart-column h-5 w-5" aria-hidden="true"><path d="M3 3v16a2 2 0 0 0 2 2h16"></path><path d="M18 17V9"></path><path d="M13 17V5"></path><path d="M8 17v-3"></path></svg>Performance Statistics</div></div><div class="p-6 pt-0"><div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6"><div class="p-4 bg-gradient-to-br from-green-50 to-green-100 rounded-lg border border-green-200"><div class="flex items-center justify-between mb-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trophy h-6 w-6 text-green-600" aria-hidden="true"><path d="M10 14.66v1.626a2 2 0 0 1-.976 1.696A5 5 0 0 0 7 21.978"></path><path d="M14 14.66v1.626a2 2 0 0 0 .976 1.696A5 5 0 0 1 17 21.978"></path><path d="M18 9h1.5a1 1 0 0 0 0-5H18"></path><path d="M4 22h16"></path><path d="M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z"></path><path d="M6 9H4.5a1 1 0 0 1 0-5H6"></path></svg><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent hover:bg-primary/80 bg-green-500 text-white">Top 0.02%</div></div><div class="text-2xl font-bold text-green-700">95.08</div><div class="text-sm text-green-600">Final Creativity Score</div></div><div class="p-4 bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg border border-blue-200"><div class="flex items-center justify-between mb-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users h-6 w-6 text-blue-600" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><path d="M16 3.128a4 4 0 0 1 0 7.744"></path><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><circle cx="9" cy="7" r="4"></circle></svg><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-blue-300 text-blue-700">Percentile</div></div><div class="text-2xl font-bold text-blue-700">99.98<!-- -->%</div><div class="text-sm text-blue-600">Better than others</div></div><div class="p-4 bg-gradient-to-br from-purple-50 to-purple-100 rounded-lg border border-purple-200"><div class="flex items-center justify-between mb-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-6 w-6 text-purple-600" aria-hidden="true"><path d="M12 6v6l4 2"></path><circle cx="12" cy="12" r="10"></circle></svg><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-purple-300 text-purple-700">Duration</div></div><div class="text-2xl font-bold text-purple-700">106<!-- -->m</div><div class="text-sm text-purple-600">Total game time</div></div><div class="p-4 bg-gradient-to-br from-orange-50 to-orange-100 rounded-lg border border-orange-200"><div class="flex items-center justify-between mb-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trending-up h-6 w-6 text-orange-600" aria-hidden="true"><path d="M16 7h6v6"></path><path d="m22 7-8.5 8.5-5-5L2 17"></path></svg><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-orange-300 text-orange-700">Optimization</div></div><div class="text-2xl font-bold text-orange-700">13</div><div class="text-sm text-orange-600">Optimization rounds</div></div><div class="p-4 bg-gradient-to-br from-pink-50 to-pink-100 rounded-lg border border-pink-200"><div class="flex items-center justify-between mb-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zap h-6 w-6 text-pink-600" aria-hidden="true"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path></svg><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-pink-300 text-pink-700">Changes</div></div><div class="text-2xl font-bold text-pink-700">45</div><div class="text-sm text-pink-600">Total word swaps</div></div><div class="p-4 bg-gradient-to-br from-indigo-50 to-indigo-100 rounded-lg border border-indigo-200"><div class="flex items-center justify-between mb-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chart-column h-6 w-6 text-indigo-600" aria-hidden="true"><path d="M3 3v16a2 2 0 0 0 2 2h16"></path><path d="M18 17V9"></path><path d="M13 17V5"></path><path d="M8 17v-3"></path></svg><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-indigo-300 text-indigo-700">Vocabulary</div></div><div class="text-2xl font-bold text-indigo-700">30</div><div class="text-sm text-indigo-600">Unique words used</div></div></div><div class="space-y-4"><h3 class="text-lg font-semibold text-gray-900">Semantic Distance Analysis</h3><div class="grid grid-cols-1 md:grid-cols-3 gap-4"><div class="p-3 bg-gray-50 rounded-lg"><div class="text-sm font-medium text-gray-600 mb-1">Average Distance</div><div class="text-xl font-bold text-gray-900">95.1</div><div class="text-xs text-gray-500">Across all word pairs</div></div><div class="p-3 bg-gray-50 rounded-lg"><div class="text-sm font-medium text-gray-600 mb-1">Maximum Distance</div><div class="text-xl font-bold text-gray-900">104</div><div class="text-xs text-gray-500">Most distant pair</div></div><div class="p-3 bg-gray-50 rounded-lg"><div class="text-sm font-medium text-gray-600 mb-1">Minimum Distance</div><div class="text-xl font-bold text-gray-900">79</div><div class="text-xs text-gray-500">Closest pair (non-zero)</div></div></div><div class="p-4 bg-blue-50 rounded-lg"><h4 class="font-medium text-blue-900 mb-2">Key Insights</h4><ul class="space-y-1 text-sm text-blue-800"><li>• Achieved exceptional creativity score through systematic optimization</li><li>• Hillclimbing algorithm effectively explored the semantic space</li><li>• <!-- -->3.46<!-- --> average word changes per round shows focused refinement</li><li>• High semantic distances indicate successful divergent thinking</li></ul></div></div></div></div><div class="rounded-lg border bg-card text-card-foreground shadow-sm w-full"><div class="flex flex-col space-y-1.5 p-6"><div class="text-2xl font-semibold leading-none tracking-tight flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-5 w-5" aria-hidden="true"><path d="M12 6v6l4 2"></path><circle cx="12" cy="12" r="10"></circle></svg>Game Progress Timeline</div></div><div class="p-6 pt-0"><div class="space-y-4"><div class="flex items-center gap-4 p-4 border rounded-lg hover:bg-gray-50 transition-colors"><div class="flex-shrink-0"><div class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium bg-gray-200 text-gray-600">1</div></div><div class="flex-grow"><div class="flex items-center justify-between mb-2"><h3 class="font-medium text-gray-900">Round <!-- -->1</h3><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground text-xs">11:53 PM</div></div><div class="flex flex-wrap gap-1 mb-2"><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">brilliance</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">sports</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">peace</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">rocket</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">icecream</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground text-xs">+<!-- -->5<!-- --> more</div></div></div><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="radix-:Ropafja:" data-state="closed">View <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ml-1 h-3 w-3" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></button></div><div class="flex items-center gap-4 p-4 border rounded-lg hover:bg-gray-50 transition-colors"><div class="flex-shrink-0"><div class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium bg-blue-500 text-white">2</div></div><div class="flex-grow"><div class="flex items-center justify-between mb-2"><h3 class="font-medium text-gray-900">Round <!-- -->2<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zap inline-block ml-1 h-4 w-4 text-yellow-500" aria-hidden="true"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path></svg></h3><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground text-xs">12:00 AM</div></div><div class="flex flex-wrap gap-1 mb-2"><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">stochastic</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">fuselage</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">pitfall</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">screwdriver</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">sand</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground text-xs">+<!-- -->5<!-- --> more</div></div><div class="flex items-center gap-2 text-sm"><span class="text-green-600">+<!-- -->10<!-- --> added</span><span class="text-red-600">-<!-- -->10<!-- --> removed</span></div></div><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="radix-:Rp9afja:" data-state="closed">View <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ml-1 h-3 w-3" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></button></div><div class="flex items-center gap-4 p-4 border rounded-lg hover:bg-gray-50 transition-colors"><div class="flex-shrink-0"><div class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium bg-gray-200 text-gray-600">3</div></div><div class="flex-grow"><div class="flex items-center justify-between mb-2"><h3 class="font-medium text-gray-900">Round <!-- -->3</h3><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground text-xs">12:00 AM</div></div><div class="flex flex-wrap gap-1 mb-2"><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">stochastic</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">fuselage</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">pitfall</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">screwdriver</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">sand</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground text-xs">+<!-- -->5<!-- --> more</div></div></div><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="radix-:Rppafja:" data-state="closed">View <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ml-1 h-3 w-3" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></button></div><div class="flex items-center gap-4 p-4 border rounded-lg hover:bg-gray-50 transition-colors"><div class="flex-shrink-0"><div class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium bg-blue-500 text-white">4</div></div><div class="flex-grow"><div class="flex items-center justify-between mb-2"><h3 class="font-medium text-gray-900">Round <!-- -->4<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zap inline-block ml-1 h-4 w-4 text-yellow-500" aria-hidden="true"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path></svg></h3><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground text-xs">01:33 AM</div></div><div class="flex flex-wrap gap-1 mb-2"><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">stochastic</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">fuselage</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">throne</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">icecream</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">cricket</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground text-xs">+<!-- -->5<!-- --> more</div></div><div class="flex items-center gap-2 text-sm"><span class="text-green-600">+<!-- -->6<!-- --> added</span><span class="text-red-600">-<!-- -->6<!-- --> removed</span></div></div><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="radix-:Rq9afja:" data-state="closed">View <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ml-1 h-3 w-3" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></button></div><div class="flex items-center gap-4 p-4 border rounded-lg hover:bg-gray-50 transition-colors"><div class="flex-shrink-0"><div class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium bg-gray-200 text-gray-600">5</div></div><div class="flex-grow"><div class="flex items-center justify-between mb-2"><h3 class="font-medium text-gray-900">Round <!-- -->5</h3><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground text-xs">01:33 AM</div></div><div class="flex flex-wrap gap-1 mb-2"><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">stochastic</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">fuselage</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">throne</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">icecream</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">cricket</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground text-xs">+<!-- -->5<!-- --> more</div></div></div><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="radix-:Rqpafja:" data-state="closed">View <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ml-1 h-3 w-3" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></button></div><div class="flex items-center gap-4 p-4 border rounded-lg hover:bg-gray-50 transition-colors"><div class="flex-shrink-0"><div class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium bg-gray-200 text-gray-600">6</div></div><div class="flex-grow"><div class="flex items-center justify-between mb-2"><h3 class="font-medium text-gray-900">Round <!-- -->6</h3><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground text-xs">01:34 AM</div></div><div class="flex flex-wrap gap-1 mb-2"><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">stochastic</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">fuselage</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">throne</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">icecream</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">cricket</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground text-xs">+<!-- -->5<!-- --> more</div></div></div><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="radix-:Rr9afja:" data-state="closed">View <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ml-1 h-3 w-3" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></button></div><div class="flex items-center gap-4 p-4 border rounded-lg hover:bg-gray-50 transition-colors"><div class="flex-shrink-0"><div class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium bg-gray-200 text-gray-600">7</div></div><div class="flex-grow"><div class="flex items-center justify-between mb-2"><h3 class="font-medium text-gray-900">Round <!-- -->7</h3><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground text-xs">01:35 AM</div></div><div class="flex flex-wrap gap-1 mb-2"><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">stochastic</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">fuselage</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">throne</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">icecream</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">cricket</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground text-xs">+<!-- -->5<!-- --> more</div></div></div><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="radix-:Rrpafja:" data-state="closed">View <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ml-1 h-3 w-3" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></button></div><div class="flex items-center gap-4 p-4 border rounded-lg hover:bg-gray-50 transition-colors"><div class="flex-shrink-0"><div class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium bg-blue-500 text-white">8</div></div><div class="flex-grow"><div class="flex items-center justify-between mb-2"><h3 class="font-medium text-gray-900">Round <!-- -->8<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zap inline-block ml-1 h-4 w-4 text-yellow-500" aria-hidden="true"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path></svg></h3><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground text-xs">01:36 AM</div></div><div class="flex flex-wrap gap-1 mb-2"><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">stochastic</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">fuselage</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">throne</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">icecream</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">cricket</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground text-xs">+<!-- -->5<!-- --> more</div></div><div class="flex items-center gap-2 text-sm"><span class="text-green-600">+<!-- -->2<!-- --> added</span><span class="text-red-600">-<!-- -->2<!-- --> removed</span></div></div><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="radix-:Rs9afja:" data-state="closed">View <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ml-1 h-3 w-3" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></button></div><div class="flex items-center gap-4 p-4 border rounded-lg hover:bg-gray-50 transition-colors"><div class="flex-shrink-0"><div class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium bg-gray-200 text-gray-600">9</div></div><div class="flex-grow"><div class="flex items-center justify-between mb-2"><h3 class="font-medium text-gray-900">Round <!-- -->9</h3><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground text-xs">01:36 AM</div></div><div class="flex flex-wrap gap-1 mb-2"><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">stochastic</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">fuselage</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">throne</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">icecream</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">cricket</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground text-xs">+<!-- -->5<!-- --> more</div></div></div><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="radix-:Rspafja:" data-state="closed">View <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ml-1 h-3 w-3" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></button></div><div class="flex items-center gap-4 p-4 border rounded-lg hover:bg-gray-50 transition-colors"><div class="flex-shrink-0"><div class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium bg-blue-500 text-white">10</div></div><div class="flex-grow"><div class="flex items-center justify-between mb-2"><h3 class="font-medium text-gray-900">Round <!-- -->10<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zap inline-block ml-1 h-4 w-4 text-yellow-500" aria-hidden="true"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path></svg></h3><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground text-xs">01:38 AM</div></div><div class="flex flex-wrap gap-1 mb-2"><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">stochastic</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">fuselage</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">throne</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">icecream</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">foosball</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground text-xs">+<!-- -->5<!-- --> more</div></div><div class="flex items-center gap-2 text-sm"><span class="text-green-600">+<!-- -->3<!-- --> added</span><span class="text-red-600">-<!-- -->3<!-- --> removed</span></div></div><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="radix-:Rt9afja:" data-state="closed">View <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ml-1 h-3 w-3" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></button></div><div class="flex items-center gap-4 p-4 border rounded-lg hover:bg-gray-50 transition-colors"><div class="flex-shrink-0"><div class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium bg-gray-200 text-gray-600">11</div></div><div class="flex-grow"><div class="flex items-center justify-between mb-2"><h3 class="font-medium text-gray-900">Round <!-- -->11</h3><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground text-xs">01:38 AM</div></div><div class="flex flex-wrap gap-1 mb-2"><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">stochastic</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">fuselage</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">throne</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">icecream</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">foosball</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground text-xs">+<!-- -->5<!-- --> more</div></div></div><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="radix-:Rtpafja:" data-state="closed">View <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ml-1 h-3 w-3" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></button></div><div class="flex items-center gap-4 p-4 border rounded-lg hover:bg-gray-50 transition-colors"><div class="flex-shrink-0"><div class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium bg-gray-200 text-gray-600">12</div></div><div class="flex-grow"><div class="flex items-center justify-between mb-2"><h3 class="font-medium text-gray-900">Round <!-- -->12</h3><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground text-xs">01:39 AM</div></div><div class="flex flex-wrap gap-1 mb-2"><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">stochastic</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">fuselage</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">throne</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">icecream</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">foosball</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground text-xs">+<!-- -->5<!-- --> more</div></div></div><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="radix-:Ru9afja:" data-state="closed">View <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ml-1 h-3 w-3" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></button></div><div class="flex items-center gap-4 p-4 border rounded-lg hover:bg-gray-50 transition-colors"><div class="flex-shrink-0"><div class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium bg-blue-500 text-white">13</div></div><div class="flex-grow"><div class="flex items-center justify-between mb-2"><h3 class="font-medium text-gray-900">Round <!-- -->13<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zap inline-block ml-1 h-4 w-4 text-yellow-500" aria-hidden="true"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path></svg></h3><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground text-xs">01:39 AM</div></div><div class="flex flex-wrap gap-1 mb-2"><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">stochastic</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">fuselage</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">throne</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">corporate</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">arthritis</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground text-xs">+<!-- -->2<!-- --> more</div></div><div class="flex items-center gap-2 text-sm"><span class="text-red-600">-<!-- -->3<!-- --> removed</span></div></div><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="radix-:Rupafja:" data-state="closed">View <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ml-1 h-3 w-3" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></button></div></div></div></div><div class="rounded-lg border bg-card text-card-foreground shadow-sm w-full"><div class="flex flex-col space-y-1.5 p-6"><div class="text-2xl font-semibold leading-none tracking-tight flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trending-up h-5 w-5" aria-hidden="true"><path d="M16 7h6v6"></path><path d="m22 7-8.5 8.5-5-5L2 17"></path></svg>Word Evolution & Optimization</div></div><div class="p-6 pt-0"><div class="space-y-6"><div class="text-sm text-gray-600 mb-4">Track how words were systematically replaced to maximize semantic distance using hillclimbing optimization.</div><div class="border-l-2 border-blue-200 pl-4"><div class="flex items-center gap-2 mb-3"><div class="bg-blue-500 text-white text-xs font-medium px-2 py-1 rounded">Round <!-- -->2</div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-4 w-4 text-gray-400" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg><span class="text-sm text-gray-600">Optimization step</span></div><div class="space-y-3"><div><div class="flex items-center gap-2 mb-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus h-4 w-4 text-red-500" aria-hidden="true"><path d="M5 12h14"></path></svg><span class="text-sm font-medium text-red-600">Removed</span><span class="text-xs text-gray-500">(Lower semantic distance)</span></div><div class="flex flex-wrap gap-2"><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-primary/80 bg-red-50 text-red-700 border-red-200">brilliance</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-primary/80 bg-red-50 text-red-700 border-red-200">sports</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-primary/80 bg-red-50 text-red-700 border-red-200">peace</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-primary/80 bg-red-50 text-red-700 border-red-200">rocket</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-primary/80 bg-red-50 text-red-700 border-red-200">icecream</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-primary/80 bg-red-50 text-red-700 border-red-200">blush</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-primary/80 bg-red-50 text-red-700 border-red-200">friends</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-primary/80 bg-red-50 text-red-700 border-red-200">rhythm</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-primary/80 bg-red-50 text-red-700 border-red-200">velvet</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-primary/80 bg-red-50 text-red-700 border-red-200">ocean</div></div></div><div><div class="flex items-center gap-2 mb-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus h-4 w-4 text-green-500" aria-hidden="true"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg><span class="text-sm font-medium text-green-600">Added</span><span class="text-xs text-gray-500">(Higher semantic distance)</span></div><div class="flex flex-wrap gap-2"><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-primary/80 bg-green-50 text-green-700 border-green-200">stochastic</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-primary/80 bg-green-50 text-green-700 border-green-200">fuselage</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-primary/80 bg-green-50 text-green-700 border-green-200">pitfall</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-primary/80 bg-green-50 text-green-700 border-green-200">screwdriver</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-primary/80 bg-green-50 text-green-700 border-green-200">sand</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-primary/80 bg-green-50 text-green-700 border-green-200">spices</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-primary/80 bg-green-50 text-green-700 border-green-200">arthritis</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-primary/80 bg-green-50 text-green-700 border-green-200">printer</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-primary/80 bg-green-50 text-green-700 border-green-200">flute</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-primary/80 bg-green-50 text-green-700 border-green-200">dinosaurs</div></div></div><div class="text-xs text-gray-500 mt-2">This change increased the overall semantic distance between word pairs.</div></div></div><div class="border-l-2 border-blue-200 pl-4"><div class="flex items-center gap-2 mb-3"><div class="bg-blue-500 text-white text-xs font-medium px-2 py-1 rounded">Round <!-- -->4</div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-4 w-4 text-gray-400" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg><span class="text-sm text-gray-600">Optimization step</span></div><div class="space-y-3"><div><div class="flex items-center gap-2 mb-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus h-4 w-4 text-red-500" aria-hidden="true"><path d="M5 12h14"></path></svg><span class="text-sm font-medium text-red-600">Removed</span><span class="text-xs text-gray-500">(Lower semantic distance)</span></div><div class="flex flex-wrap gap-2"><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-primary/80 bg-red-50 text-red-700 border-red-200">pitfall</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-primary/80 bg-red-50 text-red-700 border-red-200">screwdriver</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-primary/80 bg-red-50 text-red-700 border-red-200">sand</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-primary/80 bg-red-50 text-red-700 border-red-200">spices</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-primary/80 bg-red-50 text-red-700 border-red-200">flute</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-primary/80 bg-red-50 text-red-700 border-red-200">dinosaurs</div></div></div><div><div class="flex items-center gap-2 mb-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus h-4 w-4 text-green-500" aria-hidden="true"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg><span class="text-sm font-medium text-green-600">Added</span><span class="text-xs text-gray-500">(Higher semantic distance)</span></div><div class="flex flex-wrap gap-2"><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-primary/80 bg-green-50 text-green-700 border-green-200">throne</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-primary/80 bg-green-50 text-green-700 border-green-200">icecream</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-primary/80 bg-green-50 text-green-700 border-green-200">cricket</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-primary/80 bg-green-50 text-green-700 border-green-200">remote</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-primary/80 bg-green-50 text-green-700 border-green-200">eel</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-primary/80 bg-green-50 text-green-700 border-green-200">speedbreaker</div></div></div><div class="text-xs text-gray-500 mt-2">This change increased the overall semantic distance between word pairs.</div></div></div><div class="border-l-2 border-blue-200 pl-4"><div class="flex items-center gap-2 mb-3"><div class="bg-blue-500 text-white text-xs font-medium px-2 py-1 rounded">Round <!-- -->8</div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-4 w-4 text-gray-400" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg><span class="text-sm text-gray-600">Optimization step</span></div><div class="space-y-3"><div><div class="flex items-center gap-2 mb-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus h-4 w-4 text-red-500" aria-hidden="true"><path d="M5 12h14"></path></svg><span class="text-sm font-medium text-red-600">Removed</span><span class="text-xs text-gray-500">(Lower semantic distance)</span></div><div class="flex flex-wrap gap-2"><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-primary/80 bg-red-50 text-red-700 border-red-200">remote</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-primary/80 bg-red-50 text-red-700 border-red-200">printer</div></div></div><div><div class="flex items-center gap-2 mb-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus h-4 w-4 text-green-500" aria-hidden="true"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg><span class="text-sm font-medium text-green-600">Added</span><span class="text-xs text-gray-500">(Higher semantic distance)</span></div><div class="flex flex-wrap gap-2"><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-primary/80 bg-green-50 text-green-700 border-green-200">corporate</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-primary/80 bg-green-50 text-green-700 border-green-200">butter</div></div></div><div class="text-xs text-gray-500 mt-2">This change increased the overall semantic distance between word pairs.</div></div></div><div class="border-l-2 border-blue-200 pl-4"><div class="flex items-center gap-2 mb-3"><div class="bg-blue-500 text-white text-xs font-medium px-2 py-1 rounded">Round <!-- -->10</div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-4 w-4 text-gray-400" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg><span class="text-sm text-gray-600">Optimization step</span></div><div class="space-y-3"><div><div class="flex items-center gap-2 mb-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus h-4 w-4 text-red-500" aria-hidden="true"><path d="M5 12h14"></path></svg><span class="text-sm font-medium text-red-600">Removed</span><span class="text-xs text-gray-500">(Lower semantic distance)</span></div><div class="flex flex-wrap gap-2"><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-primary/80 bg-red-50 text-red-700 border-red-200">cricket</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-primary/80 bg-red-50 text-red-700 border-red-200">butter</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-primary/80 bg-red-50 text-red-700 border-red-200">eel</div></div></div><div><div class="flex items-center gap-2 mb-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus h-4 w-4 text-green-500" aria-hidden="true"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg><span class="text-sm font-medium text-green-600">Added</span><span class="text-xs text-gray-500">(Higher semantic distance)</span></div><div class="flex flex-wrap gap-2"><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-primary/80 bg-green-50 text-green-700 border-green-200">foosball</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-primary/80 bg-green-50 text-green-700 border-green-200">chilli</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-primary/80 bg-green-50 text-green-700 border-green-200">lens</div></div></div><div class="text-xs text-gray-500 mt-2">This change increased the overall semantic distance between word pairs.</div></div></div><div class="border-l-2 border-blue-200 pl-4"><div class="flex items-center gap-2 mb-3"><div class="bg-blue-500 text-white text-xs font-medium px-2 py-1 rounded">Round <!-- -->13</div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-4 w-4 text-gray-400" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg><span class="text-sm text-gray-600">Optimization step</span></div><div class="space-y-3"><div><div class="flex items-center gap-2 mb-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus h-4 w-4 text-red-500" aria-hidden="true"><path d="M5 12h14"></path></svg><span class="text-sm font-medium text-red-600">Removed</span><span class="text-xs text-gray-500">(Lower semantic distance)</span></div><div class="flex flex-wrap gap-2"><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-primary/80 bg-red-50 text-red-700 border-red-200">icecream</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-primary/80 bg-red-50 text-red-700 border-red-200">foosball</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-primary/80 bg-red-50 text-red-700 border-red-200">speedbreaker</div></div></div><div class="text-xs text-gray-500 mt-2">This change increased the overall semantic distance between word pairs.</div></div></div></div><div class="mt-6 p-4 bg-blue-50 rounded-lg"><h4 class="font-medium text-blue-900 mb-2">Hillclimbing Strategy</h4><p class="text-sm text-blue-800">Each word replacement represents a “hill climbing” step where words with lower semantic distances to other words in the set were systematically replaced with words that had higher distances, improving the overall creativity score.</p></div></div></div><div class="rounded-lg border bg-card text-card-foreground shadow-sm w-full"><div class="flex flex-col space-y-1.5 p-6"><div class="text-2xl font-semibold leading-none tracking-tight flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-grid3x3 lucide-grid-3x3 h-5 w-5" aria-hidden="true"><rect width="18" height="18" x="3" y="3" rx="2"></rect><path d="M3 9h18"></path><path d="M3 15h18"></path><path d="M9 3v18"></path><path d="M15 3v18"></path></svg>Semantic Distance Matrix</div></div><div class="p-6 pt-0"><div class="space-y-4"><div class="flex items-center justify-between"><p class="text-sm text-gray-600">Interactive matrix showing semantic distances between final word pairs</p><div class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-target h-4 w-4 text-green-600" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="6"></circle><circle cx="12" cy="12" r="2"></circle></svg><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent hover:bg-primary/80 bg-green-100 text-green-800">Score: <!-- -->95.08</div></div></div><div class="overflow-x-auto"><div class="inline-block min-w-full"><table class="w-full"><thead><tr><th class="p-2"></th><th class="p-2 text-xs font-medium text-gray-600 min-w-[60px]"><div class="transform -rotate-45 origin-bottom-left whitespace-nowrap">stochastic</div></th><th class="p-2 text-xs font-medium text-gray-600 min-w-[60px]"><div class="transform -rotate-45 origin-bottom-left whitespace-nowrap">fuselage</div></th><th class="p-2 text-xs font-medium text-gray-600 min-w-[60px]"><div class="transform -rotate-45 origin-bottom-left whitespace-nowrap">throne</div></th><th class="p-2 text-xs font-medium text-gray-600 min-w-[60px]"><div class="transform -rotate-45 origin-bottom-left whitespace-nowrap">corporate</div></th><th class="p-2 text-xs font-medium text-gray-600 min-w-[60px]"><div class="transform -rotate-45 origin-bottom-left whitespace-nowrap">arthritis</div></th><th class="p-2 text-xs font-medium text-gray-600 min-w-[60px]"><div class="transform -rotate-45 origin-bottom-left whitespace-nowrap">chilli</div></th><th class="p-2 text-xs font-medium text-gray-600 min-w-[60px]"><div class="transform -rotate-45 origin-bottom-left whitespace-nowrap">lens</div></th></tr></thead><tbody><tr><td class="p-2 text-xs font-medium text-gray-600 sticky left-0 bg-white"><div class="max-w-[80px] truncate" title="stochastic">stochastic</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-gray-200 text-gray-500 | |
| ">0</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-green-500 text-white hover:bg-green-600 | |
| ">103</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-green-500 text-white hover:bg-green-600 | |
| ">100</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-green-500 text-white hover:bg-green-600 | |
| ">93</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-green-500 text-white hover:bg-green-600 | |
| ">94</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-green-500 text-white hover:bg-green-600 | |
| ">98</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-green-500 text-white hover:bg-green-600 | |
| ">94</div></td></tr><tr><td class="p-2 text-xs font-medium text-gray-600 sticky left-0 bg-white"><div class="max-w-[80px] truncate" title="fuselage">fuselage</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-green-500 text-white hover:bg-green-600 | |
| ">103</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-gray-200 text-gray-500 | |
| ">0</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-green-500 text-white hover:bg-green-600 | |
| ">94</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-green-500 text-white hover:bg-green-600 | |
| ">98</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-green-500 text-white hover:bg-green-600 | |
| ">96</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-green-500 text-white hover:bg-green-600 | |
| ">91</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-green-400 text-white hover:bg-green-500 | |
| ">79</div></td></tr><tr><td class="p-2 text-xs font-medium text-gray-600 sticky left-0 bg-white"><div class="max-w-[80px] truncate" title="throne">throne</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-green-500 text-white hover:bg-green-600 | |
| ">100</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-green-500 text-white hover:bg-green-600 | |
| ">94</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-gray-200 text-gray-500 | |
| ">0</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-green-500 text-white hover:bg-green-600 | |
| ">95</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-green-500 text-white hover:bg-green-600 | |
| ">98</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-green-500 text-white hover:bg-green-600 | |
| ">101</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-green-500 text-white hover:bg-green-600 | |
| ">98</div></td></tr><tr><td class="p-2 text-xs font-medium text-gray-600 sticky left-0 bg-white"><div class="max-w-[80px] truncate" title="corporate">corporate</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-green-500 text-white hover:bg-green-600 | |
| ">93</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-green-500 text-white hover:bg-green-600 | |
| ">98</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-green-500 text-white hover:bg-green-600 | |
| ">95</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-gray-200 text-gray-500 | |
| ">0</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-green-500 text-white hover:bg-green-600 | |
| ">97</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-green-500 text-white hover:bg-green-600 | |
| ">100</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-green-500 text-white hover:bg-green-600 | |
| ">92</div></td></tr><tr><td class="p-2 text-xs font-medium text-gray-600 sticky left-0 bg-white"><div class="max-w-[80px] truncate" title="arthritis">arthritis</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-green-500 text-white hover:bg-green-600 | |
| ">94</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-green-500 text-white hover:bg-green-600 | |
| ">96</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-green-500 text-white hover:bg-green-600 | |
| ">98</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-green-500 text-white hover:bg-green-600 | |
| ">97</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-gray-200 text-gray-500 | |
| ">0</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-green-500 text-white hover:bg-green-600 | |
| ">86</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-green-500 text-white hover:bg-green-600 | |
| ">87</div></td></tr><tr><td class="p-2 text-xs font-medium text-gray-600 sticky left-0 bg-white"><div class="max-w-[80px] truncate" title="chilli">chilli</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-green-500 text-white hover:bg-green-600 | |
| ">98</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-green-500 text-white hover:bg-green-600 | |
| ">91</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-green-500 text-white hover:bg-green-600 | |
| ">101</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-green-500 text-white hover:bg-green-600 | |
| ">100</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-green-500 text-white hover:bg-green-600 | |
| ">86</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-gray-200 text-gray-500 | |
| ">0</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-green-500 text-white hover:bg-green-600 | |
| ">104</div></td></tr><tr><td class="p-2 text-xs font-medium text-gray-600 sticky left-0 bg-white"><div class="max-w-[80px] truncate" title="lens">lens</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-green-500 text-white hover:bg-green-600 | |
| ">94</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-green-400 text-white hover:bg-green-500 | |
| ">79</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-green-500 text-white hover:bg-green-600 | |
| ">98</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-green-500 text-white hover:bg-green-600 | |
| ">92</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-green-500 text-white hover:bg-green-600 | |
| ">87</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-green-500 text-white hover:bg-green-600 | |
| ">104</div></td><td class="p-1"><div class=" | |
| w-12 h-12 flex items-center justify-center text-xs font-medium | |
| rounded cursor-pointer transition-colors duration-200 | |
| bg-gray-200 text-gray-500 | |
| ">0</div></td></tr></tbody></table></div></div><div class="flex items-center justify-between text-xs text-gray-500"><div class="flex items-center gap-4"><div class="flex items-center gap-1"><div class="w-3 h-3 bg-green-100 rounded"></div><span>Low distance</span></div><div class="flex items-center gap-1"><div class="w-3 h-3 bg-green-300 rounded"></div><span>Medium distance</span></div><div class="flex items-center gap-1"><div class="w-3 h-3 bg-green-500 rounded"></div><span>High distance</span></div></div><span>Matrix is symmetric</span></div><div class="p-4 bg-gray-50 rounded-lg"><h4 class="font-medium text-gray-900 mb-2">Matrix Analysis</h4><div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm"><div><span class="font-medium text-gray-700">Average Distance:</span><div class="text-lg font-semibold text-green-600">95.1</div></div><div><span class="font-medium text-gray-700">Highest Distance:</span><div class="text-lg font-semibold text-blue-600">104</div></div><div><span class="font-medium text-gray-700">Lowest Distance:</span><div class="text-lg font-semibold text-orange-600">79</div></div></div></div></div></div></div><div class="space-y-6"><div class="rounded-lg border bg-card text-card-foreground shadow-sm"><div class="flex flex-col space-y-1.5 p-6"><div class="text-2xl font-semibold leading-none tracking-tight flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mountain h-5 w-5" aria-hidden="true"><path d="m8 3 4 8 5-5 5 15H2L8 3z"></path></svg>Understanding Hillclimbing Optimization</div></div><div class="p-6 pt-0 space-y-6"><div class="text-gray-700"><p class="mb-4"><strong>Hillclimbing</strong> is a local search optimization algorithm that continuously moves towards better solutions by making incremental improvements. Think of it like climbing a hill in foggy weather - you can only see your immediate surroundings, so you always take the step that goes uphill.</p></div><div class="grid grid-cols-1 md:grid-cols-2 gap-6"><div class="space-y-4"><h3 class="text-lg font-semibold text-gray-900 flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up h-4 w-4" aria-hidden="true"><path d="m5 12 7-7 7 7"></path><path d="M12 19V5"></path></svg>Algorithm Steps</h3><div class="space-y-3"><div class="flex items-start gap-3 p-3 bg-blue-50 rounded-lg"><div class="rounded-full border text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent hover:bg-primary/80 bg-blue-500 text-white min-w-[24px] h-6 flex items-center justify-center p-0">1</div><div class="text-sm"><strong>Initialize:</strong> Start with a random solution (10 diverse words)</div></div><div class="flex items-start gap-3 p-3 bg-blue-50 rounded-lg"><div class="rounded-full border text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent hover:bg-primary/80 bg-blue-500 text-white min-w-[24px] h-6 flex items-center justify-center p-0">2</div><div class="text-sm"><strong>Evaluate:</strong> Calculate semantic distances between all word pairs</div></div><div class="flex items-start gap-3 p-3 bg-blue-50 rounded-lg"><div class="rounded-full border text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent hover:bg-primary/80 bg-blue-500 text-white min-w-[24px] h-6 flex items-center justify-center p-0">3</div><div class="text-sm"><strong>Find weakness:</strong> Identify the word pair with smallest distance</div></div><div class="flex items-start gap-3 p-3 bg-blue-50 rounded-lg"><div class="rounded-full border text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent hover:bg-primary/80 bg-blue-500 text-white min-w-[24px] h-6 flex items-center justify-center p-0">4</div><div class="text-sm"><strong>Improve:</strong> Replace one word with a more distant alternative</div></div><div class="flex items-start gap-3 p-3 bg-blue-50 rounded-lg"><div class="rounded-full border text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent hover:bg-primary/80 bg-blue-500 text-white min-w-[24px] h-6 flex items-center justify-center p-0">5</div><div class="text-sm"><strong>Repeat:</strong> Continue until no improvement is possible</div></div></div></div><div class="space-y-4"><h3 class="text-lg font-semibold text-gray-900 flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-target h-4 w-4" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="6"></circle><circle cx="12" cy="12" r="2"></circle></svg>Application to DAT</h3><div class="space-y-3"><div class="p-3 bg-green-50 border-l-4 border-green-400"><h4 class="font-medium text-green-800 mb-1">Objective Function</h4><p class="text-sm text-green-700">Maximize the sum of semantic distances between all word pairs</p></div><div class="p-3 bg-purple-50 border-l-4 border-purple-400"><h4 class="font-medium text-purple-800 mb-1">Neighbor Generation</h4><p class="text-sm text-purple-700">Replace one word at a time with alternatives from vocabulary</p></div><div class="p-3 bg-orange-50 border-l-4 border-orange-400"><h4 class="font-medium text-orange-800 mb-1">Local Optimum</h4><p class="text-sm text-orange-700">Stop when no single word replacement improves the score</p></div></div></div></div></div></div><div class="rounded-lg border bg-card text-card-foreground shadow-sm"><div class="flex flex-col space-y-1.5 p-6"><div class="text-2xl font-semibold leading-none tracking-tight flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lightbulb h-5 w-5" aria-hidden="true"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"></path><path d="M9 18h6"></path><path d="M10 22h4"></path></svg>Strategy Insights</div></div><div class="p-6 pt-0"><div class="grid grid-cols-1 md:grid-cols-2 gap-6"><div><h4 class="font-medium text-gray-900 mb-3">Why Hillclimbing Works Here</h4><ul class="space-y-2 text-sm text-gray-700"><li class="flex items-start gap-2"><div class="w-1.5 h-1.5 bg-green-500 rounded-full mt-2 flex-shrink-0"></div><span><strong>Greedy improvement:</strong> Each word replacement immediately improves the score</span></li><li class="flex items-start gap-2"><div class="w-1.5 h-1.5 bg-green-500 rounded-full mt-2 flex-shrink-0"></div><span><strong>Fast convergence:</strong> Reaches a good solution quickly</span></li><li class="flex items-start gap-2"><div class="w-1.5 h-1.5 bg-green-500 rounded-full mt-2 flex-shrink-0"></div><span><strong>Intuitive process:</strong> Mimics how humans naturally optimize</span></li></ul></div><div><h4 class="font-medium text-gray-900 mb-3">Potential Limitations</h4><ul class="space-y-2 text-sm text-gray-700"><li class="flex items-start gap-2"><div class="w-1.5 h-1.5 bg-red-500 rounded-full mt-2 flex-shrink-0"></div><span><strong>Local optima:</strong> May get stuck in suboptimal solutions</span></li><li class="flex items-start gap-2"><div class="w-1.5 h-1.5 bg-red-500 rounded-full mt-2 flex-shrink-0"></div><span><strong>Initial dependency:</strong> Result depends on starting words</span></li><li class="flex items-start gap-2"><div class="w-1.5 h-1.5 bg-red-500 rounded-full mt-2 flex-shrink-0"></div><span><strong>Single-word changes:</strong> Cannot make coordinated multi-word swaps</span></li></ul></div></div><div class="mt-6 p-4 bg-gradient-to-r from-blue-50 to-purple-50 rounded-lg border border-blue-200"><h4 class="font-semibold text-gray-900 mb-2 flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rotate-ccw h-4 w-4" aria-hidden="true"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path></svg>My Implementation Result</h4><p class="text-sm text-gray-700 mb-2">Despite these theoretical limitations, the hillclimbing approach was highly effective for the DAT creativity game, achieving a score of <strong>95.08</strong> and ranking in the <strong>99.98th percentile</strong>.</p><p class="text-sm text-gray-600">This success suggests that the semantic distance landscape for this problem has favorable properties for local search, with relatively few problematic local optima.</p></div></div></div></div><div class="rounded-lg border bg-card text-card-foreground shadow-sm mb-8"><div class="flex flex-col space-y-1.5 p-6"><div class="text-2xl font-semibold leading-none tracking-tight">What is the DAT Creativity Game?</div><div class="text-sm text-muted-foreground">Understanding the Divergent Association Task</div></div><div class="p-6 pt-0 space-y-4"><p class="text-gray-700">The Divergent Association Task (DAT) is a creativity assessment that measures your ability to think of diverse, unrelated concepts. Players must generate 10 words that are as semantically distant from each other as possible.</p><p class="text-gray-700">The challenge lies in finding words that share minimal conceptual overlap, requiring creative thinking and broad knowledge across different domains.</p></div></div></div></div></div><script src="/_next/static/chunks/webpack-8f7c4246348aad30.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/_next/static/media/e4af272ccee01ff0-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n2:HL[\"/_next/static/css/010afec7547c6d1a.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"3:I[5751,[],\"\"]\n5:I[7021,[\"506\",\"static/chunks/506-f293b903a260cb45.js\",\"931\",\"static/chunks/app/page-24a4cfd26a3ffdcb.js\"],\"StatsDashboard\"]\n6:I[2377,[\"506\",\"static/chunks/506-f293b903a260cb45.js\",\"931\",\"static/chunks/app/page-24a4cfd26a3ffdcb.js\"],\"ProgressTimeline\"]\n7:I[8698,[\"506\",\"static/chunks/506-f293b903a260cb45.js\",\"931\",\"static/chunks/app/page-24a4cfd26a3ffdcb.js\"],\"WordEvolutionTracker\"]\n8:I[8577,[\"506\",\"static/chunks/506-f293b903a260cb45.js\",\"931\",\"static/chunks/app/page-24a4cfd26a3ffdcb.js\"],\"ScoreMatrixVisualization\"]\n9:I[4996,[\"506\",\"static/chunks/506-f293b903a260cb45.js\",\"931\",\"static/chunks/app/page-24a4cfd26a3ffdcb.js\"],\"HillclimbingExplanation\"]\na:I[9275,[],\"\"]\nb:I[1343,[],\"\"]\nd:I[6130,[],\"\"]\ne:[]\n"])</script><script>self.__next_f.push([1,"0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/010afec7547c6d1a.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L3\",null,{\"buildId\":\"0QpfhtDA6HMYOb_8z8_NB\",\"assetPrefix\":\"\",\"initialCanonicalUrl\":\"/\",\"initialTree\":[\"\",{\"children\":[\"__PAGE__\",{}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[\"__PAGE__\",{},[[\"$L4\",[\"$\",\"div\",null,{\"className\":\"min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100\",\"children\":[\"$\",\"div\",null,{\"className\":\"container mx-auto px-4 py-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"text-center mb-12\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"text-4xl font-bold text-gray-900 mb-4\",\"children\":\"DAT Creativity Game Progress\"}],[\"$\",\"p\",null,{\"className\":\"text-xl text-gray-600 max-w-2xl mx-auto\",\"children\":\"An interactive visualization of my journey through the Divergent Association Task (DAT) creativity game, showcasing the hillclimbing optimization technique.\"}]]}],[\"$\",\"div\",null,{\"className\":\"space-y-8\",\"children\":[[\"$\",\"$L5\",null,{}],[\"$\",\"$L6\",null,{}],[\"$\",\"$L7\",null,{}],[\"$\",\"$L8\",null,{}],[\"$\",\"$L9\",null,{}],[\"$\",\"div\",null,{\"className\":\"rounded-lg border bg-card text-card-foreground shadow-sm mb-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-col space-y-1.5 p-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"text-2xl font-semibold leading-none tracking-tight\",\"children\":\"What is the DAT Creativity Game?\"}],[\"$\",\"div\",null,{\"className\":\"text-sm text-muted-foreground\",\"children\":\"Understanding the Divergent Association Task\"}]]}],[\"$\",\"div\",null,{\"className\":\"p-6 pt-0 space-y-4\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-gray-700\",\"children\":\"The Divergent Association Task (DAT) is a creativity assessment that measures your ability to think of diverse, unrelated concepts. Players must generate 10 words that are as semantically distant from each other as possible.\"}],[\"$\",\"p\",null,{\"className\":\"text-gray-700\",\"children\":\"The challenge lies in finding words that share minimal conceptual overlap, requiring creative thinking and broad knowledge across different domains.\"}]]}]]}]]}]]}]}]],null],null]},[[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"__className_e8ce0c\",\"children\":[\"$\",\"$La\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lb\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]}],null],null],\"couldBeIntercepted\":false,\"initialHead\":[null,\"$Lc\"],\"globalErrorComponent\":\"$d\",\"missingSlots\":\"$We\"}]]\n"])</script><script>self.__next_f.push([1,"c:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"DAT Creativity Game Progress\"}],[\"$\",\"meta\",\"3\",{\"name\":\"description\",\"content\":\"Interactive visualization of my progress in the DAT creativity game using hillclimbing optimization\"}],[\"$\",\"meta\",\"4\",{\"name\":\"next-size-adjust\"}]]\n4:null\n"])</script></body></html> |