:root {
    --techno-bg: #050507;
    --techno-surface: #0a0b10;
    --techno-surface-elevated: #12141c;
    --techno-border: #222634;
    --techno-border-bright: #3d4358;
    --techno-text: #e2e5f0;
    --techno-text-dim: #6c7287;
    --techno-accent: #ffffff;
  }

  .font-techno {
    font-family: 'JetBrains Mono', monospace;
  }

  .techno-panel {
    background-color: var(--techno-surface);
    border: 1px solid var(--techno-border);
  }

  .techno-btn {
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 10px;
    font-weight: 700;
    padding: 6px 8px;
    border: 1px solid var(--techno-border);
    background-color: #0d0e14;
    color: #8e94a8;
    transition: all 0.15s ease;
    cursor: pointer;
  }
  .techno-btn:hover {
    border-color: #ffffff;
    color: #ffffff;
    background-color: #171922;
  }
  .techno-btn.active {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #ffffff !important;
  }

  .techno-slider {
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: #1e212b;
    border-radius: 0;
    outline: none;
  }
  .techno-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border: 1px solid #000000;
    cursor: pointer;
    border-radius: 0;
  }
  .techno-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: #ffffff;
    border: 1px solid #000000;
    cursor: pointer;
    border-radius: 0;
  }

  #viewport-wrapper:fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
  }
  #viewport-wrapper:-webkit-full-screen {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
  }

  .techno-scroll::-webkit-scrollbar {
    width: 4px;
  }
  .techno-scroll::-webkit-scrollbar-track {
    background: #08090c;
  }
  .techno-scroll::-webkit-scrollbar-thumb {
    background: #2b2e3b;
  }
  .techno-scroll::-webkit-scrollbar-thumb:hover {
    background: #50556b;
  }
  .key-chip {
    font-size: 9px;
    padding: 2px 5px;
    background: #161822;
    border: 1px solid #2e3345;
    color: #e2e5f0;
    font-weight: bold;
    border-radius: 3px;
  }
  .vu-bar {
    width: 3px;
    height: 12px;
    background-color: #222634;
    transition: height 0.05s ease, background-color 0.05s ease;
  }
  .vu-bar.active {
    background-color: #22c55e;
  }
  .stem-toggle {
    transition: all 0.15s ease;
    cursor: pointer;
    background: #0d0f17;
  }
  .stem-toggle:hover {
    border-color: #3b4257;
  }
  .stem-toggle.active {
    background: #14231b;
    border-color: #22c55e !important;
  }
  .stem-toggle.active span {
    color: #4ade80 !important;
  }
  .stem-indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #373b4d;
    transition: all 0.15s ease;
    display: inline-block;
  }
  .stem-toggle.active .stem-indicator {
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.85);
  }
  .stem-row {
    background: #090a0e;
    border: 1px solid #1c1f2b;
    padding: 5px 8px;
    transition: border-color 0.15s ease;
  }
  .stem-row:hover {
    border-color: #2b3042;
  }