@import url("https://fonts.cdnfonts.com/css/thegoodmonolith");

	* { margin: 0; padding: 0; box-sizing: border-box;}
body { background-color: var(--bg-color); color: var(--text-primary); font-family: "TheGoodMonolith", monospace; overflow: hidden; height: 100vh; text-transform: uppercase; font-size: 1rem;}
button,
input,
select,
textarea { font-family: inherit;}
.space-background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url("https://assets.codepen.io/7558/space-bg-002.jpg"); background-size: cover; background-position: center; z-index: 0; opacity: 0.8;}
#three-container { position: absolute; width: 100%; height: 100%; z-index: 1; cursor: -webkit-grab; cursor: grab;}
#three-container:active { cursor: -webkit-grabbing; cursor: grabbing;}
.interface-container { position: relative; width: 100%; height: 100vh; z-index: 2; pointer-events: none; padding: 1.25rem; display: flex; flex-direction: column; justify-content: space-between;}
.grid-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(to right,var(--grid-color) 1px,transparent 1px),linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; z-index: 0;}
.header { display: flex; justify-content: space-between; padding: 1.25rem;}
.header-item { font-size: 0.75rem; color: var(--text-secondary);}
.scanner-frame { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; height: 400px; border: 1px solid var(--border-color); display: flex; justify-content: center; align-items: center; pointer-events: none;}
.scanner-frame::before,
.scanner-frame::after { content: ""; position: absolute; width: 20px; height: 20px; border-color: var(--border-color); border-style: solid;}
.scanner-frame::before { top: -1px; left: -1px; border-width: 2px 0 0 2px;}
.scanner-frame::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0;}
.scanner-frame .corner-tl { position: absolute; top: -1px; left: -1px; width: 20px; height: 20px; border-top: 2px solid var(--border-color); border-left: 2px solid var(--border-color);}
.scanner-frame .corner-tr { position: absolute; top: -1px; right: -1px; width: 20px; height: 20px; border-top: 2px solid var(--border-color); border-right: 2px solid var(--border-color);}
.scanner-frame .corner-bl { position: absolute; bottom: -1px; left: -1px; width: 20px; height: 20px; border-bottom: 2px solid var(--border-color); border-left: 2px solid var(--border-color);}
.scanner-frame .corner-br { position: absolute; bottom: -1px; right: -1px; width: 20px; height: 20px; border-bottom: 2px solid var(--border-color); border-right: 2px solid var(--border-color);}
.scanner-id { position: absolute; bottom: -30px; left: 0; font-size: 0.75rem; color: var(--border-color);}
.scanner-id-right { position: absolute; bottom: -30px; right: 0; font-size: 0.75rem; color: var(--border-color);}
.scanner-line { position: absolute; width: 100%; height: 2px; background: var(--scanner-line); top: 0; box-shadow: 0 0 10px var(--border-color); -webkit-animation: scan 4s linear infinite;         animation: scan 4s linear infinite;}
@-webkit-keyframes scan { 0% {   top: 0; }
  100% {   top: 100%; }
}

@keyframes scan { 0% {   top: 0; }
  100% {   top: 100%; }
}

