npm - @mazees/mark - Versions diffs - 5.0.0 - Mend

@mazees/mark 5.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (227) hide show

package/LICENSE +29 -0
package/README.md +209 -0
package/bin/mark.js +27 -0
package/out/renderer/assets/icon-DHo2CYph.svg +1 -0
package/out/renderer/assets/index-G2fADWO-.js +4768 -0
package/out/renderer/assets/index-f3mVse3c.css +1 -0
package/out/renderer/assets/music-cover-CG4vi3kZ.png +0 -0
package/out/renderer/assets/poppins-devanagari-400-normal-CJDn6rn8.woff2 +0 -0
package/out/renderer/assets/poppins-devanagari-400-normal-CqVvlrh5.woff +0 -0
package/out/renderer/assets/poppins-devanagari-500-normal-BIdkeU1p.woff2 +0 -0
package/out/renderer/assets/poppins-devanagari-500-normal-DMPDjHtT.woff +0 -0
package/out/renderer/assets/poppins-devanagari-600-normal-ClASKHrr.woff +0 -0
package/out/renderer/assets/poppins-devanagari-600-normal-STEjXBNN.woff2 +0 -0
package/out/renderer/assets/poppins-devanagari-700-normal-O-jipLrW.woff2 +0 -0
package/out/renderer/assets/poppins-devanagari-700-normal-fHs-vx92.woff +0 -0
package/out/renderer/assets/poppins-latin-400-normal-BOb3E3N0.woff +0 -0
package/out/renderer/assets/poppins-latin-400-normal-cpxAROuN.woff2 +0 -0
package/out/renderer/assets/poppins-latin-500-normal-C8OXljZJ.woff2 +0 -0
package/out/renderer/assets/poppins-latin-500-normal-DGXqpDMm.woff +0 -0
package/out/renderer/assets/poppins-latin-600-normal-BJdTmd5m.woff +0 -0
package/out/renderer/assets/poppins-latin-600-normal-zEkxB9Mr.woff2 +0 -0
package/out/renderer/assets/poppins-latin-700-normal-BVuQR_eA.woff +0 -0
package/out/renderer/assets/poppins-latin-700-normal-Qrb0O0WB.woff2 +0 -0
package/out/renderer/assets/poppins-latin-ext-400-normal-DaBSavcJ.woff +0 -0
package/out/renderer/assets/poppins-latin-ext-400-normal-by3JarPu.woff2 +0 -0
package/out/renderer/assets/poppins-latin-ext-500-normal-CK-6C4Hw.woff2 +0 -0
package/out/renderer/assets/poppins-latin-ext-500-normal-CgAe2rWW.woff +0 -0
package/out/renderer/assets/poppins-latin-ext-600-normal-CAhIAdZj.woff2 +0 -0
package/out/renderer/assets/poppins-latin-ext-600-normal-Df5ffKXP.woff +0 -0
package/out/renderer/assets/poppins-latin-ext-700-normal-DctTR6Tg.woff +0 -0
package/out/renderer/assets/poppins-latin-ext-700-normal-cby-RkWa.woff2 +0 -0
package/out/renderer/favicon.ico +0 -0
package/out/renderer/icon-256.png +0 -0
package/out/renderer/icon.svg +1 -0
package/out/renderer/index.html +25 -0
package/out/renderer/manifest.json +25 -0
package/out/renderer/robot-simulator.html +1640 -0
package/package.json +106 -0
package/src/cli/index.js +332 -0
package/src/cli/monitor.js +413 -0
package/src/cli/theme.js +347 -0
package/src/launcher/MarkTray.cs +227 -0
package/src/main/browser-agent.js +1132 -0
package/src/main/git-service.js +90 -0
package/src/main/google/google-calendar.js +69 -0
package/src/main/google/google-drive.js +263 -0
package/src/main/google/google-gmail.js +131 -0
package/src/main/google/google-service.js +241 -0
package/src/main/node-tools.js +23 -0
package/src/main/pc-agent-scripts/mouse-locker.ps1 +76 -0
package/src/main/pc-agent-scripts/ocr-region.ps1 +185 -0
package/src/main/pc-agent-scripts/pc-daemon.ps1 +726 -0
package/src/main/pc-agent-scripts/pc-overlay.ps1 +253 -0
package/src/main/pc-agent-scripts/pick-folder.ps1 +33 -0
package/src/main/pc-agent-scripts/read-ui.ps1 +181 -0
package/src/main/pc-agent-scripts/take-screenshot.ps1 +24 -0
package/src/main/pc-agent-scripts/win-action.ps1 +380 -0
package/src/main/plugins/plugin-loader.js +306 -0
package/src/main/skills/skill-manager.js +265 -0
package/src/main/syntax-validator.js +455 -0
package/src/main/task-daemon.js +117 -0
package/src/main/telegram/telegram-service.js +835 -0
package/src/main/tools/browser-tools.js +516 -0
package/src/main/tools/file-tools.js +1126 -0
package/src/main/tools/git-tools.js +79 -0
package/src/main/tools/google-tools.js +566 -0
package/src/main/tools/index.js +36 -0
package/src/main/tools/media-tools.js +42 -0
package/src/main/tools/system-tools.js +295 -0
package/src/main/tools/task-tools.js +73 -0
package/src/main/tools/telegram-tools.js +101 -0
package/src/renderer/index.html +24 -0
package/src/renderer/public/favicon.ico +0 -0
package/src/renderer/public/icon-256.png +0 -0
package/src/renderer/public/icon.svg +1 -0
package/src/renderer/public/manifest.json +25 -0
package/src/renderer/public/robot-simulator.html +1640 -0
package/src/renderer/src/App.jsx +304 -0
package/src/renderer/src/api/ai/awareness.js +294 -0
package/src/renderer/src/api/ai/chatSummarizer.js +79 -0
package/src/renderer/src/api/ai/contextCompactor.js +129 -0
package/src/renderer/src/api/ai/contextManager.js +1130 -0
package/src/renderer/src/api/ai/core.js +167 -0
package/src/renderer/src/api/ai/index.js +4 -0
package/src/renderer/src/api/ai/memoryGroomer.js +101 -0
package/src/renderer/src/api/ai/persona.js +115 -0
package/src/renderer/src/api/ai/planning.js +317 -0
package/src/renderer/src/api/ai/relationship.js +177 -0
package/src/renderer/src/api/ai/skillSynthesizer.js +168 -0
package/src/renderer/src/api/ai/tools.js +167 -0
package/src/renderer/src/api/ai/utils.js +359 -0
package/src/renderer/src/api/db.js +1013 -0
package/src/renderer/src/api/oramaStore.js +592 -0
package/src/renderer/src/api/ragPipeline.js +87 -0
package/src/renderer/src/api/subagent/subagentExecutor.js +780 -0
package/src/renderer/src/api/subagent/subagentPrompt.js +44 -0
package/src/renderer/src/api/subagent/subagentStore.js +173 -0
package/src/renderer/src/api/taskExecutor.js +18 -0
package/src/renderer/src/api/taskStore.js +315 -0
package/src/renderer/src/api/tools/core-tools.js +707 -0
package/src/renderer/src/api/tools/index.js +151 -0
package/src/renderer/src/api/turnPairMigrator.js +200 -0
package/src/renderer/src/api/vectorMemory.js +136 -0
package/src/renderer/src/api/wakeWord.js +101 -0
package/src/renderer/src/api/web-bridge.js +885 -0
package/src/renderer/src/api/webSpeech.js +178 -0
package/src/renderer/src/api/workspaceRag.js +76 -0
package/src/renderer/src/assets/electron.svg +10 -0
package/src/renderer/src/assets/icon.svg +1 -0
package/src/renderer/src/assets/main.css +589 -0
package/src/renderer/src/assets/music-cover.png +0 -0
package/src/renderer/src/assets/wavy-lines.svg +25 -0
package/src/renderer/src/components/Chat/ApprovalBubble.jsx +127 -0
package/src/renderer/src/components/Chat/CodeBlock.jsx +83 -0
package/src/renderer/src/components/Chat/DurableTaskBubble.jsx +455 -0
package/src/renderer/src/components/Chat/FileDiffModal.jsx +328 -0
package/src/renderer/src/components/Chat/GeminiWidgets.jsx +82 -0
package/src/renderer/src/components/Chat/MemoryFooterBubble.jsx +34 -0
package/src/renderer/src/components/Chat/MessageBubble.jsx +459 -0
package/src/renderer/src/components/Chat/PluginExecutionBubble.jsx +41 -0
package/src/renderer/src/components/Chat/ThinkingBubble.jsx +316 -0
package/src/renderer/src/components/Chat/YoutubeSearchBubble.jsx +43 -0
package/src/renderer/src/components/Chat/YoutubeSummaryBubble.jsx +40 -0
package/src/renderer/src/components/Chat/index.js +11 -0
package/src/renderer/src/components/ChatList.jsx +434 -0
package/src/renderer/src/components/GlobalCameraManager.jsx +67 -0
package/src/renderer/src/components/Versions.jsx +15 -0
package/src/renderer/src/components/YoutubeMusicPlayer.jsx +375 -0
package/src/renderer/src/components/camera/CameraPreview.jsx +236 -0
package/src/renderer/src/components/config/AiEngineSection.jsx +363 -0
package/src/renderer/src/components/config/CameraSection.jsx +100 -0
package/src/renderer/src/components/config/PermissionsSection.jsx +130 -0
package/src/renderer/src/components/config/ShortcutSection.jsx +102 -0
package/src/renderer/src/components/config/VoiceSection.jsx +110 -0
package/src/renderer/src/components/config/index.js +5 -0
package/src/renderer/src/components/core/Avatar.jsx +2197 -0
package/src/renderer/src/components/core/ConfirmModal.jsx +80 -0
package/src/renderer/src/components/core/DraggableHoloCard.jsx +125 -0
package/src/renderer/src/components/core/FloatingMenu.jsx +272 -0
package/src/renderer/src/components/core/HoloCard.jsx +64 -0
package/src/renderer/src/components/core/InputBar.jsx +1346 -0
package/src/renderer/src/components/core/ProcessPanel.jsx +216 -0
package/src/renderer/src/components/core/ResponseArea.jsx +149 -0
package/src/renderer/src/components/core/StatusIndicator.jsx +59 -0
package/src/renderer/src/components/core/ThoughtNeuralFlow.jsx +168 -0
package/src/renderer/src/components/core/ToolClustersDeck.jsx +210 -0
package/src/renderer/src/components/core/native-skills.js +43 -0
package/src/renderer/src/components/neural-core/EmotionalCortexLobe.jsx +359 -0
package/src/renderer/src/components/neural-core/NodeDissectionModal.jsx +57 -0
package/src/renderer/src/components/neural-core/ProceduralMatrixLobe.jsx +193 -0
package/src/renderer/src/components/neural-core/ProceduralSkillModal.jsx +53 -0
package/src/renderer/src/components/neural-core/ResetAiModal.jsx +198 -0
package/src/renderer/src/components/neural-core/SynapticMemoryLobe.jsx +204 -0
package/src/renderer/src/components/neural-core/traitMeta.js +102 -0
package/src/renderer/src/components/subagent/AgentChatFeed.jsx +603 -0
package/src/renderer/src/components/subagent/AgentInspector.jsx +224 -0
package/src/renderer/src/components/subagent/AgentSidebar.jsx +216 -0
package/src/renderer/src/components/subagent/SubagentIntercom.jsx +572 -0
package/src/renderer/src/components/subagent/SubagentTopologyMap.jsx +423 -0
package/src/renderer/src/contexts/ApprovalContext.jsx +425 -0
package/src/renderer/src/contexts/ChatContext.jsx +61 -0
package/src/renderer/src/contexts/YoutubeMusicContext.jsx +333 -0
package/src/renderer/src/data/faqData.js +202 -0
package/src/renderer/src/hooks/agent/executeAgentTool.js +895 -0
package/src/renderer/src/hooks/agent/index.js +4 -0
package/src/renderer/src/hooks/agent/useMarkMusic.js +75 -0
package/src/renderer/src/hooks/agent/useMarkPlan.js +2739 -0
package/src/renderer/src/hooks/agent/useMarkState.js +173 -0
package/src/renderer/src/hooks/agent/useMarkYoutube.js +82 -0
package/src/renderer/src/hooks/agent/useRelationalGrowth.js +201 -0
package/src/renderer/src/hooks/telegram/useTelegramBot.js +63 -0
package/src/renderer/src/hooks/useAwareness.js +289 -0
package/src/renderer/src/hooks/useChatArchiver.js +52 -0
package/src/renderer/src/hooks/useConfirm.jsx +68 -0
package/src/renderer/src/hooks/useMarkAgent.js +454 -0
package/src/renderer/src/hooks/useMemoryGroomer.js +152 -0
package/src/renderer/src/hooks/useVAD.js +511 -0
package/src/renderer/src/hooks/useWebSpeechWakeWord.js +122 -0
package/src/renderer/src/main.jsx +12 -0
package/src/renderer/src/pages/ChatStudio.jsx +922 -0
package/src/renderer/src/pages/Configuration.jsx +360 -0
package/src/renderer/src/pages/GoogleWorkspace.jsx +293 -0
package/src/renderer/src/pages/Guidebook.jsx +917 -0
package/src/renderer/src/pages/Knowledge.jsx +241 -0
package/src/renderer/src/pages/MarkHome.jsx +491 -0
package/src/renderer/src/pages/NeuralCore.jsx +786 -0
package/src/renderer/src/pages/Plugins.jsx +630 -0
package/src/renderer/src/pages/SkillEditor.jsx +380 -0
package/src/renderer/src/pages/Skills.jsx +219 -0
package/src/renderer/src/pages/Subagents.jsx +342 -0
package/src/renderer/src/pages/TelegramBot.jsx +343 -0
package/src/renderer/src/utils/chatContentParser.js +203 -0
package/src/renderer/src/utils/toolClusters.js +201 -0
package/src/server/bin/sha3_wasm_bg.wasm +0 -0
package/src/server/config-manager.js +57 -0
package/src/server/index.js +195 -0
package/src/server/launcher.js +87 -0
package/src/server/memory/db-store.js +758 -0
package/src/server/memory/orama-store.js +177 -0
package/src/server/memory/vector-engine.js +109 -0
package/src/server/routes/ai.routes.js +280 -0
package/src/server/routes/awareness.routes.js +62 -0
package/src/server/routes/chat.routes.js +61 -0
package/src/server/routes/config.routes.js +41 -0
package/src/server/routes/index.js +35 -0
package/src/server/routes/integrations.routes.js +116 -0
package/src/server/routes/memory.routes.js +256 -0
package/src/server/routes/plugins.routes.js +72 -0
package/src/server/routes/skills.routes.js +139 -0
package/src/server/routes/subagents.routes.js +70 -0
package/src/server/routes/tasks.routes.js +175 -0
package/src/server/routes/workspace.routes.js +127 -0
package/src/server/services/ai/ai-utils.js +161 -0
package/src/server/services/ai/openai-provider.js +757 -0
package/src/server/services/ai/web-provider.js +729 -0
package/src/server/services/ai-bridge.js +46 -0
package/src/server/services/deepseek-web.js +956 -0
package/src/server/services/gemini-web.js +170 -0
package/src/server/services/notification-service.js +91 -0
package/src/server/services/updater.js +125 -0
package/src/server/tools/awareness-tracker.js +292 -0
package/src/server/tools/group-tools.js +1164 -0
package/src/server/tools/media-tools.js +244 -0
package/src/server/tools/pc-agent.js +327 -0
package/src/server/tools/screen-service.js +51 -0
package/src/server/ws-hub.js +168 -0
package/src/shared/parsers/mark-tag-parser.js +275 -0

