   600→        </div>
   601→    </header>
   602→
   603→    <!-- 3D Simulation Area -->
   604→    <div id="canvas-container">
   605→        <div class="grid-pattern"></div>
   606→
   607→        <!-- Info Panel Left -->
   608→        <div class="absolute top-14 left-4 z-10 max-w-xs">
   609→            <div id="info-macro" class="glass-panel p-4 rounded-2xl transition-all">
   610→                <div class="flex items-center gap-3 mb-2">
   611→                    <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center">
   612→                        <svg class="w-5 h-5 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/></svg>
   613→                    </div>
   614→                    <div>
   615→                        <h1 class="text-lg font-bold text-white tracking-tight font-display">Reaksi Kimia</h1>
   616→                        <div class="status-indicator mt-1"></div>
   617→                    </div>
   618→                </div>
   619→                <p class="text-xs text-slate-400 leading-relaxed font-mono">
   620→                    <span class="eq-element" data-el="Na">Na</span>₂<span class="eq-element" data-el="S">S</span>₂<span class="eq-element" data-el="O">O</span>₃ + 2<span class="eq-element" data-el="H">H</span><span class="eq-element" data-el="Cl">Cl</span> → <span class="eq-element" data-el="S">S</span>↓ + 2<span class="eq-element" data-el="Na">Na</span><span class="eq-element" data-el="Cl">Cl</span> + <span class="eq-element" data-el="S">S</span><span class="eq-element" data-el="O">O</span>₂ + <span class="eq-element" data-el="H">H</span>₂<span class="eq-element" data-el="O">O</span>
   621→                </p>
   622→            </div>
   623→
   624→            <div id="info-micro" class="glass-panel p-4 rounded-2xl transition-all panel-hidden mt-3">
   625→                <h3 class="text-sm font-bold text-cyan-400 mb-3 uppercase tracking-wider font-display">Legenda Partikel</h3>
   626→                <div class="space-y-2.5 text-xs">
   627→                    <div class="flex items-center gap-3">
   628→                        <div class="w-5 h-5 rounded-full shadow-lg" style="background: #00f5ff; box-shadow: 0 0 15px #00f5ff, 0 0 25px rgba(0,245,255,0.5);"></div>
   629→                        <div>
   630→                            <div class="text-slate-200 font-semibold">Reaktan A</div>
   631→                            <div class="text-slate-500 text-[10px]">Na₂S₂O₃ (Tiosulfat)</div>
   632→                        </div>
   633→                    </div>
   634→                    <div class="flex items-center gap-3">
   635→                        <div class="w-5 h-5 rounded-full shadow-lg" style="background: #ff2d92; box-shadow: 0 0 15px #ff2d92, 0 0 25px rgba(255,45,146,0.5);"></div>
   636→                        <div>
   637→                            <div class="text-slate-200 font-semibold">Reaktan B</div>
   638→                            <div class="text-slate-500 text-[10px]">HCl (Asam Klorida)</div>
   639→                        </div>
   640→                    </div>
   641→                    <div class="flex items-center gap-3">
   642→                        <div class="w-5 h-5 rounded-full shadow-lg" style="background: #ffea00; box-shadow: 0 0 15px #ffea00, 0 0 25px rgba(255,234,0,0.5);"></div>
   643→                        <div>
   644→                            <div class="text-slate-200 font-semibold">Produk (P)</div>
   645→                            <div class="text-slate-500 text-[10px]">S (Belerang) + lainnya</div>
   646→                        </div>
   647→                    </div>
   648→                    <div class="pt-2 border-t border-slate-700/50">
   649→                        <div class="flex items-center gap-2 text-[10px] text-slate-400">
   650→                            <span class="w-2 h-2 rounded-full bg-cyan-400"></span>
   651→                            <span class="w-2 h-2 rounded-full bg-rose-400"></span>
   652→                            <span>→ Tumbukan A+B berpotensi reaksi</span>
   653→                        </div>
   654→                    </div>
   655→                </div>
   656→            </div>
   657→
   658→            <div id="info-teori" class="glass-panel p-4 rounded-2xl transition-all panel-hidden mt-3">
   659→                <h3 class="text-sm font-bold text-purple-400 mb-2 uppercase tracking-wider font-display">Teori Tumbukan</h3>
   660→                <p class="text-xs text-slate-400 leading-relaxed">
   661→                    Laju reaksi bergantung pada <strong class="text-purple-300">frekuensi tumbukan efektif</strong> antar partikel reaktan. Konsentrasi memengaruhi jumlah partikel per satuan volume.
   662→                </p>
   663→            </div>
   664→
   665→            <div id="info-kps" class="glass-panel p-4 rounded-2xl transition-all panel-hidden mt-3">
   666→                <h3 class="text-sm font-bold text-amber-400 mb-2 uppercase tracking-wider font-display">Keterampilan Proses Sains</h3>
   667→                <p class="text-xs text-slate-400 leading-relaxed">
   668→                    Latih kemampuan ilmiah Anda: mengamati, mengklasifikasi, memprediksi, merumuskan hipotesis, melakukan eksperimen, menginterpretasi data, dan menyimpulkan.
   669→                </p>
   670→            </div>
   671→
   672→            <div id="info-quiz" class="glass-panel p-4 rounded-2xl transition-all panel-hidden mt-3">
   673→                <h3 class="text-sm font-bold text-rose-400 mb-2 uppercase tracking-wider font-display">Asesmen Pemahaman</h3>
   674→                <p class="text-xs text-slate-400 leading-relaxed">
   675→                    Uji pemahaman Anda dengan 10 soal pilihan ganda. Setiap jawaban dilengkapi penjelasan untuk pembelajaran.
   676→                </p>
   677→            </div>
   678→        </div>
   679→
   680→        <!-- Status Panel Right -->
   681→        <div class="absolute top-14 right-4 z-10">
   682→            <div class="glass-panel p-4 rounded-2xl w-56">
   683→                <div class="flex justify-between items-start mb-3">
   684→                    <div>
   685→                        <span class="text-[10px] uppercase text-slate-500 font-semibold tracking-wider">Konsentrasi</span>
   686→                        <div class="conc-display font-mono" id="conc-display">1.0</div>
   687→                    </div>
   688→                    <span class="text-xs text-slate-400 mt-2">M</span>
   689→                </div>
   690→
   691→                <div class="w-full bg-slate-800 rounded-full h-1.5 mb-4 overflow-hidden">
   692→                    <div id="conc-bar" class="h-full rounded-full transition-all duration-700 ease-out" style="width: 33%; background: linear-gradient(90deg, #a855f7 0%, #ec4899 100%);"></div>
   693→                </div>
   694→
   695→                <div id="status-macro" class="border-t border-slate-700/50 pt-3">
   696→                    <div class="flex justify-between items-center mb-2">
   697→                        <span class="text-[10px] uppercase text-slate-500 font-semibold">Stopwatch</span>
   698→                        <div class="text-xl font-bold font-mono text-emerald-400" id="timer">00:00.00</div>
   699→                    </div>
   700→                    <div class="space-y-2">
   701→                        <div id="check-color" class="flex items-center gap-2 text-xs text-slate-400 opacity-50 transition-opacity">
   702→                            <div class="check-visual"><svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg></div>
   703→                            <span>Larutan Keruh</span>
   704→                        </div>
   705→                        <div id="check-x" class="flex items-center gap-2 text-xs text-slate-400 opacity-50 transition-opacity">
   706→                            <div class="check-visual"><svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg></div>
   707→                            <span>Tanda X Hilang</span>
   708→                        </div>
   709→                    </div>
   710→                    <div class="mt-3 pt-2 border-t border-slate-700/30">
   711→                        <div class="flex justify-between items-center text-[10px]">
   712→                            <span class="text-slate-500 uppercase">Laju (1/t)</span>
   713→                            <span id="rate-display" class="font-mono text-cyan-400 font-bold">— s⁻¹</span>
   714→                        </div>
   715→                    </div>
   716→                </div>
   717→
   718→                <div id="status-micro" class="border-t border-slate-700/50 pt-3 panel-hidden">
   719→                    <div class="grid grid-cols-2 gap-2 text-center">
   720→                        <div class="bg-slate-800/50 rounded-lg p-2">
   721→                            <div class="text-lg font-bold text-cyan-400 font-mono" id="collision-count">0</div>
   722→                            <div class="text-[9px] text-slate-500 uppercase">Total Tumbukan</div>
   723→                        </div>
   724→                        <div class="bg-slate-800/50 rounded-lg p-2">
   725→                            <div class="text-lg font-bold text-yellow-400 font-mono" id="reaction-count">0</div>
   726→                            <div class="text-[9px] text-slate-500 uppercase">Reaksi Sukses</div>
   727→                        </div>
   728→                    </div>
   729→                    <div class="mt-2 text-center text-[10px] text-slate-500 bg-slate-800/30 rounded p-1">
   730→                        Efektivitas: <span id="effectiveness" class="text-emerald-400 font-mono font-bold">0%</span>
   731→                    </div>
   732→                    <div class="mt-2 pt-2 border-t border-slate-700/30">
   733→                        <div class="flex justify-between items-center text-[10px] mb-1">
   734→                            <span class="text-slate-500">Energi Aktivasi</span>
   735→                            <span id="ea-display" class="font-mono text-purple-400 font-bold">50</span>
   736→                        </div>
   737→                        <div class="energy-bar-container">
   738→                            <div id="ea-bar" class="energy-bar-fill" style="width: 50%;"></div>
   739→                        </div>
   740→                    </div>
   741→                </div>
   742→
   743→                <div id="status-teori" class="border-t border-slate-700/50 pt-3 panel-hidden">
   744→                    <div class="text-xs text-slate-400 text-center">
   745→                        <p>Pelajari konsep lengkap di panel bawah.</p>
   746→                        <p class="mt-2 text-purple-400 font-semibold">Konsentrasi ⇄ Frekuensi Tumbukan</p>
   747→                    </div>
   748→                </div>
   749→
   750→                <div id="status-kps" class="border-t border-slate-700/50 pt-3 panel-hidden">
   751→                    <div class="text-xs text-slate-400 text-center">
   752→                        <p>Ikuti langkah-langkah KPS di panel bawah.</p>
   753→                        <p class="mt-2 text-amber-400 font-semibold">Proses Ilmiah</p>
   754→                    </div>
   755→                </div>
   756→
   757→                <div id="status-quiz" class="border-t border-slate-700/50 pt-3 panel-hidden">
   758→                    <div class="text-xs text-slate-400 text-center">
   759→                        <p>Progress Kuis</p>
   760→                        <div class="mt-2 flex items-center justify-center gap-2">
   761→                            <div class="text-2xl font-bold text-rose-400 font-mono"><span id="quiz-answered">0</span>/<span id="quiz-total">10</span></div>
   762→                        </div>
   763→                        <div class="mt-2 w-full bg-slate-800 rounded-full h-1.5 overflow-hidden">
   764→                            <div id="quiz-progress-bar" class="h-full bg-gradient-to-r from-rose-500 to-pink-500 transition-all duration-500" style="width: 0%;"></div>
   765→                        </div>
   766→                    </div>
   767→                </div>
   768→            </div>
   769→        </div>
   770→
   771→        <!-- Canvas hint -->
   772→        <div class="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 text-[10px] text-slate-500 flex items-center gap-3 bg-slate-900/50 px-3 py-1.5 rounded-full backdrop-blur-sm">
   773→            <span class="flex items-center gap-1">
   774→                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"/></svg>
   775→                Seret memutar • Scroll zoom
   776→            </span>
   777→            <span class="text-slate-600">|</span>
   778→            <span class="hidden sm:flex items-center gap-1">
   779→                <kbd class="px-1 bg-slate-800 rounded text-[8px]">Space</kbd> Mulai/Stop
   780→                <kbd class="px-1 bg-slate-800 rounded text-[8px]">P</kbd> Jeda
   781→                <kbd class="px-1 bg-slate-800 rounded text-[8px]">1-5</kbd> Tab
   782→                <kbd class="px-1 bg-slate-800 rounded text-[8px]">H</kbd> Riwayat
   783→                <kbd class="px-1 bg-slate-800 rounded text-[8px]">T</kbd> Tur
   784→            </span>
   785→        </div>
   786→
   787→        <!-- 3D Toolbar (top-center) -->
   788→        <div class="absolute top-14 left-1/2 -translate-x-1/2 z-10 flex items-center gap-1 bg-slate-900/60 backdrop-blur-md rounded-full p-1 border border-slate-700/50">
   789→            <button id="btn-autorotate" class="btn-secondary p-1.5 rounded-full text-[10px] flex items-center gap-1" title="Auto-rotate">
   790→                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
   791→                <span class="hidden sm:inline">Rotate</span>
   792→            </button>
   793→            <button id="btn-screenshot" class="btn-secondary p-1.5 rounded-full text-[10px] flex items-center gap-1" title="Screenshot">
   794→                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
   795→                <span class="hidden sm:inline">Foto</span>
   796→            </button>
   797→            <button id="btn-fullscreen" class="btn-secondary p-1.5 rounded-full text-[10px] flex items-center gap-1" title="Fullscreen">
   798→                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"/></svg>
   799→                <span class="hidden sm:inline">Layar</span>
   800→            </button>
   801→            <div class="w-px h-5 bg-slate-700"></div>
   802→            <button id="btn-comparison" class="btn-secondary p-1.5 rounded-full text-[10px] flex items-center gap-1" title="Mode Perbandingan">
   803→                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
   804→                <span class="hidden sm:inline">Banding</span>
   805→            </button>
   806→            <button id="btn-history" class="btn-secondary p-1.5 rounded-full text-[10px] flex items-center gap-1" title="Riwayat Percobaan">
   807→                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
   808→                <span class="hidden sm:inline">Riwayat</span>
   809→            </button>
   810→            <button id="btn-tour" class="btn-secondary p-1.5 rounded-full text-[10px] flex items-center gap-1" title="Tur Interaktif">
   811→                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>
   812→                <span class="hidden sm:inline">Tur</span>
   813→            </button>
   814→            <div class="w-px h-5 bg-slate-700"></div>
   815→            <button id="btn-sound" class="btn-secondary p-1.5 rounded-full text-[10px] flex items-center gap-1" title="Suara">
   816→                <svg id="sound-on-icon" class="w-3.5 h-3.5 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"/></svg>
   817→                <svg id="sound-off-icon" class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15zM17 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2"/></svg>
   818→                <span class="hidden sm:inline">Suara</span>
   819→            </button>
   820→            <button id="btn-theme" class="btn-secondary p-1.5 rounded-full text-[10px] flex items-center gap-1" title="Tema">
   821→                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/></svg>
   822→                <span class="hidden sm:inline">Tema</span>
   823→            </button>
   824→            <div class="w-px h-5 bg-slate-700"></div>
   825→            <button id="btn-pdf" class="btn-primary p-1.5 rounded-full text-[10px] flex items-center gap-1" title="Export Laporan PDF">
   826→                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/></svg>
   827→                <span class="hidden sm:inline">PDF</span>
   828→            </button>
   829→        </div>
   830→
   831→        <!-- Camera presets (visible only in macro/micro) -->
   832→        <div id="cam-presets-macro" class="absolute top-32 right-4 z-10 hidden flex-col gap-1">
   833→            <div class="text-[9px] uppercase text-slate-500 font-bold mb-1 text-center">Kamera</div>
   834→            <button class="cam-preset-macro btn-secondary px-2 py-1 rounded text-[10px]" data-preset="front">Depan</button>
   835→            <button class="cam-preset-macro btn-secondary px-2 py-1 rounded text-[10px]" data-preset="side">Samping</button>
   836→            <button class="cam-preset-macro btn-secondary px-2 py-1 rounded text-[10px]" data-preset="top">Atas</button>
   837→            <button class="cam-preset-macro btn-secondary px-2 py-1 rounded text-[10px]" data-preset="close">Dekat</button>
   838→        </div>
   839→        <div id="cam-presets-micro" class="absolute top-32 right-4 z-10 hidden flex-col gap-1">
   840→            <div class="text-[9px] uppercase text-slate-500 font-bold mb-1 text-center">Kamera</div>
   841→            <button class="cam-preset-micro btn-secondary px-2 py-1 rounded text-[10px]" data-preset="front">Depan</button>
   842→            <button class="cam-preset-micro btn-secondary px-2 py-1 rounded text-[10px]" data-preset="side">Samping</button>
   843→            <button class="cam-preset-micro btn-secondary px-2 py-1 rounded text-[10px]" data-preset="top">Atas</button>
   844→            <button class="cam-preset-micro btn-secondary px-2 py-1 rounded text-[10px]" data-preset="iso">Isometri</button>
   845→        </div>
   846→
   847→        <!-- Macro extra tools (bottom-right of canvas) -->
   848→        <div id="macro-extra-tools" class="absolute bottom-4 right-4 z-10 hidden flex-col gap-1">
   849→            <button id="btn-dropper" class="btn-secondary px-2 py-1 rounded text-[10px] flex items-center gap-1">
   850→                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2"/></svg>
   851→                Pipet
   852→            </button>
   853→            <button id="btn-stirrer" class="btn-secondary px-2 py-1 rounded text-[10px] flex items-center gap-1">
   854→                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581"/></svg>
   855→                Pengaduk
   856→            </button>
   857→        </div>
   858→
   859→        <!-- Micro catalyst button (bottom-right of canvas) -->
   860→        <div id="micro-extra-tools" class="absolute bottom-4 right-4 z-10 hidden flex-col gap-1">
   861→            <button id="btn-catalyst" class="btn-secondary px-2 py-1 rounded text-[10px] flex items-center gap-1">
   862→                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
   863→                Katalis: OFF
   864→            </button>
   865→        </div>
   866→    </div>
   867→
   868→    <!-- Control Panel Bottom -->
   869→    <div class="flex-1 p-4 bg-gradient-to-b from-[#112019] to-[#0a1410] overflow-y-auto">
   870→        <div class="max-w-7xl mx-auto">
   871→
   872→            <!-- ============== MACRO PANEL ============== -->
   873→            <div id="panel-macro" class="space-y-4 tab-content">
   874→                
   875→                <!-- Design Experiment Section -->
   876→                <div>
   877→                    <button id="toggle-design-btn" class="w-full glass-panel rounded-xl p-3 flex justify-between items-center hover:border-cyan-500 transition group">
   878→                        <div class="flex items-center gap-3">
   879→                            <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-purple-500 to-indigo-500 flex items-center justify-center text-white font-bold group-hover:scale-110 transition">R</div>
   880→                            <div class="text-left">
   881→                                <h3 class="text-sm font-bold text-white font-display">Rancang Eksperimen</h3>
   882→                                <p class="text-[10px] text-slate-400">Tentukan tujuan, variabel, dan pilih peralatan yang sesuai</p>
   883→                            </div>
   884→                        </div>
   885→                        <svg class="w-5 h-5 text-slate-400 transition-transform duration-300" id="design-chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
   886→                    </button>
   887→                    
   888→                    <div id="design-panel" class="glass-panel rounded-xl p-4 mt-2 panel-hidden">
   889→                        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
   890→                            <div>
   891→                                <h4 class="text-xs font-bold text-purple-400 uppercase mb-3 font-display">Tujuan (Variabel Bebas)</h4>
   892→                                <div class="space-y-2">
   893→                                    <label class="custom-checkbox text-xs text-slate-300 p-2 rounded-lg bg-slate-800/50 hover:bg-slate-700/50 transition">
   894→                                        <input type="radio" name="objective" value="temp">
   895→                                        <span class="checkmark"><svg viewBox="0 0 24 24"><path d="M5 13l4 4L19 7"/></svg></span>
   896→                                        Pengaruh Suhu
   897→                                    </label>
   898→                                    <label class="custom-checkbox text-xs text-slate-300 p-2 rounded-lg bg-slate-800/50 hover:bg-slate-700/50 transition">
   899→                                        <input type="radio" name="objective" value="conc" checked>
   900→                                        <span class="checkmark"><svg viewBox="0 0 24 24"><path d="M5 13l4 4L19 7"/></svg></span>
   901→                                        Pengaruh Konsentrasi
   902→                                    </label>
   903→                                </div>
   904→                            </div>
   905→
   906→                            <div>
   907→                                <h4 class="text-xs font-bold text-cyan-400 uppercase mb-3 font-display">Pilih Alat</h4>
   908→                                <div class="grid grid-cols-2 gap-2 text-xs text-slate-300">
   909→                                    <label class="custom-checkbox"><input type="checkbox" id="tool-flask" checked disabled> <span class="checkmark"><svg viewBox="0 0 24 24"><path d="M5 13l4 4L19 7"/></svg></span> Erlenmeyer</label>
   910→                                    <label class="custom-checkbox"><input type="checkbox" id="tool-stopwatch" checked disabled> <span class="checkmark"><svg viewBox="0 0 24 24"><path d="M5 13l4 4L19 7"/></svg></span> Stopwatch</label>
   911→                                    <label class="custom-checkbox"><input type="checkbox" id="tool-measure" checked> <span class="checkmark"><svg viewBox="0 0 24 24"><path d="M5 13l4 4L19 7"/></svg></span> Gelas Ukur</label>
   912→                                    <label class="custom-checkbox"><input type="checkbox" id="tool-thermo"> <span class="checkmark"><svg viewBox="0 0 24 24"><path d="M5 13l4 4L19 7"/></svg></span> Termometer</label>
   913→                                </div>
   914→                            </div>
   915→
   916→                            <div>
   917→                                <h4 class="text-xs font-bold text-amber-400 uppercase mb-3 font-display">Bahan Kimia</h4>
   918→                                <div class="space-y-2 text-xs text-slate-300 mb-4">
   919→                                    <div class="bg-slate-800/50 p-2 rounded-lg flex items-center gap-2"><span class="w-2 h-2 rounded-full bg-yellow-400"></span>Na₂S₂O₃ 0,1–2,0 M</div>
   920→                                    <div class="bg-slate-800/50 p-2 rounded-lg flex items-center gap-2"><span class="w-2 h-2 rounded-full bg-rose-400"></span>HCl 1 M (tetap)</div>
   921→                                    <div class="bg-slate-800/50 p-2 rounded-lg flex items-center gap-2"><span class="w-2 h-2 rounded-full bg-blue-400"></span>Akuades (pengencer)</div>
   922→                                </div>
   923→                            </div>
   924→
   925→                            <div>
   926→                                <h4 class="text-xs font-bold text-emerald-400 uppercase mb-3 font-display">Variabel Kontrol</h4>
   927→                                <div class="space-y-1 text-[11px] text-slate-400">
   928→                                    <div>• Volume larutan (50 mL)</div>
   929→                                    <div>• Suhu (25°C)</div>
   930→                                    <div>• Konsentrasi HCl (1 M)</div>
   931→                                    <div>• Pengadukan (konstan)</div>
   932→                                </div>
   933→                                <button id="btn-validate-design" class="w-full btn-primary py-2 rounded-lg text-xs uppercase font-bold mt-3">Terapkan Rancangan</button>
   934→                            </div>
   935→                        </div>
   936→                        <div id="design-feedback" class="mt-4 text-xs p-3 rounded-lg hidden"></div>
   937→                    </div>
   938→                </div>
   939→
   940→                <!-- Content Grid -->
   941→                <div class="grid grid-cols-1 lg:grid-cols-4 gap-4">
   942→                    
   943→                    <div class="space-y-3">
   944→                        <div class="glass-panel rounded-xl p-4">
   945→                            <h3 class="text-xs font-bold text-emerald-400 uppercase tracking-wider mb-3 font-display">Langkah Kerja</h3>
   946→                            <ol class="text-xs text-slate-400 space-y-2.5 list-decimal list-inside">
   947→                                <li>Pastikan tujuan: <strong class="text-purple-400">Pengaruh Konsentrasi</strong>.</li>
   948→                                <li>Atur konsentrasi Na₂S₂O₃ dengan slider.</li>
   949→                                <li>Campurkan HCl ke dalam labu.</li>
   950→                                <li>Tekan <strong class="text-cyan-400">Mulai Reaksi</strong> & mulai stopwatch.</li>
   951→                                <li>Amati perubahan warna di labu 3D.</li>
   952→                                <li>Tekan <strong class="text-rose-400">STOP</strong> saat tanda 'X' tak terlihat.</li>
   953→                                <li>Catat data → ulangi dengan konsentrasi berbeda.</li>
   954→                                <li>Analisis grafik & tentukan orde reaksi.</li>
   955→                            </ol>
   956→                        </div>
   957→
   958→                        <div class="glass-panel rounded-xl p-4">
   959→                            <h3 class="text-xs font-bold text-cyan-400 uppercase tracking-wider mb-2 font-display">Tips Pengamatan</h3>
   960→                            <p class="text-[11px] text-slate-400 leading-relaxed">
   961→                                Reaksi menghasilkan endapan belerang (S) yang membuat larutan keruh. Saat keruh cukup pekat, tanda "X" di bawah labu tidak terlihat — itulah indikator akhir reaksi.
   962→                            </p>
   963→                        </div>
   964→                    </div>
   965→
   966→                    <div class="space-y-3">
   967→                        <div class="glass-panel rounded-xl p-4">
   968→                            <h3 class="text-xs font-bold text-amber-400 uppercase tracking-wider mb-3 font-display">Kontrol Eksperimen</h3>
   969→                            <div class="space-y-4">
   970→                                <div>
   971→                                    <div class="flex justify-between text-xs text-slate-400 mb-1">
   972→                                        <span>Suhu (Tetap)</span>
   973→                                        <span id="temp-val-label" class="font-mono text-slate-500">25°C</span>
   974→                                    </div>
   975→                                    <input type="range" id="temp-slider-macro" min="25" max="85" value="25" class="w-full cursor-pointer range-temp" disabled>
   976→                                </div>
   977→                                
   978→                                <div>
   979→                                    <div class="flex justify-between text-xs text-slate-400 mb-1">
   980→                                        <span>Konsentrasi Na₂S₂O₃</span>
   981→                                        <span id="conc-val-label" class="font-mono text-purple-400 font-bold">1.0 M</span>
   982→                                    </div>
   983→                                    <input type="range" id="conc-slider-macro" min="0.5" max="2.0" step="0.1" value="1.0" class="w-full cursor-pointer range-ea">
   984→                                    <div class="flex justify-between text-[9px] text-slate-600 mt-1">
   985→                                        <span>0.5 M</span><span>1.0 M</span><span>1.5 M</span><span>2.0 M</span>
   986→                                    </div>
   987→                                </div>
   988→
   989→                                <div class="flex gap-2">
   990→                                    <button id="btn-start-macro" class="flex-1 btn-primary py-3 rounded-xl text-xs uppercase tracking-widest font-bold">Mulai Reaksi</button>
   991→                                    <button id="btn-pause-macro" class="btn-warning px-3 rounded-xl text-xs font-semibold hidden" title="Jeda reaksi">
   992→                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
   993→                                    </button>
   994→                                    <button id="btn-reset-macro" class="btn-secondary px-3 rounded-xl text-xs font-semibold" title="Reset percobaan">
   995→                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
   996→                                    </button>
   997→                                </div>
   998→                            </div>
   999→                        </div>

[showing lines 600-999 of 4452; use offset=1000 with limit to continue reading]