.data-panels { display: flex; justify-content: space-between; padding: 0 1.25rem; margin-bottom: 1.25rem;}
.data-panel { width: 300px; background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 5px; padding: 0.9375rem; -webkit-backdrop-filter: blur(8px);         backdrop-filter: blur(8px); pointer-events: auto;}
.data-panel-title { font-size: 0.875rem; color: var(--accent-primary); margin-bottom: 0.625rem; display: flex; align-items: center; justify-content: space-between;}
.data-readouts { margin-top: 0.625rem;}
.data-row { display: flex; justify-content: space-between; margin-bottom: 0.3125rem; font-size: 0.75rem;}
.data-label { color: var(--text-secondary);}
.data-value { color: var(--text-primary);}
.data-bar { height: 6px; background: rgba(255, 255, 255, 0.1); margin: 0.625rem 0; position: relative; border-radius: 3px;}
.data-bar-fill { height: 100%; background: var(--bar-fill); border-radius: 3px; transition: width 0.5s;}
.waveform { width: 100%; height: 50px; margin: 0.625rem 0; display: flex; align-items: center; position: relative;}
.waveform-canvas { width: 100%; height: 100%;}
.control-panel { width: 300px; background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 5px; padding: 0.9375rem; position: absolute; top: 20px; left: 20px; -webkit-backdrop-filter: blur(8px);         backdrop-filter: blur(8px); pointer-events: auto; z-index: 10;}
.control-panel h3 { font-size: 0.875rem; color: var(--accent-primary); margin-bottom: 0.9375rem;}
.control-group { margin-bottom: 0.9375rem;}
.control-row { display: flex; justify-content: space-between; margin-bottom: 0.5rem;}
.control-label { font-size: 0.75rem; color: var(--text-secondary);}
.control-value { font-size: 0.75rem; color: var(--text-primary);}
.slider-container { width: 100%; display: flex; flex-direction: column;}
.slider { -webkit-appearance: none; width: 100%; height: 6px; background: rgba(255, 255, 255, 0.1); outline: none; border-radius: 3px;}
.slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--accent-primary); cursor: pointer;}
.buttons { display: flex; gap: 0.625rem; margin-top: 0.9375rem;}
.btn { flex: 1; padding: 0.5rem 0; background: var(--panel-highlight); border: 1px solid var(--panel-border); color: var(--accent-primary); font-size: 0.75rem; border-radius: 3px; cursor: pointer; transition: all 0.2s;}
.btn:hover { background: var(--panel-border);}
.terminal-panel { position: absolute; left: 20px; bottom: 20px; width: 500px; height: 150px; background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 5px; overflow: hidden; pointer-events: auto; z-index: 10;}
.terminal-header { padding: 0.5rem 0.625rem; background: rgba(0, 0, 0, 0.3); font-size: 0.875rem; color: var(--accent-primary); display: flex; justify-content: space-between; align-items: center;}
.panel-header { display: flex; justify-content: space-between; align-items: center; flex-direction: row; margin-bottom: 1rem;}
.terminal-content { padding: 0.625rem; height: calc(100% - 31px); overflow-y: auto; font-size: 0.75rem; color: var(--text-secondary); line-height: 1.4;}
.terminal-line { margin-bottom: 0.3125rem;}
.command-line { color: white;}
.regular-line { color: var(--text-highlight);}
.typing { position: relative;}
.typing::after { content: "|"; position: absolute; -webkit-animation: blink 1s infinite;         animation: blink 1s infinite;}
@-webkit-keyframes blink { 0%,
  100% {   opacity: 1; }
  50% {   opacity: 0; }
}

@keyframes blink { 0%,
  100% {   opacity: 1; }
  50% {   opacity: 0; }
}

.loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg-color); display: flex; justify-content: center; align-items: center; z-index: 1000; transition: opacity 0.5s;}
.loading-container { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; max-width: 500px; padding: 1.25rem;}
.preloader-canvas-container { width: 180px; height: 180px;}
.loading-text { margin-top: 1.25rem; text-align: center; color: var(--accent-primary); letter-spacing: 2px; font-size: 0.875rem;}
.notification { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: var(--panel-bg); border: 1px solid var(--panel-border); padding: 0.625rem 1.25rem; border-radius: 5px; font-size: 0.75rem; color: var(--accent-primary); opacity: 0; transition: opacity 0.3s; z-index: 100;}
.drag-handle { cursor: move; width: auto; height: 100%; color: var(--accent-primary);}
.particle-trail { position: absolute; width: 10px; height: 10px; border-radius: 50%; pointer-events: none; opacity: 0.7; transition: opacity 0.5s;}
.circular-visualizer { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 450px; height: 450px; pointer-events: none; z-index: 5;}
.circular-visualizer canvas { width: 100%; height: 100%;}
.audio-wave { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 500px; height: 500px; border-radius: 50%; background: transparent; border: 1px solid rgba(255, 78, 66, 0.1); pointer-events: none; z-index: 3;}
.audio-wave::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; border-radius: 50%; border: 1px solid rgba(255, 78, 66, 0.05); -webkit-animation: pulse 4s infinite;         animation: pulse 4s infinite;}
@-webkit-keyframes pulse { 0% {   width: 100%;   height: 100%;   opacity: 0.5; }
  50% {   width: 120%;   height: 120%;   opacity: 0; }
  100% {   width: 100%;   height: 100%;   opacity: 0.5; }
}