package/src/renderer/public/robot-simulator.html ADDED Viewed

@@ -0,0 +1,1640 @@
+<!doctype html>
+<html lang="id" class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>MARK 2.5D Cyber-Droid Simulator - Lifelike Living Companion</title>
+    <script src="https://www.gstatic.com/antigravity/web/dev/tailwindcss.min.js"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Poppins:wght@400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <style>
+      :root {
+        --color-primary: #1fb854;
+        --color-neutral: #19362d;
+        --color-base-100: #0f1715;
+        --color-base-200: #13221b;
+        --color-base-300: #19362d;
+        --color-base-content: #cac9c9;
+        --font-sans: 'Poppins', system-ui, -apple-system, sans-serif;
+        --font-mono: 'JetBrains Mono', ui-monospace, monospace;
+        --current-accent: #1fb854;
+      }
+      body {
+        font-family: var(--font-sans);
+        background-color: var(--color-base-100);
+        color: var(--color-base-content);
+      }
+      .font-mono {
+        font-family: var(--font-mono);
+      }
+      @keyframes scanline {
+        0% {
+          transform: translateY(-100%);
+        }
+        100% {
+          transform: translateY(160%);
+        }
+      }
+      @keyframes glitchShake {
+        0% {
+          transform: translate(0, 0);
+        }
+        25% {
+          transform: translate(-3px, 2px);
+        }
+        50% {
+          transform: translate(3px, -2px);
+        }
+        75% {
+          transform: translate(-2px, -1px);
+        }
+        100% {
+          transform: translate(0, 0);
+        }
+      }
+      @keyframes forestPulse {
+        0%,
+        100% {
+          box-shadow:
+            0 0 25px rgba(31, 184, 84, 0.15),
+            0 0 50px rgba(31, 184, 84, 0.05);
+        }
+        50% {
+          box-shadow:
+            0 0 45px rgba(31, 184, 84, 0.3),
+            0 0 90px rgba(31, 184, 84, 0.12);
+        }
+      }
+      @keyframes coreHeartbeat {
+        0%,
+        100% {
+          transform: scale(1);
+          opacity: 0.9;
+        }
+        15% {
+          transform: scale(1.2);
+          opacity: 1;
+        }
+        30% {
+          transform: scale(1.05);
+          opacity: 0.92;
+        }
+        45% {
+          transform: scale(1.14);
+          opacity: 0.98;
+        }
+        60% {
+          transform: scale(1);
+          opacity: 0.9;
+        }
+      }
+      .preserve-3d {
+        transform-style: preserve-3d;
+      }
+      .forest-glow {
+        animation: forestPulse 3.5s ease-in-out infinite;
+      }
+      .core-beat {
+        animation: coreHeartbeat 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+      }
+      .animate-glitch {
+        animation: glitchShake 0.16s linear infinite;
+      }
+      /* Smooth Squash & Stretch Transitions for Eyes */
+      .eye-mesh {
+        transition: transform 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
+        transform-origin: center center;
+      }
+      input[type='range'] {
+        accent-color: var(--current-accent, #1fb854);
+      }
+    </style>
+  </head>
+  <body class="min-h-screen flex flex-col select-none overflow-x-hidden bg-[#0f1715]">
+    <!-- Header Bar matching MARK Top Navigation -->
+    <header
+      class="w-full border-b border-[#19362d] bg-[#0f1715]/90 backdrop-blur-xl px-6 py-3.5 flex items-center justify-between z-30"
+    >
+      <div class="flex items-center gap-3">
+        <div
+          class="w-2.5 h-2.5 rounded-full bg-[#1fb854] shadow-[0_0_12px_#1fb854] animate-pulse"
+        ></div>
+        <div>
+          <h1
+            class="text-xs font-mono font-bold tracking-wider uppercase text-white flex items-center gap-2"
+          >
+            MARK 2.5D DROID
+            <span
+              class="text-[9px] px-2 py-0.5 rounded bg-[#19362d] text-[#1fb854] border border-[#1fb854]/30 font-mono font-semibold"
+              >LIFELIKE COMPANION</span
+            >
+          </h1>
+          <p class="text-[10px] text-[#cac9c9]/60 font-mono">
+            Elastic Curved Eyes &bull; Autonomous Quirks &bull; Clean Head Shell
+          </p>
+        </div>
+      </div>
+      <div class="flex items-center gap-3 text-xs font-mono">
+        <div
+          class="flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-[#13221b] border border-[#19362d]"
+        >
+          <span class="text-[#cac9c9]/50">FPS:</span>
+          <span id="fpsCounter" class="text-[#1fb854] font-bold">60</span>
+        </div>
+        <div
+          class="flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-[#13221b] border border-[#19362d]"
+        >
+          <span class="text-[#cac9c9]/50">AKSI:</span>
+          <span id="quirkIndicator" class="text-[#1fb854] font-bold uppercase">BERNAPAS</span>
+        </div>
+      </div>
+    </header>
+    <!-- Main Workspace -->
+    <main
+      class="flex-1 flex flex-col lg:flex-row items-stretch justify-between p-4 lg:p-6 gap-6 relative max-w-7xl mx-auto w-full"
+    >
+      <!-- LEFT: Character Stage -->
+      <section
+        class="flex-1 min-h-[500px] lg:min-h-[620px] bg-[#0a120e] border border-[#19362d] rounded-2xl relative flex flex-col items-center justify-center overflow-hidden backdrop-blur-xl shadow-2xl group forest-glow"
+        id="stageContainer"
+      >
+        <!-- Background Subtle Radar Rings -->
+        <div
+          class="absolute inset-0 pointer-events-none opacity-20 bg-[radial-gradient(#1fb854_1px,transparent_1px)] [background-size:24px_24px]"
+        ></div>
+        <div
+          class="absolute w-[500px] h-[500px] rounded-full border border-[#1fb854]/10 pointer-events-none"
+        ></div>
+        <div
+          class="absolute w-[360px] h-[360px] rounded-full border border-dashed border-[#1fb854]/15 pointer-events-none animate-[spin_100s_linear_infinite]"
+        ></div>
+        <!-- Stage Telemetry Label in Top Left -->
+        <div
+          class="absolute top-4 left-4 z-20 flex flex-col gap-1.5 font-mono text-[11px] pointer-events-none bg-[#0f1715]/85 border border-[#19362d] px-3 py-2.5 rounded-xl backdrop-blur-md shadow-lg"
+        >
+          <div class="flex items-center gap-2">
+            <span class="text-[#cac9c9]/50">STATUS:</span>
+            <span id="statusLabel" class="text-[#1fb854] font-bold uppercase tracking-wider"
+              >IDLE</span
+            >
+          </div>
+          <div class="flex items-center gap-2">
+            <span class="text-[#cac9c9]/50">MOOD:</span>
+            <span id="moodLabel" class="text-[#1fb854] font-bold uppercase tracking-wider"
+              >NEUTRAL</span
+            >
+          </div>
+          <div class="flex items-center gap-2">
+            <span class="text-[#cac9c9]/50">GESTUR:</span>
+            <span id="actionLabel" class="text-[#1fb854] font-mono text-[10px]">MENATAP DEPAN</span>
+          </div>
+        </div>
+        <!-- Top Right Instruction -->
+        <div
+          class="absolute top-4 right-4 z-20 text-[10px] font-mono text-[#cac9c9]/50 pointer-events-none text-right bg-[#0f1715]/85 border border-[#19362d] px-3 py-2 rounded-xl backdrop-blur-md shadow-lg"
+        >
+          LIFELIKE AUTONOMOUS RIG<br />KLIK AVATAR UNTUK REAKSI POKE
+        </div>
+        <!-- 3D Perspective Viewport (Explicit 320px by 440px Stage) -->
+        <div
+          class="relative w-[320px] h-[440px] [perspective:1000px] z-10 select-none"
+          id="avatarInteractiveArea"
+        >
+          <!-- Robot Root Pivot (Handles organic breathing & floating) -->
+          <div id="robotRoot" class="relative w-full h-full preserve-3d cursor-pointer">
+            <!-- ── 1. UNIFIED 3D HEAD ASSEMBLY (CLEAN: NO MARK-OS TEXT) ── -->
+            <!-- Throat pivot joint (130px 165px) so the neck NEVER tears or detaches -->
+            <div
+              id="robotHead"
+              class="absolute left-[30px] top-[18px] w-[260px] h-[180px] preserve-3d will-change-transform"
+              style="transform-origin: 130px 165px"
+            >
+              <!-- 1a. Background Helmet Shell & Antennas (Single unified SVG with 3D gradients, clean forehead) -->
+              <svg
+                viewBox="0 0 260 180"
+                class="absolute inset-0 w-full h-full pointer-events-none drop-shadow-[0_16px_36px_rgba(0,0,0,0.9)]"
+                style="overflow: visible"
+              >
+                <defs>
+                  <!-- 3D Volumetric Spherical Helmet Gradient -->
+                  <radialGradient id="helmetGrad" cx="38%" cy="32%" r="68%">
+                    <stop offset="0%" stop-color="#243f30" />
+                    <stop offset="45%" stop-color="#14241c" />
+                    <stop offset="100%" stop-color="#080e0a" />
+                  </radialGradient>
+                  <linearGradient id="helmetRim" x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="0%" stop-color="#2a4738" />
+                    <stop offset="100%" stop-color="#14241c" />
+                  </linearGradient>
+                  <filter id="neon-glow" x="-20%" y="-20%" width="140%" height="140%">
+                    <feGaussianBlur stdDeviation="3" result="blur" />
+                    <feComposite in="SourceGraphic" in2="blur" operator="over" />
+                  </filter>
+                </defs>
+                <!-- Left Wing Antenna -->
+                <g id="antennaLeft" class="origin-[55px_90px]">
+                  <path
+                    d="M 55 90 L 16 40 L 22 24 L 46 48 Z"
+                    fill="#13221b"
+                    stroke="#19362d"
+                    stroke-width="2.5"
+                  />
+                  <circle
+                    id="antBulbLeft"
+                    cx="19"
+                    cy="32"
+                    r="7"
+                    fill="#1fb854"
+                    class="mood-fill"
+                    filter="url(#neon-glow)"
+                  />
+                  <circle cx="19" cy="32" r="2.5" fill="#ffffff" opacity="0.95" />
+                </g>
+                <!-- Right Wing Antenna -->
+                <g id="antennaRight" class="origin-[205px_90px]">
+                  <path
+                    d="M 205 90 L 244 40 L 238 24 L 214 48 Z"
+                    fill="#13221b"
+                    stroke="#19362d"
+                    stroke-width="2.5"
+                  />
+                  <circle
+                    id="antBulbRight"
+                    cx="241"
+                    cy="32"
+                    r="7"
+                    fill="#1fb854"
+                    class="mood-fill"
+                    filter="url(#neon-glow)"
+                  />
+                  <circle cx="241" cy="32" r="2.5" fill="#ffffff" opacity="0.95" />
+                </g>
+                <!-- Main Helmet Curved 3D Head Shell (Sleek, Clean, No badges) -->
+                <ellipse
+                  cx="130"
+                  cy="95"
+                  rx="78"
+                  ry="70"
+                  fill="url(#helmetGrad)"
+                  stroke="url(#helmetRim)"
+                  stroke-width="3"
+                />
+                <!-- Chin Bevel (Hugs neck seamlessly) -->
+                <path
+                  d="M 104 156 Q 130 166 156 156 L 150 164 Q 130 170 110 164 Z"
+                  fill="#080e0a"
+                />
+                <!-- Earphone Side Pods -->
+                <rect
+                  x="47"
+                  y="78"
+                  width="10"
+                  height="34"
+                  rx="5"
+                  fill="#19362d"
+                  stroke="#254a3e"
+                  stroke-width="2"
+                />
+                <rect
+                  x="203"
+                  y="78"
+                  width="10"
+                  height="34"
+                  rx="5"
+                  fill="#19362d"
+                  stroke="#254a3e"
+                  stroke-width="2"
+                />
+                <!-- Subtle Forehead Ambient Light Sensor Dot (Clean, Minimalist) -->
+                <circle cx="130" cy="36" r="3" fill="#1fb854" class="mood-fill" opacity="0.75" />
+              </svg>
+              <!-- 1b. Deep Curved 3D Glass Visor Screen -->
+              <div
+                id="visorScreen"
+                class="absolute left-[56px] top-[40px] w-[148px] h-[108px] rounded-[34px] bg-gradient-to-b from-[#0a140f] to-[#040806] border-2 border-[#19362d] overflow-hidden shadow-[inset_0_4px_22px_rgba(0,0,0,0.98)] preserve-3d flex items-center justify-center pointer-events-none"
+                style="transform: translateZ(16px)"
+              >
+                <!-- SUBTLE MONITOR DESKTOP WIREFRAME REFLECTION (Active during Awareness / Melihat Desktop) -->
+                <div
+                  id="desktopScreenReflection"
+                  class="absolute inset-0 pointer-events-none opacity-0 transition-opacity duration-500 flex flex-col p-3 z-0"
+                >
+                  <div
+                    class="w-full h-3 border-b border-[#1fb854]/30 flex items-center justify-between px-1 pb-1"
+                  >
+                    <div class="flex gap-1">
+                      <div class="w-1.5 h-1.5 rounded-full bg-[#1fb854]/50"></div>
+                      <div class="w-1.5 h-1.5 rounded-full bg-[#1fb854]/30"></div>
+                    </div>
+                    <div class="w-6 h-1 rounded-full bg-[#1fb854]/25"></div>
+                  </div>
+                  <div class="flex-1 flex flex-col gap-1 pt-1.5 px-0.5 opacity-40">
+                    <div class="w-3/4 h-1 rounded bg-[#1fb854]/40"></div>
+                    <div class="w-1/2 h-1 rounded bg-[#1fb854]/30"></div>
+                    <div class="w-5/6 h-1 rounded bg-[#1fb854]/40"></div>
+                    <div class="w-2/3 h-1 rounded bg-[#1fb854]/30"></div>
+                    <div class="w-4/5 h-1 rounded bg-[#1fb854]/40"></div>
+                  </div>
+                  <div
+                    class="absolute inset-x-0 top-0 h-4 bg-gradient-to-b from-[#1fb854]/15 to-transparent pointer-events-none animate-[scanline_2.5s_linear_infinite]"
+                  ></div>
+                </div>
+                <!-- 3D Curved Glass Specular Highlight (Natural soft reflection) -->
+                <div
+                  class="absolute -top-10 -left-10 w-56 h-30 bg-gradient-to-b from-white/12 via-white/3 to-transparent rotate-[-22deg] pointer-events-none rounded-full blur-[1px]"
+                ></div>
+                <!-- 1c. LED Cyber Face (Elastic Squash & Stretch Eyes + Animated Mouth) -->
+                <div
+                  id="cyberFace"
+                  class="relative w-full h-full flex flex-col items-center justify-center z-10 preserve-3d"
+                  style="transform: translateZ(10px)"
+                >
+                  <!-- Eyes Container -->
+                  <div
+                    id="eyesContainer"
+                    class="flex items-center justify-center gap-7 will-change-transform"
+                  >
+                    <div
+                      class="w-10 h-10 flex items-center justify-center eye-mesh"
+                      id="leftEyeBox"
+                    ></div>
+                    <div
+                      class="w-10 h-10 flex items-center justify-center eye-mesh"
+                      id="rightEyeBox"
+                    ></div>
+                  </div>
+                  <!-- Mouth / Audio Lip-Flap -->
+                  <div
+                    id="mouthContainer"
+                    class="h-5 flex items-center justify-center mt-1 transition-all duration-75"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <!-- ── 2. BODY CHASSIS & INTEGRATED NECK COLLAR (Centered: X: 95px, Y: 172px) ── -->
+            <div
+              id="robotBody"
+              class="absolute left-[95px] top-[172px] w-[130px] h-[126px] preserve-3d will-change-transform"
+              style="transform-origin: 65px 12px; transform: translateZ(-5px)"
+            >
+              <svg
+                viewBox="0 0 130 126"
+                class="w-full h-full drop-shadow-[0_12px_30px_rgba(0,0,0,0.85)]"
+              >
+                <defs>
+                  <radialGradient id="bodyGrad" cx="50%" cy="40%" r="65%">
+                    <stop offset="0%" stop-color="#1a2e23" />
+                    <stop offset="60%" stop-color="#13221b" />
+                    <stop offset="100%" stop-color="#080e0a" />
+                  </radialGradient>
+                </defs>
+                <!-- Integrated Cyber Neck Socket -->
+                <ellipse
+                  cx="65"
+                  cy="14"
+                  rx="26"
+                  ry="9"
+                  fill="#0d1611"
+                  stroke="#19362d"
+                  stroke-width="2.5"
+                />
+                <ellipse cx="65" cy="14" rx="16" ry="5" fill="#080e0a" />
+                <!-- Body Outer Shell (Volumetric 3D gradient) -->
+                <path
+                  d="M 32 30 L 98 30 C 114 30, 120 50, 114 90 C 108 113, 88 120, 65 120 C 42 120, 22 113, 16 90 C 10 50, 16 30, 32 30 Z"
+                  fill="url(#bodyGrad)"
+                  stroke="#19362d"
+                  stroke-width="3"
+                />
+                <!-- Cyber Armor Plates -->
+                <path
+                  d="M 30 45 L 56 45 L 52 80 L 28 75 Z"
+                  fill="#19362d"
+                  stroke="#254a3e"
+                  stroke-width="1.5"
+                />
+                <path
+                  d="M 100 45 L 74 45 L 78 80 L 102 75 Z"
+                  fill="#19362d"
+                  stroke="#254a3e"
+                  stroke-width="1.5"
+                />
+                <!-- Central Arc Reactor with Heartbeat Pulse -->
+                <circle cx="65" cy="70" r="14" fill="#09120e" stroke="#19362d" stroke-width="2.5" />
+                <g class="core-beat origin-[65px_70px]">
+                  <circle cx="65" cy="70" r="9" fill="#1fb854" class="mood-fill" />
+                  <circle cx="65" cy="70" r="4.5" fill="#ffffff" opacity="0.95" />
+                </g>
+                <!-- Power Telemetry Bars in Forest Green -->
+                <rect
+                  x="50"
+                  y="95"
+                  width="6"
+                  height="3"
+                  rx="1.5"
+                  fill="#1fb854"
+                  class="mood-fill"
+                />
+                <rect
+                  x="59"
+                  y="95"
+                  width="6"
+                  height="3"
+                  rx="1.5"
+                  fill="#1fb854"
+                  class="mood-fill"
+                />
+                <rect
+                  x="68"
+                  y="95"
+                  width="6"
+                  height="3"
+                  rx="1.5"
+                  fill="#1fb854"
+                  class="mood-fill"
+                />
+                <rect
+                  x="77"
+                  y="95"
+                  width="6"
+                  height="3"
+                  rx="1.5"
+                  fill="#1fb854"
+                  class="mood-fill"
+                />
+                <!-- Bottom Thruster Vent Nozzle -->
+                <path d="M 50 117 L 80 117 L 74 125 L 56 125 Z" fill="#0d1712" />
+              </svg>
+            </div>
+            <!-- ── 3. FLOATING HANDS (Left: X: 36px, Right: X: 240px, Y: 215px) ── -->
+            <div
+              id="handLeft"
+              class="absolute left-[36px] top-[215px] w-[44px] h-[52px] preserve-3d will-change-transform"
+              style="transform: translateZ(18px)"
+            >
+              <svg
+                viewBox="0 0 50 60"
+                class="w-full h-full drop-shadow-[0_6px_14px_rgba(0,0,0,0.65)]"
+              >
+                <rect
+                  x="10"
+                  y="8"
+                  width="30"
+                  height="34"
+                  rx="15"
+                  fill="#13221b"
+                  stroke="#19362d"
+                  stroke-width="2.5"
+                />
+                <ellipse cx="25" cy="25" rx="8" ry="10" fill="#0c1611" />
+                <circle cx="20" cy="46" r="3.5" fill="#1fb854" class="mood-fill" />
+                <circle cx="30" cy="46" r="3.5" fill="#1fb854" class="mood-fill" />
+                <circle cx="8" cy="26" r="3" fill="#1fb854" class="mood-fill" />
+              </svg>
+            </div>
+            <div
+              id="handRight"
+              class="absolute left-[240px] top-[215px] w-[44px] h-[52px] preserve-3d will-change-transform"
+              style="transform: translateZ(18px)"
+            >
+              <svg
+                viewBox="0 0 50 60"
+                class="w-full h-full drop-shadow-[0_6px_14px_rgba(0,0,0,0.65)]"
+              >
+                <rect
+                  x="10"
+                  y="8"
+                  width="30"
+                  height="34"
+                  rx="15"
+                  fill="#13221b"
+                  stroke="#19362d"
+                  stroke-width="2.5"
+                />
+                <ellipse cx="25" cy="25" rx="8" ry="10" fill="#0c1611" />
+                <circle cx="20" cy="46" r="3.5" fill="#1fb854" class="mood-fill" />
+                <circle cx="30" cy="46" r="3.5" fill="#1fb854" class="mood-fill" />
+                <circle cx="42" cy="26" r="3" fill="#1fb854" class="mood-fill" />
+              </svg>
+            </div>
+            <!-- ── 4. THRUSTER PARTICLES & SHADOW AT BOTTOM ── -->
+            <div
+              id="thrusterGlow"
+              class="absolute left-[118px] top-[305px] w-[84px] h-[22px] rounded-full bg-[#1fb854]/40 blur-[10px] pointer-events-none"
+              style="transform: translateZ(-35px)"
+            ></div>
+            <div
+              id="groundShadow"
+              class="absolute left-[90px] top-[360px] w-[140px] h-[26px] rounded-full bg-black/75 blur-[8px] pointer-events-none transition-transform duration-75"
+              style="transform: translateZ(-60px) rotateX(75deg)"
+            ></div>
+          </div>
+        </div>
+        <!-- Bottom Hint -->
+        <div class="absolute bottom-3 text-center text-[#cac9c9]/60 text-xs font-mono">
+          Karakter Hidup Mandiri (Natural Micro-Gestures & Quirks)
+        </div>
+      </section>
+      <!-- RIGHT: Control Panel & Live Inspector -->
+      <aside class="w-full lg:w-96 flex flex-col gap-4 font-mono">
+        <!-- 1. Awareness Engine Control Center (Melihat Layar) -->
+        <div
+          class="bg-[#13221b]/95 border border-[#1fb854]/50 rounded-2xl p-4 backdrop-blur-xl shadow-[0_0_20px_rgba(31,184,84,0.15)]"
+        >
+          <div class="flex items-center justify-between pb-2 mb-3 border-b border-[#19362d]">
+            <h2
+              class="text-xs font-bold text-white uppercase tracking-wider flex items-center gap-2"
+            >
+              <span
+                class="w-2.5 h-2.5 rounded-full bg-[#1fb854] shadow-[0_0_8px_#1fb854] animate-ping"
+              ></span>
+              Simulasi Melihat Desktop
+            </h2>
+            <span class="text-[10px] px-2 py-0.5 rounded bg-[#19362d] text-[#1fb854] font-bold"
+              >AWARENESS</span
+            >
+          </div>
+          <div class="flex flex-col gap-2.5 text-xs">
+            <p class="text-[11px] text-[#cac9c9]/70 leading-relaxed">
+              Mark menunduk memperhatikan desktop dengan pantulan layar halus di kaca visor dan mata
+              membaca baris kode/jendela yang sedang aktif.
+            </p>
+            <!-- Trigger Seeing Desktop Button -->
+            <button
+              onclick="triggerSeeingDesktop()"
+              id="btnTriggerAwareness"
+              class="w-full py-2.5 px-3 rounded-xl bg-[#1fb854] hover:bg-[#1aa049] text-black font-bold transition-all shadow-[0_0_15px_rgba(31,184,84,0.3)] flex items-center justify-center gap-2"
+            >
+              <span class="w-2 h-2 rounded-full bg-black"></span>
+              Lihat Layar Desktop
+            </button>
+            <!-- Awareness Scenarios Quick Buttons -->
+            <div class="grid grid-cols-2 gap-1.5 pt-1 text-[10px]">
+              <button
+                onclick="triggerScenario('vscode')"
+                class="p-2 rounded-lg bg-[#0f1715]/70 hover:bg-[#19362d] border border-[#19362d] text-left text-[#cac9c9]/80 truncate"
+              >
+                [ Lihat Sesi VS Code ]
+              </button>
+              <button
+                onclick="triggerScenario('music')"
+                class="p-2 rounded-lg bg-[#0f1715]/70 hover:bg-[#19362d] border border-[#19362d] text-left text-[#cac9c9]/80 truncate"
+              >
+                [ Lihat Lagu Musik ]
+              </button>
+              <button
+                onclick="triggerScenario('late_night')"
+                class="p-2 rounded-lg bg-[#0f1715]/70 hover:bg-[#19362d] border border-[#19362d] text-left text-[#cac9c9]/80 truncate"
+              >
+                [ Lihat Jam Malam ]
+              </button>
+              <button
+                onclick="triggerScenario('idle_user')"
+                class="p-2 rounded-lg bg-[#0f1715]/70 hover:bg-[#19362d] border border-[#19362d] text-left text-[#cac9c9]/80 truncate"
+              >
+                [ Lihat Layar Idle ]
+              </button>
+            </div>
+          </div>
+        </div>
+        <!-- 2. Mood Picker Card -->
+        <div
+          class="bg-[#13221b]/90 border border-[#19362d] rounded-2xl p-4 backdrop-blur-xl shadow-xl"
+        >
+          <div class="flex items-center justify-between pb-2 mb-3 border-b border-[#19362d]">
+            <h2
+              class="text-xs font-bold text-white uppercase tracking-wider flex items-center gap-2"
+            >
+              <span class="w-2 h-2 rounded-full bg-[#1fb854]"></span>
+              10 Dynamic Moods
+            </h2>
+            <span class="text-[10px] text-[#1fb854]">Persona</span>
+          </div>
+          <div class="grid grid-cols-2 gap-2 text-xs" id="moodButtonsGrid">
+            <!-- Populated by JS -->
+          </div>
+        </div>
+        <!-- 3. Status & Actions Card -->
+        <div
+          class="bg-[#13221b]/90 border border-[#19362d] rounded-2xl p-4 backdrop-blur-xl shadow-xl"
+        >
+          <div class="flex items-center justify-between pb-2 mb-3 border-b border-[#19362d]">
+            <h2
+              class="text-xs font-bold text-white uppercase tracking-wider flex items-center gap-2"
+            >
+              <span class="w-2 h-2 rounded-full bg-[#1fb854]"></span>
+              Robot State & Context
+            </h2>
+            <span class="text-[10px] text-[#cac9c9]/50">States</span>
+          </div>
+          <div class="grid grid-cols-3 gap-2 text-xs">
+            <button
+              onclick="setStatus('idle')"
+              class="status-btn px-2.5 py-2 rounded-xl border border-[#19362d] bg-[#0f1715]/60 hover:bg-[#19362d]/50 text-left transition-all"
+              data-status="idle"
+            >
+              <div class="font-bold text-[11px] text-white">IDLE</div>
+              <div class="text-[9px] text-[#cac9c9]/50">Alive quirks</div>
+            </button>
+            <button
+              onclick="triggerSeeingDesktop()"
+              class="status-btn px-2.5 py-2 rounded-xl border border-[#19362d] bg-[#0f1715]/60 hover:bg-[#19362d]/50 text-left transition-all"
+              data-status="awareness"
+            >
+              <div class="font-bold text-[11px] text-[#1fb854]">LIHAT LAYAR</div>
+              <div class="text-[9px] text-[#1fb854]/70">Desktop view</div>
+            </button>
+            <button
+              onclick="setStatus('thinking')"
+              class="status-btn px-2.5 py-2 rounded-xl border border-[#19362d] bg-[#0f1715]/60 hover:bg-[#19362d]/50 text-left transition-all"
+              data-status="thinking"
+            >
+              <div class="font-bold text-[11px] text-cyan-400">THINKING</div>
+              <div class="text-[9px] text-[#cac9c9]/50">Chin ponder</div>
+            </button>
+            <button
+              onclick="setStatus('listening')"
+              class="status-btn px-2.5 py-2 rounded-xl border border-[#19362d] bg-[#0f1715]/60 hover:bg-[#19362d]/50 text-left transition-all"
+              data-status="listening"
+            >
+              <div class="font-bold text-[11px] text-amber-300">LISTEN</div>
+              <div class="text-[9px] text-[#cac9c9]/50">Focus lean</div>
+            </button>
+            <button
+              onclick="setStatus('speaking')"
+              class="status-btn px-2.5 py-2 rounded-xl border border-[#19362d] bg-[#0f1715]/60 hover:bg-[#19362d]/50 text-left transition-all"
+              data-status="speaking"
+            >
+              <div class="font-bold text-[11px] text-[#1fb854]">SPEAKING</div>
+              <div class="text-[9px] text-[#cac9c9]/50">Hand gesture</div>
+            </button>
+            <button
+              onclick="setStatus('sleeping')"
+              class="status-btn px-2.5 py-2 rounded-xl border border-[#19362d] bg-[#0f1715]/60 hover:bg-[#19362d]/50 text-left transition-all"
+              data-status="sleeping"
+            >
+              <div class="font-bold text-[11px] text-indigo-300">SLEEP</div>
+              <div class="text-[9px] text-[#cac9c9]/50">Deep rest</div>
+            </button>
+          </div>
+        </div>
+        <!-- 4. Speaking & Audio Lip-Flap Simulator -->
+        <div
+          class="bg-[#13221b]/90 border border-[#19362d] rounded-2xl p-4 backdrop-blur-xl shadow-xl"
+        >
+          <div class="flex items-center justify-between pb-2 mb-3 border-b border-[#19362d]">
+            <h2
+              class="text-xs font-bold text-white uppercase tracking-wider flex items-center gap-2"
+            >
+              <span class="w-2 h-2 rounded-full bg-[#1fb854]"></span>
+              Voice Lip-Flap & Gestures
+            </h2>
+            <span class="text-[10px] text-[#1fb854]">Lip Sync</span>
+          </div>
+          <div class="flex flex-col gap-3 text-xs">
+            <div>
+              <div class="flex justify-between text-[11px] mb-1">
+                <span class="text-[#cac9c9]/60">Voice Intensity:</span>
+                <span id="intensityVal" class="text-[#1fb854] font-bold">0%</span>
+              </div>
+              <input
+                type="range"
+                id="intensitySlider"
+                min="0"
+                max="100"
+                value="0"
+                class="w-full cursor-pointer"
+                oninput="handleIntensityChange(this.value)"
+              />
+            </div>
+            <button
+              id="autoSpeakBtn"
+              onclick="toggleAutoSpeech()"
+              class="w-full py-2 px-3 rounded-xl bg-[#1fb854] hover:bg-[#1aa049] text-black font-bold transition-all text-center shadow-[0_0_15px_rgba(31,184,84,0.3)]"
+            >
+              Mulai Simulasi Suara Otomatis
+            </button>
+          </div>
+        </div>
+      </aside>
+    </main>
+    <script>
+      // ── MOOD DICTIONARY (MATCHING MARK PERSONA) ──
+      const MOODS = {
+        neutral: { name: 'Neutral', hex: '#1fb854', desc: 'Tenang & siap sedia' },
+        joy: { name: 'Joy', hex: '#facc15', desc: 'Gembira & tersenyum' },
+        sadness: { name: 'Sadness', hex: '#3b82f6', desc: 'Sedih berair mata' },
+        anger: { name: 'Anger', hex: '#ef4444', desc: 'Marah & sengit' },
+        fear: { name: 'Fear', hex: '#a855f7', desc: 'Takut & waspada' },
+        disgust: { name: 'Disgust', hex: '#84cc16', desc: 'Sinis & mengelak' },
+        anxiety: { name: 'Anxiety', hex: '#f97316', desc: 'Cemas pusing swirly' },
+        envy: { name: 'Envy', hex: '#14b8a6', desc: 'Iri & melirik tajam' },
+        embarrassment: { name: 'Embarrassment', hex: '#ec4899', desc: 'Malu merona' },
+        ennui: { name: 'Ennui', hex: '#6b7280', desc: 'Bosan & malas' }
+      }
+      let currentMood = 'neutral'
+      let currentStatus = 'idle'
+      let voiceIntensity = 0
+      let isAutoSpeaking = false
+      let autoSpeakTimer = null
+      let isBlinking = false
+      let isSeeingDesktop = false
+      let desktopTimeout = null
+      // ── PHYSICS SPRING-DAMPER ROTATION STATE ──
+      let targetRotX = 0
+      let targetRotY = 0
+      let targetRotZ = 0
+      let rotX = 0
+      let rotY = 0
+      let rotZ = 0
+      let velRotX = 0
+      let velRotY = 0
+      let velRotZ = 0
+      // Hands Floating Dynamics
+      let handLeftY = 0
+      let handLeftX = 0
+      let handRightY = 0
+      let handRightX = 0
+      // Antenna Elastic Dynamics
+      let antLeftRot = 0
+      let antRightRot = 0
+      let antVelLeft = 0
+      let antVelRight = 0
+      // Eye Saccades & Elastic Squash/Stretch
+      let eyeSaccadeX = 0
+      let eyeSaccadeY = 0
+      let targetSaccadeX = 0
+      let targetSaccadeY = 0
+      let eyeScaleX = 1
+      let eyeScaleY = 1
+      // ── AUTONOMOUS IDLE QUIRKS (RANDOM COMBINATION: TILT, NOD, STRETCH, GLANCE) ──
+      let lastQuirkTime = performance.now()
+      let nextQuirkInterval = 2200
+      let currentQuirk = 'BREATHING'
+      let quirkPitchOffset = 0
+      let quirkRollOffset = 0
+      let quirkAltitudeOffset = 0
+      // Populate Mood Grid
+      const moodGrid = document.getElementById('moodButtonsGrid')
+      Object.entries(MOODS).forEach(([key, val]) => {
+        const btn = document.createElement('button')
+        btn.className =
+          'mood-btn p-2 rounded-xl border border-[#19362d] bg-[#0f1715]/60 hover:bg-[#19362d]/50 text-left transition-all flex items-center gap-2'
+        btn.setAttribute('data-mood', key)
+        btn.onclick = () => setMood(key)
+        btn.innerHTML = `
+        <span class="w-3 h-3 rounded-full shrink-0 shadow-sm" style="background-color: ${val.hex}"></span>
+        <div class="overflow-hidden">
+          <div class="font-bold text-[11px] text-white truncate">${val.name}</div>
+          <div class="text-[9px] text-[#cac9c9]/50 truncate">${val.desc}</div>
+        </div>
+      `
+        moodGrid.appendChild(btn)
+      })
+      function setMood(moodKey) {
+        if (!MOODS[moodKey]) return
+        currentMood = moodKey
+        const moodData = MOODS[moodKey]
+        document.getElementById('moodLabel').textContent = moodData.name.toUpperCase()
+        document.getElementById('moodLabel').style.color = moodData.hex
+        document.querySelectorAll('.mood-btn').forEach((b) => {
+          const isCurrent = b.getAttribute('data-mood') === moodKey
+          b.style.borderColor = isCurrent ? moodData.hex : '#19362d'
+          b.style.backgroundColor = isCurrent ? `${moodData.hex}22` : 'rgba(15, 23, 21, 0.6)'
+        })
+        document.documentElement.style.setProperty('--current-accent', moodData.hex)
+        document.querySelectorAll('.mood-fill').forEach((el) => {
+          el.setAttribute('fill', moodData.hex)
+        })
+        const thruster = document.getElementById('thrusterGlow')
+        if (thruster) {
+          thruster.style.backgroundColor = moodData.hex
+        }
+        // Elastic bounce on eye scale when mood changes
+        eyeScaleX = 1.25
+        eyeScaleY = 0.85
+        setTimeout(() => {
+          eyeScaleX = 1
+          eyeScaleY = 1
+          updateEyeMesh()
+        }, 140)
+        antVelLeft = -10
+        antVelRight = 10
+        renderFace()
+      }
+      function setStatus(statusKey) {
+        currentStatus = statusKey
+        document.getElementById('statusLabel').textContent = statusKey.toUpperCase()
+        document.querySelectorAll('.status-btn').forEach((b) => {
+          const isCurrent = b.getAttribute('data-status') === statusKey
+          b.style.borderColor = isCurrent ? '#1fb854' : '#19362d'
+          b.style.backgroundColor = isCurrent ? 'rgba(31,184,84,0.2)' : 'rgba(15, 23, 21, 0.6)'
+        })
+        const root = document.getElementById('robotRoot')
+        const reflection = document.getElementById('desktopScreenReflection')
+        const bulbL = document.getElementById('antBulbLeft')
+        const bulbR = document.getElementById('antBulbRight')
+        root.classList.remove('animate-glitch')
+        if (statusKey === 'awareness' || isSeeingDesktop) {
+          if (reflection) reflection.style.opacity = '1'
+          if (bulbL) bulbL.classList.add('animate-pulse')
+          if (bulbR) bulbR.classList.add('animate-pulse')
+        } else {
+          if (reflection) reflection.style.opacity = '0'
+          if (bulbL) bulbL.classList.remove('animate-pulse')
+          if (bulbR) bulbR.classList.remove('animate-pulse')
+        }
+        if (statusKey === 'thinking') {
+          antVelLeft = -14
+          antVelRight = 14
+        } else if (statusKey === 'listening') {
+          antVelLeft = 14
+          antVelRight = -14
+        } else if (statusKey === 'speaking') {
+          targetRotX = 0
+          targetRotY = 0
+          targetRotZ = 0
+          targetSaccadeX = 0
+          targetSaccadeY = 0
+          eyeSaccadeX = 0
+          eyeSaccadeY = 0
+          quirkPitchOffset = 0
+          quirkRollOffset = 0
+          quirkAltitudeOffset = 0
+          const actionLbl = document.getElementById('actionLabel')
+          if (actionLbl) actionLbl.textContent = 'MENATAP DEPAN'
+          const quirkInd = document.getElementById('quirkIndicator')
+          if (quirkInd) quirkInd.textContent = 'BERBICARA'
+        } else if (statusKey === 'error') {
+          root.classList.add('animate-glitch')
+        }
+        renderFace()
+      }
+      // ── AWARENESS SCENARIOS (MELIHAT DESKTOP) ──
+      const AWARENESS_SCENARIOS = {
+        vscode: { mood: 'neutral' },
+        music: { mood: 'joy' },
+        late_night: { mood: 'anxiety' },
+        idle_user: { mood: 'neutral' }
+      }
+      function triggerSeeingDesktop(targetMood = null) {
+        clearTimeout(desktopTimeout)
+        isSeeingDesktop = true
+        setStatus('awareness')
+        if (targetMood) setMood(targetMood)
+        antVelLeft = -14
+        antVelRight = 14
+        // Eye reading scan: looks left then smoothly sweeps right
+        targetSaccadeX = -6
+        targetSaccadeY = 2
+        setTimeout(() => {
+          targetSaccadeX = 6
+        }, 900)
+        setTimeout(() => {
+          targetSaccadeX = 0
+          targetSaccadeY = 0
+        }, 2200)
+        desktopTimeout = setTimeout(() => {
+          isSeeingDesktop = false
+          setStatus('idle')
+        }, 4500)
+      }
+      function triggerScenario(key) {
+        const scen = AWARENESS_SCENARIOS[key]
+        if (!scen) return
+        triggerSeeingDesktop(scen.mood)
+      }
+      // ── PROCEDURAL CURVED MINIMALIST EYES WITH SQUASH & STRETCH ──
+      function updateEyeMesh() {
+        const leftEye = document.getElementById('leftEyeBox')
+        const rightEye = document.getElementById('rightEyeBox')
+        if (leftEye) leftEye.style.transform = `scale(${eyeScaleX}, ${eyeScaleY})`
+        if (rightEye) rightEye.style.transform = `scale(${eyeScaleX}, ${eyeScaleY})`
+      }
+      function renderFace() {
+        const leftEye = document.getElementById('leftEyeBox')
+        const rightEye = document.getElementById('rightEyeBox')
+        const mouth = document.getElementById('mouthContainer')
+        const color = currentStatus === 'error' ? '#ef4444' : MOODS[currentMood].hex
+        // 1. SLEEPING STATE (Closed flat rounded curve)
+        if (currentStatus === 'sleeping') {
+          const sleepEye = `
+          <svg viewBox="0 0 40 40" class="w-full h-full">
+            <path d="M 8 22 Q 20 25 32 22" fill="none" stroke="${color}" stroke-width="4.5" stroke-linecap="round"/>
+          </svg>
+        `
+          leftEye.innerHTML = sleepEye
+          rightEye.innerHTML = sleepEye
+          mouth.innerHTML = `
+          <svg viewBox="0 0 60 20" class="w-12 h-5">
+            <path d="M 22 10 Q 30 14 38 10" fill="none" stroke="${color}" stroke-width="2.5" stroke-linecap="round"/>
+          </svg>
+        `
+          return
+        }
+        // 2. ERROR STATE (Sharp digital crosses)
+        if (currentStatus === 'error') {
+          const errEye = `
+          <svg viewBox="0 0 40 40" class="w-full h-full">
+            <line x1="10" y1="10" x2="30" y2="30" stroke="${color}" stroke-width="4.5" stroke-linecap="round"/>
+            <line x1="30" y1="10" x2="10" y2="30" stroke="${color}" stroke-width="4.5" stroke-linecap="round"/>
+          </svg>
+        `
+          leftEye.innerHTML = errEye
+          rightEye.innerHTML = errEye
+          mouth.innerHTML = `
+          <svg viewBox="0 0 60 20" class="w-14 h-5">
+            <path d="M 15 10 L 22 6 L 30 14 L 38 6 L 45 10" fill="none" stroke="${color}" stroke-width="3" stroke-linecap="round"/>
+          </svg>
+        `
+          return
+        }
+        // 3. READING DESKTOP EYES (Focused eyes curved slightly downward)
+        if (isSeeingDesktop || currentStatus === 'awareness') {
+          const readingEye = `
+          <svg viewBox="0 0 40 40" class="w-full h-full">
+            <path d="M 11 15 C 11 9, 29 9, 29 15 C 29 27, 11 27, 11 15 Z" fill="${color}"/>
+            <circle cx="21" cy="18" r="3" fill="#ffffff"/>
+          </svg>
+        `
+          leftEye.innerHTML = readingEye
+          rightEye.innerHTML = readingEye
+          mouth.innerHTML = `
+          <svg viewBox="0 0 60 20" class="w-8 h-3">
+            <line x1="25" y1="10" x2="35" y2="10" stroke="${color}" stroke-width="2" stroke-linecap="round"/>
+          </svg>
+        `
+          return
+        }
+        // 4. ELASTIC BLINKING STATE (Squash down to thin sleek slit)
+        if (isBlinking) {
+          const blinkEye = `
+          <svg viewBox="0 0 40 40" class="w-full h-full">
+            <line x1="8" y1="20" x2="32" y2="20" stroke="${color}" stroke-width="4" stroke-linecap="round"/>
+          </svg>
+        `
+          leftEye.innerHTML = blinkEye
+          rightEye.innerHTML = blinkEye
+        } else if (currentStatus === 'speaking' || voiceIntensity > 0.05) {
+          // 5a. SPEAKING STATE: Eyes locked forward with dead-center pupil
+          const speakPupilR = 3.8 + Math.min(1.0, voiceIntensity * 1.5)
+          const speakEye = `
+          <svg viewBox="0 0 40 40" class="w-full h-full">
+            <!-- Outer Curved Capsule Eye centered at X:20, Y:17 -->
+            <path d="M 12 13 C 12 6.5, 28 6.5, 28 13 C 28 27.5, 12 27.5, 12 13 Z" fill="${color}"/>
+            <!-- Dead-center pupil looking straight forward at user (X: 20, Y: 17) -->
+            <circle cx="20" cy="17" r="${speakPupilR}" fill="#ffffff" opacity="0.98"/>
+          </svg>
+        `
+          leftEye.innerHTML = speakEye
+          rightEye.innerHTML = speakEye
+        } else {
+          // 5b. MOOD SPECIFIC CURVED DIGITAL EYES
+          let leftEyeSvg = ''
+          let rightEyeSvg = ''
+          switch (currentMood) {
+            case 'joy':
+              // Cute inverted happy curve arches ^ ^
+              leftEyeSvg = `
+              <svg viewBox="0 0 40 40" class="w-full h-full">
+                <path d="M 8 26 Q 20 8 32 26" fill="none" stroke="${color}" stroke-width="5" stroke-linecap="round"/>
+              </svg>
+            `
+              rightEyeSvg = leftEyeSvg
+              break
+            case 'anger':
+              // Angled sharp brows \ /
+              leftEyeSvg = `
+              <svg viewBox="0 0 40 40" class="w-full h-full">
+                <path d="M 6 12 L 34 22 L 30 30 L 6 18 Z" fill="${color}"/>
+              </svg>
+            `
+              rightEyeSvg = `
+              <svg viewBox="0 0 40 40" class="w-full h-full">
+                <path d="M 34 12 L 6 22 L 10 30 L 34 18 Z" fill="${color}"/>
+              </svg>
+            `
+              break
+            case 'sadness':
+              // Drooping curve arches with teardrop T T
+              leftEyeSvg = `
+              <svg viewBox="0 0 40 40" class="w-full h-full">
+                <path d="M 8 16 Q 20 28 32 16" fill="none" stroke="${color}" stroke-width="4.5" stroke-linecap="round"/>
+                <circle cx="20" cy="30" r="3.5" fill="#38bdf8" class="animate-bounce"/>
+              </svg>
+            `
+              rightEyeSvg = `
+              <svg viewBox="0 0 40 40" class="w-full h-full">
+                <path d="M 8 16 Q 20 28 32 16" fill="none" stroke="${color}" stroke-width="4.5" stroke-linecap="round"/>
+                <circle cx="20" cy="30" r="3.5" fill="#38bdf8" class="animate-bounce"/>
+              </svg>
+            `
+              break
+            case 'fear':
+              // Wide circular trembling pupils
+              leftEyeSvg = `
+              <svg viewBox="0 0 40 40" class="w-full h-full">
+                <circle cx="20" cy="20" r="13" fill="none" stroke="${color}" stroke-width="4"/>
+                <circle cx="20" cy="20" r="4.5" fill="${color}"/>
+              </svg>
+            `
+              rightEyeSvg = leftEyeSvg
+              break
+            case 'anxiety':
+              // Spiral dizzy spinning eyes
+              leftEyeSvg = `
+              <svg viewBox="0 0 40 40" class="w-full h-full animate-[spin_4s_linear_infinite]">
+                <path d="M 20 20 A 4 4 0 0 1 24 20 A 8 8 0 0 1 16 20 A 12 12 0 0 1 28 20" fill="none" stroke="${color}" stroke-width="3.5" stroke-linecap="round"/>
+              </svg>
+            `
+              rightEyeSvg = leftEyeSvg
+              break
+            case 'envy':
+              // Sly feline slit eyes
+              leftEyeSvg = `
+              <svg viewBox="0 0 40 40" class="w-full h-full">
+                <path d="M 6 18 Q 20 12 34 20 Q 20 28 6 18 Z" fill="${color}" opacity="0.4"/>
+                <line x1="18" y1="12" x2="22" y2="28" stroke="${color}" stroke-width="4" stroke-linecap="round"/>
+              </svg>
+            `
+              rightEyeSvg = `
+              <svg viewBox="0 0 40 40" class="w-full h-full">
+                <path d="M 6 20 Q 20 12 34 18 Q 20 28 6 20 Z" fill="${color}" opacity="0.4"/>
+                <line x1="22" y1="12" x2="18" y2="28" stroke="${color}" stroke-width="4" stroke-linecap="round"/>
+              </svg>
+            `
+              break
+            case 'embarrassment':
+              // Shy closed squint > <
+              leftEyeSvg = `
+              <svg viewBox="0 0 40 40" class="w-full h-full">
+                <path d="M 12 14 L 28 22 L 12 30" fill="none" stroke="${color}" stroke-width="4" stroke-linecap="round"/>
+              </svg>
+            `
+              rightEyeSvg = `
+              <svg viewBox="0 0 40 40" class="w-full h-full">
+                <path d="M 28 14 L 12 22 L 28 30" fill="none" stroke="${color}" stroke-width="4" stroke-linecap="round"/>
+              </svg>
+            `
+              break
+            case 'ennui':
+              // Deadpan straight sleepy lids
+              leftEyeSvg = `
+              <svg viewBox="0 0 40 40" class="w-full h-full">
+                <line x1="8" y1="18" x2="32" y2="18" stroke="${color}" stroke-width="4.5" stroke-linecap="round"/>
+                <circle cx="20" cy="24" r="5" fill="${color}"/>
+              </svg>
+            `
+              rightEyeSvg = leftEyeSvg
+              break
+            case 'disgust':
+              // Asymmetrical squint
+              leftEyeSvg = `
+              <svg viewBox="0 0 40 40" class="w-full h-full">
+                <line x1="10" y1="20" x2="30" y2="16" stroke="${color}" stroke-width="4" stroke-linecap="round"/>
+              </svg>
+            `
+              rightEyeSvg = `
+              <svg viewBox="0 0 40 40" class="w-full h-full">
+                <circle cx="20" cy="20" r="10" fill="none" stroke="${color}" stroke-width="3.5"/>
+                <circle cx="20" cy="20" r="4" fill="${color}"/>
+              </svg>
+            `
+              break
+            default: // Neutral: Modern Minimalist Curved Stadium Eye with Centered Pupil
+              leftEyeSvg = `
+              <svg viewBox="0 0 40 40" class="w-full h-full">
+                <!-- Outer Curved Oval centered at X:20, Y:17 -->
+                <path d="M 12 13 C 12 6.5, 28 6.5, 28 13 C 28 27.5, 12 27.5, 12 13 Z" fill="${color}"/>
+                <!-- Centered Pupil Core right in the middle (X: 20, Y: 17) -->
+                <circle cx="20" cy="17" r="3.6" fill="#ffffff" opacity="0.95"/>
+              </svg>
+            `
+              rightEyeSvg = leftEyeSvg
+              break
+          }
+          leftEye.innerHTML = leftEyeSvg
+          rightEye.innerHTML = rightEyeSvg
+        }
+        // 6. MOUTH / LIP-FLAP
+        if (currentStatus === 'speaking' || voiceIntensity > 0.05) {
+          const scale = Math.max(0.2, voiceIntensity)
+          const openH = Math.round(5 + scale * 16)
+          const openW = Math.round(12 + scale * 20)
+          mouth.innerHTML = `
+          <svg viewBox="0 0 60 30" class="w-14 h-6">
+            <ellipse cx="30" cy="15" rx="${openW / 2}" ry="${openH / 2}" fill="${color}" opacity="0.3"/>
+            <ellipse cx="30" cy="15" rx="${Math.max(2, openW / 2 - 2)}" ry="${Math.max(2, openH / 2 - 2)}" fill="#ffffff"/>
+          </svg>
+        `
+        } else if (currentStatus === 'thinking') {
+          mouth.innerHTML = `
+          <div class="flex items-center gap-1.5 py-1">
+            <span class="w-1.5 h-1.5 rounded-full bg-[#1fb854] animate-ping"></span>
+            <span class="w-1.5 h-1.5 rounded-full bg-[#1fb854] animate-ping [animation-delay:0.2s]"></span>
+            <span class="w-1.5 h-1.5 rounded-full bg-[#1fb854] animate-ping [animation-delay:0.4s]"></span>
+          </div>
+        `
+        } else {
+          let mouthSvg = ''
+          switch (currentMood) {
+            case 'joy':
+              mouthSvg = `<path d="M 20 8 Q 30 20 40 8" fill="none" stroke="${color}" stroke-width="3" stroke-linecap="round"/>`
+              break
+            case 'anger':
+              mouthSvg = `<path d="M 20 18 Q 30 10 40 18" fill="none" stroke="${color}" stroke-width="3" stroke-linecap="round"/>`
+              break
+            case 'sadness':
+              mouthSvg = `<path d="M 22 18 Q 30 10 38 18" fill="none" stroke="${color}" stroke-width="2.5" stroke-linecap="round"/>`
+              break
+            case 'anxiety':
+              mouthSvg = `<path d="M 20 14 Q 25 10 30 14 Q 35 18 40 14" fill="none" stroke="${color}" stroke-width="2.5" stroke-linecap="round"/>`
+              break
+            case 'envy':
+              mouthSvg = `<path d="M 24 16 Q 32 18 40 12" fill="none" stroke="${color}" stroke-width="2.5" stroke-linecap="round"/>`
+              break
+            default:
+              mouthSvg = `<line x1="24" y1="14" x2="36" y2="14" stroke="${color}" stroke-width="2.5" stroke-linecap="round"/>`
+              break
+          }
+          mouth.innerHTML = `
+          <svg viewBox="0 0 60 26" class="w-12 h-4">
+            ${mouthSvg}
+          </svg>
+        `
+        }
+      }
+      // Natural Elastic Blinking Loop (Squash down, stretch back)
+      function triggerBlink() {
+        if (currentStatus === 'sleeping') {
+          setTimeout(triggerBlink, 3000)
+          return
+        }
+        isBlinking = true
+        // Squash Y, widen X
+        eyeScaleX = 1.15
+        eyeScaleY = 0.15
+        updateEyeMesh()
+        renderFace()
+        setTimeout(() => {
+          isBlinking = false
+          // Overshoot stretch
+          eyeScaleX = 0.95
+          eyeScaleY = 1.1
+          updateEyeMesh()
+          renderFace()
+          setTimeout(() => {
+            eyeScaleX = 1
+            eyeScaleY = 1
+            updateEyeMesh()
+          }, 80)
+          const doubleBlink = Math.random() < 0.2
+          if (doubleBlink) {
+            setTimeout(() => {
+              isBlinking = true
+              eyeScaleY = 0.15
+              updateEyeMesh()
+              renderFace()
+              setTimeout(() => {
+                isBlinking = false
+                eyeScaleY = 1
+                updateEyeMesh()
+                renderFace()
+              }, 90)
+            }, 110)
+          }
+          const nextDelay = 2600 + Math.random() * 3200
+          setTimeout(triggerBlink, nextDelay)
+        }, 120)
+      }
+      setTimeout(triggerBlink, 1500)
+      // ── POKE REACTION ──
+      const avatarArea = document.getElementById('avatarInteractiveArea')
+      const robotRoot = document.getElementById('robotRoot')
+      const robotHead = document.getElementById('robotHead')
+      const robotBody = document.getElementById('robotBody')
+      const handLeftEl = document.getElementById('handLeft')
+      const handRightEl = document.getElementById('handRight')
+      const antLeftEl = document.getElementById('antennaLeft')
+      const antRightEl = document.getElementById('antennaRight')
+      const groundShadow = document.getElementById('groundShadow')
+      const eyesContainer = document.getElementById('eyesContainer')
+      const actionLabel = document.getElementById('actionLabel')
+      const quirkIndicator = document.getElementById('quirkIndicator')
+      let pokeVelocityY = 0
+      avatarArea.addEventListener('click', () => {
+        pokeVelocityY = -26
+        velRotY += Math.random() > 0.5 ? 14 : -14
+        antVelLeft = -28
+        antVelRight = 28
+        triggerBlink()
+      })
+      // ── AUTONOMOUS IDLE QUIRKS (RANDOM COMBINATION NATURAL SYSTEM) ──
+      function updateAutonomousQuirks(now) {
+        if (isSeeingDesktop || currentStatus === 'speaking') {
+          targetRotY = 0
+          targetRotZ = 0
+          targetSaccadeX = 0
+          targetSaccadeY = 0
+          quirkPitchOffset = 0
+          quirkRollOffset = 0
+          quirkAltitudeOffset = 0
+          return
+        }
+        if (now - lastQuirkTime >= nextQuirkInterval) {
+          lastQuirkTime = now
+          nextQuirkInterval = 2000 + Math.random() * 1200 // Fast dynamic 2s rhythm
+          const roll = Math.random()
+          // 1. Curious Head Tilt (Memiringkan kepala penasaran)
+          if (roll < 0.3) {
+            currentQuirk = 'TILT PENASARAN'
+            quirkRollOffset = Math.random() > 0.5 ? 10 : -10
+            quirkPitchOffset = -4
+            targetRotY = (Math.random() - 0.5) * 8
+            targetSaccadeX = quirkRollOffset * 0.4
+            actionLabel.textContent = 'KEPALA MIRING'
+          }
+          // 2. Subtle Listening Nod (Mengangguk kecil menyimak)
+          else if (roll < 0.55) {
+            currentQuirk = 'MENGANGGUK KECIL'
+            quirkPitchOffset = -9
+            quirkRollOffset = 0
+            setTimeout(() => {
+              quirkPitchOffset = 0
+            }, 350)
+            actionLabel.textContent = 'MENGANGGUK'
+          }
+          // 3. Floating Stretch Breath (Helaan napas apung)
+          else if (roll < 0.75) {
+            currentQuirk = 'PEREGANGAN APUNG'
+            quirkAltitudeOffset = -12
+            quirkPitchOffset = 3
+            setTimeout(() => {
+              quirkAltitudeOffset = 0
+              quirkPitchOffset = 0
+            }, 700)
+            actionLabel.textContent = 'HELAAN NAPAS'
+          }
+          // 4. Casual Look Around (Menoleh santai)
+          else {
+            currentQuirk = 'MENOLEH SANTAI'
+            targetRotY = Math.random() > 0.5 ? 12 : -12
+            quirkPitchOffset = -2
+            quirkRollOffset = (Math.random() - 0.5) * 4
+            targetSaccadeX = targetRotY * 0.35
+            actionLabel.textContent = targetRotY > 0 ? 'MENOLEH KANAN' : 'MENOLEH KIRI'
+          }
+          quirkIndicator.textContent = currentQuirk
+        }
+      }
+      // ── MAIN HIGH-PRECISION PHYSICS TICKER ──
+      let frameCount = 0
+      let fpsTimer = performance.now()
+      let prevTime = performance.now()
+      let pokeOffsetY = 0
+      function updateFrame(now) {
+        const dt = Math.min(0.05, (now - prevTime) / 1000)
+        prevTime = now
+        const t = now * 0.001
+        // 1. Autonomous Quirks
+        updateAutonomousQuirks(now)
+        // 2. Eye Saccades (Lerp) - locked forward during speaking
+        if (currentStatus === 'speaking') {
+          targetSaccadeX = 0
+          targetSaccadeY = 0
+        }
+        eyeSaccadeX += (targetSaccadeX - eyeSaccadeX) * (currentStatus === 'speaking' ? 0.35 : 0.16)
+        eyeSaccadeY += (targetSaccadeY - eyeSaccadeY) * (currentStatus === 'speaking' ? 0.35 : 0.16)
+        // 3. Multi-Harmonic Organic Breathing & Sway
+        let breathSpeed = 1.6
+        let breathDepth = 8
+        let swayDepth = 4
+        let rollDepth = 1.2
+        if (currentStatus === 'sleeping') {
+          breathSpeed = 0.8
+          breathDepth = 4.5
+          swayDepth = 1.2
+        } else if (currentStatus === 'speaking') {
+          breathSpeed = 2.2
+          breathDepth = 7
+          swayDepth = 0 // Pure straight forward, no horizontal swaying
+          rollDepth = 0 // Strictly zero roll
+        } else if (isSeeingDesktop) {
+          breathSpeed = 1.8
+          breathDepth = 5
+        } else if (currentStatus === 'thinking') {
+          breathSpeed = 1.2
+        }
+        const harmonicY =
+          Math.sin(t * breathSpeed) * breathDepth +
+          Math.sin(t * breathSpeed * 1.8) * (breathDepth * 0.3)
+        const harmonicX = Math.cos(t * breathSpeed * 0.65) * swayDepth
+        const harmonicRoll = Math.sin(t * breathSpeed * 0.5) * rollDepth
+        const breathScaleY = 1 + harmonicY * 0.0016
+        const breathScaleX = 1 - harmonicY * 0.0008
+        pokeOffsetY += pokeVelocityY * dt * 30
+        pokeVelocityY += (0 - pokeOffsetY) * 0.25 - pokeVelocityY * 0.2
+        // 4. Spring-Damper for Head Rotation (Pitch, Yaw, Roll)
+        let addPitch = currentStatus === 'sleeping' ? 14 : currentStatus === 'listening' ? -6 : 0
+        let addRoll = currentStatus === 'thinking' ? 7 : currentStatus === 'joy' ? 3 : 0
+        let desktopForwardZ = 0
+        let desktopDownwardY = 0
+        if (isSeeingDesktop) {
+          addPitch = -16
+          desktopForwardZ = 35
+          desktopDownwardY = -12
+          actionLabel.textContent = 'MEMBACA MONITOR'
+        } else if (currentStatus === 'speaking') {
+          // Natural speech cadence nod: strictly forward pitch only, no yaw/roll
+          const speakNod = Math.sin(t * 7.5) * (voiceIntensity * 2.2)
+          addPitch = -1.5 + speakNod
+          actionLabel.textContent = 'MENATAP DEPAN'
+          quirkIndicator.textContent = 'BERBICARA'
+        }
+        let effectiveTargetX = targetRotX + quirkPitchOffset + addPitch
+        let effectiveTargetY = targetRotY
+        let effectiveTargetZ = targetRotZ + quirkRollOffset + addRoll
+        if (currentStatus === 'speaking') {
+          effectiveTargetX = addPitch
+          effectiveTargetY = 0 // Strictly face forward (no turning left/right)
+          effectiveTargetZ = 0 // Strictly upright (no side tilting)
+        } else if (isSeeingDesktop) {
+          effectiveTargetX = -14 + addPitch
+          effectiveTargetY = Math.sin(t * 1.8) * 4
+          effectiveTargetZ = 0
+        }
+        // Spring damper calculation
+        velRotX += ((effectiveTargetX - rotX) * 140 - velRotX * 16) * dt
+        velRotY += ((effectiveTargetY - rotY) * 140 - velRotY * 16) * dt
+        velRotZ += ((effectiveTargetZ - rotZ) * 140 - velRotZ * 16) * dt
+        rotX += velRotX * dt
+        rotY += velRotY * dt
+        rotZ += velRotZ * dt
+        // 5. Apply Rigid Compound Transforms around Throat Pivot
+        const totalY = harmonicY + pokeOffsetY + desktopDownwardY + quirkAltitudeOffset
+        robotRoot.style.transform = `translate3d(${harmonicX}px, ${totalY}px, ${desktopForwardZ}px) scale3d(${breathScaleX}, ${breathScaleY}, 1)`
+        // Head: Rotates smoothly with pitch, yaw, and harmonic roll around throat
+        robotHead.style.transform = `rotateX(${rotX}deg) rotateY(${rotY}deg) rotateZ(${rotZ + harmonicRoll}deg)`
+        // Torso: Follows directly beneath the throat socket without tearing
+        const torsoRotX = rotX * 0.35
+        const torsoRotY = currentStatus === 'speaking' ? 0 : rotY * 0.35
+        robotBody.style.transform = `translateZ(-5px) rotateX(${torsoRotX}deg) rotateY(${torsoRotY}deg)`
+        if (groundShadow) {
+          const shadowScale = Math.max(0.65, 1 - totalY * 0.012)
+          const shadowOpacity = Math.max(0.3, 0.75 + totalY * 0.012)
+          groundShadow.style.transform = `translateZ(-60px) rotateX(75deg) scale(${shadowScale})`
+          groundShadow.style.opacity = shadowOpacity
+        }
+        // 6. Antenna Spring Damping
+        const antTargetLeft =
+          currentStatus === 'speaking'
+            ? Math.sin(t * 6) * (voiceIntensity * 6)
+            : -velRotY * 0.35 +
+              (currentStatus === 'thinking' ? -15 : currentStatus === 'listening' ? 14 : 0)
+        const antTargetRight =
+          currentStatus === 'speaking'
+            ? -Math.sin(t * 6) * (voiceIntensity * 6)
+            : -velRotY * 0.35 +
+              (currentStatus === 'thinking' ? 15 : currentStatus === 'listening' ? -14 : 0)
+        antVelLeft += (antTargetLeft - antLeftRot) * 200 * dt - antVelLeft * 14 * dt
+        antVelRight += (antTargetRight - antRightRot) * 200 * dt - antVelRight * 14 * dt
+        antLeftRot += antVelLeft * dt
+        antRightRot += antVelRight * dt
+        if (antLeftEl) antLeftEl.style.transform = `rotate(${antLeftRot}deg)`
+        if (antRightEl) antRightEl.style.transform = `rotate(${antRightRot}deg)`
+        // 7. Hand Physics
+        let targetHandLY = Math.sin(t * breathSpeed * 0.9) * 5
+        let targetHandLX = Math.cos(t * breathSpeed * 0.9) * 2.5
+        let targetHandRY = Math.sin(t * breathSpeed * 0.9 + 1.2) * 5
+        let targetHandRX = Math.cos(t * breathSpeed * 0.9 + 1.2) * 2.5
+        if (isSeeingDesktop) {
+          targetHandLY = -40
+          targetHandLX = 12
+          targetHandRY = -40
+          targetHandRX = -12
+        } else if (currentStatus === 'thinking') {
+          targetHandLY = -34
+          targetHandLX = 16
+        } else if (currentStatus === 'speaking') {
+          const voicePulse = Math.sin(t * 8) * (voiceIntensity * 12)
+          targetHandLY = -10 + voicePulse
+          targetHandLX = -4
+          targetHandRY = -10 - voicePulse
+          targetHandRX = 4
+        } else if (currentStatus === 'sleeping') {
+          targetHandLY = 18
+          targetHandRY = 18
+        } else if (currentMood === 'joy') {
+          targetHandLY -= 8
+          targetHandRY -= 8
+        }
+        handLeftY += (targetHandLY - handLeftY) * 0.16
+        handLeftX += (targetHandLX - handLeftX) * 0.16
+        handRightY += (targetHandRY - handRightY) * 0.16
+        handRightX += (targetHandRX - handRightX) * 0.16
+        if (handLeftEl) {
+          handLeftEl.style.transform = `translate3d(${handLeftX}px, ${handLeftY}px, ${isSeeingDesktop ? 30 : 18}px) rotateZ(${-rotY * 0.2}deg)`
+        }
+        if (handRightEl) {
+          handRightEl.style.transform = `translate3d(${handRightX}px, ${handRightY}px, ${isSeeingDesktop ? 30 : 18}px) rotateZ(${-rotY * 0.2}deg)`
+        }
+        // 8. Eyes Parallax - firmly focused forward on user when speaking
+        if (eyesContainer) {
+          const finalEyeX = currentStatus === 'speaking' ? 0 : rotY * 0.35 + eyeSaccadeX
+          const finalEyeY = currentStatus === 'speaking' ? 0 : -rotX * 0.25 + eyeSaccadeY
+          eyesContainer.style.transform = `translate3d(${finalEyeX}px, ${finalEyeY}px, 10px)`
+        }
+        // FPS Monitor
+        frameCount++
+        if (now - fpsTimer >= 1000) {
+          document.getElementById('fpsCounter').textContent = frameCount
+          frameCount = 0
+          fpsTimer = now
+        }
+        requestAnimationFrame(updateFrame)
+      }
+      requestAnimationFrame(updateFrame)
+      // ── SPEECH SIMULATION CONTROLS ──
+      function handleIntensityChange(val) {
+        voiceIntensity = val / 100
+        document.getElementById('intensityVal').textContent = `${Math.round(val)}%`
+        if (voiceIntensity > 0.05 && currentStatus !== 'speaking' && !isAutoSpeaking) {
+          setStatus('speaking')
+        } else if (voiceIntensity <= 0.05 && currentStatus === 'speaking' && !isAutoSpeaking) {
+          setStatus('idle')
+        }
+        renderFace()
+      }
+      function toggleAutoSpeech() {
+        isAutoSpeaking = !isAutoSpeaking
+        const btn = document.getElementById('autoSpeakBtn')
+        const slider = document.getElementById('intensitySlider')
+        if (isAutoSpeaking) {
+          btn.textContent = 'Berhenti Simulasi Suara'
+          btn.className =
+            'w-full py-2 px-3 rounded-xl bg-rose-500 hover:bg-rose-600 text-white font-bold transition-all text-center shadow-[0_0_15px_rgba(244,63,94,0.3)]'
+          setStatus('speaking')
+          let phase = 0
+          autoSpeakTimer = setInterval(() => {
+            phase += 0.35
+            const rawInt = Math.sin(phase) * 0.4 + Math.sin(phase * 2.3) * 0.3 + Math.random() * 0.3
+            const intensity = Math.max(0.1, Math.min(0.95, rawInt))
+            handleIntensityChange(intensity * 100)
+            slider.value = intensity * 100
+          }, 90)
+        } else {
+          btn.textContent = 'Mulai Simulasi Suara Otomatis'
+          btn.className =
+            'w-full py-2 px-3 rounded-xl bg-[#1fb854] hover:bg-[#1aa049] text-black font-bold transition-all text-center shadow-[0_0_15px_rgba(31,184,84,0.3)]'
+          clearInterval(autoSpeakTimer)
+          handleIntensityChange(0)
+          slider.value = 0
+          setStatus('idle')
+        }
+      }
+      // Initial render in Forest Theme
+      setMood('neutral')
+      setStatus('idle')
+    </script>
+  </body>
+</html>