[gsap/threejs/inertia] ❍ Audio Visualizer with THREEJS - Challenge #2 / Entry 1 Live Preview

{"__browser":{"country":"US","device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer *; ambient-light-sensor *; camera *; display-capture *; encrypted-media *; geolocation *; gyroscope *; microphone *; midi *; payment *; serial *; vr *; web-share *; xr-spatial-tracking *","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__graphql":{"data":{"data":{"sessionUser":{"id":"VoDkNZ","name":"Captain Anonymous","title":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","currentContext":{"id":"VoDkNZ","title":"Captain Anonymous","name":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","username":"anon","__typename":"User"},"currentTeamId":null,"username":"anon","admin":false,"anon":true,"pro":false,"verified":false,"featureFlags":[],"teams":[],"__typename":"User"}}},"url":"https://codepen.io/graphql","api":"cprails"},"__user":{"anon":true,"base_url":"/anon/","cohorts":[],"current_team_hashid":null,"current_team_id":0,"hashid":"VoDkNZ","id":1,"itemType":"user","name":"Captain Anonymous","paid":false,"tier":0,"username":"anon","created_at":null,"email_verified":null,"collections_count":0,"collections_private_count":0,"followers_count":0,"followings_count":0,"pens_count":0,"pens_private_count":0,"projects_count":0,"projects_private_count":0},"__firebase":{"config":{"apiKey":"AIzaSyBgLAe7N_MdFpuVofMkcQLGwwhUu5tuxls","authDomain":"codepen-store-production.firebaseapp.com","databaseURL":"https://codepen-store-production.firebaseio.com","disabled":false,"projectId":"codepen-store-production"},"token":"eyJhbGciOiJSUzI1NiJ9.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiVm9Ea05aIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNzUyNDE4OTg3LCJpYXQiOjE3NTI0MTUzODcsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IlZvRGtOWiJ9.f-ikkaYlRcYJSdB3t2GBsivoqk3SPclDosvEXFJyldFSuFq1odZGrWaluvC_d-UBDmXOtF5v0zePbAjOFtnwhwVczgbwX9-JIGgZeqQfHbt0EoQU4lrag94XGJhQzsAwshCgoUqmJDLEhYoScyLdxRptspCYjcHEulGBt08RmgujN9KRM209RIJ4ApFY_ZsdYcRMg8gqYizQ3cfyD7QvX-LLLIh9sBM2WkEO_2tdkw1y_vL97XQrvgX92Koe9y9HoatSFpBT8j5S7vYHXFHnq2ZbaNOVW3sp0s7MBaNGTG8N6SytgjeOOe92B_Vke4O9v1ma4jxkGJpLR_KkizaBIw"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__item":"{\"id\":81516965,\"user_id\":7558,\"html\":\"<div class=\\\"space-background\\\"><\\/div>\\n\\n<div class=\\\"loading-overlay\\\" id=\\\"loading-overlay\\\">\\n  <div class=\\\"loading-container\\\">\\n    <div class=\\\"preloader-canvas-container\\\">\\n      <canvas id=\\\"preloader-canvas\\\" class=\\\"preloader-canvas\\\" width=\\\"180\\\" height=\\\"180\\\"><\\/canvas>\\n    <\\/div>\\n    <div class=\\\"loading-text\\\">INITIALIZING SCANNER<\\/div>\\n  <\\/div>\\n<\\/div>\\n\\n<div class=\\\"notification\\\" id=\\\"notification\\\">Anomaly detected<\\/div>\\n\\n<div id=\\\"three-container\\\"><\\/div>\\n\\n<div class=\\\"grid-overlay\\\"><\\/div>\\n\\n<div class=\\\"circular-visualizer\\\">\\n  <canvas id=\\\"circular-canvas\\\"><\\/canvas>\\n<\\/div>\\n\\n<div class=\\\"audio-wave\\\" id=\\\"audio-wave\\\"><\\/div>\\n\\n<div class=\\\"floating-particles\\\" id=\\\"floating-particles\\\"><\\/div>\\n\\n<div class=\\\"interface-container\\\">\\n  <div class=\\\"header\\\">\\n    <div class=\\\"header-item\\\"><\\/div>\\n    <div class=\\\"header-item\\\">GSAP.INERTIA.WEBFLOW.TIMELINE<br \\/>v3.13.0<\\/div>\\n    <div class=\\\"header-item\\\" id=\\\"timestamp\\\">TIME: 00:00:00<\\/div>\\n  <\\/div>\\n\\n  <div class=\\\"scanner-frame\\\">\\n    <div class=\\\"corner-tl\\\"><\\/div>\\n    <div class=\\\"corner-tr\\\"><\\/div>\\n    <div class=\\\"corner-bl\\\"><\\/div>\\n    <div class=\\\"corner-br\\\"><\\/div>\\n    <div class=\\\"scanner-id\\\">GSAP.TIMELINE({ONSTART: WEBFLOW.INIT})<\\/div>\\n    <div class=\\\"scanner-id-right\\\">IX2.ANIMATION.SEQUENCE(0x4F2E)<\\/div>\\n  <\\/div>\\n<\\/div>\\n\\n<div class=\\\"data-panel\\\" style=\\\"position: absolute; top: 20px; left: 20px;\\\">\\n  <div class=\\\"data-panel-title\\\">\\n    <span>ANOMALY METRICS<\\/span>\\n    <span id=\\\"status-indicator\\\">●<\\/span>\\n  <\\/div>\\n  <div class=\\\"data-bar\\\">\\n    <div class=\\\"data-bar-fill\\\" id=\\\"stability-bar\\\" style=\\\"width: 75%;\\\"><\\/div>\\n  <\\/div>\\n  <div class=\\\"data-readouts\\\">\\n    <div class=\\\"data-row\\\">\\n      <span class=\\\"data-label\\\">STABILITY INDEX:<\\/span>\\n      <span class=\\\"data-value\\\" id=\\\"stability-value\\\">75%<\\/span>\\n    <\\/div>\\n    <div class=\\\"data-row\\\">\\n      <span class=\\\"data-label\\\">MASS COEFFICIENT:<\\/span>\\n      <span class=\\\"data-value\\\" id=\\\"mass-value\\\">1.728<\\/span>\\n    <\\/div>\\n    <div class=\\\"data-row\\\">\\n      <span class=\\\"data-label\\\">ENERGY SIGNATURE:<\\/span>\\n      <span class=\\\"data-value\\\" id=\\\"energy-value\\\">5.3e8 J<\\/span>\\n    <\\/div>\\n    <div class=\\\"data-row\\\">\\n      <span class=\\\"data-label\\\">QUANTUM VARIANCE:<\\/span>\\n      <span class=\\\"data-value\\\" id=\\\"variance-value\\\">0.0042<\\/span>\\n    <\\/div>\\n  <\\/div>\\n<\\/div>\\n\\n<div class=\\\"data-panel\\\" style=\\\"position: absolute; top: 20px; right: 20px;\\\">\\n  <div class=\\\"data-panel-title\\\">ANOMALY METRICS<\\/div>\\n  <div class=\\\"waveform\\\">\\n    <canvas id=\\\"waveform-canvas\\\" class=\\\"waveform-canvas\\\"><\\/canvas>\\n  <\\/div>\\n  <div class=\\\"data-readouts\\\">\\n    <div class=\\\"data-row\\\">\\n      <span class=\\\"data-label\\\">PEAK FREQUENCY:<\\/span>\\n      <span class=\\\"data-value\\\" id=\\\"peak-value\\\">127.3 HZ<\\/span>\\n    <\\/div>\\n    <div class=\\\"data-row\\\">\\n      <span class=\\\"data-label\\\">AMPLITUDE:<\\/span>\\n      <span class=\\\"data-value\\\" id=\\\"amplitude-value\\\">0.56<\\/span>\\n    <\\/div>\\n    <div class=\\\"data-row\\\">\\n      <span class=\\\"data-label\\\">PHASE SHIFT:<\\/span>\\n      <span class=\\\"data-value\\\" id=\\\"phase-value\\\">π\\/4<\\/span>\\n    <\\/div>\\n  <\\/div>\\n<\\/div>\\n\\n<div class=\\\"control-panel\\\" style=\\\"top: 50%; left: 20px; transform: translateY(-50%);\\\">\\n  <div class=\\\"panel-header\\\">\\n    <span class=\\\"data-panel-title\\\">ANOMALY CONTROLS<\\/span>\\n    <span class=\\\"drag-handle\\\" id=\\\"control-panel-handle\\\">⋮⋮<\\/span>\\n  <\\/div>\\n  <div class=\\\"control-group\\\">\\n    <div class=\\\"control-row\\\">\\n      <span class=\\\"control-label\\\">ROTATION SPEED<\\/span>\\n      <span class=\\\"control-value\\\" id=\\\"rotation-value\\\">1.0<\\/span>\\n    <\\/div>\\n    <div class=\\\"slider-container\\\">\\n      <input type=\\\"range\\\" min=\\\"0\\\" max=\\\"5\\\" value=\\\"1\\\" step=\\\"0.1\\\" class=\\\"slider\\\" id=\\\"rotation-slider\\\">\\n    <\\/div>\\n  <\\/div>\\n\\n  <div class=\\\"control-group\\\">\\n    <div class=\\\"control-row\\\">\\n      <span class=\\\"control-label\\\">RESOLUTION<\\/span>\\n      <span class=\\\"control-value\\\" id=\\\"resolution-value\\\">32<\\/span>\\n    <\\/div>\\n    <div class=\\\"slider-container\\\">\\n      <input type=\\\"range\\\" min=\\\"12\\\" max=\\\"64\\\" value=\\\"32\\\" step=\\\"4\\\" class=\\\"slider\\\" id=\\\"resolution-slider\\\">\\n    <\\/div>\\n  <\\/div>\\n\\n  <div class=\\\"control-group\\\">\\n    <div class=\\\"control-row\\\">\\n      <span class=\\\"control-label\\\">DISTORTION<\\/span>\\n      <span class=\\\"control-value\\\" id=\\\"distortion-value\\\">1.0<\\/span>\\n    <\\/div>\\n    <div class=\\\"slider-container\\\">\\n      <input type=\\\"range\\\" min=\\\"0\\\" max=\\\"3\\\" value=\\\"1\\\" step=\\\"0.1\\\" class=\\\"slider\\\" id=\\\"distortion-slider\\\">\\n    <\\/div>\\n  <\\/div>\\n\\n  <div class=\\\"control-group\\\">\\n    <div class=\\\"control-row\\\">\\n      <span class=\\\"control-label\\\">AUDIO REACTIVITY<\\/span>\\n      <span class=\\\"control-value\\\" id=\\\"reactivity-value\\\">1.0<\\/span>\\n    <\\/div>\\n    <div class=\\\"slider-container\\\">\\n      <input type=\\\"range\\\" min=\\\"0\\\" max=\\\"2\\\" value=\\\"1\\\" step=\\\"0.1\\\" class=\\\"slider\\\" id=\\\"reactivity-slider\\\">\\n    <\\/div>\\n  <\\/div>\\n\\n  <div class=\\\"buttons\\\">\\n    <button class=\\\"btn\\\" id=\\\"reset-btn\\\">RESET<\\/button>\\n    <button class=\\\"btn\\\" id=\\\"analyze-btn\\\">ANALYZE<\\/button>\\n  <\\/div>\\n<\\/div>\\n\\n<div class=\\\"terminal-panel\\\">\\n  <div class=\\\"terminal-header\\\">\\n    <span>SYSTEM TERMINAL<\\/span>\\n    <span id=\\\"terminal-status\\\">ONLINE<\\/span>\\n  <\\/div>\\n  <div class=\\\"terminal-content\\\" id=\\\"terminal-content\\\">\\n    <div class=\\\"terminal-line\\\">NEXUS v3.7.2 INITIALIZED. SECURE CONNECTION ESTABLISHED.<\\/div>\\n    <div class=\\\"terminal-line command-line\\\">gsap.inertia.init(throwProps: true, resistance: 0.35);<\\/div>\\n    <div class=\\\"terminal-line regular-line\\\">Draggable.create({bounds: window, inertia: true, edgeResistance: 0.65});<\\/div>\\n    <div class=\\\"terminal-line command-line\\\">webflow.interactions.trigger('IX2', {value: 'anomaly-detection'});<\\/div>\\n    <div class=\\\"terminal-line typing\\\"><\\/div>\\n  <\\/div>\\n<\\/div>\\n\\n<div class=\\\"spectrum-analyzer\\\">\\n  <div class=\\\"spectrum-header\\\">\\n    <span>AUDIO SPECTRUM ANALYZER<\\/span>\\n    <span class=\\\"drag-handle\\\" id=\\\"spectrum-handle\\\">⋮⋮<\\/span>\\n  <\\/div>\\n  <div class=\\\"spectrum-content\\\">\\n    <canvas id=\\\"spectrum-canvas\\\" class=\\\"spectrum-canvas\\\"><\\/canvas>\\n  <\\/div>\\n  <div class=\\\"audio-controls\\\">\\n    <div class=\\\"demo-tracks\\\">\\n      <span class=\\\"demo-tracks-label\\\">DEMO TRACKS:<\\/span>\\n      <button class=\\\"demo-track-btn\\\" data-url=\\\"https:\\/\\/assets.codepen.io\\/7558\\/Merkaba.mp3\\\">MERKABA<\\/button>\\n      <button class=\\\"demo-track-btn\\\" data-url=\\\"https:\\/\\/assets.codepen.io\\/7558\\/Dhamika.mp3\\\">DHAMIKA<\\/button>\\n      <button class=\\\"demo-track-btn\\\" data-url=\\\"https:\\/\\/assets.codepen.io\\/7558\\/Vacant.mp3\\\">VACANT<\\/button>\\n      <button class=\\\"demo-track-btn\\\" data-url=\\\"https:\\/\\/assets.codepen.io\\/7558\\/lxstnght-back_1.mp3\\\">LXSTNGHT<\\/button>\\n    <\\/div>\\n\\n    <input type=\\\"file\\\" id=\\\"audio-file-input\\\" class=\\\"audio-file-input\\\" accept=\\\"audio\\/*\\\">\\n    <button class=\\\"audio-file-btn\\\" id=\\\"file-btn\\\">UPLOAD AUDIO FILE<\\/button>\\n    <div class=\\\"audio-file-label\\\" id=\\\"file-label\\\">NO FILE SELECTED<\\/div>\\n\\n    <audio id=\\\"audio-player\\\" class=\\\"audio-player\\\" crossorigin=\\\"anonymous\\\"><\\/audio>\\n\\n    <div class=\\\"controls-row\\\">\\n      <div class=\\\"audio-sensitivity\\\" style=\\\"flex: 1;\\\">\\n        <div class=\\\"audio-sensitivity-label\\\">\\n          <span>SENSITIVITY<\\/span>\\n          <span class=\\\"audio-sensitivity-value\\\" id=\\\"sensitivity-value\\\">5.0<\\/span>\\n        <\\/div>\\n        <input type=\\\"range\\\" min=\\\"1\\\" max=\\\"10\\\" value=\\\"5\\\" step=\\\"0.1\\\" class=\\\"slider\\\" id=\\\"sensitivity-slider\\\">\\n      <\\/div>\\n    <\\/div>\\n  <\\/div>\\n<\\/div>\",\"css\":\"@import url(\\\"https:\\/\\/fonts.cdnfonts.com\\/css\\/thegoodmonolith\\\");\\n\\n:root {\\n  --bg-color: #12100f;\\n  --grid-color: rgba(255, 240, 230, 0.05);\\n  --text-primary: #f3ede9;\\n  --text-secondary: #c2b8b2;\\n  --text-highlight: #ff4e42;\\n  --accent-primary: #ff4e42;\\n  --accent-secondary: #c2362f;\\n  --accent-tertiary: #ffb3ab;\\n  --panel-bg: rgba(30, 26, 24, 0.7);\\n  --panel-border: rgba(255, 78, 66, 0.3);\\n  --panel-highlight: rgba(255, 78, 66, 0.1);\\n  --scanner-line: rgba(255, 78, 66, 0.7);\\n}\\n\\n* {\\n  margin: 0;\\n  padding: 0;\\n  box-sizing: border-box;\\n}\\n\\nbody {\\n  background-color: var(--bg-color);\\n  color: var(--text-primary);\\n  font-family: \\\"TheGoodMonolith\\\", monospace;\\n  overflow: hidden;\\n  height: 100vh;\\n  text-transform: uppercase;\\n  font-size: 1rem;\\n}\\n\\nbutton,\\ninput,\\nselect,\\ntextarea {\\n  font-family: inherit;\\n}\\n\\n.space-background {\\n  position: fixed;\\n  top: 0;\\n  left: 0;\\n  width: 100%;\\n  height: 100%;\\n  background-image: url(\\\"https:\\/\\/assets.codepen.io\\/7558\\/space-bg-002.jpg\\\");\\n  background-size: cover;\\n  background-position: center;\\n  z-index: 0;\\n  opacity: 0.8;\\n}\\n\\n#three-container {\\n  position: absolute;\\n  width: 100%;\\n  height: 100%;\\n  z-index: 1;\\n  cursor: grab;\\n}\\n\\n#three-container:active {\\n  cursor: grabbing;\\n}\\n\\n.interface-container {\\n  position: relative;\\n  width: 100%;\\n  height: 100vh;\\n  z-index: 2;\\n  pointer-events: none;\\n  padding: 1.25rem;\\n  display: flex;\\n  flex-direction: column;\\n  justify-content: space-between;\\n}\\n\\n.grid-overlay {\\n  position: absolute;\\n  top: 0;\\n  left: 0;\\n  width: 100%;\\n  height: 100%;\\n  background-image: linear-gradient(\\n      to right,\\n      var(--grid-color) 1px,\\n      transparent 1px\\n    ),\\n    linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);\\n  background-size: 40px 40px;\\n  pointer-events: none;\\n  z-index: 0;\\n}\\n\\n.header {\\n  display: flex;\\n  justify-content: space-between;\\n  padding: 1.25rem;\\n}\\n\\n.header-item {\\n  font-size: 0.75rem;\\n  color: var(--text-secondary);\\n}\\n\\n.scanner-frame {\\n  position: absolute;\\n  top: 50%;\\n  left: 50%;\\n  transform: translate(-50%, -50%);\\n  width: 400px;\\n  height: 400px;\\n  border: 1px solid var(--accent-primary);\\n  display: flex;\\n  justify-content: center;\\n  align-items: center;\\n  pointer-events: none;\\n}\\n\\n.scanner-frame::before,\\n.scanner-frame::after {\\n  content: \\\"\\\";\\n  position: absolute;\\n  width: 20px;\\n  height: 20px;\\n  border-color: var(--accent-primary);\\n  border-style: solid;\\n}\\n\\n.scanner-frame::before {\\n  top: -1px;\\n  left: -1px;\\n  border-width: 2px 0 0 2px;\\n}\\n\\n.scanner-frame::after {\\n  bottom: -1px;\\n  right: -1px;\\n  border-width: 0 2px 2px 0;\\n}\\n\\n.scanner-frame .corner-tl {\\n  position: absolute;\\n  top: -1px;\\n  left: -1px;\\n  width: 20px;\\n  height: 20px;\\n  border-top: 2px solid var(--accent-primary);\\n  border-left: 2px solid var(--accent-primary);\\n}\\n\\n.scanner-frame .corner-tr {\\n  position: absolute;\\n  top: -1px;\\n  right: -1px;\\n  width: 20px;\\n  height: 20px;\\n  border-top: 2px solid var(--accent-primary);\\n  border-right: 2px solid var(--accent-primary);\\n}\\n\\n.scanner-frame .corner-bl {\\n  position: absolute;\\n  bottom: -1px;\\n  left: -1px;\\n  width: 20px;\\n  height: 20px;\\n  border-bottom: 2px solid var(--accent-primary);\\n  border-left: 2px solid var(--accent-primary);\\n}\\n\\n.scanner-frame .corner-br {\\n  position: absolute;\\n  bottom: -1px;\\n  right: -1px;\\n  width: 20px;\\n  height: 20px;\\n  border-bottom: 2px solid var(--accent-primary);\\n  border-right: 2px solid var(--accent-primary);\\n}\\n\\n.scanner-id {\\n  position: absolute;\\n  bottom: -30px;\\n  left: 0;\\n  font-size: 0.75rem;\\n  color: var(--accent-primary);\\n}\\n\\n.scanner-id-right {\\n  position: absolute;\\n  bottom: -30px;\\n  right: 0;\\n  font-size: 0.75rem;\\n  color: var(--accent-primary);\\n}\\n\\n.scanner-line {\\n  position: absolute;\\n  width: 100%;\\n  height: 2px;\\n  background: var(--scanner-line);\\n  top: 0;\\n  box-shadow: 0 0 10px var(--accent-primary);\\n  animation: scan 4s linear infinite;\\n}\\n\\n@keyframes scan {\\n  0% {\\n    top: 0;\\n  }\\n\\n  100% {\\n    top: 100%;\\n  }\\n}\\n\\n.data-panels {\\n  display: flex;\\n  justify-content: space-between;\\n  padding: 0 1.25rem;\\n  margin-bottom: 1.25rem;\\n}\\n\\n.data-panel {\\n  width: 300px;\\n  background: var(--panel-bg);\\n  border: 1px solid var(--panel-border);\\n  border-radius: 5px;\\n  padding: 0.9375rem;\\n  backdrop-filter: blur(8px);\\n  pointer-events: auto;\\n}\\n\\n.data-panel-title {\\n  font-size: 0.875rem;\\n  color: var(--accent-primary);\\n  margin-bottom: 0.625rem;\\n  display: flex;\\n  align-items: center;\\n  justify-content: space-between;\\n}\\n\\n.data-readouts {\\n  margin-top: 0.625rem;\\n}\\n\\n.data-row {\\n  display: flex;\\n  justify-content: space-between;\\n  margin-bottom: 0.3125rem;\\n  font-size: 0.75rem;\\n}\\n\\n.data-label {\\n  color: var(--text-secondary);\\n}\\n\\n.data-value {\\n  color: var(--text-primary);\\n}\\n\\n.data-bar {\\n  height: 6px;\\n  background: rgba(255, 255, 255, 0.1);\\n  margin: 0.625rem 0;\\n  position: relative;\\n  border-radius: 3px;\\n}\\n\\n.data-bar-fill {\\n  height: 100%;\\n  background: var(--accent-primary);\\n  border-radius: 3px;\\n  transition: width 0.5s;\\n}\\n\\n.waveform {\\n  width: 100%;\\n  height: 50px;\\n  margin: 0.625rem 0;\\n  display: flex;\\n  align-items: center;\\n  position: relative;\\n}\\n\\n.waveform-canvas {\\n  width: 100%;\\n  height: 100%;\\n}\\n\\n.control-panel {\\n  width: 300px;\\n  background: var(--panel-bg);\\n  border: 1px solid var(--panel-border);\\n  border-radius: 5px;\\n  padding: 0.9375rem;\\n  position: absolute;\\n  top: 20px;\\n  left: 20px;\\n  backdrop-filter: blur(8px);\\n  pointer-events: auto;\\n  z-index: 10;\\n}\\n\\n.control-panel h3 {\\n  font-size: 0.875rem;\\n  color: var(--accent-primary);\\n  margin-bottom: 0.9375rem;\\n}\\n\\n.control-group {\\n  margin-bottom: 0.9375rem;\\n}\\n\\n.control-row {\\n  display: flex;\\n  justify-content: space-between;\\n  margin-bottom: 0.5rem;\\n}\\n\\n.control-label {\\n  font-size: 0.75rem;\\n  color: var(--text-secondary);\\n}\\n\\n.control-value {\\n  font-size: 0.75rem;\\n  color: var(--text-primary);\\n}\\n\\n.slider-container {\\n  width: 100%;\\n  display: flex;\\n  flex-direction: column;\\n}\\n\\n.slider {\\n  -webkit-appearance: none;\\n  width: 100%;\\n  height: 6px;\\n  background: rgba(255, 255, 255, 0.1);\\n  outline: none;\\n  border-radius: 3px;\\n}\\n\\n.slider::-webkit-slider-thumb {\\n  -webkit-appearance: none;\\n  appearance: none;\\n  width: 12px;\\n  height: 12px;\\n  border-radius: 50%;\\n  background: var(--accent-primary);\\n  cursor: pointer;\\n}\\n\\n.buttons {\\n  display: flex;\\n  gap: 0.625rem;\\n  margin-top: 0.9375rem;\\n}\\n\\n.btn {\\n  flex: 1;\\n  padding: 0.5rem 0;\\n  background: var(--panel-highlight);\\n  border: 1px solid var(--panel-border);\\n  color: var(--accent-primary);\\n  font-size: 0.75rem;\\n  border-radius: 3px;\\n  cursor: pointer;\\n  transition: all 0.2s;\\n}\\n\\n.btn:hover {\\n  background: var(--panel-border);\\n}\\n\\n.terminal-panel {\\n  position: absolute;\\n  left: 20px;\\n  bottom: 20px;\\n  width: 500px;\\n  height: 150px;\\n  background: var(--panel-bg);\\n  border: 1px solid var(--panel-border);\\n  border-radius: 5px;\\n  overflow: hidden;\\n  pointer-events: auto;\\n  z-index: 10;\\n}\\n\\n.terminal-header {\\n  padding: 0.5rem 0.625rem;\\n  background: rgba(0, 0, 0, 0.3);\\n  font-size: 0.875rem;\\n  color: var(--accent-primary);\\n  display: flex;\\n  justify-content: space-between;\\n  align-items: center;\\n}\\n\\n.panel-header {\\n  display: flex;\\n  justify-content: space-between;\\n  align-items: center;\\n  flex-direction: row;\\n  margin-bottom: 1rem;\\n}\\n\\n.terminal-content {\\n  padding: 0.625rem;\\n  height: calc(100% - 31px);\\n  overflow-y: auto;\\n  font-size: 0.75rem;\\n  color: var(--text-secondary);\\n  line-height: 1.4;\\n}\\n\\n.terminal-line {\\n  margin-bottom: 0.3125rem;\\n}\\n\\n.command-line {\\n  color: white;\\n}\\n\\n.regular-line {\\n  color: var(--text-highlight);\\n}\\n\\n.typing {\\n  position: relative;\\n}\\n\\n.typing::after {\\n  content: \\\"|\\\";\\n  position: absolute;\\n  animation: blink 1s infinite;\\n}\\n\\n@keyframes blink {\\n  0%,\\n  100% {\\n    opacity: 1;\\n  }\\n\\n  50% {\\n    opacity: 0;\\n  }\\n}\\n\\n.loading-overlay {\\n  position: fixed;\\n  top: 0;\\n  left: 0;\\n  width: 100%;\\n  height: 100%;\\n  background: var(--bg-color);\\n  display: flex;\\n  justify-content: center;\\n  align-items: center;\\n  z-index: 1000;\\n  transition: opacity 0.5s;\\n}\\n\\n.loading-container {\\n  display: flex;\\n  flex-direction: column;\\n  align-items: center;\\n  justify-content: center;\\n  width: 100%;\\n  max-width: 500px;\\n  padding: 1.25rem;\\n}\\n\\n.preloader-canvas-container {\\n  width: 180px;\\n  height: 180px;\\n}\\n\\n.loading-text {\\n  margin-top: 1.25rem;\\n  text-align: center;\\n  color: var(--accent-primary);\\n  letter-spacing: 2px;\\n  font-size: 0.875rem;\\n}\\n\\n.notification {\\n  position: fixed;\\n  top: 20px;\\n  left: 50%;\\n  transform: translateX(-50%);\\n  background: var(--panel-bg);\\n  border: 1px solid var(--panel-border);\\n  padding: 0.625rem 1.25rem;\\n  border-radius: 5px;\\n  font-size: 0.75rem;\\n  color: var(--accent-primary);\\n  opacity: 0;\\n  transition: opacity 0.3s;\\n  z-index: 100;\\n}\\n\\n.drag-handle {\\n  cursor: move;\\n  width: auto;\\n  height: 100%;\\n  color: var(--accent-primary);\\n}\\n\\n.particle-trail {\\n  position: absolute;\\n  width: 10px;\\n  height: 10px;\\n  border-radius: 50%;\\n  pointer-events: none;\\n  opacity: 0.7;\\n  transition: opacity 0.5s;\\n}\\n\\n.circular-visualizer {\\n  position: absolute;\\n  top: 50%;\\n  left: 50%;\\n  transform: translate(-50%, -50%);\\n  width: 450px;\\n  height: 450px;\\n  pointer-events: none;\\n  z-index: 5;\\n}\\n\\n.circular-visualizer canvas {\\n  width: 100%;\\n  height: 100%;\\n}\\n\\n.audio-wave {\\n  position: absolute;\\n  top: 50%;\\n  left: 50%;\\n  transform: translate(-50%, -50%);\\n  width: 500px;\\n  height: 500px;\\n  border-radius: 50%;\\n  background: transparent;\\n  border: 1px solid rgba(255, 78, 66, 0.1);\\n  pointer-events: none;\\n  z-index: 3;\\n}\\n\\n.audio-wave::before {\\n  content: \\\"\\\";\\n  position: absolute;\\n  top: 50%;\\n  left: 50%;\\n  transform: translate(-50%, -50%);\\n  width: 100%;\\n  height: 100%;\\n  border-radius: 50%;\\n  border: 1px solid rgba(255, 78, 66, 0.05);\\n  animation: pulse 4s infinite;\\n}\\n\\n@keyframes pulse {\\n  0% {\\n    width: 100%;\\n    height: 100%;\\n    opacity: 0.5;\\n  }\\n\\n  50% {\\n    width: 120%;\\n    height: 120%;\\n    opacity: 0;\\n  }\\n\\n  100% {\\n    width: 100%;\\n    height: 100%;\\n    opacity: 0.5;\\n  }\\n}\\n\\n.spectrum-analyzer {\\n  position: absolute;\\n  bottom: 20px;\\n  right: 20px;\\n  width: 400px;\\n  background: var(--panel-bg);\\n  border: 1px solid var(--panel-border);\\n  border-radius: 5px;\\n  overflow: hidden;\\n  pointer-events: auto;\\n  z-index: 10;\\n}\\n\\n.spectrum-header {\\n  padding: 0.5rem 0.625rem;\\n  background: rgba(0, 0, 0, 0.3);\\n  font-size: 0.875rem;\\n  color: var(--accent-primary);\\n  display: flex;\\n  justify-content: space-between;\\n  align-items: center;\\n}\\n\\n.spectrum-content {\\n  padding: 0.625rem;\\n  position: relative;\\n}\\n\\n.spectrum-canvas {\\n  width: 100%;\\n  height: 120px;\\n  display: block;\\n}\\n\\n.audio-controls {\\n  display: flex;\\n  flex-direction: column;\\n  gap: 0.625rem;\\n  margin-top: 0.9375rem;\\n  padding: 0 0.625rem 0.625rem;\\n}\\n\\n.audio-file-input {\\n  display: none;\\n}\\n\\n.audio-file-btn {\\n  display: block;\\n  padding: 0.5rem 0;\\n  background: var(--panel-highlight);\\n  border: 1px solid var(--panel-border);\\n  color: var(--accent-primary);\\n  font-size: 0.75rem;\\n  border-radius: 3px;\\n  cursor: pointer;\\n  transition: all 0.2s;\\n  text-align: center;\\n  margin-bottom: 0.625rem;\\n}\\n\\n.audio-file-btn:hover {\\n  background: var(--panel-border);\\n}\\n\\n.audio-file-label {\\n  display: block;\\n  padding: 0.5rem 0.625rem;\\n  background: rgba(0, 0, 0, 0.2);\\n  color: var(--accent-primary);\\n  font-size: 0.75rem;\\n  border-radius: 3px;\\n  margin-bottom: 0.625rem;\\n  overflow: hidden;\\n  text-overflow: ellipsis;\\n  white-space: nowrap;\\n}\\n\\n.audio-player {\\n  width: 100%;\\n  margin-bottom: 0.625rem;\\n}\\n\\n.controls-row {\\n  display: flex;\\n  gap: 0.625rem;\\n  margin-bottom: 0.625rem;\\n}\\n\\n.audio-sensitivity-label {\\n  display: flex;\\n  justify-content: space-between;\\n  margin-bottom: 0.3125rem;\\n  font-size: 0.75rem;\\n}\\n\\n.audio-sensitivity-value {\\n  color: var(--accent-primary);\\n}\\n\\n.controls-row {\\n  display: flex;\\n  gap: 0.625rem;\\n  margin-bottom: 0.625rem;\\n}\\n\\n.demo-tracks {\\n  margin-top: 0.625rem;\\n  margin-bottom: 0.9375rem;\\n}\\n\\n.demo-tracks-label {\\n  font-size: 0.75rem;\\n  color: var(--text-secondary);\\n  margin-bottom: 0.3125rem;\\n  display: block;\\n}\\n\\n.demo-track-btn {\\n  display: inline-block;\\n  padding: 0.3125rem 0.625rem;\\n  margin-right: 0.3125rem;\\n  margin-bottom: 0.3125rem;\\n  background: var(--panel-highlight);\\n  border: 1px solid var(--panel-border);\\n  color: var(--accent-primary);\\n  font-size: 0.6875rem;\\n  border-radius: 3px;\\n  cursor: pointer;\\n  transition: all 0.2s;\\n}\\n\\n.demo-track-btn:hover {\\n  background: var(--panel-border);\\n}\\n\\n.demo-track-btn.active {\\n  background: var(--accent-primary);\\n  color: #000;\\n}\\n\\n.youtube-input {\\n  display: flex;\\n  margin-top: 0.625rem;\\n  margin-bottom: 0.625rem;\\n}\\n\\n.youtube-url {\\n  flex: 1;\\n  padding: 0.5rem;\\n  background: rgba(0, 0, 0, 0.2);\\n  border: 1px solid var(--panel-border);\\n  color: var(--text-primary);\\n  font-size: 0.75rem;\\n  border-radius: 3px 0 0 3px;\\n}\\n\\n.youtube-load-btn {\\n  padding: 0.5rem 0.625rem;\\n  background: var(--panel-highlight);\\n  border: 1px solid var(--panel-border);\\n  border-left: none;\\n  color: var(--accent-primary);\\n  font-size: 0.75rem;\\n  border-radius: 0 3px 3px 0;\\n  cursor: pointer;\\n  transition: all 0.2s;\\n}\\n\\n.youtube-load-btn:hover {\\n  background: var(--panel-border);\\n}\\n\\n.youtube-error {\\n  color: var(--accent-tertiary);\\n  font-size: 0.6875rem;\\n  margin-top: 0.3125rem;\\n  display: none;\\n}\\n\\n.preloader-canvas-container {\\n  position: relative;\\n}\\n\\n.preloader-canvas {\\n  position: absolute;\\n  top: 0;\\n  left: 0;\\n  width: 100%;\\n  height: 100%;\\n}\\n\\n\\/* Floating particles *\\/\\n.floating-particles {\\n  position: absolute;\\n  top: 0;\\n  left: 0;\\n  width: 100%;\\n  height: 100%;\\n  pointer-events: none;\\n  z-index: 4;\\n}\\n\",\"js\":\"import * as THREE from \\\"https:\\/\\/esm.sh\\/three@0.175.0\\\";\\nimport { OrbitControls } from \\\"https:\\/\\/esm.sh\\/three@0.175.0\\/examples\\/jsm\\/controls\\/OrbitControls.js\\\";\\ndocument.addEventListener(\\\"DOMContentLoaded\\\", function () {\\n  setupExpandingCirclesPreloader();\\n  let audioContext = null;\\n  let audioAnalyser = null;\\n  let audioSource = null;\\n  let audioData;\\n  let frequencyData;\\n  let audioReactivity = 1.0;\\n  let audioSensitivity = 5.0;\\n  let isAudioInitialized = false;\\n  let isAudioPlaying = false;\\n  let lastUserActionTime = Date.now();\\n  let updateGlow;\\n  let crypticMessageTimeout;\\n  let audioContextStarted = false;\\n  let audioSourceConnected = false;\\n  let currentAudioElement = null;\\n  let floatingParticles = [];\\n  let currentAudioSrc = null;\\n  let currentMessageIndex = 0;\\n\\n  function setupExpandingCirclesPreloader() {\\n    const canvas = document.getElementById(\\\"preloader-canvas\\\");\\n    if (!canvas) return;\\n    const ctx = canvas.getContext(\\\"2d\\\");\\n    const centerX = canvas.width \\/ 2;\\n    const centerY = canvas.height \\/ 2;\\n    let time = 0;\\n    let lastTime = 0;\\n    const maxRadius = 80;\\n    const circleCount = 5;\\n    const dotCount = 24;\\n\\n    function animate(timestamp) {\\n      if (!lastTime) lastTime = timestamp;\\n      const deltaTime = timestamp - lastTime;\\n      lastTime = timestamp;\\n      time += deltaTime * 0.001;\\n      ctx.clearRect(0, 0, canvas.width, canvas.height);\\n      ctx.beginPath();\\n      ctx.arc(centerX, centerY, 3, 0, Math.PI * 2);\\n      ctx.fillStyle = \\\"rgba(255, 78, 66, 0.9)\\\";\\n      ctx.fill();\\n      for (let c = 0; c < circleCount; c++) {\\n        const circlePhase = (time * 0.3 + c \\/ circleCount) % 1;\\n        const radius = circlePhase * maxRadius;\\n        const opacity = 1 - circlePhase;\\n        ctx.beginPath();\\n        ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);\\n        ctx.strokeStyle = `rgba(255, 78, 66, ${opacity * 0.2})`;\\n        ctx.lineWidth = 1;\\n        ctx.stroke();\\n        for (let i = 0; i < dotCount; i++) {\\n          const angle = (i \\/ dotCount) * Math.PI * 2;\\n          const x = centerX + Math.cos(angle) * radius;\\n          const y = centerY + Math.sin(angle) * radius;\\n          const size = 2 * (1 - circlePhase * 0.5);\\n          ctx.beginPath();\\n          ctx.moveTo(centerX, centerY);\\n          ctx.lineTo(x, y);\\n          ctx.strokeStyle = `rgba(255, 78, 66, ${opacity * 0.1})`;\\n          ctx.lineWidth = 1;\\n          ctx.stroke();\\n          ctx.beginPath();\\n          ctx.arc(x, y, size, 0, Math.PI * 2);\\n          ctx.fillStyle = `rgba(255, 78, 66, ${opacity * 0.9})`;\\n          ctx.fill();\\n        }\\n      }\\n      if (document.getElementById(\\\"loading-overlay\\\").style.display !== \\\"none\\\") {\\n        requestAnimationFrame(animate);\\n      }\\n    }\\n    requestAnimationFrame(animate);\\n  }\\n  function initFloatingParticles() {\\n    const container = document.getElementById(\\\"floating-particles\\\");\\n    const numParticles = 1000;\\n\\n    \\/\\/ Clear any existing particles\\n    container.innerHTML = \\\"\\\";\\n    floatingParticles = [];\\n\\n    \\/\\/ Get window dimensions for better positioning\\n    const windowWidth = window.innerWidth;\\n    const windowHeight = window.innerHeight;\\n    const centerX = windowWidth \\/ 2;\\n    const centerY = windowHeight \\/ 2;\\n\\n    for (let i = 0; i < numParticles; i++) {\\n      const particle = document.createElement(\\\"div\\\");\\n      particle.className = \\\"particle\\\";\\n      particle.style.position = \\\"absolute\\\";\\n\\n      \\/\\/ Make all particles the same small size\\n      particle.style.width = \\\"1.5px\\\";\\n      particle.style.height = \\\"1.5px\\\";\\n      particle.style.backgroundColor = `rgba(255, ${\\n        Math.floor(Math.random() * 100) + 78\\n      }, ${Math.floor(Math.random() * 100) + 66}, ${\\n        Math.random() * 0.5 + 0.2\\n      })`;\\n      particle.style.borderRadius = \\\"50%\\\";\\n\\n      \\/\\/ Create a large hollow area in the center\\n      const minDistance = 200; \\/\\/ Minimum distance from center\\n      const maxDistance = Math.max(windowWidth, windowHeight) * 0.8; \\/\\/ Use 80% of the larger dimension\\n\\n      \\/\\/ Use polar coordinates for even distribution\\n      const angle = Math.random() * Math.PI * 2;\\n\\n      \\/\\/ Use square root distribution for more even radial distribution\\n      \\/\\/ (prevents clustering at the center that happens with linear distribution)\\n      const distanceFactor = Math.sqrt(Math.random());\\n      const distance =\\n        minDistance + distanceFactor * (maxDistance - minDistance);\\n\\n      \\/\\/ Calculate position\\n      const x = Math.cos(angle) * distance + centerX;\\n      const y = Math.sin(angle) * distance + centerY;\\n\\n      particle.style.left = x + \\\"px\\\";\\n      particle.style.top = y + \\\"px\\\";\\n\\n      \\/\\/ Store particle properties for animation\\n      const particleObj = {\\n        element: particle,\\n        x: x,\\n        y: y,\\n        speed: Math.random() * 0.5 + 0.1,\\n        angle: Math.random() * Math.PI * 2,\\n        angleSpeed: (Math.random() - 0.5) * 0.02,\\n        amplitude: Math.random() * 50 + 20, \\/\\/ Increased amplitude for wider movement\\n        size: 1.5, \\/\\/ Fixed size\\n        pulseSpeed: Math.random() * 0.04 + 0.01,\\n        pulsePhase: Math.random() * Math.PI * 2\\n      };\\n\\n      floatingParticles.push(particleObj);\\n      container.appendChild(particle);\\n    }\\n\\n    \\/\\/ Start animation\\n    animateFloatingParticles();\\n  }\\n\\n  \\/\\/ Animate floating particles\\n  function animateFloatingParticles() {\\n    const centerX = window.innerWidth \\/ 2;\\n    const centerY = window.innerHeight \\/ 2;\\n    let time = 0;\\n\\n    function updateParticles() {\\n      time += 0.01;\\n\\n      floatingParticles.forEach((particle) => {\\n        \\/\\/ Update angle\\n        particle.angle += particle.angleSpeed;\\n\\n        \\/\\/ Calculate orbit around center with some drift\\n        const orbitX = centerX + Math.cos(particle.angle) * particle.amplitude;\\n        const orbitY = centerY + Math.sin(particle.angle) * particle.amplitude;\\n\\n        \\/\\/ Add some noise movement\\n        const noiseX = Math.sin(time * particle.speed + particle.angle) * 5;\\n        const noiseY =\\n          Math.cos(time * particle.speed + particle.angle * 0.7) * 5;\\n\\n        \\/\\/ Apply movement without audio reactivity\\n        const newX = orbitX + noiseX;\\n        const newY = orbitY + noiseY;\\n\\n        \\/\\/ Update position\\n        particle.element.style.left = newX + \\\"px\\\";\\n        particle.element.style.top = newY + \\\"px\\\";\\n\\n        \\/\\/ Pulse size slightly without audio\\n        const pulseFactor =\\n          1 + Math.sin(time * particle.pulseSpeed + particle.pulsePhase) * 0.3;\\n        const newSize = particle.size * pulseFactor;\\n\\n        particle.element.style.width = newSize + \\\"px\\\";\\n        particle.element.style.height = newSize + \\\"px\\\";\\n\\n        \\/\\/ Adjust opacity based on pulse\\n        const baseOpacity =\\n          0.2 +\\n          Math.sin(time * particle.pulseSpeed + particle.pulsePhase) * 0.1;\\n        particle.element.style.opacity = Math.min(0.8, baseOpacity);\\n      });\\n\\n      requestAnimationFrame(updateParticles);\\n    }\\n\\n    requestAnimationFrame(updateParticles);\\n  }\\n\\n  function initAudio() {\\n    if (isAudioInitialized) return true;\\n    try {\\n      audioContext = new (window.AudioContext || window.webkitAudioContext)();\\n      audioAnalyser = audioContext.createAnalyser();\\n      audioAnalyser.fftSize = 2048;\\n      audioAnalyser.smoothingTimeConstant = 0.8;\\n      audioData = new Uint8Array(audioAnalyser.frequencyBinCount);\\n      frequencyData = new Uint8Array(audioAnalyser.frequencyBinCount);\\n      audioAnalyser.connect(audioContext.destination);\\n      isAudioInitialized = true;\\n      addTerminalMessage(\\\"AUDIO ANALYSIS SYSTEM INITIALIZED.\\\");\\n      showNotification(\\\"AUDIO ANALYSIS SYSTEM ONLINE\\\");\\n      return true;\\n    } catch (error) {\\n      console.error(\\\"Audio initialization error:\\\", error);\\n      addTerminalMessage(\\\"ERROR: AUDIO SYSTEM INITIALIZATION FAILED.\\\");\\n      showNotification(\\\"AUDIO SYSTEM ERROR\\\");\\n      return false;\\n    }\\n  }\\n\\n  function ensureAudioContextStarted() {\\n    if (!audioContext) {\\n      if (!initAudio()) return false;\\n    }\\n    if (audioContext.state === \\\"suspended\\\") {\\n      audioContext\\n        .resume()\\n        .then(() => {\\n          if (!audioContextStarted) {\\n            audioContextStarted = true;\\n            addTerminalMessage(\\\"AUDIO CONTEXT RESUMED.\\\");\\n          }\\n        })\\n        .catch((err) => {\\n          console.error(\\\"Failed to resume audio context:\\\", err);\\n          addTerminalMessage(\\\"ERROR: FAILED TO RESUME AUDIO CONTEXT.\\\");\\n        });\\n    } else {\\n      audioContextStarted = true;\\n    }\\n    return true;\\n  }\\n\\n  function cleanupAudioSource() {\\n    if (audioSource) {\\n      try {\\n        audioSource.disconnect();\\n        audioSourceConnected = false;\\n        audioSource = null;\\n      } catch (e) {\\n        console.log(\\\"Error disconnecting previous source:\\\", e);\\n      }\\n    }\\n  }\\n\\n  function createNewAudioElement() {\\n    if (currentAudioElement) {\\n      if (currentAudioElement.parentNode) {\\n        currentAudioElement.parentNode.removeChild(currentAudioElement);\\n      }\\n    }\\n    const newAudioElement = document.createElement(\\\"audio\\\");\\n    newAudioElement.id = \\\"audio-player\\\";\\n    newAudioElement.className = \\\"audio-player\\\";\\n    newAudioElement.crossOrigin = \\\"anonymous\\\";\\n    document\\n      .querySelector(\\\".audio-controls\\\")\\n      .insertBefore(newAudioElement, document.querySelector(\\\".controls-row\\\"));\\n    currentAudioElement = newAudioElement;\\n    return newAudioElement;\\n  }\\n\\n  function setupAudioSource(audioElement) {\\n    try {\\n      if (!ensureAudioContextStarted()) {\\n        addTerminalMessage(\\n          \\\"ERROR: AUDIO CONTEXT NOT AVAILABLE. CLICK ANYWHERE TO ENABLE AUDIO.\\\"\\n        );\\n        return false;\\n      }\\n      cleanupAudioSource();\\n      try {\\n        \\/\\/ Only create a new media element source if one doesn't already exist\\n        if (!audioSourceConnected) {\\n          audioSource = audioContext.createMediaElementSource(audioElement);\\n          audioSource.connect(audioAnalyser);\\n          audioSourceConnected = true;\\n        }\\n        return true;\\n      } catch (error) {\\n        console.error(\\\"Error creating media element source:\\\", error);\\n        if (\\n          error.name === \\\"InvalidStateError\\\" &&\\n          error.message.includes(\\\"already connected\\\")\\n        ) {\\n          addTerminalMessage(\\n            \\\"AUDIO SOURCE ALREADY CONNECTED. ATTEMPTING TO PLAY ANYWAY.\\\"\\n          );\\n          return true;\\n        }\\n        addTerminalMessage(\\n          \\\"ERROR: FAILED TO SETUP AUDIO SOURCE. \\\" + error.message\\n        );\\n        return false;\\n      }\\n    } catch (error) {\\n      console.error(\\\"Error setting up audio source:\\\", error);\\n      addTerminalMessage(\\\"ERROR: FAILED TO SETUP AUDIO SOURCE.\\\");\\n      return false;\\n    }\\n  }\\n\\n  function initAudioFile(file) {\\n    try {\\n      if (!isAudioInitialized && !initAudio()) {\\n        return;\\n      }\\n      const audioPlayer = createNewAudioElement();\\n      const fileURL = URL.createObjectURL(file);\\n      currentAudioSrc = fileURL;\\n      audioPlayer.src = fileURL;\\n      audioPlayer.onloadeddata = function () {\\n        if (setupAudioSource(audioPlayer)) {\\n          audioPlayer\\n            .play()\\n            .then(() => {\\n              isAudioPlaying = true;\\n              zoomCameraForAudio(true);\\n            })\\n            .catch((e) => {\\n              console.warn(\\\"Auto-play prevented:\\\", e);\\n              addTerminalMessage(\\n                \\\"WARNING: AUTO-PLAY PREVENTED BY BROWSER. CLICK PLAY TO START AUDIO.\\\"\\n              );\\n            });\\n        }\\n      };\\n      document.getElementById(\\\"file-label\\\").textContent = file.name;\\n      document.querySelectorAll(\\\".demo-track-btn\\\").forEach((btn) => {\\n        btn.classList.remove(\\\"active\\\");\\n      });\\n      addTerminalMessage(`AUDIO FILE LOADED: ${file.name}`);\\n      showNotification(\\\"AUDIO FILE LOADED\\\");\\n    } catch (error) {\\n      console.error(\\\"Audio file error:\\\", error);\\n      addTerminalMessage(\\\"ERROR: AUDIO FILE PROCESSING FAILED.\\\");\\n      showNotification(\\\"AUDIO FILE ERROR\\\");\\n    }\\n  }\\n\\n  function loadAudioFromURL(url) {\\n    try {\\n      if (!isAudioInitialized && !initAudio()) {\\n        return;\\n      }\\n      ensureAudioContextStarted();\\n      const audioPlayer = createNewAudioElement();\\n      currentAudioSrc = url;\\n      audioPlayer.src = url;\\n      audioPlayer.onloadeddata = function () {\\n        if (setupAudioSource(audioPlayer)) {\\n          audioPlayer\\n            .play()\\n            .then(() => {\\n              isAudioPlaying = true;\\n              zoomCameraForAudio(true);\\n              addTerminalMessage(`PLAYING DEMO TRACK: ${url.split(\\\"\\/\\\").pop()}`);\\n              showNotification(`PLAYING: ${url.split(\\\"\\/\\\").pop()}`);\\n            })\\n            .catch((e) => {\\n              console.warn(\\\"Play prevented:\\\", e);\\n              addTerminalMessage(\\n                \\\"WARNING: AUDIO PLAYBACK PREVENTED BY BROWSER. CLICK PLAY TO START AUDIO.\\\"\\n              );\\n              showNotification(\\\"CLICK PLAY TO START AUDIO\\\");\\n            });\\n        }\\n      };\\n      const filename = url.split(\\\"\\/\\\").pop();\\n      document.getElementById(\\\"file-label\\\").textContent = filename;\\n      addTerminalMessage(`LOADING AUDIO FROM URL: ${url.substring(0, 40)}...`);\\n      showNotification(\\\"AUDIO URL LOADED\\\");\\n    } catch (error) {\\n      console.error(\\\"Audio URL error:\\\", error);\\n      addTerminalMessage(\\\"ERROR: AUDIO URL PROCESSING FAILED.\\\");\\n      showNotification(\\\"AUDIO URL ERROR\\\");\\n    }\\n  }\\n  const circularCanvas = document.getElementById(\\\"circular-canvas\\\");\\n  const circularCtx = circularCanvas.getContext(\\\"2d\\\");\\n\\n  function resizeCircularCanvas() {\\n    circularCanvas.width = circularCanvas.offsetWidth;\\n    circularCanvas.height = circularCanvas.offsetHeight;\\n  }\\n  resizeCircularCanvas();\\n  window.addEventListener(\\\"resize\\\", resizeCircularCanvas);\\n\\n  function drawCircularVisualizer() {\\n    if (!audioAnalyser) return;\\n    const width = circularCanvas.width;\\n    const height = circularCanvas.height;\\n    const centerX = width \\/ 2;\\n    const centerY = height \\/ 2;\\n    circularCtx.clearRect(0, 0, width, height);\\n    audioAnalyser.getByteFrequencyData(frequencyData);\\n    const numPoints = 180;\\n    const baseRadius = Math.min(width, height) * 0.4;\\n    circularCtx.beginPath();\\n    circularCtx.arc(centerX, centerY, baseRadius * 1.2, 0, Math.PI * 2);\\n    circularCtx.fillStyle = \\\"rgba(255, 78, 66, 0.05)\\\";\\n    circularCtx.fill();\\n    const numRings = 3;\\n    for (let ring = 0; ring < numRings; ring++) {\\n      const ringRadius = baseRadius * (0.7 + ring * 0.15);\\n      const opacity = 0.8 - ring * 0.2;\\n      circularCtx.beginPath();\\n      for (let i = 0; i < numPoints; i++) {\\n        const freqRangeStart = Math.floor(\\n          (ring * audioAnalyser.frequencyBinCount) \\/ (numRings * 1.5)\\n        );\\n        const freqRangeEnd = Math.floor(\\n          ((ring + 1) * audioAnalyser.frequencyBinCount) \\/ (numRings * 1.5)\\n        );\\n        const freqRange = freqRangeEnd - freqRangeStart;\\n        let sum = 0;\\n        const segmentSize = Math.floor(freqRange \\/ numPoints);\\n        for (let j = 0; j < segmentSize; j++) {\\n          const freqIndex =\\n            freqRangeStart + ((i * segmentSize + j) % freqRange);\\n          sum += frequencyData[freqIndex];\\n        }\\n        const value = sum \\/ (segmentSize * 255);\\n        const adjustedValue = value * (audioSensitivity \\/ 5) * audioReactivity;\\n        const dynamicRadius = ringRadius * (1 + adjustedValue * 0.5);\\n        const angle = (i \\/ numPoints) * Math.PI * 2;\\n        const x = centerX + Math.cos(angle) * dynamicRadius;\\n        const y = centerY + Math.sin(angle) * dynamicRadius;\\n        if (i === 0) {\\n          circularCtx.moveTo(x, y);\\n        } else {\\n          circularCtx.lineTo(x, y);\\n        }\\n      }\\n      circularCtx.closePath();\\n      let gradient;\\n      if (ring === 0) {\\n        gradient = circularCtx.createRadialGradient(\\n          centerX,\\n          centerY,\\n          ringRadius * 0.8,\\n          centerX,\\n          centerY,\\n          ringRadius * 1.2\\n        );\\n        gradient.addColorStop(0, `rgba(255, 78, 66, ${opacity})`);\\n        gradient.addColorStop(1, `rgba(194, 54, 47, ${opacity * 0.7})`);\\n      } else if (ring === 1) {\\n        gradient = circularCtx.createRadialGradient(\\n          centerX,\\n          centerY,\\n          ringRadius * 0.8,\\n          centerX,\\n          centerY,\\n          ringRadius * 1.2\\n        );\\n        gradient.addColorStop(0, `rgba(194, 54, 47, ${opacity})`);\\n        gradient.addColorStop(1, `rgba(255, 179, 171, ${opacity * 0.7})`);\\n      } else {\\n        gradient = circularCtx.createRadialGradient(\\n          centerX,\\n          centerY,\\n          ringRadius * 0.8,\\n          centerX,\\n          centerY,\\n          ringRadius * 1.2\\n        );\\n        gradient.addColorStop(0, `rgba(255, 179, 171, ${opacity})`);\\n        gradient.addColorStop(1, `rgba(255, 78, 66, ${opacity * 0.7})`);\\n      }\\n      circularCtx.strokeStyle = gradient;\\n      circularCtx.lineWidth = 2 + (numRings - ring);\\n      circularCtx.stroke();\\n      circularCtx.shadowBlur = 15;\\n      circularCtx.shadowColor = \\\"rgba(255, 78, 66, 0.7)\\\";\\n    }\\n    circularCtx.shadowBlur = 0;\\n  }\\n  const spectrumCanvas = document.getElementById(\\\"spectrum-canvas\\\");\\n  const spectrumCtx = spectrumCanvas.getContext(\\\"2d\\\");\\n\\n  function resizeSpectrumCanvas() {\\n    spectrumCanvas.width = spectrumCanvas.offsetWidth;\\n    spectrumCanvas.height = spectrumCanvas.offsetHeight;\\n  }\\n  resizeSpectrumCanvas();\\n  window.addEventListener(\\\"resize\\\", resizeSpectrumCanvas);\\n\\n  function drawSpectrumAnalyzer() {\\n    if (!audioAnalyser) return;\\n    const width = spectrumCanvas.width;\\n    const height = spectrumCanvas.height;\\n    spectrumCtx.clearRect(0, 0, width, height);\\n    audioAnalyser.getByteFrequencyData(frequencyData);\\n    const barWidth = width \\/ 256;\\n    let x = 0;\\n    for (let i = 0; i < 256; i++) {\\n      const barHeight =\\n        (frequencyData[i] \\/ 255) * height * (audioSensitivity \\/ 5);\\n      const hue = (i \\/ 256) * 20 + 0;\\n      spectrumCtx.fillStyle = `hsl(${hue}, 100%, 50%)`;\\n      spectrumCtx.fillRect(x, height - barHeight, barWidth - 1, barHeight);\\n      x += barWidth;\\n    }\\n    spectrumCtx.strokeStyle = \\\"rgba(255, 78, 66, 0.2)\\\";\\n    spectrumCtx.lineWidth = 1;\\n    for (let i = 0; i < 5; i++) {\\n      const y = height * (i \\/ 4);\\n      spectrumCtx.beginPath();\\n      spectrumCtx.moveTo(0, y);\\n      spectrumCtx.lineTo(width, y);\\n      spectrumCtx.stroke();\\n    }\\n    for (let i = 0; i < 9; i++) {\\n      const x = width * (i \\/ 8);\\n      spectrumCtx.beginPath();\\n      spectrumCtx.moveTo(x, 0);\\n      spectrumCtx.lineTo(x, height);\\n      spectrumCtx.stroke();\\n    }\\n    spectrumCtx.fillStyle = \\\"rgba(255, 78, 66, 0.7)\\\";\\n    spectrumCtx.font = '10px \\\"TheGoodMonolith\\\", monospace';\\n    spectrumCtx.textAlign = \\\"center\\\";\\n    const freqLabels = [\\\"0\\\", \\\"1K\\\", \\\"2K\\\", \\\"4K\\\", \\\"8K\\\", \\\"16K\\\"];\\n    for (let i = 0; i < freqLabels.length; i++) {\\n      const x = (width \\/ (freqLabels.length - 1)) * i;\\n      spectrumCtx.fillText(freqLabels[i], x, height - 5);\\n    }\\n  }\\n\\n  function updateAudioWave() {\\n    if (!audioAnalyser) return;\\n    audioAnalyser.getByteTimeDomainData(audioData);\\n    let sum = 0;\\n    for (let i = 0; i < audioData.length; i++) {\\n      sum += Math.abs(audioData[i] - 128);\\n    }\\n    const average = sum \\/ audioData.length;\\n    const normalizedAverage = average \\/ audioData.length;\\n    const wave = document.getElementById(\\\"audio-wave\\\");\\n    const scale =\\n      1 + normalizedAverage * audioReactivity * (audioSensitivity \\/ 5);\\n    wave.style.transform = `translate(-50%, -50%) scale(${scale})`;\\n    wave.style.borderColor = `rgba(255, 78, 66, ${\\n      0.1 + normalizedAverage * 0.3\\n    })`;\\n  }\\n\\n  function calculateAudioMetrics() {\\n    if (!audioAnalyser) return;\\n    audioAnalyser.getByteFrequencyData(frequencyData);\\n    let maxValue = 0;\\n    let maxIndex = 0;\\n    for (let i = 0; i < frequencyData.length; i++) {\\n      if (frequencyData[i] > maxValue) {\\n        maxValue = frequencyData[i];\\n        maxIndex = i;\\n      }\\n    }\\n    const sampleRate = audioContext.sampleRate;\\n    const peakFrequency =\\n      (maxIndex * sampleRate) \\/ (audioAnalyser.frequencyBinCount * 2);\\n    let sum = 0;\\n    for (let i = 0; i < frequencyData.length; i++) {\\n      sum += frequencyData[i];\\n    }\\n    const amplitude = sum \\/ (frequencyData.length * 255);\\n    document.getElementById(\\\"peak-value\\\").textContent = `${Math.round(\\n      peakFrequency\\n    )} HZ`;\\n    document.getElementById(\\\"amplitude-value\\\").textContent = amplitude.toFixed(\\n      2\\n    );\\n    const stabilityValue = 50 + Math.round(amplitude * 50);\\n    document.getElementById(\\n      \\\"stability-value\\\"\\n    ).textContent = `${stabilityValue}%`;\\n    document.getElementById(\\\"stability-bar\\\").style.width = `${stabilityValue}%`;\\n    if (stabilityValue < 40) {\\n      document.getElementById(\\\"status-indicator\\\").style.color = \\\"#ff00a0\\\";\\n    } else if (stabilityValue < 70) {\\n      document.getElementById(\\\"status-indicator\\\").style.color = \\\"#ffae00\\\";\\n    } else {\\n      document.getElementById(\\\"status-indicator\\\").style.color = \\\"#ff4e42\\\";\\n    }\\n    if (Math.random() < 0.05) {\\n      document.getElementById(\\\"mass-value\\\").textContent = (\\n        1 +\\n        amplitude * 2\\n      ).toFixed(3);\\n      document.getElementById(\\\"energy-value\\\").textContent = `${(\\n        amplitude * 10\\n      ).toFixed(1)}e8 J`;\\n      document.getElementById(\\\"variance-value\\\").textContent = (\\n        amplitude * 0.01\\n      ).toFixed(4);\\n      const phases = [\\\"π\\/4\\\", \\\"π\\/2\\\", \\\"π\\/6\\\", \\\"3π\\/4\\\"];\\n      document.getElementById(\\\"phase-value\\\").textContent =\\n        phases[Math.floor(Math.random() * phases.length)];\\n    }\\n  }\\n\\n  function scheduleCrypticMessages() {\\n    if (crypticMessageTimeout) {\\n      clearTimeout(crypticMessageTimeout);\\n    }\\n\\n    const delay = Math.random() * 15000 + 10000; \\/\\/ 10-25 seconds\\n\\n    crypticMessageTimeout = setTimeout(() => {\\n      if (Date.now() - lastUserActionTime > 10000) {\\n        const messages = [\\n          \\\"GSAP.TO('#FILIP', {POSITION: 'WEBFLOW', DURATION: '3.0 QUANTUM_CYCLES'});\\\",\\n          \\\"CONST FILIP = NEW DESIGNER({SKILLS: ['GSAP', 'THREEJS', 'WEBFLOW', 'NEURAL_UI']});\\\",\\n          \\\"AWAIT WEBFLOW.HIRE(FILIP, {ROLE: 'DESIGNER', SALARY: 'COMPETITIVE'});\\\",\\n          \\\"SYSTEM.INTEGRATE(FILIP.CREATIVITY, {TARGET: 'WEBFLOW_ECOSYSTEM', EFFICIENCY: 0.97});\\\",\\n          \\\"TIMELINE.FORK({AGENT: 'FILIP', MISSION: 'ELEVATE_DIGITAL_EXPERIENCES', PROBABILITY: 0.998});\\\"\\n        ];\\n\\n        \\/\\/ Get the current message and increment the index\\n        const selectedMessage = messages[currentMessageIndex];\\n        addTerminalMessage(selectedMessage, true);\\n\\n        \\/\\/ Move to the next message, loop back to the beginning if we've shown all messages\\n        currentMessageIndex = (currentMessageIndex + 1) % messages.length;\\n      }\\n\\n      scheduleCrypticMessages();\\n    }, delay);\\n  }\\n  document.addEventListener(\\\"mousemove\\\", function () {\\n    lastUserActionTime = Date.now();\\n  });\\n  document.addEventListener(\\\"click\\\", function () {\\n    lastUserActionTime = Date.now();\\n    if (!isAudioInitialized) {\\n      initAudio();\\n    } else if (audioContext && audioContext.state === \\\"suspended\\\") {\\n      audioContext.resume();\\n    }\\n  });\\n  document.addEventListener(\\\"keydown\\\", function () {\\n    lastUserActionTime = Date.now();\\n  });\\n  setTimeout(() => {\\n    scheduleCrypticMessages();\\n    setTimeout(() => {\\n      addTerminalMessage(\\\"FILIPPORTFOLIO.VERSION = 'EXCEPTIONAL';\\\", true);\\n    }, 15000);\\n  }, 10000);\\n  const loadingOverlay = document.getElementById(\\\"loading-overlay\\\");\\n  setTimeout(() => {\\n    loadingOverlay.style.opacity = 0;\\n    setTimeout(() => {\\n      loadingOverlay.style.display = \\\"none\\\";\\n      initAudio();\\n      initFloatingParticles();\\n    }, 500);\\n  }, 3000);\\n\\n  function updateTimestamp() {\\n    const now = new Date();\\n    const hours = String(now.getHours()).padStart(2, \\\"0\\\");\\n    const minutes = String(now.getMinutes()).padStart(2, \\\"0\\\");\\n    const seconds = String(now.getSeconds()).padStart(2, \\\"0\\\");\\n    document.getElementById(\\n      \\\"timestamp\\\"\\n    ).textContent = `TIME: ${hours}:${minutes}:${seconds}`;\\n  }\\n  setInterval(updateTimestamp, 1000);\\n  updateTimestamp();\\n  const terminalContent = document.getElementById(\\\"terminal-content\\\");\\n  const typingLine = terminalContent.querySelector(\\\".typing\\\");\\n  let messageQueue = [\\n    \\\"SYSTEM INITIALIZED. AUDIO ANALYSIS READY.\\\",\\n    \\\"SCANNING FOR ANOMALIES IN FREQUENCY SPECTRUM.\\\"\\n  ];\\n\\n  function typeNextMessage() {\\n    if (messageQueue.length === 0) return;\\n    const message = messageQueue.shift();\\n    let charIndex = 0;\\n    const typingInterval = setInterval(() => {\\n      if (charIndex < message.length) {\\n        typingLine.textContent = message.substring(0, charIndex + 1);\\n        charIndex++;\\n      } else {\\n        clearInterval(typingInterval);\\n        const newLine = document.createElement(\\\"div\\\");\\n        newLine.className = \\\"terminal-line command-line\\\";\\n        newLine.textContent = message;\\n        terminalContent.insertBefore(newLine, typingLine);\\n        typingLine.textContent = \\\"\\\";\\n        terminalContent.scrollTop = terminalContent.scrollHeight;\\n        setTimeout(typeNextMessage, 5000);\\n      }\\n    }, 50);\\n  }\\n\\n  function addTerminalMessage(message, isCommand = false) {\\n    const newLine = document.createElement(\\\"div\\\");\\n    const isFilipMessage =\\n      message.toLowerCase().includes(\\\"filip\\\") ||\\n      message.toLowerCase().includes(\\\"webflow\\\");\\n    if (isCommand) {\\n      if (isFilipMessage) {\\n        newLine.className = \\\"terminal-line command-line\\\";\\n      } else {\\n        newLine.className = \\\"terminal-line command-line\\\";\\n      }\\n    } else {\\n      newLine.className = \\\"terminal-line\\\";\\n    }\\n    newLine.textContent = message;\\n    terminalContent.insertBefore(newLine, typingLine);\\n    terminalContent.scrollTop = terminalContent.scrollHeight;\\n  }\\n  setTimeout(typeNextMessage, 3000);\\n  const waveformCanvas = document.getElementById(\\\"waveform-canvas\\\");\\n  const waveformCtx = waveformCanvas.getContext(\\\"2d\\\");\\n\\n  function resizeCanvas() {\\n    waveformCanvas.width = waveformCanvas.offsetWidth * window.devicePixelRatio;\\n    waveformCanvas.height =\\n      waveformCanvas.offsetHeight * window.devicePixelRatio;\\n    waveformCtx.scale(window.devicePixelRatio, window.devicePixelRatio);\\n  }\\n  resizeCanvas();\\n  window.addEventListener(\\\"resize\\\", resizeCanvas);\\n\\n  function drawWaveform() {\\n    const width = waveformCanvas.width \\/ window.devicePixelRatio;\\n    const height = waveformCanvas.height \\/ window.devicePixelRatio;\\n    waveformCtx.clearRect(0, 0, width, height);\\n    waveformCtx.fillStyle = \\\"rgba(0, 0, 0, 0.2)\\\";\\n    waveformCtx.fillRect(0, 0, width, height);\\n    if (audioAnalyser) {\\n      audioAnalyser.getByteTimeDomainData(audioData);\\n      waveformCtx.beginPath();\\n      waveformCtx.strokeStyle = \\\"rgba(255, 78, 66, 0.8)\\\";\\n      waveformCtx.lineWidth = 2;\\n      const sliceWidth = width \\/ audioData.length;\\n      let x = 0;\\n      for (let i = 0; i < audioData.length; i++) {\\n        const v = audioData[i] \\/ 128.0;\\n        const y = (v * height) \\/ 2;\\n        if (i === 0) {\\n          waveformCtx.moveTo(x, y);\\n        } else {\\n          waveformCtx.lineTo(x, y);\\n        }\\n        x += sliceWidth;\\n      }\\n      waveformCtx.stroke();\\n    } else {\\n      waveformCtx.beginPath();\\n      waveformCtx.strokeStyle = \\\"rgba(255, 78, 66, 0.8)\\\";\\n      waveformCtx.lineWidth = 1;\\n      const time = Date.now() \\/ 1000;\\n      const sliceWidth = width \\/ 100;\\n      let x = 0;\\n      for (let i = 0; i < 100; i++) {\\n        const t = i \\/ 100;\\n        const y =\\n          height \\/ 2 +\\n          Math.sin(t * 10 + time) * 5 +\\n          Math.sin(t * 20 + time * 1.5) * 3 +\\n          Math.sin(t * 30 + time * 0.5) * 7 +\\n          (Math.random() - 0.5) * 2;\\n        if (i === 0) {\\n          waveformCtx.moveTo(x, y);\\n        } else {\\n          waveformCtx.lineTo(x, y);\\n        }\\n        x += sliceWidth;\\n      }\\n      waveformCtx.stroke();\\n    }\\n    requestAnimationFrame(drawWaveform);\\n  }\\n  drawWaveform();\\n  let scene, camera, renderer, controls;\\n  let anomalyObject;\\n  let distortionAmount = 1.0;\\n  let resolution = 32;\\n  let clock = new THREE.Clock();\\n  let isDraggingAnomaly = false;\\n  let anomalyVelocity = new THREE.Vector2(0, 0);\\n  let anomalyTargetPosition = new THREE.Vector3(0, 0, 0);\\n  let anomalyOriginalPosition = new THREE.Vector3(0, 0, 0);\\n  let defaultCameraPosition = new THREE.Vector3(0, 0, 10);\\n  let zoomedCameraPosition = new THREE.Vector3(0, 0, 7);\\n\\n  function initThreeJS() {\\n    scene = new THREE.Scene();\\n    scene.fog = new THREE.FogExp2(0x0a0e17, 0.05);\\n    camera = new THREE.PerspectiveCamera(\\n      60,\\n      window.innerWidth \\/ window.innerHeight,\\n      0.1,\\n      1000\\n    );\\n    camera.position.copy(defaultCameraPosition);\\n    renderer = new THREE.WebGLRenderer({\\n      antialias: true,\\n      alpha: true,\\n      powerPreference: \\\"high-performance\\\",\\n      stencil: false,\\n      depth: true\\n    });\\n    renderer.setSize(window.innerWidth, window.innerHeight);\\n    renderer.setClearColor(0x000000, 0);\\n    renderer.setPixelRatio(window.devicePixelRatio);\\n    document.getElementById(\\\"three-container\\\").appendChild(renderer.domElement);\\n    controls = new OrbitControls(camera, renderer.domElement);\\n    controls.enableDamping = true;\\n    controls.dampingFactor = 0.1;\\n    controls.rotateSpeed = 0.5;\\n    controls.zoomSpeed = 0.7;\\n    controls.panSpeed = 0.8;\\n    controls.minDistance = 3;\\n    controls.maxDistance = 30;\\n    controls.enableZoom = false;\\n    const ambientLight = new THREE.AmbientLight(0x404040, 1.5);\\n    scene.add(ambientLight);\\n    const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5);\\n    directionalLight.position.set(1, 1, 1);\\n    scene.add(directionalLight);\\n    const pointLight1 = new THREE.PointLight(0xff4e42, 1, 10);\\n    pointLight1.position.set(2, 2, 2);\\n    scene.add(pointLight1);\\n    const pointLight2 = new THREE.PointLight(0xc2362f, 1, 10);\\n    pointLight2.position.set(-2, -2, -2);\\n    scene.add(pointLight2);\\n    createAnomalyObject();\\n    createBackgroundParticles();\\n    window.addEventListener(\\\"resize\\\", onWindowResize);\\n    setupAnomalyDragging();\\n    animate();\\n  }\\n\\n  function zoomCameraForAudio(zoomIn) {\\n    const targetPosition = zoomIn\\n      ? zoomedCameraPosition\\n      : defaultCameraPosition;\\n    gsap.to(camera.position, {\\n      x: targetPosition.x,\\n      y: targetPosition.y,\\n      z: targetPosition.z,\\n      duration: 1.5,\\n      ease: \\\"power2.inOut\\\",\\n      onUpdate: function () {\\n        camera.lookAt(0, 0, 0);\\n      }\\n    });\\n    if (zoomIn) {\\n      addTerminalMessage(\\n        \\\"CAMERA.ZOOM(TARGET: 0.7, DURATION: 1.5, EASE: 'POWER2.INOUT');\\\",\\n        true\\n      );\\n    } else {\\n      addTerminalMessage(\\n        \\\"CAMERA.ZOOM(TARGET: 1.0, DURATION: 1.5, EASE: 'POWER2.INOUT');\\\",\\n        true\\n      );\\n    }\\n  }\\n\\n  function setupAnomalyDragging() {\\n    const container = document.getElementById(\\\"three-container\\\");\\n    const raycaster = new THREE.Raycaster();\\n    const mouse = new THREE.Vector2();\\n    let isDragging = false;\\n    let dragStartPosition = new THREE.Vector2();\\n    anomalyOriginalPosition = new THREE.Vector3(0, 0, 0);\\n    anomalyTargetPosition = new THREE.Vector3(0, 0, 0);\\n    const maxDragDistance = 3;\\n    container.addEventListener(\\\"mousedown\\\", function (event) {\\n      mouse.x = (event.clientX \\/ window.innerWidth) * 2 - 1;\\n      mouse.y = -(event.clientY \\/ window.innerHeight) * 2 + 1;\\n      raycaster.setFromCamera(mouse, camera);\\n      const intersects = raycaster.intersectObject(anomalyObject, true);\\n      if (intersects.length > 0) {\\n        controls.enabled = false;\\n        isDragging = true;\\n        isDraggingAnomaly = true;\\n        dragStartPosition.x = mouse.x;\\n        dragStartPosition.y = mouse.y;\\n        addTerminalMessage(\\n          \\\"ANOMALY INTERACTION DETECTED. PHYSICS SIMULATION ACTIVE.\\\",\\n          true\\n        );\\n        showNotification(\\\"ANOMALY INTERACTION DETECTED\\\");\\n      }\\n    });\\n    container.addEventListener(\\\"mousemove\\\", function (event) {\\n      if (isDragging) {\\n        mouse.x = (event.clientX \\/ window.innerWidth) * 2 - 1;\\n        mouse.y = -(event.clientY \\/ window.innerHeight) * 2 + 1;\\n        \\/\\/ Fix the drag direction to match mouse movement\\n        const deltaX = (mouse.x - dragStartPosition.x) * 5;\\n        const deltaY = (mouse.y - dragStartPosition.y) * 5;\\n        anomalyTargetPosition.x += deltaX;\\n        anomalyTargetPosition.y += deltaY;\\n        const distance = Math.sqrt(\\n          anomalyTargetPosition.x * anomalyTargetPosition.x +\\n            anomalyTargetPosition.y * anomalyTargetPosition.y\\n        );\\n        if (distance > maxDragDistance) {\\n          const scale = maxDragDistance \\/ distance;\\n          anomalyTargetPosition.x *= scale;\\n          anomalyTargetPosition.y *= scale;\\n        }\\n        anomalyVelocity.x = deltaX * 2;\\n        anomalyVelocity.y = deltaY * 2;\\n        dragStartPosition.x = mouse.x;\\n        dragStartPosition.y = mouse.y;\\n      }\\n    });\\n    container.addEventListener(\\\"mouseup\\\", function () {\\n      if (isDragging) {\\n        controls.enabled = true;\\n        isDragging = false;\\n        isDraggingAnomaly = false;\\n        addTerminalMessage(\\n          `INERTIAPLUGIN.TRACK('#ANOMALY', {THROWRESISTANCE: 0.45, VELOCITY: {X: ${anomalyVelocity.x.toFixed(\\n            2\\n          )}, Y: ${anomalyVelocity.y.toFixed(2)}}});`,\\n          true\\n        );\\n      }\\n    });\\n    container.addEventListener(\\\"mouseleave\\\", function () {\\n      if (isDragging) {\\n        controls.enabled = true;\\n        isDragging = false;\\n        isDraggingAnomaly = false;\\n      }\\n    });\\n  }\\n\\n  function createBackgroundParticles() {\\n    const particlesGeometry = new THREE.BufferGeometry();\\n    const particleCount = 3000;\\n    const positions = new Float32Array(particleCount * 3);\\n    const colors = new Float32Array(particleCount * 3);\\n    const sizes = new Float32Array(particleCount);\\n    const color1 = new THREE.Color(0xff4e42);\\n    const color2 = new THREE.Color(0xc2362f);\\n    const color3 = new THREE.Color(0xffb3ab);\\n    for (let i = 0; i < particleCount; i++) {\\n      positions[i * 3] = (Math.random() - 0.5) * 100;\\n      positions[i * 3 + 1] = (Math.random() - 0.5) * 100;\\n      positions[i * 3 + 2] = (Math.random() - 0.5) * 100;\\n      let color;\\n      const colorChoice = Math.random();\\n      if (colorChoice < 0.33) {\\n        color = color1;\\n      } else if (colorChoice < 0.66) {\\n        color = color2;\\n      } else {\\n        color = color3;\\n      }\\n      colors[i * 3] = color.r;\\n      colors[i * 3 + 1] = color.g;\\n      colors[i * 3 + 2] = color.b;\\n      sizes[i] = 0.05;\\n    }\\n    particlesGeometry.setAttribute(\\n      \\\"position\\\",\\n      new THREE.BufferAttribute(positions, 3)\\n    );\\n    particlesGeometry.setAttribute(\\n      \\\"color\\\",\\n      new THREE.BufferAttribute(colors, 3)\\n    );\\n    particlesGeometry.setAttribute(\\\"size\\\", new THREE.BufferAttribute(sizes, 1));\\n    const particlesMaterial = new THREE.ShaderMaterial({\\n      uniforms: {\\n        time: {\\n          value: 0\\n        }\\n      },\\n      vertexShader: `\\n          attribute float size;\\n          varying vec3 vColor;\\n          uniform float time;\\n          \\n          void main() {\\n            vColor = color;\\n            \\n            vec3 pos = position;\\n            pos.x += sin(time * 0.1 + position.z * 0.2) * 0.05;\\n            pos.y += cos(time * 0.1 + position.x * 0.2) * 0.05;\\n            pos.z += sin(time * 0.1 + position.y * 0.2) * 0.05;\\n            \\n            vec4 mvPosition = modelViewMatrix * vec4(pos, 1.0);\\n            gl_PointSize = size * (300.0 \\/ -mvPosition.z);\\n            gl_Position = projectionMatrix * mvPosition;\\n          }\\n        `,\\n      fragmentShader: `\\n          varying vec3 vColor;\\n          \\n          void main() {\\n            float r = distance(gl_PointCoord, vec2(0.5, 0.5));\\n            if (r > 0.5) discard;\\n            \\n            float glow = 1.0 - (r * 2.0);\\n            glow = pow(glow, 2.0);\\n            \\n            gl_FragColor = vec4(vColor, glow);\\n          }\\n        `,\\n      transparent: true,\\n      depthWrite: false,\\n      blending: THREE.AdditiveBlending,\\n      vertexColors: true\\n    });\\n    const particles = new THREE.Points(particlesGeometry, particlesMaterial);\\n    scene.add(particles);\\n    return function updateParticles(time) {\\n      particlesMaterial.uniforms.time.value = time;\\n    };\\n  }\\n  let updateParticles;\\n\\n  function createAnomalyObject() {\\n    if (anomalyObject) {\\n      scene.remove(anomalyObject);\\n    }\\n    anomalyObject = new THREE.Group();\\n    const radius = 2;\\n    const outerGeometry = new THREE.IcosahedronGeometry(\\n      radius,\\n      Math.max(1, Math.floor(resolution \\/ 8))\\n    );\\n    const outerMaterial = new THREE.ShaderMaterial({\\n      uniforms: {\\n        time: {\\n          value: 0\\n        },\\n        color: {\\n          value: new THREE.Color(0xff4e42)\\n        },\\n        audioLevel: {\\n          value: 0\\n        },\\n        distortion: {\\n          value: distortionAmount\\n        }\\n      },\\n      vertexShader: `\\n      uniform float time;\\n      uniform float audioLevel;\\n      uniform float distortion;\\n      varying vec3 vNormal;\\n      varying vec3 vPosition;\\n      \\n      vec3 mod289(vec3 x) { return x - floor(x * (1.0 \\/ 289.0)) * 289.0; }\\n      vec4 mod289(vec4 x) { return x - floor(x * (1.0 \\/ 289.0)) * 289.0; }\\n      vec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); }\\n      vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }\\n      \\n      float snoise(vec3 v) {\\n        const vec2 C = vec2(1.0\\/6.0, 1.0\\/3.0);\\n        const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);\\n        \\n        vec3 i  = floor(v + dot(v, C.yyy));\\n        vec3 x0 = v - i + dot(i, C.xxx);\\n        \\n        vec3 g = step(x0.yzx, x0.xyz);\\n        vec3 l = 1.0 - g;\\n        vec3 i1 = min(g.xyz, l.zxy);\\n        vec3 i2 = max(g.xyz, l.zxy);\\n        \\n        vec3 x1 = x0 - i1 + C.xxx;\\n        vec3 x2 = x0 - i2 + C.yyy;\\n        vec3 x3 = x0 - D.yyy;\\n        \\n        i = mod289(i);\\n        vec4 p = permute(permute(permute(\\n                i.z + vec4(0.0, i1.z, i2.z, 1.0))\\n              + i.y + vec4(0.0, i1.y, i2.y, 1.0))\\n              + i.x + vec4(0.0, i1.x, i2.x, 1.0));\\n              \\n        float n_ = 0.142857142857;\\n        vec3 ns = n_ * D.wyz - D.xzx;\\n        \\n        vec4 j = p - 49.0 * floor(p * ns.z * ns.z);\\n        \\n        vec4 x_ = floor(j * ns.z);\\n        vec4 y_ = floor(j - 7.0 * x_);\\n        \\n        vec4 x = x_ *ns.x + ns.yyyy;\\n        vec4 y = y_ *ns.x + ns.yyyy;\\n        vec4 h = 1.0 - abs(x) - abs(y);\\n        \\n        vec4 b0 = vec4(x.xy, y.xy);\\n        vec4 b1 = vec4(x.zw, y.zw);\\n        \\n        vec4 s0 = floor(b0)*2.0 + 1.0;\\n        vec4 s1 = floor(b1)*2.0 + 1.0;\\n        vec4 sh = -step(h, vec4(0.0));\\n        \\n        vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy;\\n        vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww;\\n        \\n        vec3 p0 = vec3(a0.xy, h.x);\\n        vec3 p1 = vec3(a0.zw, h.y);\\n        vec3 p2 = vec3(a1.xy, h.z);\\n        vec3 p3 = vec3(a1.zw, h.w);\\n        \\n        vec4 norm = taylorInvSqrt(vec4(dot(p0, p0), dot(p1, p1), dot(p2, p2), dot(p3, p3)));\\n        p0 *= norm.x;\\n        p1 *= norm.y;\\n        p2 *= norm.z;\\n        p3 *= norm.w;\\n        \\n        vec4 m = max(0.6 - vec4(dot(x0, x0), dot(x1, x1), dot(x2, x2), dot(x3, x3)), 0.0);\\n        m = m * m;\\n        return 42.0 * dot(m*m, vec4(dot(p0, x0), dot(p1, x1), dot(p2, x2), dot(p3, x3)));\\n      }\\n      \\n      void main() {\\n        vNormal = normalize(normalMatrix * normal);\\n        \\n        float slowTime = time * 0.3;\\n        vec3 pos = position;\\n        \\n        float noise = snoise(vec3(position.x * 0.5, position.y * 0.5, position.z * 0.5 + slowTime));\\n        pos += normal * noise * 0.2 * distortion * (1.0 + audioLevel);\\n        \\n        vPosition = pos;\\n        gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);\\n      }\\n    `,\\n      fragmentShader: `\\n      uniform float time;\\n      uniform vec3 color;\\n      uniform float audioLevel;\\n      varying vec3 vNormal;\\n      varying vec3 vPosition;\\n      \\n      void main() {\\n        vec3 viewDirection = normalize(cameraPosition - vPosition);\\n        float fresnel = 1.0 - max(0.0, dot(viewDirection, vNormal));\\n        fresnel = pow(fresnel, 2.0 + audioLevel * 2.0);\\n        \\n        float pulse = 0.8 + 0.2 * sin(time * 2.0);\\n        \\n        vec3 finalColor = color * fresnel * pulse * (1.0 + audioLevel * 0.8);\\n        \\n        float alpha = fresnel * (0.7 - audioLevel * 0.3);\\n        \\n        gl_FragColor = vec4(finalColor, alpha);\\n      }\\n    `,\\n      wireframe: true,\\n      transparent: true\\n    });\\n    const outerSphere = new THREE.Mesh(outerGeometry, outerMaterial);\\n    anomalyObject.add(outerSphere);\\n    scene.add(anomalyObject);\\n    const glowGeometry = new THREE.SphereGeometry(radius * 1.2, 32, 32);\\n    const glowMaterial = new THREE.ShaderMaterial({\\n      uniforms: {\\n        time: {\\n          value: 0\\n        },\\n        color: {\\n          value: new THREE.Color(0xff4e42)\\n        },\\n        audioLevel: {\\n          value: 0\\n        }\\n      },\\n      vertexShader: `\\n      varying vec3 vNormal;\\n      varying vec3 vPosition;\\n      uniform float audioLevel;\\n      \\n      void main() {\\n        vNormal = normalize(normalMatrix * normal);\\n        vPosition = position * (1.0 + audioLevel * 0.2);\\n        gl_Position = projectionMatrix * modelViewMatrix * vec4(vPosition, 1.0);\\n      }\\n    `,\\n      fragmentShader: `\\n      varying vec3 vNormal;\\n      varying vec3 vPosition;\\n      uniform vec3 color;\\n      uniform float time;\\n      uniform float audioLevel;\\n      \\n      void main() {\\n        vec3 viewDirection = normalize(cameraPosition - vPosition);\\n        float fresnel = 1.0 - max(0.0, dot(viewDirection, vNormal));\\n        fresnel = pow(fresnel, 3.0 + audioLevel * 3.0);\\n        \\n        float pulse = 0.5 + 0.5 * sin(time * 2.0);\\n        float audioFactor = 1.0 + audioLevel * 3.0;\\n        \\n        vec3 finalColor = color * fresnel * (0.8 + 0.2 * pulse) * audioFactor;\\n        \\n        float alpha = fresnel * (0.3 * audioFactor) * (1.0 - audioLevel * 0.2);\\n        \\n        gl_FragColor = vec4(finalColor, alpha);\\n      }\\n    `,\\n      transparent: true,\\n      side: THREE.BackSide,\\n      blending: THREE.AdditiveBlending,\\n      depthWrite: false\\n    });\\n    const glowSphere = new THREE.Mesh(glowGeometry, glowMaterial);\\n    anomalyObject.add(glowSphere);\\n    return function updateAnomaly(time, audioLevel) {\\n      outerMaterial.uniforms.time.value = time;\\n      outerMaterial.uniforms.audioLevel.value = audioLevel;\\n      outerMaterial.uniforms.distortion.value = distortionAmount;\\n      glowMaterial.uniforms.time.value = time;\\n      glowMaterial.uniforms.audioLevel.value = audioLevel;\\n    };\\n  }\\n\\n  function updateWireframeDistortion(amount) {\\n    distortionAmount = amount;\\n    updateGlow = createAnomalyObject();\\n  }\\n\\n  function updateWireframeResolution(newResolution) {\\n    resolution = newResolution;\\n    updateGlow = createAnomalyObject();\\n  }\\n\\n  function onWindowResize() {\\n    camera.aspect = window.innerWidth \\/ window.innerHeight;\\n    camera.updateProjectionMatrix();\\n    renderer.setSize(window.innerWidth, window.innerHeight);\\n    resizeCanvas();\\n    resizeCircularCanvas();\\n    resizeSpectrumCanvas();\\n  }\\n\\n  function updateAnomalyPosition() {\\n    if (!isDraggingAnomaly) {\\n      anomalyVelocity.x *= 0.95;\\n      anomalyVelocity.y *= 0.95;\\n      anomalyTargetPosition.x += anomalyVelocity.x * 0.1;\\n      anomalyTargetPosition.y += anomalyVelocity.y * 0.1;\\n      const springStrength = 0.1;\\n      anomalyVelocity.x -= anomalyTargetPosition.x * springStrength;\\n      anomalyVelocity.y -= anomalyTargetPosition.y * springStrength;\\n      if (\\n        Math.abs(anomalyTargetPosition.x) < 0.05 &&\\n        Math.abs(anomalyTargetPosition.y) < 0.05\\n      ) {\\n        anomalyTargetPosition.set(0, 0, 0);\\n        anomalyVelocity.set(0, 0);\\n      }\\n      const bounceThreshold = 3;\\n      const bounceDamping = 0.8;\\n      if (Math.abs(anomalyTargetPosition.x) > bounceThreshold) {\\n        anomalyVelocity.x = -anomalyVelocity.x * bounceDamping;\\n        anomalyTargetPosition.x =\\n          Math.sign(anomalyTargetPosition.x) * bounceThreshold;\\n        if (Math.abs(anomalyVelocity.x) > 0.1) {\\n          addTerminalMessage(\\n            \\\"ANOMALY BOUNDARY COLLISION DETECTED. ENERGY TRANSFER: \\\" +\\n              (Math.abs(anomalyVelocity.x) * 100).toFixed(0) +\\n              \\\" UNITS\\\"\\n          );\\n        }\\n      }\\n      if (Math.abs(anomalyTargetPosition.y) > bounceThreshold) {\\n        anomalyVelocity.y = -anomalyVelocity.y * bounceDamping;\\n        anomalyTargetPosition.y =\\n          Math.sign(anomalyTargetPosition.y) * bounceThreshold;\\n        if (Math.abs(anomalyVelocity.y) > 0.1) {\\n          addTerminalMessage(\\n            \\\"ANOMALY BOUNDARY COLLISION DETECTED. ENERGY TRANSFER: \\\" +\\n              (Math.abs(anomalyVelocity.y) * 100).toFixed(0) +\\n              \\\" UNITS\\\"\\n          );\\n        }\\n      }\\n    }\\n    anomalyObject.position.x +=\\n      (anomalyTargetPosition.x - anomalyObject.position.x) * 0.2;\\n    anomalyObject.position.y +=\\n      (anomalyTargetPosition.y - anomalyObject.position.y) * 0.2;\\n    if (!isDraggingAnomaly) {\\n      anomalyObject.rotation.x += anomalyVelocity.y * 0.01;\\n      anomalyObject.rotation.y += anomalyVelocity.x * 0.01;\\n    }\\n  }\\n\\n  function animate() {\\n    requestAnimationFrame(animate);\\n    controls.update();\\n    const time = clock.getElapsedTime();\\n    let audioLevel = 0;\\n    if (audioAnalyser) {\\n      audioAnalyser.getByteFrequencyData(frequencyData);\\n      let sum = 0;\\n      for (let i = 0; i < frequencyData.length; i++) {\\n        sum += frequencyData[i];\\n      }\\n      audioLevel = ((sum \\/ frequencyData.length \\/ 255) * audioSensitivity) \\/ 5;\\n      drawCircularVisualizer();\\n      drawSpectrumAnalyzer();\\n      updateAudioWave();\\n      calculateAudioMetrics();\\n    }\\n    updateAnomalyPosition();\\n    if (updateGlow) {\\n      updateGlow(time, audioLevel);\\n    }\\n    if (updateParticles) {\\n      updateParticles(time);\\n    }\\n    const rotationSpeed = parseFloat(\\n      document.getElementById(\\\"rotation-slider\\\").value\\n    );\\n    if (anomalyObject) {\\n      const audioRotationFactor = 1 + audioLevel * audioReactivity;\\n      anomalyObject.rotation.y += 0.005 * rotationSpeed * audioRotationFactor;\\n      anomalyObject.rotation.z += 0.002 * rotationSpeed * audioRotationFactor;\\n    }\\n    renderer.render(scene, camera);\\n  }\\n  initThreeJS();\\n  updateParticles = createBackgroundParticles();\\n  updateGlow = createAnomalyObject();\\n  const rotationSlider = document.getElementById(\\\"rotation-slider\\\");\\n  const resolutionSlider = document.getElementById(\\\"resolution-slider\\\");\\n  const distortionSlider = document.getElementById(\\\"distortion-slider\\\");\\n  const reactivitySlider = document.getElementById(\\\"reactivity-slider\\\");\\n  const sensitivitySlider = document.getElementById(\\\"sensitivity-slider\\\");\\n  rotationSlider.addEventListener(\\\"input\\\", function () {\\n    document.getElementById(\\\"rotation-value\\\").textContent = this.value;\\n  });\\n  resolutionSlider.addEventListener(\\\"input\\\", function () {\\n    const value = parseInt(this.value);\\n    document.getElementById(\\\"resolution-value\\\").textContent = value;\\n    updateWireframeResolution(value);\\n  });\\n  distortionSlider.addEventListener(\\\"input\\\", function () {\\n    const value = parseFloat(this.value);\\n    document.getElementById(\\\"distortion-value\\\").textContent = value.toFixed(1);\\n    updateWireframeDistortion(value);\\n  });\\n  reactivitySlider.addEventListener(\\\"input\\\", function () {\\n    audioReactivity = parseFloat(this.value);\\n    document.getElementById(\\n      \\\"reactivity-value\\\"\\n    ).textContent = audioReactivity.toFixed(1);\\n  });\\n  sensitivitySlider.addEventListener(\\\"input\\\", function () {\\n    audioSensitivity = parseFloat(this.value);\\n    document.getElementById(\\n      \\\"sensitivity-value\\\"\\n    ).textContent = audioSensitivity.toString();\\n  });\\n  document.getElementById(\\\"reset-btn\\\").addEventListener(\\\"click\\\", function () {\\n    rotationSlider.value = 1.0;\\n    document.getElementById(\\\"rotation-value\\\").textContent = \\\"1.0\\\";\\n    resolutionSlider.value = 32;\\n    document.getElementById(\\\"resolution-value\\\").textContent = \\\"32\\\";\\n    distortionSlider.value = 1.0;\\n    document.getElementById(\\\"distortion-value\\\").textContent = \\\"1.0\\\";\\n    reactivitySlider.value = 1.0;\\n    document.getElementById(\\\"reactivity-value\\\").textContent = \\\"1.0\\\";\\n    audioReactivity = 1.0;\\n    sensitivitySlider.value = 5.0;\\n    document.getElementById(\\\"sensitivity-value\\\").textContent = \\\"5.0\\\";\\n    audioSensitivity = 5.0;\\n    distortionAmount = 1.0;\\n    resolution = 32;\\n    updateGlow = createAnomalyObject();\\n    anomalyTargetPosition.set(0, 0, 0);\\n    anomalyVelocity.set(0, 0);\\n    anomalyObject.position.set(0, 0, 0);\\n    showNotification(\\\"SETTINGS RESET TO DEFAULT VALUES\\\");\\n  });\\n  document.getElementById(\\\"analyze-btn\\\").addEventListener(\\\"click\\\", function () {\\n    this.textContent = \\\"ANALYZING...\\\";\\n    this.disabled = true;\\n    document.getElementById(\\\"stability-bar\\\").style.width = \\\"45%\\\";\\n    document.getElementById(\\\"stability-value\\\").textContent = \\\"45%\\\";\\n    document.getElementById(\\\"status-indicator\\\").style.color = \\\"#ff00a0\\\";\\n    setTimeout(() => {\\n      this.textContent = \\\"ANALYZE\\\";\\n      this.disabled = false;\\n      addTerminalMessage(\\n        \\\"ANALYSIS COMPLETE. ANOMALY SIGNATURE IDENTIFIED.\\\",\\n        true\\n      );\\n      showNotification(\\\"ANOMALY ANALYSIS COMPLETE\\\");\\n      document.getElementById(\\\"mass-value\\\").textContent = (\\n        Math.random() * 2 +\\n        1\\n      ).toFixed(3);\\n      document.getElementById(\\\"energy-value\\\").textContent =\\n        (Math.random() * 9 + 1).toFixed(1) + \\\"e8 J\\\";\\n      document.getElementById(\\\"variance-value\\\").textContent = (\\n        Math.random() * 0.01\\n      ).toFixed(4);\\n      document.getElementById(\\\"peak-value\\\").textContent =\\n        (Math.random() * 200 + 100).toFixed(1) + \\\" HZ\\\";\\n      document.getElementById(\\\"amplitude-value\\\").textContent = (\\n        Math.random() * 0.5 +\\n        0.3\\n      ).toFixed(2);\\n      const phases = [\\\"π\\/4\\\", \\\"π\\/2\\\", \\\"π\\/6\\\", \\\"3π\\/4\\\"];\\n      document.getElementById(\\\"phase-value\\\").textContent =\\n        phases[Math.floor(Math.random() * phases.length)];\\n    }, 3000);\\n  });\\n  document.querySelectorAll(\\\".demo-track-btn\\\").forEach((btn) => {\\n    btn.addEventListener(\\\"click\\\", function () {\\n      if (!isAudioInitialized) {\\n        initAudio();\\n      }\\n      if (audioContext && audioContext.state === \\\"suspended\\\") {\\n        audioContext.resume();\\n      }\\n      const url = this.dataset.url;\\n      currentAudioSrc = url;\\n      document.querySelectorAll(\\\".demo-track-btn\\\").forEach((b) => {\\n        b.classList.remove(\\\"active\\\");\\n      });\\n      this.classList.add(\\\"active\\\");\\n      loadAudioFromURL(url);\\n    });\\n  });\\n  document.getElementById(\\\"file-btn\\\").addEventListener(\\\"click\\\", function () {\\n    if (!isAudioInitialized) {\\n      initAudio();\\n    }\\n    if (audioContext && audioContext.state === \\\"suspended\\\") {\\n      audioContext.resume();\\n    }\\n    document.getElementById(\\\"audio-file-input\\\").click();\\n  });\\n  document\\n    .getElementById(\\\"audio-file-input\\\")\\n    .addEventListener(\\\"change\\\", function (e) {\\n      if (e.target.files.length > 0) {\\n        const file = e.target.files[0];\\n        initAudioFile(file);\\n      }\\n    });\\n  \\/\\/ Audio player ended event\\n  document\\n    .getElementById(\\\"audio-player\\\")\\n    .addEventListener(\\\"ended\\\", function () {\\n      isAudioPlaying = false;\\n      zoomCameraForAudio(false);\\n      addTerminalMessage(\\\"AUDIO PLAYBACK COMPLETE.\\\");\\n    });\\n\\n  function showNotification(message) {\\n    const notification = document.getElementById(\\\"notification\\\");\\n    notification.textContent = message;\\n    notification.style.opacity = 1;\\n    setTimeout(() => {\\n      notification.style.opacity = 0;\\n    }, 3000);\\n  }\\n\\n  function makePanelDraggable(element, handle = null) {\\n    Draggable.create(element, {\\n      type: \\\"x,y\\\",\\n      edgeResistance: 0.65,\\n      bounds: document.body,\\n      handle: handle || element,\\n      inertia: true,\\n      throwResistance: 0.85,\\n      onDragStart: function () {\\n        const panels = document.querySelectorAll(\\n          \\\".terminal-panel, .control-panel, .spectrum-analyzer, .data-panel\\\"\\n        );\\n        let maxZ = 10;\\n        panels.forEach((panel) => {\\n          const z = parseInt(window.getComputedStyle(panel).zIndex);\\n          if (z > maxZ) maxZ = z;\\n        });\\n        element.style.zIndex = maxZ + 1;\\n        addTerminalMessage(`PANEL DRAG INITIATED: ${element.className}`);\\n      },\\n      onDragEnd: function () {\\n        addTerminalMessage(\\n          `DRAGGABLE.INERTIA({TARGET: '${\\n            element.className\\n          }', VELOCITY: {X: ${this.getVelocity(\\\"x\\\").toFixed(\\n            2\\n          )}, Y: ${this.getVelocity(\\\"y\\\").toFixed(2)}}});`,\\n          true\\n        );\\n      }\\n    });\\n  }\\n  makePanelDraggable(\\n    document.querySelector(\\\".control-panel\\\"),\\n    document.getElementById(\\\"control-panel-handle\\\")\\n  );\\n  makePanelDraggable(document.querySelector(\\\".terminal-panel\\\"));\\n  makePanelDraggable(\\n    document.querySelector(\\\".spectrum-analyzer\\\"),\\n    document.getElementById(\\\"spectrum-handle\\\")\\n  );\\n});\\n\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"normalize\",\"js_library\":null,\"created_at\":\"2025-05-10T13:28:01.428Z\",\"updated_at\":\"2025-05-30T07:13:19.272Z\",\"title\":\"[gsap\\/threejs\\/inertia] ❍  Audio Visualizer with THREEJS - Challenge #2 \\/ Entry 1\",\"description\":\"\",\"slug_hash\":\"yyyRgry\",\"head\":\"\",\"private\":false,\"slug_hash_private\":\"c5c33e3596c38f57bfa2b8f1b823a142\",\"has_animation\":true,\"team_id\":0,\"css_prefix\":\"autoprefixer\",\"template\":false,\"parent_id\":0,\"comments_count\":2,\"custom_screenshot_filename\":null,\"loves_count\":229,\"pick\":false,\"popularity\":1631,\"views_count\":4657,\"pick_visible_at\":null,\"cpid\":\"0196ba61-9c94-7b9a-b7ad-548d615dc0a4\",\"is_new_editor_pen\":false,\"access\":\"Public\",\"pen_hash\":null,\"hashid\":\"yyyRgry\"}"}