@keyframes pulse { 
    0% {   width: 100%;   height: 100%;   opacity: 0.5; }
    50% {   width: 120%;   height: 120%;   opacity: 0; }
  100% {   width: 100%;   height: 100%;   opacity: 0.5; }
}

.spectrum-analyzer { position: absolute; bottom: 20px; right: 20px; width: 400px; background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 5px; overflow: hidden; pointer-events: auto; z-index: 10;}
.spectrum-header { padding: 0.5rem 0.625rem; background: rgba(0, 0, 0, 0.3); font-size: 0.875rem; color: var(--accent-primary); display: flex; justify-content: space-between; align-items: center;}
.spectrum-content { padding: 0.625rem; position: relative;}
.spectrum-canvas { width: 100%; height: 120px; display: block;}
.audio-controls { display: flex; flex-direction: column; gap: 0.625rem; margin-top: 0.9375rem; padding: 0 0.625rem 0.625rem;}
.audio-file-input { display: none;}
.audio-file-btn { display: block; padding: 0.5rem 0; background: var(--panel-highlight); border: 1px solid var(--panel-border); color: var(--accent-primary); font-size: 0.75rem; border-radius: 3px; cursor: pointer; transition: all 0.2s; text-align: center; margin-bottom: 0.625rem;}
.audio-file-btn:hover { background: var(--panel-border);}
.audio-file-label { display: block; padding: 0.5rem 0.625rem; background: rgba(0, 0, 0, 0.2); color: var(--accent-primary); font-size: 0.75rem; border-radius: 3px; margin-bottom: 0.625rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.audio-player { width: 100%; margin-bottom: 0.625rem;}
.controls-row { display: flex; gap: 0.625rem; margin-bottom: 0.625rem;}
.audio-sensitivity-label { display: flex; justify-content: space-between; margin-bottom: 0.3125rem; font-size: 0.75rem;}
.audio-sensitivity-value { color: var(--accent-primary);}
.controls-row { display: flex; gap: 0.625rem; margin-bottom: 0.625rem;}
.demo-tracks { margin-top: 0.625rem; margin-bottom: 0.9375rem;}
.demo-tracks-label { font-size: 0.75rem; color: var(--text-secondary); margin-bottom: 0.3125rem; display: block;}
.demo-track-btn { display: inline-block; padding: 0.3125rem 0.625rem; margin-right: 0.3125rem; margin-bottom: 0.3125rem; background: var(--panel-highlight); border: 1px solid var(--panel-border); color: var(--accent-primary); font-size: 0.6875rem; border-radius: 3px; cursor: pointer; transition: all 0.2s;}
.demo-track-btn:hover { background: var(--panel-border);}
.demo-track-btn.active { background: var(--accent-primary); color: #000;}
.youtube-input { display: flex; margin-top: 0.625rem; margin-bottom: 0.625rem;}
.youtube-url { flex: 1; padding: 0.5rem; background: rgba(0, 0, 0, 0.2); border: 1px solid var(--panel-border); color: var(--text-primary); font-size: 0.75rem; border-radius: 3px 0 0 3px;}
.youtube-load-btn { padding: 0.5rem 0.625rem; background: var(--panel-highlight); border: 1px solid var(--panel-border); border-left: none; color: var(--accent-primary); font-size: 0.75rem; border-radius: 0 3px 3px 0; cursor: pointer; transition: all 0.2s;}
.youtube-load-btn:hover { background: var(--panel-border);}
.youtube-error { color: var(--accent-tertiary); font-size: 0.6875rem; margin-top: 0.3125rem; display: none;}
.preloader-canvas-container { position: relative;}
.preloader-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
/* Floating particles */
.floating-particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4;
}