Spaces:
Running
Running
File size: 110,081 Bytes
b9aa460 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 | <!DOCTYPE html><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> |