     1→<!DOCTYPE html>
     2→<html lang="id">
     3→<head>
     4→    <meta charset="UTF-8">
     5→    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6→    <title>Lab Virtual Kimia: Pengaruh Konsentrasi terhadap Laju Reaksi</title>
     7→    <meta name="description" content="Simulasi interaktif pengaruh konsentrasi terhadap laju reaksi dengan visualisasi 3D, mikroskopis, teori lengkap, KPS, dan asesmen.">
     8→
     9→    <link rel="preconnect" href="https://fonts.googleapis.com">
    10→    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    11→    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;600&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    12→
    13→    <script src="https://cdn.tailwindcss.com"></script>
    14→    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    15→    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    16→    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.8.2/jspdf.plugin.autotable.min.js"></script>
    17→    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
    18→
    19→    <script type="importmap">
    20→        {
    21→            "imports": {
    22→                "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
    23→                "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
    24→            }
    25→        }
    26→    </script>
    27→
    28→    <style>
    29→        :root {
    30→            --bg: #0a1410; --bg-secondary: #112019; --bg-tertiary: #1a2e23;
    31→            --fg: #f1f5f9; --muted: #64748b;
    32→            --accent: #10b981; --accent-glow: #34d399; --accent-secondary: #a855f7;
    33→            --accent-tertiary: #06b6d4; --danger: #ef4444; --warning: #f59e0b;
    34→            --success: #10b981; --info: #3b82f6;
    35→            --card: rgba(26, 46, 35, 0.65); --card-strong: rgba(26, 46, 35, 0.9);
    36→            --border: rgba(16, 185, 129, 0.2); --border-strong: rgba(16, 185, 129, 0.4);
    37→        }
    38→
    39→        * { box-sizing: border-box; margin: 0; padding: 0; }
    40→
    41→        html { scroll-behavior: smooth; }
    42→
    43→        body {
    44→            font-family: 'Plus Jakarta Sans', 'Space Grotesk', sans-serif;
    45→            background: var(--bg);
    46→            color: var(--fg);
    47→            overflow-x: hidden;
    48→            min-height: 100vh;
    49→        }
    50→
    51→        .font-display { font-family: 'Space Grotesk', sans-serif; }
    52→        .font-mono { font-family: 'JetBrains Mono', monospace; }
    53→
    54→        #canvas-container {
    55→            width: 100%; height: 60vh; position: relative;
    56→            background: radial-gradient(ellipse at 50% 30%, #1a2e23 0%, #0a1410 70%);
    57→        }
    58→
    59→        .grid-pattern {
    60→            position: absolute; inset: 0;
    61→            background-image:
    62→                radial-gradient(circle at center, rgba(16, 185, 129, 0.08) 0%, transparent 70%),
    63→                linear-gradient(rgba(16, 185, 129, 0.03) 1px, transparent 1px),
    64→                linear-gradient(90deg, rgba(16, 185, 129, 0.03) 1px, transparent 1px);
    65→            background-size: 100% 100%, 40px 40px, 40px 40px;
    66→            pointer-events: none; z-index: 0;
    67→        }
    68→
    69→        ::-webkit-scrollbar { width: 6px; height: 6px; }
    70→        ::-webkit-scrollbar-track { background: var(--bg-secondary); }
    71→        ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--accent), #059669); border-radius: 10px; }
    72→        ::-webkit-scrollbar-thumb:hover { background: var(--accent-glow); }
    73→
    74→        .glass-panel {
    75→            background: var(--card);
    76→            backdrop-filter: blur(20px) saturate(150%);
    77→            -webkit-backdrop-filter: blur(20px) saturate(150%);
    78→            border: 1px solid var(--border);
    79→            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    80→        }
    81→
    82→        .glass-panel-strong {
    83→            background: var(--card-strong);
    84→            backdrop-filter: blur(24px) saturate(180%);
    85→            -webkit-backdrop-filter: blur(24px) saturate(180%);
    86→            border: 1px solid var(--border-strong);
    87→            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    88→        }
    89→
    90→        .btn-primary {
    91→            background: linear-gradient(135deg, var(--accent) 0%, #059669 100%);
    92→            color: #fff; font-weight: 600;
    93→            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    94→            box-shadow: 0 0 20px rgba(16, 185, 129, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    95→        }
    96→        .btn-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 30px rgba(16, 185, 129, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
    97→        .btn-primary:active:not(:disabled) { transform: translateY(0); }
    98→        .btn-primary:disabled { background: #1e293b; color: #64748b; cursor: not-allowed; box-shadow: none; transform: none; }
    99→
   100→        .btn-danger { background: linear-gradient(135deg, var(--danger) 0%, #b91c1c 100%); box-shadow: 0 0 20px rgba(239, 68, 68, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
   101→        .btn-danger:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 30px rgba(239, 68, 68, 0.55); }
   102→
   103→        .btn-secondary { background: rgba(30, 41, 59, 0.8); border: 1px solid rgba(100, 116, 139, 0.3); color: #cbd5e1; transition: all 0.3s; }
   104→        .btn-secondary:hover { background: rgba(51, 65, 85, 0.9); border-color: var(--accent); color: #fff; }
   105→
   106→        .tab-btn {
   107→            background: rgba(15, 26, 20, 0.6);
   108→            border: 1px solid rgba(16, 185, 129, 0.15);
   109→            transition: all 0.3s;
   110→            color: #94a3b8;
   111→        }
   112→        .tab-btn:hover { color: #cbd5e1; border-color: rgba(16, 185, 129, 0.3); }
   113→        .tab-btn.active {
   114→            background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(6, 182, 212, 0.15));
   115→            border-color: var(--accent); color: var(--accent-glow);
   116→            box-shadow: 0 0 20px rgba(16, 185, 129, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
   117→        }
   118→
   119→        .data-table { border-collapse: separate; border-spacing: 0; }
   120→        .data-table th { background: rgba(10, 26, 20, 0.9); color: var(--accent-glow); font-weight: 600; text-transform: uppercase; font-size: 10px; letter-spacing: 0.05em; }
   121→        .data-table tr:nth-child(even) { background: rgba(16, 185, 129, 0.03); }
   122→        .data-table tr:hover { background: rgba(16, 185, 129, 0.1); }
   123→
   124→        .check-visual { width: 18px; height: 18px; border: 2px solid var(--border); border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: all 0.3s; flex-shrink: 0; }
   125→        .check-visual.checked { background: var(--success); border-color: var(--success); box-shadow: 0 0 10px rgba(16, 185, 129, 0.5); }
   126→        .check-visual svg { opacity: 0; transition: opacity 0.2s; }
   127→        .check-visual.checked svg { opacity: 1; }
   128→
   129→        .panel-hidden { display: none !important; }
   130→
   131→        .custom-checkbox { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
   132→        .custom-checkbox input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
   133→        .checkmark { height: 20px; width: 20px; background-color: #1e293b; border: 2px solid #334155; border-radius: 4px; transition: all 0.2s; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
   134→        .custom-checkbox:hover input ~ .checkmark { border-color: var(--accent); }
   135→        .custom-checkbox input:checked ~ .checkmark { background-color: var(--accent); border-color: var(--accent); }
   136→        .custom-checkbox input:checked ~ .checkmark svg { display: block; }
   137→        .checkmark svg { display: none; width: 12px; height: 12px; color: #0a0e17; stroke: currentColor; stroke-width: 3; fill: none; }
   138→
   139→        .range-ea::-webkit-slider-thumb { background: linear-gradient(135deg, #a855f7 0%, #6366f1 100%); box-shadow: 0 0 12px rgba(168, 85, 247, 0.6); }
   140→        .range-particle::-webkit-slider-thumb { background: linear-gradient(135deg, #10b981 0%, #14b8a6 100%); box-shadow: 0 0 12px rgba(16, 185, 129, 0.6); }
   141→        .range-temp::-webkit-slider-thumb { background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%); box-shadow: 0 0 12px rgba(245, 158, 11, 0.6); }
   142→
   143→        input[type="range"]:disabled { opacity: 0.4; cursor: not-allowed; }
   144→
   145→        .status-indicator { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 2s infinite; box-shadow: 0 0 8px var(--accent); }
   146→        @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.2); } }
   147→
   148→        .conc-display { font-size: 2.5rem; font-weight: 700; background: linear-gradient(135deg, var(--accent-secondary) 0%, #ec4899 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; }
   149→
   150→        input[type="range"] { -webkit-appearance: none; background: transparent; width: 100%; }
   151→        input[type="range"]::-webkit-slider-track { height: 6px; background: linear-gradient(90deg, #1e293b 0%, #334155 100%); border-radius: 3px; }
   152→        input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; background: linear-gradient(135deg, var(--accent-secondary) 0%, #ec4899 100%); border-radius: 50%; cursor: pointer; margin-top: -7px; box-shadow: 0 0 10px rgba(168, 85, 247, 0.5); border: 2px solid rgba(255,255,255,0.2); }
   153→
   154→        .alert-box { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); color: #fca5a5; }
   155→        .success-box { background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.3); color: #6ee7b7; }
   156→
   157→        .theory-card {
   158→            background: rgba(15, 26, 20, 0.6);
   159→            border-left: 4px solid var(--accent);
   160→            transition: all 0.3s;
   161→        }
   162→        .theory-card:hover { background: rgba(15, 26, 20, 0.8); border-left-color: var(--accent-glow); }
   163→        .theory-card h4 { color: var(--accent-glow); }
   164→
   165→        .kps-card {
   166→            background: rgba(15, 26, 20, 0.5);
   167→            border: 1px solid rgba(100, 116, 139, 0.15);
   168→            transition: all 0.3s;
   169→        }
   170→        .kps-card:hover { border-color: rgba(16, 185, 129, 0.3); transform: translateY(-1px); }
   171→
   172→        .kps-card.correct { border-color: rgba(16, 185, 129, 0.5); background: rgba(16, 185, 129, 0.05); }
   173→        .kps-card.incorrect { border-color: rgba(239, 68, 68, 0.5); background: rgba(239, 68, 68, 0.05); }
   174→
   175→        /* Loading Screen */
   176→        #loading-screen {
   177→            position: fixed; inset: 0; z-index: 9999;
   178→            background: var(--bg);
   179→            display: flex; align-items: center; justify-content: center; flex-direction: column;
   180→            transition: opacity 0.6s ease, visibility 0.6s ease;
   181→        }
   182→        #loading-screen.hidden { opacity: 0; visibility: hidden; }
   183→        .loader-flask {
   184→            width: 80px; height: 100px; position: relative; margin-bottom: 24px;
   185→        }
   186→        .loader-flask::before {
   187→            content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
   188→            width: 60px; height: 50px;
   189→            border: 3px solid var(--accent); border-top: none;
   190→            border-radius: 0 0 30px 30px / 0 0 50px 50px;
   191→            background: linear-gradient(180deg, transparent 0%, rgba(16, 185, 129, 0.2) 100%);
   192→        }
   193→        .loader-flask::after {
   194→            content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
   195→            width: 20px; height: 30px;
   196→            border-left: 3px solid var(--accent); border-right: 3px solid var(--accent);
   197→        }
   198→        .loader-liquid {
   199→            position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
   200→            width: 50px; height: 30px; background: var(--accent);
   201→            border-radius: 0 0 25px 25px / 0 0 45px 45px;
   202→            animation: liquidWave 1.5s ease-in-out infinite;
   203→            box-shadow: 0 0 20px var(--accent);
   204→        }
   205→        @keyframes liquidWave {
   206→            0%, 100% { height: 30px; opacity: 0.8; }
   207→            50% { height: 40px; opacity: 1; }
   208→        }
   209→        .loader-bubble {
   210→            position: absolute; bottom: 10px; width: 6px; height: 6px;
   211→            background: rgba(255,255,255,0.6); border-radius: 50%;
   212→            animation: bubbleRise 2s linear infinite;
   213→        }
   214→        @keyframes bubbleRise {
   215→            0% { bottom: 10px; opacity: 0; transform: translateX(0) scale(0.5); }
   216→            20% { opacity: 1; }
   217→            100% { bottom: 50px; opacity: 0; transform: translateX(10px) scale(1); }
   218→        }
   219→
   220→        /* Tutorial Modal */
   221→        .modal-overlay {
   222→            position: fixed; inset: 0; z-index: 100;
   223→            background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(8px);
   224→            display: flex; align-items: center; justify-content: center; padding: 1rem;
   225→            opacity: 0; visibility: hidden; transition: all 0.3s;
   226→        }
   227→        .modal-overlay.show { opacity: 1; visibility: visible; }
   228→        .modal-content {
   229→            background: var(--bg-secondary); border: 1px solid var(--border-strong);
   230→            border-radius: 1.5rem; max-width: 600px; width: 100%; padding: 2rem;
   231→            transform: scale(0.9); transition: transform 0.3s;
   232→            max-height: 90vh; overflow-y: auto;
   233→        }
   234→        .modal-overlay.show .modal-content { transform: scale(1); }
   235→
   236→        /* Toast */
   237→        .toast {
   238→            position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 200;
   239→            padding: 0.875rem 1.25rem; border-radius: 0.75rem;
   240→            box-shadow: 0 10px 40px rgba(0,0,0,0.4);
   241→            transform: translateY(150%); opacity: 0; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   242→            font-weight: 600; font-size: 0.875rem; color: white;
   243→            display: flex; align-items: center; gap: 0.5rem; max-width: 380px;
   244→        }
   245→        .toast.show { transform: translateY(0); opacity: 1; }
   246→        .toast.success { background: linear-gradient(135deg, #059669, #10b981); }
   247→        .toast.error { background: linear-gradient(135deg, #b91c1c, #ef4444); }
   248→        .toast.info { background: linear-gradient(135deg, #1d4ed8, #3b82f6); }
   249→
   250→        /* Quiz Options */
   251→        .quiz-option {
   252→            background: rgba(15, 26, 20, 0.5);
   253→            border: 1px solid rgba(100, 116, 139, 0.2);
   254→            transition: all 0.25s;
   255→            cursor: pointer;
   256→        }
   257→        .quiz-option:hover:not(.locked) { background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.4); transform: translateX(4px); }
   258→        .quiz-option.selected { background: rgba(168, 85, 247, 0.15); border-color: rgba(168, 85, 247, 0.6); }
   259→        .quiz-option.correct { background: rgba(16, 185, 129, 0.15); border-color: var(--success); }
   260→        .quiz-option.incorrect { background: rgba(239, 68, 68, 0.15); border-color: var(--danger); }
   261→        .quiz-option.locked { cursor: default; }
   262→
   263→        /* Energy diagram */
   264→        .energy-diagram { position: relative; height: 220px; background: rgba(15, 26, 20, 0.4); border-radius: 1rem; padding: 1rem; overflow: hidden; }
   265→        .energy-path { stroke: var(--accent); stroke-width: 3; fill: none; filter: drop-shadow(0 0 8px var(--accent)); }
   266→        .energy-path-catalyst { stroke: var(--accent-secondary); stroke-width: 3; fill: none; stroke-dasharray: 6 4; filter: drop-shadow(0 0 8px var(--accent-secondary)); }
   267→
   268→        /* Number badge */
   269→        .num-badge {
   270→            width: 28px; height: 28px; border-radius: 8px;
   271→            display: inline-flex; align-items: center; justify-content: center;
   272→            font-weight: 700; font-size: 14px; flex-shrink: 0;
   273→        }
   274→
   275→        /* Glow text */
   276→        .glow-text { text-shadow: 0 0 20px currentColor; }
   277→
   278→        /* Fade in animation */
   279→        @keyframes fadeInUp {
   280→            from { opacity: 0; transform: translateY(20px); }
   281→            to { opacity: 1; transform: translateY(0); }
   282→        }
   283→        .fade-in-up { animation: fadeInUp 0.5s ease-out; }
   284→
   285→        /* Floating particles */
   286→        .floating-particle {
   287→            position: absolute; border-radius: 50%; pointer-events: none;
   288→            animation: float 8s ease-in-out infinite;
   289→        }
   290→        @keyframes float {
   291→            0%, 100% { transform: translate(0, 0); opacity: 0.3; }
   292→            50% { transform: translate(20px, -30px); opacity: 0.6; }
   293→        }
   294→
   295→        /* Comparison cards */
   296→        .comparison-card {
   297→            background: rgba(15, 26, 20, 0.5);
   298→            border: 1px solid rgba(100, 116, 139, 0.2);
   299→            border-radius: 1rem; padding: 1rem;
   300→            transition: all 0.3s;
   301→        }
   302→        .comparison-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 4px 20px rgba(16, 185, 129, 0.15); }
   303→
   304→        /* Energy bar for molecules */
   305→        .energy-bar-container { background: rgba(0,0,0,0.3); border-radius: 4px; overflow: hidden; height: 8px; }
   306→        .energy-bar-fill { height: 100%; background: linear-gradient(90deg, #06b6d4, #10b981, #f59e0b, #ef4444); transition: width 0.3s; }
   307→
   308→        /* Mini sparkline */
   309→        .sparkline { height: 30px; }
   310→
   311→        /* Section title */
   312→        .section-title {
   313→            display: flex; align-items: center; gap: 0.75rem;
   314→            padding-bottom: 0.75rem; margin-bottom: 1rem;
   315→            border-bottom: 1px solid rgba(100, 116, 139, 0.2);
   316→        }
   317→        .section-title-icon {
   318→            width: 36px; height: 36px; border-radius: 10px;
   319→            display: flex; align-items: center; justify-content: center;
   320→            background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(6, 182, 212, 0.1));
   321→            border: 1px solid var(--border);
   322→        }
   323→
   324→        /* Tab content fade */
   325→        .tab-content { animation: fadeInUp 0.4s ease-out; }
   326→
   327→        /* MathJax fix */
   328→        mjx-container { color: inherit !important; }
   329→
   330→        /* Progress ring */
   331→        .progress-ring { transform: rotate(-90deg); }
   332→        .progress-ring-circle { transition: stroke-dashoffset 0.5s; transform-origin: 50% 50%; }
   333→
   334→        /* === NEW FEATURE STYLES === */
   335→
   336→        /* Light theme */
   337→        body.theme-light {
   338→            --bg: #f1f5f9; --bg-secondary: #e2e8f0; --bg-tertiary: #cbd5e1;
   339→            --fg: #0f172a; --muted: #475569;
   340→            --card: rgba(255, 255, 255, 0.85); --card-strong: rgba(255, 255, 255, 0.95);
   341→            --border: rgba(16, 185, 129, 0.3); --border-strong: rgba(16, 185, 129, 0.5);
   342→        }
   343→        body.theme-light .text-slate-300, body.theme-light .text-slate-400 { color: #475569 !important; }
   344→        body.theme-light .text-white { color: #0f172a !important; }
   345→        body.theme-light .bg-slate-800\/50, body.theme-light .bg-slate-800\/40, body.theme-light .bg-slate-800\/30 { background: rgba(203, 213, 225, 0.5) !important; }
   346→        body.theme-light .bg-slate-900\/50 { background: rgba(148, 163, 184, 0.3) !important; }
   347→        body.theme-light #canvas-container { background: radial-gradient(ellipse at 50% 30%, #e2e8f0 0%, #f1f5f9 70%); }
   348→        body.theme-light .glass-panel, body.theme-light .glass-panel-strong { background: rgba(255,255,255,0.85); color: #0f172a; }
   349→        body.theme-light .from-slate-900 { background: linear-gradient(to bottom, #e2e8f0, #f1f5f9) !important; }
   350→        body.theme-light .to-\[\#0a1410\] { background: #f1f5f9 !important; }
   351→        body.theme-light .text-slate-200 { color: #1e293b !important; }
   352→
   353→        /* High contrast theme */
   354→        body.theme-contrast {
   355→            --bg: #000000; --bg-secondary: #0a0a0a; --fg: #ffffff;
   356→            --accent: #ffff00; --accent-glow: #ffff00; --border: #ffff00;
   357→        }
   358→        body.theme-contrast .glass-panel { border: 2px solid #ffff00; background: #000; }
   359→        body.theme-contrast .text-slate-400 { color: #ffffff !important; }
   360→
   361→        /* History panel */
   362→        #history-panel {
   363→            position: fixed; top: 0; right: 0; bottom: 0; width: 380px; z-index: 90;
   364→            background: var(--bg-secondary); border-left: 1px solid var(--border-strong);
   365→            transform: translateX(100%); transition: transform 0.3s ease;
   366→            overflow-y: auto; padding: 1rem;
   367→        }
   368→        #history-panel.open { transform: translateX(0); }
   369→        .history-item {
   370→            background: rgba(15, 26, 20, 0.6); border: 1px solid var(--border);
   371→            border-radius: 0.75rem; padding: 0.75rem; margin-bottom: 0.5rem;
   372→            transition: all 0.2s; cursor: pointer;
   373→        }
   374→        .history-item:hover { border-color: var(--accent); transform: translateX(-4px); }
   375→
   376→        /* Guided tour */
   377→        #tour-overlay {
   378→            position: fixed; inset: 0; z-index: 150; pointer-events: none;
   379→        }
   380→        #tour-overlay.active { pointer-events: auto; }
   381→        #tour-overlay::before {
   382→            content: ''; position: absolute; inset: 0;
   383→            background: rgba(0,0,0,0.7); transition: all 0.3s;
   384→        }
   385→        #tour-overlay:not(.active)::before { opacity: 0; }
   386→        .tour-highlight {
   387→            position: absolute; border: 3px solid var(--accent); border-radius: 0.75rem;
   388→            box-shadow: 0 0 0 9999px rgba(0,0,0,0.75), 0 0 30px var(--accent);
   389→            z-index: 151; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   390→            pointer-events: none;
   391→        }
   392→        #tour-tooltip {
   393→            position: absolute; z-index: 152; max-width: 360px; padding: 1rem 1.25rem;
   394→            background: var(--bg-secondary); border: 1px solid var(--accent); border-radius: 1rem;
   395→            box-shadow: 0 10px 40px rgba(0,0,0,0.5); transition: all 0.3s;
   396→        }
   397→
   398→        /* Element info card */
   399→        .element-card {
   400→            position: absolute; z-index: 80; padding: 1rem;
   401→            background: var(--card-strong); border: 1px solid var(--accent); border-radius: 1rem;
   402→            box-shadow: 0 10px 40px rgba(0,0,0,0.4); max-width: 280px;
   403→            opacity: 0; transform: translateY(10px); transition: all 0.3s;
   404→            pointer-events: none;
   405→        }
   406→        .element-card.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
   407→        .element-symbol {
   408→            font-size: 2.5rem; font-weight: 800; text-align: center; line-height: 1;
   409→            background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
   410→            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
   411→        }
   412→
   413→        /* Clickable equation elements */
   414→        .eq-element {
   415→            display: inline-block; cursor: pointer; padding: 0 2px;
   416→            border-bottom: 1px dashed transparent; transition: all 0.2s;
   417→        }
   418→        .eq-element:hover { border-bottom-color: var(--accent); color: var(--accent-glow); }
   419→
   420→        /* Speed control */
   421→        .speed-btn {
   422→            padding: 4px 10px; border-radius: 6px; font-size: 10px; font-weight: 600;
   423→            background: rgba(15, 26, 20, 0.6); border: 1px solid rgba(100,116,139,0.2);
   424→            color: #94a3b8; transition: all 0.2s; cursor: pointer;
   425→        }
   426→        .speed-btn.active { background: var(--accent); color: white; border-color: var(--accent); }
   427→        .speed-btn:hover:not(.active) { color: #cbd5e1; border-color: var(--accent); }
   428→
   429→        /* Pause button special style */
   430→        .btn-warning {
   431→            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
   432→            color: white; box-shadow: 0 0 20px rgba(245, 158, 11, 0.35);
   433→        }
   434→
   435→        /* Comparison badge */
   436→        .comp-badge {
   437→            display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
   438→            border-radius: 9999px; font-size: 10px; font-weight: 700;
   439→        }
   440→        .comp-badge-a { background: rgba(34, 211, 238, 0.2); color: #22d3ee; border: 1px solid rgba(34, 211, 238, 0.4); }
   441→        .comp-badge-b { background: rgba(251, 113, 133, 0.2); color: #fb7185; border: 1px solid rgba(251, 113, 133, 0.4); }
   442→
   443→        @media (max-width: 768px) {
   444→            #canvas-container { height: 50vh; }
   445→            .conc-display { font-size: 1.75rem; }
   446→            #history-panel { width: 100%; }
   447→        }
   448→    </style>
   449→</head>
   450→<body>
   451→
   452→<!-- Loading Screen -->
   453→<div id="loading-screen">
   454→    <div class="loader-flask">
   455→        <div class="loader-liquid"></div>
   456→        <div class="loader-bubble" style="left: 30%; animation-delay: 0s;"></div>
   457→        <div class="loader-bubble" style="left: 50%; animation-delay: 0.5s;"></div>
   458→        <div class="loader-bubble" style="left: 65%; animation-delay: 1s;"></div>
   459→    </div>
   460→    <h2 class="font-display text-xl font-bold text-emerald-400 mb-2">Lab Virtual Kimia</h2>
   461→    <p class="text-sm text-slate-400">Menyiapkan simulasi reaksi...</p>
   462→</div>
   463→
   464→<!-- Tutorial Modal -->
   465→<div id="tutorial-modal" class="modal-overlay">
   466→    <div class="modal-content">
   467→        <div class="flex items-center gap-3 mb-4">
   468→            <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-emerald-500 to-teal-600 flex items-center justify-center">
   469→                <svg class="w-7 h-7 text-white" 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>
   470→            </div>
   471→            <div>
   472→                <h2 class="font-display text-2xl font-bold text-white">Selamat Datang!</h2>
   473→                <p class="text-sm text-slate-400">Pengaruh Konsentrasi terhadap Laju Reaksi</p>
   474→            </div>
   475→        </div>
   476→
   477→        <p class="text-sm text-slate-300 mb-4 leading-relaxed">
   478→            Laboratorium virtual ini membantu Anda memahami bagaimana <strong class="text-emerald-400">konsentrasi memengaruhi laju reaksi</strong> antara natrium tiosulfat (Na<sub>2</sub>S<sub>2</sub>O<sub>3</sub>) dan asam klorida (HCl) melalui pendekatan multi-representasi.
   479→        </p>
   480→
   481→        <div class="grid grid-cols-2 gap-3 mb-5">
   482→            <div class="bg-emerald-900/20 border border-emerald-500/30 rounded-lg p-3">
   483→                <div class="text-xs font-bold text-emerald-400 mb-1">MAKROSKOPIS</div>
   484→                <p class="text-xs text-slate-400">Eksperimen labu Erlenmeyer 3D interaktif</p>
   485→            </div>
   486→            <div class="bg-cyan-900/20 border border-cyan-500/30 rounded-lg p-3">
   487→                <div class="text-xs font-bold text-cyan-400 mb-1">MIKROSKOPIS</div>
   488→                <p class="text-xs text-slate-400">Simulasi partikel & tumbukan tingkat atom</p>
   489→            </div>
   490→            <div class="bg-purple-900/20 border border-purple-500/30 rounded-lg p-3">
   491→                <div class="text-xs font-bold text-purple-400 mb-1">TEORI</div>
   492→                <p class="text-xs text-slate-400">Konsep ilmiah lengkap & diagram energi</p>
   493→            </div>
   494→            <div class="bg-amber-900/20 border border-amber-500/30 rounded-lg p-3">
   495→                <div class="text-xs font-bold text-amber-400 mb-1">KPS & KUIS</div>
   496→                <p class="text-xs text-slate-400">Lembar kerja & evaluasi pemahaman</p>
   497→            </div>
   498→        </div>
   499→
   500→        <div class="bg-slate-800/50 rounded-lg p-3 mb-5">
   501→            <h3 class="text-xs font-bold text-amber-400 uppercase mb-2">Persamaan Reaksi</h3>
   502→            <p class="text-center text-sm text-white font-mono">Na₂S₂O₃ + 2HCl → S↓ + 2NaCl + SO₂ + H₂O</p>
   503→            <p class="text-xs text-slate-400 mt-2 text-center">Endapan belerang (S) membuat larutan keruh — digunakan untuk mengukur laju reaksi.</p>
   504→        </div>
   505→
   506→        <button id="btn-close-tutorial" class="w-full btn-primary py-3 rounded-xl text-sm uppercase tracking-widest font-bold">
   507→            Mulai Eksplorasi
   508→        </button>
   509→    </div>
   510→</div>
   511→
   512→<!-- Toast -->
   513→<div id="toast" class="toast success"></div>
   514→
   515→<!-- History Panel (slide-out) -->
   516→<div id="history-panel">
   517→    <div class="flex items-center justify-between mb-4">
   518→        <h2 class="text-lg font-bold text-white font-display flex items-center gap-2">
   519→            <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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
   520→            Riwayat Percobaan
   521→        </h2>
   522→        <button id="btn-close-history" class="text-slate-400 hover:text-white">
   523→            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
   524→        </button>
   525→    </div>
   526→    <div id="history-list" class="space-y-2">
   527→        <div class="text-center text-slate-500 text-xs py-8" id="history-empty">
   528→            <svg class="w-12 h-12 mx-auto mb-2 opacity-30" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
   529→            Belum ada percobaan tersimpan.<br>Jalankan eksperimen untuk mengisi riwayat.
   530→        </div>
   531→    </div>
   532→    <div class="mt-4 pt-4 border-t border-slate-700">
   533→        <button id="btn-clear-history" class="w-full btn-secondary py-2 rounded-lg text-xs uppercase font-bold">Hapus Semua Riwayat</button>
   534→    </div>
   535→</div>
   536→
   537→<!-- Guided Tour Overlay -->
   538→<div id="tour-overlay">
   539→    <div id="tour-highlight-box" class="tour-highlight" style="display:none;"></div>
   540→    <div id="tour-tooltip" style="display:none;">
   541→        <div class="flex items-center justify-between mb-2">
   542→            <span id="tour-step-num" class="text-[10px] uppercase text-emerald-400 font-bold tracking-wider">Langkah 1/8</span>
   543→            <button id="btn-close-tour" class="text-slate-400 hover:text-white text-xs">✕</button>
   544→        </div>
   545→        <h3 id="tour-title" class="text-base font-bold text-white mb-2 font-display">Selamat Datang!</h3>
   546→        <p id="tour-body" class="text-xs text-slate-300 leading-relaxed mb-4">Deskripsi langkah...</p>
   547→        <div class="flex justify-between items-center">
   548→            <button id="btn-tour-prev" class="text-xs text-slate-400 hover:text-white px-3 py-1.5">← Sebelumnya</button>
   549→            <button id="btn-tour-next" class="btn-primary px-4 py-1.5 rounded-lg text-xs font-bold">Selanjutnya →</button>
   550→        </div>
   551→    </div>
   552→</div>
   553→
   554→<!-- Element Info Card -->
   555→<div id="element-card" class="element-card">
   556→    <div class="flex items-start justify-between mb-2">
   557→        <div class="element-symbol" id="el-symbol">Na</div>
   558→        <button id="btn-close-element" class="text-slate-400 hover:text-white text-xs">✕</button>
   559→    </div>
   560→    <div class="text-center mb-2">
   561→        <div id="el-name" class="text-sm font-bold text-white">Natrium</div>
   562→        <div id="el-mass" class="text-[10px] text-slate-400 font-mono">22.99 g/mol</div>
   563→    </div>
   564→    <div id="el-info" class="text-[11px] text-slate-300 leading-relaxed">Info element...</div>
   565→</div>
   566→
   567→<div class="flex flex-col min-h-screen">
   568→    <!-- Header Guide -->
   569→    <header class="absolute top-0 left-0 right-0 z-20 bg-gradient-to-b from-[#0a1410] via-[#0a1410]/80 to-transparent p-3">
   570→        <div class="max-w-7xl mx-auto flex items-center justify-between gap-4">
   571→            <div id="header-steps" class="flex items-center gap-2 sm:gap-3 text-xs font-semibold uppercase tracking-wider transition-opacity duration-300">
   572→                <div id="step-0" class="flex items-center gap-2 text-gray-500 transition-all duration-500">
   573→                    <span class="w-6 h-6 rounded-full flex items-center justify-center text-[10px] bg-slate-800 border border-slate-600">R</span>
   574→                    <span class="hidden sm:inline">Rancang</span>
   575→                </div>
   576→                <div class="w-4 sm:w-6 h-px bg-slate-700"></div>
   577→                <div id="step-1" class="flex items-center gap-2 text-gray-500 transition-all duration-500">
   578→                    <span class="w-6 h-6 rounded-full flex items-center justify-center text-[10px] bg-slate-800 border border-slate-600">1</span>
   579→                    <span class="hidden sm:inline">Atur</span>
   580→                </div>
   581→                <div class="w-4 sm:w-6 h-px bg-slate-700"></div>
   582→                <div id="step-2" class="flex items-center gap-2 text-gray-500 transition-all duration-500">
   583→                    <span class="w-6 h-6 rounded-full flex items-center justify-[10px] bg-slate-800 border border-slate-600">2</span>
   584→                    <span class="hidden sm:inline">Mulai</span>
   585→                </div>
   586→                <div class="w-4 sm:w-6 h-px bg-slate-700"></div>
   587→                <div id="step-3" class="flex items-center gap-2 text-gray-500 transition-all duration-500">
   588→                    <span class="w-6 h-6 rounded-full flex items-center justify-center text-[10px] bg-slate-800 border border-slate-600">3</span>
   589→                    <span class="hidden sm:inline">Analisis</span>
   590→                </div>
   591→            </div>
   592→
   593→            <div class="glass-panel rounded-full p-1 flex gap-1">
   594→                <button id="tab-macro" class="tab-btn active px-3 py-1.5 rounded-full text-[10px] sm:text-xs font-semibold whitespace-nowrap">Makroskopis</button>
   595→                <button id="tab-micro" class="tab-btn px-3 py-1.5 rounded-full text-[10px] sm:text-xs font-semibold whitespace-nowrap">Mikroskopis</button>
   596→                <button id="tab-teori" class="tab-btn px-3 py-1.5 rounded-full text-[10px] sm:text-xs font-semibold whitespace-nowrap">Teori</button>
   597→                <button id="tab-kps" class="tab-btn px-3 py-1.5 rounded-full text-[10px] sm:text-xs font-semibold whitespace-nowrap">KPS</button>
   598→                <button id="tab-quiz" class="tab-btn px-3 py-1.5 rounded-full text-[10px] sm:text-xs font-semibold whitespace-nowrap">Kuis</button>
   599→            </div>
   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>
  1000→
  1001→                        <div class="glass-panel rounded-xl p-4">
  1002→                            <h3 class="text-xs font-bold text-purple-400 uppercase tracking-wider mb-2 font-display">Quick Preset</h3>
  1003→                            <div class="grid grid-cols-4 gap-1.5">
  1004→                                <button class="preset-btn text-[10px] py-2 rounded-lg bg-slate-800/50 hover:bg-slate-700/50 border border-slate-700 text-slate-300 transition" data-conc="0.5">0.5 M</button>
  1005→                                <button class="preset-btn text-[10px] py-2 rounded-lg bg-slate-800/50 hover:bg-slate-700/50 border border-slate-700 text-slate-300 transition" data-conc="1.0">1.0 M</button>
  1006→                                <button class="preset-btn text-[10px] py-2 rounded-lg bg-slate-800/50 hover:bg-slate-700/50 border border-slate-700 text-slate-300 transition" data-conc="1.5">1.5 M</button>
  1007→                                <button class="preset-btn text-[10px] py-2 rounded-lg bg-slate-800/50 hover:bg-slate-700/50 border border-slate-700 text-slate-300 transition" data-conc="2.0">2.0 M</button>
  1008→                            </div>
  1009→                        </div>
  1010→                    </div>
  1011→
  1012→                    <div class="space-y-2">
  1013→                        <div class="flex justify-between items-center gap-2">
  1014→                            <h3 class="text-xs font-bold text-purple-400 uppercase tracking-wider font-display">Data Pengamatan</h3>
  1015→                            <div class="flex gap-1">
  1016→                                <button id="btn-download-data" class="text-[10px] text-cyan-400 border border-cyan-400/30 px-2 py-1 rounded-lg hover:bg-cyan-900/30 transition">CSV</button>
  1017→                                <button id="btn-clear-table" class="text-[10px] text-rose-400 border border-rose-400/30 px-2 py-1 rounded-lg hover:bg-rose-900/20 transition">Clear</button>
  1018→                            </div>
  1019→                        </div>
  1020→                        <div class="overflow-auto rounded-xl border border-slate-700/50 bg-slate-800/30 max-h-44">
  1021→                            <table class="w-full text-xs data-table">
  1022→                                <thead><tr class="text-slate-400 border-b border-slate-700/50">
  1023→                                    <th class="p-2 w-8">No</th><th class="p-2">T (°C)</th><th class="p-2">K (M)</th><th class="p-2">t (s)</th><th class="p-2">1/t (s⁻¹)</th>
  1024→                                </tr></thead>
  1025→                                <tbody id="data-body" class="text-center text-slate-300"></tbody>
  1026→                            </table>
  1027→                        </div>
  1028→                        <div id="order-result" class="glass-panel rounded-xl p-3 text-xs">
  1029→                            <div class="flex justify-between items-center">
  1030→                                <span class="text-slate-400">Orde Reaksi (estimasi):</span>
  1031→                                <span id="order-value" class="font-mono text-emerald-400 font-bold">—</span>
  1032→                            </div>
  1033→                            <div class="flex justify-between items-center mt-1">
  1034→                                <span class="text-slate-400">R² (linearitas):</span>
  1035→                                <span id="r-squared" class="font-mono text-cyan-400 font-bold">—</span>
  1036→                            </div>
  1037→                        </div>
  1038→                    </div>
  1039→
  1040→                    <div class="space-y-3">
  1041→                        <div class="glass-panel rounded-xl p-3 h-44 relative overflow-hidden">
  1042→                            <button id="btn-download-chart" class="absolute top-2 right-2 z-10 text-[10px] text-cyan-400 bg-slate-800/80 px-2 py-0.5 rounded hover:bg-cyan-400/20 transition border border-cyan-400/20">PNG</button>
  1043→                            <canvas id="reactionChart"></canvas>
  1044→                            <div id="chart-placeholder" class="absolute inset-0 flex flex-col items-center justify-center text-slate-500 text-xs gap-2 pointer-events-none">
  1045→                                <svg class="w-8 h-8 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
  1046→                                <span class="text-center">Grafik Laju (1/t) vs Konsentrasi</span>
  1047→                            </div>
  1048→                        </div>
  1049→                        <div class="glass-panel rounded-xl p-3">
  1050→                            <h3 class="text-xs font-bold text-yellow-400 uppercase tracking-wider mb-2 font-display">Kesimpulan</h3>
  1051→                            <textarea id="conclusion-input" class="w-full bg-slate-800/50 border border-slate-700 rounded-lg p-2 text-xs focus:border-cyan-500 focus:outline-none transition resize-none text-slate-200" rows="3" placeholder="Tulis kesimpulan di sini... Contoh: Semakin tinggi konsentrasi, semakin cepat reaksi..."></textarea>
  1052→                            <button id="btn-save-conclusion" class="w-full mt-2 btn-secondary py-1.5 rounded-lg text-[10px] uppercase font-bold">Simpan ke Laporan</button>
  1053→                        </div>
  1054→                    </div>
  1055→                </div>
  1056→            </div>
  1057→
  1058→            <!-- ============== MICRO PANEL ============== -->
  1059→            <div id="panel-micro" class="panel-hidden tab-content">
  1060→                <div class="grid grid-cols-1 lg:grid-cols-4 gap-4">
  1061→                    <div class="glass-panel rounded-xl p-4 space-y-4">
  1062→                        <div class="section-title">
  1063→                            <div class="section-title-icon"><svg class="w-5 h-5 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/></svg></div>
  1064→                            <h3 class="text-sm font-bold text-white font-display">Kontrol Simulasi</h3>
  1065→                        </div>
  1066→                        
  1067→                        <div>
  1068→                            <div class="flex justify-between text-xs text-slate-400 mb-2">
  1069→                                <span>Energi Aktivasi (Eₐ)</span>
  1070→                                <span id="ea-val-label" class="font-mono text-purple-400 font-bold">50</span>
  1071→                            </div>
  1072→                            <input type="range" id="ea-slider-micro" min="1" max="100" value="50" class="w-full cursor-pointer range-ea">
  1073→                            <p class="text-[10px] text-slate-500 mt-1">Energi minimum untuk tumbukan efektif</p>
  1074→                        </div>
  1075→
  1076→                        <div>
  1077→                            <div class="flex justify-between text-xs text-slate-400 mb-2">
  1078→                                <span>Jumlah Partikel (Konsentrasi)</span>
  1079→                                <span id="particle-val-label" class="font-mono text-emerald-400 font-bold">50</span>
  1080→                            </div>
  1081→                            <input type="range" id="particle-count-slider" min="20" max="80" value="50" class="w-full cursor-pointer range-particle">
  1082→                            <p class="text-[10px] text-slate-500 mt-1">Lebih banyak partikel = konsentrasi lebih tinggi</p>
  1083→                        </div>
  1084→
  1085→                        <div>
  1086→                            <div class="flex justify-between text-xs text-slate-400 mb-2">
  1087→                                <span>Temperatur</span>
  1088→                                <span id="micro-temp-label" class="font-mono text-orange-400 font-bold">25°C</span>
  1089→                            </div>
  1090→                            <input type="range" id="temp-slider-micro" min="25" max="100" value="25" class="w-full cursor-pointer range-temp">
  1091→                            <p class="text-[10px] text-slate-500 mt-1">Suhu lebih tinggi = partikel lebih cepat</p>
  1092→                        </div>
  1093→
  1094→                        <div>
  1095→                            <label class="text-xs text-slate-400 block mb-2">Kecepatan Simulasi</label>
  1096→                            <div class="flex gap-1" id="speed-controls">
  1097→                                <button class="speed-btn flex-1" data-speed="0.5">0.5×</button>
  1098→                                <button class="speed-btn flex-1 active" data-speed="1">1×</button>
  1099→                                <button class="speed-btn flex-1" data-speed="2">2×</button>
  1100→                                <button class="speed-btn flex-1" data-speed="4">4×</button>
  1101→                            </div>
  1102→                            <p class="text-[10px] text-slate-500 mt-1">Kontrol kecepatan animasi partikel</p>
  1103→                        </div>
  1104→
  1105→                        <div class="pt-3 border-t border-slate-700 grid grid-cols-2 gap-2">
  1106→                            <button id="btn-start-micro" class="w-full btn-primary py-3 rounded-xl text-xs uppercase tracking-widest font-bold">Mulai</button>
  1107→                            <button id="btn-reset-micro" class="w-full bg-slate-700 hover:bg-slate-600 py-3 rounded-xl text-xs transition text-slate-300 font-semibold">Reset</button>
  1108→                        </div>
  1109→                    </div>
  1110→
  1111→                    <div class="glass-panel rounded-xl p-4 flex flex-col">
  1112→                        <div class="section-title">
  1113→                            <div class="section-title-icon"><svg class="w-5 h-5 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
  1114→                            <h3 class="text-sm font-bold text-white font-display">Statistik Real-time</h3>
  1115→                        </div>
  1116→                        <div class="flex-1 space-y-3 mt-2">
  1117→                            <div class="bg-slate-800/40 rounded-lg p-3">
  1118→                                <div class="text-[10px] text-slate-500 uppercase mb-1">Laju Tumbukan</div>
  1119→                                <div class="text-2xl font-bold text-cyan-400 font-mono"><span id="micro-stats">0</span><span class="text-xs ml-1 text-slate-500">/s</span></div>
  1120→                            </div>
  1121→                            <div class="bg-slate-800/40 rounded-lg p-3">
  1122→                                <div class="text-[10px] text-slate-500 uppercase mb-1">Laju Reaksi</div>
  1123→                                <div class="text-2xl font-bold text-yellow-400 font-mono"><span id="micro-rate">0</span><span class="text-xs ml-1 text-slate-500">/s</span></div>
  1124→                            </div>
  1125→                            <div class="bg-slate-800/40 rounded-lg p-3">
  1126→                                <div class="flex justify-between items-center mb-1">
  1127→                                    <span class="text-[10px] text-slate-500 uppercase">Distribusi Energi</span>
  1128→                                    <span class="text-[10px] text-slate-400">Maxwell-Boltzmann</span>
  1129→                                </div>
  1130→                                <canvas id="energyChart" height="80"></canvas>
  1131→                            </div>
  1132→                        </div>
  1133→                    </div>
  1134→
  1135→                    <div class="glass-panel rounded-xl p-4 space-y-3">
  1136→                        <div class="section-title">
  1137→                            <div class="section-title-icon"><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="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
  1138→                            <h3 class="text-sm font-bold text-white font-display">Grafik Tumbukan</h3>
  1139→                        </div>
  1140→                        <div class="bg-slate-800/40 rounded-lg p-3">
  1141→                            <canvas id="collisionChart" height="160"></canvas>
  1142→                        </div>
  1143→                        <div class="text-[10px] text-slate-500 leading-relaxed">
  1144→                            <strong class="text-cyan-400">Biru:</strong> Total tumbukan | 
  1145→                            <strong class="text-yellow-400">Kuning:</strong> Reaksi sukses
  1146→                        </div>
  1147→                    </div>
  1148→
  1149→                    <div class="glass-panel rounded-xl p-4 space-y-3">
  1150→                        <div class="section-title">
  1151→                            <div class="section-title-icon"><svg class="w-5 h-5 text-amber-400" 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></div>
  1152→                            <h3 class="text-sm font-bold text-white font-display">Insight</h3>
  1153→                        </div>
  1154→                        <div id="micro-insight" class="space-y-2 text-xs">
  1155→                            <div class="bg-slate-800/40 rounded-lg p-3 border-l-2 border-cyan-400">
  1156→                                <div class="text-cyan-400 font-bold mb-1">Hubungan Konsentrasi</div>
  1157→                                <p class="text-slate-400 text-[11px] leading-relaxed">Partikel per volume bertambah → jarak antar partikel menurun → peluang tumbukan meningkat → laju reaksi naik.</p>
  1158→                            </div>
  1159→                            <div class="bg-slate-800/40 rounded-lg p-3 border-l-2 border-purple-400">
  1160→                                <div class="text-purple-400 font-bold mb-1">Energi Aktivasi</div>
  1161→                                <p class="text-slate-400 text-[11px] leading-relaxed">Hanya tumbukan dengan energi kinetik ≥ Eₐ yang menghasilkan reaksi. Naikkan suhu untuk menaikkan energi partikel.</p>
  1162→                            </div>
  1163→                            <div class="bg-slate-800/40 rounded-lg p-3 border-l-2 border-yellow-400">
  1164→                                <div class="text-yellow-400 font-bold mb-1">Tumbukan Efektif</div>
  1165→                                <p class="text-slate-400 text-[11px] leading-relaxed">Tidak semua tumbukan menghasilkan reaksi. Hanya yang memiliki energi cukup DAN orientasi tepat.</p>
  1166→                            </div>
  1167→                        </div>
  1168→                    </div>
  1169→                </div>
  1170→            </div>
  1171→
  1172→            <!-- ============== TEORI PANEL ============== -->
  1173→            <div id="panel-teori" class="panel-hidden tab-content">
  1174→                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
  1175→                    
  1176→                    <!-- LEFT COLUMN - Main Theory -->
  1177→                    <div class="lg:col-span-2 space-y-6">
  1178→                        
  1179→                        <!-- Collision Theory -->
  1180→                        <div class="glass-panel rounded-xl p-6">
  1181→                            <div class="section-title">
  1182→                                <div class="section-title-icon"><svg class="w-5 h-5 text-cyan-400" 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></div>
  1183→                                <h2 class="text-xl font-bold text-cyan-400 font-display">Teori Tumbukan (Collision Theory)</h2>
  1184→                            </div>
  1185→                            <div class="space-y-4 text-sm text-slate-300 leading-relaxed">
  1186→                                <p>
  1187→                                    Teori Tumbukan, yang dikembangkan oleh <strong class="text-white">Max Trautz (1916)</strong> dan <strong class="text-white">William Lewis (1918)</strong>, menjelaskan bahwa reaksi kimia terjadi akibat <strong class="text-cyan-300">tumbukan antar partikel reaktan</strong>. Namun, tidak semua tumbukan menghasilkan reaksi — hanya tumbukan yang memenuhi syarat tertentu yang akan menghasilkan produk.
  1188→                                </p>
  1189→                                <div class="grid grid-cols-1 md:grid-cols-3 gap-3 my-4">
  1190→                                    <div class="theory-card rounded-lg p-4">
  1191→                                        <div class="text-2xl mb-2 font-bold text-cyan-400 font-display">1</div>
  1192→                                        <h4 class="font-bold mb-1">Energi Cukup</h4>
  1193→                                        <p class="text-xs text-slate-400">Energi kinetik tumbukan ≥ Energi aktivasi (Eₐ)</p>
  1194→                                    </div>
  1195→                                    <div class="theory-card rounded-lg p-4">
  1196→                                        <div class="text-2xl mb-2 font-bold text-cyan-400 font-display">2</div>
  1197→                                        <h4 class="font-bold mb-1">Orientasi Tepat</h4>
  1198→                                        <p class="text-xs text-slate-400">Partikel harus bertumbukan dengan sudut/orientasi yang benar</p>
  1199→                                    </div>
  1200→                                    <div class="theory-card rounded-lg p-4">
  1201→                                        <div class="text-2xl mb-2 font-bold text-cyan-400 font-display">3</div>
  1202→                                        <h4 class="font-bold mb-1">Frekuensi Tinggi</h4>
  1203→                                        <p class="text-xs text-slate-400">Semakin sering tumbukan efektif, semakin cepat reaksi</p>
  1204→                                    </div>
  1205→                                </div>
  1206→                                <p>
  1207→                                    Tumbukan yang memenuhi kedua syarat disebut <strong class="text-emerald-300">tumbukan efektif</strong>. Laju reaksi sebanding dengan frekuensi tumbukan efektif per satuan waktu:
  1208→                                </p>
  1209→                                <div class="bg-slate-800/50 rounded-lg p-4 text-center font-mono text-base text-white my-3">
  1210→                                    \( v = Z \times f \times P \)
  1211→                                </div>
  1212→                                <p class="text-xs text-slate-400">
  1213→                                    di mana: <span class="font-mono text-slate-300">Z</span> = frekuensi tumbukan, <span class="font-mono text-slate-300">f</span> = fraksi partikel dengan energi ≥ Eₐ, <span class="font-mono text-slate-300">P</span> = faktor probabilitas orientasi (faktor sterik).
  1214→                                </p>
  1215→                            </div>
  1216→                        </div>
  1217→
  1218→                        <!-- Effect of Concentration -->
  1219→                        <div class="glass-panel rounded-xl p-6">
  1220→                            <div class="section-title">
  1221→                                <div class="section-title-icon"><svg class="w-5 h-5 text-purple-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></div>
  1222→                                <h2 class="text-xl font-bold text-purple-400 font-display">Pengaruh Konsentrasi terhadap Laju Reaksi</h2>
  1223→                            </div>
  1224→                            <div class="space-y-4 text-sm text-slate-300 leading-relaxed">
  1225→                                <p>
  1226→                                    <strong class="text-white">Konsentrasi</strong> menyatakan jumlah partikel zat terlarut dalam satuan volume tertentu (mol/L atau M). Pada reaksi homogen, peningkatan konsentrasi reaktan akan mempercepat laju reaksi melalui mekanisme berikut:
  1227→                                </p>
  1228→                                <ol class="list-decimal list-inside space-y-3 ml-2">
  1229→                                    <li>
  1230→                                        <strong class="text-white">Jumlah Partikel per Volume Bertambah</strong>
  1231→                                        <p class="text-xs mt-1 text-slate-400">Pada konsentrasi 2 M, jumlah partikel reaktan per liter dua kali lipat dibanding 1 M. Dalam volume yang sama, kerapatan partikel meningkat.</p>
  1232→                                    </li>
  1233→                                    <li>
  1234→                                        <strong class="text-white">Jarak Antar Partikel Menurun</strong>
  1235→                                        <p class="text-xs mt-1 text-slate-400">Partikel yang lebih rapat berarti jarak tempuh antar tumbukan lebih pendek, sehingga frekuensi tumbukan per satuan waktu meningkat.</p>
  1236→                                    </li>
  1237→                                    <li>
  1238→                                        <strong class="text-white">Frekuensi Tumbukan Meningkat</strong>
  1239→                                        <p class="text-xs mt-1 text-slate-400">Lebih banyak partikel × jarak lebih dekat → lebih banyak tumbukan per detik. Secara matematis, frekuensi tumbukan sebanding dengan hasil kali konsentrasi reaktan.</p>
  1240→                                    </li>
  1241→                                    <li>
  1242→                                        <strong class="text-white">Tumbukan Efektif Bertambah</strong>
  1243→                                        <p class="text-xs mt-1 text-slate-400">Karena distribusi energi partikel tidak berubah, fraksi tumbukan efektif tetap. Namun karena total tumbukan naik, jumlah tumbukan efektif juga naik proporsional.</p>
  1244→                                    </li>
  1245→                                    <li>
  1246→                                        <strong class="text-white">Waktu Reaksi Menurun</strong>
  1247→                                        <p class="text-xs mt-1 text-slate-400">Lebih banyak tumbukan efektif per detik → reaksi selesai lebih cepat → waktu yang dibutuhkan untuk membentuk jumlah produk tertentu menjadi lebih singkat.</p>
  1248→                                    </li>
  1249→                                </ol>
  1250→                                <div class="bg-purple-900/20 border border-purple-500/30 rounded-lg p-4 mt-4">
  1251→                                    <h4 class="text-sm font-bold text-purple-300 mb-2">Analogi Visual</h4>
  1252→                                    <p class="text-xs text-slate-300 leading-relaxed">
  1253→                                        Bayangkan dua ruangan berukuran sama. Ruangan A berisi 10 orang, ruangan B berisi 50 orang. Jika setiap orang berjalan acak, peluang dua orang bertabrakan di ruangan B jauh lebih tinggi dibanding ruangan A. Begitu pula partikel reaktan — semakin pekat, semakin tinggi peluang tumbukan.
  1254→                                    </p>
  1255→                                </div>
  1256→                            </div>
  1257→                        </div>
  1258→
  1259→                        <!-- Rate Law -->
  1260→                        <div class="glass-panel rounded-xl p-6">
  1261→                            <div class="section-title">
  1262→                                <div class="section-title-icon"><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="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg></div>
  1263→                                <h2 class="text-xl font-bold text-emerald-400 font-display">Hukum Laju Reaksi (Rate Law)</h2>
  1264→                            </div>
  1265→                            <div class="space-y-4 text-sm text-slate-300 leading-relaxed">
  1266→                                <p>Untuk reaksi umum: <span class="font-mono text-white">aA + bB → produk</span>, hukum laju dinyatakan sebagai:</p>
  1267→                                <div class="bg-slate-800/50 rounded-lg p-4 text-center font-mono text-lg text-white my-3">
  1268→                                    \( v = k \cdot [A]^m \cdot [B]^n \)
  1269→                                </div>
  1270→                                <p class="text-xs text-slate-400">
  1271→                                    di mana <span class="font-mono text-slate-300">v</span> = laju reaksi, <span class="font-mono text-slate-300">k</span> = konstanta laju, <span class="font-mono text-slate-300">[A], [B]</span> = konsentrasi reaktan, <span class="font-mono text-slate-300">m, n</span> = orde reaksi terhadap A dan B.
  1272→                                </p>
  1273→                                
  1274→                                <div class="grid grid-cols-1 md:grid-cols-3 gap-3 mt-4">
  1275→                                    <div class="bg-slate-800/40 rounded-lg p-3">
  1276→                                        <div class="text-xs font-bold text-emerald-300 mb-1">Orde Nol (m=0)</div>
  1277→                                        <p class="text-[11px] text-slate-400">Laju tidak dipengaruhi konsentrasi. v = k</p>
  1278→                                        <div class="text-[10px] text-slate-500 mt-1">Grafik [A] vs t: linier</div>
  1279→                                    </div>
  1280→                                    <div class="bg-slate-800/40 rounded-lg p-3">
  1281→                                        <div class="text-xs font-bold text-emerald-300 mb-1">Orde Satu (m=1)</div>
  1282→                                        <p class="text-[11px] text-slate-400">Laju ∝ [A]. v = k[A]</p>
  1283→                                        <div class="text-[10px] text-slate-500 mt-1">Grafik ln[A] vs t: linier</div>
  1284→                                    </div>
  1285→                                    <div class="bg-slate-800/40 rounded-lg p-3">
  1286→                                        <div class="text-xs font-bold text-emerald-300 mb-1">Orde Dua (m=2)</div>
  1287→                                        <p class="text-[11px] text-slate-400">Laju ∝ [A]². v = k[A]²</p>
  1288→                                        <div class="text-[10px] text-slate-500 mt-1">Grafik 1/[A] vs t: linier</div>
  1289→                                    </div>
  1290→                                </div>
  1291→
  1292→                                <div class="bg-emerald-900/20 border border-emerald-500/30 rounded-lg p-4 mt-3">
  1293→                                    <h4 class="text-sm font-bold text-emerald-300 mb-2">Reaksi Na₂S₂O₃ + HCl</h4>
  1294→                                    <p class="text-xs text-slate-300 leading-relaxed mb-2">
  1295→                                        Untuk reaksi yang disimulasikan di lab ini, laju dapat diamati melalui waktu yang dibutuhkan untuk membentuk endapan belerang:
  1296→                                    </p>
  1297→                                    <div class="bg-slate-900/50 rounded p-3 font-mono text-xs text-cyan-300 mb-2">
  1298→                                        v = Δ[S] / Δt ≈ 1 / t
  1299→                                    </div>
  1300→                                    <p class="text-xs text-slate-400">
  1301→                                        Karena jumlah endapan yang diamati konstan (saat X menghilang), maka laju berbanding terbalik dengan waktu: <strong class="text-white">v = 1/t</strong>. Dengan mengukur t pada berbagai [Na₂S₂O₃], kita dapat menentukan orde reaksi.
  1302→                                    </p>
  1303→                                </div>
  1304→                            </div>
  1305→                        </div>
  1306→
  1307→                        <!-- Arrhenius Equation -->
  1308→                        <div class="glass-panel rounded-xl p-6">
  1309→                            <div class="section-title">
  1310→                                <div class="section-title-icon"><svg class="w-5 h-5 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.24 17 7.341 18.412 10.6 18.408 13.5 16 16c-1.5 1.5-2.5 3-3 4"/></svg></div>
  1311→                                <h2 class="text-xl font-bold text-amber-400 font-display">Persamaan Arrhenius</h2>
  1312→                            </div>
  1313→                            <div class="space-y-4 text-sm text-slate-300 leading-relaxed">
  1314→                                <p>Persamaan Arrhenius menghubungkan konstanta laju (k) dengan suhu dan energi aktivasi:</p>
  1315→                                <div class="bg-slate-800/50 rounded-lg p-4 text-center font-mono text-lg text-white my-3">
  1316→                                    \( k = A \cdot e^{-E_a / RT} \)
  1317→                                </div>
  1318→                                <p class="text-xs text-slate-400">
  1319→                                    di mana <span class="font-mono text-slate-300">A</span> = faktor frekuensi (pre-exponential factor), <span class="font-mono text-slate-300">Eₐ</span> = energi aktivasi (J/mol), <span class="font-mono text-slate-300">R</span> = konstanta gas (8,314 J/mol·K), <span class="font-mono text-slate-300">T</span> = suhu absolut (K).
  1320→                                </p>
  1321→                                <div class="bg-amber-900/20 border border-amber-500/30 rounded-lg p-4 mt-3">
  1322→                                    <h4 class="text-sm font-bold text-amber-300 mb-2">Bentuk Logaritmik</h4>
  1323→                                    <div class="bg-slate-900/50 rounded p-3 font-mono text-xs text-amber-300 mb-2">
  1324→                                        ln k = ln A − Eₐ / RT
  1325→                                    </div>
  1326→                                    <p class="text-xs text-slate-400">
  1327→                                        Dengan memplot <strong class="text-white">ln k</strong> terhadap <strong class="text-white">1/T</strong>, diperoleh garis lurus dengan kemiringan <strong class="text-white">−Eₐ/R</strong>. Inilah dasar penentuan energi aktivasi eksperimen.
  1328→                                    </p>
  1329→                                </div>
  1330→                            </div>
  1331→                        </div>
  1332→
  1333→                    </div>
  1334→
  1335→                    <!-- RIGHT COLUMN - Visualizations & Extra -->
  1336→                    <div class="space-y-6">
  1337→                        
  1338→                        <!-- Energy Profile Diagram -->
  1339→                        <div class="glass-panel rounded-xl p-5">
  1340→                            <h3 class="text-sm font-bold text-purple-400 uppercase tracking-wider mb-3 font-display">Diagram Profil Energi</h3>
  1341→                            <div class="energy-diagram">
  1342→                                <svg viewBox="0 0 300 200" class="w-full h-full">
  1343→                                    <!-- Axes -->
  1344→                                    <line x1="20" y1="180" x2="280" y2="180" stroke="#475569" stroke-width="1"/>
  1345→                                    <line x1="20" y1="20" x2="20" y2="180" stroke="#475569" stroke-width="1"/>
  1346→                                    <text x="155" y="195" fill="#94a3b8" font-size="9" text-anchor="middle">Koordinat Reaksi</text>
  1347→                                    <text x="10" y="100" fill="#94a3b8" font-size="9" text-anchor="middle" transform="rotate(-90 10 100)">Energi</text>
  1348→                                    
  1349→                                    <!-- Reactant level -->
  1350→                                    <line x1="30" y1="130" x2="80" y2="130" stroke="#22d3ee" stroke-width="2"/>
  1351→                                    <text x="35" y="145" fill="#22d3ee" font-size="9">Reaktan</text>
  1352→                                    
  1353→                                    <!-- Product level -->
  1354→                                    <line x1="220" y1="150" x2="270" y2="150" stroke="#fde047" stroke-width="2"/>
  1355→                                    <text x="225" y="165" fill="#fde047" font-size="9">Produk</text>
  1356→                                    
  1357→                                    <!-- Energy curve (without catalyst) -->
  1358→                                    <path class="energy-path" d="M 80 130 Q 150 30, 220 150"/>
  1359→                                    
  1360→                                    <!-- Energy curve (with catalyst) - lower peak -->
  1361→                                    <path class="energy-path-catalyst" d="M 80 130 Q 150 75, 220 150"/>
  1362→                                    
  1363→                                    <!-- Ea arrow -->
  1364→                                    <line x1="155" y1="130" x2="155" y2="35" stroke="#a855f7" stroke-width="1.5" stroke-dasharray="3,2"/>
  1365→                                    <polygon points="155,30 152,38 158,38" fill="#a855f7"/>
  1366→                                    <text x="160" y="80" fill="#a855f7" font-size="9">Eₐ</text>
  1367→                                    
  1368→                                    <!-- ΔH arrow -->
  1369→                                    <line x1="245" y1="130" x2="245" y2="148" stroke="#10b981" stroke-width="1.5"/>
  1370→                                    <polygon points="245,150 242,143 248,143" fill="#10b981"/>
  1371→                                    <text x="248" y="142" fill="#10b981" font-size="9">ΔH</text>
  1372→                                    
  1373→                                    <!-- Peak label -->
  1374→                                    <text x="150" y="22" fill="#94a3b8" font-size="8" text-anchor="middle">Kompleks Teraktifkan</text>
  1375→                                    
  1376→                                    <!-- Catalyst Ea -->
  1377→                                    <text x="180" y="78" fill="#a855f7" font-size="8">Eₐ (kat)</text>
  1378→                                </svg>
  1379→                            </div>
  1380→                            <div class="text-[10px] text-slate-400 mt-3 space-y-1">
  1381→                                <div><span class="inline-block w-3 h-0.5 bg-emerald-400 mr-1"></span> Tanpa katalis (Eₐ tinggi)</div>
  1382→                                <div><span class="inline-block w-3 h-0.5 bg-purple-400 mr-1"></span> Dengan katalis (Eₐ lebih rendah)</div>
  1383→                                <div class="pt-1">ΔH negatif → reaksi eksoterm</div>
  1384→                            </div>
  1385→                        </div>
  1386→
  1387→                        <!-- Maxwell-Boltzmann Distribution -->
  1388→                        <div class="glass-panel rounded-xl p-5">
  1389→                            <h3 class="text-sm font-bold text-cyan-400 uppercase tracking-wider mb-3 font-display">Distribusi Maxwell-Boltzmann</h3>
  1390→                            <div class="bg-slate-800/40 rounded-lg p-3">
  1391→                                <svg viewBox="0 0 280 160" class="w-full">
  1392→                                    <!-- Axes -->
  1393→                                    <line x1="20" y1="140" x2="270" y2="140" stroke="#475569" stroke-width="1"/>
  1394→                                    <line x1="20" y1="10" x2="20" y2="140" stroke="#475569" stroke-width="1"/>
  1395→                                    <text x="145" y="155" fill="#94a3b8" font-size="9" text-anchor="middle">Energi Kinetik (E)</text>
  1396→                                    <text x="8" y="75" fill="#94a3b8" font-size="8" transform="rotate(-90 8 75)">Jumlah Partikel</text>
  1397→                                    
  1398→                                    <!-- Low T curve -->
  1399→                                    <path d="M 20 140 Q 50 60, 90 140" stroke="#06b6d4" stroke-width="2" fill="none"/>
  1400→                                    <text x="55" y="55" fill="#06b6d4" font-size="9">T₁ (rendah)</text>
  1401→                                    
  1402→                                    <!-- High T curve (broader, flatter) -->
  1403→                                    <path d="M 20 140 Q 80 40, 160 140" stroke="#f59e0b" stroke-width="2" fill="none"/>
  1404→                                    <text x="100" y="35" fill="#f59e0b" font-size="9">T₂ (tinggi)</text>
  1405→                                    
  1406→                                    <!-- Ea line -->
  1407→                                    <line x1="110" y1="10" x2="110" y2="140" stroke="#ef4444" stroke-width="1.5" stroke-dasharray="3,2"/>
  1408→                                    <text x="115" y="20" fill="#ef4444" font-size="9">Eₐ</text>
  1409→                                    
  1410→                                    <!-- Shaded area beyond Ea for T1 -->
  1411→                                    <path d="M 110 140 Q 110 100, 130 140 Z" fill="rgba(6, 182, 212, 0.3)"/>
  1412→                                    <!-- Shaded area beyond Ea for T2 -->
  1413→                                    <path d="M 110 140 Q 130 80, 160 140 Z" fill="rgba(245, 158, 11, 0.3)"/>
  1414→                                </svg>
  1415→                            </div>
  1416→                            <p class="text-[10px] text-slate-400 mt-2 leading-relaxed">
  1417→                                Pada suhu lebih tinggi (T₂), kurva lebih lebar dan lebih banyak partikel memiliki energi ≥ Eₐ (area oranye). Inilah mengapa kenaikan suhu mempercepat reaksi secara eksponensial.
  1418→                            </p>
  1419→                        </div>
  1420→
  1421→                        <!-- Factors Affecting Rate -->
  1422→                        <div class="glass-panel rounded-xl p-5">
  1423→                            <h3 class="text-sm font-bold text-amber-400 uppercase tracking-wider mb-3 font-display">Faktor Lain yang Memengaruhi Laju</h3>
  1424→                            <div class="space-y-2">
  1425→                                <div class="bg-slate-800/40 rounded-lg p-3 border-l-2 border-rose-400">
  1426→                                    <div class="flex justify-between items-center">
  1427→                                        <span class="text-xs font-bold text-rose-400">Suhu</span>
  1428→                                        <span class="text-[10px] text-slate-500">↑T → ↑v</span>
  1429→                                    </div>
  1430→                                    <p class="text-[10px] text-slate-400 mt-1">Energi kinetik partikel naik, lebih banyak melewati Eₐ</p>
  1431→                                </div>
  1432→                                <div class="bg-slate-800/40 rounded-lg p-3 border-l-2 border-purple-400">
  1433→                                    <div class="flex justify-between items-center">
  1434→                                        <span class="text-xs font-bold text-purple-400">Konsentrasi</span>
  1435→                                        <span class="text-[10px] text-slate-500">↑[ ] → ↑v</span>
  1436→                                    </div>
  1437→                                    <p class="text-[10px] text-slate-400 mt-1">Frekuensi tumbukan meningkat</p>
  1438→                                </div>
  1439→                                <div class="bg-slate-800/40 rounded-lg p-3 border-l-2 border-cyan-400">
  1440→                                    <div class="flex justify-between items-center">
  1441→                                        <span class="text-xs font-bold text-cyan-400">Luas Permukaan</span>
  1442→                                        <span class="text-[10px] text-slate-500">↑A → ↑v</span>
  1443→                                    </div>
  1444→                                    <p class="text-[10px] text-slate-400 mt-1">Lebih banyak partikel terekspos untuk bereaksi</p>
  1445→                                </div>
  1446→                                <div class="bg-slate-800/40 rounded-lg p-3 border-l-2 border-emerald-400">
  1447→                                    <div class="flex justify-between items-center">
  1448→                                        <span class="text-xs font-bold text-emerald-400">Katalis</span>
  1449→                                        <span class="text-[10px] text-slate-500">+kat → ↑v</span>
  1450→                                    </div>
  1451→                                    <p class="text-[10px] text-slate-400 mt-1">Menurunkan Eₐ, menyediakan jalur alternatif</p>
  1452→                                </div>
  1453→                            </div>
  1454→                        </div>
  1455→
  1456→                        <!-- Real-World Applications -->
  1457→                        <div class="glass-panel rounded-xl p-5">
  1458→                            <h3 class="text-sm font-bold text-emerald-400 uppercase tracking-wider mb-3 font-display">Aplikasi Nyata</h3>
  1459→                            <div class="space-y-3 text-xs">
  1460→                                <div class="bg-slate-800/40 rounded-lg p-3">
  1461→                                    <div class="font-bold text-emerald-300 mb-1">🏭 Industri Kimia</div>
  1462→                                    <p class="text-slate-400 text-[11px] leading-relaxed">Pemilihan konsentrasi optimal reaktan dalam sintesis amonia (Haber-Bosch) untuk efisiensi produksi.</p>
  1463→                                </div>
  1464→                                <div class="bg-slate-800/40 rounded-lg p-3">
  1465→                                    <div class="font-bold text-emerald-300 mb-1">🍞 Pengawetan Makanan</div>
  1466→                                    <p class="text-slate-400 text-[11px] leading-relaxed">Lemari es menurunkan suhu → menurunkan laju reaksi pembusukan. Kadar garam/vinegar menghambat mikroba.</p>
  1467→                                </div>
  1468→                                <div class="bg-slate-800/40 rounded-lg p-3">
  1469→                                    <div class="font-bold text-emerald-300 mb-1">💊 Farmasi</div>
  1470→                                    <p class="text-slate-400 text-[11px] leading-relaxed">Konsentrasi obat dalam darah menentukan kecepatan metabolisme dan efektivitas terapi.</p>
  1471→                                </div>
  1472→                                <div class="bg-slate-800/40 rounded-lg p-3">
  1473→                                    <div class="font-bold text-emerald-300 mb-1">🔋 Baterai & Sel Bahan Bakar</div>
  1474→                                    <p class="text-slate-400 text-[11px] leading-relaxed">Konsentrasi elektrolit memengaruhi laju reaksi elektrokimia dan daya output.</p>
  1475→                                </div>
  1476→                            </div>
  1477→                        </div>
  1478→
  1479→                        <!-- Key Formulas Summary -->
  1480→                        <div class="glass-panel rounded-xl p-5">
  1481→                            <h3 class="text-sm font-bold text-cyan-400 uppercase tracking-wider mb-3 font-display">Ringkasan Rumus</h3>
  1482→                            <div class="space-y-2 text-xs">
  1483→                                <div class="bg-slate-800/50 rounded p-2 font-mono text-cyan-300 text-center">v = k[A]ᵐ[B]ⁿ</div>
  1484→                                <div class="bg-slate-800/50 rounded p-2 font-mono text-amber-300 text-center">k = A·e^(−Eₐ/RT)</div>
  1485→                                <div class="bg-slate-800/50 rounded p-2 font-mono text-emerald-300 text-center">v = 1/t (untuk eksperimen ini)</div>
  1486→                                <div class="bg-slate-800/50 rounded p-2 font-mono text-purple-300 text-center">ln k = ln A − Eₐ/(RT)</div>
  1487→                            </div>
  1488→                        </div>
  1489→
  1490→                    </div>
  1491→                </div>
  1492→            </div>
  1493→
  1494→            <!-- ============== KPS PANEL ============== -->
  1495→            <div id="panel-kps" class="panel-hidden tab-content">
  1496→                <div class="glass-panel rounded-xl p-6 mb-4">
  1497→                    <div class="section-title mb-4">
  1498→                        <div class="section-title-icon"><svg class="w-6 h-6 text-amber-400" 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 2m-6 9l2 2 4-4"/></svg></div>
  1499→                        <div>
  1500→                            <h2 class="text-lg font-bold text-white font-display">Lembar Kerja KPS</h2>
  1501→                            <p class="text-xs text-slate-400">Keterampilan Proses Sains - Pengaruh Konsentrasi terhadap Laju Reaksi</p>
  1502→                        </div>
  1503→                    </div>
  1504→
  1505→                    <div class="bg-amber-900/10 border border-amber-500/20 rounded-lg p-3 mb-5 text-xs text-amber-200">
  1506→                        <strong>Petunjuk:</strong> Lengkapi setiap tahap KPS dengan menjawab pertanyaan atau melakukan tugas. Klik "Periksa Jawaban" untuk evaluasi otomatis pada soal objektif.
  1507→                    </div>
  1508→
  1509→                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
  1510→                        
  1511→                        <!-- Skill 1: Observation -->
  1512→                        <div class="kps-card rounded-lg p-4" id="kps-card-1">
  1513→                            <div class="flex items-center gap-2 mb-3">
  1514→                                <span class="num-badge bg-cyan-500/20 text-cyan-400">1</span>
  1515→                                <h3 class="text-sm font-bold text-white font-display">Mengamati</h3>
  1516→                            </div>
  1517→                            <p class="text-xs text-slate-400 mb-3 leading-relaxed">Amati simulasi pada tab Makroskopis. Apa yang terjadi setelah larutan Na₂S₂O₃ dan HCl dicampur? Jelaskan minimal 3 perubahan yang Anda amati.</p>
  1518→                            <textarea class="w-full bg-slate-800/50 border border-slate-700 rounded p-2 text-xs text-slate-200 focus:border-cyan-500 focus:outline-none transition resize-none" rows="3" id="kps-observe" placeholder="Contoh: 1) Larutan awalnya bening... 2) ... 3) ..."></textarea>
  1519→                            <div class="text-[10px] text-slate-500 mt-1"><span id="kps-observe-count">0</span>/60 kata minimal</div>
  1520→                        </div>
  1521→
  1522→                        <!-- Skill 2: Classification -->
  1523→                        <div class="kps-card rounded-lg p-4" id="kps-card-2">
  1524→                            <div class="flex items-center gap-2 mb-3">
  1525→                                <span class="num-badge bg-purple-500/20 text-purple-400">2</span>
  1526→                                <h3 class="text-sm font-bold text-white font-display">Mengklasifikasi Variabel</h3>
  1527→                            </div>
  1528→                            <p class="text-xs text-slate-400 mb-3">Identifikasi variabel-variabel dalam eksperimen pengaruh konsentrasi ini.</p>
  1529→                            <div class="space-y-2 text-xs">
  1530→                                <div>
  1531→                                    <label class="text-slate-300 block mb-1">Variabel Bebas:</label>
  1532→                                    <select class="w-full bg-slate-800 border border-slate-700 rounded p-1.5 text-slate-200 focus:border-purple-500 focus:outline-none" id="kps-var-independent">
  1533→                                        <option value="">-- Pilih --</option>
  1534→                                        <option value="Suhu">Suhu</option>
  1535→                                        <option value="Konsentrasi Larutan">Konsentrasi Larutan</option>
  1536→                                        <option value="Volume Pelarut">Volume Pelarut</option>
  1537→                                        <option value="Waktu">Waktu</option>
  1538→                                    </select>
  1539→                                </div>
  1540→                                <div>
  1541→                                    <label class="text-slate-300 block mb-1">Variabel Terikat:</label>
  1542→                                    <select class="w-full bg-slate-800 border border-slate-700 rounded p-1.5 text-slate-200 focus:border-purple-500 focus:outline-none" id="kps-var-dependent">
  1543→                                        <option value="">-- Pilih --</option>
  1544→                                        <option value="Konsentrasi">Konsentrasi</option>
  1545→                                        <option value="Waktu kemunculan endapan">Waktu kemunculan endapan</option>
  1546→                                        <option value="Warna larutan">Warna larutan</option>
  1547→                                        <option value="Volume gas">Volume gas</option>
  1548→                                    </select>
  1549→                                </div>
  1550→                                <div>
  1551→                                    <label class="text-slate-300 block mb-1">Variabel Kontrol (pilih 2):</label>
  1552→                                    <div class="space-y-1">
  1553→                                        <label class="custom-checkbox"><input type="checkbox" name="kps-control" value="Suhu"> <span class="checkmark"><svg viewBox="0 0 24 24"><path d="M5 13l4 4L19 7"/></svg></span> Suhu</label>
  1554→                                        <label class="custom-checkbox"><input type="checkbox" name="kps-control" value="Volume"> <span class="checkmark"><svg viewBox="0 0 24 24"><path d="M5 13l4 4L19 7"/></svg></span> Volume larutan</label>
  1555→                                        <label class="custom-checkbox"><input type="checkbox" name="kps-control" value="Jenis"> <span class="checkmark"><svg viewBox="0 0 24 24"><path d="M5 13l4 4L19 7"/></svg></span> Jenis larutan</label>
  1556→                                    </div>
  1557→                                </div>
  1558→                            </div>
  1559→                            <button class="mt-3 btn-secondary px-3 py-1 rounded text-[10px] uppercase font-bold w-full" onclick="checkKPS(2)">Periksa Jawaban</button>
  1560→                            <div id="kps-feedback-2" class="mt-2 text-[10px] hidden p-2 rounded"></div>
  1561→                        </div>
  1562→
  1563→                        <!-- Skill 3: Prediction -->
  1564→                        <div class="kps-card rounded-lg p-4" id="kps-card-3">
  1565→                            <div class="flex items-center gap-2 mb-3">
  1566→                                <span class="num-badge bg-blue-500/20 text-blue-400">3</span>
  1567→                                <h3 class="text-sm font-bold text-white font-display">Memprediksi</h3>
  1568→                            </div>
  1569→                            <p class="text-xs text-slate-400 mb-3">Jika konsentrasi Na₂S₂O₃ diperbesar menjadi dua kali lipat, apa yang terjadi pada waktu reaksi?</p>
  1570→                            <div class="space-y-1.5 text-xs text-slate-300">
  1571→                                <label class="quiz-option flex items-center gap-2 p-2 rounded cursor-pointer" data-question="3" data-value="correct">
  1572→                                    <input type="radio" name="kps-predict" value="correct" class="hidden"> 
  1573→                                    <span>Waktu reaksi lebih singkat karena partikel per volume bertambah.</span>
  1574→                                </label>
  1575→                                <label class="quiz-option flex items-center gap-2 p-2 rounded cursor-pointer" data-question="3" data-value="wrong1">
  1576→                                    <input type="radio" name="kps-predict" value="wrong1" class="hidden"> 
  1577→                                    <span>Waktu reaksi bertambah lama karena larutan lebih pekat.</span>
  1578→                                </label>
  1579→                                <label class="quiz-option flex items-center gap-2 p-2 rounded cursor-pointer" data-question="3" data-value="wrong2">
  1580→                                    <input type="radio" name="kps-predict" value="wrong2" class="hidden"> 
  1581→                                    <span>Waktu reaksi tetap karena suhu tidak berubah.</span>
  1582→                                </label>
  1583→                            </div>
  1584→                            <button class="mt-3 btn-secondary px-3 py-1 rounded text-[10px] uppercase font-bold w-full" onclick="checkKPS(3)">Periksa Jawaban</button>
  1585→                            <div id="kps-feedback-3" class="mt-2 text-[10px] hidden p-2 rounded"></div>
  1586→                        </div>
  1587→
  1588→                        <!-- Skill 4: Hypothesis -->
  1589→                        <div class="kps-card rounded-lg p-4" id="kps-card-4">
  1590→                            <div class="flex items-center gap-2 mb-3">
  1591→                                <span class="num-badge bg-emerald-500/20 text-emerald-400">4</span>
  1592→                                <h3 class="text-sm font-bold text-white font-display">Merumuskan Hipotesis</h3>
  1593→                            </div>
  1594→                            <p class="text-xs text-slate-400 mb-3">Lengkapi hipotesis berikut dengan memilih kata yang tepat:</p>
  1595→                            <div class="bg-slate-800/50 border border-slate-700 rounded p-3 text-xs text-slate-300 italic leading-relaxed">
  1596→                                "Jika konsentrasi Na₂S₂O₃ diperbesar, maka laju reaksi akan <span class="text-cyan-400 font-bold">...(1)...</span> karena frekuensi tumbukan efektif antar partikel <span class="text-purple-400 font-bold">...(2)...</span>."
  1597→                            </div>
  1598→                            <div class="grid grid-cols-2 gap-2 mt-3 text-xs">
  1599→                                <select class="bg-slate-800 border border-slate-700 rounded p-1.5 text-slate-200 focus:border-emerald-500 focus:outline-none" id="kps-hypo-1">
  1600→                                    <option value="">(1)...</option>
  1601→                                    <option value="meningkat">meningkat</option>
  1602→                                    <option value="menurun">menurun</option>
  1603→                                    <option value="tetap">tetap</option>
  1604→                                </select>
  1605→                                <select class="bg-slate-800 border border-slate-700 rounded p-1.5 text-slate-200 focus:border-emerald-500 focus:outline-none" id="kps-hypo-2">
  1606→                                    <option value="">(2)...</option>
  1607→                                    <option value="bertambah">bertambah</option>
  1608→                                    <option value="berkurang">berkurang</option>
  1609→                                    <option value="tidak berubah">tidak berubah</option>
  1610→                                </select>
  1611→                            </div>
  1612→                            <button class="mt-3 btn-secondary px-3 py-1 rounded text-[10px] uppercase font-bold w-full" onclick="checkKPS(4)">Periksa Jawaban</button>
  1613→                            <div id="kps-feedback-4" class="mt-2 text-[10px] hidden p-2 rounded"></div>
  1614→                        </div>
  1615→
  1616→                        <!-- Skill 5: Experiment -->
  1617→                        <div class="kps-card rounded-lg p-4" id="kps-card-5">
  1618→                            <div class="flex items-center gap-2 mb-3">
  1619→                                <span class="num-badge bg-rose-500/20 text-rose-400">5</span>
  1620→                                <h3 class="text-sm font-bold text-white font-display">Melakukan Eksperimen</h3>
  1621→                            </div>
  1622→                            <p class="text-xs text-slate-400 mb-3 leading-relaxed">Lakukan minimal 3 percobaan dengan konsentrasi berbeda di tab Makroskopis. Catat hasilnya pada tabel di bawah, lalu pindahkan ke kotak ini.</p>
  1623→                            <div class="space-y-2 text-xs">
  1624→                                <div class="grid grid-cols-3 gap-1">
  1625→                                    <input type="number" id="kps-exp-c1" placeholder="Konsentrasi 1 (M)" step="0.1" min="0.5" max="2" class="bg-slate-800 border border-slate-700 rounded p-1.5 text-slate-200 text-[11px] focus:border-rose-500 focus:outline-none">
  1626→                                    <input type="number" id="kps-exp-t1" placeholder="Waktu 1 (s)" step="0.01" class="bg-slate-800 border border-slate-700 rounded p-1.5 text-slate-200 text-[11px] focus:border-rose-500 focus:outline-none">
  1627→                                    <input type="number" id="kps-exp-r1" placeholder="1/t 1" step="0.001" class="bg-slate-800 border border-slate-700 rounded p-1.5 text-slate-200 text-[11px] focus:border-rose-500 focus:outline-none">
  1628→                                </div>
  1629→                                <div class="grid grid-cols-3 gap-1">
  1630→                                    <input type="number" id="kps-exp-c2" placeholder="Konsentrasi 2 (M)" step="0.1" min="0.5" max="2" class="bg-slate-800 border border-slate-700 rounded p-1.5 text-slate-200 text-[11px] focus:border-rose-500 focus:outline-none">
  1631→                                    <input type="number" id="kps-exp-t2" placeholder="Waktu 2 (s)" step="0.01" class="bg-slate-800 border border-slate-700 rounded p-1.5 text-slate-200 text-[11px] focus:border-rose-500 focus:outline-none">
  1632→                                    <input type="number" id="kps-exp-r2" placeholder="1/t 2" step="0.001" class="bg-slate-800 border border-slate-700 rounded p-1.5 text-slate-200 text-[11px] focus:border-rose-500 focus:outline-none">
  1633→                                </div>
  1634→                                <div class="grid grid-cols-3 gap-1">
  1635→                                    <input type="number" id="kps-exp-c3" placeholder="Konsentrasi 3 (M)" step="0.1" min="0.5" max="2" class="bg-slate-800 border border-slate-700 rounded p-1.5 text-slate-200 text-[11px] focus:border-rose-500 focus:outline-none">
  1636→                                    <input type="number" id="kps-exp-t3" placeholder="Waktu 3 (s)" step="0.01" class="bg-slate-800 border border-slate-700 rounded p-1.5 text-slate-200 text-[11px] focus:border-rose-500 focus:outline-none">
  1637→                                    <input type="number" id="kps-exp-r3" placeholder="1/t 3" step="0.001" class="bg-slate-800 border border-slate-700 rounded p-1.5 text-slate-200 text-[11px] focus:border-rose-500 focus:outline-none">
  1638→                                </div>
  1639→                            </div>
  1640→                            <button class="mt-3 btn-secondary px-3 py-1 rounded text-[10px] uppercase font-bold w-full" onclick="checkKPS(5)">Validasi Data</button>
  1641→                            <div id="kps-feedback-5" class="mt-2 text-[10px] hidden p-2 rounded"></div>
  1642→                        </div>
  1643→
  1644→                        <!-- Skill 6: Data Interpretation -->
  1645→                        <div class="kps-card rounded-lg p-4" id="kps-card-6">
  1646→                            <div class="flex items-center gap-2 mb-3">
  1647→                                <span class="num-badge bg-teal-500/20 text-teal-400">6</span>
  1648→                                <h3 class="text-sm font-bold text-white font-display">Menginterpretasi Data</h3>
  1649→                            </div>
  1650→                            <p class="text-xs text-slate-400 mb-3">Berdasarkan data yang Anda peroleh, pola hubungan seperti apa antara konsentrasi dan laju (1/t)?</p>
  1651→                            <div class="space-y-1.5 text-xs text-slate-300">
  1652→                                <label class="quiz-option flex items-center gap-2 p-2 rounded cursor-pointer" data-question="6" data-value="correct">
  1653→                                    <input type="radio" name="kps-interpret" value="correct" class="hidden"> 
  1654→                                    <span>Berbanding lurus: konsentrasi naik → laju naik</span>
  1655→                                </label>
  1656→                                <label class="quiz-option flex items-center gap-2 p-2 rounded cursor-pointer" data-question="6" data-value="wrong1">
  1657→                                    <input type="radio" name="kps-interpret" value="wrong1" class="hidden"> 
  1658→                                    <span>Berbanding terbalik: konsentrasi naik → laju turun</span>
  1659→                                </label>
  1660→                                <label class="quiz-option flex items-center gap-2 p-2 rounded cursor-pointer" data-question="6" data-value="wrong2">
  1661→                                    <input type="radio" name="kps-interpret" value="wrong2" class="hidden"> 
  1662→                                    <span>Tidak ada hubungan yang jelas</span>
  1663→                                </label>
  1664→                            </div>
  1665→                            <button class="mt-3 btn-secondary px-3 py-1 rounded text-[10px] uppercase font-bold w-full" onclick="checkKPS(6)">Periksa Jawaban</button>
  1666→                            <div id="kps-feedback-6" class="mt-2 text-[10px] hidden p-2 rounded"></div>
  1667→                        </div>
  1668→
  1669→                        <!-- Skill 7: Communication -->
  1670→                        <div class="kps-card rounded-lg p-4 md:col-span-2" id="kps-card-7">
  1671→                            <div class="flex items-center gap-2 mb-3">
  1672→                                <span class="num-badge bg-indigo-500/20 text-indigo-400">7</span>
  1673→                                <h3 class="text-sm font-bold text-white font-display">Mengomunikasikan / Menyimpulkan</h3>
  1674→                            </div>
  1675→                            <p class="text-xs text-slate-400 mb-3">Tulis kesimpulan akhir eksperimen dengan struktur: tujuan, hasil utama, dan hubungan konsep. Minimal 80 kata.</p>
  1676→                            <textarea class="w-full bg-slate-800/50 border border-slate-700 rounded p-2 text-xs text-slate-200 focus:border-indigo-500 focus:outline-none transition resize-none" rows="4" id="kps-conclude" placeholder="Berdasarkan eksperimen, dapat disimpulkan bahwa..."></textarea>
  1677→                            <div class="flex justify-between text-[10px] text-slate-500 mt-1">
  1678→                                <span><span id="kps-conclude-count">0</span>/80 kata minimal</span>
  1679→                                <span id="kps-conclude-status" class="text-slate-500">— belum lengkap —</span>
  1680→                            </div>
  1681→                        </div>
  1682→
  1683→                    </div>
  1684→
  1685→                    <div class="mt-6 flex flex-col sm:flex-row justify-between items-center gap-3 border-t border-slate-700 pt-4">
  1686→                        <div class="text-xs text-slate-400">
  1687→                            Skor KPS Objektif: <span id="kps-score" class="font-bold text-amber-400 font-mono">0</span>/4
  1688→                        </div>
  1689→                        <div class="flex gap-2">
  1690→                            <button id="btn-reset-kps" class="btn-secondary px-4 py-2 rounded-lg text-xs font-bold uppercase">Reset</button>
  1691→                            <button id="btn-download-kps" class="btn-primary px-6 py-2 rounded-lg text-sm font-bold">Download Jawaban</button>
  1692→                        </div>
  1693→                    </div>
  1694→                </div>
  1695→            </div>
  1696→
  1697→            <!-- ============== QUIZ PANEL ============== -->
  1698→            <div id="panel-quiz" class="panel-hidden tab-content">
  1699→                <div class="glass-panel rounded-xl p-6">
  1700→                    <div class="section-title mb-5">
  1701→                        <div class="section-title-icon"><svg class="w-6 h-6 text-rose-400" 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 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"/></svg></div>
  1702→                        <div>
  1703→                            <h2 class="text-lg font-bold text-white font-display">Asesmen Pemahaman</h2>
  1704→                            <p class="text-xs text-slate-400">10 soal pilihan ganda • Setiap jawaban dilengkapi pembahasan</p>
  1705→                        </div>
  1706→                    </div>
  1707→
  1708→                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-5">
  1709→                        <div class="lg:col-span-2 space-y-4" id="quiz-container">
  1710→                            <!-- Questions will be injected by JS -->
  1711→                        </div>
  1712→
  1713→                        <div class="space-y-4">
  1714→                            <div class="glass-panel-strong rounded-xl p-5 sticky top-4">
  1715→                                <h3 class="text-sm font-bold text-rose-400 uppercase tracking-wider mb-3 font-display">Hasil Asesmen</h3>
  1716→                                
  1717→                                <!-- Score Circle -->
  1718→                                <div class="flex justify-center mb-4">
  1719→                                    <div class="relative w-32 h-32">
  1720→                                        <svg class="progress-ring w-full h-full" viewBox="0 0 120 120">
  1721→                                            <circle cx="60" cy="60" r="52" fill="none" stroke="rgba(100,116,139,0.2)" stroke-width="8"/>
  1722→                                            <circle id="score-circle" class="progress-ring-circle" cx="60" cy="60" r="52" fill="none" stroke="url(#scoreGradient)" stroke-width="8" stroke-linecap="round" stroke-dasharray="326.7" stroke-dashoffset="326.7"/>
  1723→                                            <defs>
  1724→                                                <linearGradient id="scoreGradient" x1="0%" y1="0%" x2="100%" y2="100%">
  1725→                                                    <stop offset="0%" stop-color="#10b981"/>
  1726→                                                    <stop offset="100%" stop-color="#06b6d4"/>
  1727→                                                </linearGradient>
  1728→                                            </defs>
  1729→                                        </svg>
  1730→                                        <div class="absolute inset-0 flex flex-col items-center justify-center">
  1731→                                            <div class="text-3xl font-bold text-white font-display" id="quiz-score-display">0</div>
  1732→                                            <div class="text-[10px] text-slate-400 uppercase tracking-wider">dari 10</div>
  1733→                                        </div>
  1734→                                    </div>
  1735→                                </div>
  1736→
  1737→                                <div class="space-y-2 text-xs">
  1738→                                    <div class="flex justify-between">
  1739→                                        <span class="text-slate-400">Benar:</span>
  1740→                                        <span id="quiz-correct" class="text-emerald-400 font-bold">0</span>
  1741→                                    </div>
  1742→                                    <div class="flex justify-between">
  1743→                                        <span class="text-slate-400">Salah:</span>
  1744→                                        <span id="quiz-wrong" class="text-rose-400 font-bold">0</span>
  1745→                                    </div>
  1746→                                    <div class="flex justify-between">
  1747→                                        <span class="text-slate-400">Belum dijawab:</span>
  1748→                                        <span id="quiz-unanswered" class="text-slate-300 font-bold">10</span>
  1749→                                    </div>
  1750→                                </div>
  1751→
  1752→                                <div class="mt-4 pt-4 border-t border-slate-700">
  1753→                                    <div id="quiz-grade" class="text-center text-sm font-bold text-slate-400">Belum mulai</div>
  1754→                                    <div id="quiz-message" class="text-center text-[10px] text-slate-500 mt-1">Jawab semua soal untuk melihat nilai</div>
  1755→                                </div>
  1756→
  1757→                                <div class="mt-4 grid grid-cols-5 gap-1" id="quiz-grid">
  1758→                                    <!-- Numbered grid will be injected -->
  1759→                                </div>
  1760→
  1761→                                <button id="btn-reset-quiz" class="w-full mt-4 btn-secondary py-2 rounded-lg text-xs uppercase font-bold">Ulangi Kuis</button>
  1762→                            </div>
  1763→                        </div>
  1764→                    </div>
  1765→                </div>
  1766→            </div>
  1767→
  1768→        </div>
  1769→    </div>
  1770→</div>
  1771→
  1772→<script type="module">
  1773→    import * as THREE from 'three';
  1774→    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
  1775→
  1776→    // === STATE ===
  1777→    let scene, camera, renderer, controls;
  1778→    
  1779→    let isMacroReacting = false;
  1780→    let isMicroReacting = false;
  1781→    
  1782→    let startTime = 0;
  1783→    let currentTemp = 25;
  1784→    let currentConc = 1.0;
  1785→    let cloudiness = 0;
  1786→    let chartMacro, chartCollision, chartEnergy;
  1787→    let currentMode = 'macro';
  1788→    let guideStep = 0; 
  1789→    
  1790→    let expDesign = {
  1791→        objective: 'conc', 
  1792→        tools: { measure: true, thermo: false }
  1793→    };
  1794→    
  1795→    let EaValue = 50; 
  1796→    let microTemp = 25;
  1797→    let molecules = [];
  1798→    let totalCollisionsTemp = 0;
  1799→    let totalReactionsTemp = 0;
  1800→    let collisionHistory = [];
  1801→    let reactionHistory = [];
  1802→    let lastChartUpdate = 0;
  1803→    let lastSecondMark = 0;
  1804→    let collisionsThisSecond = 0;
  1805→    let reactionsThisSecond = 0;
  1806→    let microGroup;
  1807→    let labGroup;
  1808→    let liquidMesh, crossMesh;
  1809→    let bubbles = []; 
  1810→    let flaskMesh;
  1811→    let starField;
  1812→    let particleTrails = [];
  1813→    let reactionFlashes = [];
  1814→    let liquidSurfaceMesh;
  1815→    let dropperMesh;
  1816→    let stirrerMesh;
  1817→    let autoRotate = false;
  1818→    let comparisonMode = false;
  1819→    let catalystActive = false;
  1820→    let cameraPresets = {};
  1821→    let clock;
  1822→    let mixAnimation = null;
  1823→
  1824→    // === NEW STATE VARIABLES ===
  1825→    let sulfurParticles = [];
  1826→    let isMacroPaused = false;
  1827→    let pauseTimeOffset = 0;
  1828→    let microSpeed = 1;
  1829→    let soundEnabled = false;
  1830→    let audioContext = null;
  1831→    let experimentHistory = [];
  1832→    let currentTourStep = 0;
  1833→    let labGroup2 = null;
  1834→    let liquidMesh2 = null;
  1835→    let isComparison2Reacting = false;
  1836→    let startTime2 = 0;
  1837→    let cloudiness2 = 0;
  1838→    let conc2 = 1.5;
  1839→
  1840→    // Quiz state
  1841→    const quizAnswers = {};
  1842→    let quizLocked = {};
  1843→
  1844→    // === QUIZ DATA ===
  1845→    const quizData = [
  1846→        {
  1847→            q: "Reaksi antara Na₂S₂O₃ dan HCl menghasilkan endapan yang membuat larutan menjadi keruh. Zat yang menyebabkan kekeruhan adalah...",
  1848→            options: ["NaCl (garam dapur)", "S (belerang)", "SO₂ (gas)", "H₂O (air)"],
  1849→            correct: 1,
  1850→            explanation: "Belerang (S) terbentuk sebagai endapan kuning yang membuat larutan keruh, sebagaimana persamaan reaksi: Na₂S₂O₃ + 2HCl → S↓ + 2NaCl + SO₂ + H₂O."
  1851→        },
  1852→        {
  1853→            q: "Menurut Teori Tumbukan, dua syarat agar tumbukan menghasilkan reaksi (tumbukan efektif) adalah...",
  1854→            options: [
  1855→                "Energi tinggi dan volume besar",
  1856→                "Energi ≥ Eₐ dan orientasi tepat",
  1857→                "Suhu tinggi dan tekanan rendah",
  1858→                "Katalis dan suhu rendah"
  1859→            ],
  1860→            correct: 1,
  1861→            explanation: "Tumbukan efektif memerlukan dua syarat: (1) energi kinetik partikel ≥ energi aktivasi (Eₐ), dan (2) orientasi tumbukan yang tepat sehingga ikatan dapat terbentuk."
  1862→        },
  1863→        {
  1864→            q: "Jika konsentrasi Na₂S₂O₃ dinaikkan dari 0,5 M menjadi 1,5 M, maka waktu yang dibutuhkan untuk tanda 'X' menghilang akan...",
  1865→            options: ["Bertambah lama", "Berkurang", "Tetap", "Tidak dapat diprediksi"],
  1866→            correct: 1,
  1867→            explanation: "Konsentrasi lebih tinggi → lebih banyak partikel per volume → frekuensi tumbukan efektif meningkat → reaksi berlangsung lebih cepat → waktu reaksi berkurang."
  1868→        },
  1869→        {
  1870→            q: "Pada eksperimen ini, laju reaksi dihitung dengan rumus v = 1/t. Hal ini dilakukan karena...",
  1871→            options: [
  1872→                "Jumlah endapan yang terbentuk saat X menghilang dianggap konstan",
  1873→                "Energi aktivasi tidak terlibat",
  1874→                "HCl tidak ikut bereaksi",
  1875→                "Volume selalu berubah"
  1876→            ],
  1877→            correct: 0,
  1878→            explanation: "Kita menggunakan waktu saat tanda X tepat menghilang sebagai indikator. Karena jumlah endapan yang terbentuk pada saat itu dianggap konstan, maka laju (v) berbanding terbalik dengan waktu (t): v = 1/t."
  1879→        },
  1880→        {
  1881→            q: "Persamaan Arrhenius menghubungkan konstanta laju (k) dengan suhu dan energi aktivasi. Persamaan tersebut adalah...",
  1882→            options: [
  1883→                "k = A·e^(Eₐ/RT)",
  1884→                "k = A·e^(−Eₐ/RT)",
  1885→                "k = A·ln(Eₐ/RT)",
  1886→                "k = RT/Eₐ"
  1887→            ],
  1888→            correct: 1,
  1889→            explanation: "Persamaan Arrhenius: k = A·e^(−Eₐ/RT). Tanda negatif pada eksponen menunjukkan bahwa k menurun ketika Eₐ meningkat (reaksi lebih lambat), dan k meningkat ketika T meningkat (reaksi lebih cepat)."
  1890→        },
  1891→        {
  1892→            q: "Pada reaksi orde satu terhadap reaktan A, jika konsentrasi A dilipatduakan, maka laju reaksi akan...",
  1893→            options: ["Tetap", "Lipatdua", "Lipatempat", "Lipattiga"],
  1894→            correct: 1,
  1895→            explanation: "Untuk reaksi orde satu: v = k[A]. Jika [A] dilipatduakan menjadi 2[A], maka v = k·(2[A]) = 2·k[A] = 2v. Jadi laju reaksi menjadi dua kali lipat."
  1896→        },
  1897→        {
  1898→            q: "Manakah dari berikut ini BUKAN faktor yang memengaruhi laju reaksi?",
  1899→            options: ["Suhu", "Konsentrasi", "Warna larutan", "Katalis"],
  1900→            correct: 2,
  1901→            explanation: "Warna larutan bukan faktor yang memengaruhi laju reaksi. Faktor yang memengaruhi: suhu, konsentrasi, luas permukaan, katalis, dan tekanan (untuk gas)."
  1902→        },
  1903→        {
  1904→            q: "Katalis dapat mempercepat reaksi dengan cara...",
  1905→            options: [
  1906→                "Menurunkan energi aktivasi dengan menyediakan jalur alternatif",
  1907→                "Menaikkan suhu reaksi",
  1908→                "Menambah konsentrasi reaktan",
  1909→                "Mengubah sifat produk reaksi"
  1910→            ],
  1911→            correct: 0,
  1912→            explanation: "Katalis bekerja dengan menurunkan energi aktivasi (Eₐ) melalui penyediaan jalur reaksi alternatif. Eₐ lebih rendah berarti lebih banyak partikel memiliki energi ≥ Eₐ, sehingga tumbukan efektif meningkat."
  1913→        },
  1914→        {
  1915→            q: "Distribusi Maxwell-Boltzmann menggambarkan...",
  1916→            options: [
  1917→                "Distribusi partikel berdasarkan ukuran",
  1918→                "Distribusi partikel berdasarkan energi kinetik",
  1919→                "Distribusi partikel berdasarkan massa",
  1920→                "Distribusi partikel berdasarkan waktu"
  1921→            ],
  1922→            correct: 1,
  1923→            explanation: "Distribusi Maxwell-Boltzmann menggambarkan distribusi energi kinetik partikel pada suhu tertentu. Pada suhu lebih tinggi, kurva melebar dan lebih banyak partikel memiliki energi tinggi (≥ Eₐ)."
  1924→        },
  1925→        {
  1926→            q: "Dalam eksperimen ini, variabel kontrol yang harus dijaga tetap adalah...",
  1927→            options: [
  1928→                "Konsentrasi Na₂S₂O₃",
  1929→                "Waktu reaksi",
  1930→                "Volume larutan dan suhu",
  1931→                "Jumlah endapan yang terbentuk"
  1932→            ],
  1933→            correct: 2,
  1934→            explanation: "Variabel kontrol harus dijaga tetap agar hasil valid: volume larutan total, suhu, konsentrasi HCl, dan kecepatan pengadukan. Variabel bebas adalah konsentrasi Na₂S₂O₃, variabel terikat adalah waktu reaksi."
  1935→        }
  1936→    ];
  1937→
  1938→    // === CHART INIT ===
  1939→    function initCharts() {
  1940→        const ctxMacro = document.getElementById('reactionChart').getContext('2d');
  1941→        chartMacro = new Chart(ctxMacro, {
  1942→            type: 'scatter',
  1943→            data: {
  1944→                datasets: [{
  1945→                    label: 'Laju',
  1946→                    data: [],
  1947→                    borderColor: '#10b981',
  1948→                    backgroundColor: 'rgba(16, 185, 129, 0.3)',
  1949→                    borderWidth: 2,
  1950→                    pointRadius: 6,
  1951→                    pointHoverRadius: 8,
  1952→                    showLine: true,
  1953→                    tension: 0.3
  1954→                }]
  1955→            },
  1956→            options: {
  1957→                responsive: true,
  1958→                maintainAspectRatio: false,
  1959→                scales: {
  1960→                    x: { title: { display: true, text: 'Konsentrasi (M)', color: '#64748b' }, grid: { color: 'rgba(100, 116, 139, 0.1)' }, ticks: { color: '#64748b' } },
  1961→                    y: { title: { display: true, text: 'Laju 1/t (s⁻¹)', color: '#64748b' }, grid: { color: 'rgba(100, 116, 139, 0.1)' }, ticks: { color: '#64748b' }, beginAtZero: true }
  1962→                },
  1963→                plugins: {
  1964→                    legend: { display: false },
  1965→                    tooltip: {
  1966→                        backgroundColor: 'rgba(15, 26, 20, 0.95)',
  1967→                        borderColor: 'rgba(16, 185, 129, 0.3)',
  1968→                        borderWidth: 1,
  1969→                        callbacks: {
  1970→                            label: (ctx) => `[${ctx.parsed.x} M] → laju = ${ctx.parsed.y.toFixed(4)} s⁻¹`
  1971→                        }
  1972→                    }
  1973→                }
  1974→            }
  1975→        });
  1976→
  1977→        const ctxCollision = document.getElementById('collisionChart').getContext('2d');
  1978→        chartCollision = new Chart(ctxCollision, {
  1979→            type: 'line',
  1980→            data: {
  1981→                labels: [],
  1982→                datasets: [
  1983→                    { label: 'Tumbukan', data: [], borderColor: '#22d3ee', backgroundColor: 'rgba(34, 211, 238, 0.1)', borderWidth: 2, tension: 0.4, fill: true, pointRadius: 0 },
  1984→                    { label: 'Reaksi', data: [], borderColor: '#fde047', backgroundColor: 'rgba(253, 224, 71, 0.1)', borderWidth: 2, tension: 0.4, fill: true, pointRadius: 0 }
  1985→                ]
  1986→            },
  1987→            options: {
  1988→                responsive: true,
  1989→                maintainAspectRatio: false,
  1990→                animation: false,
  1991→                scales: {
  1992→                    x: { title: { display: true, text: 'Waktu (s)', color: '#64748b', font: { size: 10 } }, grid: { color: 'rgba(100, 116, 139, 0.05)' }, ticks: { color: '#64748b', font: { size: 9 } } },
  1993→                    y: { title: { display: true, text: 'Jumlah', color: '#64748b', font: { size: 10 } }, grid: { color: 'rgba(100, 116, 139, 0.05)' }, ticks: { color: '#64748b', font: { size: 9 } }, beginAtZero: true }
  1994→                },
  1995→                plugins: { legend: { display: false } }
  1996→            }
  1997→        });
  1998→
  1999→        const ctxEnergy = document.getElementById('energyChart').getContext('2d');
  2000→        chartEnergy = new Chart(ctxEnergy, {

[showing lines 1-2000 of 4452; use offset=2001 with limit to continue reading]