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

    :root {
      --bg-color: #12100f;
      --grid-color: rgba(255, 240, 230, 0.05);
      --text-primary: #f3ede9;
      --text-secondary: #c2b8b2;
      --text-highlight: #ff4e42;
      --accent-primary: #ff4e42;
      --accent-secondary: #c2362f;
      --accent-tertiary: #ffb3ab;
      --panel-bg: rgba(30, 26, 24, 0.7);
      --panel-border: rgba(255, 78, 66, 0.3);
      --panel-highlight: rgba(255, 78, 66, 0.1);
      --scanner-line: rgba(255, 78, 66, 0.7);
    }

    * {
      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: grab;
    }

    #three-container:active {
      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(--accent-primary);
      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(--accent-primary);
      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(--accent-primary);
      border-left: 2px solid var(--accent-primary);
    }

    .scanner-frame .corner-tr {
      position: absolute;
      top: -1px;
      right: -1px;
      width: 20px;
      height: 20px;
      border-top: 2px solid var(--accent-primary);
      border-right: 2px solid var(--accent-primary);
    }

    .scanner-frame .corner-bl {
      position: absolute;
      bottom: -1px;
      left: -1px;
      width: 20px;
      height: 20px;
      border-bottom: 2px solid var(--accent-primary);
      border-left: 2px solid var(--accent-primary);
    }

    .scanner-frame .corner-br {
      position: absolute;
      bottom: -1px;
      right: -1px;
      width: 20px;
      height: 20px;
      border-bottom: 2px solid var(--accent-primary);
      border-right: 2px solid var(--accent-primary);
    }

    .scanner-id {
      position: absolute;
      bottom: -30px;
      left: 0;
      font-size: 0.75rem;
      color: var(--accent-primary);
    }

    .scanner-id-right {
      position: absolute;
      bottom: -30px;
      right: 0;
      font-size: 0.75rem;
      color: var(--accent-primary);
    }

    .scanner-line {
      position: absolute;
      width: 100%;
      height: 2px;
      background: var(--scanner-line);
      top: 0;
      box-shadow: 0 0 10px var(--accent-primary);
      animation: scan 4s linear infinite;
    }

    @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;
      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(--accent-primary);
      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;
      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;
      animation: blink 1s infinite;
    }

    @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);
      animation: pulse 4s infinite;
    }

    @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;
    }